//$(window).ready(function () {
$(document).ready(function () {
    var container = $('div.sliderGallery');
    var ul = $('ul', container);
	
	//Calculate the needed width
	var itemCount = $('li', ul).length;
	ul.css('width', itemCount*242)
    
    var itemsWidth = ul.innerWidth() - container.outerWidth() +2 ;
    
    $('.slider', container).slider({
        min: 0,
        max: itemsWidth,
        handle: '.handle',
        stop: function (event, ui) {
            ul.animate({'left' : ui.value * -1}, 500);
        },
        slide: function (event, ui) {
			//First stop the startup animation
			ul.stop();
			$(".handle").stop();
            ul.css('left', ui.value * -1);
        }
    });
	
	//Make the whole item clickable
	$(".sliderGallery ul li").click(function(){
		//First stop the startup animation
		ul.stop();
		$(".handle").stop();
		var href = $("a" , this).attr("href");
		window.location=href;
	});
	
	//Scroll wheel functionality
	$(".sliderGallery, .sliderGallery ul li, .sliderGallery ul li a, .sliderGallery ul li img, .sliderGallery ul li h2").mousewheel(function(event, delta){
		//First stop the startup animation
		ul.stop();
		$(".handle").stop();

		slide(-50*delta);
		return false; //prevent default
	});
	
/*	
	//Submenu functionality
	$("#submenu li").click(function(){
		//First stop the startup animation
		ul.stop();
		$(".handle").stop();
		
		//Find submenu item nr
		var itemNr = $("#submenu li").index(this);

		//Now move the slider to the selected item
		newLeft = itemNr * -242 + 188;
		if (newLeft>0) newLeft = 0;
		var minLeft = -242*itemCount+container.outerWidth()-8;
		if ( newLeft<minLeft ) newLeft = minLeft;
        $('div.sliderGallery ul').animate({'left' : newLeft}, 500);

		//Now the handle
		var handleWidth = 161;
		var handleBoxWidth = 564-handleWidth;
		var newLeftHandle = Math.round( handleBoxWidth*newLeft/minLeft );
		$(".handle").animate({
			"left": newLeftHandle}, 500);

		if ( $(this).hasClass('active') ) return false;

		//Set selected item to active
		//first in submenu
		$("#submenu li").removeClass("active");
		$(this).addClass("active");
		//then in the slider
		$(".sliderGallery li").removeClass("active");
		$(".sliderGallery li").eq(itemNr).addClass("active");
				
		//Disable default click-functionality;
		return false;
	});
*/	
	
	//Start the animation on startup
	startupAnimation(150*itemCount);
});

function slide(delta){
    var container = $('div.sliderGallery');
    var ul = $('ul', container);
	//Calculate the needed width
	var itemCount = $('li', ul).length;
    var itemsWidth = ul.innerWidth() - container.outerWidth() +2 ;
	var minLeft = -242*itemCount+container.outerWidth()-8;
	var m = /((\-)*\d+)?(px)*/.exec(ul.css("left"));
	var currentLeft = m[1];

	//Move the slider
	newLeft = currentLeft-delta;
	if (newLeft>0) newLeft = 0;
	if ( newLeft<minLeft ) newLeft = minLeft;
    $('div.sliderGallery ul').css('left', newLeft);

	//Now the handle
	var handleWidth = 161;
	var handleBoxWidth = 564-handleWidth;
	var newLeftHandle = Math.round( handleBoxWidth*newLeft/minLeft );
	$(".handle").css("left", newLeftHandle);
}

/*
 * Moves the slider from right to left to show all categories on startup
 */
function startupAnimation(speed){
    var container = $('div.sliderGallery');
    var ul = $('ul', container);
	//Calculate the needed width
	var itemCount = $('li', ul).length;
    var itemsWidth = ul.innerWidth() - container.outerWidth() +2 ;
	var minLeft = -242*itemCount+container.outerWidth()-8;
	var handleWidth = 161;
	var handleBoxWidth = 564-handleWidth;
//	var newLeftHandle = Math.round( handleBoxWidth*newLeft/minLeft );

	//Put slider and handle in beginposition
    $('div.sliderGallery ul').css('left', minLeft);
	$(".handle").css("left", Math.round( handleBoxWidth ));
	
	//Move the slider
    ul.animate({
		'left': 0
	}, speed, 'swing');
	//Move the handle
	$(".handle").animate({
		'left': 0
	}, speed);
}