function SimpleProgressBar( width, height, resolution, inactiveImage, completeImage, remainImage )
{
	this.names = new Array();
	this.width = width;
	this.height = height;
	this.resolution = resolution;
	this.inactiveImage = inactiveImage;
	this.completeImage = completeImage;
	this.remainImage = remainImage;
	this.progress = SimpleProgressBar.INACTIVE;
	this.imageLoadingStatus = SimpleProgressBar.WAITING_FOR_IMG_TAGS;

	this.get_html = SimpleProgressBar__get_html;
	this.set_progress = SimpleProgressBar__set_progress;
}



function SimpleProgressBar__get_html( name )
{
	/* create HTML for display-bar */
	var htmlStr = "";
	var barImgPrefix = SimpleProgressBar.IMG_PREFIX + name;

	var perWidth = this.width / this.resolution;
	htmlStr += "<img src='" + this.inactiveImage + "' name='" + barImgPrefix + "0' width=" + perWidth + " height=" + this.height + " onload=\"SimpleProgressBar.handle_image_loading( '" + barImgPrefix + "' )\">";
	for (var i=1; i<this.resolution; i++)
	{
		htmlStr += "<img src='" + this.inactiveImage + "' name='" + barImgPrefix + i + "' width=" + perWidth + " height=" + this.height + ">";
	}

	/* add the name of this display-bar to the array of bars linked to this progress counter */
	this.names[this.names.length] = barImgPrefix;

	/* register the name of this bar, for controlling the loading of images */
	SimpleProgressBar.register_display_bar( barImgPrefix, this );

	return htmlStr;
}

function SimpleProgressBar__set_progress( progress )
{
	if (progress == SimpleProgressBar.INACTIVE)
	{
		this.progress = progress;

		// set all images in all bars to inactive colour
		var barName;
		for (var b=0; b<this.names.length; b++)
		{
			barName = this.names[b];
			for (var p=0; p<this.resolution; p++)
				document.images[barName + p].src = this.inactiveImage;
		}
	}
	else
	{
		// determine integer progress value, in range 0-99
		var newProgressValue = progress;
		newProgressValue = (newProgressValue/100) * this.resolution;	// convert to range of resolution
		newProgressValue = Math.ceil( newProgressValue );		// convert to whole number
		newProgressValue = Math.min( Math.max( newProgressValue, 0 ), (this.resolution-1) );	// force range of resolution

		if (this.progress == SimpleProgressBar.INACTIVE)
		{
			// set all images in all bars
			var barName;
			for (var b=0; b<this.names.length; b++)
			{
				barName = this.names[b];
				for (var p=0; p<this.resolution; p++)
				{
					if (p <= newProgressValue)
						document.images[barName + p].src = this.completeImage;
					else
						document.images[barName + p].src = this.remainImage;
				}
			}
		}
		else if (this.progress < newProgressValue)
		{
			// set more completed images in all bars
			var barName;
			for (var b=0; b<this.names.length; b++)
			{
				barName = this.names[b];
				for (var p=newProgressValue; p>this.progress; p--)
				{
					document.images[barName + p].src = this.completeImage;
				}
			}
		}
		else if (this.progress > newProgressValue)
		{
			// set more remaining images in all bars
			var barName;
			for (var b=0; b<this.names.length; b++)
			{
				barName = this.names[b];
				for (var p=this.progress; p>newProgressValue; p--)
				{
					document.images[barName + p].src = this.remainImage;
				}
			}
		}

		this.progress = newProgressValue;
	}
}

function SimpleProgressBar__slow_set_progress( progress )
{
	this.progress = progress;

	var inactiveIndex;
	var completeIndex;
	if (this.progress == SimpleProgressBar.INACTIVE)
	{
		inactiveIndex = this.resolution;
		completeIndex = this.resolution;
	}
	else
	{
		inactiveIndex = 0;
		completeIndex = this.progress;
	}

	var barName;
	var pixelImg;
	var pixelSrc;
	for (var barIndex=0; barIndex<this.names.length; barIndex++)
	{
		barName = SimpleProgressBar.IMG_PREFIX + this.names[barIndex];

		for (var pixelIndex=0; pixelIndex<this.resolution; pixelIndex++)
		{
			pixelImg = document.images[barName + pixelIndex];

			if (pixelIndex < inactiveIndex)
				pixelSrc = this.inactiveImage;
			else if (pixelIndex < completeIndex)
				pixelSrc = this.completeImage;
			else
				pixelSrc = this.remainImage;

			if (pixelImg.src != pixelSrc)
				pixelImg.src = pixelSrc;
		}
	}
}



function SimpleProgressBar__register_display_bar( barName, progressBar )
{
	SimpleProgressBar.BAR_REGISTRY[barName] = progressBar;
}

function SimpleProgressBar__handle_image_loading( barName )
{
	var progressBar = SimpleProgressBar.BAR_REGISTRY[barName];

	if (typeof( progressBar ) != "undefined")
	{
		if (progressBar.imageLoadingStatus == SimpleProgressBar.BAR_IMGS_LOADED)
		{
			/* do nothing, images have loaded */
		}
		else if (progressBar.imageLoadingStatus == SimpleProgressBar.WAITING_FOR_IMG_TAGS)
		{
			/* load remain image */
			progressBar.imageLoadingStatus = SimpleProgressBar.BAR_IMG1_LOADING;
			document.images[barName + "0"].src = progressBar.remainImage;
		}
		else if (progressBar.imageLoadingStatus == SimpleProgressBar.BAR_IMG1_LOADING)
		{
			/* load complete image */
			progressBar.imageLoadingStatus = SimpleProgressBar.BAR_IMG2_LOADING;
			document.images[barName + "0"].src = progressBar.completeImage;
		}
		else
		{
			/* load complete image */
			progressBar.imageLoadingStatus = SimpleProgressBar.BAR_IMGS_LOADED;
			document.images[barName + "0"].src = progressBar.inactiveImage;
		}
	}
}



SimpleProgressBar.INACTIVE = new Object();
SimpleProgressBar.IMG_PREFIX = "pb_";

SimpleProgressBar.BAR_REGISTRY = new Array();
SimpleProgressBar.WAITING_FOR_IMG_TAGS = 1;//new Object();
SimpleProgressBar.BAR_IMG1_LOADING = 2;//new Object();
SimpleProgressBar.BAR_IMG2_LOADING = 3;//new Object();
SimpleProgressBar.BAR_IMGS_LOADED = 4;//new Object();

SimpleProgressBar.register_display_bar = SimpleProgressBar__register_display_bar;
SimpleProgressBar.handle_image_loading = SimpleProgressBar__handle_image_loading;