/*  TechCentral 2010 Main Page Highlights
 *
 *  Info:
 *  You know the Main Page Highlights? On the TechCentral 2010 Main Page? Well,
 *  we want it to behave in the following manner:
 *  - When a user first accesses the Main Page, the MPH data is loaded.
 *    (If it can't be loaded, an error message must be display.)
 *  - The MPH has a 'currently selected item' (the "info box") and a 'selection'
 *    of other available highlights which the user can select from.
 *  - (The MPH should have EXACTLY 4 items - for aesthetic purposes - but this
 *    shouldn't crash the system if there are more/less than 4.)
 *  - The MPH should automatically cycle between all the items.
 *  - If the user is currently looking at the item (ostensibly by having the
 *    mouse cursor within in the MPH, either the info box or the selection) then
 *    the rotation should be paused.
********************************************************************************
 */

/*  Main Page Highlight Variables
    We have variables here to keep track of the XMLHTTPRequest and the rotation
    of the MPH items.
--------------------------------------------------------------------------------
*/
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 title = xmlItems[i].attributes.getNamedItem("title").value;
        var summary = xmlItems[i].attributes.getNamedItem("summary").value;
        var link = xmlItems[i].attributes.getNamedItem("link").value;
        var picture = xmlItems[i].attributes.getNamedItem("picture").value;
        var style = xmlItems[i].attributes.getNamedItem("style").value;

        var newMPHItem = new MPHItem(title, summary, link, picture, style);
        data.push(newMPHItem);
        //--------
      }

      //Now that the data's available, populate the table.
      //--------
      var mphAll = document.getElementById("mainPageHighlight");
      var mphInfo = document.getElementById("mainPageHighlight_info");
      var mphSelection = document.getElementById("mainPageHighlight_selection");
      var dataInfo = "";
      var dataSelection = "";
      sizeOfMPH = 0;
      for (var i = 0; i < data.length; i++)
      {
        dataInfo += "<div id=\"mainPageHighlight_item_" + i + "\" class=\"" + htmlSafe(data[i].style) + "\">";
        dataInfo += "<a href=\""+htmlSafe(data[i].link)+"\"><img src=\"/data/mainPageHighlights/large/" + data[i].picture + "\" /></a>";
        dataInfo += "<h1><a href=\"" + htmlSafe(data[i].link) + "\">" + htmlSafe(data[i].title) + "</a></h1>";
        dataInfo += "<p>" + htmlSafe(data[i].summary) + "</p></div>\n";
        dataSelection += "<li><a onmouseup=\"selectMPHItem(" + i + ", true);\" href=\"javascript:void(0);\"><img src=\"/data/mainPageHighlights/small/" + data[i].picture + "\" /></a></li>";
        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.
  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(title, summary, link, picture, style)
{
  this.title = title;
  this.summary = summary;
  this.link = link;
  this.picture = picture;
  this.style = style;
}

/*  This initiates the MPH and its auto-rotate functions.
*/
function initMPH(newSizeOfMPH)
{
  var mphAll = document.getElementById("mainPageHighlight");
  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);
}