﻿
      $(function(){

       $('#slider-one').movingBoxes({
        startPanel   : 4,    // start with this panel
        wrap         : true, // psuedo wrapping - it just runs to the other end
        width        : 740,  // overall width of movingBoxes
        imageRatio   : 2/3,    // Image ration set to 1:1 (square image)
        buildNav     : true, // if true, navigation links will be added
        navFormatter : function(){ return "&#9679;"; } // function which returns the navigation text for each panel
       });

       $('#slider-two').movingBoxes({
        startPanel  : 3,     // start with this panel
        width       : 600,   // overall width of movingBoxes
        panelWidth  : .7,    // current panel width adjusted to 50% of overall width
        imageRatio  : 16/9,  // 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 .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
       $('.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 );
        }
       });

      });
  
