var bioPercent=0;
var hydroPercent=0;
var solarPercent=0;
var windPercent=0;
var geoThermalPercent=0;
var oceanPercent=0;
var total=0;
function displayResult(year)
{
	bioPercent=getPercentCont('biofuel',year);
	hydroPercent=getPercentCont('hydro',year);
	solarPercent=getPercentCont('solar',year);
	windPercent=getPercentCont('wind',year);
	geoThermalPercent=getPercentCont('geoThermal',year);
	oceanPercent=getPercentCont('ocean',year);
	total=hydroPercent+solarPercent+windPercent+geoThermalPercent+oceanPercent;	
	
	document.getElementById("bio_display").innerHTML='<span id="para" align="left">Biofuel - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>'+ bioPercent+'%</B><br> to Transportation</span>';
	
	document.getElementById("hydro_display").innerHTML='<span id="para" align="left">Hydro - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>'+ hydroPercent+'%</B><br> to Electricity</span>';
	
	document.getElementById("ocean_display").innerHTML='<span id="para" align="left">Ocean - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>'+ oceanPercent+'%</B><br> to Electricity</span>';
	
	document.getElementById("solar_display").innerHTML='<span id="para" align="left">Solar - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>'+solarPercent+'%</B><br> to Electricity</span>';
	
	document.getElementById("wind_display").innerHTML='<span id="para" align="left">Wind - &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<B>'+windPercent+'%</B><br> to Electricity</span>';
	
	document.getElementById("geothermal_display").innerHTML='<span id="para" align="left">Geothermal - <B>'+geoThermalPercent+'%</B><br>to Electricity</span>';
	
	document.getElementById("graph_bot_left").innerHTML='<center>'+total+'% to Electricity</center>';
	document.getElementById("graph_bot_right").innerHTML='<center>'+bioPercent+'% to Oil</center>';
	
	showScale(bioPercent,'bio');
	showScale(hydroPercent,'hydro');
	showScale(oceanPercent,'ocean');
	showScale(solarPercent,'solar');
	showScale(windPercent,'wind');
	showScale(geoThermalPercent,'geothermal');
}

//Designing 
function includeJs(filename)
{
	var head = document.getElementsByTagName('head').item(0);
	script = document.createElement('script');
	script.src = filename;
	script.type = 'text/javascript';
	head.appendChild(script)
}

//For Copy prodect
window.onload = function() {
  var element = document.getElementById('mainz');
  element.onselectstart = function () { return false; } // ie
  element.onmousedown = function () { return false; } // mozilla
}

document.write('<link rel="stylesheet" type="text/css" href="css/slider/demo.css">');
document.writeln('<link type="text/css" rel="stylesheet" href="css/style_3.1.css" />');
includeJs('js/slider/demo.js');
includeJs('js/slider/fireworks.js');
includeJs('js/tooltip/wz_tooltip.js');
includeJs('js/ScriptHelper.js');
document.write('<div id="fireButton">  <div id="fireIE"></div> </div>');

var html='';
var table='';
table+='<table id="sources" cellpadding="0" cellspacing="0" border="0" align="left" width="179px">';
table+='	<tr id="table_row">';
table+='		<td><img src="images/bio.png" onmouseover="Tip(bioTip)" onmouseout="UnTip()""></td>';
table+='		<td>';
table+='			<div id="bio">';
table+='				<div id="bio_scale"></div>';
table+='				<div id="bio_display"></div>';
table+='			<div>';	
table+='		</td>';
table+='	</tr>';
table+='	<tr id="table_row">';
table+='		<td><img src="images/hydro.png" onmouseover="Tip(hydroTip)" onmouseout="UnTip()"></td>';
table+='		<td>';
table+='			<div id="hydro">';
table+='				<div id="hydro_scale"></div>';
table+='				<div id="hydro_display"></div>';
table+='			</div></td>';
table+='	</tr>';
table+='	<tr id="table_row">';
table+='		<td><img src="images/ocean.png" onmouseover="Tip(oceanTip)" onmouseout="UnTip()"></td>';
table+='		<td>';
table+='			<div id="ocean">';
table+='				<div id="ocean_scale"></div>';
table+='				<div id="ocean_display"></div>';
table+='			</div></td>';
table+='	</tr>';
table+='	<tr id="table_row">';
table+='		<td><img src="images/solar.png" onmouseover="Tip(solarTip)" onmouseout="UnTip()"></td>';
table+='		<td>';
table+='			<div id="solar">';
table+='				<div id="solar_scale"></div>';
table+='				<div id="solar_display"></div>';
table+='			</div></td>';
table+='	</tr>';
table+='	<tr id="table_row">';
table+='		<td><img src="images/wind.png" onmouseover="Tip(windTip)" onmouseout="UnTip()"></td>';
table+='		<td>';
table+='			<div id="wind">';
table+='				<div id="wind_scale"></div>';
table+='				<div id="wind_display"></div>';
table+='			</div></td>';
table+='	</tr>';
table+='	<tr id="table_row">';
table+='		<td><img src="images/geothermal.png" onmouseover="Tip(geoTip)" onmouseout="UnTip()"></td>';
table+='		<td>';
table+='			<div id="geothermal">';
table+='				<div id="geothermal_scale"></div>';
table+='				<div id="geothermal_display"></div>';
table+='			</div></td>';
table+='	</tr>';
table+='</table>';

