function renderWorkList(aJSON) {
  var workList = aJSON.work;
  
  $("div.content").append("<ul class='work'><li class='title'>Work</li></ul>");
  for (workItem in workList) {
    theWork = workList[workItem];
    var slidesHTML = "";
    for (theFile in theWork.files) {
      slidesHTML = slidesHTML + "<div class='slide'>" + "<a href='" +
      theWork.files[theFile].src + "'><img src='" +
      theWork.files[theFile].thumbnail + "' class='slide' alt='" +
      theWork.files[theFile].title + "' /></a><div class='caption'>" +
      theWork.files[theFile].caption + "</div></div>"
    }
    
    $("ul.work").append("<li class='workItem'>" +
      "<div class='workTitle'>" + theWork.title + "</div>" +
      "<div id='slides" + workItem + "'><div class='slides_container'>" +
      slidesHTML + "</div></div>" +
      "<div class='workDesc'>" + theWork.desc + "</div>" +
      "</div>" + "</li>");
    $('#slides' + workItem).slides({
      preload: true,
      preloadImage: 'lib/img/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: false,
      animationStart: function(current) {
        $('.caption').animate({
          bottom:-35
          },100);
          if (window.console && console.log) {
            // example return of current slide number
            console.log('animationStart on slide: ', current);
          };
        },
      animationComplete: function(current){
        $('.caption').animate({
          bottom:0
          },200);
          if (window.console && console.log) {
          // example return of current slide number
            console.log('animationComplete on slide: ', current);
          };
        },
      slidesLoaded: function() {
        $('.caption').animate({
          bottom:0
          },200);
        }
      }
    );
  }
};

$(document).ready(function() {
  var xobj = new XMLHttpRequest();
  xobj.overrideMimeType("application/json");
  xobj.open("GET", "lib/json/data.json", true);
  xobj.send(null);
  xobj.onreadystatechange = function() {
    if (xobj.readyState == 4) {
      var theJson = jQuery.parseJSON(xobj.responseText);
      //console.log(theJson);
      //var theJson = JSON.parse(xobj.responseText);
      $("div.content").append(theJson.brief);
      
      $("a").live("click", function() {
        if (this.id == "about" && this.className == "nav") {
          $("div.content").fadeOut("fast", function() {
            $(this).empty().append(theJson.about).fadeIn("fast");
          });
        }
        else if (this.id == "home") {
          $("div.content").fadeOut("fast", function() {
            $(this).empty().append(theJson.brief).fadeIn("fast");
          });
        }
        else if (this.id == "work") {
          $("div.content").fadeOut("fast", function() {
            $(this).empty();
            renderWorkList(theJson);
            $(this).fadeIn("fast");
          });
        }
      });
    };
  };
});