// Cuantos milisegundos entre foto y foto
var tiempoDeGloria = 5000;
//// Referencia al Rotador
var _photoRotator = null;

// Fotos Precargadas
var _fotosPreCargadas = 0;
// Reloj de precarga
var _relojPreCarga = null;

/* IE es peor. */
var IE;
if (navigator == null) IE = true;
else if (navigator.appName.match("Microsoft") != null) IE = true;
else IE = false;

// El Template
var _template = "<div id=\"outter_div\">\
<div id=\"photoDiv\" >\
<center><img id=\"fotoActual\" src=\"--IMAGEN--\" style=\"z-index:1; width:206px; height:154px;\"></center>\
</div>\
<span id=\"ultimo_title\">ULTIMOS PROYECTOS</span><br>\
<div id=\"rotator_list\">\
<table >\
<tr  ><td class=\"rotator_image_cell\">--T0--</td><td  class=\"rotator_text_cell\">--TI0--</td></tr>\
<tr  ><td class=\"rotator_image_cell\">--T1--</td><td  class=\"rotator_text_cell\" >--TI1--</td></tr>\
<tr  ><td class=\"rotator_image_cell\">--T2--</td><td  class=\"rotator_text_cell\" >--TI2--</td></tr>\
<tr  ><td class=\"rotator_image_cell\">--T3--</td><td  class=\"rotator_text_cell\" >--TI3--</td></tr>\
<tr  ><td class=\"rotator_image_cell\">--T4--</td><td  class=\"rotator_text_cell\" >--TI4--</td></tr>\
</table>\
</div>\
<div id=\"textDiv\" onClick=\"top.location='--LINK--'\">\
<span id=\"rotator_title\">--TITULO--</span><br>\
<span id=\"rotator_desc\">--TEXTO--</span>\
</div>\
</div>";

/* Funciones para obtener la posicion de algun elemento */
function getY( oElement ) {
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetTop;
oElement = oElement.offsetParent;
}
return iReturnValue;
}
function getX( oElement ) {
var iReturnValue = 0;
while( oElement != null ) {
iReturnValue += oElement.offsetLeft;
oElement = oElement.offsetParent;
}
return iReturnValue;
}

/* Objeto de photo */
function PhotoDiv() {
    return {
        titulo:'',
        contenido:'',
        imagen:'',
        thumbnail:'',
        link:''
    };
}

