var imagenes = 0;
var ancho_imagen = 0;
var id_div_contiene = "";
var div_contiene;
var ArrayTren = new Array();
var amover;
var velocidad;
var cambio_velocidad;
var lapso_mueve = 5;
var enEscena;
var indice;
var left_inicial;
var moviendose = new Boolean();
var indice_elemento=0;
function crea_carrusel(_imagenes, _ancho_imagen, _div_contiene) {
    imagenes = _imagenes;
    ancho_imagen = _ancho_imagen;
    id_div_contiene = _div_contiene;
    div_contiene = document.getElementById(id_div_contiene);
    // div_contiene.style.width = 700 + "px";
    //left_inicial = div_contiene.offsetLeft;
    left_inicial = 0;
    crea_tren("left", left_inicial);
    cambio_velocidad = setInterval(cambia, 10000);
    moviendose = false;
 
    
}

function crea_tren(flota, lugar) {
    var Ar = document.createElement("div");
    Ar.setAttribute("class", "div_tren");

    Ar.style.float = flota;
    Ar.style.left = lugar + "px";
    Ar.style.width = 700 + "px";
    for (a = 1; a <= 6; a++) {
        dibuja_imagen(Ar, indice_elemento);
        indice_elemento++;
        if (indice_elemento >= Cimagenes.length) {
            indice_elemento = 0;
        }
    }
    if (lugar >= left_inicial)
    { ArrayTren.push(Ar); }
    else {
        var arr2 = new Array();
        arr2.push(Ar);
        for (a = 0; a < ArrayTren.length; a++) {
            arr2[a + 1] = ArrayTren[a];

        }
        ArrayTren = arr2;
    }
    if(div_contiene != null)
    {
        div_contiene.appendChild(Ar);

    }
}

function dibuja_imagen(donde, _imagen) {
    var Imagen_sola = document.createElement("div");
    var imagen = document.createElement("img");
    if (imagen.addEventListener) {
        //   imagen.addEventListener("onMouseOver", function() { clearInterval(cambio_velocidad); return true; });
        imagen.addEventListener("mouseover", function() { hover() }, false);
        imagen.addEventListener("mouseout", function() { hout() }, false);
        imagen.addEventListener("click", function() { "javascript: __doPostBack('POSTBACK_JAVA', '" + imagen.src + "');" }, false);

    } else {
    imagen.attachEvent("onmouseover", function() { hover() });
    imagen.attachEvent("onmouseout", function() { hout() });
   // imagen.attachEvent("onclick", function() { "javascript:__doPostBack('POSTBACK_JAVA', '" + imagen.src + "')" });
    imagen.attachEvent("onclick", function() {navega(imagen) }); 
        }


        imagen.setAttribute("src", Cimagenes[_imagen]);
        imagen.setAttribute("width", "75px");
        imagen.setAttribute("heigth", "75px");
    Imagen_sola.setAttribute("class", "div_Imagen");
    Imagen_sola.appendChild(imagen);

    var div_Precio = document.createElement("div");
    div_Precio.setAttribute("class", "div_Precio");
    var div_titulo = document.createElement("div");
    div_titulo.setAttribute("class", "div_titulo_imagen");
    var Span_titulo = document.createTextNode(Cdescripcion[_imagen]);
    div_titulo.appendChild(Span_titulo);
    //Span_titulo.setAttribute("class", "Elemento");
    var span_precio = document.createTextNode(Cprecios[_imagen]);
    div_Precio.appendChild(span_precio);

    Imagen_sola.appendChild(div_titulo);
    Imagen_sola.appendChild(div_Precio);

    /*Imagen_sola.setAttribute("width", ancho_imagen);*/
    donde.appendChild(Imagen_sola);

}

function desplaza() {
    if (moviendose == false) {
        clearInterval(velocidad);
        for (a = 0; a < ArrayTren.length; a++) {
            if (Number(ArrayTren[a].style.left.replace("px", "")) == left_inicial) {
                enEscena = ArrayTren[a];
                indice = a;
                break;
            }

        }
        if (indice == ArrayTren.length - 1) {
            crea_tren("left", 700 + left_inicial);
        }
        velocidad = setInterval(mover_atras, lapso_mueve);
    }
    /* div_contiene.style.width = (Number(div_contiene.style.width.replace("px", "")) + 700) + "px";*/
    //    for (a = 1; a <= 6; a++) {
    //        dibuja_imagen(div_contiene, "images/" + a + ".jpg");
    //    }
    //  amover = ArrayTren[ArrayTren.length - 1];

}
function desplaza_adelante() {
    if (moviendose == false) {
        clearInterval(velocidad);
        for (a = 0; a < ArrayTren.length; a++) {
            if (Number(ArrayTren[a].style.left.replace("px", "")) == left_inicial) {
                enEscena = ArrayTren[a];
                indice = a;
                break;
            }

        }
        if (indice < 2) {
            crea_tren("left", -700 + left_inicial);
        }
        velocidad = setInterval(mover_adelante, lapso_mueve);
    }
    // amover = ArrayTren[ArrayTren.length - 1];


}

function mover_adelante() {
    //var mueve = ArrayTren.pop();
    hover();
    moviendose = true;
    for (a = 0; a < ArrayTren.length; a++) {

        ArrayTren[a].style.left = (Number(ArrayTren[a].style.left.replace("px", "")) + 20) + "px";

    }
    revisa_stop()
}

function mover_atras() {
    hover();
    moviendose = true;
    for (a = 0; a < ArrayTren.length; a++) {
        ArrayTren[a].style.left = (Number(ArrayTren[a].style.left.replace("px", "")) - 20) + "px";
    }
    revisa_stop()
}

function revisa_stop() {

    if (Number(enEscena.style.left.replace("px", "") - left_inicial) >= Number(enEscena.style.width.replace("px", "")) || Number(enEscena.style.left.replace("px", "") - left_inicial) <= -Number(enEscena.style.width.replace("px", ""))) {
        clearInterval(velocidad);
        hout();
        moviendose = false;
        /*****
        ArrayTren = new Array();
        ArrayTren.push(enEscena);****/
    }


}

function hover() {

    //alert("hover");
    clearInterval(cambio_velocidad);
}

function hout() {
    //alert("out");
    cambio_velocidad = setInterval(cambia, 10000);
}

function cambia() {

    desplaza();

}

function navega(a) {
    __doPostBack('POSTBACK_JAVA', a.src)

}