var Slideshow = new Class({
							   
	initialize:function(e)
	{
		this.e = e;

		this.duration = 5000;
		this.startIndex = 150;
		this.items = this.e.getElements('.slideshowItem');
		this.slideshowButtons = new Array();
		this.front;
		this.back;
		this.index = 0;
		this.length = this.items.length;
		this.width = this.styleToInt(this.items[0].getElement('.slideshowImage'), 'width');
		this.height = this.styleToInt(this.items[0].getElement('.slideshowImage'), 'height');
		
		this.disabled = false;
		
		if(this.length > 0)
		{
			//this.setIndicator();
			//this.animateIndicator();
			this.initLayers();
			this.setEvents();
			this.initContent();
			this.setSlideshowButtons();
			this.setTimer();
		}
	},
	
	doMouseover: function(event)
	{
		this.clearTimer();
		event.target.setStyle('cursor', 'pointer');
		//this.showContent();
		//this.logoOver();
	},
	
	doMousemove: function(event)
	{
		this.clearTimer();
		event.target.setStyle('cursor', 'pointer');
		//this.showContent();
		
	},
	
	doMouseout: function(ev)
	{
		
		var c = ev.target.getCoordinates();
		
		var x1 = c.left;
		var y1 = c.top;
		var x2 = c.right;
		var y2 = c.bottom;
		var mx = ev.client.x;
		var my = ev.client.y;
		
		if((mx <= x1 | mx >= x2) | (my <= y1 | my >= y2))
		{
			this.clearTimer();
			this.setTimer();
			//this.hideContent();
			//this.logoOut();
		}
	},
	
	doClick: function()
	{
		window.location = unescape(this.items[this.index].getProperty('id'));
	},
	
	doPrevious: function()
	{
		if(this.index == 0)
		{  
			this.index = this.length-1; 
		}
		else{
			 this.index--;
		}
		this.showSlide();
	},
	
	doNext: function()
	{
		var index = this.index;
		if(this.index == (this.length - 1))
		{
			this.index = 0;
		}else{
			this.index++; 
		}
		this.showSlide();
	},
	
	swapBackToFront: function()
	{
		this.front.setProperty('html', this.back.get('html'));
		this.front.getElement('.slideshowContent').set('tween', {duration: 300}); 
		this.front.setStyles({
			'opacity' : 1			
		});	
		this.back.setProperty('html', '');
	},
	
	setFront:function(index)
	{
		this.front.setProperty('html', this.items[index].get('html')); 
		this.front.getElement('.slideshowImage').setStyles({
			'visibility' : 'visible'			
		});	
		this.front.getElement('.slideshowContent').setStyles({
			'opacity' : 0,
			//'background' : 'url(/site/img/black_70.png)'				
		});	
	},
	
	setBack:function(index)
	{
		this.back.setProperty('html', this.items[index].get('html')); 
		this.back.setStyles({
			'opacity' : 1			
		});	
		this.back.getElement('.slideshowImage').setStyles({
			'visibility' : 'visible'			
		});	
		this.back.getElement('.slideshowContent').setStyles({
			'opacity' : 0,
			//'background' : 'url(/site/img/black_70.png)'			
		});	
	},
	
	initContent:function()
	{
		if(this.length>1)
		{
			this.setFront(0);
			this.setBack(1);
		}else{
			this.setFront(0);
			this.setBack(0);
		}
		this.front.getElement('.slideshowContent').set('tween', {duration: 300}); 
	},
	
	showContent:function()
	{
		this.front.getElement('.slideshowContent').fade('in');
	},
	
	hideContent:function()
	{
		this.front.getElement('.slideshowContent').fade('out');
	},
	
	animateImage:function()
	{
		this.slide = new Fx.Tween(this.front,{'duration':500, 'transition': Fx.Transitions.Cubic.easeOut });//this.duration	
		
		this.slide.addEvents
		({
			'complete': this.imageAnimationComplete.bind(this)
		});
		
		this.slide.start('opacity', 0);
	},
	
	imageAnimationComplete: function(event)
	{
		this.swapBackToFront();
		this.setTimer();
	},
	
	setSlideshowButtons:function()
	{
		this.slideshowButtons.each(function(o,i){this.setSlideshowButton(o,i)}.bind(this))
	},
	
	setSlideshowButton:function(object, index)
	{
		if(this.index == index)
		{
			object.e.removeClass('slideshowButton');
			object.e.addClass('slideshowButtonActive');
		}else{
			object.e.removeClass('slideshowButtonActive');
			object.e.addClass('slideshowButton');
		}
	},
	
	showSlide: function(index)
	{
		this.setBack(this.index);
		this.setSlideshowButtons();
		this.clearTimer();
		this.front.getElement('.slideshowContent').setStyle('display','none');
		this.animateImage();
	},
	
	setIndex:function(index)
	{
		this.index = index;
	},
	
	setTimer: function()
	{
		$clear(this.timer);
		this.timer = this.doNext.delay(this.duration, this);//this is neccessary
	},
	
	clearTimer: function()
	{
		$clear(this.timer);
	},
		
	initLayers:function()
	{
		
		this.back = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'width' : this.width + 'px',
				'height' : this.height + 'px',
				'z-index' :(this.startIndex+6)
			}
		});
		this.back.inject(this.e, 'before');
		
		this.front = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'width' : this.width + 'px',
				'height' : this.height + 'px',
				'z-index' :(this.startIndex+7)
			}
		});
		this.front.inject(this.e, 'before');
		
		this.overlay = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'margin-left' : '0px',
				'width' : '729px',
				'height' : this.height + 'px',
				//'background' : 'red',
				'z-index' :(this.startIndex+8)
			}
		});
		
		this.overlay.inject(this.e, 'before');
		
		/*
		this.previous = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'margin-left' : '0px',
				'width' : '150px',
				'height' : this.height + 'px',
				'z-index' :(this.startIndex+8)
			}
		});
		
		this.previous.inject(this.e, 'before');
		
		this.next = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'margin-left' : '790px',
				'width' : '150px',
				'height' : this.height + 'px',
				'z-index' :(this.startIndex+8)
			}
		});
		
		this.next.inject(this.e, 'before');
		*/
		this.slideshowButtonContainer = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'left'	: '729px',
				'width' : '211px',
				'height' : this.height + 'px',
				'margin' : '0px',
				'z-index' :(this.startIndex+9),
			}
		});
		this.slideshowButtonContainer.inject(this.e, 'before');
		
		this.items.each(function(e, i){this.initSlideshowButtons(e,i);}.bind(this));
		
		var i = this.items.length+1;
		if(i <= 5)
		{
			while(i<=5)
			{
				var filler = new Element('div', 
				{
					'styles': 
					{
						'display' : 'block',
						'width' : '171px',
						'height' : '46px',
						'padding' : '7px 10px 7px 30px',
						'background' : '#f5f5f5'
					},
					
					
				});
				filler.inject(this.slideshowButtonContainer, 'bottom');
				i++;
			}
		}
		
	},
	
	initSlideshowButtons:function(e,i)
	{
		var button = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'width' : '171px',
				'height' : '45px',
				'padding' : '7px 10px 7px 30px',
				
			},
			
			'class': 'slideshowButton',
			'html' : this.items[i].getElement('.slideshowContent').get('html')
		});
		this.items[i].getElement('.slideshowContent').set('html','');
		button.inject(this.slideshowButtonContainer, 'bottom');
		this.slideshowButtons.push(new SlideshowButton(button, this, i));
	},
	
	setIndicator:function()
	{
		var bg = new Element('div', 
		{
			'styles': 
			{
				'display' : 'block',
				'position' : 'absolute',
				'width' : this.width + 'px',
				'height' : '1px',
				'z-index' :(this.startIndex + 5)
			}
		});
		
		bg.inject(this.e, 'after');
		
		this.indicator = new Element('div', 
		{
			'styles': 
			{
				'display' : 'inline-block',
				'width' : '10px',
				'height' : '10px',
				'background' : '#0018a8',
				'padding-right' : '10px'
			}
		});
		
		this.indicator.inject(this.e, 'after');
	},
	
	styleToInt: function(e, style)
	{
		var styleAsString = e.getStyle(style);
		var styleAsInt = parseInt(styleAsString.substring(0, (styleAsString.length-2)));
		return styleAsInt;
	},
	
	animateIndicator: function()
	{
		if(this.indicatorTween){this.indicatorTween.cancel();}
		this.indicatorTween = new Fx.Tween(this.indicator, {'duration': this.duration, 'transition': 'linear' });//this.duration	
		this.indicatorTween.set('width', '0px');
		this.indicatorTween.start('width', this.width);
	},
	
	setEvents: function()
	{
		this.overlay.addEvents
		({
			'mouseover': this.doMouseover.bind(this),
			'mousemove': this.doMousemove.bind(this),
			'mouseout': this.doMouseout.bind(this),
			'click': this.doClick.bind(this)
		});
		
		this.overlay.onclick = function()
		{
			return false;
		};	
		
		this.overlay.onmouseover = function()
		{
			return false;
		};
		
		this.overlay.onmousemove = function()
		{
			return false;
		};
		
		this.overlay.onmouseout = function()
		{
			return false;
		};
		/*
		this.next.addEvents
		({
			'mouseover': this.doMouseover.bind(this),
			'mousemove': this.doMousemove.bind(this),
			'mouseout': this.doMouseout.bind(this),
			'click': this.doNext.bind(this)
		});
		
		this.next.onclick = function()
		{
			return false;
		};
			
		this.next.onmouseover = function()
		{
			return false;
		};
		
		this.next.onmousemove = function()
		{
			return false;
		};
		
		this.next.onmouseout = function()
		{
			return false;
		};
		
		this.previous.addEvents
		({
			'mouseover': this.doMouseover.bind(this),
			'mousemove': this.doMousemove.bind(this),
			'mouseout': this.doMouseout.bind(this),
			'click': this.doPrevious.bind(this)
		});
		
		this.previous.onclick = function()
		{
			return false;
		};	
		
		this.previous.onmouseover = function()
		{
			return false;
		};	
		
		this.previous.onmousemove = function()
		{
			return false;
		};
		
		this.previous.onmouseout = function()
		{
			return false;
		};
		*/
	}

})

var SlideshowButton = new Class({
							   
	initialize:function(e,controller,index)
	{
		this.e = e;
		this.controller = controller;
		this.index = index;
		this.setEvents();
	},
	
	setEvents:function()
	{
		this.e.addEvents
		({
			'mouseover': this.doMouseover.bind(this),
			'mouseout': this.doMouseout.bind(this),
			'click': this.doClick.bind(this)
		});
		
		this.e.onclick = function()
		{
			return false;
		};	
		
		this.e.onmouseover = function()
		{
			return false;
		};
		
		this.e.onmouseout = function()
		{
			return false;
		};
	},
	
	doMouseover: function(event)
	{
		event.target.setStyle('cursor','pointer');
	},
	
	doMouseout: function(event)
	{

	},
	
	doClick: function(event)
	{
		this.controller.setIndex(this.index);
		this.controller.showSlide();
	}
})