// JavaScript Document
$(function(){
 $('#slider2') 
  .anythingSlider({
   resizeContents      : false,
   navigationFormatter : function(i, panel){
    return ['1', '2', '3'][i - 1];
   }
  })
  .anythingSliderFx({
   // base FX definitions can be mixed and matched in here too.
   '.fade' : [ 'fade' ],

   // for more precise control, use the "inFx" and "outFx" definitions
   // inFx = the animation that occurs when you slide "in" to a panel
   inFx : {
    '.textSlide h3'  : { opacity: 1, top  : 0, duration: 400, easing : 'easeOutBounce' },
    '.textSlide li'  : { opacity: 1, left : 0, duration: 400 },
    '.textSlide img' : { opacity: 1, duration: 400 },
    '.quoteSlide'    : { top : 0, duration: 400, easing : 'easeOutElastic' },
    '.expand'        : { width: '100%', top: '0%', left: '0%', duration: 400, easing : 'easeOutBounce' }
   },
   // out = the animation that occurs when you slide "out" of a panel
   // (it also occurs before the "in" animation)
   outFx : {
    '.textSlide h3'      : { opacity: 0, top  : '-100px', duration: 350 },
    '.textSlide li:odd'  : { opacity: 0, left : '-200px', duration: 350 },
    '.textSlide li:even' : { opacity: 0, left : '200px',  duration: 350 },
    '.textSlide img'     : { opacity: 0, duration: 350 },
    '.quoteSlide:first'  : { top : '-500px', duration: 350 },
    '.quoteSlide:last'   : { top : '500px', duration: 350 },
    '.expand'            : { width: '10%', top: '50%', left: '50%', duration: 350 }
   }
  });
});