var ProgressBar = new Class({
	Implements: [Options],
	options: {
		boxId:'progress_bar',
		boxClass:'progress_bar bg',
		barClass:'bar',
		percentageClass:'percentage',
		titleClass:'title',
		startPercentage: 0,
		displayPercentage: false,
		displayTitle: true,
        title:'Loading...',
		speed:10,
        elements:{}
	},
	initialize: function(options) {
		this.setOptions(options);
        this.options.container = $$('body')[0];
		this.createElements();
	},
	createElements: function(){
		var box = new Element('div', {'id':this.options.boxId,'class':this.options.boxClass});
		var bar = new Element('div', {'class':this.options.barClass, 'style':'width:0px;' });
		bar.inject(box);
		if(this.options.displayPercentage) {
			var pc = new Element('div', { 'class':this.options.percentageClass });
			pc.inject(box,'top');
		}
		if(this.options.displayTitle) {
			var t = new Element('div', {'class':this.options.titleClass,'html':this.options.title});
			t.inject(box,'top');
		}
		box.inject(this.options.container);
		this.set(this.options.startPercentage);
        this.options.elements = box;
	},
	calculate: function(percentage) {
		return ($(this.options.boxId).getStyle('width').replace('px','') * (percentage / 100)).toInt();
	},
	animate: function(to) {
		$(this.options.boxId).getElement('.'+this.options.barClass).set('morph', { duration: this.options.speed, link:'cancel' }).morph({width:this.calculate(to.toInt())});
		if(this.options.displayPercentage) {
			$(this.options.boxId).getElement('.'+this.options.percentageClass).set('text', to.toInt() + '%');
		}
	},
	set: function(to) {
		this.animate(to);
	}
});