/****************************************************************************
Filename:	/global/hotspots/hotspots.js
Project:	EnduraProducts
Purpose:	Script for Hotspots on Homepage	& Rotating Text	 
Notes:									
History:	Developer:		Description:				 
5/3/2011	tdb				v1.0		*Initial build
5/10/2011	tdb				v1.1		*Optimized for XHTML and XBC
5/11/2011	tdb				v1.2		*Overlays stretch instead of fade
5/12/2011	tdb				v1.3		*Prioritize active hotspot z-index
5/12/2011	tdb				v1.4		*Close hovered area button
****************************************************************************/
//Variables
var hotspot = 0;
var top, left, height, width, stack = 0;
var timing = 725;
$(document).ready(function(){
	//MouseOver events
	$('.hotspot').css('display','block');
	$('#point1').mouseover(function(){ if(hotspot!=1){	fadeImage(hotspot);	hotspot = 1; expandImage(hotspot); } });
	$('#point2').mouseover(function(){ if(hotspot!=2){	fadeImage(hotspot);	hotspot = 2; expandImage(hotspot); } });
	$('#point3').mouseover(function(){ if(hotspot!=3){	fadeImage(hotspot);	hotspot = 3; expandImage(hotspot); } });
	$('#point4').mouseover(function(){ if(hotspot!=4){	fadeImage(hotspot);	hotspot = 4; expandImage(hotspot); } });
	$('#point5').mouseover(function(){ if(hotspot!=5){	fadeImage(hotspot);	hotspot = 5; expandImage(hotspot); } });
});
function expandImage(hotspot){
	//Configure elements
	width = $('#tail'+hotspot).css('width');		
	swapStack(hotspot);
	$('#wrap'+hotspot).css('display','block');
	$('#tail'+hotspot).css('display','block');	
	$('#tail'+hotspot+' img').css('display','block');	
	$('#tail'+hotspot+' .tail').css('display','block');	
	$('#wrap'+hotspot).css('z-index','+=100');
	$('#wrap'+hotspot).css('height','0px');
	$('#wrap'+hotspot).css('width','0px');
	$('#tail'+hotspot).css('width','0px');	
	//Animate overlay and content into position
	$('#tail'+hotspot).animate({'width':'+='+width},timing);
	$('#wrap'+hotspot).animate({"height": "+=301px","width": "+=435px","opacity": "1","top":"32px","left":"505px"}, timing);	
}
function fadeImage(hotspot){ 
	//Fade out image and reset expandFrom coordinates
	top = $('#point'+hotspot).css('top');
	left = $('#point'+hotspot).css('left');	
	$('#wrap').css('z-index','10');
	$('#tail'+hotspot).animate({'width':'-=0px'},250,function(){
		$('#tail'+hotspot+' img').css('display','none');
	});
	//Remove last hotspot after current completes animating
	setTimeout('hidePrevious('+hotspot+')',timing);
}
function fadeImageBox(current){
	$('#tail'+current+' img').css('display','none');	
	hidePrevious(current);
}
function swapStack(hotspot){
	//Active hotspot gets top of z-index stack
	$('#wrap'+hotspot).css('z-index',1000);
	if(hotspot!=1) $('#wrap1').css('z-index',10);
	if(hotspot!=2) $('#wrap2').css('z-index',10);
	if(hotspot!=3) $('#wrap3').css('z-index',10);
	if(hotspot!=4) $('#wrap4').css('z-index',10);
	if(hotspot!=5) $('#wrap5').css('z-index',10);
}
//Fade previous hotspot after next has overlapped
function hidePrevious(hotspot){	$('#wrap'+hotspot).css('cssText','top:'+top+';left:'+left+';px;height:0px;width:0px;opacity:1;'); }

//Rotating Text
var state = 0;
setInterval('switchStates();',5000);
function switchStates(){
	if(state==0){
		$('#state1').customFadeOut(1000,function(){
			$('#state2').customFadeIn(1000)
		});				
		state = 1;
	}else{
		$('#state2').customFadeOut(1000,function(){
			$('#state1').customFadeIn(1000)
		});				
		state = 0;
	}
}