// JavaScript Document
/*-------------------------------------------------------------------------------------------------
Preload images
-------------------------------------------------------------------------------------------------*/
if (document.images)
{
  pic1 = new Image(29,128); 
  pic1.src= "images/imageSliderVacuumLeft.png"; 

  pic2 = new Image(29,128); 
  pic2.src= "images/imageSliderVacuumRight.png"; 

  pic3 = new Image(16,117); 
  pic3.src= "images/rightOff.jpg"; 
  
  pic4 = new Image(16,117); 
  pic4.src= "images/leftOff.jpg";
  
  pic5 = new Image(16,117); 
  pic5.src= "images/neither.jpg";
  
  pic7 = new Image(16,117); 
  pic7.src= "images/bigLoader.html";
  
}

/*-------------------------------------------------------------------------------------------------
Variables
-------------------------------------------------------------------------------------------------*/
// Thumb variables
var numOfThumbs       = 10;
var thumbsToShow      = 7;
var thumbWidth        = 80;
var spaceBetweenThumb = 5;
var totalSpacerWidth  = (thumbsToShow - 1) * spaceBetweenThumb
var widthToShow       = (thumbsToShow * thumbWidth) + totalSpacerWidth;
var howMuchToSlide    = widthToShow - thumbWidth;
var totalThumbWidth   = numOfThumbs * thumbWidth + totalSpacerWidth;
var howMuchToMoveThisTime;

// Product image variables
var numOfImages = numOfThumbs;
var imageWidth  = 476;
var spaceBetweenImages = 5;
var totalSpacerWidth = spaceBetweenImages * numOfImages;
var totalImageWidth = numOfImages * imageWidth + totalSpacerWidth;

var leftArrow  = true;
var rightArrow = false;

var selectedThumb = 1;

/*-------------------------------------------------------------------------------------------------
styleMagic()
whichDiv = the div you want to apply some magic too
style    = ex: top, left, width height
amount   = how much to change it
absOrRel = Is the amount a absolute value, ie move to position top:50px. Or is it relative, ie, move up 50px.
-------------------------------------------------------------------------------------------------*/
function styleMagic(whichDiv,whichStyle,amount,absOrRel) {

	if(absOrRel == "rel") {
		
		// Two possible solutions for passing in a dynamic style choise
		// 		document.getElementById(whichDiv).style[whichStyle] = value + "px";
		//		eval("document.getElementById(whichDiv).style." + whichStyle + " = value + 'px';");
		// previousValue = parseInt(document.getElementById(whichDiv).style.top);// working
		
		previousValue  = eval("document.getElementById(whichDiv).style." + whichStyle);
		previousValue  = parseInt(previousValue);
		amount 		   = previousValue + amount;
	}
			
	var targetDiv = new Fx.Style($(whichDiv),
	whichStyle, {duration: 1000}).addEvent('onComplete', function() {
		//console.log("styleMagic is complete");
	});
	targetDiv.start(amount);
	
}

/*-------------------------------------------------------------------------------------------------
slideThumbs
-------------------------------------------------------------------------------------------------*/
function slideThumbs(whichDirection) {

	
	
	// Div we're moving
	var whichDiv    = "productThumbs";
	
	
	leftMovedAlready = parseInt(document.getElementById("arrow").style.left);
	
	// Whats the top left position of the div right now?
	var curLocationTopLeft  = parseInt(document.getElementById(whichDiv).style.left);
	var curLocationTopRight = curLocationTopLeft + totalThumbWidth;
	
	var okToMove = true;
	
	// <- If we're going left, minus how much to slide from curLocationTopLeft
	if(whichDirection == 'left') {
		var howMuchToMoveThisTime = curLocationTopLeft - howMuchToSlide;
		if(curLocationTopRight <= widthToShow) {
			okToMove = false;				
		}
		var moveArrow = -(totalThumbWidth - 150);
	}
	
	// -> But if we're going right, add it
	else {
		var howMuchToMoveThisTime = curLocationTopLeft + howMuchToSlide;
		if(curLocationTopLeft >= 0) {
			okToMove = false;	
		}	
		
		var moveArrow = totalThumbWidth - 150;
	}
	


	// Slide it!
	if(okToMove == true) {
		var moveDiv = new Fx.Style($(whichDiv),
		'left', {duration: 1000}).addEvent('onComplete', function() {
			//console.log("slide is complete");
		});
		moveDiv.start(howMuchToMoveThisTime);
		
		styleMagic('arrow','left',moveArrow,'rel');

		
		
	}
	
	// These decisions effect the arrow on the left
	if(whichDirection == "left") {
		// decide whether to turn left off
		nextTime = curLocationTopLeft - howMuchToSlide;
		
		if(nextTime <= howMuchToSlide) {
			document.getElementById("rightThumbArrow").src = "neither.jpg"; // off
		}
		
		// decide whether to turn right on
		if(curLocationTopLeft <= 0) {
			document.getElementById("leftThumbArrow").src = "leftOff.jpg"; // on
		}
	}
	
	// These decisions effect the arrow on the right
	if(whichDirection == "right") {		
		// decide whether to turn left on
		if(curLocationTopRight >= widthToShow - howMuchToSlide) {
			document.getElementById("rightThumbArrow").src = "images/rightOff.jpg"; // on
		}
		
		// decide whether to turn right off
		if(curLocationTopLeft + widthToShow >= 0) {
			document.getElementById("leftThumbArrow").src = "images/neither.jpg"; // off
		}		
	}
	
}

