// JavaScript Document

$(function(){

   
   $('#slider-two').movingBoxes({
    startPanel  : 5,     // start with this panel
    width       : 768,   // overall width of movingBoxes
    panelWidth  : .30,    // current panel width adjusted to 50% of overall width
    imageRatio  : 115/77,  // Image ratio set to 16:9
    buildNav     : true, // if true, navigation links will be added
    navFormatter : function(index, panel){ return panel.find('h3 span').text(); }, // function which gets nav text from span inside the panel header
   });

   // Example of how to move the panel from outside the plugin, only works on first selector (Use ID instead of class to target other movingboxes).
   // get: var currentPanel = $('.slider').data('movingBoxes').currentPanel(); // returns # of currently selected/enlarged panel
   // set: var currentPanel = $('.slider').data('movingBoxes').currentPanel(2); // scrolls to 2nd panel & returns 2.

   // Set up demo external navigation links
   
   // Report events to firebug console
   $('.slider').bind('initialized initChange beforeAnimation completed',function(e, slider, tar){
    // show object ID + event in the firebug console
    if (window.console && window.console.firebug){
     var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel
     txt += (typeof(tar) == 'undefined') ? '' : ', targeted panel is ' + tar;
     console.debug( txt );
    }
   });

  });