var startIndex = 1;
var theButtonWidth = 40;
var heroAreaWidth = 600;
var slideDistance = 20;
var slideSpeed = 10;
var theSliderDiv = document.getElementById('heroSlider');
var theSliderStage = document.getElementById('heroStage');
var theHeroDivs = document.getElementById('heroSlider').getElementsByTagName('div');
var theNewHeroDiv;
var theOldHeroDiv;
var slideID;
var selectedSlideWidth;
var targetWidth;
var heroIndex = 0;
var slideCheck = 0;


var isIE = false;
var req;

// retrieve XML document (reusable generic function);
function loadXMLDoc(url) {
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = processReqChange;
        req.open("GET", url, true);
        req.send(null);
    } else if (window.ActiveXObject) {
        isIE = true;
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = processReqChange;
            req.open("GET", url, true);
            req.send();
        }
    }
}

// handle onreadystatechange event of req object
function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            // clearTopicList();
            // buildTopicList();
            loadContent();
        } else {
            alert("There was a problem retrieving the XML data:\n" +
                req.statusText);
        }
    }
}

// builds the Hero Slider based on content retrieved from the xml file
function loadContent() {

    var settingObj = req.responseXML.getElementsByTagName("settings");
    startIndex = parseInt(settingObj[0].getElementsByTagName('startIndex')[0].childNodes[0].nodeValue);
    theButtonWidth = parseInt(settingObj[0].getElementsByTagName('theButtonWidth')[0].childNodes[0].nodeValue) - 2 ;
    theButtonColor = settingObj[0].getElementsByTagName('theButtonColor')[0].childNodes[0].nodeValue;
    heroAreaWidth = parseInt(settingObj[0].getElementsByTagName('heroAreaWidth')[0].childNodes[0].nodeValue);
    heroAreaHeight = parseInt(settingObj[0].getElementsByTagName('heroAreaHeight')[0].childNodes[0].nodeValue);
    slideDistance = parseInt(settingObj[0].getElementsByTagName('slideDistance')[0].childNodes[0].nodeValue);
    slideSpeed = parseInt(settingObj[0].getElementsByTagName('slideSpeed')[0].childNodes[0].nodeValue)/40;

    var heroObjects = req.responseXML.getElementsByTagName("hero");
    theSliderDiv = document.getElementById('heroSlider');
    //theSliderDiv.style.background = "#fff";
    theSliderDiv.style.width = heroAreaWidth + (theButtonWidth * (heroObjects.length)) + "px";
    theSliderDiv.style.height = heroAreaHeight + "px";
    theSliderStage.style.width = theSliderDiv.style.width;
    theSliderStage.style.height = theSliderDiv.style.height;
    theSliderStage.style.background = theSliderDiv.style.background;
    for (inc = 1; inc <= heroObjects.length; inc++) {

        title = heroObjects[inc - 1].getElementsByTagName('title')[0].childNodes[0].nodeValue;
        titleColor = heroObjects[inc - 1].getElementsByTagName('titleColor')[0].childNodes[0].nodeValue;
        descriptionText = heroObjects[inc - 1].getElementsByTagName('descriptionText')[0].childNodes[0].nodeValue;
        descriptionColor = heroObjects[inc - 1].getElementsByTagName('descriptionColor')[0].childNodes[0].nodeValue;
        bgImageURL = heroObjects[inc - 1].getElementsByTagName('bgImageURL')[0].childNodes[0].nodeValue;
        theButtonImageURL = heroObjects[0].getElementsByTagName('theButtonImageURL')[0].childNodes[0].nodeValue;
        linkURL = heroObjects[inc - 1].getElementsByTagName('linkURL')[0].childNodes[0].nodeValue;

        var newDiv = document.createElement('div');
        targetWidth = (theSliderDiv.offsetWidth) - ((heroObjects.length - 1) * theButtonWidth);
        if (inc <= startIndex) {
            newDiv.style.marginLeft = (inc - 1) * theButtonWidth + "px";
            if (inc == startIndex) {
                newDiv.className = "divOn";
            }
        } else {
            newDiv.className = "divOff";
            newDiv.style.marginLeft = targetWidth - theButtonWidth + ((inc - 1) * theButtonWidth) + "px";
        }

        newDiv.style.width = targetWidth + "px";
        newDiv.style.backgroundImage = "url('clientbin/" + bgImageURL + "')";
        newDiv.style.backgroundRepeat = "no-repeat";
        newDiv.style.backgroundPosition="top right"
//        newDiv.style.background = "#eee url('clientbin/" + bgImageURL + "') no-repeat";
        var newAnchor = document.createElement('a');
        newAnchor.className = "heroSelector";
        newAnchor.style.background = theButtonColor + " url('" + theButtonImageURL + "') repeat-x center";
        //newAnchor.style.backgroundColor = theButtonColor;
        newAnchor.style.width = theButtonWidth + "px";
        if (navigator.userAgent.toString().toUpperCase().indexOf("MSIE") == -1) {
                 newAnchor.style.height = 29 + "px";
                 newAnchor.style.paddingTop = heroAreaHeight - 29 + "px!important";
             }
        newAnchor.innerHTML = inc;
        newDiv.appendChild(newAnchor);
        newAnchor.onmouseover = function() {
            displayHero(this);
            return true;
        };
        newAnchor.href = "javascript:;";
        var newH1 = document.createElement('h1');
        //newH1.style.color = titleColor;
        newH1.style.marginLeft = theButtonWidth + 20 + "px";
        if (navigator.userAgent.toString().toUpperCase().indexOf("MSIE") != -1) {
            newH1.style.width = "252px";
            newH1.style.height = "276px";

        }
        newH1.innerHTML = title + "<br /><span>" + descriptionText + "<br /><span class='blueButton'><a href='javascript:;' onclick=\"document.getElementsByTagName('body')[0].style.background='url(" + bgImageURL + ")'\">Learn More</a></span></span>";

        newDiv.appendChild(newH1);
        theSliderDiv.appendChild(newDiv);

    }
    theOldHeroDiv = theHeroDivs[0];
    theHeroDivs = document.getElementById('heroSlider').getElementsByTagName('div');
    displayHero(document.getElementById('heroSlider').getElementsByTagName('div')[0]);
}


