var debug = false;                                    // true pour afficher des boites d'alertes 
                                                      // false pour ne rien afficher
                                                      
if (debug) alert('scrollbox.js - Debut du script');
// Browser detection
var navName = navigator.appName;
var navVer  = parseInt(navigator.appVersion);

if (debug) alert('scrollbox.js - navName = ' + navName + ' - navVer = ' + navVer + '.' + navigator.appMinorVersion);
if (debug) alert('scrollbox.js - plateform = ' + navigator.platform + ' - appCodeName = ' +  navigator.appCodeName);

var ns  = (navName == "Netscape" && navVer <5);
var ie  = (navName == "Microsoft Internet Explorer");
var ns6 = (navName == "Netscape" && navVer >=5);

var dom = document.getElementById ? true:false;
var win = ((navigator.platform == 'Win32') || (navigator.platform == 'Win16'));

var ContentBoxName;                                   // La boite d'affichage qui permet le scroll
var ContentName;                                      // La boite qui contient le contenu
var AnchorBox;                                        // L'ancre pour la position de la boite


var ScrollH      = 0;                               // Hauteur de la boite
var ScrollW      = 100;                               // Largeur de la boite
var BoxBorder    = 0;                                 // Bordure entre l'ancre et la boite d'affichage
var BorderScroll = 0;                                 // Espaces entre les fleches et la bar d'ascenseur
var BgColor      = '';                         // Couleur de la bar d'ascenseur


var ScrollerW = 10;                                   // Largeur de l'ascenseur

var sImgUp    = 'image/up.gif'
var upH       = 5;                                    

var sImgDown  = 'image/down.gif';
var downH     = 5;     

var sImgDrag  = 'image/slider.gif';
var dragH     = 40;                    

var speed     = 6;
var debug_mac = 0;


var _NeedScroller = true;         // La boite ncssite-t-elle l'ascenseur 
var _ScrollH;                     // Hauteur de la barre de dfilement
var mouseY;                       // Mouse Y position onclick
var mouseX;                       // Mouse X position onclick

var clickUp     = false;          // If click on up-arrow
var clickDown   = false;          // If click on down-arrow
var clickDrag   = false;          // If click on scrollbar
var clickAbove  = false;          // If click above scrollbar
var clickBelow  = false;          // If click below scrollbar

var timer = setTimeout("",500);   // Repeat variable

var upL = 0;                      // Up-arrow X
var upT = 0;                      // Up-arrow Y
var downL = 0;                    // Down-arrow X
var downT = 0;                    // Down-arrow Y
var dragL = 0;                    // Scrollbar X
var dragT = 0;                    // Scrollbar Y
var rulerL = 0;                   // Ruler X
var rulerT = 0;                   // Ruler Y
var contentT = 0;                 // Content layer Y;
var contentH = 0;                 // Content height
var contentClipH = 0;             // Content clip height
var scrollLength = 0;             // Number of pixels scrollbar should move
var startY = 0;                   // Keeps track of offset between mouse and span




var tmr;
if (ns6) tmr = setTimeout("calcSize();", 25);
function calcSize()
{
  if ( document.getElementById( ContentName ) )
  {
    // Height of content layer and clip layer
	  contentH     = document.getElementById( ContentName ).offsetHeight;
	  contentClipH = document.getElementById( ContentBoxName ).offsetHeight;
	  if ((contentH != 0) && (contentClipH != 0))
	    scrollLength = ((_ScrollH-dragH)/(contentH-contentClipH));
	  else
	    scrollLength = 0;
	    
    if (scrollLength > 0)
    {
      // Initializes event capturing	                            
	    document.onmousedown = down;
	    document.onmousemove = move;
	    document.onmouseup   = up;
	  }
	  else
	  {
      // Initializes event capturing	                            
	    document.onmousedown = '';
	    document.onmousemove = '';
	    document.onmouseup   = '';	  
	  }
	  
	}
	// On rappelle le timer si besoin
	if (contentH == 0) tmr = setTimeout('calcSize();' , 25);
}


