var qxl_initial = -120;
var qxl_imageWidth=240;
var qxl_tickcount=0;
var qxl_maxtick=400;
var qxl_eachPercent = (qxl_imageWidth/2)/100;
var qxl_pgbar;
var qxl_pgid="";
var qxl_splash="";
var qxl_branding="";

/**
 * Code below taken from - http://www.evolt.org/article/document_body_doctype_switching_and_more/17/30655/
 *
 * Modified 4/22/04 to work with Opera/Moz (by webmaster at subimage dot com)
 *
 * Gets the full width/height because it's different for most browsers.
 */
function getViewportHeight(pvDocument, pvWindow) {
    if (pvWindow.innerHeight!=pvWindow.undefined) return pvWindow.innerHeight;
    if (pvDocument.compatMode=='CSS1Compat') return pvDocument.documentElement.clientHeight;
    if (pvDocument.body) return pvDocument.body.clientHeight; 
    return pvDocument.undefined; 
}

function getViewportWidth(pvDocument, pvWindow) {
    if (pvWindow.innerWidth!=pvWindow.undefined) return pvWindow.innerWidth; 
    if (pvDocument.compatMode=='CSS1Compat') return pvDocument.documentElement.clientWidth; 
    if (pvDocument.body) return pvDocument.body.clientWidth; 
    return pvWindow.undefined; 
}


function setSplash(pvImagepath)
{
   qxl_splash = pvImagepath;
}

function setBranding(pvBrandingname)
{
   qxl_branding = pvBrandingname;
}

/************************************************************\
*
\************************************************************/
function setText (id, percent)
{
    document.getElementById(id+'Text').innerHTML = percent+"%";
}
/************************************************************\
*
\************************************************************/
function showProgressBar ( id, percentage, color, max)
{
    qxl_maxtick=max;
    
    var h = 320, w = 340;
    var sWidth = getViewportWidth(this.document,this);
    var sHeight = getViewportHeight(this.document, this);
    LeftPosition = ((sWidth - w)/2);
    TopPosition =  ((sHeight - h)/2);
    
    qxl_pgbar = this.document.createElement("DIV");
    this.document.body.appendChild(qxl_pgbar);
    
    //debugger
    qxl_pgbar.style.top=TopPosition + 'px';
    qxl_pgbar.style.left=LeftPosition + 'px';
    qxl_pgbar.style.width=w + 'px';
    qxl_pgbar.style.height=h + 'px';
    qxl_pgbar.style.position='absolute';
    qxl_pgbar.style.border='none';
    qxl_pgbar.style.overflow='hidden';
    qxl_pgbar.style.zIndex='99999';
    qxl_pgbar.id = "div_" + id;
    
    display(id, percentage, color);
}

function removeProgressBar()
{
   this.document.body.removeChild(qxl_pgbar);
   //alert("used " + qxl_tickcount + " ticks");
}

function qxl_tick()
{
   qxl_tickcount++;
   plus(qxl_pgid, (qxl_maxtick/qxl_tickcount));
}

function display (id, percentage,color )
{	
	if (typeof color == "undefined") {
    color = "1";
  	}
    var percentageWidth = qxl_eachPercent * percentage;
    var actualWidth = qxl_initial + percentageWidth;
    qxl_pgbar.innerHTML = '<table><tr><td><img src="' + qxl_splash + '" alt="' + qxl_branding + '"/></td></tr><tr><td align="center"><img id="'+id+'" src="resource/percentImage.png" alt="'+percentage+'%" class="percentImage'+color+'" style="background-position: '+actualWidth+'px 0pt;"/> <span id="'+id+'Text">'+percentage+'%</span></td></tr></table>';
    qxl_pgid = id;
}

/************************************************************\
*
\************************************************************/
function emptyProgress(id)
{
    var newProgress = qxl_initial+'px';
    document.getElementById(id).style.backgroundPosition=newProgress+' 0';
    setText(id,'0');
}
/************************************************************\
*
\************************************************************/
function getProgress(id)
{
    var nowWidth = document.getElementById(id).style.backgroundPosition.split("px");
    return (Math.floor(100+(nowWidth[0]/qxl_eachPercent))+'%');
	
}
/************************************************************\
*
\************************************************************/
function setProgress(id, percentage)
{
    var percentageWidth = qxl_eachPercent * percentage;
    var newProgress = eval(qxl_initial)+eval(percentageWidth)+'px';
    document.getElementById(id).style.backgroundPosition=newProgress+' 0';
    setText(id,percentage);
}
/************************************************************\
*
\************************************************************/
function plus ( id, percentage )
{
    var nowWidth = document.getElementById(id).style.backgroundPosition.split("px");
    var nowPercent = Math.floor(100+(nowWidth[0]/qxl_eachPercent))+eval(percentage);
    var percentageWidth = qxl_eachPercent * percentage;
    var actualWidth = eval(nowWidth[0]) + eval(percentageWidth);
    var newProgress = actualWidth+'px';
    if(actualWidth>=0 && percentage <100)
    {
        var newProgress = 1+'px';
        document.getElementById(id).style.backgroundPosition=newProgress+' 0';
        setText(id,100);
    }
    else
    {
        document.getElementById(id).style.backgroundPosition=newProgress+' 0';
        setText(id,nowPercent);
    }
}
/************************************************************\
*
\************************************************************/
function minus ( id, percentage )
{
    var nowWidth = document.getElementById(id).style.backgroundPosition.split("px");
    var nowPercent = Math.floor(100+(nowWidth[0]/qxl_eachPercent))-eval(percentage);
    var percentageWidth = qxl_eachPercent * percentage;
    var actualWidth = eval(nowWidth[0]) - eval(percentageWidth);
    var newProgress = actualWidth+'px';
    if(actualWidth<=-120)
    {
        var newProgress = -120+'px';
        document.getElementById(id).style.backgroundPosition=newProgress+' 0';
        setText(id,0);
    }
    else
    {
        document.getElementById(id).style.backgroundPosition=newProgress+' 0';
        setText(id,nowPercent);
    }
}
/************************************************************\
*
\************************************************************/
function fillProgress(id, endPercent)
{
    var nowWidth = document.getElementById(id).style.backgroundPosition.split("px");
    startPercent = Math.ceil(100+(nowWidth[0]/qxl_eachPercent))+1;
    var actualWidth = qxl_initial + (qxl_eachPercent * endPercent);
    if (startPercent <= endPercent && nowWidth[0] <= actualWidth)
    {
        plus(id,'1');
        setText(id,startPercent);
        setTimeout("fillProgress('"+id+"',"+endPercent+")",10);
    }
}