/*-------------------------------------------------------------------------------------------------
copyEmbed()
-------------------------------------------------------------------------------------------------*/
function copyEmbed(whichOne) {
	var clip = new ZeroClipboard.Client();
	clip.setText( 'helloooo' );
	clip.glue( 'copyEmbedHolder_' + whichOne);
	//console.log("'foobar' has been copied to the clipboard");
}




/*-------------------------------------------------------------------------------------------------
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) {

	var amount = relativePosition(whichDiv,whichStyle,amount);
			
	var targetDiv = new Fx.Style($(whichDiv),
	whichStyle, {duration: 250}).addEvent('onComplete', function() {
		//console.log("styleMagic is complete");
	});
	targetDiv.start(amount);
	
}




/*-------------------------------------------------------------------------------------------------
relativePosition()
-------------------------------------------------------------------------------------------------*/
function relativePosition(whichDiv,whichStyle,amount) {
	var previousValue  = eval("document.getElementById(whichDiv).style." + whichStyle);
	var previousValue  = parseInt(previousValue);
	var amount 		   = previousValue + amount;
	
	return amount;
}




/*-------------------------------------------------------------------------------------------------
toggleHighRes()
-------------------------------------------------------------------------------------------------*/
function toggleEmbed(key) {

	var embedPopupOnOrOff = document.getElementById("embedPopupOnOrOff_hidden");

	if(document.getElementById(key + "_embedPopup").style.display == "block") {
		document.getElementById(key + "_embedPopup").style.display = "none";
		
		embedPopupOnOrOff.value = -1;
	}
	else {
		document.getElementById(key + "_embedPopup").style.display = "block";
		document.getElementById(key + "_embedCode").select();
		embedPopupOnOrOff.value = key;
	}
}




/*-------------------------------------------------------------------------------------------------
overlayFader()
-------------------------------------------------------------------------------------------------*/
function overlayFader(id, onOrOff, millisec) {

	// QUICK ON OR OFF
		//$(id).style.opacity = onOrOff;
		
	// FADE METHOD
		// Only create a new FX style if it hasn't already been created for this obj
		if(document.getElementById(id + "_fadeFlag").value == "0") {
			eval('targetDiv_' + id + ' = new Fx.Style($(id), "opacity", {duration: 250}).addEvent("onComplete", function() { makeSureOverlayIsRight(id) });');
		}
		
		// This will mark that the FX style has been created
		document.getElementById(id + "_fadeFlag").value = 1; 
		
		eval('targetDiv_' + id + '.start(onOrOff);');	
		
	/*
	// SLIDE METHOD (borked)
		// Buttons get moved sideways, caption moved up and down
		var direction = (id.indexOf("caption") != -1) ? "top" : "left";
		
		// Determine position
		var key         = parseInt(id);
		var keyPlusOne  = key + 1;
		var xPosOfImage = findPosX(document.getElementById(keyPlusOne + "image"));
		
		moveOff = (key * 600) - 87;
		moveOn  = (key * 600) + 87;
		
		var position  = (onOrOff == 1) ? (moveOff) : (moveOn);
		
		var moveDiv = new Fx.Style($(id),
			direction, {duration: 250}).addEvent('onComplete', 
			function() {
				
			}
		);
		moveDiv.start(position);
	*/
		
}


/*-------------------------------------------------------------------------------------------------
makeSureOverlayIsRight()
If you moused out of the caption in and out really quick sometimes the overlay would be left
on even when you weren't anywhere on the image.

This was because it was calling to turn the overlay off but because Fx.style was still in the process
of turning it on, the off call got ignored.

This function is run after Fx.style is done and just makes sure the opacity actually matches up 
with wht it's supposed to be. 
-------------------------------------------------------------------------------------------------*/
function makeSureOverlayIsRight(id) {
	
	var theOpacity = document.getElementById(id).style.opacity;
	
	if(lastOnOrOff != theOpacity && document.getElementById("embedPopupOnOrOff_hidden").value == -1) {
		overlayFader(id,lastOnOrOff,300);
	}
}



