/*------------------------------------------------------------------------------------------------- Preload images -------------------------------------------------------------------------------------------------*/ if (document.images) { pic1 = new Image(29,128); pic1.src= "/store/awesomeness/imageGallery/imageSliderVacuumLeft.png"; pic2 = new Image(29,128); pic2.src= "/store/awesomeness/imageGallery/imageSliderVacuumRight.png"; pic3 = new Image(16,117); pic3.src= "/store/awesomeness/imageGallery/rightOff.jpg"; pic4 = new Image(16,117); pic4.src= "/store/awesomeness/imageGallery/leftOff.jpg"; pic5 = new Image(16,117); pic5.src= "/store/awesomeness/imageGallery/neither.jpg"; pic7 = new Image(16,117); //pic7.src= "/images/bigLoader.gif"; } /*------------------------------------------------------------------------------------------------- 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: 250}).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: 250}).addEvent('onComplete', function() { //console.log("slide is complete"); }); moveDiv.start(howMuchToMoveThisTime); styleMagic('arrow','left',moveArrow,'rel'); } // These decisions effect the arrow on the left // They occur when you hit the button on the right if(whichDirection == "left") { // decide whether to turn left off nextTime = curLocationTopLeft + howMuchToSlide; if(nextTime < howMuchToSlide) { document.getElementById("rightThumbArrow").src = "/store/awesomeness/imageGallery/neither.jpg"; // off } // decide whether to turn right on if(curLocationTopLeft <= 0) { document.getElementById("leftThumbArrow").src = "/store/awesomeness/imageGallery/leftOff.jpg"; // on } } // These decisions effect the arrow on the right // They occur when you hit the button on the left if(whichDirection == "right") { // decide whether to turn left on if(curLocationTopRight >= widthToShow - howMuchToSlide) { document.getElementById("rightThumbArrow").src = "/store/awesomeness/imageGallery/rightOff.jpg"; // on } // decide whether to turn right off if(curLocationTopLeft + widthToShow >= 0) { document.getElementById("leftThumbArrow").src = "/store/awesomeness/imageGallery/neither.jpg"; // off } } } /*------------------------------------------------------------------------------------------------- Move the main product image called when user cliks a thumb should move arrow and main image -------------------------------------------------------------------------------------------------*/ function slideProductImage(whichOne,flvSource) { if(document.getElementById("flashDiv_" + whichOne)) { var flashMovie = "http://photojojo.com/store/awesomeness/productImages/photojojoVideoPlayer.swf?movieName=" + flvSource; document.getElementById("flashDiv_" + whichOne).innerHTML = ""; } var curLocationTopLeft = parseInt(document.getElementById('productThumbs').style.left); selectedThumb = whichOne; // Div we're moving var whichDiv = "productImage"; whichOne--; var howMuchToMove = -(whichOne * 605); // 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: 500}); moveDiv.start(howMuchToMove); // move the arrow too var moveDiv = new Fx.Style($('arrow'), 'left', {duration: 300}); 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 + "On.jpg"; } else { newImage = direction + "Off.jpg"; } } if(newImage != "") { document.getElementById(direction + "ThumbArrow").src = "/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 = "/store/awesomeness/imageGallery/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(); }