/*
JH Specialty, Inc. script to display a slideshow of images. Loads only 2 images
at a time to conserve page size. Image select controls can
be added anywhere on the page to control the slideshow.

Based on Dynamic Slideshow by Yusuf
URL: http://plugins.jquery.com/project/dynamicslideshow
URL2: http://ynzi.com/blog/dynamicslideshow/

Updated by: James X. Anderson
Initial Update: 2009-08-18

Update: 2009-12-29
  * added capability to display image thumbnail or numbers as the controller
Update: 2010-03-04
  * added capability to rotate content of a separte div. ex: rotate text at same time as image
Update: 2010-05-18
  * added capability to have controller blocks be empty
Update: 2010-06-01
  * added capability to apply an active class to the active controller
  * added capability to have a pause/play button

*** USAGE with PHP ***
* slideshow images need absolute positioning applied in CSS
*
<!-- slideshow controller can be placed anywhere on the page -->
<div id="slideshow_controller_box"></div>

<!-- slideshow window -->
<div id="content_right" class="slideshow">
        <img src="images/slideshow_container_decorating/Flare_007.jpg" alt="" style="width:524px; height:509px;"/>
        <?php
          // DYNAMIC SLIDESHOW
          $slideshow_script = "
  var fgImages = [];
  fgImages.push({imgName: 'Flare_007.jpg', imgWidth: '522px', imgHeight: '509px', imgAlt: ''});
  fgImages.push({imgName: 'Flare_011.jpg', imgWidth: '586px', imgHeight: '457px', imgAlt: ''});

  $('#content_right').dynamicSlideshow({imgPath: './images/slideshow_container_decorating/', controllerContainer: 'slideshow_controller_box', controllerClass: 'slideshow_controller', controllerIdPrefix: 'img_controller_', controllerThumbSuffix: '_thumb'}, fgImages);";

        ?>
      </div>



<!-- after script has been included -->
<script type="text/javascript">
$(document).ready(function(){

  <?php print $slideshow_script; ?>

});
</script>

*/

