SCROLLBAR CLASS

/**
 * Class Scrollbar
 * 
 * @elementId string
 * @elementId number
 * @access public
 */
function Scrollbar(elementId, size, type)
{
	var 
		container = document.getElementById(elementId),
		elem = document.createElement('div'),
		subelem = document.createElement('div'),
		ratio = 6, // Scroll size : 10%
		direction;
		
	
		
	// Si type est definie
	if(typeof(type) == 'undefined')
		direction = 'horizontal';
	else
		direction = type;
		
	// Si size est definie
	if(typeof(size) == 'number')
		setStyle();
	else
		return;
		
	
		
	/**
	 * Getter qui retourne la valeur actuelle de la scrollbar (en %)
	 * @access public
	 */
	this.getValue = function()
	{
		var percentage = getPercentage();
		return percentage;	
	}
	
	
	/**
	 * Setteur qui definit la valeur de la scrollbar (en %) et la fait bouger
	 * @access public
	 */
	this.setValue = function(percentage)
	{
		if(direction == 'horizontal')
			elem.scrollLeft = setPercentage(percentage);
		if(direction == 'vertical')
			elem.scrollTop = setPercentage(percentage);
	}
	
	
	/**
	 * Gestion de l'evenement onscroll, appele une fonction avec le parametre pourcentage
	 * ex : scrollbar.scroll(function(v){*Votre code, v vaut le pourcentage du scroll*});
	 * @access public
	 */
	this.scroll = function(method)
	{
		if(typeof(method) == 'function')
		{
			elem.onscroll = function(){
				
				var percentage = getPercentage();
				
				method(percentage);
			}
		}
	}	
	
	
	/**
	 * Renvoie en pourcentage la valeur de la bar
	 * @access private
	 */
	function getPercentage()
	{
		if(direction == 'horizontal')
			return parseInt((elem.scrollLeft * 100) / (elem.scrollWidth - elem.offsetWidth));
		else if(direction == 'vertical')
			return parseInt((elem.scrollTop * 100) / (elem.scrollHeight - elem.offsetHeight));
	}
	
	
	/**
	 * Renvoie en pourcentage la valeur de la bar
	 * @access private
	 */
	function setPercentage(percentage)
	{
		if(direction == 'horizontal')
			return parseInt((percentage * (elem.scrollWidth - elem.offsetWidth)) / 100);
		else if(direction == 'vertical')
			return parseInt((percentage * (elem.scrollHeight - elem.offsetHeight)) / 100);
	}
	
	
	
	/**
	 * Defini la taille de l'objet
	 * @access private
	 */
	function setStyle()
	{
		container.style.overflow = 'hidden';
		
		if(direction == 'horizontal')
		{
			// Taille container
			container.style.width = size + 'px';
			container.style.height = '16px';
			
			// Taille
			elem.style.width = size + 'px';
			subelem.style.width = (size * ratio) + 'px';
			
			// On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout
			elem.style.height = '36px';
			elem.style.marginTop = '-20px';
			
			// Evite l'affichage d'une bar verticale
			elem.style.overflowX = 'auto';
			elem.style.overflowY = 'hidden';
			
			// On definit le sous element qui va influncer sur la taille du bouton et la precision
			subelem.style.height = '36px';
		}
		else if(direction == 'vertical')
		{
			// Taille container
			container.style.height = size + 'px';
			container.style.width = '16px';
			
			// Taille
			elem.style.height = size + 'px';
			subelem.style.height = (size * ratio) + 'px';
			
			// On monte à 36px pour l'affichage sous IE 8, on utilise marginTop pour remonter le tout
			elem.style.width = '36px';
			elem.style.marginLeft = '-20px';
			
			// Evite l'affichage d'une bar verticale
			elem.style.overflowY = 'auto';
			elem.style.overflowX = 'hidden';
			
			// On definit le sous element qui va influncer sur la taille du bouton et la precision
			subelem.style.width = '36px';
		}
		
		elem.appendChild(subelem);
		container.appendChild(elem);
	}
}