JAVASCRIPT PROGRESSBAR CLASS DEMO

Class Source Code

/*******************************************************************************************************************************
************************************************************************************************************************
Progress bar object functions

*************************************************************************************************************************
*************************************************************************************************************************/
var globalBarCollection = new Array()
var globalBarCount = 0

function progressbar(prefix){

this.globalID = globalBarCount	
   this.ledImage = "led.gif"
   this.prefix = prefix	
   this.pgID = 0
   this.spg = 0
   this.progresstimer = false
   this.interval = 0
   this.lightbg = 'orange'
   this.darkbg = 'eeeeee'
   globalBarCollection[this.globalID] = this
   globalBarCount++
	}

//setup table for displaying progress
progressbar.prototype.place = function() {
       	with(document){
		writeln('<table class="pbar" id='+this.prefix+' bgcolor="ffffff" cellspacing=1 cellpadding=0><tr>')
		for(i=0;i<100;i++){
			writeln('<td width=5 id='+this.prefix+i+'></td>')			
			}	
		writeln('</tr></table>')
		}
	}

//repeat coloring of cells until 100%
progressbar.prototype.play = function(){
	
	this.spg = this.pgID
//	step(this)
	
//	this.interval = GetRandom(200,1000) //generate random time for timeout
	
//if(!this.myPrototypeCall){
//	var myInst = globalBarCollection[this.globalID]
//	this.myPrototypeCall = function() { myInst.play()}
//	this.progresstimer = window.setInterval (this.myPrototypeCall, interval);
//	}
	
//cause of issues with running timeout from within prototype this is an attempt to use utility function to substitute
	//step(this)
	doProtoTypeInterval(this.globalID)
	}
progressbar.prototype.pause = function(){
	
		clearTimeout(this.progresstimer)
		
	}
progressbar.prototype.reset = function(){
	this.pause()
	clearRange(this.pgID,this.prefix)
      this.pgID = 0
      this.spg = 0
	}

function doProtoTypeInterval(objID){
//	step(globalBarCollection[objID])

currentobj = eval(globalBarCollection[objID])

distance = GetRandom(0,6) //generate random increment for range of cells 
	if((currentobj.pgID + distance) >= 99){
		currentobj.pgID = 100
		}
	else { currentobj.pgID+=distance }
	bgfill(currentobj.spg,currentobj.pgID,currentobj.prefix)
	
	currentobj.interval = GetRandom(200,1000) //generate random time for timeout
	currentobj.progresstimer = window.setTimeout("doProtoTypeInterval("+objID+")",currentobj.interval)
	}

//execute coloring of range of cells
//to review function because there was no success in calling setTimeout from prototyped function play()
//key utility function to fill range of cells
//obsolete! functionality placed in doProtoTypeInterval
function step(myobject){
	
	distance = GetRandom(0,6) //generate random increment for range of cells 
	if((myobject.pgID + distance) >= 99){
		myobject.pgID = 100
		}
	else { myobject.pgID+=distance }
	bgfill(myobject.spg,myobject.pgID,myobject.prefix)
	}

//utility function used by object during incrumenting
function GetRandom(start,end){ 
	var range = end - start + 1; 
      var result = start + Math.floor(Math.random()*range); 
      return result; 
	}

//utility function used to color range of cell
//not sure why but pointers to cell objects not changing.
//Use bgfill instead.
function fill(firstPG,lastPG,prefix){
	for(x=firstPG;x<lastPG;x++){
		pgsetp = prefix + x
		pgsetp = document.getElementById(pgsetp)
		pglight = document.createElement('IMG');
		pglight.src= "led.gif"
		pglight.setAttribute('width','5');
		pglight.setAttribute('height','5');
		//pgsetp.removeChild(pgsetp.childNodes[0]);
		pgsetp.appendChild(pglight);	
		}
	}
function bgfill(firstPG, lastPG, prefix){
	for(x=firstPG;x<lastPG;x++){
		pgsetp = prefix + x
		pgsetp = document.getElementById(pgsetp)
	      pgsetp.style.background = 'gray'
		}
	}
function clearRange(lastPG,prefix){
      for(x=0;x<lastPG;x++){
		pgsetp = prefix + x
		//alert(pgsetp)
		pgsetp = document.getElementById(pgsetp)
	      pgsetp.style.background = 'white'
            
		}
	}