﻿/*
2008
Jaime Espinosa jespinosa@constructorasoftware.com
http://www.constructorasoftware.com
*/
function reinicializa() {
    
    this.debug("paintFrame");
    this.paintFrame();
    this.debug("paintFrame ok");
}

function AppCarrusel(oContenedor, oDebug,
                     strParametroArchivoImagenes, strParametroURLBoronDerecha,
                     strParametroURLBotonIzquierda, strParametroURLBackground,
                     blnMostrarBorde, avanza, retrocede, avanzaUno, retrocedeUno,
                     PosicionXItem, PosicionYItem, AnchoItem, AltoItem, 
                     intNumeroPosiciones, blnDibujaBotones) {

    this.divContenedor = oContenedor;

    this.divDebug = oDebug;

    
    // METODOS DEL DIBUJO
    this.debug = debug;
    this.creaDivisiones = creaDivisiones;
    this.inicializaInfo = inicializaInfo;
    this.inicializa = inicializa;
    this.paintFrame = paintFrame;
    this.reinicializa = reinicializa;

    this.PosicionXItem = PosicionXItem;
    this.PosicionYItem = PosicionYItem;
    this.AnchoItem = AnchoItem;
    this.AltoItem = AltoItem;

    this.inicializaPosiciones = inicializaPosiciones;
    this.abrirArchivo = abrirArchivo; // abre la url y obtiene los parametros

    this.avanza = avanza;
    this.retrocede = retrocede;
    this.avanzaUno = avanzaUno;
    this.retrocedeUno = retrocedeUno;
    this.refresca = refresca;

    // PARAMETROS DEL CARRUSEL
    this.blnMostrarBorde = blnMostrarBorde;
    this.blnMostrarCerrar = false;
    this.blnMostrarBotones = true;
    this.tipo = "";
    this.ImagenFondoFoto = "/images/fondoFotoBebe1.gif";
    this.ImagenFondoTransparente = "/images/transparenteInvita.gif";
    
    

    this.strParametroArchivoImagenes = strParametroArchivoImagenes;
    this.strParametroURLBoronDerecha = strParametroURLBoronDerecha;
    this.strParametroURLBotonIzquierda = strParametroURLBotonIzquierda;
    this.strParametroURLBackground = strParametroURLBackground;

    strAlto = new String(this.divContenedor.style.height);
    strAncho = new String(this.divContenedor.style.width);

    this.intAltoControl = strAlto.replace('px', "") - 30;
    this.intAnchoControl = strAncho.replace('px', "");

    this.Intervalo = 1;
    this.intNumeroIteraciones = 5;
    this.intIteracionActual = 0;
    this.intPosicionActual = 0;
    this.intNumeroPosiciones = intNumeroPosiciones;
    this.intNumeroElementos = 0;
    this.blnDibujaBotones = true;

    if (blnDibujaBotones != null)
        this.blnDibujaBotones = false;

    this.intPosicionActual = 0; // cero es la primera imagen a la izquierda

    this.Items = new Array();
    this.Posiciones = new Array();
    this.Divs = new Array();
    this.Imagenes = new Array();
    this.ImagenesI = new Array();
    this.DivsInvertidas = new Array();
    this.ImagenesFondo = new Array();
    this.vinculos = new Array();
    

    this.debug("inicializando origenes de datos");
    this.inicializaInfo(); // tambien inicializa items
    this.debug("inicializado origenes de datos ok");

    this.divContenedor.style.overflow = "hidden";
    
    //this.divContenedor.style.backgroundImage = "url(" + this.strParametroURLBackground + ")";
    this.debug(this.divContenedor.style.backgroundImage);
    this.divContenedor.style.backgroundRepeat = "no-repeat";

    this.debug("inicializando posiciones");
    this.inicializaPosiciones();
    this.debug("inicializado posiciones ok");

    this.debug("creaDivisiones");
    this.creaDivisiones();
    this.debug("creaDivisiones ok");

    this.debug("paintFrame");
    this.paintFrame();
    this.debug("paintFrame ok");
}


