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();
        }
    }
}

function processReqChange() {
    // only if req shows "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            loadDetails();
        } else {
            //alert("There was a problem retrieving the XML data:\n" +
        }
    }
}

var numberOfHeros = 0;
var selectedHeroIndex = 0;
var firstDistance = 30;
var speed = 10;
var distance = firstDistance;
var moveHeroTimer;
var movePosition = 0;
var heroOnTheMove = false;

function loadDetails() {
    var heroXMLNodes = req.responseXML.getElementsByTagName("hero");
    var settingXMLNode = req.responseXML.getElementsByTagName("settings")[0];

    numberOfHeros = heroXMLNodes.length;
    
    for (z = 0; z < heroXMLNodes.length; z++) {

        var heroDiv = document.createElement("div");
        heroDiv.className = "heroDiv";
        if (heroXMLNodes[z].getElementsByTagName('imageURL').length > 0) {
            heroDiv.style.background = "url(" + heroXMLNodes[z].getElementsByTagName('imageURL')[0].childNodes[0].nodeValue + ") no-repeat left bottom";
        }

        var title = heroXMLNodes[z].getElementsByTagName('title')[0].childNodes[0].nodeValue;
        var subtitle = heroXMLNodes[z].getElementsByTagName('subtitle')[0].childNodes[0].nodeValue;
        var description = "";
        description = heroXMLNodes[z].getElementsByTagName('description')[0].childNodes[0].nodeValue;

        var heroContent = "";
        heroContent += "<h1>" + title + "</h1>";
        heroContent += "<h2>" + subtitle + "</h2>";
        heroContent += description.toString();

        if (heroXMLNodes[z].getElementsByTagName('linkImageURL').length > 0) {
            var linkImageURL = heroXMLNodes[z].getElementsByTagName('linkImageURL')[0].childNodes[0].nodeValue;
            var linkURL = heroXMLNodes[z].getElementsByTagName('linkURL')[0].childNodes[0].nodeValue;
            if (heroXMLNodes[z].getElementsByTagName('linkText').length > 0) {
                var linkText = heroXMLNodes[z].getElementsByTagName('linkText')[0].childNodes[0].nodeValue;
            } else {
                linkText = "";
            }
            heroContent += "<a href=\"" + linkURL + "\"><img src=\"" + linkImageURL + "\" alt=\"" + linkURL + "\" /></a>";
            heroContent += linkText;
        }

        heroDiv.innerHTML = heroContent;

        document.getElementById("homeHeros").appendChild(heroDiv);
        document.getElementById("homeHeros").style.width = document.getElementById("homeHeros").offsetWidth + heroDiv.offsetWidth + "px";


    }
    //            alert(heroXMLNodes.getElementsByTagName('title')[0].childNodes[0].nodeValue);
}





function moveHerosLeft() {
    if (selectedHeroIndex > 0 && heroOnTheMove == false) {
        moveHerosToIndex(selectedHeroIndex - 1)
    }
}
function moveHerosRight() {
    if (selectedHeroIndex < numberOfHeros - 1 && heroOnTheMove == false) {
        moveHerosToIndex(selectedHeroIndex + 1)
    }
}

function moveHerosToIndex(index) {
    if (selectedHeroIndex != index && heroOnTheMove == false) {
        selectedHeroIndex = index;
        adjustSideBarLinks();
        moveHeroTimer = setTimeout(animateHeros, speed);
        document.getElementById('moveRightButton').className = "";
        document.getElementById('moveLeftButton').className = "";
        document.getElementById('moveRightButton').className = "off";
        document.getElementById('moveLeftButton').className = "off";
    }
}

function animateHeros() {
    movePosition = 865 * -selectedHeroIndex;
    var homeHeros = document.getElementById('homeHeros');

    if (moveHeroTimer != null) {
        clearTimeout(moveHeroTimer);
    }
    if (homeHeros.style.marginLeft.replace("px", "") > 865 * -selectedHeroIndex) {
        if (homeHeros.style.marginLeft.replace("px", "") - (865 * -selectedHeroIndex) < 5) {
            homeHeros.style.marginLeft = (865 * -selectedHeroIndex) + "px";
            distance = firstDistance;
            if (selectedHeroIndex != 0) {
                document.getElementById('moveLeftButton').className = "";
            }
            if (selectedHeroIndex != numberOfHeros - 1) {
                document.getElementById('moveRightButton').className = "";
            }
            heroOnTheMove = false;
            clearTimeout(moveHeroTimer);
        } else {
            heroOnTheMove = true;
            homeHeros.style.marginLeft = (homeHeros.style.marginLeft.replace("px", "") - distance) + "px";
            if (homeHeros.style.marginLeft.replace("px", "") < movePosition + 260) {
                distance = distance / 1.105;
            }
            //alert(speed);
            moveHeroTimer = setTimeout(animateHeros, speed);
        }
    } else {
        if (homeHeros.style.marginLeft.replace("px", "") + (865 * -selectedHeroIndex) > -5) {
            homeHeros.style.marginLeft = (865 * -selectedHeroIndex) + "px";
            distance = firstDistance;
            if (selectedHeroIndex != 0) {
                document.getElementById('moveLeftButton').className = "";
            }
            if (selectedHeroIndex != numberOfHeros - 1) {
                document.getElementById('moveRightButton').className = "";
            }
            heroOnTheMove = false;
            clearTimeout(moveHeroTimer);
        } else {
            heroOnTheMove = true;
            homeHeros.style.marginLeft = (parseInt(homeHeros.style.marginLeft.replace("px", "")) + distance) + "px";
            if (homeHeros.style.marginLeft.replace("px", "") > movePosition - 260) {
                distance = distance / 1.105;
            }
            moveHeroTimer = setTimeout(animateHeros, speed);
        }
    }
}

function adjustSideBarLinks() {
    if (document.getElementById("sidebarLinks") != null) {
        var sidebarLinks = document.getElementById("sidebarLinks").getElementsByTagName('a');
        for (q = 0; q < sidebarLinks.length; q++) {
            sidebarLinks[q].className = "";
            if (q == selectedHeroIndex) {
                sidebarLinks[q].className = "on";
            }
        }
    }
}