// Mousedown
function down(e){ 
	if((document.layers && e.which!=1) || (document.all && event.button!=1)) return true; // Enables the right mousebutton
	getMouse(e);
	startY = (mouseY - dragT);

	// If click on up-arrow
	if(mouseX >= upL && (mouseX <= (upL + ScrollerW)) && mouseY >= upT && (mouseY <= (upT + upH))){
		clickUp = true;
		return scrollUp();
	}
	// Else if click on down-arrow
	else if(mouseX >= downL && (mouseX <= (downL + ScrollerW)) && mouseY >= downT && (mouseY <= (downT + downH))){
		clickDown = true;
		return scrollDown();
	}
	// Else if click on scrollbar
	else if(mouseX >= dragL && (mouseX <= (dragL + ScrollerW)) && mouseY >= dragT && (mouseY <= (dragT + dragH))){
		clickDrag = true;
		return false;
	}
	else if(mouseX >= dragL && (mouseX <= (dragL + ScrollerW)) && mouseY >= rulerT && (mouseY <= (rulerT + _ScrollH))){
		// If click above drag
		if(mouseY < dragT){
			clickAbove = true;
			clickUp = true;
			return scrollUp();
		}
		// Else click below drag
		else{
			clickBelow = true;
			clickDown = true;
			return scrollDown();
		}
	}
	// If no scrolling is to take place
	else{
		return true;
	}
}

// Drag function
function move(e){
	if(clickDrag){
		getMouse(e);
		dragT = (mouseY - startY);

		if(dragT < (rulerT))
			dragT = rulerT;
		if(dragT > (rulerT + _ScrollH - dragH))
			dragT = (rulerT + _ScrollH - dragH);

		contentT = ((dragT - rulerT)*(1/scrollLength));
		contentT = eval('-' + contentT);

		moveTo();

		// So ie-pc doesn't select gifs
		if(ie || ns6)
			return false;
	}
}

// Mouse up function
function up(){
	clearTimeout(timer);
	// Resetting variables
	clickUp = false;
	clickDown = false;
	clickDrag = false;
	clickAbove = false;
	clickBelow = false;
	return true;
}

// Reads mouse X and Y coordinates
function getMouse(e){
	if(ie){
		mouseY = event.clientY + document.body.scrollTop;
		mouseX = event.clientX;
	}
	else if(ns || dom){
		mouseY = e.pageY;
		mouseX = e.pageX;
	}
}

// Scrolls up
function scrollUp(){
	getT();

	if(clickAbove){
		if(dragT <= (mouseY-(dragH/2)))
			return up();
	}

	if(clickUp){
		if(contentT < 0){
			dragT = dragT - (speed*scrollLength);

			if(dragT < (rulerT))
				dragT = rulerT;

			contentT = contentT + speed;
			if(contentT > 0)
				contentT = 0;

			moveTo();
			timer = setTimeout("scrollUp()",25);
		}
	}
	return false;
}

// Scrolls down
function scrollDown()
{
	getT();

	if(clickBelow)
	{
		if(dragT >= (mouseY-(dragH/2)))
		{
			return up();
		}
	}

	if(clickDown)
	{
		if(contentT > -(contentH - contentClipH))
		{
			dragT = dragT + (speed*scrollLength);
			if(dragT > (rulerT + _ScrollH - dragH))
			{
				dragT = (rulerT + _ScrollH - dragH);
      }
			contentT = contentT - speed;
			if(contentT < -(contentH - contentClipH))
				contentT = -(contentH - contentClipH);

			moveTo();
			timer = setTimeout("scrollDown()",25);
		}
	}
	
	return false;
}

// Reads content layer top
function getT()
{
  contentT = parseInt( document.getElementById( ContentName ).style.top );  
}

// Moves the layer
function moveTo(){
	var oContent;
	  
	oContent = document.getElementById( ContentBoxName );	  
 
	document.getElementById( ContentName ).style.top = contentT + 'px';
	document.getElementById( 'ruler' ).style.top     = (dragT - parseInt( oContent.style.top ) ) + 'px';
	document.getElementById( 'drag' ).style.top      = (dragT - parseInt( oContent.style.top ) ) + 'px';
}


