jQuery(function($) {
  var delaySeconds = 6;
  // Need to subtract one because of the play/pause button.
  var numButtons = $("ul.buttons li").length - 1;
  var numSlides = $("li.slide").length;
  var shown = true;
  var running = true;
  if (numButtons != numSlides) {
      log("The count of slides and buttons doesn't match.", "error");
  }
  var handlerArray = new Array(numSlides);
  var delay = (delaySeconds * 1000) + "";
  var timer;

  // Retrieves what the glass panel caption should be, by retrieving
  // it from the page according to the element id. #panel1 will have
  // the content for caption 1, #panel2 for caption2, and so on.
  function getGlassContent(imageNumber) {
    var panelName = "panel" + imageNumber;
    html = $("#" + panelName).html();
    return html;
  }

  // Sets the text/html inside the glas panel at the bottom.
  // This is basically a caption for the image.
  function setBottomGlassContent(html) {
    $("#bottom_glass_content").html(html);
  }

  // Dynamically create event handlers to assign to the
  // buttons.
  function createHandler(buttonNumber) {
    var handler = function(event) {
        var image = "#image" + buttonNumber;
        var button = "#button" + buttonNumber;

        var content = getGlassContent(buttonNumber);
        setBottomGlassContent(content);

        $(".slide").css("visibility","hidden");
        $(image).css("visibility","visible");
        $(image).css("opacity","0");
        $(image).animate({"opacity":1},300, "linear", null);
        $("ul.buttons li").removeClass("active");
        $(image).animate({"opacity":1},300, "linear", null);
        $(button).addClass("active");
        clearTimeout(timer);
        if (buttonNumber == numSlides) {
            // Go back to the first slide
            timer = setTimeout(handlerArray[0], delay);
        } else {
            // Go to the next slide
            timer = setTimeout(handlerArray[buttonNumber], delay);
        }
        $(image).animate({"opacity":1},300, "linear", null);
    }
    return handler;
  }

  function log(message, level) {
    try {
      if (level != null) {
          eval("console."+level+"(message);");
      } else {
          console.debug(message);
      }
    } catch (err) {};
  }

  // Handler for the play/pause button.
  function play_pause() {
    log("In play_pause", "info");
    
    clearTimeout(timer);
    if (running) {
       log("Running, so pause.");
       clearTimeout(timer);
       $("#play_pause").css({'background-image' : 'url("images/play.png")'});
    } else {
       log("Paused, so start running");
       $("#play_pause").css({'background-image' : 'url("images/pause.png")'});

       var activeId = $("li.active").attr("id");
       nextHandler = parseInt(activeId.substr(6));
       // Go back to the beginning if necessary
       nextHandler = (nextHandler >= (numSlides - 1)) ? 0 : nextHandler;
       timer = setTimeout(handlerArray[nextHandler], 250);
    }
    running = ! running;
  }

  function toggled() {
     shown = ! shown;
     if (shown) {
        $("#panel_switch").css({'background-image' : 'url("images/hide.png")'});
        openBottomGlass();
     } else {
        $("#panel_switch").css({'background-image' : 'url("images/show.png")'});
        closeBottomGlass();
     }
  }

  function openBottomGlass() { $("#bottom_glass").animate({ height: "40px" }, 300, "swing"); }

  function closeBottomGlass() { $("#bottom_glass").animate({ height: "9px" }, 300, "swing"); }

  function onPageLoaded(event) {
    setBottomGlassContent(getGlassContent(1));

    // Register event handlers
    for (slideNum=1; slideNum<=numSlides; slideNum++) {
        handlerArray[slideNum-1] = createHandler(slideNum);
        var button = "#button" + slideNum;
        $(button).mousedown(handlerArray[slideNum-1]);
    }
    $("#panel_switch").mousedown(toggled);
    $("#play_pause").mousedown(play_pause);

    clearTimeout(timer);
    timer = setTimeout(handlerArray[1], delay);
  }

  onPageLoaded();
});