// Include the following:
// <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
// <script type="text/javascript" src="general.js"></script>


///////////////
// Constants and Globals

const DATABASE = "db.json";
const MAX_MEDIA_COLUMNS = 5;
const TAB_MEDIA = "media";
const TAB_TESTIMONIALS = "testimonials";

var gDatabase = null;


///////////////
// Helpers

function $c(aType)
{
  return document.createElement(aType);
}

function $ct(aStr)
{
  return document.createTextNode(aStr);
}

function $l(aTarget, aSrc, aParams, aCallback)
{
  $(aTarget).load(aSrc,
                  aParams,
                  function(aResponseText, aTextStatus, aXMLHttpRequest)
                  {
                    if (aCallback)
                    {
                      aCallback();
                    }
                  }
  );
}

function $ldb(aCallback, aBypassCache)
{
//alert(gDatabase);
  if (gDatabase && !aBypassCache)
  {
//alert('yay!');
    aCallback(gDatabase);
    return;
  }
  $.getJSON(DATABASE, "r=" + Math.random(), function(aResult) { gDatabase = aResult; aCallback(gDatabase); } );
}


///////////////
// Methods

function getSelectedTab()
{
  return $("#navigation > span > a[selected='true']").text().toLowerCase();
}

function selectTab()
{
  var page = /.+\/(.+\.html)/;
  var tab = "#navigation > span > a[href='" + document.URL.match(page)[1] + "']";
  $(tab).attr("selected", "true");
}

function loadMediaList(aDatabase)
{
  var loadFirst = true;
  var dbImages = aDatabase.images;
  var mediaList = $("#mediaList");
  
  for (var i = 0; i < MAX_MEDIA_COLUMNS; i++)
  {
    var row = $c("div");
    mediaList.append(row);

    for (var j = 0; j < MAX_MEDIA_COLUMNS; j++)
    {
      var container = $c("div");
      container.setAttribute("class", "imageCell");
      container.setAttribute("onclick", "loadMedia(this.firstChild);");
      row.appendChild(container);

      var item = $c("img");
      container.appendChild(item);
// TODO JVL: Test code, remove when finished testing...
var k = Math.floor(Math.random() * dbImages.length);
      item.setAttribute("alt", dbImages[k].title);
      item.setAttribute("src", dbImages[k].source);
      item.setAttribute("desc", dbImages[k].description);

      // Load the first picture in the list
      if (loadFirst)
      {
        loadMedia(item);
        loadFirst = false;
      }
    }
  }
}

function loadMedia(aElement)
{
  var media = $("#mediaImage");
  media.attr("alt", aElement.getAttribute("alt"));
  media.attr("src", aElement.getAttribute("src"));

  // Empty any child nodes it may have then append the new description
  $("#mediaDescription").empty().text(aElement.getAttribute("desc"));
}

// Only load the rest of the page content once we've finished loading the header elements
function loadPageContent()
{
  selectTab();
  $ldb(loadQuote);
  
  switch (getSelectedTab())
  {
    case TAB_MEDIA:
    {
      $ldb(loadMediaList);
      break;
    }
    
    case TAB_TESTIMONIALS:
    {
      $ldb(loadTestimonials);
      break;
    }
  }
}

function loadQuote(aDatabase)
{
  var dbRandomQuotes = aDatabase.quotes;
  var idx = Math.floor(Math.random() * dbRandomQuotes.length);
  var quoteAnchor = $("#quote");
  var txt = $ct(dbRandomQuotes[idx].statement);
  var quote = $c("q");
  quote.appendChild(txt);
  quoteAnchor.append(quote);
  var cite = $ct(" - " + dbRandomQuotes[idx].cite);
  quoteAnchor.append(cite);
}

function loadTestimonials(aDatabase)
{
  var dbTestimonials = aDatabase.testimonials;
  var testimonials = $("#testimonialList");
  for (var idx = 0; idx < dbTestimonials.length; idx++)
  {
    var txt = $ct(dbTestimonials[idx].statement);
    var quote = $c("q");
    quote.appendChild(txt);
    var testi = $c("p");
    testi.appendChild(quote);
    var cite = $ct(" - " + dbTestimonials[idx].cite);
    testi.appendChild(cite);
    testimonials.append(testi);
  }
}


///////////////
// Load

$(document).ready(
  function()
  {
// TODO JVL: Remove when in production
$ldb(loadQuote);
//    $l("#header", "header.html", "r=" + Math.random(), loadPageContent);
//    $l("#footer", "footer.html");
  }
);