/*
	Class: SlideShow
	
	Show a slide of images

*/
SlideShow = new Class({
		
	Implements: Options,
	
	options: {
		toggleSuffix: '.toggle',
		event: null,
		toggleOnEvent: 'mouseover',
		toggleOffEvent: 'mouseout'
	},
	
	
	initialize: function() {
		
		this.slideShow();
	},
	
	slideShow: function() {
		
		
		this.current_image = 0;
		
		//Get images in slideshow
		this.images = $('bannerImage').getElements('img');
		
		//Get buttons in slideshow
		this.buttons = $('buttonContainer').getElements('li');
		for(i = 0; i < this.buttons.length; i++) 
		{
			//alert(i);
			this.buttons[i].addEvent('click',this.getImage.bindWithEvent(this).pass(parseInt(i)));
		}		
		
		this.buttons[this.current_image].set('class', 'bannerNumberActive');
		$('bannerItem').set('html', $$('.streamerContent' + this.current_image).get('html'));
		
		
		this.slideControl = this.fadeImage.periodical(4000,this);		
		
	},
	
	fadeImage: function () {
		
		//Make transition between images.
		
		if(this.current_image != (this.images.length - 1))
		{	
			var current = this.current_image;
			var next	= this.current_image + 1;	
			
			var image 	= this.images[this.current_image];
			var image2	= this.images[this.current_image + 1];
			
			
			$(image).set('tween', {duration:'long'});
			$(image).fade(1, 0);
			
			$(image2).set('tween', {duration:'long'} );
			$(image2).fade(0, 1);			
			
			
			$(this.buttons[current]).className 	= 'slideshow_button';
			$(this.buttons[next]).className 	= 'bannerNumberActive';
			
			$('bannerItem').set('html', $$('.streamerContent' + next).get('html'));
			
			this.current_image = this.current_image + 1;
		}
		else
		{
			var current = (this.images.length - 1);
			var next	= 0;
			
			var image 	= this.images[this.current_image];
			var image2	= this.images[next];
			
			$(image).set('tween', {duration:'long'});
			$(image).fade(1, 0);
			
			$(image2).set('tween', {duration:'long'} );
			$(image2).fade(0, 1);
			
			$(this.buttons[current]).className = 'slideshow_button';
			$(this.buttons[next]).className = 'bannerNumberActive';
			
			$('bannerItem').set('html', $$('.streamerContent' + next).get('html'));
			
			this.current_image = 0;
		}	
		
	},
	
	otherImage: function () {
		
		//Make transition between images.
		
		if(this.current_image != (this.images.length - 1))
		{	
			var current = this.current_image;
			var next	= this.current_image + 1;	
			
			var image 	= this.images[this.current_image];
			var image2	= this.images[this.current_image + 1];			
			
			
			
			//image2.setStyle('position','relative');
			//image2.setStyle('top','-400px');
			
			var myEffect = new Fx.Morph(image, {duration: 350, transition: Fx.Transitions.Sine.easeOut});			
			myEffect.start({
							position: "relative",
							//top: '200px',
							height:'0px'
							
						});
			
			var myEffect2 = new Fx.Morph(image2, {duration: 350, transition: Fx.Transitions.Sine.easeIn});
			image2.setStyle('height','0px');
			myEffect2.start({
							position: "relative",
							//top: '200px',
							height:'296px',
							visibility:'visible'
							
						});
			
			
			//image.setStyle('visibility','hidden');
			//image.setStyle('height','200px');
			
			$(this.buttons[current]).removeClass('bannerNumberActive');
			$(this.buttons[next]).className 	= 'bannerNumberActive';
			
			$('bannerItem').set('html', $$('.streamerContent' + current).get('html'));
			
			//$('textContainer').innerHTML = $(image2).alt;
			
			this.current_image = this.current_image + 1;
		}
		else
		{
			var current = (this.images.length - 1);
			var next	= 0;
			
			var image 	= this.images[this.current_image];
			var image2	= this.images[next];
			
			var myEffect = new Fx.Morph(image, {duration: 350, transition: Fx.Transitions.Sine.easeOut});			
			myEffect.start({
							position: "relative",
							//top: '200px',
							height:'0px'
							
						});
			
			var myEffect2 = new Fx.Morph(image2, {duration: 350, transition: Fx.Transitions.Sine.easeIn});
			image2.setStyle('height','0px');
			myEffect2.start({
							position: "relative",
							//top: '200px',
							height:'296px',
							visibility:'visible'
							
						});
			
			$(this.buttons[current]).removeClass('bannerNumberActive');
			$(this.buttons[next]).className 	= 'bannerNumberActive';
			
			this.current_image = 0;
		}	
		
	},
	
	getImage: function (imageIndex) {
		
		if (!$defined(imageIndex))
		{
			imageIndex = 0;
		}
		
		for(i = 0; i < this.buttons.length; i++) {
			//this.buttons[i].set('class', 'slideshow_button');
			this.buttons[i].removeClass('bannerNumberActive');
		}
		
		//alert(imageIndex);
		
		$(this.buttons[imageIndex]).className = 'bannerNumberActive';
		
		var image = this.images[imageIndex];		
		var current = this.images[this.current_image];
		
		//set current to 0
		$(current).fade('hide');
		
		//Show indexed
		$(image).fade('show');		
		this.current_image = imageIndex;
		
		
		$('bannerItem').set('html', $$('.streamerContent' + imageIndex).get('html'));
		
		//$('textContainer').innerHTML = $(image).alt;
		
		this.slideControl = $clear(this.slideControl);
	}
	
});

window.addEvent('domready', function() {
	new SlideShow();
});