BOITE DE TEXTE TYPE SCROLLBAR AVEC SCROLL VERTICAL

var box	= new Array()																	;	//	Tableau contenant les futurs boites

function boite( id)	{
	var 
		page			,
		y_pos			,
		vitesse = 10		,
		ie		= (navigator.appName=="Microsoft Internet Explorer")? 1 :0,				//	Teste rapide du navigateur pour certains calcul de largeur de calque
		t		= new Array(),
		id_tmp
	;

	//	Recupère les informations de la balise a remplacer
	id_tmp		= document.getElementById(id)											;
	text		= id_tmp.innerHTML														;
	longueur	= id_tmp.offsetWidth													;
	hauteur 	= id_tmp.offsetHeight													;
	//	Redefinis quelques propriété de la balise "usurpé"...
	with(id_tmp){
		innerHTML	= ''																;	//	Supprime le texte
		className	= ''																;	//	Supprime ca classe de base
		with(style)	{
			position	='relative'	;
			overflow	='hidden'	;
			styleFloat	='left'		;
			cssFloat	='left'		;
		}
	};
	
	//	Création des objets DOM
	t.b 		= document.createElement('div')											;	//	Créer la boite
	t.b.id		= id+"_cadre"
	t.texte		= document.createElement('div')											;	//	Zone de texte
	t.texte.id 	= id+"_texte"
	t.sV		= document.createElement('div')											;	//	Zone du scrollbar vertical
	t.sV.id		= id+"_sV"																;	//	Bouton haut
	t.sV_H		= document.createElement('a')										
	t.sV_H.id 	= id+"_up"							
	t.sV_B		= document.createElement('a')											;	//	Bouton bas
	t.sV_B.id 	= id+"_down"									
	t.sV_E		= document.createElement('span')										;	//	Espace entre les 2 boutons
	t.sV_E.id 	= id+"_esp"
	t.sV_D		= document.createElement('span')										;	//	Barre de défilement
	t.sV_D.id	= id+"_def"														
	t.img_h		= document.createElement('img')											;
	t.img_b		= document.createElement('img')											;
	t.txt		= document.createTextNode("")											;	//	Créer le node du texte
	t.texte.appendChild(t.txt)															;	//	Rattache le texte txt a texte 
	
	box[id]		= new Array()															;	//	On Créer un nouveau tableau
	bx			= new Array()															;	//	Nouveau tableau reference des objets qui vont etres créer.
	box[id].obj	= new Array()															;	//	reférence pour appel des objets 
	
	//	Integration des objets DOM dans la pages
	bx.txt		= t.b.appendChild	( t.texte)											;	//	Rattache texte a la boite
	bx.b_H_I	= t.sV_H.appendChild( t.img_h)											;	//	rattache l'image au lien haut	
	bx.b_B_I	= t.sV_B.appendChild( t.img_b)											;	//	Rattache l'image au lien bas
	bx.b_H		= t.sV.appendChild	( t.sV_H)											;	//	Lien haut 
	bx.sV_E		= t.sV.appendChild	( t.sV_E)											;	//	spaceur
	bx.sV_D		= t.sV_E.appendChild( t.sV_D)											;	//	spaceur
	bx.b_B		= t.sV.appendChild	( t.sV_B)											;	//	Lien bas
	bx.scrl		= t.b.appendChild	( t.sV)												;	//	Rattache le scrollbar a boite
	bx.b 		= id_tmp.appendChild( t.b)												;	//	Créer la boite
	
	//	Applique style
	//	Images > ! Placer en début pour eviter bug ie par défaut prend 30px pour les images
	with( bx.b_H_I)	{																	;	//	Image du haut
		src="image/up.png";
		style.width="9px";
		style.height="9px"
	};var i_H_lg = parseInt( bx.b_H_I.offsetWidth),i_H_ht = parseInt( bx.b_H_I.offsetHeight)
	with( bx.b_B_I)	{																	;	//	Image du bas
		src="image/down.png";
		style.width="9px";
		style.height="9px"
	};var i_B_lg = parseInt( bx.b_B_I.offsetWidth),i_B_ht = parseInt( bx.b_B_I.offsetHeight)
	with( bx.b_B)	{																	;	//	Lien haut (balise <a>)
		with(style){
			display= "block";
			width=i_H_lg+"px";
			height=i_H_ht+"px"
		}
	};var b_B_lg = parseInt( bx.b_B.offsetWidth),b_B_ht = parseInt( bx.b_B.offsetHeight)	
	with( bx.b_H)	{																	;	//	Lien bas (balise <a>)
		with(style){
			display="block";
			width= i_B_lg+"px";
			height= i_B_ht+"px";
		}
	};var b_H_lg = parseInt( bx.b_H.offsetWidth),b_H_ht = parseInt( bx.b_H.offsetHeight)	
	with( bx.b)		{																	;	//	calque principal 
		with( style){
			width=longueur+"px";
			height=hauteur+"px";
			clip= "rect(0px, "+longueur+"px, "+hauteur+"px, 0px)";
		}
	};var b_ht 	 = parseInt(bx.b.offsetHeight),b_lg = parseInt(bx.b.offsetWidth)
	with( bx.sV_E)	{																	;	//	Calque d'espace du scroll Vertical 
		with( style){
			height=b_ht-(b_H_ht+b_B_ht+((ie)? 4 : 0))+"px"
			width=i_B_lg+"px"
		}
	}
	var sV_ht = parseInt( bx.sV_E.offsetHeight)
	
	with( bx.scrl)	{																	;	//	Calque scroll vertical contenant les img,a, et espace scroll vertical
		with( style){
			position= "relative";
			left= longueur-(b_B_lg+( (ie)? 2:0))+"px";
			width= b_B_lg+( (ie)? 2:0)+"px";
			height= b_ht+"px"
		}
	};var s_lg = parseInt( bx.scrl.offsetWidth)
	with( bx.txt)	{																	;	//	Calque du texte
		with( style){
			top= 0+"px";
			width=longueur-( s_lg+((ie)? 4 : 0))+"px";
			height= "auto"
		}
	}
	with( bx.sV_D)	{																	;	//	barre de défillement vertical
		with(style)	{
			display="block"
			position="relative";
			top="0px"
			width="auto";
			height="100%";
			backgroundColor="#ffffff"
		}
	}
	
	//	Applique le css de la feuilles de style d'origine
	bx.b.className		= "box"
	bx.txt.className	= "box_texte"
	bx.scrl.className	= "scroll_V"
	bx.sV_E.className	= "scroll_V_esp"
	
	//	Stock les informations propre a chaque objet
	bx.id				= id_tmp														;	//	Stock le nom de l'id parent 
	bx.ie				= ie															;	//	Test navigateur
	bx.css				= bx.txt.style													;	//	Raccourcie style pour texte
	bx.timer			= 0																;	//	objet de l'interval initialement 0
	bx.txt.innerHTML	= text															;	//	On intègre le texte recupere de la balise d'origine id
	bx.delai			= (ie)? 50:3													;	//	Interval de rappel monter/descendre  regler en fonction ie/firefox
	bx.vitesse			= parseInt( vitesse)											;	//	arrondie vitesse
	bx.v_pos			= parseInt( bx.css.top)											;	//	arrondie top du div [box[id]]_texte
	box[id].top			= bx.v_pos
	box[id].obj			= bx
	
	//	Création des fonctions associées au nouvel objet
	box[id].monter	= function(e,a)		{												//	Appeler par onmousedown,onmousewheel,le par interval									
		var el	= box[e].obj,
			lm	= parseInt(el.txt.offsetHeight)-(parseInt(el.id.offsetHeight)	)		,	//	Calcul la limite a ne pas dépasser 
			maj	=	'box["'+e+'"].monter("'+e+'")'										;	//	Créer le rappel de la fonction

		if(parseInt(el.css.top)>-lm)	{												//	Dans le cas ou c'est bon
			el.sV_D.style.top	= (box[id].scrolling)? box[id].pos()+"px" : ''			;	// box[id].scrolling>ligne 181 | on déplace la barre de défilement 
			el.css.top			= parseInt( el.css.top)-( el.vitesse)+"px"				;	//	On Decremente la hauteur du calque txt
			
			if(a!=false)	{															//	Si c'est par onmousedown,onmousewheel
				box[id].timer	= setTimeout( maj, el.delai)							;	//	 on initialise l'interval et la stock
			}
		}
	}
	box[id].descendre = function(e,a)	{												//	Appeler par onmousedown,onmousewheel,le par interval
		var el	= box[e].obj,
			maj	='box["'+e+'"].descendre("'+e+'")'										;	//	Créer le rappel de la fonction
		if(parseInt(el.css.top)<box[e].top)	{											//	Dans le cas ou c'est bon
			el.sV_D.style.top	= (box[id].scrolling)? box[id].pos()+"px" :''			;	// Meme princpe que pour box[id].monter
			el.css.top			= parseInt(el.css.top)+(el.vitesse)+"px"				;	//	Idem

			if(a!=false)	{															;	//	Idem
				box[id].timer	= setTimeout( maj, el.delai)							;	//	Idem
			}
		}
	}
	box[id].pos	= function()			{												//	Calcul en fct de la position du texte la position de la barre de défilement
		var el	= box[id].obj,
			tHp	= Math.abs((el.txt.offsetTop*100)/el.txt.offsetHeight)					;
		return parseInt( (tHp/100)*el.sV_E.offsetHeight)								;	//	Renvoie le resultats ligne 155 & 157
			
	}
	box[id].initScroll	= function()	{												//	Gestion de positionement du scroll vertical
		es	= box[id].obj.sV_E.offsetHeight												;	//	Hauteur de la zone entre les 2 boutons
		Ht	= box[id].obj.txt.offsetHeight												;	//	Hauteur total du texte 
		Hb	= box[id].obj.id.offsetHeight												;	//	Hauteur du div conteneur
		pHb	= (Hb*100)/Ht																;	//	Calcul en % de la taille  
		box[id].scrolling = false														;	//	Initialise cette variable pour le scrolling
		if(Hb<Ht)	{																	//	Si le texte necessite le scrolling on l'active
			box[id].obj.sV_D.style.top	= "1px"											;	//	Positionne la barre de défilement
			box[id].obj.sV_D.style.height = parseInt((pHb/100)*es)+"px"					;	//	Calcul la hauteur de la barre de défilement
			box[id].scrolling = true													;
		}	
	}
	if(ie)	{																			//	Traitement curseur et scroll de la molette spécifique a IE
		with( bx.b_B){style.cursor="hand"};with( bx.b_H){style.cursor="hand"}
		box[id].wheel	= function(id)	{
			if (event.wheelDelta >= 120)	{
				box[id].descendre(id,false)
        		box[id].descendre(id,false)
				box[id].descendre(id,false)
			}
    		else if (event.wheelDelta <= -120)	{
				box[id].monter(id,false)
				box[id].monter(id,false)
				box[id].monter(id,false)
			}
		}
	}
	box[id].load = function()			{												;	//	Charge les evenements de la sourie
		el					= box[id].obj
		el.b_H.onmousedown	= function(){box[id].descendre(id)}
		el.b_B.onmousedown	= function(){box[id].monter(id)}
		el.b_H.onmouseup	= function(){clearTimeout(box[id].timer)}
		el.b_B.onmouseup	= function(){clearTimeout(box[id].timer)}
		el.id.onmousewheel	= function(){box[id].wheel(id)}
	}
	
	box[id].load()																		;	
	return box[id]																		;	//	Remplace box[id] par l'objet créer
}