// Image Loading Progress Bar
var dwProgressBar = new Class({
	
	//implements
	Implements: [Options],

	//options
	options: {
		container: $$('body')[0],
		boxID:'box',
		percentageID:'perc',
		displayID:'text',
		startPercentage: 0,
		displayText: true,
		speed:10
	},
	
	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);
		//create elements
		this.createElements();
	},
	
	//creates the box and percentage elements
	createElements: function() {
		var box = new Element('div', { id:this.options.boxID });
		var perc = new Element('div', { id:this.options.percentageID, 'style':'width:0px;' });
		box.inject(this.options.container);
		perc.inject(box);
		if(this.options.displayText) { 
			var text = new Element('div', { id:this.options.displayID });
			text.inject(this.options.container);
		}
		this.set(this.options.startPercentage);
	},
	
	//calculates width in pixels from percentage
	calculate: function(percentage, plarraylength) {
		if(plarraylength==undefined){var decimal = 0}else{var decimal = percentage / plarraylength}
		return ($(this.options.boxID).getStyle('width').replace('px','') * (decimal)).toInt();
	},
	
	//animates the change in percentage
	animate: function(to, plarraylength) {
		if($defined($(this.options.percentageID))){
			$(this.options.percentageID).setStyle('width',this.calculate(to, plarraylength));
		}
		if($defined(this.options.displayText)) {
			if(plarraylength==undefined){var testperc='0%'}else{var testperc=(to / plarraylength * 100).toInt() + '%'}
			if($defined($(this.options.displayID))){
				$(this.options.displayID).set('text', testperc); 
			}
		}
	},
	
	//sets the percentage from its current state to desired percentage
	set: function(to, plarraylength) {
		this.animate(to, plarraylength);
	}
	
});