/****************** Navigation App Javascript File ****************
 Author: Carl Pryke
 Date: 22/07/2011
 Version: 1.0 
 Description: This defines a navigation hierachy, generating a 
 
 Notes: This could be extended to make hard-coded arrays of navigation names and links
 to be read in instead from an XML file.
 
 Need to read in URL's for page links. 
 
 Need to have a div id for innerHTML code.

 *************************************************************/ 
var spotlightTimer;
var tabTimer;
var spotlightTime = 10;
var optionsChange = 1;
var spotlightChange = 5;
var currentSpotlight = 0;
var spotlightRequest = false;
var spotlightServices = new Array();
var targetDiv = "";
var currentSpotlight = 0;
var count = 0;
var busy = false;
var optionsState = -31;

if(navigator.userAgent.toLowerCase().indexOf('msie') > -1){
    spotlightTime = 1;
}
else if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1){
    spotlightTime = 10;
    optionsChange = 4;
    spotlightChange = 33;
}
else if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1){
    spotlightTime = 10;
    spotlightChange = 12;
}
else if(navigator.userAgent.toLowerCase().indexOf('safari') > -1){
    spotlightTime = 10;
    optionsChange = 4;
    spotlightChange = 12;
}
else{
    spotlightTime = 10;
    optionsChange = 4;
    spotlightChange = 12;
}

function getSpotlightData(str, target){
    targetDiv = target;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  		spotlightRequest = new XMLHttpRequest();
  	}
  	else{// code for IE6, IE5
      	spotlightRequest = new ActiveXObject("Microsoft.XMLHTTP");
	}
	spotlightRequest.open("GET", str, true);
	spotlightRequest.onreadystatechange = printSpotlightData; // Loads the resultant XML file varo Article Navigation Object
	spotlightRequest.send(null);
}

function printSpotlightData(){
	if(spotlightRequest.readyState == 4 && spotlightRequest.status==200){
        var HTMLString = "";
        spotlightServices = spotlightRequest.responseXML.documentElement.getElementsByTagName("service");
        HTMLString += "<div class=\"spotlightArticle2\" id=\"sa1\" style=\"width: 0px\"><div class=\"spotlightArticle\" style=\"margin-left: -242px; clip: rect(0px, 242px, 370px, 242px);\" id=\"s1\"></div></div><div class=\"spotlightArticle2\" id=\"sa2\"><div class=\"spotlightArticle\" id=\"s2\">";
        HTMLString += loadSpotLight(0);
        HTMLString += "</div></div><div class=\"spotlightArticle2\" style=\"width: 0px;\" id=\"sa3\"><div class=\"spotlightArticle\" style=\"width: 0px; clip: rect(0px, 0px, 340px, 0px);\" id=\"s3\"></div></div>";
        HTMLString += "<div class=\"spotlightControls\"><div class=\"spotlightLeft\" id=\"spotlightLeft\" onclick=\"switchLeft()\"></div><div class=\"spotlightRight\" id=\"spotlightRight\" onclick=\"switchRight()\"></div></div>";
        document.getElementById(targetDiv).innerHTML = HTMLString;
    }
}

function loadSpotLight(num){
    var service = spotlightServices[num];
    var HTMLString = "<div class=\"spotlightImage\" id=\"spotlightImage\" style=\"background-image: url('images/thumbs/" + service.getElementsByTagName("image")[0].firstChild.nodeValue + "')\"></div>";
    HTMLString += "<div class=\"spotlightTitle\" id=\"spotlightTitle\">" + service.getElementsByTagName("headline")[0].firstChild.nodeValue + "</div>";
    HTMLString += "<div class=\"spotlightDescription\" id=\"spotlightDescription\">" + service.getElementsByTagName("openingParagraph")[0].firstChild.nodeValue + "</div>";
    HTMLString += "<div class=\"spotlightLink\" id=\"spotlightLink\"><a class=\"spotlightLink\" href=\"" + service.getElementsByTagName("pageLink")[0].firstChild.nodeValue + "\">Read More...</a></div>";
    return HTMLString;
}

