/****************************************************************
 * imagefader.js
 *
 * talent4.tv | talent4media.com | talent4media.co.uk
 * 
 * image fading/replacement function:
 * randomly selects one of three div elements
 * sets background image of selected div
 * foreground image is gradually faded to reveal background image
 * image links and window status are kept in sync with top image
 ****************************************************************/


var gblTalentArray = new Array("RPR", "JCR", "JTR", "GHF", "TVC", "MBK", "CHL", "SPA", "DLD", "JHL", "JHO", "JSH", "DEV", "JRY", "PHD", "MFL", "PBR", "JLP", "JEL", "CHP");
var gblNameArray = new Array("rani-price", "john-craven", "john-torode", "gloria-hunniford", "tim-vincent", "matt-baker", "chris-hollins", "seema-pathan", "david-lindo", "jenny-hull", "john-hollins", "jayne-sharp", "mr-motivator-derrick-evans", "james-rylands", "paul-hendy", "mat-follas", "pamela-brown", "james-lamper", "jo-elvin", "chris-hopkins");
var gblPrevTalentArray = new Array();
var gblDivIdArray = new Array("square1", "square2", "square3");
var gblImgIdArray = new Array("photo1", "photo2", "photo3");
var gblHrefIdArray = new Array("photolink1", "photolink2", "photolink3");

var gblRandom;
var gblTalent;
var gblName;

var gblImgFilePath = "/images/talent/img";
var gblImgFileExtn = ".png";
var gblHrefFilePath = "/talent/";
var gblHrefFileExtn = ".php";

var gblDeckSize = gblTalentArray.length;
var gblOpacity = 100;
var gblOnDeck = 0;
var gblRotations = 1;
var gblImageRotations = gblDeckSize * (gblRotations+1);
var gblPauseSeconds = 7.25;
var gblFadeSeconds = .85;

var theDiv;
var theImg;
var theHref;



function imageFaderInitialise(start) {

    //re-sort talent & name arrays to begin at 'start' position
     gblTalentArray = sortArray(gblTalentArray, start);
     gblNameArray = sortArray(gblNameArray, start);

    //initialise array to store previous talent (stored as image class name)
    for (var i = 0; i < 3; i++) {
       gblPrevTalentArray[i] = document.getElementById(gblImgIdArray[i]).className;
    }  
       
    // call image Randomise and Fade functions
    imageFaderRandomise();
	  setTimeout("imageFaderFade()",gblPauseSeconds*1000);

}


function imageFaderRandomise() {

    //randomly select one of the three divs for next image fade
    gblRandom = Math.round(Math.random()*2); 

    theDiv = document.getElementById(gblDivIdArray[gblRandom]);
    theImg = document.getElementById(gblImgIdArray[gblRandom]);
    theHref = document.getElementById(gblHrefIdArray[gblRandom]);

    //store currently selected talent for use later on (image class name)
    gblPrevTalentArray[gblRandom] = theImg.className;

    //slide next talent image into background
    gblTalent = gblTalentArray[gblOnDeck];
    gblName = gblNameArray[gblOnDeck];
    theDiv.className = 'img' + gblTalent;    

}



function imageFaderFade() {

    // determine delta based on number of fade seconds
    // the slower the fade the more increments needed
    var fadeDelta = 100 / (30 * gblFadeSeconds);

    // fade top out to reveal bottom image
	if (gblOpacity < 2*fadeDelta ) {
	
        gblOpacity = 100;
    
        // stop the rotation if we're done
        if (gblImageRotations < 1) return;
    
        imageFaderShuffle();
    
        // pause before next fade
        setTimeout("imageFaderFade()",gblPauseSeconds*1000);  
	}
	else {
        gblOpacity -= fadeDelta;
        setOpacity(theImg,gblOpacity); 
        setTimeout("imageFaderFade()",30);
	}

}


function imageFaderShuffle() {
  
    //set background-image to foreground img src, set img class and new link href
    theImg.src = gblImgFilePath + gblTalent + gblImgFileExtn;
    theImg.className = gblTalent;
    theHref.href = gblHrefFilePath + gblName + gblHrefFileExtn;
  
    //check if current image/link is being hovered over. if so, need to reset highlighted menu link
    var prevTalent = gblPrevTalentArray[gblRandom];
    var prevName = getTalentName(prevTalent);
    var prevMenuLink = document.getElementById('nav' + prevTalent);
    var currMenuLink = document.getElementById('nav' + gblTalent);
    
    if (prevMenuLink.className == 'on') { //set by onMouseOver event
        prevMenuLink.className = '';
        currMenuLink.className = 'on';
        
        //change window status text to reflect new image/link
        var oldStatus = window.status;
        if (oldStatus != '') {
            var newStatus = oldStatus.replace(prevName,gblName);
            window.status = newStatus;
            }
        }    
    
    
	// set img opacity to 100
	setOpacity(theImg,100);
	
    // shuffle the deck
	gblOnDeck = ++gblOnDeck % gblDeckSize;
	
	// decrement rotation counter
	if (--gblImageRotations > 0)
	{
	   // randomly select next div and slide next image underneath
	   imageFaderRandomise();
	} 
	
}


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 sortArray (theArray, startPosn) {
    var startArray = new Array();
    var endArray = new Array();
    
    startArray = theArray.slice(startPosn);
    endArray = theArray.slice(0, startPosn);    
    theArray = startArray.concat(endArray);

    return theArray;  
}


function hoverOn(index) {
    var image = document.getElementById(gblImgIdArray[index]);   
    var menuLink = document.getElementById('nav' + image.className);
    menuLink.className = 'on';
}


function hoverOff(index) {
    var image = document.getElementById(gblImgIdArray[index]);   
    var menuLink = document.getElementById('nav' + image.className);
    menuLink.className = '';    
}


function getTalentName(talentId) {   
    for (var i=0; i<gblTalentArray.length; i++) {
        if (gblTalentArray[i] == talentId) {
            return gblNameArray[i];
        }
    }
}