var ratio;
var newPosition;

function onjScrollbarDrag(){
	var numberOfPictures = $("#img-container .picture").length;
	var target = "#pic"+numberOfPictures;
	//alert($("#pic2").offset().left );
	var maxScroll = 25 - $( target ).offset().left + $("#img-container").offset().left;
	

	var jScrollbarOffset = $('#jScrollbarCursor').offset();
	var viewport = $(window).width();
	ratio = jScrollbarOffset.left / ( viewport - $('#jScrollbarCursor').width() );
	
	newPosition = Math.round( maxScroll * ratio )+15;
	$('#img-container').css( 'left', newPosition );
}
function checkScrollbarStatus(){
	var viewport = $(window).width();
	var numberOfPictures = $("#img-container .picture").length;
	var target = "#pic"+numberOfPictures;
	var maxScroll = 25 - $( target ).offset().left + $("#img-container").offset().left;
	ratio = newPosition / maxScroll;
	$('#jScrollbarCursor').animate({
		left: Math.floor( ratio * ( viewport - $('#jScrollbarCursor').width() ) )
	}, 400 );
}
function checkScrollbarStatus_onWindowResize(){
	var viewport = $(window).width();

	var numberOfPictures = $("#img-container .picture").length;
	var target = "#pic"+numberOfPictures;
	var maxScroll = 275 - $( target ).offset().left + $("#img-container").offset().left;
	
	ratio = newPosition / maxScroll;
	$('#jScrollbarCursor').css({
		left: Math.floor( ratio * ( viewport - $('#jScrollbarCursor').width() ) )
	});
}

function jScrollbar( enabled ){
	$('html').css('overflow','hidden');
	$('body').append('<div id="jScrollbar"><div id="jScrollbarCursor"><div id="jScrollbarGrip"><div></div></div></div></div>');
	$('#jScrollbar').css({
		height: "15px",
		backgroundColor: "#CCC",
		position: "absolute",
		bottom: "0px",
		width: "100%",
		zIndex: "2000"
	});

		
	$('#jScrollbarCursor').css({
		position: "relative",
		left: "0px",
		height: "15px",
		fontSize: "1px",
		backgroundColor: "#000",
		width: "335px"
	});
	$('#jScrollbarGrip').css({
		position: "relative",
		fontSize: "1px",
		height: "11px",
		left: "165px",
		top: "2px",
		width: "5px",
		borderLeft: "1px solid #DDD",
		borderRight: "1px solid #DDD"
	});
	$('#jScrollbarGrip div').css({
		position: "relative",
		height: "11px",
		fontSize: "1px",
		left: "2px",
		width: "1px",
		borderLeft: "1px solid #DDD"
	});
	if( enabled ){
	    $('#jScrollbarCursor').draggable({ containment: 'parent', drag: onjScrollbarDrag });
		$(window).resize(function(){
		  checkScrollbarStatus_onWindowResize();
		});
	}
	else{
		$('#jScrollbarCursor').css({
			opacity: "0.1"
		});
	}
}






activePicture = 1;

function moveImgContainer(){
	target = "#pic"+activePicture;
	newPosition = 25 - $( target ).offset().left + $("#img-container").offset().left;
	$("#img-container").animate({
		left: newPosition
		}, 850, "easeOutQuint" );
	checkScrollbarStatus();
}
function natureNavi(){

	numberOfPictures = $("#img-container .picture").length;
	
	$('#image-navi').prepend('<a class="no_margin" href="_precedente"><img id="image-navi-left" src="http://www.poveralice.it/images/nav_left2.gif"  alt=""></a><a class="no_margin" href="_suivante"><img id="image-navi-right" src="http://www.poveralice.it/images/nav_right2.gif" alt=""></a>');	
	$('#image-navi-left').click( function() {
		
		if( activePicture - 1 >= 1 ){
			$("a.numbers[href='_"+activePicture+"']").css("font-weight", "normal");
			activePicture--;
		}
		moveImgContainer();
		$("a.numbers[href='_"+activePicture+"']").css("font-weight", "bold");
		return false;
	});
	$('#image-navi-right').click( function() {
		if( activePicture + 1 <= numberOfPictures ){
			$("a.numbers[href='_"+activePicture+"']").css("font-weight", "normal");
			activePicture++;
		}
		$("a.numbers[href='_"+activePicture+"']").css("font-weight", "bold");
		moveImgContainer();
		return false;
	});
	$(".numbers").each( function(i){
		$(this).attr( "savedID" , i+1 );
	}).click( function() {
			$("a.numbers[href='_"+activePicture+"']").css("font-weight", "normal");
			activePicture = parseInt( $(this).attr("savedID") );
			moveImgContainer();
			$("a.numbers[href='_"+activePicture+"']").css("font-weight", "bold");
			return false;
		});
}

function natureLayout(){
	$('body').append('<div id="whiteborder"></div>');
	$('#whiteborder').css({
		height: "100%",
		width: "15px",
		backgroundColor: "#FFF",
		position: "absolute",
		left: "0px",
		top: "0px",
		zIndex: "999"
	});
	$('body').append('<div id="toplines_1"></div>');
	$('#toplines_1').css({
		height: "68px",
		width: "250px",
		borderTop: "1px solid #000000",
		borderBottom: "1px solid #000000",
		position: "absolute",
		left: "15px",
		top: "15px",
		zIndex: "998"
	});
	$('body').append('<div id="toplines_2"></div>');
	$('#toplines_2').css({
		height: "68px",
		width: "510px",
		borderTop: "1px solid #000000",
		borderBottom: "1px solid #000000",
		position: "absolute",
		left: "275px",
		top: "15px",
		zIndex: "997"
	});
	$('body').append('<div id="toplines_3"></div>');
	$('#toplines_3').css({
		height: "68px",
		width: "100%",
		borderTop: "1px solid #000000",
		borderBottom: "1px solid #000000",
		position: "absolute",
		left: "795px",
		top: "15px",
		zIndex: "996"
	});
	$('#menu').css({
		width: "0px"
	});
	$('#menudata').css({
		position: "absolute",
		left: "275px",
		top: "39px"
	});
	$('#return-to-project-list').css({
		position: "absolute",
		left: "15px",
		top: "535px"
	});
	$('#image-navi').css({
		position: "absolute",
		left: "275px",
		top: "535px"
	});
	
}