// JavaScript Document

var imageFile = "";
var interval = "";
var intervalFade = "";
var intCurIndex = 0;
var inProductArray;

var strPrevThumb = ""; //selected thumb by clicking (swapStaticImage)

function preloadImage(preloadImg) { //load each images and check if it is completed.

	    return preloadImg.complete;
		
} //end preloadImage

function fade(target, state, value) { //fade in/out function

	var imgFade = document.getElementById(target)
	
	if ( state == 'in' ) {
		if ( value <= 100 ) { //increase alpha value up to 100
			value += 5;
			
			imgFade.style.filter = 'alpha(opacity='+ value +')';
			imgFade.style.opacity = value * 0.01;
			intervalFade = setTimeout("fade('" + target + "','in'," + value + ")" , 50);
		}
		else { //if an alpha value <= 100, clear intervalFade
			if( intervalFade != "" ) {   //clear timer
				window.clearInterval(intervalFade);
				intervalFade = "";
    		}
		}
	} // end if in
	else if ( state == 'out' ) {
		if ( value > 80 ) { //decrease alpha value up to 80
			value -= 5;
			imgFade.style.filter = 'alpha(opacity='+ value +')';
			imgFade.style.opacity = value * 0.01;
			intervalFade = setTimeout("fade('" + target + "','out'," + value + ")" , 50); 
		}
		else { //if an alpha value > 80, clear intervalFade
			if( intervalFade != "" ) {   //clear timer
				window.clearInterval(intervalFade);
				intervalFade = "";
    		}
			autoSwapStaticImage(productArray); //swap to next image
		}
	} // end if out
	
}//end fade


/*  swap static image by clicking on a thumbnail */

function swapStaticImage_Int(in_image) {
    
	if( interval != "" ){   //clear timer
        window.clearInterval(interval);
        interval = "";
    }
	if( intervalFade != "" ) {   //clear timer
		window.clearInterval(intervalFade);
		intervalFade = "";
    }
    
	imageFile = in_image;

	//clear thumb image border
	//remove thumb image border from the last displayed item in loop
	if (intCurIndex == 0) {
		document.getElementById("thumb_" + productArray[productArray.length-1]).style.borderStyle="none";
	}
	else {
		document.getElementById("thumb_" + productArray[intCurIndex-1]).style.borderStyle="none";
	}
	//remove thumb image order from the previous click (applicable for successive clicks)
	if (strPrevThumb != "") {
		document.getElementById("thumb_" + strPrevThumb).style.borderStyle="none"; 
		strPrevThumb = "";
	}
	
	//set thumb images border
	document.getElementById("thumb_" + imageFile).style.border="solid 2px #B5202E"; //border for selected image
	
	//save current selected image as previously selected thumb
	strPrevThumb = in_image;
	
    swapStaticImage(imageFile);  //apply changeDirection
	
}// end swapStaticImage_Int


function swapStaticImage(in_imgId) {

    var img = document.createElement('img');     
    img.src = "images/OurProduct/splashback_" + in_imgId + ".jpg";     
	
	//pre-load image
	if ( preloadImage(img) == true ) {
    	if( interval != "" ){   //clear timer
        	window.clearInterval(interval);
		    interval = "";
	    }
		if (document.getElementById("imgTarget") != null ) {
    		document.getElementById("imgTarget").src  = img.src;
			fade("imgTarget", 'in', 80);
        }
		if (document.getElementById("aTarget") != null ) {
			document.getElementById("aTarget").href = in_imgId + ".html";
        }
		//wait for 5 seconds and resume auto swap
		interval = setTimeout(function() { fade("imgTarget", 'out', 100); }, 5000);
	}
    else {
    	interval = setTimeout("swapStaticImage('" + in_imgId + "')" , 100); 
    }
		
} // end swapStaticImage


/*  swap static image automatically  by loop */

function autoSwapStaticImage_Int( productArray ) {
    
	if( interval != "" ){   //clear timer
        window.clearInterval(interval);
        interval = "";
    }
	
   	intCurIndex = 0;
	inProductArray = productArray;
    autoSwapStaticImage(productArray);
	
}// end autoSwapStaticImage_Int

function autoSwapStaticImage( productArray ) {
	
    var img = document.createElement('img');
    img.src = "images/OurProduct/splashback_" + productArray[intCurIndex] + ".jpg"; 
	 
	//pre-load image
	if ( preloadImage(img) == true ) {
    	if( interval != "" ){   //clear timer
        	window.clearInterval(interval);
		    interval = "";
	    }
		if (document.getElementById("imgTarget") != null ) {
    		document.getElementById("imgTarget").src  = img.src;
			if (document.getElementById("thumb_" + productArray[intCurIndex]) != null ) {
				//clear thumb image border
				//remove thumb image border from the last displayed item in loop
				if (intCurIndex == 0) {
					document.getElementById("thumb_" + productArray[productArray.length-1]).style.borderStyle="none";
				}
				else {
					document.getElementById("thumb_" + productArray[intCurIndex-1]).style.borderStyle="none";
				}
				//remove thumb image order from the previous click
				if (strPrevThumb != "") {
					document.getElementById("thumb_" + strPrevThumb).style.borderStyle="none"; 
					strPrevThumb = "";
				}
				//set thumb images border
				document.getElementById("thumb_" + productArray[intCurIndex]).style.border="solid 2px #B5202E";
			}
			fade("imgTarget", 'in', 80);
        }
		if (document.getElementById("aTarget") != null ) {
			document.getElementById("aTarget").href =  productArray[intCurIndex] + ".html";
        }
		
		//reset intCurIndex
		intCurIndex += 1;
		if( intCurIndex == productArray.length ) {
			intCurIndex = 0;  //loop array
		}
		//wait for 5 seconds and resume auto swap
		interval = setTimeout(function() { fade("imgTarget", 'out', 100); }, 5000);
	}
    else {
    	interval = setTimeout(function() { autoSwapStaticImage(productArray); }, 100);
    }
		
} // end autoSwapStaticImage

var preloadImgs = new Array();
function preloadAllImages() {
	
    //set new images in array from image_url 
    for(i = 0; i <  productArray.length; i++) {
        preloadImgs[i] = new Image();
        preloadImgs[i].onerror = img_onError;
        preloadImgs[i].src = "images/OurProduct/splashback_" + productArray[i] + "_th" + ".jpg"; 
        preloadImgs[i] = false;
		
    }
	
    //set new images in array from image_url 
    for(i = productArray.length; i <  (productArray.length * 2); i++) {
        preloadImgs[i] = new Image();
        preloadImgs[i].onerror = img_onError;
        preloadImgs[i].src = "images/OurProduct/splashback_" + productArray[i - productArray.length] + ".jpg"; 
        preloadImgs[i] = false;
    }
}

function img_onError() { 
    return; 
}