// JavaScript Document

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

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 + ")" , 100);
		}
		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 + ")" , 100); 
		}
		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 automatically  by loop */

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


function autoSwapStaticImage( productArray ) {

    var img = document.createElement('img');
    img.src = strImagePath + 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;
			fade("imgTarget", 'in', 50);
        }
		if (document.getElementById("aTarget") != null ) {
			if (pageArray.length != 0) {
				document.getElementById("aTarget").href =  pageArray[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 = strImagePath + productArray[i] + ".jpg"; 
        preloadImgs[i] = false;
    }
}

function img_onError() {
    return; 
}