/*-------------------------------------------------------------------------------------------------
overlay()
-------------------------------------------------------------------------------------------------*/
var autoOffTimeout;
var relId;
var lastOnOrOff;

function overlay(onOrOff,key,speed,autoOff,e) {

	lastOnOrOff = onOrOff;

	// Where did the mouse come from? If it's the high res or embed button or image we don't want to do any toggling
	if(e) {
		if (!e) var e = window.event;
		var relTarg = e.relatedTarget || e.fromElement;
			
		if(relTarg != null) {
			relId   = relTarg.getAttribute('id');
		}
								
		if(relId != null) {	
			if(relId.indexOf("_embedButton") != -1 || relId.indexOf("_caption") != -1 || relId.indexOf("_highResButton") != -1 || (relId.indexOf("image") != -1 && relId.indexOf("imageFrame") == -1)) {
				return false;
			}
		}		
	}
		
	var embedPopupOnOrOff = document.getElementById("embedPopupOnOrOff_hidden").value;	
		
	clearTimeout(autoOffTimeout);

	try { 
	
		// OFF
		if(onOrOff == 0 && embedPopupOnOrOff == -1) {
			
			// EMBED BUTTON
			if(document.getElementById(key + "_embedButton")) {
				overlayFader(key + "_embedButton",0,speed);
			}
			
			// CAPTION
			if(document.getElementById(key + "_caption")) {
				overlayFader(key + "_caption",0,speed);
			}
			
			// HIGH RES BUTTON
			if(document.getElementById(key + "_highResButton")) {
				overlayFader(key + "_highResButton",0,speed);
			}
	
		}
		// ON
		else {
		
			// EMBED BUTTON
			if(document.getElementById(key + "_embedButton")) {
				overlayFader(key + "_embedButton",1,speed);
			}
			
			// CAPTION
			if(document.getElementById(key + "_caption")) {
				overlayFader(key + "_caption",1,speed);
			}
			
			// HIGH RES BUTTON
			if(document.getElementById(key + "_highResButton")) {
				overlayFader(key + "_highResButton",1,speed);
			}
			
			// AutoOff when done?
			if(autoOff == "autoOff") {
				autoOffTimeout = setTimeout("overlay(0," + key + ",500,'noAutoOff')",3000);
			}
			
			
		}	
	}
	catch(err) {
		//console.log('exception:' + err);
	}
}




