var ratio;
var newPosition;

function onjScrollbarDrag(){
	var numberOfPictures = $("#img-container .small, #img-container .large").length;
	var target = "#_"+numberOfPictures;
	var maxScroll = 260 - $( 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 .small, #img-container .large").length;
	var target = "#_"+numberOfPictures;
	var maxScroll = 275 - $( 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 .small, #img-container .large").length;
	var target = "#_"+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"
		});
	}
}

slideOutTimerIDMain = null;
slideInTimerIDMain = null;
slideOutTimerIDSub = null;
slideInTimerIDSub = null;

function delayedSlideOutMain(){
	if( slideInTimerIDMain != null ){
		clearTimeout( slideInTimerIDMain );
		slideInTimerIDMain = null;
	}
	slideOutTimerIDMain = setTimeout( slideOutMenuMain, 50 );
}
function delayedSlideInMain(){
	if( slideOutTimerIDMain != null ){
		clearTimeout( slideOutTimerIDMain );
		slideOutTimerIDMain = null;
	}
	slideInTimerIDMain = setTimeout( slideInMenuMain, 300 );
}
function slideInMenuMain(){
	$('#menudata .main-popup').slideUp("fast");
}
function slideOutMenuMain(){
	$('#menudata .main-popup').slideDown("fast");
}

function delayedSlideOutSub(){
	if( slideInTimerIDSub != null ){
		clearTimeout( slideInTimerIDSub );
		slideInTimerIDSub = null;
	}
	slideOutTimerIDSub = setTimeout( slideOutMenuSub, 50 );
}
function delayedSlideInSub(){
	if( slideOutTimerIDSub != null ){
		clearTimeout( slideOutTimerIDSub );
		slideOutTimerIDSub = null;
	}
	slideInTimerIDSub = setTimeout( slideInMenuSub, 300 );
}
function slideInMenuSub(){
	$('#menudata .sub-popup').slideUp("fast");
}
function slideOutMenuSub(){
	$('#menudata .sub-popup').slideDown("fast");
}
function naturePulldown(){

	/**
	* Hid all the sub-menus
	*/
	$('#menudata .main-popup, #menudata .sub-popup').hide();
	
	/**
	* Main menu
	*/
	$('#menudata .main-menu').bind( "mouseover" , delayedSlideOutMain );
	$('#menudata .main-menu').bind( "mouseout" , delayedSlideInMain );
	
	/**
	* Sub menu
	*/
	$('#menudata .sub-menu').bind( "mouseover" , delayedSlideOutSub );
	$('#menudata .sub-menu').bind( "mouseout" , delayedSlideInSub );
}

activePicture = 1;

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

	numberOfPictures = $("#img-container .small, #img-container .large").length;
	
	$('#image-navi').prepend('<a class="no_margin" href="_precedente"><img id="image-navi-left" src="http://www.naturehumaine.com/files/naturehumaine/nav_left.gif" width="19" height="11" alt=""></a><a href="_suivante"><img id="image-navi-right" src="http://www.naturehumaine.com/files/naturehumaine/nav_right.gif" width="19" height="11" 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"
	});
	$('.logo').css({
		position: "absolute",
		left: "15px",
		top: "36px"
	});
}