// La clase "Scroll" es quien realiza el scroll del html en el contenedor
// indicado.
function Scroll (contentName, marqueeName, delay) {
    this.contentName=contentName; // nombre del contenedor del scroll.
    this.marqueeName=marqueeName; // Nombre del contenido que realizará el scroll.
    this.delay=delay; // velocidad
    
    // Ancho del contenedor
    this.contentWidth = parseInt(document.getElementById(this.contentName).clientWidth);
    // Altura del contenedor.
    this.contentHeight = parseInt(document.getElementById(this.contentName).clientHeight);
    // Ancho del scroll
    this.marqueeWidth = parseInt(document.getElementById(this.marqueeName).clientWidth);
    // Altura del scroll
    this.marqueeHeight = parseInt(document.getElementById(this.marqueeName).clientHeight);
    // Variables auxiliares utilizadas para realizar el scroll.
    // Identifican los margenes (superior, inferior, izquierdo y derecho) que
    // se aplica en cada llamada a 'goScroll', que a su ve lo modifica para
    // obtener el efecto de scroll.
    // Se cargan con los valores iniciales para el inicio del scroll.
    
    // Para scroll hacia arriba. La posición inicial es la altura total
    // del contenedor (para que se situe el scroll justo debajo del mismo)
    this.marginTop = this.contentHeight;
    // Para scroll hacia la izquieda. La posición inicial es el ancho total
    // del contenedor (para que se situe el scroll justo a su izquierda)
    this.marginLeft = this.contentWidth;
}

// ************* SCROLL HACIA ARRIBA *******************************************
Scroll.prototype.scrollUp = function(caller) {
    // Indicamos el margen superior del bloque con respecto a su contenedor.
    document.getElementById(this.marqueeName).style.marginTop=this.marginTop+"px";
    // Indica el ancho del scroll. Se declara como "auto" para que se adapte al
    // ancho de su contenedor.
    document.getElementById(this.marqueeName).style.width='auto';
    // Disminuimos en un pixel el margen superior.
    // Disminuiremos el margen superior mientras la suma del mismo con la altura
    // del bloque sea superior a 0 (para que desaparezca por completo del scroll)
    this.marginTop--;
    if (this.marginTop +  this.marqueeHeight < -100) {
        this.marginTop = this.contentHeight; // Reinicimos el puntero que indica
                                             // el margen superior a la altura
                                             // máxima del contenedor.
    }
    setTimeout(caller+'.scrollUp(\''+caller+'\')', this.delay);
}
// *****************************************************************************
// ************* SCROLL HACIA ABAJO *******************************************
Scroll.prototype.scrollDown = function(caller) {
    /* Indicamos el margen superior del bloque con respecto a su contenedor.
       Indicamos el mismo margen que para el scroll hacia abajo, pues en la
       primera comprobación este margen al ser igual a la altura del contenedor
       se va a recalcular al valor adecuado, es decir, a menos la altura total
       del scroll, para que se situe por encima del contenedor.
    */
    document.getElementById(this.marqueeName).style.marginTop=this.marginTop+"px";
    // Indica el ancho del scroll. Se declara como "auto" para que se adapte al
    // ancho de su contenedor.
    document.getElementById(this.marqueeName).style.width='auto';
    // Aumentamos en un pixel el margen superior.
    // Aumentamos el margen superior mientras la suma del mismo con la altura
    // del bloque sea inferior a la altura máxima del contenedor (para que
    // desaparezca por completo del scroll)
    this.marginTop++;
    if (this.marginTop >= this.contentHeight) {
        this.marginTop = 0 - this.marqueeHeight; // Reinicimos el puntero que indica
                                             // el margen superior a la altura
                                             // máxima del contenedor.
    }
    setTimeout(caller+'.scrollDown(\''+caller+'\')', this.delay);
}
// *****************************************************************************
// ****************** SCROLL HACIA LA IZQUIERDA ********************************
Scroll.prototype.scrollLeft = function(caller) {
    // Indicamos el margen izquierdo del bloque con respecto a su contenedor.
    document.getElementById(this.marqueeName).style.marginLeft=this.marginLeft+"px";
    // Indica el ancho del scroll. Lo hereda de su contenedor.
    document.getElementById(this.marqueeName).style.width='inherit';
    // Disminuimos en un pixel el margen izquierdo
    this.marginLeft--;
    if ((this.marginLeft + this.marqueeWidth)< 0) {
        this.marginLeft = this.contentWidth; // Reinicimos el puntero que indica
                                             // el margen superior a la altura
                                             // máxima del contenedor.
    }
    setTimeout(caller+'.scrollLeft(\''+caller+'\')', this.delay);
}
// *****************************************************************************
// ****************** SCROLL HACIA LA DERECHA ********************************
Scroll.prototype.scrollRight = function(caller) {
    // Indicamos el margen izquierdo del bloque con respecto a su contenedor.
    document.getElementById(this.marqueeName).style.marginLeft=this.marginLeft+"px";
    // Indica el ancho del scroll. Lo hereda de su contenedor.
    document.getElementById(this.marqueeName).style.width='inherit';
    // Disminuimos en un pixel el margen izquierdo
    this.marginLeft++;
    if (this.marginLeft >= this.contentWidth) {
        this.marginLeft = 0 - this.marqueeWidth; // Reinicimos el puntero que indica
                                             // el margen superior a la altura
                                             // máxima del contenedor.
    }
    setTimeout(caller+'.scrollRight(\''+caller+'\')', this.delay);
}
// *****************************************************************************