/*
 * jQuery Progress Bar plugin
 * Version 1.0.0 (06/16/2008)
 * @requires jQuery v1.2.1 or later
 *
 * Copyright (c) 2008 Gary Teo
 * http://t.wits.sg
 */

/*

USAGE:
	$("#yellowprogressBar").yellowprogressBar();
	$(".someclass").yellowprogressBar();
*/
(function($) {
	$.extend({
		yellowprogressBar: new function() {

			this.defaults = {
				showText	: false,											// show text with percentage in next to the progressbar? - default : true
				width		: 120,											// Width of the progressbar - don't forget to adjust your image too!!!
				boxImage	: 'http://assets.'+site_variable+'.co.nz/img/progressbar/progressbar.gif',		// boxImage : image around the progress bar
				barImage	: 'http://assets.'+site_variable+'.co.nz/img/progressbar/progressbar.gif',	// Image to use in the progressbar. Can be an array of images too.
				height		: 12											// Height of the progressbar - don't forget to adjust your image too!!!
			};
			
			/* public methods */
			this.construct = function(settings) {
				return this.each(function(child) {
					$this					= $(this);
					var config				= $.extend({}, $.yellowprogressBar.defaults, settings);
					var targetpercentage	= $this.html().replace("%","");	// Set to 0 intially, we'll change this later.
					render($this, 0, targetpercentage, config);
				});
			};
		
			function render(el, percentage, targetpercentage, config) {
				if (percentage <= targetpercentage) {
					var pxPerPercent	= config.width / 100;			// Define how much pixels go into 1%
					
					el.html("");
					
					// create the yellowprogressBar
					var bar 	= document.createElement('img');
					bar.id 		= el[0].id + "_percentImage";
					bar.src		= config.boxImage;
					bar.width	= config.width;
					bar.alt		= percentage;
					bar.title	= percentage;
					var $bar	= $(bar);
					$bar.css("width", config.width + "px");
					$bar.css("height", config.height + "px");
					$bar.css("background-position", (((config.width * -1)) + (percentage * pxPerPercent)) + 'px 50%');
					//$bar.css("background-position", ((this.config.width * (-1)) + 'px 50%'));
					$bar.css("background-image", "url(" + config.barImage + ")");
					$bar.css("padding", "0");
					$bar.css("margin", "0");
					el.append($bar);
					
					setInterval(render, 1000); 
					
					if (config.showText) {
						var text	= document.createElement('span');
						text.id		= el[0].id + '_percentText';
						var $text	= $(text);
						$text.html(" " + percentage + "%");
						el.append($text);
					}
					
					setTimeout(function() { render(el, ++percentage, targetpercentage, config); }, 10);
				}
			}
		}
	});
		
	$.fn.extend({
        yellowprogressBar: $.yellowprogressBar.construct
	});
	
})(jQuery);