/*
jquery.nc.panZoomFade.js
5.20.2011

Set a series of images to stack so that only the top image is seen,
pan, zoom and fade that image, once the top image is faded, pan, zoom and fade the
next image in the stack, rotate and apply effects infinately
*/

(function( $ ){
   var props, methods;
   props = {
      fadeTimeLength : 2000,
      isRunning:false,
      imagesWidth : 0,
      imagesCount:0
   };
   methods = {

      init : function() {
         var $this = $(this);

         props.imagesCount = $this.find('.ncs-imagePan').length;

         // setUpImageStack
         $.each($this.find('.ncs-imagePan'), function(i,v){

            $(v)
            .css({'position': 'absolute', 'left':0})			
            .data('origLeftPos', null)
            .data('panIncrement', ($(v).data('pandir') === 'left')?  -1 : 1)
			//.bind('click', function() {
			//	$(this).find("a").click();
			//})
            .bind('panDone', function(){
               //pause here
               setTimeout(function(){
					var elem = $this.find(".ncs-imagePan:eq(" + (props.imagesCount-2) + ")");
				   if($(elem).data('origLeftPos') == null) {
	   					if($(elem).data('pandir') === 'left')
							$(elem).data('origLeftPos', 0);
						else {
							var l = $this.width() - $(elem).width();
							$(elem).data('origLeftPos', l);
							$(elem).css('left', l);
						}
					}
                  $(v).fade(props.fadeTimeLength);
               }, ($(v).data('delay') *1000) );
            })
            .bind('fadeDone', function(){
               // reset the images / stack
               $(this).css('opacity', 1);
               $this.prepend(this);
               $(this).css('left', $(this).data('origLeftPos'));
               props.isRunning = true;
               methods.animEngine.call($this);
            });
         });

         // click : move right
         //$this.toggle(function(){
            //props.isRunning = false;
         //},
         //function(){
         //   props.isRunning = true;
         //   methods.animEngine.call($this);
         //});

         // fade the images in
         $this.find('.ncs-imagePan').css('opacity',0);
         $this.find('.ncs-imagePan:eq(' + (props.imagesCount-1) +')').animate({
            opacity: 1
         }, 3000, function() {
            $this.find('.ncs-imagePan').css('opacity',1);
            props.isRunning = true;
            methods.animEngine.call($this);
         });

      },
      animEngine: function(){ // step through pics
         var $this = $(this);

         // get the image at the top of the stack/viewable
         var elem = $this.find(".ncs-imagePan:eq(" + (props.imagesCount-1) + ")");
         var left =  parseInt( $(elem).css('left'), 10 ) ;
		var panLeft = ($(elem).data('pandir') === 'left');
		var panNone = ($(elem).data('pandir') === 'none');
         // methods.pan(elem);

		 var lside = left + $(elem).width();
		 var myWidth = $this.width();
         if(panNone || (!panLeft && left > 0) || (panLeft && (left + $(elem).width()) <= $this.width()  ) ){ // pan complete
            props.isRunning = false;
            // trigger.panStop
            $(elem).trigger('panDone');
         }
		 else {
			$(elem).pan();
		}


         if(props.isRunning){
            var panSpeedInt;
            switch($this.data('panSpeed')){
                case "slow":
                   panSpeedInt = 70;
                   break;
                case "medium":
                   panSpeedInt = 35;
                   break;
                case "fast":
                   panSpeedInt = 10;
                   break;
                default:
                   panSpeedInt = 35;
            };
            setTimeout(function(){
               methods.animEngine.call($this );
            }, panSpeedInt );
         }
      }
   };
   $.fn.panZoom = function( ) {
      return methods.init.apply( this, arguments );
   };

}( jQuery ));

(function( $ ){
   $.fn.fade = function(fadeTimeLength) {
      return this.each(function() {
         $(this).animate({
            opacity: 0
         }, fadeTimeLength, function() {
            $(this).trigger('fadeDone');
         });
      });
   };
}( jQuery ));

(function( $ ){
   $.fn.pan = function( panIncrement ) {

      if($(this).data('panIncrement')){
         panIncrement = $(this).data('panIncrement') ;
      }else if (!panIncrement){
         panIncrement = 1 ;
      }
      return this.each(function() {
         var left =  parseInt( $(this).css('left'), 10 ) ;
         $(this).css('left', (left + panIncrement)  );
      });
   };
}( jQuery ));


/*


         <!-- last image is the image on top default z-index being used-->
         <!-- data-panSpeed increment in miliseconds : 50 is fast, 500 is slow -->
         <div id="pan-zoom" data-panSpeed="50">
            <!-- data-pandir : direction image pans, data-delay : seconds an image pauses after has completed panning-->
            <img data-pandir="left" data-delay="2" width="640" height="480" alt="" src="images/NewportCoast.png" />
            <img data-pandir="left" data-delay="3" width="600" height="450" alt="" src="images/cloudview.jpg" />
            <img data-pandir="right" data-delay="6" width="615" height="410" alt="" src="images/landscape1.jpg" />
            <img data-pandir="left" data-delay="1" width="600" height="450" alt="" src="images/cloudview.jpg" />
         </div>

**/