function displayHero(element) {

    if (theOldHeroDiv != element.parentNode) {
        clearInterval(slideID);
        slideID = null;
        element.blur();
        theNewHeroDiv = element.parentNode;
        for (inc = 0; inc < theHeroDivs.length; inc++) {
            if (theHeroDivs[inc] == theNewHeroDiv) {
                heroIndex = inc;
                break;
            }
        }
        if (theHeroDivs[heroIndex].style.marginLeft == inc * theButtonWidth + "px") {
            slideCheck = 1;
        } else {
            slideCheck = 0;
        }
        slideID = window.setInterval("slideHeros()", slideSpeed);
    }
}

function slideHeros() {
    for (inc = 0; inc < theHeroDivs.length; inc++) {
        theHeroDivs[inc].className = "divOff";
        tempLeft = parseInt(theHeroDivs[inc].style.marginLeft.toString().replace("px", ""));
        if (inc <= heroIndex) {
            tempTarget = inc * theButtonWidth;
            if (tempLeft > tempTarget) {
                theHeroDivs[inc].style.marginLeft = tempLeft - slideDistance + "px";
            } else {
                theHeroDivs[inc].style.marginLeft = inc * theButtonWidth + "px";
            }
        } else {
            tempTarget = targetWidth - theButtonWidth + (inc * theButtonWidth);
            if (tempLeft < tempTarget) {
                theHeroDivs[inc].style.marginLeft = tempLeft + slideDistance + "px";
            } else {
                theHeroDivs[inc].style.marginLeft = targetWidth - theButtonWidth + (inc * theButtonWidth) + "px";
            }
        }
    }
    if (slideCheck == 1 && theHeroDivs[heroIndex + 1].style.marginLeft == targetWidth - theButtonWidth + ((heroIndex + 1) * theButtonWidth) + "px") {
        clearInterval(slideID);
    } else if (slideCheck == 0 && theHeroDivs[heroIndex].style.marginLeft == heroIndex * theButtonWidth + "px") {
        clearInterval(slideID);
    }

    theOldHeroDiv = theNewHeroDiv;
    theNewHeroDiv.className = "divOn";
    theSliderDiv.style.visibility = "visible";
}



function initPage() {

if (document.getElementById('msviMasthead')){
        var tablesArray = document.getElementsByTagName("TABLE");
        var tableLength = tablesArray.length - 1;
        //tablesArray[tableLength].style.display = 'none';
    }
    loadXMLDoc("clientbin/heros.xml");
    document.getElementById('silverlightControlHost').style.display = "none";
}

function isSilverlightInstalled() {
    var isSilverlightInstalled = false;
    try {
        //check on IE
        try {
            var slControl = new ActiveXObject('AgControl.AgControl');
            isSilverlightInstalled = true;
        }
        catch (e) {
            //either not installed or not IE. Check Firefox
            if (navigator.plugins["Silverlight Plug-In"]) {
                isSilverlightInstalled = true;
            }
        }
    }
    catch (e) {
        //we don't want to leak exceptions. However, you may want
        //to add exception tracking code here.
    }
    return isSilverlightInstalled;
}



if (!isSilverlightInstalled()) {
    window.onload = initPage;
}