//   .+++++++++++++++++++++++++++++:....++++++++++++++++++++++++++++...............,             .++++:,                              
//               ..........++++++++++++++++++#WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW.                       
//                                           *WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW.                       
//                                          .WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW@*                        
//                                         ,@WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW###@WWWW+   ,...,                          
//                                        ,#WWWWWWWWWWWWWWW@###WWWWWWWWWWWWWWWWWWWWWWWW#+.    #WWWW.                                  
//                                        *WWWWWWWWWWWWWWWW:    ,.+#WWWWWWWWWWWWWWWWW@.       #WWWW                                   
//                                       +WWWWW@#WWWWWWWWW+          .++###WWWWWWWWWW#,       :#W@*                                   
//                                       WWWW@+, ,#WWWWW#.                 #WWWWWWWWWWW*,                                             
//       Code by Fetch!                  WWW+,    @WWW#.                   #WWW@..:+*@WWW+                                            
//                                      .WW+      WW@.                     #WWW:   .  *WWW                                            
//        www.fetch.nl                  :W#       WW+                     ,WWW*   #W#+@W@:                                            
//                                      *W:       WW,                     +WW*    *@W@*:                                              
//                                     ,W@       .W#                     .WW*                                                         
//                                     :W*       +W+                     #W*                                                          
//                                     +W@*,     +W@*                    WW#+,                                                        
//                                     ,+++,     ,:++                    ++++,                                                        
                                                                                                                                 
                                                                                                                                                                                  
//                                                                                                                                                        

//----------------- HORIZONTAL SUBCONTENT SLIDER -----------------

var timerInterval = 30,
	easeValue = 0.02;

function setupSlider( container, tray, margin, target )
{
	target = target ? target : container;
	var scrollWidth = 0,
		contentWidth = $( container ).attr("scrollWidth"),
		pageWidth = $(target).width(),
		mouseSideMargin = margin;
	
	if( pageWidth < contentWidth ){
		$( target ).resize(function() {
			pageWidth = $(target).width();
		});
	
		var mousePosVal = 0;
		var mouseX = 0;
		var once = false
		$( container ).mousemove(function(e){
			mouseX = e.pageX-$(this).offset().left;
			scrollWidth = contentWidth - pageWidth;
			if( mouseX > mouseSideMargin && mouseX < (pageWidth-mouseSideMargin) ){
				mousePosVal = ( mouseX-mouseSideMargin) / (pageWidth-2*mouseSideMargin);
			} else if( mouseX < mouseSideMargin ) {
				mousePosVal = 0;
			} else if( mouseX > (pageWidth-mouseSideMargin) ) {
				mousePosVal = 1;
			}
		});
		var currentScroll = 0;	
		var newScroll = 0;
		$(document).everyTime( timerInterval, "sliderInterval", function(){
			if( pageWidth < contentWidth ){
				currentScroll = $( container ).attr("scrollLeft");
				newScroll = currentScroll-(-$( tray ).position().left - Math.floor(mousePosVal*scrollWidth)+$(container).offset().left)*easeValue;
				$( container ).attr({scrollLeft: newScroll });
			}
		});
	}
};

// here we wait for the images to be loaded and detemine the width of the image tray
// when all loaded a slider wil be setup
function setupPageSlider( data )
{
	var container = data.container;
	var tray = data.tray;
	var spacer = data.spacer == undefined ? 0 : data.spacer;
	var margin = data.sideMargin == undefined ? 0 : data.sideMargin;

	var imageCollection = $( "img", tray );
	var sliderWidth = 0,
		loadCounter = 0,
		loadTotal = imageCollection.size();

	imageCollection.each( function(index)
	{
		if( !this.complete ){
			$(this).load( function(){
				sliderWidth += $(this).width()+spacer;
				loadCounter++;
				checkLoaded();
			});
		} else {
			sliderWidth += $(this).width()+spacer;
			loadCounter++;
			checkLoaded();
		}
	});

	function checkLoaded(){
		if( loadCounter == loadTotal ){
			if( tray.width() < sliderWidth ) tray.width( sliderWidth );
			trace("WIDTH: "+tray.width());
			trace(margin);
			tray.css({ visibility:'visible', opacity:0 }).animate({ opacity:1})
			// create slider here
			setupSlider( container, tray, margin );
		}
	}
}