/*
* Author : Irving Dela Cruz
* Version : 1
* Definition : SlideShow Transition
* Type : Image Slideshow

USAGE : 

$(".kaleidoscopicmosaic").kaleidoscopicmosaic({
		sections : 3, // image sections
		frequency : 600, // speed of transition
		time : 3 // time betweeen animations
});

<div class="kaleidoscopicmosaic">
<img src="images/1.jpg" alt="" width="780" height="275" />
<img src="images/2.jpg" alt="" width="780" height="275" />
<img src="images/3.jpg" alt="" width="780" height="275" />
<img src="images/4.jpg" alt="" width="780" height="275" />
<img src="images/5.jpg" alt="" width="780" height="275" />
<img src="images/6.jpg" alt="" width="780" height="275" />
<img src="images/7.jpg" alt="" width="780" height="275" />
<img src="images/8.jpg" alt="" width="780" height="275" />
<img src="images/9.jpg" alt="" width="780" height="275" />
</div>

http://idelacruz.com


*
*/

(function( $ ){

  $.fn.kaleidoscopicmosaic = function( options ) {  

    var settings = {
		sections : 3,
		frequency : 1000,
		time : 3
    };

    return this.each(function() {
	
      if ( options ) { 
        $.extend( settings, options );
      }
	  
	  var startingIndex = 0;
	  var imgMaxHeight = $(this).find("img").height();
	  var imgMaxWidth = $(this).find("img").width();
	  var imgCount = $(this).children().length;
	  var panelDivisions = imgMaxWidth/ settings.sections 
	  var panelWidth = panelDivisions;
	  var imgSrcRoot = $(this).find("img"); // imgSrcRoot.eq(0).attr("src")
	  var bgSourceArray = [];
	  
	var $panelWrapperCrossFade = $("<div id='kaleidoscopicMosaicWrapperCrossFader'></div>");
	$panelWrapperCrossFade.css({
		"width" : imgMaxWidth,
		"height" : imgMaxHeight,
		"position" : "absolute"
	});
	
	var $panelWrapper = $("<div id='kaleidoscopicMosaicWrapper'></div>");
	$panelWrapper.css({
		"width" : imgMaxWidth,
		"height" : imgMaxHeight,
		"display" : "absolute"
	});
	  
	for(var i = 0; i < imgCount; i++)
	{
		bgSourceArray.push(imgSrcRoot.eq(i).attr("src"));
	}
	  
	var $panelPanelWrapper = $("<div class='kaleidoscopicMosaicPanelWrapper'></div>");
	
	for(var x = 0; x < settings.sections; x++)
	{
		var $panelPanels = $("<div class='kaleidoscopicMosaicPanel'></div>");	
		$panelPanels.css({
			"width" : panelWidth,
			"height" : imgMaxHeight,
			"float" : "left",
			"display" : "inline"
		});		
		var $slide = $panelPanelWrapper.append($panelPanels).appendTo($panelWrapper);
	}
	
	//$(this).append($panelWrapper);
	
	$(this).append($panelWrapper);
	$(this).append($panelWrapperCrossFade);
	
	
	startSlide = function (){
		
		setTimeout(function(){
			if(startingIndex == imgCount-1){
				startingIndex = 0;
			}	
			
			setTimeout(function(){
				crossFade(startingIndex);
			},(settings.time*1000));
			
			for(var m = 0; m < settings.sections; m++)
			{
				var $slideItem = $panelPanelWrapper.find(".kaleidoscopicMosaicPanel").eq(m);
				$slideItem.hide();
				$slideItem.css({				
					"background": "url("+ bgSourceArray[startingIndex] +")",
					"background-position" : -panelWidth * m + "px 0px"
				});
				$slideItem.fadeIn(settings.frequency * (m+1), function(){
				});
			}		
			startingIndex+=1;		
		});
	}
	
	crossFade = function(startingIndex){
		$panelWrapperCrossFade.hide();
		$panelWrapperCrossFade.css({	
			"background": "url("+ bgSourceArray[startingIndex-1] +")"
		});
		$panelWrapperCrossFade.fadeIn(100, function(){
			startSlide();
		});
	}
	
	startSlide();
		
	  
    });
  };
})( jQuery );