var Slideshow = Class.create();

Slideshow.prototype = {

	_id: false,

	_images: false,

	_imageDivs: false,

	_controls: false,
	
	options: {
		default_image_id: false,
		autoplay: true,
		duration: 20
	},
	
	Version: '1.0'

}

Object.extend(Slideshow.prototype, {

	initialize: function(container, images) {
	
		this.options = Object.extend(this.options, arguments[2] || {});

		this._images = new Hash();

		this._imageDivs = new Hash();

		var containerObj = $(container);

		if(!containerObj) return false;				

		this._container  = containerObj;

		if(!images || images.length == 0) return false;

		this._controls = new Element("ul", { 'class':'controls' });
		// this._controls.setAttribute("class","controls");
		
		images.each(function(image, i) {

			image.control_label = (!image.control_label)?i+1:image.control_label;
			
			var li = this.create_control(image);
									
			this._controls.appendChild(li);
			
			this._images.set(image.id, image);

		}, this);

		this._id = this.options.default_image_id || this._images.keys()[0];

		this.toggle_control(this._id);

		this._container.select("div.image").each(function(imageDiv) {

			var image = this._images.get(imageDiv.id);
			
			if(!image) return false;

			this._imageDivs.set(imageDiv.id, imageDiv);

			if(this._id == imageDiv.id) {
				imageDiv.show();
			} else {
				imageDiv.hide();
			}

		}, this);

		this._container.appendChild(this._controls);

		this.start();

	},

	toggle_control: function(control_id) {
		this._controls.childElements().each(function(li) {
			li.className = (control_id == li.id)?"selected":"";		
			//li.setAttribute("class", (control_id == li.id)?"selected":"");
		}, this);	
	},

	create_control: function(image) {
	
		var a = new Element("a", { href: image.link }).update(image.control_label);

		a.observe("click", function(e){
					
			this.options.autoplay = false;
			
			if(this._pe) this._pe.stop();
			
			this.load(image);
			
			Event.stop(e);
			
		}.bind(this));

		return a.wrap("li", { id: image.id });

	},

	create_image: function(image) {

		var img = new Element("img", {border: 0, alt: image.image_label, src: image.image_url});

		var a = img.wrap("a", { title: image.image_label, href: image.link });

		var div = a.wrap("div", { id:image.id, 'class':'image' }).hide();
		
		// div.setAttribute("class", "image");

		img.observe('load', function(e) {
		
			this.transition(this._imageDivs.get(this._id), div);

			this._imageDivs.set(div.id, div);

			this._id = div.id;
			
			this.toggle_control(image.id);

			this.start();
		
		}.bind(this));

		return div;

	},

	load: function(image) {

		if(image.id == this._id) return false;

		var div = this._imageDivs.get(image.id);
		if(!div) {

			if(this._pe) this._pe.stop();
			
			div = this.create_image(this._images.get(image.id));

			this._imageDivs.set(image.id, div);

			this._container.appendChild(div);

			return true;
			
		}

		this.toggle_control(image.id);

		this.transition(this._imageDivs.get(this._id), div);

		this._id = div.id;

		return true;

	},

	transition: function(start_element, end_element) {

		end_element.show();

		start_element.hide();

	},

	start: function() {

		if(!this.options.autoplay || this._images.length < 1) return false;

		this._pe = new PeriodicalExecuter(function(pe) {
			var i;
			var ids = this._images.keys();
			ids.each(function (id, position) {
				if(id == this._id) { i = position; return; }
			}.bind(this));
			
			if(i == ids.length-1) {
				i = 0 ;
			} else {
				i += 1;
			}
			this.load(this._images.get(ids[i]));
		}.bind(this), this.options.duration);
		
	}

});

Slideshow.Image = Class.create();

Slideshow.Image.prototype = {

	id: false,
	
	link: '#',
		
	image_url: false,
	
	image_label: '',	

	control_label: false,
	
	initialize: function(propeties) {
		Object.extend(this, propeties || {});
	}
}