// Gestionnaire de la roulette de souris
function wheel()
{
  var oSrcEle = event.srcElement;
  // Intercepte l'vnement si la source est scrollable.  
  if ( oSrcEle.tagName == 'SELECT'   ) return true;
  if ((oSrcEle.tagName == 'TEXTAREA' ) && (oSrcEle.offsetHeight < oSrcEle.scrollHeight)) return true;

  if (event.wheelDelta >= 120)
  {
    timer = setTimeout("up()",400);
    clickUp = true;
    scrollUp();
    window.event.returnValue  = false;
  }
  else if (event.wheelDelta <= -120)
  {
    timer = setTimeout("up()",400);
    clickDown = true;
    scrollDown();
    window.event.returnValue  = false;
  }

}



// Gestionnaire en cas de Scroll du conteneur ( Tab ou Ctrl-F )
function scroll()
{
  
  var _debug = false;
  var oContentBox;

  oContentBox = document.getElementById( ContentBoxName );

  contentT = contentT - (oContentBox.scrollTop);
  dragT = dragT + (oContentBox.scrollTop*scrollLength);
  
  oContentBox.scrollTop = 0;
  
  moveTo();
  
}

function _BuildScroller()
{
  var _debug = false && debug;
  
  if (_debug) alert( '_BuildScroller - Dbut')
          
  var oTmp;
  var oContent = document.getElementById( ContentBoxName );
  var posLeft  = ScrollW-(ScrollerW+BorderScroll+BoxBorder);  //-100控制滚动条的位置,居右去掉“-100”

  if (_debug) alert( '_BuildScroller - oContent = ' + oContent + ' - ' + posLeft);
  
  // div containing up-arrow | change: top + left
  oTmp = document.createElement( 'DIV' );
  oTmp.id             = 'up';
  oContent.appendChild( oTmp );
  oTmp.style.position = 'absolute';
  oTmp.style.left     = posLeft   + 'px';
  oTmp.style.top      = BoxBorder + 'px';
  oTmp.style.width    = ScrollerW + 'px';
  oTmp.style.height   = upH       + 'px';
  oTmp.style.cursor   = 'hand';
  oTmp.style.zIndex   = 2;
  oTmp.innerHTML      = '<img src="' + sImgUp + '" width="' + ScrollerW + '" height="' + upH + '" border="0">';
  if (_debug) alert( 'test' );
  
  // div containing scrollbar | change: top + left + width + height
  oTmp = document.createElement( 'DIV' );
  oTmp.id             = 'drag'
  oContent.appendChild( oTmp );
  oTmp.style.position = 'absolute';
  oTmp.style.left     = posLeft + 'px';
  oTmp.style.top      = BoxBorder+upH+BorderScroll + 'px';
  oTmp.style.width    = ScrollerW + 'px';
  oTmp.style.height   = dragH + 'px';
  oTmp.style.cursor   = 'hand';
  oTmp.style.zIndex   = 3;
  oTmp.innerHTML      = '<img src="' + sImgDrag + '" width="' + ScrollerW + '" height="' + dragH + '" border="0">';
  if (_debug) alert( 'test' );
          
  // div containing down-arrow | change: top + left
  oTmp = document.createElement( 'DIV' );
  oTmp.id             = 'down';
  oContent.appendChild( oTmp );
  oTmp.style.left     = posLeft + 'px';
  oTmp.style.top      = BoxBorder+upH+(BorderScroll*2)+_ScrollH + 'px';
  oTmp.style.width    = ScrollerW + 'px';
  oTmp.style.height   = downH + 'px';
  oTmp.style.position = 'absolute';
  oTmp.style.cursor   = 'hand';
  oTmp.style.zIndex   = 4;
  oTmp.innerHTML      = '<img src="' + sImgDown + '" width="' + ScrollerW + '" height="' + downH + '" border="0">';
  if (_debug) alert( 'test' );
  
  // div containing down-arrow | change: top + left
  oTmp = document.createElement( 'DIV' );
  oTmp.id             = 'ruler';
  oContent.appendChild( oTmp );
  oTmp.style.left     = posLeft + 'px';
  oTmp.style.top      = BoxBorder+upH+BorderScroll + 'px';
  oTmp.style.width    = ScrollerW + 'px';
  oTmp.style.height   = dragH + 'px';
  oTmp.style.position = 'absolute';
  oTmp.style.cursor   = 'hand';
  oTmp.style.zIndex   = 5;  
  if (_debug) alert( 'test' );
  
  // table for the bacground color
  oTmp = document.createElement( 'DIV' );
  oTmp.id             = 'bgruler';
  oContent.appendChild( oTmp );  
  oTmp.style.left     = posLeft + 'px';
  oTmp.style.top      = BoxBorder+upH+BorderScroll + 'px';
  oTmp.style.width    = ScrollerW + 'px';
  oTmp.style.height   = _ScrollH + 'px';  
  oTmp.style.position = 'absolute';
  oTmp.innerHTML      = '<table border=0 cellpadding=0 background=image/sq1_36.gif cellspacing=0 bgColor="' + BgColor + '" style="WIDTH: ' + ScrollerW + 'px;HEIGHT: ' + parseInt(_ScrollH) + 'px;"><tr><td width=24></td></tr></table>';
  if (_debug) alert( 'test' );
    
  return true;
}

