/*
 * With inspiration from on http://jcargoo.org progress bar
 *
 * Needed in html:
 * 		<div id="pb_box"/><div id="pb_pct"></div>
 * Available CSS classes:
 * 		.pb_box: boundary box for progressbar
 *		.progressBar_frame: Foreground frame (use transparent image)
 *		.progressBar_bar: Foreground moving bar
 *		.progressBar .pct0: Alternate styling for x<25%
 *		.progressBar .pct25: Alternate styling for 25<=x<50%
 *		.progressBar .pct50: Alternate styling for 50<=x<75%
 *		.progressBar .pct75: Alternate styling for x>=75%
 */

function ProgressBar() {};
 
ProgressBar.prototype.o_bar = null;  // internally created div
ProgressBar.prototype.o_pct = null;  // Percentage text div, style invisible to remove
ProgressBar.prototype.pct = 0;   // start value 
ProgressBar.prototype.animTargetPct = 0; // reset animation target value
ProgressBar.prototype.settings = {
	isAnimated : false, 
	animationSpeed : 2 // wait X milliseconds for each percent change
};

/** 
  * Initialize internal variables, and build progressbar internal html 
  */ 
ProgressBar.prototype.Initialize = function(p_mainDivID, p_percentageDivID, p_startPct) {
	o_mainDiv = document.getElementById(p_mainDivID);
	if(typeof(o_mainDiv)!="object") {
		throw "Cannot find element"+p_mainDivID;
	}
	o_mainDiv.className = "progressBar";
	o_mainDiv.innerHTML = "<div id='"+p_mainDivID+"_pbframe' class='progressBar_frame'></div><div id='"+p_mainDivID+"_pbbar' class='progressBar_bar'></div>";

	if(p_startPct && typeof(p_startPct) == "number") {
	 	this.pct=p_startPct;
	}

	this.o_bar = document.getElementById(p_mainDivID+"_pbbar");
	this.o_pct = document.getElementById(p_percentageDivID);
	if(!this.p_pct || !typeof(this.p_pct) == "object") {
	 	o_pct=null;
	}
	// Default styling if no stylesheet is used
	/*
	o_mainDiv.style.backgroundColor = "#AAAAFF";
	o_mainDiv.style.height = "12px";
	o_mainDiv.style.width = "124px";
	this.o_bar.style.backgroundColor = "#0000FF";
	this.o_bar.style.height = "12px";
	this.o_bar.style.width = "124px";
	*/
	this.SetWidth(this.pct);
}
/** 
  * Set the target comleteness level
  */ 
ProgressBar.prototype.SetCompleteness = function(p_pct, p_animate) {
	if(typeof(p_pct)!="number") {
		// error
	}
	else {
		if(p_pct>100) {
			p_pct=100;
		} else if(p_pct<=0) {
			p_pct=0;
		}

		if(typeof(p_animate)!="undefined" && !p_animate) {
			this.animTargetPct = p_pct;
			this.SetWidth(p_pct);
		}

		if(this.settings.isAnimated) {
			this.animTargetPct = p_pct;
			this.Animate();	
		} else {
			this.SetWidth(p_pct);
		}
	}	
}
/** 
  * Internal function: resize objects, change class names to indicate completeness
  */ 
ProgressBar.prototype.SetWidth = function(p_pct) {
	this.o_bar.style.width = p_pct+"%";
	this.pct = p_pct;
	
	if(p_pct<25 && this.o_bar.style.backgroundImage.indexOf("prb1")<0) {
		this.o_bar.className = "progressBar_bar pct0";
		//this.o_bar.style.backgroundImage = "url(progressbar/prb4.png)";
	} else if(p_pct>=25 && p_pct<50 && this.o_bar.style.backgroundImage.indexOf("prb2")<0) {
		this.o_bar.className = "progressBar_bar pct25";
		//this.o_bar.style.backgroundImage = "url(progressbar/prb3.png)";
	} else if(p_pct>=50 && p_pct<75 && this.o_bar.style.backgroundImage.indexOf("prb3")<0) {
		this.o_bar.className = "progressBar_bar pct50";
		//this.o_bar.style.backgroundImage = "url(progressbar/prb2.png)";
	} else if(p_pct>=75 && this.o_bar.style.backgroundImage.indexOf("prb4")<0){
		this.o_bar.className = "progressBar_bar pct75";
		//this.o_bar.style.backgroundImage = "url(progressbar/prb1.png)";
	}
	if(this.o_pct!=null) {
		this.o_pct.innerHTML = this.pct;		
	}
}
/** 
  * Internal function: Animate change to target completeness level
  */ 
ProgressBar.prototype.Animate = function() {
	if (Math.abs(this.pct - this.animTargetPct)>=1) {
		this.SetWidth(this.pct + ((this.pct < this.animTargetPct)?1:-1));
		thisObj = this;
		window.setTimeout(function() { thisObj.Animate(); }, this.settings.animationSpeed);		
	}
}