html+='<div id="mainz">';
//html+='		<div id="top"></div>';
html+='		<div id="middle"><B>';
html+='			<div id="controls">';
html+='			   <dl class="col">   ';
html+='			  	 <dd class="title">Drag to pick year</dd>';
html+='			  	 <dd>1-100</dd>';
html+='			  	 <dd class="control">';
html+='			    	<div class="bar" title="Click to move here"></div>';
html+='	    			<div class="slider" title="Drag me to pick the year"></div>';
html+='				</dd>';
html+='			  </dl>';
html+='			</div>';
html+='			<div id="graph"></div>';
html+='			</B>';
html+='			<div id="display">'+table+'</div>';
html+='		</div>';
html+='		<div id="bottom"><center><a href="http://www.altprofits.com" id="widget_link" target="_blank">www.altprofits.com</a></center></div>';
html+='	</div>';

document.writeln(html);

var items=new Array(6);
items[0]="bio"; items[1]="hydro"; items[2]="ocean"; items[3]="solar"; items[4]="wind";items[5]="geothermal";

var i=0;
for(i=0;i<=5;i++)
{
	html='';
	html+='<div id="scale">';
	html+='	<div id="'+items[i]+'_pointer"><!-- --></div>';
	html+='</div>';	
	document.getElementById(items[i]+'_scale').innerHTML=html;
}
// This for Graph
var bioTip="Biofuel";var hydroTip="Hydro"; var oceanTip="Ocean"; var solarTip="Solar"; var windTip="Wind"; var geoTip="Geothermal";
var colon=": ";
var bpercent='% contribution to oil';
var percent='% contribution to electricity';

var tip1='onmouseover="Tip(bioTip+colon+bioPercent+bpercent)" onmouseout="UnTip()"';
var tip2='onmouseover="Tip(hydroTip+colon+hydroPercent+percent)" onmouseout="UnTip()"';
var tip3='onmouseover="Tip(oceanTip+colon+oceanPercent+percent)" onmouseout="UnTip()"';
var tip4='onmouseover="Tip(solarTip+colon+solarPercent+percent)" onmouseout="UnTip()"';
var tip5='onmouseover="Tip(windTip+colon+windPercent+percent)" onmouseout="UnTip()"';
var tip6='onmouseover="Tip(geoTip+colon+geoThermalPercent+percent)" onmouseout="UnTip()"';

html='<table style="background-image:url(images/graph_bg.png)" width="100%" height="75px" border="0" cellpadding="0" cellspacing="0" >';
html+='	<tr>';
html+='    <td><div id="graph_bar2" style="width:15px;"></div></td>';
html+='    <td><div id="graph_bar1"><div id="bio_graph_pointer_inv"></div><div id="bio_graph_dis" class="graph_dis"'+tip1+' ></div><div id="bio_graph_pointer"'+tip1+'><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='    <td><div id="graph_bar1"><div id="hydro_graph_pointer_inv"></div><div id="hydro_graph_dis" class="graph_dis"'+tip2+'></div><div id="hydro_graph_pointer" '+tip2+'><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='    <td><div id="graph_bar1"><div id="ocean_graph_pointer_inv"></div><div id="ocean_graph_dis" class="graph_dis"'+tip3+'></div><div id="ocean_graph_pointer" '+tip3+' ><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='    <td><div id="graph_bar1"><div id="solar_graph_pointer_inv"></div><div id="solar_graph_dis" class="graph_dis"'+tip4+'></div><div id="solar_graph_pointer" '+tip4+'><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='    <td><div id="graph_bar1"><div id="wind_graph_pointer_inv"></div><div id="wind_graph_dis" class="graph_dis"'+tip5+'></div><div id="wind_graph_pointer" '+tip5+'><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='    <td><div id="graph_bar1"><div id="geothermal_graph_pointer_inv"></div><div id="geothermal_graph_dis" class="graph_dis"'+tip6+'></div><div id="geothermal_graph_pointer" '+tip6+'><!-- --></div></div></td>';
html+='    <td><div id="graph_bar2"></div></td>';
html+='  </tr>';
html+='</table>';
html+='<div id="graph_bot">';
html+='		<table border="0" height="100%" width="100%" cellpadding="0" cellspacing="0">';
html+='			<td><div id="graph_bot_left" class="curved"></div></td>';
html+='			<td><div id="graph_bot_right" class="curved"></div></td>';
html+='		</table>';
html+='</div>';

document.getElementById('graph').innerHTML=html;


function showScale(percent,itm)
{
	var per=parseInt(percent);
	document.getElementById(itm+'_pointer').style.width=per+'px';
	document.getElementById(itm+'_graph_pointer').style.height=per+'px';
	document.getElementById(itm+'_graph_pointer_inv').style.height=(55-per)+'px';
	document.getElementById(itm+'_graph_dis').innerHTML='<B>'+per+'%</B>';
}