var xmlDoc;
var timelineXML = "data/Projects.xml";
var xmlhttp;
var projects;

function loadXMLDoc(xmlFilename) {    
    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = doneLoading;
    xmlhttp.open("GET", xmlFilename, true);
    xmlhttp.send();

}

function SqueezeMe(projNode) {
    var x = document.getElementById("projectBox");

    var artText =
        '<article><header><h2>' +
        getTextContent(projNode, "title") +
        '</h2></header><aside>';

    websites = getTextContent(projNode, "website");
    if (websites != undefined) {
        artText +=
          '<span style="padding: 4px;display: block;"><a href="' +
          websites[0].textContent + 
          '" style="text-decoration: none; font-variant: small-caps; font-weight: bold;">Official Website</a></span>';
    }

    artText += '<dl></dl></aside>' + getTextContent(projNode, "body");

    youtubes = getTextContent(projNode, "youtube");
    if (youtubes != undefined) {
        artText += '<iframe width="580" height="360" src="http://www.youtube.com/embed/' + youtubes + '" frameborder="0" allowfullscreen></iframe>';
    }

    artText += '<span class="Gallery">';
    images = projNode.getElementsByTagName("image");
    if((images.length > 0) && (images[0].textContent == undefined))
    {
        for (i = 0; i < images.length; ++i) {
            artText += '<a target="_blank" href="' + images[i].text + '"><img src="' + images[i].text + '" /></a>';
        }
    }
    else
    {
        for (i = 0; i < images.length; ++i) {
            artText += '<a target="_blank" href="' + images[i].textContent + '"><img src="' + images[i].textContent + '" /></a>';
        }
    }
    artText += '</span></article>';


    x.innerHTML = artText;
    sideBar = x.getElementsByTagName("dl")[0];

    sideBar.innerHTML += "<dt>Position</dt><dd>" + getTextContent(projNode, ("position")) + "</dd>";
    sideBar.innerHTML += "<dt>Platform</dt><dd>" + getTextContent(projNode, ("platform")) + "</dd>";
    sideBar.innerHTML += "<dt>Developer</dt><dd>" + getTextContent(projNode, ("developer")) + "</dd>";
    sideBar.innerHTML += "<dt>Publisher</dt><dd>" + getTextContent(projNode, ("publisher")) + "</dd>";
    sideBar.innerHTML += "<dt>Released</dt><dd>" + getTextContent(projNode, ("released")) + "</dd>";

    // Show Project Box
    x.style.display = "block";
}

function hideLightBox() {
    var x = document.getElementById("projectBox");
    x.style.display = "none";
    x.innerHTML = "";
}

function getTextContent(node, requestStr) {
    var elemList = node.getElementsByTagName(requestStr);
    if(elemList.length < 1)
    {
        return undefined;
    }

    var juicy = elemList[0].textContent;
    if(juicy == undefined)
    {
        juicy = elemList[0].text;
    }

    return juicy
}

function doneLoading() {
    if (xmlhttp.readyState != 4) {
        document.getElementById("ProjectTimeline").innerHTML = ["[", xmlhttp.readyState, "]"].join("");
        return;
    }

    xmlDoc = xmlhttp.responseXML;
    projects = xmlDoc.getElementsByTagName("project");

    timelineEl = document.getElementById("ProjectTimeline");
    timelineEl.innerHTML = "";

    txt = ' ';
    counter = 0;
    for (i = projects.length - 1; i >= 0; i--) {
        projNode = projects[i];
        var spanBox = document.createElement("span");
        spanBox.className = "Smooth";

        spanBox.innerHTML = '<h3 class="Smooth">' + getTextContent(projNode, "title") + '</h3>';
        spanBox.style.backgroundImage = "url(" + getTextContent(projNode, "thumbnail") + ")";

        // Stupid Gotcha -- http://calculist.blogspot.com/2005/12/gotcha-gotcha.html
        spanBox.onclick = (function () {
            var pN = projects[i];
            return function () { SqueezeMe(pN) };
        })();

        timelineEl.appendChild(spanBox);

        counter++;
    }
}

loadXMLDoc(timelineXML);