var xmlMPHReq;
var currentMPH;
var sizeOfMPH;
var counterMPH;
var isMouseInMPH = false;
var counterStartMPH = 5;  //The MPH will switch to the next one 5 seconds after a new item is shown.
var timerMPH;

/*  This function sends a request for data from the specified URL.
To ensure the XML is always freshed (not cached), you might want to add a
dumb, random query to the URL,
e.g. "/data/mainPageHighlights.xml?random=[random number]".
*/
function requestMPHXML(url)
{
    if (window.XMLHttpRequest) { xmlMPHReq = new XMLHttpRequest(); } //For Firefox
    else if (window.ActiveXObject) { xmlMPHReq = new ActiveXObject("Microsoft.XMLHTTP"); } //For IE
    if (xmlMPHReq != null)
    {
        try
        {
            xmlMPHReq.onreadystatechange = loadMPHXMLData;
            xmlMPHReq.open("GET", url, true);
            xmlMPHReq.send(null);
        }
        catch (err) { }  //alert("ERROR: Could not open "+url+".");
    }
    else { }  //alert("ERROR: Browser does not support XMLHTTP.");
}

/*  This function loads the data that's been retrieved. */
function loadMPHXMLData()
{
    if (xmlMPHReq.readyState == 4)
    {
        if (xmlMPHReq.status == 200)
        {
            var xmlItems = xmlMPHReq.responseXML.getElementsByTagName("item");
            var data = Array();
            for (var i = 0; i < xmlItems.length; i++)
            {
                //Extract attribute data like this instead.
                var thumbnail = xmlItems[i].attributes.getNamedItem("thumbnail").value;
                var photo = xmlItems[i].attributes.getNamedItem("photo").value;
                var title = xmlItems[i].attributes.getNamedItem("title").value;
                var subtitle = xmlItems[i].attributes.getNamedItem("subtitle").value;
                var link = xmlItems[i].attributes.getNamedItem("link").value;
                var year = xmlItems[i].attributes.getNamedItem("year").value;
                var month = xmlItems[i].attributes.getNamedItem("month").value;

                var newMPHItem = new MPHItem(thumbnail, photo, title, subtitle, link, year, month);
                data.push(newMPHItem);
            }

            //Now that the data's available, populate the table.
            var mphAll = document.getElementById("featured_box");
            var mphInfo = document.getElementById("featured_box_mainHighlight");
            var mphSelection = document.getElementById("featured_box_bottompanel");
            var dataInfo = "";
            var dataSelection = "";
            sizeOfMPH = 0;
            for (var i = 0; i < data.length; i++)
            {
                dataInfo += "<div id=\"mainPageHighlight_item_" + i + "\" class=\"\">\n";
                dataInfo += "<div class=\"highlight_container\" style=\"background:url('/highlights/images/" + htmlSafe(data[i].year) + "/" + htmlSafe(data[i].month) + "/" + htmlSafe(data[i].photo) + "') no-repeat top;\">\n";
                dataInfo += "<div class=\"caption_box\"" + i + ">\n";
                dataInfo += "<h1>" + "<a id=\"mainPageHighlight_itemlink_" + i + "\" href=\"" + htmlSafe(data[i].link) + "\" style=\"color:" + htmlSafe(data[i].title_color) + "\">" + htmlSafe(data[i].title) + "</a></h1>\n";
                dataInfo += "<p>" + htmlSafe(data[i].subtitle) + "</p>\n";
                dataInfo += "</div>\n";  
                dataInfo += "</div>\n";
                dataInfo += "</div>\n";
                               
                dataSelection += "<a onmouseover=\"selectMPHItem(" + i + ", true);\" href=\"javascript:void(0);\"><img src=\"/highlights/images/" + htmlSafe(data[i].year) + "/" + htmlSafe(data[i].month) + "/" + data[i].thumbnail + "\" /></a>";
                sizeOfMPH++;
            }
            mphInfo.innerHTML = dataInfo;
            mphSelection.innerHTML = dataSelection;
            mphAll.onmouseover = function() { isMouseInMPH = true; };  //When the mouse is in the MPH, pause the rotation. Resume the rotation when the mouse leaves the box.
            mphAll.onmouseout = function() { isMouseInMPH = false; counterMPH = counterStartMPH; };  //Also, restart the counter.
            selectMPHItem(0, false);
            timerMPH = setInterval(function() {
                if (sizeOfMPH > 0) {
                    if (isMouseInMPH == false) { counterMPH--; }  //Pause the rotation of the user has his/her mouse in the "info box".
                    if (counterMPH <= 0) { selectMPHItem((currentMPH + 1) % sizeOfMPH, false); }  //Don't worry about resetting the counter; selectMPHItem() does that for you.
                }
            }
        , 1000);
        }
        else
        { }  //alert("ERROR: Could not load data.");
    }
}

/*  Select the Main Page Highlight.*/
function selectMPHItem(id, isUserClick)
{
    var i = 0;

    //If the chosen item is clicked twice, then open the link in a new window.
    //mouseover
    //if (currentMPH == id && isUserClick == true) {
        //var eleLink = document.getElementById("mainPageHighlight_itemlink_" + id);
        //if (eleLink != null) { window.location = eleLink.href; }
    //}

    currentMPH = id;
    while (true) {
        var cur = document.getElementById("mainPageHighlight_item_" + i);
        if (cur == null) { break; }
        if (id != i) { cur.style.display = "none"; }
        else { cur.style.display = "block"; }
        i++;
    }
    counterMPH = counterStartMPH;  //Restart the counter so the newly selected item is displayed for at least X seconds before the rotation begins again.
}

/*  Main Page Highlight Data Item Class*/
function MPHItem(thumbnail, photo, title, subtitle, desc, link, xposition, yposition, title_color, subtitle_color, desc_color, year, month)
{
    this.thumbnail = thumbnail;
    this.photo = photo;
    this.title = title;
    this.subtitle = subtitle;
    this.desc = desc;
    this.link = link;
    this.year = year;
    this.month = month;
}

/*  This initiates the MPH and its auto-rotate functions.*/
function initMPH(newSizeOfMPH)
{
    var mphAll = document.getElementById("featured_box");
    sizeOfMPH = newSizeOfMPH;
    mphAll.onmouseover = function() { isMouseInMPH = true; };  //When the mouse is in the MPH, pause the rotation. Resume the rotation when the mouse leaves the box.
    mphAll.onmouseout = function() { isMouseInMPH = false; counterMPH = counterStartMPH; };  //Also, restart the counter.
    selectMPHItem(0, false);
    timerMPH = setInterval(function() {
        if (sizeOfMPH > 0) {
            if (isMouseInMPH == false) { counterMPH--; }  //Pause the rotation of the user has his/her mouse in the "info box".
            if (counterMPH <= 0) { selectMPHItem((currentMPH + 1) % sizeOfMPH, false); }  //Don't worry about resetting the counter; selectMPHItem() does that for you.
        }
    }
  , 1000);
}

/* Initiate Main Highlight */
/*function initMPH()
{
    var i = 0;
    id = 0;
    while (true) {
        var cur = document.getElementById("mainPageHighlight_item_" + i);
        if (cur == null) {break;}
        if (id != i) {cur.style.display = "none";}
        else {cur.style.display = "block";}
        i++;
    }
}*/

/* Select the Main Page Highlight */
/*function selectMPHItem(id)
{
    var i = 0;
    while (true) {
        var cur = document.getElementById("mainPageHighlight_item_" + i);
        if (cur == null) {break;}
        if (id != i) {cur.style.display = "none";}
        else {cur.style.display = "block";}
        i++;
    }
}*/