(function($) {
   var opts;
   var currPanel = 0;
   var prevPanel = 0;
   var numPanels;
   var myThis;

   $.fn.panel = function(options) {
      var defaults = {
         PIC_OFFSTAGE: -700,
         PIC_ONSTAGE:     0,
         FULL_SIZE_IMAGE_HEIGHT : 528,
         PANEL_ANIMATE_OUT: 500,
         PANEL_ANIMATE_IN:  500,
         CALLBACK :  ""
      };

      /* Merge options to defaults */
      opts = $.extend(defaults, options);
      
      /* Define some global variables */
      myThis = $(this);             // used by the public method
      numPanels = $(this).length;   // range of panels are 0 ..numPanels-1

      /*------------------------------------------------------------------------
      ** Align all center photo panels on top of each other.
      ** This is design for '.panel-wrapper .panel' as the selection
      **------------------------------------------------------------------------
      */
      $(this).each(function(index) {
         if (index == 0) {
            $(this).css( {"position": "relative", "opacity" : 1});
            $(this).css( {"filter" : ""});  // IE fix for Antialiazing on top image
            $(this).css({"left": opts.PIC_ONSTAGE, "z-index": 100});
         }
         else {
            /* get the offset of each additional photo and position on top of the first */
            posOffset = opts.FULL_SIZE_IMAGE_HEIGHT * index;   /* brg IE hack */
            $(this).css( {"position": "relative", "top" : -posOffset, "opacity": 0} );
            $(this).css({"left": opts.PIC_OFFSTAGE, "z-index": 0});
         }
      });
   };

   $.fn.panel.transition = function(panelNum) {
      if ((panelNum == currPanel) || (panelNum >= numPanels))
      {
         // do nothing and perform callback if provided
         if (typeof opts.CALLBACK == "function") {
            opts.CALLBACK.call(this);
         }
         return;
      }
                                   
      prevPanel = currPanel;
      currPanel = panelNum;
           
      /* Prev Panel at this point will be on stage having an opacity of 1.
      ** Animate to an opacity of 0 and when complete move this panel offstage
      */
      $(myThis[prevPanel]).animate(   
         {"opacity" :  0},
         {queue: false, duration: opts.PANEL_ANIMATE_OUT,
         complete: function() {
            $(this).css({"left" : opts.PIC_OFFSTAGE, "z-index" : 0});
         }
      });

      /* The currectly panel has an opacity of 0. The panel needs
      ** to be moved on stage and then animated to an opacity of 1.
      ** In IE text loses Antialiasing when Animating; the solution to this is to
      ** remove filter by setting it to null at the completion of the animation.
      ** This should have no effect in other browsers.
      */         
      $(myThis[currPanel]).css({"left" : opts.PIC_ONSTAGE});
      $(myThis[currPanel]). css({"opacity" : 0}).stop().animate(  
         {"opacity" :  1},
         {queue: false, duration:  opts.PANEL_ANIMATE_IN,
         complete: function() {
            $(this).css({"z-index": 100, "filter": ""});
            // perform callback if provided
            if (typeof opts.CALLBACK == "function") {
               opts.CALLBACK.call(this);
            }
         }
      });
   };


}) (jQuery);