/*
JH Specialty, Inc. script to display a slideshow of images. Loads only 2 images
at a time to conserve page size. Pause, Play, and 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/

Last Update: 2009-08-18
Updated by: James X. Anderson
*/

/*

fgImages - foreground images
bgImages - background images


*/

jQuery.fn.dynamicSlideshow = function(options, fgImages) {
	
	options = options || {};
	options.duration = options.duration || 5000;
	var transitionDuration = options.transitionDuration || 1000;
	
	
	var fgContainer = $(this);
	fgImages = fgImages || [];
	var pause = 0;
	
	if (fgImages.length == 1) {
    pause = 1;
	}
	
	var curr = 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});
      $(this).css({opacity: 0.0, 'z-index': 2}).animate({opacity: 1.0}, transitionDuration, function() {
          $(this).css('opacity', '');
        });
      $(fgContainer).find('img:first').animate({opacity: 0.0}, transitionDuration, function() {
          $(this).remove();
        });
      
      
    }).attr({'src': options.imgPath + fgImages[curr].imgName, 'alt': fgImages[curr].imgAlt});
    
		if (pause == 1) {
      // pause the show
      // display correct image
      clearTimeout(timer);
		}
		else {
      // continue slideshow
      if (curr >= fgImages.length - 1 && pause != 1) {
        curr = 0;
      }
      else {
        curr++;
      }
      
      timer = setTimeout(function (){initSlider(fgContainer, fgImages)} , options.duration );
    }
	};
	
  // setup and start slideshow
	$(this).each(function(){
		var j = new Image();
		
		$(this).empty();
		
		// 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(){
			$(fgContainer).append(this);
      
      // 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.controllerContainer).empty();
      
      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 +'"/>');
        });
    }
    
    
    $('.' + options.controllerClass).click(function(){
      pause = 1;
      curr = $(this).attr('id').replace(options.controllerIdPrefix, '');
      clearTimeout(timer);
      $(fgContainer).find('img:first').animate({opacity: 0.0}, transitionDuration, function() {
          $(this).remove();
        });
      initSlider(fgContainer, fgImages);
    });
	}
}