Event.observe(window,'load',initScrollBars,true);

var mySliders = new Array();

function initScrollBars() {
  // Obtenemos todos los elementos a los que hay que hacer scroll
  // El resto de componentes del scroll tendrán un ID generado como
  // <idContainer> + <nombreTipoParte>
  // Las partes posibles son: 'Content', 'Track', 'Handle'.
  var sliderBoxes = document.getElementsByClassName("scrollContainer");
  var container,content,track,handle,mySlider,i,j;
  var btnUp, btnDown;
  
  // Configuramos cada elemento
  for (i = 0; i < sliderBoxes.length; i++) {
    container = sliderBoxes[i];
    content = $(container.id + 'Content');
    track = $(container.id + 'Track');
    handle = $(container.id + 'Handle');
    
    switch(true) {
      case (typeof container == 'undefined' || typeof content == 'undefined' || typeof track == 'undefined' || typeof handle == 'undefined'):
      case (container.nodeType != 1 || content.nodeType != 1 || track.nodeType != 1 || handle.nodeType != 1):
        alert("No se puede crear el Scroll para " + container.id + ".");
        continue;
    }
    
    mySlider = new Control.Slider(handle.id,track.id,{ axis:'vertical' });
    track.relatedContent = content;
    mySliders[i] = mySlider;
    
    mySlider.options.onSlide = mySlider.options.onChange = function(val){
      var currTrack = identifyCurrentSlider(val);
      if(currTrack){
        innerBox = currTrack.relatedContent;
        outerBox = innerBox.parentNode;
        
				innerHeight=0;	
				if (innerBox.currentStyle){
					innerHeight = innerBox.offsetHeight;									//ie
				}else{
					innerHeight = (Element.getStyle(innerBox,"height").replace("px",""));	//moz
				}
				
				//assume 100 ticks in the scrollbar
				//for each tick need to move:  The amount the inner box overruns the outer box, divided by 100
				var moveRatio = (innerHeight - (Element.getStyle(outerBox,"height").replace("px","")))/100;
				//move the box up (negative) for every TickVal, move the box by moveRatio
				innerBox.style.top = (val*100*moveRatio*-1) + "px";
			}
    };
    
    // Si existen los botones de "arriba" y "abajo" los configuramos.
    btnUp   = $(container.id + 'Up');
    if (typeof btnUp != 'undefined' && btnUp.nodeType == 1) {
      btnUp.slider = mySlider;
      Event.observe(btnUp,'mousedown',slideUp, true);
      Event.observe(btnUp,'mouseup',stopSlide, true);
      Event.observe(btnUp,'mouseout',stopSlide, true);
    }
    
    btnDown = $(container.id + 'Down');
    if (typeof btnDown != 'undefined' && btnDown.nodeType == 1) {
      btnDown.slider = mySlider;
      Event.observe(btnDown,'mousedown',slideDown, true);
      Event.observe(btnDown,'mouseup',stopSlide, true);
      Event.observe(btnDown,'mouseout',stopSlide, true);
    }
  }
}

//---the following goes away if I can find a way to get a pointer to the slider (or any part of the slider)
//don't know what slider changed.  So go through them all and find one where the value = the value we just received.  that's our slider. Fortunately, the value is 16 digits so odds are we wont' get the wrong one.
function identifyCurrentSlider(currValue){
	var currSlider=null;
	for(j=0; j<mySliders.length; j++){
		if(currValue==mySliders[j].value){
			currSlider=mySliders[j];
			break;
		}
	}
	return currSlider.track;
}

function slideStep(slider, increment) {
  slider = $(slider).slider;
  if (increment >= 0) increment = 1;
  else increment = -1;
  slider.setValue(slider.value + ((1/100) * increment));
}

function slideDown(event) {
  var o = Event.element(event);
  o.sliding = setInterval("slideStep('" + o.id + "',1)",100);
}

function slideUp(event) {
  var o = Event.element(event);
  o.sliding = setInterval("slideStep('" + o.id + "',-1)",100);
}

function stopSlide(event) {
  var o = Event.element(event);
  clearInterval(o.sliding);
}

/*
  FUNCIONAMIENTO:
  
  Los scrollers se generan al detectar elementos de la clase "scrollContainer".
  Para cada elemento de esa clase se toma su Id y el resto de elementos del
  scroller tienen un Id formado por el Id del scrollContainer más las siguientes
  palabras clave:
  
  - Content: Contenido que se va a desplazar. Ha de estar dentro del container.
  - Track:   Barra de desplazamiento. Puede estar en cualquier lugar de la página.
  - Handle:  Dentro de la barra de desplazamiento, es lo que se arrastra.
  - Up:      Botón que mueve hacia arriba el contenido. (opcional)
  - Down:    Botón que mueve hacia abajo el contenido.  (opcional)
  
  Utilizar los estilos de scroll.css para cada elemento y sobreescribir aparte
  al gusto. Las clases predefinidas son:
  
  - scrollContainer
  - scrollContent
  - scrollTrack
  - scrollHandle

  Ejemplo:
  
  <div id="carrito" class="scrollContainer">
    <div id="carritoContent" class="scrollContent">
      <!-- Contenido -->
    </div>
  </div>
  <div id="carritoTrack" class="scrollTrack">
    <div id="carritoHandle" class="scrollHandle"></div>
  </div>
  <div style="border:1px solid black;">
    <a href="#" id="carritoUp">Up</a>
    <a href="#" id="carritoDown">Down</a>
  </div>
  
*/