/*

  Filename:  ourwork.js
  Author:    Kevin Portman
  Company:   Spinning Clock Ltd
  
  Description:
    This script will contain functions and variables for tracking, pre-loading
  and swapping images in the spinningclock website 'Our Work' pages.
  
*/


/* previous/next buttons */
var imgPrevOn  = new Image();
var imgPrevOff = new Image();
var imgNextOn  = new Image();
var imgNextOff = new Image();

imgPrevOn.src  = "assets/images/ourwork-prev-on.gif";
imgPrevOff.src = "assets/images/ourwork-prev-off.gif";
imgNextOn.src  = "assets/images/ourwork-next-on.gif";
imgNextOff.src = "assets/images/ourwork-next-off.gif";

function switchImgOn(strImage, strObj){
	
	eval("document.getElementById(\""+strObj+"\").src = img"+strImage+"On.src;");
}

function switchImgOff(strImage, strObj){
	
	eval("document.getElementById(\""+strObj+"\").src = img"+strImage+"Off.src;");
}

/* back/pdf buttons */
var imgBackOn  = new Image();
var imgBackOff = new Image();
var imgPdfOn   = new Image();
var imgPdfOff  = new Image();

imgBackOn.src  = "assets/images/ourwork-back-on.gif";
imgBackOff.src = "assets/images/ourwork-back-off.gif";
imgPdfOn.src   = "assets/images/ourwork-pdf-on.gif";
imgPdfOff.src  = "assets/images/ourwork-pdf-off.gif";

function switchBgOn(strImage, strObj){
	
	eval("document.getElementById(\""+strObj+"\").backgroundImage = img"+strImage+"On.src;");
}

function switchBgOff(strImage, strObj){
	
	eval("document.getElementById(\""+strObj+"\").backgroundImage = img"+strImage+"On.src;");
}



/* preview images/flash */
var intCurrentImage = 1;
var arrImages = new Array();
var arrSizes  = new Array("big", "small", "small");
var arrStates = new Array("", "off", "on");

var intShowingFlash = 0;
var strNonFlashHTML;

function initImages (strExample, intIsFlash) {
	
	for (i=0; i<4; i++){
		
		intImage = i + 1;
		arrImages[i] = new Array();
		
		/* pre-load all 3 versions of this image */
		for (j=0; j<3; j++){
			
			arrImages[i][j] = new Image();
			arrImages[i][j].src = "assets/images/ourwork-"+strExample+"-"+arrSizes[j]+"-"+intImage+arrStates[j]+".jpg";
		}
	}
	
	if (intIsFlash == 1){
		
		/* update small image no. 4 */
		arrImages[3][1].src = "assets/images/ourwork-"+strExample+"-small-4off.gif";
		arrImages[3][2].src = "assets/images/ourwork-"+strExample+"-small-4on.gif";
	}
}


function imageOn (intImage, blnOverride) {
	
	if ((intImage != intCurrentImage) || (blnOverride)){
		
		document.getElementById("ourwork-small"+intImage).src = arrImages[intImage-1][2].src;
	}
}

function imageOff (intImage, blnOverride) {
	
	if ((intImage != intCurrentImage) || (blnOverride)){
		
		document.getElementById("ourwork-small"+intImage).src = arrImages[intImage-1][1].src;
	}
}

function imageClick (intImage) {
	
	if (intShowingFlash == 1){
		unloadFlash();
	}
	
	imageUpdate(intImage);
	
}

function imageUpdate(intImage) {
	
	if (intImage != intCurrentImage){
		
		/* change existing current image to the off state */
		document.getElementById("ourwork-small"+intCurrentImage).src = arrImages[intCurrentImage-1][1].src;
		
		/* update intCurrentImage and change big image */
		intCurrentImage = intImage;
		if (intShowingFlash != 1){
			document.getElementById("ourwork-big").src = arrImages[intImage-1][0].src;
		}
	}
}

