/*
	Class:    	dwProgressBar
	Author:   	David Walsh
	Website:    http://davidwalsh.name
	Version:  	2.0
	Date:     	08/03/2008
	Built For:  MooTools 1.2.0
	
	SAMPLE USAGE AT BOTTOM OF THIS FILE
	
*/


//class is in
var dwProgressBar = new Class({
	
	//implements
	Implements: [Events, Options],

	//options
	options: {
		container: $(document.body),
		boxID:'',
		percentageID:'',
		displayID:'',
		startPercentage: 0,
		displayText: false,
		speed:10,
		step:1,
		allowMore: false
	},
	
	//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;' 
		});
		perc.inject(box);
		box.inject(this.options.container);
		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) {
		return ($(this.options.boxID).getStyle('width').replace('px','') * (percentage / 100)).toInt();
	},
	
	//animates the change in percentage
	animate: function(go) {
		var run = false;
		if(!this.options.allowMore && go > 100) { 
			go = 100; 
		}
		
		if (go>55) $(this.options.displayID).setStyle('color', '#fff');
		
		//this.to = go.toInt();
		this.to = go.toFloat();
		$(this.options.percentageID).set('morph', { 
			duration: this.options.speed,
			link:'cancel',
			onComplete: this.fireEvent(go == 100 ? 'complete' : 'change', [], this.options.speed)
		}).morph({
			width:this.calculate(go)
		});
		if(this.options.displayText) { 
			$(this.options.displayID).set('text', this.to.toInt() + '%'); 
		}
	},
	
	//sets the percentage from its current state to desired percentage
	set: function(to) {
		this.animate(to);
	},
	
	//steps a pre-determined percentage
	step: function() {
		this.set(this.to + this.options.step);
	}
	
});

/* sample usage */
/*
	//once the DOM is ready
	window.addEvent('domready', function() {
		
		//create the progress bar for example 1
		pb2 = new dwProgressBar({
			container: $('put-bar-here2'),
			startPercentage: 10,
			speed:1000,
			boxID: 'box2',
			percentageID: 'perc2',
			displayID: 'text',
			displayText: true,
			step:15,
			onComplete: function() {
				alert('Done!');
			},
			onChange: function() {
				alert('Changed!');
			}
		});
		
		//movers
		$$('.mover2').each(function(el) {
			el.addEvent('click',function(e) {
				e.stop();
				pb2.set(el.get('rel'));
			});
		});
		
		//steppers
		$$('.stepper').each(function(el) {
			el.addEvent('click',function(e) {
				e.stop();
				pb.step();
			});
		});
	
*/