var hoverButton = {
	init : function() {		
		arrButtons = $$('.hover_button');
		
		for (var i=0; i<arrButtons.length; i++) {
			arrButtons[i].addEvent('mouseover', hoverButton.setOver);	
			arrButtons[i].addEvent('mouseout', hoverButton.setOff);
		}
		
	},
	setOver : function() {
		buttonImageSource = this.src;
		this.src = buttonImageSource.replace('_off.', '_hover.');
	}, 
	setOff : function() {
		buttonImageSource = this.src;
		if (buttonImageSource.indexOf('_hover.') != -1) {
			this.src = buttonImageSource.replace('_hover.', '_off.');
		}
	}
}

window.addEvent('domready', hoverButton.init);



var screenshots = {
	numScreens : 0,
	currScreen : 0,
	screenContainerAnimation : null,
	screenFadeSpeed : 200,
	animating : false,		
	
	init : function() {
		var arrScreens = $$('#screen_container .screenshot');
		screenshots.numScreens = arrScreens.length;
		
		screenshots.screenContainerAnimation = new Fx.Style('screen_container', 'height', {
									duration: 300, 
									transition: Fx.Transitions.Quad.easeInOut
								});
		
		var indicatorMold = $('indicatorMold');
		
		for(i=0; i<arrScreens.length; i++) { 
			
			var screenShot = arrScreens[i];
			screenShot.id = 'screenshot' + (i+1);
			
			var screenIndicator = indicatorMold.clone();
			screenIndicator.id = 'indicator' + (i+1);
			screenIndicator.injectInside('screen_indicators');
			screenIndicator.href = 'javascript: screenshots.setActiveScreen('+ (i+1)*1 +')';			
			
			screenShot.removeClass('hidden');				
			
			if (i==0) {
				var initialScreenHeight = screenShot.getCoordinates().height;
				$('screen_container').setStyle('height', initialScreenHeight);
				screenshots.currScreen = 1;
				screenIndicator.addClass('active');
			}
			else {
				screenShot.setStyle('opacity',0);
				screenShot.setStyle('display','none');
			}			
			
		} // loop
	},
	
	next : function() {
		var nextNum = screenshots.currScreen + 1;
			
		if (nextNum > screenshots.numScreens) {
			nextNum = 1;
		}
		
		screenshots.setActiveScreen(nextNum);
	},
	
	previous : function() {
		var prevNum = screenshots.currScreen - 1;
		
		if (prevNum < 1) {
			prevNum = screenshots.numScreens;
		}
		
		screenshots.setActiveScreen(prevNum);
	},
	
	setActiveScreen : function(screenNum) {
		if(screenshots.animating == false) {
			screenshots.animating = true;
			var currScreen = $('screenshot' + screenshots.currScreen);
			var currIndicator = $('indicator' + screenshots.currScreen);
			var newScreen = $('screenshot' + screenNum);
			var newIndicator = $('indicator' + screenNum);
			
			currScreen.effect('opacity',{
				duration: screenshots.screenFadeSpeed,
				transition: Fx.Transitions.Quad.easeInOut,
				onComplete: function() { 
					currIndicator.removeClass('active');
					currScreen.setStyle('display','none') ;
				}
			}).start(0);			
			
			function resizeScreen() {		
				newScreen.setStyle('display','block');
				var newScreenSize = newScreen.getCoordinates().height;
				screenshots.screenContainerAnimation.start(newScreenSize);
			}
			
			function fadeInNewScreen() {
				newScreen.effect('opacity',{
					duration: screenshots.screenFadeSpeed,
					transition: Fx.Transitions.Quad.easeInOut,
					onComplete: function() { 
									newIndicator.addClass('active'); 
									screenshots.animating = false;  
								}
				}).start(1);
			}
			
			resizeScreen.delay(screenshots.screenFadeSpeed);
			fadeInNewScreen.delay(screenshots.screenFadeSpeed + 400);
			
			screenshots.currScreen = screenNum;
		}
	}
}

