$(function(){

   $('#slider-two').movingBoxes({
    startPanel   : 2,      // start with this panel
    width        : 919,    // overall width of movingBoxes (not including navigation arrows)
    panelWidth   : .530,     // current panel width adjusted to 70% of overall width
    imageRatio   : 444/324,   // Image ratio set to 16:9
    buildNav     : true,   // if true, navigation links will be added
    navFormatter : function(index, panel){ return panel.find('h2 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
   var i, t = '', len = $('#slider-one .mb-panel').length + 1;
   for ( i=1; i<len; i++ ){
    t += '<a href="#" rel="' + i + '">' + i + '</a> ';
   }
   $('.dlinks')
    .find('span').html(t).end()
    .find('a').click(function(){
     $('#slider-one').data('movingBoxes').currentPanel( $(this).attr('rel') );
     return false;
    });

   // Report events to firebug console
   $('.mb-slider').bind('initialized.movingBoxes initChange.movingBoxes beforeAnimation.movingBoxes completed.movingBoxes',function(e, slider, tar){
    // show object ID + event in the firebug console
    // namespaced events: e.g. e.type = "completed", e.namespace = "movingBoxes"
    if (window.console && window.console.firebug){
     var txt = slider.$el[0].id + ': ' + e.type + ', now on panel #' + slider.curPanel + ', targeted panel is ' + tar;
     console.debug( txt );
    }
   });

  });// JavaScript Document