// global to track current home and lightbox imageIDs
var gCurrentLightBoxImageID 		= 1;
var gCurrentHomeImageID 		= 1;
var gAutoPlayHomeB			= false;
var gHomeMonitorObj			= null; 

// hack: create global vars to store the data needed by the cross fade function
// necessary because passing a complex list of vars ecoded as a string in a
// setTimer callback function can get mangled. easier to just buffer them
// before the call. TODO make this a class and store as prop vars
var	gInElementID 			= "homeBox2";
var	gOutElementID 			= "homeBox1";
var	gOpacity 			= 0;

// lightbox width needs to persist between calls to the reveal function
var gShellWidth				= 0;

// constants
var HOME_PAGE_IMAGE_TIMEOUT		= 9000;  // every 1000 = 1 secs
var IMMEDIATE_TRIGGER_TIMEOUT		= 0;
var NUMBER_OF_HOME_IMAGES		= 5;
var LIGHTBOX_WIDTH			= 689;
var SCREEN_WIDTH			= 689;
var LIGHTBOX_SHELL_OPACITY		= 100;

//TODO : remove the debug function and all refs to it before going live

// Public functions called from user action (on html page)
function clickHomeMenu(imageID) {
    if (imageID != gCurrentHomeImageID) {
	showHome(imageID);
	initHomeImageTimer( false );	
    }
}

function clickLightBoxMenu(imageID) {
    upDateLightBoxImage (imageID);
}

function showLBox() {
    // we don't want the home page auto play to be on while in lightbox mode
    autoPlayHome(false);
    initLightBox();
}

function nextLBImage() {
    if (gCurrentLightBoxImageID < 9) {
	upDateLightBoxImage(gCurrentLightBoxImageID+1);
    }
}

function prevLBImage() {
    if (gCurrentLightBoxImageID > 0) {
	upDateLightBoxImage(gCurrentLightBoxImageID-1);
    }   
}

function lbMenuMouseOver(obj) {
    obj.style.backgroundColor='#51bfe2';obj.style.color='#ffffff';
}

function lbMenuMouseOut(obj) {
    obj.style.backgroundColor='#666666';obj.style.color='#929497';
}

function hideLBox() {
    var el = document.getElementById("pauseButton");
    initLightBoxClose();
    // jake
    gAutoPlayHomeB = true;
    //initHomeImageTimer( true );
    el.src="images/pauseBtn.png";
    
    
}

// Private fucntions (called from other fucntions in this lib)
//------------------------------------------------------------------------------
// home specific functions
function showHome(imageID){
    debug("showHome = " + imageID + " , gCurrentHommeImageID = " + gCurrentHomeImageID);
    home = "homeBox";
    
    for (i=1; i<=NUMBER_OF_HOME_IMAGES; i++) {
        id = i + "";
        if (imageID == i) {
            document.getElementById(home+id).style.display = '';
	    //initFadeIn(home+imageID);
	    initCrossFade(home+imageID ,home+gCurrentHomeImageID );
	    
        }
        else {
	    if (i != gCurrentHomeImageID) {
		document.getElementById(home+id).style.display = 'none';
	    }   
        }
    }
    gCurrentHomeImageID = imageID;
}


function homeMonitor() {
    debug("gAutoPlayHomeB " + gAutoPlayHomeB);
    if (gAutoPlayHomeB == false) return(false);
    //console.log(" homeMonitor " + gCurrentHomeImageID);
    nextImage = gCurrentHomeImageID;
    if (nextImage < NUMBER_OF_HOME_IMAGES) {
	nextImage++;
    }
    else {
	nextImage = 1;
    }
    
    showHome(nextImage);

    gCurrentHomeImageID = nextImage;
    initHomeImageTimer( false );
    return(true);
}

function initHomeImageTimer ( immediate ) {
    if (gHomeMonitorObj != null) {
	clearTimeout(gHomeMonitorObj);
    }
    if ( immediate ) {
	gHomeMonitorObj = window.setTimeout("homeMonitor()", IMMEDIATE_TRIGGER_TIMEOUT);
    }
    else
    {
	gHomeMonitorObj = window.setTimeout("homeMonitor()", HOME_PAGE_IMAGE_TIMEOUT);
    }
    
}

function autoPlayHome (state) {
    debug("autoPlayHome " + state);
    gAutoPlayHomeB = state;
    if (state) {
	initHomeImageTimer( false );
    }
}
//------------------------------------------------------------------------------
// Light Box Specific functions

function initLightBox () {
    gShellWidth = 0;
    lbShell = document.getElementById("lightboxShell");
    lbShell.style.width = gShellWidth+"px";
   
    setOpacity(lbShell, LIGHTBOX_SHELL_OPACITY);
    showElement('lightboxShell');
    // if we want the fade in effect call initFadeIn()
    doFadeIn = false;
    if (doFadeIn) {
	initFadeIn('lightbox1');
    }
    else {
	 window.setTimeout("openLightBox()",100);
    }
}

function openLightBox () {
    if (gShellWidth < LIGHTBOX_WIDTH) {
	gShellWidth += 10;
	document.getElementById("lightboxShell").style.width = gShellWidth+"px";
	leftEdge = SCREEN_WIDTH - gShellWidth;
	document.getElementById("lightboxShell").style.marginLeft = leftEdge+"px";
	window.setTimeout("openLightBox()",0);
    }
    else {
	showElement('lightbox1');
	initFadeIn('lightbox1');
    }
}

function initLightBoxClose(){
    debug("initLightBoxClose");
    objId = "lightbox"+gCurrentLightBoxImageID;
    fadeOutLightBox(objId,100);
     // always will return to LB image 1 when reopened
    gCurrentLightBoxImageID = 1;
}