/*
function revealOptions(){
    clearTimeout(tabTimer);
    revealOptions2();
}

function revealOptions2(){
    if(optionsState >= 0){
        clearTimeout(tabTimer);
    }
    else{
        optionsState += optionsChange;
        if(optionsState > 0){
            optionsState = 0;
        }
        document.getElementById("spotlightLeft").style.marginLeft = optionsState + "px";
        document.getElementById("spotlightRight").style.marginRight = optionsState + "px";
        tabTimer = setTimeout("revealOptions2()", spotlightTime);
    }
}

function hideOptions(){
    clearTimeout(tabTimer);
    hideOptions2();
}

function hideOptions2(){
    if(optionsState <= -32){
        clearTimeout(tabTimer);
    }
    else{
        optionsState -= optionsChange;
        if(optionsState < -31){
            optionsState = -31;
        }
        document.getElementById("spotlightLeft").style.marginLeft = optionsState + "px";
        document.getElementById("spotlightRight").style.marginRight = optionsState + "px";
        tabTimer = setTimeout("hideOptions2()", spotlightTime);
    }    
}
*/

function switchLeft(){
    if(count == 0){
        if(currentSpotlight > 0){
            currentSpotlight -= 1;
        }
        else{
            currentSpotlight = spotlightServices.length-1;
        }
        document.getElementById("s1").innerHTML = loadSpotLight(currentSpotlight);
    }
    if(count >= 242){
        clearTimeout(spotlightTimer);
        count = 0;
        changeSpotlight();
        document.getElementById("s2").innerHTML = loadSpotLight(currentSpotlight);
    }
    else{
        count += spotlightChange;
        if(count > 242){
            count = 242;
        }
        document.getElementById("sa1").style.width = count + "px";
        document.getElementById("s1").style.marginLeft = "-" + (242 - count) + "px";
        document.getElementById("s1").style.clip = "rect(0px, 242px, 370px," + (242 - count) + "px)";
        document.getElementById("sa2").style.width = (242 - count) + "px";
        document.getElementById("s2").style.width = (242 - count) + "px";
        document.getElementById("s2").style.clip = "rect(0px, " + (242 - count) + "px, 370px, 0px)";
        spotlightTimer = setTimeout("switchLeft()", spotlightTime);
    }
}

function switchRight(){
    if(count == 0){
        if(currentSpotlight < spotlightServices.length-1){
            currentSpotlight += 1;
        }
        else{
            currentSpotlight = 0;
        }
        document.getElementById("s3").innerHTML = loadSpotLight(currentSpotlight);
    }
    if(count >= 242){
        clearTimeout(spotlightTimer);
        count = 0;
        changeSpotlight();
        document.getElementById("s2").innerHTML = loadSpotLight(currentSpotlight);
    }
    else{
        count += spotlightChange;
        if(count > 242){
            count = 242;
        }
        document.getElementById("sa2").style.width = (242 - count) + "px";
        document.getElementById("s2").style.marginLeft = "-" + count + "px";
        document.getElementById("s2").style.clip = "rect(0px, 242px, 370px," + (242 - count) + " px)";
        document.getElementById("sa3").style.width = count + "px";
        document.getElementById("s3").style.width = count + "px";
        document.getElementById("s3").style.clip = "rect(0px, " + count + "px, 370px, 0px)";
        spotlightTimer = setTimeout("switchRight()", spotlightTime);
    }    
}

function changeSpotlight(){
    document.getElementById("sa1").style.width = "0px";
    document.getElementById("s1").style.marginLeft = "-242px";
    document.getElementById("s1").style.clip = "rect(0px, 242px, 370px, 242px)";
    document.getElementById("sa2").style.width = "242px";
    document.getElementById("s2").style.marginLeft = "0px";
    document.getElementById("s2").style.width = "242px";
    document.getElementById("s2").style.clip = "rect(0px, 242px, 370px, 0px)";
    document.getElementById("sa3").style.width = "0px";
    document.getElementById("s3").style.width = "0px";
    document.getElementById("s3").style.clip = "rect(0px, 0px, 370px, 0px)";
}