// JavaScript Document



// scrollLeft et scrollTop
// scrollHeight et scrollWidth



// le deplacement des puces d'ascenceur


//L'élément en cours de drag
//Lorsque dragged = null, il n'y a rien en cours de déplacement
var dragged = null;


function start_drag(objet,event)
{
	// preparer le scroll de la div associée à l'ascenceur
	debut_defilement_par_puce(objet);
	
	//On le place comme objet en cours
	dragged = objet; 
	event.returnValue = false;
	if(event.preventDefault)
	{
		event.preventDefault();
	}
	
	// lors du click, le cadre se place sous la souris (on peut clicker sans deplacer le pointeur, et donc ne pas faire de mousemove)
	drag_onmousemove(event)
}

function drag_onmousemove(event)
//Lorsque la souris se déplace
{

	//si il n'y a pas d'élément en cours de déplacement, inutile de le déplacer
	if(dragged) 
	{
	
		// coordonnées de la souris dans le body
		// On est obligé d'utiliser deux valeurs : suivant le doctype du document. Avec XHTML, on a toujours document.body.scrollTop (et Left) = 0, sinon document.documentElement.scrollTop (et Left) = 0. Dans le doute, on indique les deux.
  
		var y = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
		
		
		
		// calcul des coordonnées de la div partie_centrale, quel que soit son mode de placement dans la page, en position (absolute, relative), ou dans le flux, en tenant compte des margin egalement
		
		var elementY = 0;
		
		// l'élémént HTML de départ est celui où est imbriqué la puce = partie_centrale + nom de la div à faire défiler
		var element = dragged.offsetParent;
		
		do
		{
			//On rajoute des coordonnées
			elementY += element.offsetTop;
			element = element.offsetParent;
		}
		while(element);
		
		// coordonnées de la souris par rapport à la div reference
		
		// deplacements maxi pour le cadre
		var maxiY = dragged.offsetParent.offsetHeight - dragged.offsetHeight;
		
		
		// le cadre ne doit pas sortir de la zone de reference
		// attention le cadre se deplace par son centre
		y = Math.min(Math.max(0, y - elementY - dragged.offsetHeight / 2), maxiY); 

		// deplacer le cadre
		// dragged.style.position = 'absolute';
		dragged.style.top = y + 'px';
		
		// adapter le scroll de la div en fonction de la position de la puce
		defiler_par_puce(y);
		}
}

//Lorsque le bouton de la souris est relâché
function drag_onmouseup(event)
{
	//On arrête le drag&drop
	dragged = null;
	
	// on arrete les defilements divers
	arret_defilement();
}

//une petite fonction "magique" pour ajouter des évènements
function addEvent(obj,event,fct)
{
	if(obj.attachEvent)
	{
		obj.attachEvent('on' + event,fct);
	}
	else
	{
		obj.addEventListener(event,fct,true);
	}
}


//On ajoute les deux évènements avec la méthode
addEvent(document,'mousemove',drag_onmousemove);
addEvent(document,'mouseup',drag_onmouseup);


// affichage d'une scrollbar

function creer_scrollbar(couleur, extension, gauche, haut, hauteurTotale, quelleDiv)
{
	// le HTML + javascript
	document.write('<div class="maScrollBar" id="maScrollBar_'+quelleDiv+'">');
		document.write('<div class="bt_haut" id="bt_haut_'+quelleDiv+'" onmousedown="debut_defilement(this, \'-1\');" onmouseout="arret_defilement()">');
		document.write('</div>');
		
		document.write('<div class="partie_centrale" id="partie_centrale_'+quelleDiv+'">');
			document.write('<div class="bt_puce" id="bt_puce_'+quelleDiv+'" onmousedown="start_drag(this,event);">');
			document.write('</div>');
		document.write('</div>');
		
		document.write('<div class="bt_bas" id="bt_bas_'+quelleDiv+'" onmousedown="debut_defilement(this, \'1\');"  onmouseout="arret_defilement()">');
		document.write('</div>');
		
	document.write('</div>');
	
	// les propriétés CSS
	
	// la div qui contient l'ascenceur
	document.getElementById("maScrollBar_"+quelleDiv).style.width = "21px";
	document.getElementById("maScrollBar_"+quelleDiv).style.left = gauche + "px";
	document.getElementById("maScrollBar_"+quelleDiv).style.top = haut + "px";
	document.getElementById("maScrollBar_"+quelleDiv).style.position = "absolute";
	
	// le bouton du haut
	// il faut mettre l'image en arriere plan pour qu'elle ne puisse pas être selectionnée lors des click
	document.getElementById("bt_haut_"+quelleDiv).style.backgroundImage = "url(scrollbar/images/haut." + extension + ")"
	document.getElementById("bt_haut_"+quelleDiv).style.width = "21px";
	document.getElementById("bt_haut_"+quelleDiv).style.height = "16px";
	
	// le bouton du bas
	// il faut mettre l'image en arriere plan pour qu'elle ne puisse pas être selectionnée lors des click
	document.getElementById("bt_bas_"+quelleDiv).style.backgroundImage = "url(scrollbar/images/bas." + extension + ")";
	document.getElementById("bt_bas_"+quelleDiv).style.width = "21px";
	document.getElementById("bt_bas_"+quelleDiv).style.height = "16px";
	
	//la partie centrale, là ou défile la puce
	//document.getElementById("partie_centrale_"+quelleDiv).style.backgroundImage = "url(scrollbar/images/" + couleur + "_fond." + extension + ")";

	var hauteurMilieu = hauteurTotale - 24;
	document.getElementById("partie_centrale_"+quelleDiv).style.height = hauteurMilieu + "px";
	document.getElementById("partie_centrale_"+quelleDiv).style.position = "relative";
	
	// la div qui contient la puce
	document.getElementById("bt_puce_"+quelleDiv).style.width = "21px";
	document.getElementById("bt_puce_"+quelleDiv).style.height = "25px";
	document.getElementById("bt_puce_"+quelleDiv).style.backgroundImage = "url(scrollbar/images/" + couleur + "_puce." + extension + ")";
	document.getElementById("bt_puce_"+quelleDiv).style.left = "0";
	document.getElementById("bt_puce_"+quelleDiv).style.top = "0";
	document.getElementById("bt_puce_"+quelleDiv).style.position = "absolute";
}