/*

fgImages - foreground images
bgImages - background images


*/
;(function ($) {
  jQuery.fn.dynamicSlideshow = function(options, fgImages) {

    options = options || {};
    options.duration = options.duration || 5000;
    var transitionDuration = options.transitionDuration || 1000;
    var titleTransitionDuration = transitionDuration / 2;
    /* default controller style is thumbnails */
    options.controllerStyle = options.controllerStyle || 'thumb';


    var fgContainer = $(this);
    fgImages = fgImages || [];
    var pause = 0;

    if (fgImages.length == 1) {
      pause = 1;
    }

    var curr = 0;
    var prevCurr = 0;
    var timer = '';

    function initSlider(fgContainer, fgImages) {
      // make sure only 1 image is in the foreground
      if ($(fgContainer).children().length > 1) {
        $(fgContainer).find('img:last').animate({
          opacity: 0.0
        }, transitionDuration, function() {
          $(this).remove();
        });
      }

      // update main foreground Images
      var fg = new Image();
      $(fg).css({
        width:fgImages[curr].imgWidth,
        height:fgImages[curr].imgHeight,
        position:fgImages[curr].imgPosition,
        top:fgImages[curr].imgTop,
        left:fgImages[curr].imgLeft,
        right:fgImages[curr].imgRight,
        bottom:fgImages[curr].imgBottom,
        'z-index':8
      }).load(function(){
        $(fgContainer).append(this);

        $(fgContainer).find('img:first').css({
          'z-index': 1
        });

        /* begin new image fade in */
        $(this).css({
          opacity: 0.0,
          'z-index': 2
        }).animate({
          opacity: 1.0
        }, transitionDuration, function() {
          $(this).css('opacity', '');
        });

        /* update the external title */
        var titleCurr = curr;

        if (options.externalTitleId){
          $('#'+ options.externalTitleId).fadeOut(titleTransitionDuration, function(){
            $('#'+ options.externalTitleId).html(fgImages[titleCurr].externalTitle);
            // manage the background for the text
            if (fgImages[titleCurr].externalTitle) {
              if (options.externalTitleIdBgOpacity) {
                
                $('#'+ options.externalTitleIdBg).fadeTo(titleTransitionDuration, options.externalTitleIdBgOpacity);
              }
              else {
                $('#'+ options.externalTitleIdBg).fadeIn(titleTransitionDuration);
              }
            }
            else {
              $('#'+ options.externalTitleIdBg).fadeOut(titleTransitionDuration);
            }
            
            $('#'+ options.externalTitleId).fadeIn(titleTransitionDuration);
          });
        }

        /* begin old image fade out */
        if ($(fgContainer).children().length > 1) {
          $(fgContainer).find('img:first').animate({
            opacity: 0.0
          }, transitionDuration, function() {
            $(this).remove();
          });
        }


        /* update the image's link */
        if (fgImages[curr].imgHref == ''){
          $(fgContainer).removeAttr('href');
        }
        else {
          $(fgContainer).attr('href', fgImages[curr].imgHref);
        }

        /* update controller to active */
        if (options.controllerActiveClass) {
          $('.'+options.controllerClass).removeClass(options.controllerActiveClass);
          $('#'+options.controllerIdPrefix + curr).addClass(options.controllerActiveClass);
        }

        if (pause == 1) {
          // pause the show
          // display correct image
          clearTimeout(timer);
        }
        else {
          // continue slideshow
          if (curr >= fgImages.length - 1) {
            curr = 0;
          }
          else {
            curr++;
          }

          if (prevCurr >= fgImages.length - 1 || (prevCurr + 1) == curr) {
            prevCurr = 0;
          }
          else {
            prevCurr++;
          }

          timer = setTimeout(function (){
            initSlider(fgContainer, fgImages)
            } , options.duration );
        }

      /* end image load */
      }).attr({
        'src': options.imgPath + fgImages[curr].imgName,
        'alt': fgImages[curr].imgAlt
        });

    }

    // setup and start slideshow
    $(this).each(function(){
      var j = new Image();

      // load initial foreground, background, and start slideshow
      //
      $(j).css({
        width:fgImages[curr].imgWidth,
        height:fgImages[curr].imgHeight,
        position:fgImages[0].imgPosition,
        top:fgImages[0].imgTop,
        left:fgImages[0].imgLeft,
        right:fgImages[0].imgRight,
        bottom:fgImages[0].imgBottom
        }).load(function(){
        // start slideshow
        initSlider(fgContainer, fgImages);
      }).attr({
        'src': options.imgPath + fgImages[curr].imgName,
        'alt': fgImages[curr].imgAlt
        });
    });

    // setup controllers
    if (options.controllerClass != '' && options.controllerIdPrefix != ''){
      // fill the controller box with thumbnails
      if (options.controllerContainer != '' && options.autoControllers) {
        $('#' + options.controllerContainer).empty();
        if (options.controllerStyle == 'thumb') {
          jQuery.each(fgImages, function(index, imgObj){
            var thumb_prefix = imgObj.imgName.substring(0, imgObj.imgName.lastIndexOf("."));
            var thumb_ext = imgObj.imgName.substring(imgObj.imgName.lastIndexOf(".") + 1);
            $('#' + options.controllerContainer).append('<img id="'+ options.controllerIdPrefix + index +'" class="'+ options.controllerClass +'" src="'+ options.imgPath + thumb_prefix + options.controllerThumbSuffix +'.'+ thumb_ext +'"/>');
          });
        }
        else if (options.controllerStyle == 'number') {
          jQuery.each(fgImages, function(index){
            if (index != 0 && options.controllerSpacer && options.controllerSpacerClass){
              // add the spacer
              $('#' + options.controllerContainer).append('<span class="'+ options.controllerSpacerClass +'">'+ options.controllerSpacer +'</span>');
            }
            $('#' + options.controllerContainer).append('<span id="'+ options.controllerIdPrefix + index +'" class="'+ options.controllerClass +'">'+ (index+1) +'</span>');
          });
        }
        else if (options.controllerStyle == 'empty') {
          jQuery.each(fgImages, function(index){
            if (index != 0 && options.controllerSpacer && options.controllerSpacerClass){
              // add the spacer
              $('#' + options.controllerContainer).append('<span class="'+ options.controllerSpacerClass +'">'+ options.controllerSpacer +'</span>');
            }
            $('#' + options.controllerContainer).append('<span id="'+ options.controllerIdPrefix + index +'" class="'+ options.controllerClass +'"></span>');
          });
        }
      }

      // manage clicking on controllerContainer items
      $('.' + options.controllerClass).click(function(e){
        e.preventDefault();

        clearTimeout(timer);

        var tempCurr = $(this).attr('id').replace(options.controllerIdPrefix, '');

        if (tempCurr == 'pause') {
          $(this).attr('id', options.controllerIdPrefix + 'play');
          pause = 1;
          if (curr == 0) {
            curr = fgImages.length - 1;
          }
          else {
            curr = curr - 1;
          }
        }
        else if (tempCurr == 'play') {
          $(this).attr('id', options.controllerIdPrefix + 'pause');
          pause = 0;
          // continue slideshow
          prevCurr = curr;

          if (curr >= fgImages.length - 1) {
            curr = 0;
          }
          else {
            curr++;
          }

          initSlider(fgContainer, fgImages);
        }
        else {
          if (pause == 0) {
            if (curr > 0) {
              prevCurr = curr - 1;
            }
            else {
              prevCurr = fgImages.length - 1;
            }
          }
          else {
            prevCurr = curr;
          }

          $('#'+options.controllerIdPrefix + 'pause').attr('id', options.controllerIdPrefix + 'play');

          if ((tempCurr != curr && pause == 1) || (pause == 0)) {
            pause = 1;
            curr = tempCurr;
            $(fgContainer).find('img:first').animate({
              opacity: 0.0
            }, transitionDuration, function() {
              $(this).remove();
            });
            initSlider(fgContainer, fgImages);
          }
        }
      });

      // manage clicking on left and right pads
      $('.' + options.controllerPadClass).click(function(e){
        e.preventDefault();

        clearTimeout(timer);

        var tempCurr = 'right';
        console.log($(this).attr('class'));
        if ($(this).attr('class').match(/left/i)) {
          tempCurr = 'left';
        }

        if (pause == 0) {
          prevCurr = curr = curr - 1;

          if (curr < 0) {
            prevCurr = curr = fgImages.length - 1;
          }
        }
        else {
          prevCurr = Number(curr);
        }

        $('#'+options.controllerIdPrefix + 'pause').attr('id', options.controllerIdPrefix + 'play');

        if ((pause == 1) || (pause == 0)) {
          pause = 1;
          curr = Number(curr);
          curr = (tempCurr == 'right') ? curr + 1 : curr - 1;

          if (curr > (fgImages.length - 1)) {
            curr = 0;
          }
          else if (curr < 0) {
            curr = fgImages.length - 1;
          }

          $(fgContainer).find('img:first').animate({
            opacity: 0.0
          }, transitionDuration, function() {
            $(this).remove();
          });
          initSlider(fgContainer, fgImages);
        }
      });

    }
  }
})(jQuery);