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;
    container.slider = mySlider;
    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.scrollHeight;                  //ie
        }else{
          innerHeight = (Element.getStyle(innerBox,"height").replace("px","")); //moz
        }
        innerHeight2 = Element.getHeight(innerBox);

        //alert("H1: " + innerHeight + "\nH2: " + innerHeight2);

        outerHeight = Element.getStyle(outerBox,"height").replace("px","");
        //        alert('oH: '+outerHeight);
        //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;
        var moveRatio = (innerHeight - outerHeight)/100;
        //move the box up (negative) for every TickVal, move the box by moveRatio
        var delta = val*100*moveRatio ;
        //        alert('vamos a mover: '+delta+', val: '+val+', moveRatio: '+moveRatio);
        innerBox.style.top = '-' + delta + "px";
      }
    };
    
    var contentHeight,containerHeight;
    
    if (content.currentStyle) {
      contentHeight = content.offsetHeight;
      containerHeight = container.offsetHeight;
    } else {
      contentHeight = parseInt(Element.getStyle(content,"height").replace("px",""));
      containerHeight = parseInt(Element.getStyle(container,"height").replace("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);
    }
    /*
    if (contentHeight <= containerHeight) {
      mySlider.setDisabled();
    }
    */
  }
}

//---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);
  if (!o.slider.disabled) o.sliding = setInterval("slideStep('" + o.id + "',20)",10);
}

function slideUp(event) {
  var o = Event.element(event);
  if (!o.slider.disabled) o.sliding = setInterval("slideStep('" + o.id + "',-20)",10);
}

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

function updateSlider(container,content) {
  container = $(container);
  content = $(content);
  //track = $($(content).id.replace('Content','Track'));
  //handle = $($(content).id.replace('Content','Handle'));
  
  var contentHeight,containerHeight,trackHeight,heightRatio;
    
  if (content.currentStyle) {
    contentHeight = content.offsetHeight;
    containerHeight = container.offsetHeight;
    //trackHeight = track.offsetHeight;
  } else {
    contentHeight = parseInt(Element.getStyle(content,"height").replace("px",""));
    containerHeight = parseInt(Element.getStyle(container,"height").replace("px",""));
    //trackHeight = parseInt(Element.getStyle(track,"height").replace("px",""));
  }
  
  //heightRatio = Math.round((containerHeight / contentHeight) * trackHeight);
  
  //alert("Track: " + track.id + "\nHandle: " + handle.id + "\nRatio: " + heightRatio);
  //Element.setStyle(handle, {'height':heightRatio+"px"});
  
  if (contentHeight <= containerHeight) {
    container.slider.setDisabled();
  } else {
    container.slider.setEnabled();
  }
}

/*
  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>
  
*/