/* 
	FLEET
*/

// fleet scroller vars
var scrollholder = '.navigationgallery'; // var wordt object
var scrollPos = 0;
var sideOffset = 110;
var maxstep = 1000; //pixels per seconde
var distance = maxstep;

var leftImg;
var rightImg;

// init fleet hover scroller
$(function() {

	scrollholder = $(scrollholder).css({overflow:'hidden'});
	
	// develop debug
	//var debug = $('<div/>').addClass('debug').prependTo('body');
	
	// issieder?
	if(scrollholder.length){
		
		// set vars &
		// set juiste breedte van itemsholder (overbodig maken door css?)
		var innerwidth = getinnerwidth( $('ul',scrollholder) );
		$('ul',scrollholder);//.width( innerwidth );
		
		// var
		var w = scrollholder.width();
		
		if(innerwidth > w){
		
			// pijltjes
			leftImg = $('<img/>')
			.attr('src',basehref + 'gui/scrollleft.gif')
			//.wait(1200)
			//.fadeOut(1500)
			.mousemove(function(e){
					
				animate($(scrollholder),'left',distance);
				
			});
			
			rightImg = $('<img/>')
			.attr('src',basehref + 'gui/scrollright.gif')
			.css({
				position:'absolute',
				right:'0px'
			})
			//.wait(1200)
			//.fadeOut(1500)
			.mousemove(function(e){
					
				animate($(scrollholder),'right',distance);
				
			});
			
			// pijltjes holder
			var pijltjesdiv = $(scrollholder)
			.clone()
			.html('')
			.css({
				position:'absolute',
				display:'inline-block',
				zIndex:4000,
				overflow:'visible',
				
				width:(w+80)+'px'
			})
			.mouseover(function(){
				
			})
			.attr('id','pijltjesdiv')
			.fadeTo(1,0.3)
			.mouseout(function () {
					
				// stop
				$(this).stop(true,false);
				scrollPos = $(this).scrollLeft();
				
				stopAnim($(scrollholder));				
					
			})
			.append(leftImg)
			.append(rightImg);
			
			// attach pijltjes
			$(scrollholder).before(pijltjesdiv);
		
			// get initial scrollposition
			var activediv		= $('a.selected',scrollholder);
			var activedivpos	= activediv ? activediv.parent('li').position() : false;
			var initialpos		= activedivpos ? (activedivpos.left) - ((w/2) - ( (activediv.width()) /2 )-15) : 0;
			
			
		//
		// huppa
		//
			$(scrollholder)
			// set initial scrollposition
			.scrollLeft( initialpos )
			// on mouseout
			.mouseout(function () {
					
				// stop
				stopAnim($(scrollholder));				
					
			})
			// on mousemove
			.mousemove(function(e){
					
				scroller(e,w,this);
				
			});
			
			
		}
	}
});


function scroller(e,w,oNode){
	
	var offset	= $(oNode).offset();
	offset = offset.left;
	var center	= ( e.pageX - offset ) - ( w / 2);
	var x		= Math.abs( center );
	
	var hot = ( w / 2 ) - sideOffset;
	
	//window.console.log( center + ',' +  hot );
	
	// hover aan linker/rechter sideOffset 
	if( x > hot ){
		
		// bepaal snelheid (afstand per sec)
		var val 	= ( x - ( w / 2 ) ) + sideOffset;
		var perc 	= (100 / sideOffset) * val;
		var dist 	= Math.round( perc * (maxstep / 100) );
		
		// bepaal richting
		var direction = center > 0 ? 'right' : 'left';
		
		//start			
		if( dist != distance){
			distance = dist;
			$(oNode).stop(true,false);
			animate(oNode,direction,distance);
		}
					
	// hover = niet aan zijkant sideOffset
	} else {
		
		stopAnim(oNode);
	}
}

function stopAnim(oNode){
	
	// stop
	$(oNode).stop(true,false);
	scrollPos = $(oNode).scrollLeft();
	
	rightImg.stop(true,true);//.hide();
	leftImg.stop(true,true);//.hide();
}



function getinnerwidth( oNode ){
	
	// P breedte
	// beetje crappy, maar hoe anders?
	var p = $('li:first',oNode);
	var pml = $(p).css('marginLeft').replace('px','');
	var pmr = $(p).css('marginRight').replace('px','');
	
	var itemwidth = $(p).outerWidth() + (pml/1) + (pmr/1);
	
	return (itemwidth * $('li',oNode).length) +10;
}

// animate loop
function animate(oNode,direction,distance){
	
	scrollPos = $(oNode).scrollLeft();
	
	//$('.debug').html( scrollPos + ';' + scrollholder.width() );
	
	if(direction == 'right'){
		
		if( (scrollPos+sideOffset) < scrollholder.width() ){
			
			leftImg.stop(true,true);//.hide();
			rightImg.fadeIn('fast');
			
			// animate
			$(oNode).animate({scrollLeft:'+='+distance+'px'},1000,'linear',function(){
				// nog een keer
				animate(oNode,direction,distance);
			});
		
		} else {
			
			stopAnim(oNode);
		}
		
	} else {
		
		if( scrollPos > 1){
			
			rightImg.stop(true,true);//.hide();
			leftImg.fadeIn('fast');
			
			// animate
			$(oNode).animate({scrollLeft:'-='+distance+'px'},1000,'linear',function(){
				// nog een keer
				animate(oNode,direction,distance);
			});
			
		} else {
			
			stopAnim(oNode);
		}
	}
	
}

$.fn.wait = function(time, type) {
	
	var timeout = null;
	
	time = time || 0;
	type = type || "fx";
		
	if(time > 0){
			
		return this.queue(type, function() {
			var self = this;
			timeout = setTimeout(function() {
				$(self).dequeue();
			}, time);
		});
		
	} else {
		return $(this);
	}
};