/**
 * Makes a brachart out of an element containing a number
 * 
 * EG: <p class='barchart-me'>57</p>
 * 
 * The barchart currently expects to be made up of numbers less than 100
 * 
 * You can add extra classes to control position and colour:
 * 
 * barchart-position-before : Barchart is inserted before element (default)
 * barchart-position-after  : Barchart is inserted after element
 * 
 * barchart-colour-purple   : Purple barchart (default)
 * barchart-colour-pink 	: Pink barchart  
 */
glow.ready(function() {
	
	var max = Math.max(1, Math.max.apply(Math, glow.lang.map(glow.dom.get('#barcharts .barchart-me'),
								function(item) {
									return glow.dom.get(item).text();
								})));
		
	glow.dom.get('.barchart-me').each(function() {

		var barchart = glow.dom.get(this),
			position = (barchart.hasClass('barchart-position-after')) ? 'after' : 'before',
			colour   = (barchart.hasClass('barchart-colour-pink')) ? 'pink' : 'purple',
			number   = Math.min(100, Math.round((parseInt(barchart.text()) / max) * 100))

			
		var barchartHtml = glow.dom.create('<div class="barchart ' + colour +'"></div>');
		glow.dom.create('<div class="bar_top"></div>').appendTo(barchartHtml);
		glow.dom.create('<div class="bar_mid"></div>').appendTo(barchartHtml);
		glow.dom.create('<div class="bar_btm"></div>').appendTo(barchartHtml);		

		if (position == 'after') {
			barchartHtml.insertAfter(barchart);
		} else {
			barchartHtml.insertBefore(barchart);	
		}
		
		
		glow.anim.css(barchartHtml.get('.bar_mid'), 0.75, {height: {from:0, to:number * 0.4}}).start();
		
	});

});