// declaring the class
var timedSlideShow = Class.create();

// implementing the class
timedSlideShow.prototype = {
	initialize: function(image_list_container, title_container, page_container) {
		if(!$(image_list_container))
			throw "timedSlideShow could not find the element: " + image_list_container;
		if(!$(image_list_container))
			throw "timedSlideShow could not find the element: " + title_container;	
		this.delay = 7000;
		this.title_container = title_container;
		this.image_list_container = image_list_container;
		this.activeImage = 0;
		this.timer = false;
		this.imgs = $$("ul#image-candy li img");
		for(var i=0; i<this.imgs.length; i++){
			if (i > 0) {
				this.imgs[i].hide();
			}else{
				$(title_container).innerHTML = this.imgs[i].getAttribute("title");	
			}
			this.imgs[i].setAttribute("id","slide-image-" + i);
			li = new Element('li');
			li.setAttribute("id",'slide-page-'+i);
			a = new Element('a');
			if (i == 0) li.addClassName('current-page-candy');
			a.update(i + 1);
			a.setAttribute("href","javascript:void(0);");
			Event.observe(a,'click',this.force.bindAsEventListener(this, i));
			li.update(a);
			$(page_container).insert(li);
		}
		this.timer = setTimeout(this.next.bind(this), this.delay);
	
	},
	next: function() {
		$('slide-page-' + this.activeImage).removeClassName('current-page-candy');
		//$('slide-image-' + this.activeImage).hide();
		Effect.Fade('slide-image-' + this.activeImage);
		(this.activeImage == this.imgs.length-1) ? this.activeImage = 0 : this.activeImage ++;
		$('slide-page-' + this.activeImage).addClassName('current-page-candy');
		//$('slide-image-' + this.activeImage).show();
		this.timer = setTimeout("Effect.Appear('slide-image-" + this.activeImage + "', { duration: 1.5 });", 0);
		$(this.title_container).innerHTML = $('slide-image-' + this.activeImage).getAttribute("title");
		this.timer = setTimeout(this.next.bind(this), this.delay);
	},
	force: function(obj, val) {
		clearTimeout(this.timer);
		$('slide-page-' + this.activeImage).removeClassName('current-page-candy');
		Effect.Fade('slide-image-' + this.activeImage);
		this.activeImage = val;
		$('slide-page-' + this.activeImage).addClassName('current-page-candy');
		this.timer = setTimeout("Effect.Appear('slide-image-" + this.activeImage + "', { duration: 1.5 });", 0);		
		$(this.title_container).innerHTML = $('slide-image-' + this.activeImage).getAttribute("title");
		this.timer = setTimeout(this.next.bind(this), this.delay);
	}
};