/* Objeto principal: PhotoRotator */
function PhotoRotator(maxPhotos) {
    return {
        /* los relojes de mis animaciones */
        relojRotador:null,
        relojFadeInOut:null,
        /* imagen Actual */
        imagenActual:null,
        /* imagen anterior */
        imagenAnterior:null,
        /* opacidad imagen anterior */
        opacidadImagenAnterior:1.0,
        /* el Div que me contiene */
        papa:null,
        /* Cantidad de fotos */
        cantidad:0,
        /* foto actual */
        cual:0,
        /* Arreglo contenedor de las fotos */
        fotos:[null,null,null,null,null],
        /* Funcion para agregar */
        agregaFoto:function (imagen, thumbnail, titulo, contenido, link) {
            this.fotos[this.cantidad] = new PhotoDiv();
            this.fotos[this.cantidad].titulo = titulo;
            this.fotos[this.cantidad].contenido = contenido;
            this.fotos[this.cantidad].imagen = imagen;
            this.fotos[this.cantidad].link = link;
            this.fotos[this.cantidad].thumbnail = thumbnail;
            this.cantidad++;
        },
        setActual:function (cual) {
            if (this.imagenAnterior != null)
                this.imagenAnterior.src = this.fotos[this.cual].imagen;

            this.cual = cual;
            var body = new String(_template);
            body = body.replace("--IMAGEN--", this.fotos[cual].imagen);
            body = body.replace("--TITULO--", unescape(this.fotos[cual].titulo));
            body = body.replace("--TEXTO--", unescape(this.fotos[cual].contenido));
            body = body.replace("--LINK--", this.fotos[cual].link);
            var alpha, i;
            for (i = 0; i < this.cantidad; i++) {
                alpha = (i == cual)?99:5;
                body = body.replace("--T" + i.toString() + "--",
                "<a href=\"javascript:_photoRotator.setActual(" + i.toString() +
                ")\"><img style=\"border:" + (i == cual?"solid 1px #ffffff;":"none;") + "filter:alpha(opacity=" +
                alpha.toString() + "0); opacity:." +
                alpha.toString() + ";\" width=\"62\" height=\"55\" src=\"" +
                //alpha.toString() + ";\" width=\"58\" height=\"45\" src=\"" +
                this.fotos[i].thumbnail +
                "\"></a> \n" );
                 body = body.replace("--TI" + i.toString() + "--",
                "<a style=\"text-decoration:none; color:" + (i == cual?"white\"":"black\"")+" href=\"javascript:_photoRotator.setActual(" + i.toString() +
                ")\">" +unescape(this.fotos[i].titulo) +
                "</a> \n" );
            }
            this.myDiv.innerHTML = body;
            this.empiezaReloj();
        },
        /* El que hace el gui */
        dibujaDivs:function () {
            //alert(this.setActual);
            this.myDiv = document.createElement('div');
            this.myDiv.id = 'divPhotoRotator';
            this.setActual(this.cantidad - 1);
            if (this.papa != null) {
                this.papa.innerHTML = '';
                this.papa.appendChild(this.myDiv);

                this.imagenActual = document.getElementById('fotoActual');
                this.imagenAnterior = this.imagenActual.cloneNode(false);
                this.imagenAnterior.id = 'imagenAnterior';
                this.papa.appendChild(this.imagenAnterior);
                this.imagenAnterior.style.position = "absolute";
                this.imagenAnterior.style.left = (getX(this.imagenActual) + 1).toString() + "px";
                this.imagenAnterior.style.top = (getY(this.imagenActual) + 1).toString() + "px";
                this.imagenAnterior.style.zIndex = 19;
                Element.setOpacity(this.imagenAnterior, 1);
                this.ruedaPelota();
            }
        },
        /* empieza la funcion!!! */
        empieza:function(papa) {
          _photoRotator = this;

          this.papa = document.getElementById(papa);
          var img = Array(this.cantidad);
          var i;

          if (IE) {
              this.dibujaDivs();
              return;
          }

          _fotosPreCargadas = 0;
          for (i = 0; i < this.cantidad; i++) {
            img[i] = document.createElement("img");
            img[i].src = this.fotos[i].imagen;
            img[i].height = 0;
            img[i].width = 0;
            img[i].setAttribute("style", "visibility:invisible;width:0;height:0;display:none");
            img[i].setAttribute("onLoad", "_photoRotator.preCargador(this)");
            img[i].setAttribute("onError", "_photoRotator.preCargador(this)");
            img[i].id = "precargador" + i.toString();
            this.papa.appendChild(img[i]);
          }
        },
        /* funcion que incrementa _fotosPreCargadas y cuando esten todas
         * empieza el despliegue */
        preCargador:function(img) {
            this.papa.removeChild(img);
            _fotosPreCargadas++;
            if (_relojPreCarga != null)
                window.clearInterval(_relojPreCarga);
            _relojPreCarga = setInterval('_photoRotator.verificaPreCarga()', 10);
        },
        verificaPreCarga:function () {
            if (_fotosPreCargadas >= this.cantidad) {
                if (_relojPreCarga != null)
                    window.clearInterval(_relojPreCarga);
                this.dibujaDivs();
            }
        },
        /* Funcion que lo pone a rotar */
        ruedaPelota:function () {
            var a = ((this.cual + 1 >= this.cantidad)?0:this.cual + 1);
            this.setActual(a);
            this.empiezaReloj();
            return true;
        },
        disuelveAnterior:function () {
            if (this.opacidadImagenAnterior >= 0) {
                Element.setOpacity(this.imagenAnterior, this.opacidadImagenAnterior);
                Element.setOpacity(this.imagenActual, 1 - this.opacidadImagenAnterior);
                this.opacidadImagenAnterior -= .1;
            } else {
                window.clearInterval(this.relojFadeInOut);
            }
        },
        empiezaReloj:function() {
            if (this.relojRotador != null)
                window.clearTimeout(this.relojRotador);
            if (this.relojFadeInOut != null)
                window.clearInterval(this.relojFadeInOut);

            this.opacidadImagenAnterior = 1;
            if (this.imagenAnterior != null) Element.setOpacity(this.imagenAnterior, 1);
            if (this.imagenActual != null) Element.setOpacity(this.imagenActual, 0);
            this.relojFadeInOut = window.setInterval("_photoRotator.disuelveAnterior()", 50);
            this.relojRotador = window.setTimeout("_photoRotator.ruedaPelota()", tiempoDeGloria);
        }
    };
}