var bar_length = 367; // the bar will be this many pixels long
var bar_height = 30; // the bar will be this many pixels high
var bar_color = "red"; // the progress bar color
var bar_background = "white"; // the color of the empty part of bar
var bar_border = "#EAEAEA";  // the color of the bar border
var window_background = "black"; // the color of the pop-up window
var window_border = "blue"; // the border color of pop-up window
var text_color = "#F00"; // the color of the percentage text (50%)
var display_close_button = 0; // 1 = on; 0 = off

var wait = 5000; // How many milliseconds to wait for other browsers

var more = 0; // Add more to the bar ever second
var doneyet = 0;  // changes to 1 when the DOM is done loading

var timeoutVar = null;
var elapsedTime = 0;
var finishProgressBar = false;

var new_width = 0; // Will become new width of progress bar
var j = 0;  // count how many images are complete
var percent = 0; // Add up the percentage

function setup_bar()
{
    try
    {
        // limpa as variáveis utilizadas pela progress bar
        
	    timeout	= null;
	    elapsedTime = 0;
	    finishProgressBar = false;

	    new_width = 0; // Will become new width of progress bar
	    j = 0;  // count how many images are complete
	    percent = 0; // Add up the percentage
    	
	    // fim da limpeza de variáveis utilizadas pela progress bar

	    // Add 50 to the window_width so that it can have 25px borders
	    window_width = bar_length + 50;
	    // Add 50 to window_height so that is can have 25px borders
	    window_height = bar_height + 50;
    	
	    if (document.all) // if IE
	    {
		    // Internet Explorer makes the bar two pixels too low
		    bar_height2 = bar_height - 2; 
		    // Internet Explorer makes empty_bar 4 pixels too thin
		    bar_width2 = bar_length + 3;
	    }
	    else
	    {
		    bar_height2 = bar_height;
		    bar_width2 = bar_length + 1;
	    }
    	
	    //aqui
	    $("empty_bar").style.width = bar_width2;
	    $("empty_bar").style.height = bar_height;
    	
	    $("bar").style.height = bar_height2;
    	
	    $("percent").style.width = window_width;
    	
	    /*
	    document.write('<div id="bar_window">');

	    if (display_close_button)
	    {
		    document.write('<DIV STYLE="position=absolute;'
			    + 'top: 0'
			    + ';left: 0'
			    + ';width: ' + (window_width - 3)
			    + ';background-color: ' + window_background
			    + ';color: ' + text_color
			    + ';text-align: right'
			    + ';">');
		    document.write('[X]</DIV>');
	    }
    	
	    // Now we create the empty part of the progress bar with its border 
	    document.write('<DIV ID="empty_bar" STYLE="position: absolute;'
		    + 'top: ' + 0 + 'px'
		    + ';left: ' + 0 + 'px'
		    + ';border: 1px solid ' + bar_border
		    + ';background-color: ' + bar_background
		    + ';width: ' + bar_width2
		    + ';height: ' + bar_height
		    + ';">');
	    document.write('</DIV>'); // close DIV for empty_bar
    	
	    // Now we create the part that will display the progress bar. At first it is the width of 0 because percent is 0. 
	    document.write('<div id="bar" STYLE="position: absolute;'
		    + 'top: ' + 1 + 'px'
		    + ';left: ' + 1 + 'px'
		    + ';background-color: ' + bar_color
		    + ';width: ' + 0
		    + ';height: ' + bar_height2
		    + ';z-index: 2'
		    + ';">');
	    document.write('</div>'); // close DIV for bar
    	
	    //  Now we create the text part that will display the percent 
	    document.write('<div id="percent" STYLE="position: absolute;'
		    + 'top: ' + 1 + 'px'
		    + ';left:' + 150 + 'px'
		    + ';width: ' + window_width
		    + ';text-align: center'
		    + ';vertical-align: middle'
		    + ';color: ' + text_color
		    + ';font: bold 22px Arial'
		    + ';z-index: 1'
		    + ';">');
	    document.write('0%'); // Display 0%
	    document.write('</div>');  // close DIV for percent
    	
	    document.write('</div>'); // close DIV for bar_window
	    */
    }
    catch (ex) { } 		
} // end function setup_bar()