function _BuildScrollBox( )
{
  var oContent;
  var oContenu;
  var oAnchor;
  var posLeft;
  var posTop;
  var _debug = false && debug;
  
  // Recupration des objets Conteneur, Contenu et Ancre
  if (_debug) alert( "test");
  oContent = document.getElementById( ContentBoxName );
  oContenu = document.getElementById( ContentName );
  oAnchor  = document.getElementById( AnchorBox );
  if (_debug) alert( '_BuildScrollBox - oContent = ' + oContent + ' - ' +
                                       'oContenu = ' + oContenu + ' - ' +
                                       'oAnchor  = ' + oAnchor);
                                          
  // Rcupration de la position de l'ancre par rapport au coin (0,0)
  posLeft = BoxBorder + oAnchor.offsetLeft;
  posTop  = BoxBorder + oAnchor.offsetTop;
  while (oAnchor.offsetParent.tagName != 'BODY')
  {
    oAnchor = oAnchor.offsetParent   
    posLeft = posLeft + oAnchor.offsetLeft;
    posTop  = posTop  + oAnchor.offsetTop;
  }
  if (_debug) alert( '_BuildScrollBox - posLeft = ' + posLeft + ' - posTop = ' + posTop);
 	
  // Mise en forme du conteneur
  oContent.style.position = "absolute";
  oContent.style.left     = posLeft + 'px';
  oContent.style.top      = posTop  + 'px';    
  oContent.style.width    = ScrollW + 'px';
  oContent.style.height   = ScrollH + 'px';
  oContent.style.overflow = "hidden";
  oContent.style.display  = "block";
  
  // Mise en forme du contenu 
  oContenu.style.position = "absolute";
  oContenu.style.width    =  ScrollW - (ScrollerW + (2*BorderScroll)) + 'px';
  oContenu.style.top      = '0px';

  if (_debug) alert( '_test' );

  if (_debug) alert( '_BuildScrollBox - oContent.offsetLeft = ' + oContent.offsetLeft + ' - ' +
                                       'oContenu.offsetLeft = ' + oContenu.offsetLeft + ' - ' +
                                       'oAnchor.offsetLeft  = ' + oAnchor.offsetLeft);
  
  // Construction des ascenseurs
  if ( !document.getElementById( 'up' ) )
  {
      if (_debug) alert( '_BuildScrollBox - oContenu.offsetHeight = ' + oContenu.offsetHeight + 
                                                ' - oContent.offsetHeight = ' + oContent.offsetHeight +
                                                ' - oContenu.offsetHeight = ' + oContenu.offsetHeight + 
                                                ' - oAnchor.offsetHeight = ' + oAnchor.offsetHeight );
      _NeedScroller = ( oContenu.offsetHeight >= oContent.offsetHeight );
      if (_NeedScroller) _BuildScroller();
  }
  else
  {
    if (_NeedScroller)
    {
      // Remise en place du curseur si il a t?dplac?      document.getElementById( 'drag' ).style.top  = BoxBorder+upH+BorderScroll + 'px';
      document.getElementById( 'ruler' ).style.top = BoxBorder+upH+BorderScroll + 'px';
    }
  }
  
  if (_debug) alert( '_BuildScrollBox - fin' );
  return true;
}


