var LoadingBar = Class.create({


    initialize: function (Images, Text, Frequency, ChangeText, callBackFunction)
    {
        // Ruta de las imagenes que se van a cargar
        this.aImages = Images;
        // Leyenda que aparecerá en la capa leyenda
        this.szText=Text;
        // Frecuencia de actualización de la barra de progreso en milisegundos
        this.iFrequency=Frequency;
        // Cada cuantas actualizaciones de la barra de progreso se desea que cambie la leyenda
        this.iChangeText = ChangeText;
        // Callback a la funcion a lanzar despues de la carga este completada.
        this.callBack = callBackFunction;


        divCompletado=document.getElementById("CompleteBar");
        divPorcentaje=document.getElementById("PercentageBar");
        divLeyenda=document.getElementById("leyenda");

        // Variable para monitorear la cantidad de veces que se ejecuta calcularProgreso(). Se utiliza para cambiar la leyenda
        this.iLoopsCalculateProcess=0;
        // Esta variable será la responsable de colocar puntos suspensivos en movimiento detrás de la leyenda declarada previamente
        this.PresentText=this.szText;
        // Cantidad de puntos suspensivos que debo colocar detrás de la leyenda. Esta variable se irá incrementando hasta llegar a 3. Luego se pondrá en 0 nuevamente
        this.puntitos=0;

        // Llamo a calcularProgreso para colocar la barra, leyenda y porcentaje en su estados correspondientes
        this.calculateProcess();
    },

    calculateProcess: function()
    {
        // Variable que reflejará el porcentaje actual de carga
        var currentRate=0;
        var i=0;
        // Variable para contar la cantidad de imágenes completamente cargadas del total
        var ImagesCompleted=0;
        // Incremento la cantidad de ejecuciones de esta función
        this.iLoopsCalculateProcess++;
        if(this.iLoopsCalculateProcess==this.iChangeText)
        {
            // Si en la última actualización se colocaron 3 puntos suspensivos, ahora no se colocará ninguno
            /*if(puntitos==3) puntitos=0;
            else puntitos++;*/
            this.PresentText=leyenda;
            this.iLoopsCalculateProcess=0;
            // Con este while coloco los puntos suspensivos detrás de la leyenda. Se colocarán tantos puntos como diga la variable puntitos
            /*while(i<puntitos)
            {
                    this.PresentText+=".";
                    i++;
            }*/
        }

        // En este for recorro el array de los elementos img y pregunto cuales de ellos han terminado de cargarse
        for(i=0; i<this.aImages.length; i++)
        {            
            // Por cada imágen cargada incremento la variable ImagesCompleted
	    try
            {
                if(this.aImages[i].complete)
                    ImagesCompleted++;
            }
            catch(err)
            {
                this.aImages = this.aImages.without(this.aImages[i]);
                continue;
            }
        }

        //alert(currentRate);
        // Calculo el porcentaje actual de carga con una regla de 3 en base a la cantidad de imágenes totales y las ya cargadas y rendondeo sin decimales
        currentRate=Math.ceil(ImagesCompleted*100/this.aImages.length);
        // Reflejo los cambios en las capas que corresponda
        divLeyenda.innerHTML=this.PresentText;
        divPorcentaje.innerHTML=currentRate+"%";
        divCompletado.style.width=currentRate+"%";
        // Si el porcentaje de carga es distinto 100 vuelvo a llamar a esta misma función con setTimeout
        if(currentRate==100)
            this.finishLoading();
        else
        {
            //setTimeout("calcularProgreso()", frecuencia);
            thisObj = this; // Solución para poder usar la función setTimeout con clases.
            //window.setTimeout(function() {thisObj.calculateProcess()}, thisObj.iFrequency);
            window.setTimeout( this.calculateProcess.bind(this), this.iFrequency);
        }
    },

    finishLoading: function()
    {
        // Acciones a realizar cuando se finalizó la carga de todas las imágenes
        divLeyenda.innerHTML="MIT Ribadavia";
        this.callBack.apply();
    }
    
});