window.addEvent('load', screenshots.init)	;
 




var PopLayer = new Class({
		initialize : function(options) {
			this.options = options;
			
			this.popContent = this.options.popContent;
			this.popContentWidth = this.popContent.getCoordinates().width;
			this.popContentHeight = this.popContent.getCoordinates().height;
			this.useShadow = this.options.useShadow;
			this.fadeAnimation = new Fx.Style($('popLayerFade'), 'opacity', {
								duration: 500, 
								transition: Fx.Transitions.Quart.easeOut
							});
			if(!window.gecko) {
				$('popLayerFade').setStyle('opacity',0);
			}
		},
		openPop : function() {	
			this.resizeFade();
			
			// we are using a transparent background image in every browswer except IE
			// Firefox does not like flash ontop of a div with opacity applied, so we do not fade in the fade layer in firefox.
			if (window.ie6) {
				this.fadeAnimation.start(0.5);
			}
			else if(!window.gecko) {
				this.fadeAnimation.start(1.0);
			}
			else {
				$('popLayerFade').setStyle('visibility','visible');	
			}
			
			
			this.openPopContent.delay(300, this);					
		},
		openPopContent : function() {
			if(this.useShadow) {
				this.resizeShadow();
				$('popLayerShadow').setStyles({
					'visibility':'visible'
				});
			}
			
			this.recenterElement(this.popContent);
			
			this.popContent.setStyles({
				'visibility':'visible'
			});	
		},
		closePop : function() {
			this.popContent.setStyles({
				'visibility':'hidden'
			});	
			
			if(this.useShadow) {
				$('popLayerShadow').setStyles({
					'visibility':'hidden'
				});
			}			
			
			if(!window.gecko) {
				this.fadeAnimation.start(0);
			}
			else {
				$('popLayerFade').setStyle('visibility','hidden');	
			}
		},
		resizeShadow : function() {		
			var shadowInnerWidth = this.popContentWidth;
			var shadowInnerHeight = this.popContentHeight;
			var shadowCornerWidth = $$('#popLayerShadow .corner')[0].getCoordinates().width;
			var shadowCornerHeight = $$('#popLayerShadow .corner')[0].getCoordinates().height;
			var shadowWidth = shadowInnerWidth + (shadowCornerWidth * 2);
			var shadowHeight = shadowInnerHeight + (shadowCornerHeight * 2);
			
			$$('#popLayerShadow .topbottom').each(function(element){
				element.setStyle('width', shadowInnerWidth);
			});
			
			$$('#popLayerShadow .side').each(function(element){
				element.setStyle('height', shadowInnerHeight);
			});
			
			$$('#popLayerShadow .center')[0].setStyles({
				'height' : shadowInnerHeight,
				'width' : shadowInnerWidth
			});
			
			$('popLayerShadow').setStyles({
				'height' : shadowHeight,
				'width' : shadowWidth
			});
			
			this.recenterElement($('popLayerShadow'));
		},
		recenterElement : function(element) {
			elementWidth = element.getCoordinates().width;
			elementHeight = element.getCoordinates().height;
			windowWidth = window.getWidth();
			windowHeight = window.getHeight();
			scrollPos = window.getScrollTop();
			
			newElementLeftPos = (windowWidth / 2) - (elementWidth / 2);
			newElementTopPos = ((windowHeight / 2) + scrollPos) - (elementHeight / 2);
			
			// MAKE SURE IT'S ABOVE ZERO.
			
			element.setStyles({
				'left': newElementLeftPos,
				'top': newElementTopPos
			});
		},
		resizeFade : function() {
			var scrollWidth = window.getScrollWidth();
			var scrollHeight = window.getScrollHeight();
			
			$('popLayerFade').setStyles({
				'width' : scrollWidth,
				'height' : scrollHeight
			});
		}
	});