// CONFIG
var STEP = 50; // pas de déplacement en pixel, utilisé si le mode auto ne marche pas


$(document).ready(function()  {
	var obj = $("#navvignettes");
	if (obj.length > 0) {
		var flecheH = $("#flechenavhaut");
		var flecheB = $("#flechenavbas");
	
		flecheH.click(goUp);
		flecheB.click(goDown);
	
		initscroll();
	}
});
var activeTR = null;

function initscroll() {
	var obj = $("#navvignettes");
	var table = $("#navvignettes").children('table');
	
	var flecheH = $("#flechenavhaut");
	var flecheB = $("#flechenavbas");	
	
	var divHeight = obj.height();
	var tabHeight = table.height();
		
	if (tabHeight <= divHeight) {
		flecheH.hide();
		flecheB.hide();
	} else {
		var tabTop = table.css('margin-top');				
		tabTop = tabTop.substring(0, tabTop.length-2);	
		tabTop = parseInt(tabTop);		
		if (isNaN(tabTop)) {
			tabTop = 0;
		}
		
		if (tabTop == 0) {
			flecheH.hide();
		}
		
		var countTr = $("#navvignettes table tr");
		
		activeTR = $(countTr[0]);
				
		/*
		countTr.each(function() {
				//console.log($(this).height());
		});
		*/
	}
}

var goDown =  function() {
	var obj = $("#navvignettes");
	var table = $("#navvignettes").children('table');
	var flecheH = $("#flechenavhaut");
	var flecheB = $("#flechenavbas");
	
	var divHeight = obj.height();
	var tabHeight = table.height();
	
	var tabTop = table.css('margin-top');
	
	tabTop = tabTop.substring(0, tabTop.length-2);
	tabTop = parseInt(tabTop);	
	if (isNaN(tabTop)) {
		tabTop = 0;
	}
	
	if (activeTR != null) {
		useStep = activeTR.height();
		activeTR = activeTR.next('tr');
	} else {
		 useStep = STEP;
	}
	tabTop = tabTop - useStep;	
	
	// deplacement
	table.css('margin-top', (tabTop + "px") );
	
	
	// reactivation des fleches
	if (tabTop < 0) {
		flecheH.show();
	}
	
	if ( (divHeight + (-tabTop)) >= tabHeight) {
		flecheB.hide();
	}
	
}

var goUp = function() {
	var obj = $("#navvignettes");
	var table = $("#navvignettes").children('table');
	var flecheH = $("#flechenavhaut");
	var flecheB = $("#flechenavbas");
	
	var divHeight = obj.height();
	var tabHeight = table.height();
	
	var tabTop = table.css('margin-top');
	
	tabTop = tabTop.substring(0, tabTop.length-2);
	tabTop = parseInt(tabTop);
	if (isNaN(tabTop)) {
		tabTop = 0;
	}
	
	if (activeTR != null) {
		activeTR = activeTR.prev('tr');
		useStep = activeTR.height();
	} else {
		 useStep = STEP;
	}	
	tabTop = tabTop + useStep;	
	
	table.css('margin-top', (tabTop + "px") );
		
	if (tabTop >= 0) {
		flecheH.hide();
	}
	
	if ( (divHeight + (-tabTop)) < tabHeight) {
		flecheB.show();
	}
}
