var TemaPosterSlider = Class.create(
{
	currentImage: 0,
	imageArray: new Array(),
	buttonArray: new Array(),
	isActive: false,
	end: 0,
		
	initialize: function(posterContainerId, imageClassname, buttonClassname)
	{
		if($(posterContainerId))
		{
			if(!$$('.'+imageClassname)[0])
				return false;
			this.imageArray = $$('.'+imageClassname);
			this.buttonArray = $$('.'+buttonClassname);
			this.end = (this.imageArray.length-1);
			this.setObservers(this.buttonArray);
		}			
	},
	
	setObservers: function(btnArr)
	{
		
		var t1 = setInterval(function(t)
		{
			if(self.isActive == false)
			{
				if(self.currentImage < self.end)
					var index = (self.currentImage+1);
				else
					var index = 0;
				$(self.buttonArray[self.currentImage]).removeClassName('active')
				self.changeImage(index);
				$(self.buttonArray[index]).addClassName('active');
			}
			
		}.bind(this), 5000);
		
		var self = this;
		btnArr.each(function(btn)
		{
			$(btn).observe('click', function()
			{
				if(self.isActive == false)
				{
					clearInterval(t1);
					
					var index = btnArr.indexOf(this);
					if(index != self.currentImage)
					{
						$(self.buttonArray[self.currentImage]).removeClassName('active')
						self.changeImage(index);
						$(self.buttonArray[index]).addClassName('active');
					}					
				}
			});
		});
		
		if($('btn_next'))
		{
			$('btn_next').observe('click', function()
			{
				if(self.isActive == false)
				{
					clearInterval(t1);
					if(self.currentImage < self.end)
						var index = (self.currentImage+1);
					else
						var index = 0;
					$(self.buttonArray[self.currentImage]).removeClassName('active')
					self.changeImage(index);
					$(self.buttonArray[index]).addClassName('active');
				}
			});
		}
		
		
	},
	
	changeImage: function(index)
	{
		var self = this;
		
		var newImage = this.imageArray[index];

		var key = Math.floor(index/4);

		if($('numberBtns'))
			$('numberBtns').setStyle({'margin':'-'+(key*22)+'px 0 0 0'});
		
		new Effect.Appear(newImage,
		{
			beforeStart: function()
			{
				self.isActive = true;
				$(self.imageArray[self.currentImage]).setStyle({'zIndex':'0'});
				$(newImage).setStyle({'zIndex':'1'});
			},
			afterFinish: function()
			{
				$(self.imageArray[self.currentImage]).setStyle({'display':'none'});
				self.currentImage = index;
				self.isActive = false;
				
			},
			duration: 1,
			queue: { position: 'end', scope: 'TemaPosterSlider', limit: 1 }
		});
	}
});

document.observe('dom:loaded', function()
{
	var TemaPoster = new TemaPosterSlider('posterslider', 'img_poster', 'btn_poster');
});