function loadFlash (intIsIE, strExample, strDir) {
	
	if (intShowingFlash != 1){
		
		/* copy existing html string */
		strNonFlashHTML = document.getElementById("ourwork-big-item").innerHTML;
	}
	
	if (intIsIE == 1){
		
		strHTML = "<object id=\"ourwork-bigflash\" classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"529\" height=\"321\">\n";
		strHTML = strHTML + "<param name=\"movie\" value=\""+strDir+"/video_base.swf\" />\n";
		strHTML = strHTML + "<param name=\"wmode\" value=\"transparent\" />\n";
		strHTML = strHTML + "<param name=\"FlashVars\" value=\"videoURL=ourwork-"+strExample+".flv\" />\n";
		strHTML = strHTML + "<img id=\"ourwork-bigimage\" src=\""+strDir+"/ourwork-"+strExample+".jpg\" alt=\"\" usemap=\"#ourwork-big-map\" />\n";
		strHTML = strHTML + "<map id=\"ourwork-big-map\" name=\"ourwork-big-map\"><area href=\"http://www.adobe.com/go/EN_US-H-GET-FLASH\" target=\"_blank\" shape=\"rect\" coords=\"66,105,440,196\" /></map>\n";
		strHTML = strHTML + "</object>";
		document.getElementById("ourwork-big-item").innerHTML = strHTML;
		
	} else {
		
		strHTML = "<object id=\"ourwork-bigflash\" type=\"application/x-shockwave-flash\" data=\""+strDir+"/video_base.swf\" width=\"529\" height=\"321\">\n";
		strHTML = strHTML + "<param name=\"wmode\" value=\"transparent\" />\n";
		strHTML = strHTML + "<param name=\"FlashVars\" value=\"videoURL=ourwork-"+strExample+".flv\" />\n";
		strHTML = strHTML + "<img id=\"ourwork-bigimage\" src=\""+strDir+"/ourwork-"+strExample+".jpg\" alt=\"\" usemap=\"#ourwork-big-map\" />\n";
		strHTML = strHTML + "<map id=\"ourwork-big-map\" name=\"ourwork-big-map\"><area href=\"http://www.adobe.com/go/EN_US-H-GET-FLASH\" target=\"_blank\" shape=\"rect\" coords=\"66,105,440,196\" /></map>\n";
		strHTML = strHTML + "</object>";
		document.getElementById("ourwork-big-item").innerHTML = strHTML;
	}

	intShowingFlash = 1;
	imageUpdate(4);
}

function unloadFlash () {
	
	document.getElementById("ourwork-big-item").innerHTML = strNonFlashHTML;
	intShowingFlash = 0;
}


/* special case for incentive images landing page */

var intCurrentImage = 1;
var intTotalImages = 6;
var timer;
var timerRestart;

function initIncentiveImages (strExample) {
    
    /* clear any currently running timers */
    if (timer) { clearTimeout(timer); }
    
	for (i=0; i<intTotalImages; i++){
		
		intImage = i + 1;
		arrImages[i] = new Array();
		
		/* pre-load 2 small versions of this image */
		for (j=1; j<3; j++){
			
			arrImages[i][j] = new Image();
			arrImages[i][j].src = "assets/images/ourwork-"+strExample+"-"+arrSizes[j]+"-"+intImage+arrStates[j]+".jpg";
		}
	}
	
    if (timerRestart) { clearTimeout(timerRestart); }
    
	/* start auto image transitions */
	timer = setTimeout( incentiveImageScroller, 2000 );
}

function incentiveImageScroller () {

    /* clear any currently running timers */
    if (timer) { clearTimeout(timer); }
    
    /* toggle small image for current image */
	imageOff(intCurrentImage, true);
	
    var intImage = intCurrentImage+1;
    if (intImage > intTotalImages){
        intImage = 1;
    }
    
	/* switch images */
	$('ourwork-big'+intImage).appear();
	$('ourwork-big'+intCurrentImage).fade();
	
	/* update current image, saving the old image in a temporary variable */
	intCurrentImage = intImage;
	
	/* toggle small image for new image */
	imageOn(intImage, true);
	
	/* continue auto image transitions */
	timer = setTimeout( incentiveImageScroller, 2000 );
}

function incentiveImageClick (intImage) {
	
	if (intImage != intCurrentImage){
		
        /* clear any currently running timers */
        if (timer) { clearTimeout(timer); }
	    
		/* switch images */
		$('ourwork-big'+intImage).appear();
		$('ourwork-big'+intCurrentImage).fade();
		
		/* update current image, saving the old image in a temporary variable */
		var intOldImage = intCurrentImage;
		intCurrentImage = intImage;
		
		/* toggle small image for old image to off state */
		imageOff(intOldImage);
		
		/* start image scroller after 5 seconds (3+2) */
		timer = setTimeout( incentiveImageScroller, 10000 );
	}
}