function slideHorizontal(box_id, backgroundOut, backgroundIn, img)
{
    this.slide_cont = null;
    this.link = new Array();
    this.time_out = null;
    this.pos_actual = null;
    this.pos_alcanzar = null;
    this.indice = 0;
    this.click = 0;
    this.start = null;
    var _this = this;

    this.anyadirEvento = function(elemento,evento,funcion)
    {
	if(elemento.addEventListener)return elemento.addEventListener(evento,funcion,false);
        if(elemento.attachEvent)return elemento.attachEvent("on"+evento,funcion);
    }
    this.eliminarEvento = function(evento)
    {
        if(window.event){
            window.event.cancelBubble=true;
            window.event.returnValue=false;
            return
        }
        if(evento.preventDefault&&evento.stopPropagation){
            evento.preventDefault();
            evento.stopPropagation();
        }
    }
    this.posicionAlcanzar = function(indice)
    {
        if(indice == 'izq'){
            if(_this.click == 0){
                _this.click = 0;
            }
            else{
                --_this.click;
            }
        }
        else if(indice == 'drch'){
             if(_this.click == _this.link.length-3){
                 _this.click = _this.link.length-3; // -3 por las 2 img de las flechas
             }
             else{
                 ++_this.click;
             }
        }
        else{
            _this.click = indice;
        }
        for(var i = 0; i < _this.link.length; i++){
            var cambio = _this.link[i].href.substr(_this.link[i].href.lastIndexOf('#')+1);
            if(cambio != 'izq' && cambio != 'drch'){
                if(_this.click == cambio){
                    _this.link[i].style.backgroundColor = backgroundIn;
                }
                else{
                    _this.link[i].style.backgroundColor = backgroundOut;
                }
            }
        }
        return -(_this.click * 720);
    }
    this.moverSlide = function()
    {
        _this.time_out = setTimeout(function(){
            if(!_this.nextStep()){
                clearTimeout(_this.time_out);
                _this.rellamada(1);
                return;
            }
            _this.rellamada(_this.nextStep());
            _this.moverSlide();
        },13)
    }
    this.init = function(){_this.anyadirEvento(window,"load",_this.load)}
    this.load = function()
    {
        _this.eliminarEvento(this);
        _this.crearBotonera(_this.cargarVariable());
        for(var i = 0; i < _this.link.length; i++){
            _this.anyadirEvento(_this.link[i], "click", _this.eliminarEvento);
            _this.link[i].onclick = function(){
                _this.eliminarEvento(this);
                clearTimeout(_this.time_out);
                _this.pos_actual = _this.slide_cont.offsetLeft;
                _this.indice = this.href.substr(this.href.lastIndexOf('#')+1);
                _this.pos_alcanzar = _this.posicionAlcanzar(_this.indice);
                _this.start = new Date().getTime();
                _this.moverSlide();
            }
        }
    }
    this.rellamada = function(p)
    {
        var mov_slide = _this.pos_actual + ((_this.pos_alcanzar - _this.pos_actual)*p);
        _this.slide_cont.style.left = mov_slide +'px';
    }
    this.nextStep = function()
    {
        var now = new Date().getTime();
        if((now - _this.start)>1000){
            return false;
        }
        return _this.easing((now - _this.start+.001)/1000);
    }
    this.easing = function(p)
    {
        return (Math.pow((p-1), 3) +1);
    }
    this.cargarVariable = function()
    {
        var slide = document.getElementById(box_id).getElementsByTagName('div');
        for(var i = 0; i < slide.length; i++){
            if(slide[i].className == 'slide_cont'){
                _this.slide_cont = slide[i];
            }
            if(slide[i].className == 'botonera'){
                var botonera = slide[i];
                break;
            }
        }
        var image = document.getElementById(box_id).getElementsByTagName('img');
        _this.slide_cont.style.width = image.length * 720 + 'px';
        botonera.num_img = image.length;
        return botonera;
    }
    this.crearBotonera = function(botonera)
    {
        var anchura = 0;
        for(var i = 0; i < botonera.num_img; i++){
            if(i == 0){
                var img_boton = document.createElement('a');
                img_boton.className = 'img_boton';
                img_boton.setAttribute('style', 'margin-right:5px');
                img_boton.style.backgroundImage = 'url(images/cursor/izqda'+ img +'_off.png)';
                img_boton.onmouseover = function(){this.style.backgroundImage = 'url(images/cursor/izqda'+ img +'_on.png)';}
		img_boton.onmouseout = function(){this.style.backgroundImage = 'url(images/cursor/izqda'+ img +'_off.png)';}
                botonera.appendChild(img_boton);
                img_boton.href = '#izq';
                anchura += img_boton.offsetWidth + 5;
                _this.link.push(img_boton);
            }
            var boton = document.createElement('a');
            boton.className = 'sip_boton';
            if(i == 0) boton.style.backgroundColor = backgroundIn;
            else boton.style.backgroundColor = backgroundOut;
            botonera.appendChild(boton);
            boton.href = '#' + i;
            anchura += boton.offsetWidth + 10;
            _this.link.push(boton);
            if(i == botonera.num_img - 1){
                var img_boton = document.createElement('a');
                img_boton.className = 'img_boton';
                img_boton.setAttribute('style', 'margin-left:5px');
                img_boton.style.backgroundImage = 'url(images/cursor/drch'+ img +'_off.png)';
                img_boton.onmouseover = function(){this.style.backgroundImage = 'url(images/cursor/drch'+ img +'_on.png)';}
		img_boton.onmouseout = function(){this.style.backgroundImage = 'url(images/cursor/drch'+ img +'_off.png)';}
                botonera.appendChild(img_boton);
                img_boton.href = '#drch';
                anchura += img_boton.offsetWidth + 5;
                _this.link.push(img_boton);
                break;
            }
        }
        botonera.style.width = anchura + 'px';
    }
}
var slide = new slideHorizontal('logotipos', '#a6004e', '#e53f8d', 0);
slide.init();
slide = null;
slide = new slideHorizontal('rotulacion', '#be9400', '#fdd33f', 1);
slide.init();
slide = null;
slide = new slideHorizontal('maquetacion', '#686a11', '#a7a950', 2);
slide.init();
slide = null;
slide = new slideHorizontal('varietees', '#501044', '#8f4f83', 3);
slide.init();
slide = null;
slide = new slideHorizontal('studio', '#0062a0', '#3cb4ff', 4);
slide.init();