function fadeOutLightBox (objId , opacity) {
    debug("opacity = " + opacity);
    if (document.getElementById) {
	obj = document.getElementById(objId);
	if (opacity > 0) {
	    setOpacity(obj, opacity);
	    opacity -= 10;
	    debug("opacity = " + opacity);
	    window.setTimeout("fadeOutLightBox('"+objId+"',"+opacity+")", 100);
	}
	else {
	   // done fade out - hide the element
	    document.getElementById(objId).style.display = 'none';
	    closeLightBox();
	}
    } 
}

function closeLightBox () {
    //alert("closeLightBox " +gShellWidth);
    if (gShellWidth > 0) {
	gShellWidth -= 10;
	//shellObj = document.getElementById("lightboxShell");
	document.getElementById("lightboxShell").style.width = gShellWidth+"px";
	leftEdge = SCREEN_WIDTH - gShellWidth;
	document.getElementById("lightboxShell").style.marginLeft = leftEdge+"px";
	window.setTimeout("closeLightBox()",0);
    }
    else {
	hideElement("lightboxShell" );
	autoPlayHome(true);
    }  
}

// called from clickLightBoxMenu() and nextLB() and prevLB()
function upDateLightBoxImage (imageID) {
    debug("currentID = " + gCurrentLightBoxImageID);
    if (imageID != gCurrentLightBoxImageID ) {
	showImageName = "lightbox" + imageID;
	hideImageName = "lightbox" + gCurrentLightBoxImageID;
	gCurrentLightBoxImageID = imageID;
	showLightboxImage(hideImageName , showImageName ,imageID);
    }
}

// called from upDateLightBoxImage() - maybe should be moved to that function
function showLightboxImage( elementIDToHide, elementIDToShow ,imageID){
    showElement(elementIDToShow);
    hideElement(elementIDToHide);
    initFadeIn('photoholder' + imageID);
}

//------------------------------------------------------------------------------
// general functions used by both home and light box images
function showElement(elementID){
    debug("showElement " + elementID)
    document.getElementById(elementID).style.display = '';
}

function hideElement(elementID){
    debug("hideElement " + elementID);
    document.getElementById(elementID).style.display = 'none';
}

// function to fade an element / image
function initFadeIn(imageId) {
    debug("imageId " + imageId);
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,0);
}

// PRIVATE should only be called from initFadeIn
function fadeIn(objId,opacity) {
    debug("opacity = " + opacity);
    if (document.getElementById) {
	obj = document.getElementById(objId);
	if (opacity <= 100) {
	    setOpacity(obj, opacity);
	    opacity += 10;
	    debug("opacity = " + opacity);
	    window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 100);
	}
    }
}

function initCrossFade (inImageID , outImageID ) {
    debug("imageId " + inImageID);

    imageIn = document.getElementById(inImageID);
    imageOut = document.getElementById(outImageID);

    setOpacity(imageIn , 0);
    gInElementID = inImageID;
    gOutElementID = outImageID;
    gOpacity = 0;
	
    crossFade();
}

function crossFade() {
    // check to see if this js feature is supported - if not we are toast since we don't have alternative coding
    debug("cross fade " + gInElementID + " " +  gOutElementID + " " + gOpacity);
    if (document.getElementById) {
	inObj = document.getElementById(gInElementID);
	outObj = document.getElementById(gOutElementID);

	if (gOpacity <=100) {
	    setOpacity(inObj,gOpacity);
	    setOpacity(outObj,100 - gOpacity);
	    debug("and now ? " + gOpacity);
	    gOpacity += 10;
	    debug("opacity = "+ gOpacity);
	    gCrossFadeObj = window.setTimeout("crossFade()", 100);
	}
	else {
	    // done fade out - hide the element
	    document.getElementById(gOutElementID).style.display = 'none';
	}
    }
}

// function to fade an element / image
function initFadeOut(imageId) {
    debug("imageId " + imageId);
    fadeIn(imageId,0);
}

function fadeOut(objId,opacity) {
    debug("opacity = " + opacity);
    if (document.getElementById) {
	obj = document.getElementById(objId);
	if (opacity > 0) {
	    setOpacity(obj, opacity);
	    opacity -= 10;
	    debug("opacity = " + opacity);
	    window.setTimeout("fadeOut('"+objId+"',"+opacity+")", 100);
	}
	else {
	   // done fade out - hide the element
	    document.getElementById(objId).style.display = 'none'; 
	}
    }  
}

function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
	obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
}

function initPage () {
    var w = 689;
    var h = 608;
    preloadImage("./images/home1.jpg" , w , h );
    preloadImage("./images/home1.jpg" , w , h );
    preloadImage("./images/home1.jpg" , w , h );
    preloadImage("./images/home1.jpg" , w , h );
    preloadImage("./images/home1.jpg" , w , h );
    autoPlayHome(true);
}

function debug(msg) {
    //alert(msg);
}


// TODO: this is a poor design pattern, but I see that no file in this site uses this function so leaving it for now...
function getStyle(el,styleProp) {
    var x = document.getElementById(el);
    if (x.currentStyle)
    var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
    var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
}


function preloadImage ( url , width , height ) {
    var imageToLoad= new Image( width , height );
    // url is the URL of the image you want to load, EG: "./images/home/someimage.jpg"
    if (imageToLoad) imageToLoad.src=url;
}

function pauseButtonClicked () {
    var el = document.getElementById("pauseButton");
    // console.log(" pause button clicked" + gAutoPlayHomeB + " : " + el.src);
    if (el) {
	if ( gAutoPlayHomeB ) {
	    gAutoPlayHomeB = false;
	    el.src="images/startBtn.png";
	}
	else {
	    gAutoPlayHomeB = true;
	    initHomeImageTimer( true );
	    el.src="images/pauseBtn.png";
	}
    }
}