function refresca(intIndice) {

    /********************************************************************************
    * AJUSTA LAS POSICIONES DE LAS DIVISIONES
    *********************************************************************************/

    if (this.Posiciones[intIndice].dblAnchoControl < 0) {
        this.Divs[intIndice].style.width = "0px";
        this.DivsInvertidas[intIndice].style.width = "0px";
    }
    else {
        this.Divs[intIndice].style.width = this.Posiciones[i].dblAnchoControl + "px";
        this.DivsInvertidas[intIndice].style.width = this.Posiciones[i].dblAnchoControl + "px";
    }

    if (this.Posiciones[intIndice].dblAltoControl < 0) {
        this.Divs[intIndice].style.height = "0px";
        this.DivsInvertidas[intIndice].style.height = "0px";
    }
    else {
        this.Divs[intIndice].style.height = this.Posiciones[intIndice].dblAltoControl + "px";
        this.DivsInvertidas[intIndice].style.height = this.Posiciones[intIndice].dblAltoControl + "px";
    }

    this.Divs[i].style.top = this.Posiciones[intIndice].dblPosY + "px";
    this.Divs[i].style.left = this.Posiciones[intIndice].dblPosX + "px";

    this.DivsInvertidas[i].style.top = (this.Posiciones[intIndice].dblAltoControl + this.Posiciones[intIndice].dblPosY + 2) + "px";
    this.DivsInvertidas[intIndice].style.left = this.Posiciones[intIndice].dblPosX + "px";

    /********************************************************************************
    * AJUSTA LAS POSICIONES DE LAS IMAGENES
    *********************************************************************************/
    
    // ANCHO
    if (this.Posiciones[intIndice].dblAnchoControl < 0) {
        this.Imagenes[intIndice].style.width = "0px";
        this.ImagenesI[intIndice].style.width = "0px";
    }
    else {
        if (this.blnMostrarBorde) {
            this.Imagenes[intIndice].style.width = ((this.Posiciones[intIndice].dblAnchoControl * 13) / 15) + "px";
            this.ImagenesI[intIndice].style.width = ((this.Posiciones[intIndice].dblAnchoControl * 13) / 15) + "px";
        }
        else {
            this.Imagenes[intIndice].style.width = this.Posiciones[intIndice].dblAnchoControl + "px";
            this.ImagenesI[intIndice].style.width = this.Posiciones[intIndice].dblAnchoControl + "px";
        }
    }

    // LEFT
    if (this.blnMostrarBorde)
        this.ImagenesI[intIndice].style.left = (this.Posiciones[intIndice].dblAnchoControl / 15) + "px";
    else
        this.ImagenesI[intIndice].style.left = "0px";

    // ALTO
    if (this.Posiciones[intIndice].dblAltoControl < 0) {
        this.Imagenes[intIndice].style.height = "0px";
        this.ImagenesI[intIndice].style.height = "0px";
    }
    else {
        if (this.blnMostrarBorde) {
            this.Imagenes[intIndice].style.height = ((this.Posiciones[intIndice].dblAltoControl * 13) / 15) + "px";
            this.ImagenesI[intIndice].style.height = (this.Posiciones[intIndice].dblAltoControl / 4) + "px";
        }
        else {
            this.Imagenes[intIndice].style.height = this.Posiciones[intIndice].dblAltoControl + "px";
            this.ImagenesI[intIndice].style.height = (this.Posiciones[intIndice].dblAltoControl / 4) + "px";
        }
    }

    // TARGET
    if (this.Posiciones[intIndice].Item != null) {
        this.Imagenes[intIndice].setAttribute('src', this.Posiciones[intIndice].Item.mImagen + "&Escala=0&FondoFoto=1");
        this.ImagenesI[intIndice].setAttribute('src', this.Posiciones[intIndice].Item.mImagen + "&Inversa=0");
        this.vinculos[intIndice].setAttribute('href', this.Posiciones[intIndice].Item.url);
    }
}
function paintFrame() {
    if (this.tipo != "Interno") {
        this.Divs[0].style.zIndex = 1;
        this.Divs[1].style.zIndex = 2;
        this.Divs[2].style.zIndex = 1;
    }
    else {
        this.Divs[0].style.zIndex = 1;
        this.Divs[1].style.zIndex = 2;
        this.Divs[2].style.zIndex = 3;
        this.Divs[3].style.zIndex = 2;
        this.Divs[4].style.zIndex = 1;
    }

    if (this.blnDibujaBotones) {
        // DIBUJA LOS BOTONES
        var btnIzquierda = document.createElement('input');
        btnIzquierda.setAttribute('id', 'btnIzquierda');
        btnIzquierda.setAttribute('type', 'image');
        btnIzquierda.setAttribute('src', this.strParametroURLBotonIzquierda);
        btnIzquierda.onclick = this.retrocedeUno;
//        btnIzquierda.style.width = (0.08 * this.intAnchoControl) + "px";
//        btnIzquierda.style.height = (0.08 * this.intAnchoControl) + "px";
        btnIzquierda.style.top = (0.85 * this.intAltoControl) + "px";
        btnIzquierda.style.left = (0.02 * this.intAnchoControl) + "px";
        btnIzquierda.style.position = 'absolute';
        btnIzquierda.style.zIndex = "8";

        this.intAltoControl = strAlto.replace('px', "");
        this.intAnchoControl

        this.divContenedor.appendChild(btnIzquierda);

        var btnDerecha = document.createElement('input');
        btnDerecha.setAttribute('id', 'btnDerecha');
        btnDerecha.setAttribute('type', 'image');
        btnDerecha.onclick = this.avanzaUno;
        btnDerecha.setAttribute('src', this.strParametroURLBoronDerecha);
//        btnDerecha.style.width = (0.08 * this.intAnchoControl) + "px";
//        btnDerecha.style.height = (0.08 * this.intAnchoControl) + "px";
        btnDerecha.style.top = (0.80 * this.intAltoControl) + "px";
        btnDerecha.style.left = (this.intAnchoControl - (0.02 * this.intAnchoControl) - (0.08 * this.intAnchoControl)) + "px";
        btnDerecha.style.position = 'absolute';
        btnDerecha.style.zIndex = "8";
        
        this.divContenedor.appendChild(btnDerecha);
    }
    
}
function inicializaInfo() {

    if (this.strParametroArchivoImagenes == null) {
        //this.strParametroArchivoImagenes= "http://localhost/alpinaBaby/xmlFondoPantalla.aspx";
        //this.strParametroArchivoImagenes = "http://localhost/alpina/xmlMibebe.aspx";
        //this.strParametroArchivoImagenes = "origenDatos.txt";
    }
    this.debug("Archivo =" + this.strParametroArchivoImagenes);

    if (this.strParametroURLBoronDerecha == null) {
        this.strParametroURLBoronDerecha = "http://190.146.13.216/images/botonFondosIzquierda.gif";
        this.debug(this.strParametroURLBoronDerecha);
    }

    if (this.strParametroURLBotonIzquierda == null) {
        this.strParametroURLBotonIzquierda = "http://190.146.13.216/images/botonFondosDerecha.gif";
        this.debug(this.strParametroURLBotonIzquierda);
    }

    //    if (this.strParametroURLBackground == null) {
    //        this.strParametroURLBackground = "http://localhost/alpinaBaby/App_Themes/Alpina/img/fondoNombrecitos.gif";
    //        this.debug(this.strParametroURLBackground);
    //    }

    this.abrirArchivo();

    this.intNumeroItems = this.intNumeroPosiciones;
    
}
function abrirArchivo() {
    intContador = 0;

    var xml = new XMLHttpRequest();
    xml.open("GET", this.strParametroArchivoImagenes, false);
    xml.send(null);

    strCadena = new String(xml.responseText);
    strElementos = new Array();
    strElementos = strCadena.split("#");

    this.intNumeroElementos = strElementos.length - 1;

    if (this.intNumeroElementos < this.intNumeroPosiciones)
        this.intNumeroElementos = this.intNumeroPosiciones;
        
    for (i = 0; i < this.intNumeroElementos; i++) {
        strCadenaElemento = new String(strElementos[i]);
        strCadenas = new Array();
        strCadenas = strCadenaElemento.split("$");

        this.Items[i] = new CItem();
        this.Items[i].mblnTieneEliminar = this.blnMostrarCerrar;
        this.Items[i].mblnTieneBorde = this.blnMostrarBorde;
        this.Items[i].codigo = strCadenas[0]; // codigo de la imagen
        this.Items[i].url = strCadenas[1]; // url de la imagen
        if(strCadenas[2] != undefined)
            this.Items[i].mImagen = strCadenas[2]; // url de la imagen
        else
            this.Items[i].mImagen = ""; // url de la imagen
            
        this.Items[i].mImagenAlfa = strCadenas[3];

        intContador++;
    }
    
    this.debug(this.intNumeroElementos);
}
function debug(strCadena) {
    if (this.divDebug != null)
        this.divDebug.innerHTML += strCadena + "<br />";
}