function progress_bar(seconds)
{
    try
    {   
        /* Each part of the progress bar will be bar_length divided by seconds remaining to page load completion.
        For example: If there are 5 seconds remaining and the total bar_length is 300 then each bar_part will be 60 */
        var bar_part = Math.round(bar_length / seconds);
//        var bar_part = Math.round( document.getElementById('percent').style.width.split('px')[0] / seconds);
//        var bar_part = Math.round( document.getElementById('percent').style.width.split('px')[0] / 56);

        /* To display the correct percentage, bar_perc is 100 divided by the remaining time rounded */
        var bar_perc = Math.round(100 / seconds);
    	
        elapsedTime += 1;

	    percent = percent + bar_perc;
	    new_width = new_width + bar_part;
        j = elapsedTime;
    	
	    // If the new_width is not growing because an image is still
	    // loading then we want to make the bar go up 1% every 1 second
	    // as long as it has not reached the next bar_part
        if (new_width <= parseFloat(document.getElementById('bar').style.width) && new_width < (j*bar_part + bar_part))
        {
	        more = more + .50;
	        new_width = new_width + Math.round(more);	 
	        percent = percent + Math.round(more);
        }
	    
	    else 
	    {
		    more = 0;  // reset more if we loaded next image 
	    }
    	
    	if (percent > 100)
    	{
    	    percent = 100;
    	}
    	if (new_width > bar_length)
    	{
    	    new_width = bar_length;
    	}
    	
    	if (elapsedTime > seconds)
    	{
//    	    document.getElementById('percent').innerHTML = '<span style="color: #DDD">Por favor, aguarde.</span>';
            document.getElementById('percent').innerHTML = '<span style="color: #DDD">100%</span>';
    	    
    	    try
            {
                document.getElementById('imgBarra').style.width = new_width;
//                document.getElementById('divPercent').innerHTML = '<span style="color: #000">Por favor, aguarde.</span>';
                document.getElementById('divPercent').innerHTML = '<span style="color: #000">100%</span>';
            }
            catch(ex){}
    	}
    	else
    	{
            // Write the new percent in the progress bar window
            document.getElementById('percent').innerHTML = '<span style="color: #DDD">Processando</span> ' + percent + '%';
        	
            // Make the width of the bar wider so that it matches the percent
            document.getElementById('bar').style.width = new_width;
	        
	        try
            {
                document.getElementById('imgBarra').style.width = new_width;
                document.getElementById('divPercent').innerHTML = '<span style="color: #000;">' + percent + '% </span>';;
            }
            catch(ex){}
	        
            //checkstate(); // need for safari
            //document.getElementById('bar').innerHTML = document.readyState;
        	
            if (timeoutVar != null)
            {
                clearTimeout(timeoutVar);
            }
            if (finishProgressBar == false)
            {
                timeoutVar = setTimeout('progress_bar(' + seconds + ');', 1000); 
            }
	    }
	}
	catch (ex) { } 
} // end function progress_bar()

function finish_progress_bar()
{
    try
    {
        finishProgressBar = true;
           
	    // Write the new percent in the progress bar window
	    document.getElementById('percent').innerHTML = '<span style="color: #DDD">Processando</span> ' + 100 + '%';
	    
	    // Make the width of the bar wider so that it matches the percent
	    document.getElementById('bar').style.width = bar_length;
    
        try
	    {
	        document.getElementById('divPercent').innerHTML = '<span style="color: #000;">' + 100 + '%</span> ';
	        document.getElementById('imgBarra').style.width = bar_length;
	    }
	    catch(ex){}
    	
        if (timeoutVar != null)
        {
	        clearTimeout(timeoutVar);
	    }
	    timeoutVar = setTimeout('close_bar();', 500); // in half a second
	}
	catch (ex) { } 
} // end function progress_bar()

function close_bar()
{
    try
    {
        if (timeoutVar != null)
        {
	        clearTimeout(timeoutVar);
	    }
        
        timeoutVar = null;
        
	    //if done then close the progress bar pop-up window
	    document.getElementById('bar_window').style.visibility = 'hidden';
    }
    catch (ex) { } 
}  // end function close_bar()

// If IE
if(document.readyState)	
{
	document.onreadystatechange=checkstate;
}
else if (document.addEventListener) // if Mozilla or Netscape
{
	document.addEventListener("DOMContentLoaded", saydone, false);
}
	
function checkstate()
{
	// Besides IE, Safari also can use document.readyState
	// but Safari does not support onreadystatechange, so
	// we will keep calling this function with progress_bar().
	
	// Check to see if document is not "complete" but
	// is loaded enough to be "interactive"
	if (document.readyState=="complete" ||
		document.readyState=="complete")
		doneyet = 1;

} // end function checkstate()

function saydone()
{
	doneyet = 1;
}  // end function saydone()

// for other browsers that don't have DOM complete variables
setTimeout('saydone();', wait);

/*
setup_bar(); // call the function setup_bar() first
progress_bar(); // then call the progress_bar() function
*/