// fonctionnement des scrollbars


// une variable en guise de chronomètre pour le set interval
var chrono_defilement = "";
// une variable pour la quantité de défilement, 20 pixels
var vitesse_defilement = 8;
// une variable pour le defilement maximum
var maxi_defilement;
// une variable qui mémorise la div à faire defiler
var div_qui_defile;
// une variable qui memorise l'id de la div de la puce de l'acsenceur courant
var div_puce_courante;
// una variable pour la proportion entre le defilement de la div, et le deplacement de la puce de l'acsenceur
var prop_defile;


function debut_defilement(objet, sens)
{
	// trouver le nom de la div qui doit défiler
	// on recupère l'id de la div principale qui contient les boutons (la div parent de clle ou on a cliqué), par ex: "maScrollBar_cascade_recadre", mais on veut juste "cascade_recadre"
	// on recupere donc tout le nom à partir de la lettre N°12 (la 13eme)
	var nom = objet.offsetParent.id.substr(12);
	
	div_qui_defile = document.getElementById(nom);
	
	// defilement maxi de la div = hauteur totale de cette div - hauteur d'affichage (donnée dans le style)
	maxi_defilement = div_qui_defile.scrollHeight - div_qui_defile.offsetHeight;
	
	// le nom de la div de la puce qui correspond à l'ascenceur courant
	// par ex: "maScrollBar_cascade_recadre" soit le nom trouvé plus haut précédé du préfixe "bt_puce_"
	div_puce_courante = document.getElementById("bt_puce_" + nom);
	// deplacement maximum de cette puce = hauteur de son parent (sa contrainte) - sa hauteur
	var deplacement_maxi_puce = div_puce_courante.offsetParent.offsetHeight - div_puce_courante.offsetHeight;
	
	// la proportion : prop = div / puce
	prop_defile = maxi_defilement / deplacement_maxi_puce;
	
	// on vient de cliquer sur un bouton
	en_scroll = objet;


	// lancer le defilement de la div
	chrono_defilement = setInterval("defiler(" + sens + ")", 25);

}

function arret_defilement()
{
	// on arrete juste le defilement
	// la variable continue de mémoriser qu'un objet a ete cliqué
	// pour que le scroll reprenne si on revient au dessus du bouton en gardant enfoncé le bouton de la souris
	clearInterval(chrono_defilement);
}


function defiler(sens)
{
	// faire scroller la div
	div_qui_defile.scrollTop = Math.min(maxi_defilement,Math.max(0, div_qui_defile.scrollTop + (sens * vitesse_defilement)));
	
	// trouver la quantite de deplacement de la puce avec la proportion
	// prop = div / puce donc puce = div / prop
	var deplacement_puce = Math.round(div_qui_defile.scrollTop / prop_defile);
	div_puce_courante.style.top = deplacement_puce + "px";
}


function debut_defilement_par_puce(objet)
{
	// pour pouvoir associer la puce qui bouge avec la div qu'elle fait scroller
	// mettre à jour les variables
	
	
	// trouver le nom de la div qui doit défiler
	// on recupère l'id de la div de la puce, par ex: "bt_puce_cascade_recadre", mais on veut juste "cascade_recadre"
	// on recupere donc tout le nom à partir de la lettre N°8 (la 9eme)
	var nom = objet.id.substr(8);
	div_qui_defile = document.getElementById(nom);
	
	// defilement maxi de la div = hauteur totale de cette div - hauteur d'affichage (donnée dans le style)
	maxi_defilement = div_qui_defile.scrollHeight - div_qui_defile.offsetHeight;

	// deplacement maximum de la puce = hauteur de son parent (sa contrainte) - sa hauteur
	var deplacement_maxi_puce = objet.offsetParent.offsetHeight - objet.offsetHeight;
	
	// la proportion : prop = div / puce
	prop_defile = maxi_defilement / deplacement_maxi_puce;
}

function defiler_par_puce(coordY)
{
	// trouver la quantite de deplacement de la puce avec la proportion
	// prop = div / puce donc div = puce * prop
	var deplacement_div = Math.round(coordY * prop_defile);
	// faire scroller la div
	div_qui_defile.scrollTop = Math.min(maxi_defilement,Math.max(0, deplacement_div));
}

// empêcher toute sélection
document.onselectstart = new Function ("return false");