/* 

Here are the available options for this class:

The position option allows you to put the caption above or below the image.
position  : 'before' or 'after'

The alignment option allows you to specify the text-align of the <p> element. It adds a new class to the <p> element.
alignment : 'left' or 'center' or 'right'

*/

/* Let's create a new Class */
var AutoCaptioner = new Class({
	Implements: [Options, Events],
	
	/* Set up the default options of position: 'after' and alignment: 'center' */
	options: {
					images : [],
					position : 'after',
					alignment : 'center'
	},
	initialize: function(options){
		this.setOptions(options);
		this.addCaptions(this.options.images,this.options.alignment, this.options.position);
	},
	addCaptions : function(images, alignment, position){
	
		$$(images).each(function(el){			
		
		  
			var captionText = el.getProperty('title') || el.getProperty('alt');
			if ( captionText ) {
				var figure = new Element('div', {
					'class' : 'figure',
						'styles' : {
							'width' : el.get('width').toInt() + 10
						}
				});
				var caption = new Element('p', {
					'class' : 'caption',
					'html' : captionText
				})
				.addClass(alignment);
				figure.wraps(el);
				caption.inject(el,position);
			} else {
				alert('The image: "'+el.getProperty('src')+'" needs a title or alt value.');
			}
		});
	}
});

window.addEvent('domready', function() {

  /* Let's instantiate a new object */
  new AutoCaptioner({
	  /* set up the options below */
    images : $$('img.captioned'),
		position : 'after',
		alignment : 'center'
	});
		
});