/*
	Class: SlideShow
	
	Show a slide of images

*/
SlideShow2 = new Class({
		
	Implements: Options,
	
	options: {
		toggleSuffix: '.toggle',
		event: null,
		toggleOnEvent: 'mouseover',
		toggleOffEvent: 'mouseout'
	},
	
	
	initialize: function() {
		this.slideShow2();
	},
	
	slideShow2: function() {
		
		if($('bannerImages1')){
			this.current_image = 0;
			
			//Get images in slideshow
			this.images = $('bannerImages1').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(3000,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);
		if(isNaN(imageIndex))imageIndex = 0;
//		$(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 SlideShow2();
});