/*
 *	Class Declaration
 */
var SlideElement = Class.create(
{
	initialize:function(element)
	{
		this.element = element;
		this.id = element.id;
		this.Hide();
	},
	
	Hide:function()
	{
		this.element.style.display = 'none';
	},
	
	Appear:function()
	{
		Effect.Appear(this.element.id);
	},
	
	Fade:function()
	{
		Effect.Fade(this.element.id);
	}
});

var Slide = Class.create(
{
	initialize:function()
	{
		this.image = Array();
		this.description = Array();
		this.length = 0;
	},
	
	Insert:function(image, description)
	{
		this.image.push(image);
		this.description.push(description);
		
		// update length property
		this.length++;
	},
	
	Appear:function(id)
	{
		this.GetImage(id).Appear();
		this.GetDescription(id).Appear();
	},
	
	Fade:function(id)
	{
		this.GetImage(id).Fade();
		this.GetDescription(id).Fade();
	},
	
	Hide:function(id)
	{
		this.GetImage(id).Hide();
		this.GetDescription(id).Hide();
	},
	
	GetImage:function(id)
	{
		return this.image[id];
	},
	
	GetDescription:function(id)
	{
		return this.description[id];
	}
})

/*
 * 	Method Declaration
 */
function InitializeSlides()
{
	slides = new Slide();
	
	for(var i = 1; $('liImageSlide' + i) && $('liDescriptionSlide' + i); i++)
	{
		// initiate and insert all objects into the array
		slides.Insert(new SlideElement($('liImageSlide' + i)), new SlideElement($('liDescriptionSlide' + i)));
		//$('liImageSlide' + i).style.position = 'absolute';
		//$('liDescriptionSlide' + i).style.position = 'absolute';
	}
}

function ChangeSlide()
{
	slides.Appear(nextSlide);
	
	slides.Hide((nextSlide + slides.length - 1) % slides.length);
	
	nextSlide = (nextSlide + 1) % slides.length;
	
	timer = setTimeout("ChangeSlide();", 10000);
}

/*
 *	Execution Code
 */
var nextSlide = 0;
var timer;
var slides;

window.onload = function()
{	
	// hide the list number
	$('olImageSlide').style.listStyleType = 'none';
	$('olDescriptionSlide').style.listStyleType = 'none';
	
	// initialize the slides
	InitializeSlides();
	
	ChangeSlide();
}