// jQ-Slide slideshow v1.0
// (c) 2010 MyStore Solutions
//
// Instructions: Create a container with a fixed height and width. Inside it,
// place some block elements that will act as slides. Then call the slideshow
// function on the containing element:
//
//
// e.g. $('#slide-holder').mssSlideshow({ option1: val1, option2: val2 });
//
// OPTIONS:
// slideSelector - a jquery selector choosing the elements that will be slides. If
// undefined, all direct children of #slide-holder will be used.
//
// autoRotateDelay - number of milleseconds to delay auto rotation. If undefined,
// a default value will be used.
//
// autoRotate - true or false, cause slideshow to automatically rotate. default
// is false.
//
// showNav - true or false, cause edges of slides to be prev or next buttons
//
// navWidth - set a width for the nav edges, measured in pixels. For example,
// if you have 1000px-wide slides and want the edges to be navigation, you may
// pass in '200'. The remaining 600px of the slide would still be clickable.
// 
// firstSlide - # of the first slide. 0 is considered 1st slide in the DOM.
// 
//  
// 

$(document).ready(showSlides);

function showSlides()
{
  $('#slideshowHolder').mssSlideshow({
    autoRotate: true,
    autoRotateDelay: 4000,
    navWidth: 0,
    firstSlide: 0
  });
}
  
(function($){
  $.fn.mssSlideshow = function(options) {
    var slideSelector = (options.slideSelector) ? options.slideSelector : "";
    var slides = $(this).children(slideSelector); // grab all slides to use
    var slideCount = slides.length;
    if (slideCount==0) return; // don't run if there are no slides
    
    defaults = {
      autoRotate: true,
      autoRotateDelay: 4000,
      animationSpeed: 600,
      firstSlide: 0,
      showNav: false,
      navWidth: 0,
      direction: 1,
      fadeInSpeed: 100,
      mouseoverPause: true
    };
    
    // Assume the following CSS already exists:
    // * $(this) is position relative, overflow hidden, and explicit height/width
    // * all slides are currently display:none; and position:absolute;
    
    // Set default CSS and grab default data
    var windowWidth = parseInt($(this).css('width'));
    var windowHeight = parseInt($(this).css('height'));
    $(this).css({
      position: 'relative'
    });
    slides.each(function(){
      $(this).css({
        zIndex: '3',
        top: '0px',
        position: 'absolute',
        overflow: 'hidden'
      });
    });
    
    // Set speed of animation movement
    var animationSpeed = (options.animationSpeed && options.animationSpeed>0) ? options.animationSpeed : defaults.animationSpeed;

    // Calculate which slide to start on
    var curSlideNum = (options.firstSlide && options.firstSlide>=0 && options.firstSlide<slideCount) ? options.firstSlide : defaults.firstSlide;
    
    // Calculate direction to move
    var direction;
    if (options.direction==1) direction=1;
    else if (options.direction==-1) direction=-1;
    else direction = defaults.direction;
    
    // Position and show 1st slide
    $(slides[curSlideNum]).css({left: 0, display: 'block'});


    if (options.autoRotate!==false || (!options.autoRotate && defaults.autoRotate==true)) {
      // Set delay between animations
      var autoRotateDelay = (options.autoRotateDelay && options.autoRotateDelay>0) ? options.autoRotateDelay : defaults.autoRotateDelay;
      // Initiate animation
      var intervalHandle = getIntervalHandle();
      // Initiate mouseover pause
      if (options.mouseoverPause!==false || (!options.mouseoverPause && defaults.mouseoverPause==true)) {
        $(this).hover(
          function(){clearInterval(intervalHandle);},
          function(){intervalHandle=getIntervalHandle();}
        );
      }
    } 

    
    // Create nav divs on left and right, and give them onclick to move slides
    if (options.showNav!==false || (!options.showNav && defaults.showNav==true)) {
      var fadeInSpeed = (options.fadeInSpeed && options.fadeInSpeed>0) ? options.fadeInSpeed : defaults.fadeInSpeed;
      var navWidth = (options.navWidth && options.navWidth>0) ? options.navWidth : defaults.navWidth;
      var goLeft = document.createElement('div');
      var goRight = document.createElement('div');
      $(goLeft).css('left', '0px').addClass('goLeft').click(advancePrevSlide);
      $(goRight).css('right', '0px').addClass('goRight').click(advanceNextSlide);  
      $([goLeft, goRight]).css({
        width: navWidth + 'px',
        height: windowHeight + 'px',
        position: 'absolute',
        top: '0px',
        zIndex: 5,
        opacity: '0',
        cursor: 'pointer'
      }).hover(function(){
        $(this).animate({opacity:1.0}, fadeInSpeed);
      }, function(){
        $(this).animate({opacity:0.0}, fadeInSpeed);
      }).appendTo(this);
      
    }
    
    // ADVANCE SLIDE
    // function to facilitate advancing to the next slide in a rotating fashion
    function advanceNextSlide() {
      try {
        changeSlide((curSlideNum + 1) % slideCount, 1);
      } catch(err) {
        clearInterval(intervalHandle);
        //for (var i in err) alert(i + ' = ' + err[i]);
      }
    }
    function advancePrevSlide() {
      try {
        changeSlide((curSlideNum - 1) % slideCount, -1);
      } catch(err) {
        clearInterval(intervalHandle);
        //for (var i in err) alert(i + ' = ' + err[i]);
      }
    }
      
    
    // FUNCTION TO RETURN A FUNCTION THAT BEGINS AUTOMATIC INCREMENTING OF SLIDES
    function getIntervalHandle() {
      if (direction < 0) {
        return setInterval(advancePrevSlide, autoRotateDelay);
      } else {
        return setInterval(advanceNextSlide, autoRotateDelay);
      } 
    }
    
      
    // CHANGE SLIDE FUNCTION
    // change slides. Pass in number for new slide, and for direction
    // pass in +1 or -1 to specify which way the slide moves off       
    function changeSlide(nextSlideNum, dir) {
      while (nextSlideNum < 0) nextSlideNum+=slideCount; // make sure number is positive      
      var curSlide = $(slides[curSlideNum]);
      var nextSlide = $(slides[nextSlideNum]);
      var bothSlides = $([slides[curSlideNum], slides[nextSlideNum]]);
      var newLeft;
      
      // Don't execute if an animation is already happening
      if ( (curSlide.queue().length>0) || (nextSlide.queue().length>0) ) return; 
      
      nextSlide.css('display', 'block');          // show next slide
      if (dir < 0) {                        // position next slide and choose direction
        nextSlide.css('left', (-1 * windowWidth)+'px');
        curSlide.css('left', '0px');
        newLeft = '+=' + windowWidth + 'px'; 
      } else {
        nextSlide.css('left', windowWidth+'px');
        curSlide.css('left', '0px');
        newLeft = '-=' + windowWidth + 'px';
      }
      
      // animate slides into position, then hide the orig. slide
      bothSlides.animate({left: newLeft}, animationSpeed, 'swing', function(){
        //curSlide.css('display', 'none');
      });                       
      curSlideNum = nextSlideNum;  // update the current slide variable      
    }
  }
})(jQuery);