/*-------------------------------------------------------------------------------------------------
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') {
		shiftingBy = -howMuchToSlide;
		var howMuchToMoveThisTime = curLocationTopLeft - howMuchToSlide;
		if(curLocationTopRight <= widthToShow) {
			okToMove = false;				
		}
		var moveArrow = -(totalThumbWidth - 150);
	}
	
	// -> But if we're going right, add it
	else {
		shiftingBy = howMuchToSlide;
		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: 250}).addEvent('onComplete', 
			function() {
				//toggleArrows();
			}
		);
		moveDiv.start(howMuchToMoveThisTime);
		
		styleMagic('arrow','left',moveArrow,'rel');
	}
		
	// Determine whether to turn on or off the vacuums and arrows on either side.
	// Using the findPosX to decide, but have to add shiftingBy because findPosX is reporting
	// position at current state, where we need to predict where it's going to end up.
	
	// Left side
		var posX_thumbs         = findPosX(document.getElementById("productThumbs")) + shiftingBy;
		var posX_leftThumbArrow = findPosX(document.getElementById("leftThumbArrow"));
	
		if(posX_thumbs < posX_leftThumbArrow) {
			document.getElementById("imageSliderVacuumLeft").style.display = "block"; // This is none on page load, make sure it's on first
			changeOpac(100,"imageSliderVacuumLeft");
			document.getElementById("leftThumbArrow").src = "http://cdn.photojojo.net/store/awesomeness/imageGallery/leftOff.jpg"; // on
		}
		else {
			changeOpac(1,"imageSliderVacuumLeft");
			document.getElementById("leftThumbArrow").src = "http://cdn.photojojo.net/store/awesomeness/imageGallery/neither.jpg"; // off
		}
	
	// Right side
		var posX_thumbs          = findPosX(document.getElementById("productThumbs")) + shiftingBy;
		var posTopRight_thumbs   = posX_thumbs + totalThumbWidth;
		var posX_rightThumbArrow = findPosX(document.getElementById("rightThumbArrow"));
	
		if(posTopRight_thumbs > posX_rightThumbArrow) {
			changeOpac(100,"imageSliderVacuumRight");
			document.getElementById("rightThumbArrow").src = "http://cdn.photojojo.net/store/awesomeness/imageGallery/rightOff.jpg"; // on
			
		}
		else {
			changeOpac(1,"imageSliderVacuumRight");
			document.getElementById("rightThumbArrow").src = "http://cdn.photojojo.net/store/awesomeness/imageGallery/neither.jpg"; // off
		}
}




/*-------------------------------------------------------------------------------------------------
Move the main product image
called when user clicks a thumb
should move arrow and main image
-------------------------------------------------------------------------------------------------*/
function slideProductImage(whichOne,flvSource) {
		
	// Turn embed popup off
	var embedPopupKey = document.getElementById("embedPopupOnOrOff_hidden").value;	
	if(document.getElementById(embedPopupKey + "_embedPopup")) {
		if(document.getElementById(embedPopupKey + "_embedPopup").style.display == "block") {
			toggleEmbed(embedPopupKey);
		}
	}
	
	if(document.getElementById("flashDiv_" + whichOne)) {
		var flashMovie = "http://cdn.photojojo.net/store/awesomeness/productImages/photojojoVideoPlayer.swf?movieName=" + flvSource;
		document.getElementById("flashDiv_" + whichOne).innerHTML = "<object class='productImage' classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\" width=\"600\" height=\"400\" id=\"video\" align=\"middle\"><param name=\"allowScriptAccess\" value=\"sameDomain\" /><param name=\"movie\" value=\""+flashMovie+"\" /><param name=\"quality\" value=\"high\" /><param name=\"bgcolor\" value=\"#000000\" /><embed class=\'productImage' src=\""+flashMovie+"\" quality=\"high\" bgcolor=\"#000000\" width=\"600\" height=\"400\" name=\"video\" align=\"middle\" allowScriptAccess=\"sameDomain\" type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" /></object>";
	}
	
	var curLocationTopLeft  = parseInt(document.getElementById('productThumbs').style.left);
	
	selectedThumb = whichOne;
	
	// Div we're moving
	var whichDiv    = "productImage";
	whichOne--;
	var howMuchToMove = -(whichOne * 605);
	
	// Move the big images
	var moveDiv = new Fx.Style($(whichDiv),
	'left', {duration: 500}).addEvent('onComplete', function() {
		overlay(1,whichOne,300,'autoOff'); // This is done onMouseOver for the thumb td
	});
	moveDiv.start(howMuchToMove);
	
	// Move the arrow too
	// Find the x position of the thumb we need to point to. Then, b/c the arrow is positioned within the div, we subtract the x position of that
	var locationOfThumb = findPosX(document.getElementById(selectedThumb + "thumb")) - findPosX(document.getElementById("arrowContainer"));
	
	// Add 20 pixels so it's in the center to the thumb, not the top left
	var locationOfThumb = locationOfThumb + 20;
	
	var moveDiv = new Fx.Style($('arrow'),
	'left', {duration: 300});
	moveDiv.start(locationOfThumb);
}



/*-------------------------------------------------------------------------------------------------
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 + "On.jpg";
		}
		else {
			newImage = direction + "Off.jpg";
		}
	}
	if(newImage != "") {
		document.getElementById(direction + "ThumbArrow").src = "http://cdn.photojojo.net/store/awesomeness/imageGallery/" + 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 = "http://cdn.photojojo.net/store/awesomeness/imageGallery/rightOff.jpg";
	}
}




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




/////////////////////////////////// EOF //////////////////////////