function ShowScrollBox( )
{
  var _debug = false && debug;
  var oContent; 
	var deltaW = 0;
	var deltaH = 0;

  if (_debug) alert( 'ShowScrollBox - debut' );

  if(ns)
  {
    if (_debug) alert( 'ShowScrollBox - pour ns')  
    alert( 'This functionality is not supported by this version of Netscape' );
    return false;
  }
  
  if (!win)
  {
	debug_mac +=1;
	if(debug_mac<2){
	  BoxBorder += 5;
   	 ScrollH -= 5;
	ScrollW      += 5;
	}
  }
  
  _ScrollH = ScrollH - ( upH + downH + (BoxBorder*2) + (BorderScroll*2));
  if(ie || ns6)
  {
    _BuildScrollBox();
  }
  else
  {
    if (_debug) alert( 'ShowScrollBox - pour ???')  
    alert( 'This functionality is not supported by this version of your browser' );
    return false;
  }
  
  if (_debug) alert( 'ShowScrollBox - _BuildScrollBox termine...');
  
  if (!_NeedScroller) return true;
  
  oContent = document.getElementById( ContentBoxName );
  if (_debug) alert( 'ShowScrollBox - oContent = ' + oContent);
  
  // Up-arrow X and Y variables
	upL = parseInt( document.getElementById( 'up' ).style.left);
	upT = parseInt( document.getElementById( 'up' ).style.top);
	// Down-arrow X and Y variables
	downL = parseInt( document.getElementById( 'down' ).style.left);
	downT = parseInt( document.getElementById( 'down' ).style.top);
	// Scrollbar X and Y variables
	dragL = parseInt( document.getElementById( 'drag' ).style.left);
	dragT = parseInt( document.getElementById( 'drag' ).style.top);
	// Ruler Y variable
	rulerT = parseInt( document.getElementById( 'ruler' ).style.top);	
	
	
	// Height of content layer and clip layer
	contentH     = document.getElementById( ContentName ).offsetHeight;
	contentClipH = oContent.offsetHeight;
	
  deltaW = parseInt( oContent.style.left ); 
	deltaH = parseInt( oContent.style.top );
  upL    = upL    + deltaW;
  upT    = upT    + deltaH;
  dragL  = dragL  + deltaW;
  dragT  = dragT  + deltaH;
  downL  = downL  + deltaW;
  downT  = downT  + deltaH;
  rulerT = rulerT + deltaH;
	if (_debug) alert('ShowScrollBox - contentClipH = ' + contentClipH + ' - contentH = ' + contentH +
	                             ' - upL = ' + upL + ' - upT = ' + upT + 
	                             ' - downL = ' + downL + ' - downT = ' + downT + 
	                             ' - dragL = ' + dragL + ' - dragT = ' + dragT + 
	                             ' - rulerT = ' + rulerT + ' - deltaW = ' + deltaW +
	                             ' - deltaH = ' + deltaH );

  // Number of pixels scrollbar should move
  if ((contentH != 0) && (contentClipH != 0))
	  scrollLength = ((_ScrollH-dragH)/(contentH-contentClipH));
	if (_debug) alert('ShowScrollBox - scrollLength = ' + scrollLength);
	
	// Initializes event capturing	                            
	oContent.onmousedown = down;
	oContent.onmousemove = move;
	oContent.onmouseup   = up;
  
  // Implment la gestion de la roulette uniquement pour IE
  if (ie) 
  {
    oContent.onmousewheel = wheel;   
    oContent.onscroll     = scroll;
  }
  
	if (_debug) alert('ShowScrollBox - fin');
  return true;
}
//*****************************************************************************