function creaDivisiones() {

    // CREA LAS DIVISIONES DE LAS POSICIONES
    for (i = 0; i < this.intNumeroElementos; i++) {

        /***************************************************************************
        * DIV IMAGEN PPAL
        ***************************************************************************/
        var newdiv = document.createElement('div');
        var divIdName = "'div" + i + "'";
        newdiv.setAttribute('id', divIdName);
        //newdiv.style.border = 'solid 1px red';
        newdiv.style.width = this.Posiciones[i].dblAnchoControl + "px";
        newdiv.style.height = this.Posiciones[i].dblAltoControl + "px";
        newdiv.style.top = this.Posiciones[i].dblPosY + "px";
        newdiv.style.left = this.Posiciones[i].dblPosX + "px";
        newdiv.style.position = 'absolute';

        this.divContenedor.appendChild(newdiv);
        this.Divs[i] = newdiv;

        /***************************************************************************
        * DIV IMAGEN INVERTIDA
        ***************************************************************************/
        var newdivInvertida = document.createElement('div');
        newdivInvertida.setAttribute('id', 'divI' + i);
        //newdiv.style.border = 'solid 1px red';
        newdivInvertida.style.width = this.Posiciones[i].dblAnchoControl + "px";
        newdivInvertida.style.height = this.Posiciones[i].dblAltoControl + "px";
        newdivInvertida.style.top = (this.Posiciones[i].dblAltoControl + this.Posiciones[i].dblPosY + 2) + "px";
        newdivInvertida.style.left = this.Posiciones[i].dblPosX + "px";
        newdivInvertida.style.position = 'absolute';

        this.divContenedor.appendChild(newdivInvertida);
        this.DivsInvertidas[i] = newdivInvertida;

//        if (this.blnMostrarBorde)
//            newdiv.style.border = "solid 1px red";

        if (this.blnMostrarBorde) {
            /***************************************************************************
            * IMAGEN FONDO FOTO
            ***************************************************************************/
            var newImageFondoFoto = document.createElement('img');
            var buttonIdFondo = "'imagenFondo" + i + "'";
            newImageFondoFoto.setAttribute('id', buttonIdFondo);

            newImageFondoFoto.style.position = 'absolute';

            newImageFondoFoto.style.width = this.Posiciones[i].dblAnchoControl + "px";
            newImageFondoFoto.style.height = this.Posiciones[i].dblAltoControl + "px";
            newImageFondoFoto.style.top = "0px";
            newImageFondoFoto.style.left = "0px";

            newImageFondoFoto.setAttribute('src', this.ImagenFondoFoto);

            if (this.Posiciones[i].Item.mImagen == "") {
                this.Divs[i].style.visibility = "hidden";
            }

            this.ImagenesFondo[i] = newImageFondoFoto;
            this.Divs[i].appendChild(newImageFondoFoto);
        }

        /***************************************************************************
        * IMAGEN FOTO
        ***************************************************************************/
        var newImageButton = document.createElement('img');
        var buttonIdName = "'imagen" + i + "'";
        newImageButton.setAttribute('id', buttonIdName);

        newImageButton.style.position = 'absolute';

        if (this.blnMostrarBorde) {
            newImageButton.style.width = ((this.Posiciones[i].dblAnchoControl * 13) / 15) + "px";
            newImageButton.style.height = ((this.Posiciones[i].dblAltoControl * 13) / 15) + "px";
            newImageButton.style.top = ((this.Posiciones[i].dblAltoControl) / 15) + "px";
            newImageButton.style.left = ((this.Posiciones[i].dblAnchoControl) / 15) + "px";
        }
        else {
            newImageButton.style.width = this.Posiciones[i].dblAnchoControl + "px";
            newImageButton.style.height = this.Posiciones[i].dblAltoControl + "px";
            newImageButton.style.top = "0px";
            newImageButton.style.left = "0px";
        }

        if (this.Posiciones[i].Item.mImagen != "") {
            newImageButton.setAttribute('src', this.Posiciones[i].Item.mImagen + "&Escala=0&FondoFoto=1");
        }
        else {
            newImageButton.setAttribute('src', this.ImagenFondoTransparente);
        }
        this.Imagenes[i] = newImageButton;

        /***************************************************************************
        * VINCULO
        ***************************************************************************/
        var vinculo = document.createElement('a');
        if (this.Posiciones[i].Item != null) {
            vinculo.setAttribute('href', this.Posiciones[i].Item.url);
        }

        this.vinculos[i] = vinculo;
        vinculo.appendChild(newImageButton);
        this.Divs[i].appendChild(vinculo);

        /***************************************************************************
        * IMAGEN FOTO INVERTIDA
        ***************************************************************************/
        var newImageInvertida = document.createElement('img');
        newImageInvertida.setAttribute('id', 'imagenI' + i);
        newImageInvertida.setAttribute('class', 'transparente');
        newImageInvertida.style.height = (this.Posiciones[i].dblAltoControl / 4) + "px";
        newImageInvertida.style.top = "0px";
        newImageInvertida.style.position = 'relative';

        if (this.blnMostrarBorde)
            newImageInvertida.style.width = ((this.Posiciones[i].dblAnchoControl * 13) / 15) + "px";
        else
            newImageInvertida.style.width = this.Posiciones[i].dblAnchoControl + "px";

        if (this.Posiciones[i].Item.mImagen != "") {
            newImageInvertida.setAttribute('src', this.Posiciones[i].Item.mImagen + "&Inversa=0");
            this.debug(this.Posiciones[i].Item.mImagen + "&Inversa=0");
        }
        else {
            newImageInvertida.setAttribute('src', this.ImagenFondoTransparente);
        }

        if (this.blnMostrarBorde)
            newImageInvertida.style.left = (this.Posiciones[i].dblAnchoControl / 15) + "px";
        else
            newImageInvertida.style.left = "0px";

        this.ImagenesI[i] = newImageInvertida;
        this.DivsInvertidas[i].appendChild(newImageInvertida);
    }
}
function inicializaPosiciones() {
    for (i = 0; i < this.intNumeroElementos; i++) {
        dblX = this.PosicionXItem(i);
        dblY = this.PosicionYItem(i);
        dblAncho = this.AnchoItem(i);
        dblAlto = this.AltoItem(i);

        this.Posiciones[i] = new CPosicion(dblX, dblY, dblAncho, dblAlto);
        this.Posiciones[i].Item = this.Items[i];
    }

    for (i = 1; i < this.intNumeroElementos - 1; i++) {
        this.Posiciones[i].PosicionSiguiente = this.Posiciones[i + 1];
        this.Posiciones[i].PosicionAnterior = this.Posiciones[i - 1];
    }

    this.Posiciones[0].PosicionSiguiente = this.Posiciones[1];
    this.Posiciones[0].PosicionAnterior = this.Posiciones[this.intNumeroElementos - 1];

    this.Posiciones[this.intNumeroElementos - 1].PosicionSiguiente = this.Posiciones[0];
    this.Posiciones[this.intNumeroElementos - 1].PosicionAnterior = this.Posiciones[this.intNumeroElementos - 2];

    for (i = 0; i < this.intNumeroElementos; i++) {
        this.Posiciones[i].intNumeroIteraciones = this.intNumeroIteraciones;
        this.Posiciones[i].inicializa();
    }

}