Element.implement({
	fadeInOut: function(value) {
		var fx = new Fx.Morph(this, {duration:1000});
		if( value == 'out' ) {
			fx.set({opacity:1});
			fx.start({opacity:0});
		}
		else {
			fx.set({opacity:0});
			fx.start({opacity:1});
		}
	}
});

var visualslider = new Class({
	Implements: [Events,Options],
	options: {
		images: $empty
	},
	initialize: function(options) {
		this.element = $("visualWrapper");
		this.setOptions(options);
		this.images = this.options.images;
		this.slides = new Array();
		this.index = 0;
		this.element.setStyles({'background-image':'none','position':'relative'});
		this.element.removeClass('roundify');
		this.slides = new Array();
		
		if( Browser.Engine.trident ) {
			$("visualImage1").setStyles({'display':'none'});
			$("visualImage1").src = "/media/images/visuals/visual01-ie.jpg";
			this.animateIE();
		}
		else
		if( Browser.Engine.webkit && parseInt(Browser.Engine.version) >= 420) {
			this.animateWebkit(); // Use CSS Transforms rather than JS :)
		}
		else {
			this.animateNonIE();
		}
	},
	animateWebkit: function() {
		var images = this.element.getElements('img');
		$each(images, function(img){
			img.dispose();
		});
		
		var head = document.getElementsByTagName('head')[0];
		var cssTag = new Element('style',{
			'type':'text/css',
			'text':'.fadeio{-webkit-transition-property: opacity;-webkit-transition-duration: 3s;}.fadeOut{opacity:0;z-index:1}.fadeIn{opacity:1;z-index:2;}'
		}).injectInside(head);
		
		var self = this;
		zindex = 2;
		this.images.each(function(img) {
			var div = new Element('img',{
				'class':'fadeio fadeOut',
				styles: {
					//opacity: 0,
					'position':'absolute',
					'left':0,
					'top':0,
					'width':'960px',
					'height':'296px',
					'z-index':1,
					'-webkit-border-radius':'10px',
					'-webkit-transition-property': 'opacity',
				  	'-webkit-transition-duration': '1s'
				},
				src: img
			}).injectInside(self.element);
			
			self.slides.push(div);
			zindex++;
		});
		
		this.element.getElement('h4').setStyles({'z-index':zindex+1});
		this.element.getElement('ul').setStyles({'z-index':zindex+1});
		
		self.slides[0].removeClass('fadeOut');
		self.slides[0].addClass('fadeIn');
		self.prev = -1;
		
		var start = function() {
			(function() {
				if( self.index >= self.slides.length ) {
					self.index = 0;
				}
				
				var prev = self.prev > -1 ? self.slides[self.prev] : null;
				if( prev ) {
					//prev.setStyle('opacity', 0);
					prev.removeClass('fadeIn');
					prev.addClass('fadeOut');
					prev.setStyle('z-index', 1);
				}
				
				if( prev != cur ) {		
					var cur  = self.slides[self.index];
					cur.removeClass('fadeOut');
					cur.addClass('fadeIn');
					cur.setStyle('z-index',2);
					cur.removeClass('fadeIn');
				}
				
				self.prev = self.index;
				self.index++;
			}).periodical(7500);
		};
		
		start();
	},
	animateNonIE: function() {
		var images = this.element.getElements('img');
		$each(images, function(img){
			img.dispose();
		});
		
		var self = this;
		zindex = 2;
		this.images.each(function(img) {
			var div = new Element('div',{
				styles: {
					opacity: 0,
					'position':'absolute',
					'left':0,
					'top':0,
					'width':'960px',
					'height':'296px',
					'z-index':zindex,
					'-moz-border-radius':'10px',
					'background-image':'url('+img+')'
				}
			}).injectInside(self.element);
			
			self.slides.push(div);
			zindex++;
		});
		
		this.element.getElement('h4').setStyles({'z-index':zindex+1});
		this.element.getElement('ul').setStyles({'z-index':zindex+1});
		
		self.slides[0].fade('in');
		self.prev = -1;
		
		var start = function() {
			(function() {
				if( self.index >= self.slides.length ) {
					self.index = 0;
				}
				
				var prev = self.prev > -1 ? self.slides[self.prev] : null;
				if( prev ) {
					prev.fade('out');
				}
				
				var cur  = self.slides[self.index];
				cur.fade('in');

				self.prev = self.index;
				self.index++;
			}).periodical(7500);
		};
		
		start();
	},
	animateIE: function() {
		if( this.images.length > 0 ) {
			var self = this;
			
			var i = new Element('img').injectInside(document.body);
			i.setStyles({display:'none'});
			
			var self = this;
			this.images.each(function(img) {
				i.src = img;
				self.slides.push(img);
			});
			
			$("visualImage1").src = "/media/images/visuals/visual01-ie.jpg";
			
			$("visualImage1").setStyles({
				'position':'absolute',
				'left':'0px',
				'top':'0px',
				'z-index':'1',
				'display':'',
				opacity:1
			});
			$("visualImage1").store('active', true);
			
			$("visualImage2").setStyles({
				'position':'absolute',
				'left':'0px',
				'top':'0px',
				'z-index':'2',
				'display':'',
				opacity:0
			});
			$("visualImage2").store('active', false);
			
			this.element.getElement('h4').setStyles({'z-index':'3'});
			this.element.getElement('ul').setStyles({'z-index':'3'});
			
			var start = function() {
				(function() {
					if( self.index >= self.slides.length )
						self.index = 0;
					
					var date = new Date();
					var img = self.slides[self.index].replace('.jpg', '-ie.jpg');
					
					var vi1  = $("visualImage1");
					var vi2  = $("visualImage2");
					
					if( vi1.retrieve('active') == true ) {
						vi2.src = img;
						vi2.setStyles({'z-index':2});
						vi1.setStyles({'z-index':1});
						vi1.fadeInOut('out');
						vi1.store('active', false);
						vi2.fadeInOut('in');
						vi2.store('active', true);
					}
					else {
						vi1.src = img;
						vi1.setStyles({'z-index':2});
						vi2.setStyles({'z-index':1});
						vi2.fadeInOut('out');
						vi2.store('active', false);
						vi1.fadeInOut('in');
						vi1.store('active', true);
					}

					self.index++;
				}).periodical(7500);
			};
			
			start();
		}
	}
});