$(document).ready(function() {

	//var count = $("#slider #slider-ul").attr("value");
	//var counter = 1;
	//var path = "/media/Galleria/";
	
	/*
	while (counter <= count) {
		var thumb = '';
		var file = '';
		file = path + 'img' + counter + '.jpg';
		thumb = thumb + '<li><a href="#" class="deny"><img src="' + file + '" class="clickable" /></a></li>';
		$("#slider #slider-ul").append(thumb);
		counter = counter + 1;
	}
	*/
	
	$('a.deny').click(function(e) {e.preventDefault();});
	
    $('img.clickable').click(function(e) {
		$('#dialog img').remove();
        //Cancel the link behavior
        e.preventDefault();
        //Get the A tag
        var img = '';
		img = img + '<img src="' + $(this).attr('value') + '"/></li>';
     
        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();
     
        //Set height and width to mask to fill up the whole screen
        $('#mask').css({'width':maskWidth,'height':maskHeight});
         
        //transition effect     
        $('#mask').fadeIn(1000);    
        $('#mask').fadeTo("slow",0.8);  
     
        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();
               
        //Set the popup window to center
        $('#dialog').css('top',  winH/2-$('#dialog').height()/2);
        $('#dialog').css('left', winW/2-$('#dialog').width()/2);
     
		$("#dialog a").append(img);
        //transition effect
        $('#dialog').fadeIn(2000); 
     
    });
     
    //if close button is clicked
    $('.window .close').click(function (e) {
        //Cancel the link behavior
        e.preventDefault();
        $('#mask, .window').hide();
		$('#dialog img').remove();
    });     
     
    //if mask is clicked
    $('#mask').click(function () {
        $(this).hide();
        $('.window').hide();
		$('#dialog img').remove();
    });   
	
	$("#slider-wrap").show();
	
	var windowPos = $("#slider-window").position();
	var curPos = 0;
	var listSize = $("#slider-ul").children("li").length;
	var elementWidth = $("#slider-ul").children("li:first").width();
	var elementHeight = $("#slider-ul").children("li:first").height();
	var thumbsWidth = elementWidth*listSize;
	var arrowWidth = $("#slider #left-arrow").width();
	var windowWidth = $("#slider").width()-2*arrowWidth;
	var showing = windowWidth/elementWidth;
	var leftSteps = thumbsWidth/elementWidth-showing;
	if (leftSteps < 0) {leftSteps = 0};
	var leftMin = curPos.left-(elementWidth*leftSteps);
	var leftMax = curPos.left;
	var time = 600;
	var autorollinterval = 3000;
	var hovering = false;
	
	$("#slider-window").width(windowWidth);
	$("#slider-window").height(elementHeight);
	$("#thumbs").width(thumbsWidth+"px");
	$("#slider-ul li").each(function(index) {
		$(this).css('left', curPos);
		$(this).css('top', 0);
		curPos += elementWidth;
	});	
	

	
	$("#slider").hover(function (){ 
			hovering = true;
		}, function (){ 
			hovering = false; 
		});
	
	setInterval(function() { 
		if(!hovering) {rollLeft();} 
		}, autorollinterval );
	
	$("#left-arrow").hover(function() {
		$(this).css( {backgroundPosition: "0 -78px"} );
	}, function(){
		$(this).css( {backgroundPosition: "0 0"} );
	});

	$("#right-arrow").hover(function() {
		$(this).css( {backgroundPosition: "-16px -78px"} );
	}, function(){
		$(this).css( {backgroundPosition: "-16px 0"} );
	});
	
	$("#left-arrow").click(function () {
		rollRight();
	});	
	
	$("#right-arrow").click(function () {
		rollLeft();
	});	
	
	function rollRight(){
		if( !($("#slider-ul").children("li:first").is(':animated'))){
			var clonePos = 0
			$("#slider-ul").prepend($("#slider-ul").children("li:last").clone());
			$("#slider-ul").children("li:first").css('left', clonePos - elementWidth - 1);		
			$("#slider-ul li").each(function(index) {
				var newPos = $(this).position().left + elementWidth;
				$(this).animate({ "left" : newPos}, time, function() {
					if (index == listSize) { //Listsize temporarily one higher, because of cloning
						$("#slider-ul").children("li:first").remove();
						$("#slider-ul").prepend($(this));
						$(this).css('left', clonePos);
					}
				});
			});
		}	
	}
	
	function rollLeft(){
		if( !($("#slider-ul").children("li:first").is(':animated'))){
			var clonePos = (listSize-1)*elementWidth;
			$("#slider-ul").append($("#slider-ul").children("li:first").clone());
			$("#slider-ul").children("li:last").css('left', clonePos + elementWidth);		
			$("#slider-ul li").each(function(index) {
				var newPos = $(this).position().left - elementWidth;
				if (index == 0) {
					$(this).css('left', $(this).position().left-1);
				}
				$(this).animate({ "left" : newPos}, time, function() {
					if (index == 0) {
						$("#slider-ul").children("li:last").remove();
						$("#slider-ul").append($(this));
						$(this).css('left', clonePos);
					}
				});
			});
		}		
	}
});