/*

Turn a simple html formatted data source into a simple bar graph

Ex:
<div class="graph" style="height:160px;">
	<div class="data">
		<div class="record" title="Jan">55</div>
		<div class="record" title="Feb">100</div>
		<div class="record" title="Mars">85</div>
		<div class="record" title="Apr">78</div>
		<div class="record" title="Maj">88</div>
		<div class="record" title="Jun">23</div>
		<div class="record" title="Jul">43</div>
		<div class="record" title="Aug">55</div>
		<div class="record" title="Sep">82</div>
		<div class="record" title="Okt">62</div>
		<div class="record" title="Nov">12</div>
		<div class="record" title="Dec">78</div>
	</div>
</div>


Dependencies: Prototype js, www.prototypejs.org
Author: Daniel Lindmark, www.mondayhero.com
Author Email: daniel.lindmark@bobby.se

*/

// This is the css, only edit if you know what you are doing
document.writeln(
        '<style type="text/css">' +
		
		'.data .record{' +
			'width: 36px;' +
			'float:left;' +
			'position:absolute;' +
			'bottom:0;' +
			'margin:0 25px 0 0;' +
			'background-color: #d3ff6a;' +
			'background-image: url(bg.png);' +
			'text-align: center;' +
			'font-size: 8pt;' +
			'-webkit-transition: height 0.5s linear;' +
			'z-index: 6;' +
			'/*-moz-border-radius-topleft: 8px;' +
			'-webkit-border-top-left-radius: 8px;' +
			'-moz-border-radius-topright: 8px;' +
			'-webkit-border-top-right-radius: 8px;*/' +
			'border-top: 1px solid #bde64c;' +
		'}' +
		'.data .record span{' +
			'font-family: "Lucida Grande", sans-serif;' +
			'padding-top: 12px;' +
			'font-weight: bold;' +
			'display: none;' +
			'opacity: .75;' +
		'}' +
		'.data .record:hover span{' +
			'display: block;' +
		'}' +
		'.label{' +
			'width: 35px;' +
			'float:left;' +
			'position:absolute;' +
			'bottom:-20px;' +
			'margin:0 25px 0 0;' +
			'text-align: center;' +
			'font-size: 8pt;' +
			'font-family: "Lucida Grande", sans-serif;' +
		'}' +
		'.yaxis{' +
		'	width: 100%;' +
		'	float:left;' +
		'	position:absolute;' +
		'	text-align: center;' +
		'	font-size: 8pt;' +
		'	font-family: "Lucida Grande", sans-serif;' +
		'	border-bottom: 1px dotted #d7e0bf;' +
		'	z-index: 5;' +
		'	overflow:hidden;' +
		'}' +
		'.graph{' +
		'	border-left: 1px solid #d7e0bf;' +
		'	border-bottom: 1px solid #d7e0bf;' +
		'	float:left;' +
		'	position:relative;' +
		'	width:auto;' +
		'	background-color: #e7ebdd;'+
		'	margin: 12px 12px 45px 0' +
		'}' +
		'.graph .data{' +
		'	height: 100%;' +
		'}' +
		'.graphtitle{ '+
		'position:absolute;'+
		'top:15px;'+
		'left:15px;'+
		'z-index: 6;' +
		'font-family: "Lucida Grande", sans-serif;' +
		'font-weight: bold;' +
		'font-size: 12pt;' +
		'}' +
		'</style>'  );

//The function that turns the divs into bars
function buildGraphs(colors){
		var graphs = $$('.graph');
		
		
		
		for(r=0;r<graphs.length;r++){
			
			var values = graphs[r].getElementsByClassName('record');
			var graphHeight = graphs[r].getDimensions().height;
			var xPos = 10;
			var yPos = 5;
			
			var axisX = document.createElement('div');
			graphs[r].appendChild(axisX);
			
			var axisY = document.createElement('div');
			graphs[r].appendChild(axisY);
			
			var graphLabel = document.createElement('div');
			graphLabel.innerHTML = graphs[r].readAttribute('title');
			graphLabel.addClassName('graphtitle')
			graphs[r].appendChild(graphLabel);
			
			
			for(p=0;p<values.length;p++){
				var value = values[p].innerHTML*1;
				var label = values[p].readAttribute('title');
				var offset = 100 - value;
				var element = values[p];
				var marginTop = (offset/100) * graphHeight;
				element.setStyle({'height':value+'%','left':xPos+'px'});
				
				var valueLabel = document.createElement('span');
				valueLabel.innerHTML = ""+value+"";
				element.innerHTML = "";
				element.appendChild(valueLabel);
				
				
				
				if(colors){
					if(colors[r]){
						element.setStyle({'backgroundColor':colors[p]});
					}else{
						element.setStyle({'backgroundColor':colors[0]});
					}
				}
				
				var labelDiv = document.createElement('div');
				labelDiv.setStyle({'left':xPos+'px'});
				labelDiv.addClassName('label')
				labelDiv.innerHTML = label;
				axisX.appendChild(labelDiv);
				xPos+= element.getDimensions().width + 10;
				
			}
			
			for(p=0;p<19;p++){
				var yAxis = document.createElement('div');
				yAxis.setStyle({'top':yPos+'%'});
				yAxis.addClassName('yaxis')
				axisY.appendChild(yAxis);
				yPos+=5;
			}
			
		}
		
	}