/*-------------------------------------------------------------------------------------------------
Move the main product image
called when user cliks a thumb
should move arrow and main image
-------------------------------------------------------------------------------------------------*/
function slideProductImage(whichOne) {

	var curLocationTopLeft  = parseInt(document.getElementById('productThumbs').style.left);
		 
	selectedThumb = whichOne;
	

	// Div we're moving
	var whichDiv    = "productImage";
	whichOne--;
	var howMuchToMove 	   = -(whichOne * 481);
	
	
	// If there are less than 7 thumbs, the arrow starts off with an offset
	if(numOfThumbs < thumbsToShow) {
		var offset = (thumbsToShow - numOfThumbs) * 40;
	}
	else {
		offset = 0;
	}
	
	var howMuchToMoveArrow = (whichOne * 87) + offset;
	
	// Move the big images
	var moveDiv = new Fx.Style($(whichDiv),
	'left', {duration: 1000});
	moveDiv.start(howMuchToMove);
	
	
	// move the arrow too
	var moveDiv = new Fx.Style($('arrow'),
	'left', {duration: 1000});
	moveDiv.start(howMuchToMoveArrow + curLocationTopLeft);
	
	
}

/*-------------------------------------------------------------------------------------------------
Hover function for the left and right arrows
-------------------------------------------------------------------------------------------------*/
function hoverArrow(whichOne,direction) {
	theSrc  = whichOne.src;
	neither = theSrc.indexOf("neither");

	on      = theSrc.indexOf("On");
	off     = theSrc.indexOf("Off");
	
	var newImage = "";
	
	// If neither is not there
	if(neither == -1) {
		if(on == -1) {
			newImage = direction + "images/On.jpg";
		}
		else {
			newImage = direction + "images/Off.jpg";
		}
	}
	if(newImage != "") {
		document.getElementById(direction + "ThumbArrow").src = "" + newImage;
	}
}


/*-------------------------------------------------------------------------------------------------
turnArrowsOffOnStart()

Decide whether arrows should be on (there are more than 7 thumbs) or off
This function is called on body load
-------------------------------------------------------------------------------------------------*/
function turnArrowsOffOnStart() {
	if(numOfThumbs > thumbsToShow) {
		document.getElementById("rightThumbArrow").src = "images/rightOff.jpg";
	}
}

/*-------------------------------------------------------------------------------------------------
Toggle the vacuum image
-------------------------------------------------------------------------------------------------*/
setInterval("checkPos()", 5);
function checkPos(){
	
	try{ 	
		// These decisions effect the right vacuum
		if(parseInt(document.getElementById("productThumbs").style.left) + totalThumbWidth <= widthToShow || numOfThumbs <= 7) {
			// Off
			changeOpac(0,"imageSliderVacuumRight");
		}
		else {
			// On
			changeOpac(100,"imageSliderVacuumRight");	
		}
		
		// These decisions effect the left vacuum
		var topLeft = parseInt(document.getElementById("productThumbs").style.left);
		
		if(topLeft >= -5 || numOfThumbs <=7) {
			// Off
			changeOpac(0,"imageSliderVacuumLeft");
		}
		else {
			// On
			changeOpac(100,"imageSliderVacuumLeft");
		}
	}
	catch(err) {
		
	}
	
	
}

/*-------------------------------------------------------------------------------------------------
overlayCaption()
-------------------------------------------------------------------------------------------------*/
function overlayCaption(onOrOff,key) {

	try { 

	if(onOrOff == 1) {
		//changeOpac(100,key + "topText");
		//changeOpac(70,key + "bottomText");
		
		document.getElementById(key + "topText").style.display = "block";
		document.getElementById(key + "bottomText").style.display = "block";
	
	
	}
	else {
		//changeOpac(0,key + "topText");
		//changeOpac(0,key + "bottomText");
		document.getElementById(key + "topText").style.display = "none";
		document.getElementById(key + "bottomText").style.display = "none";
	}
	
	}
	catch(err) {}

}
function playMovie(whichMovie) {
	document.getElementById(whichMovie).Play();
}