// custom object hold data
var objAlaska = new Object();
var objCalifornia = new Object();
var objVize = new Object();
var objBlackMesa = new Object();
var objBaku = new Object();
var objWestEast = new Object();

objAlaska.project = 'Trans-Alaska Pipeline';
objAlaska.location = 'Prudhoe Bay to Valdez, Alaska (see <a href="../map/index.html">map</a>)';
objAlaska.commodity = 'Crude Oil';
objAlaska.length = '800 miles';
objAlaska.length_img = 'images/transport/alaska_graph.gif';
objAlaska.construct = '1974-1977';
objAlaska.facts = '<ul><li>Mile-by-mile design cost $7.7 billion</li><li>Crosses <a href="../sfeature/safety.html">extreme</a> terrain and climate zones</li><li>In areas, refrigerated pipe protects <a href="../peopleevents/e_permafrost.html">permafrost</a></li><li>Designed to accommodate <a href="../peopleevents/e_environment.html">environmental concerns</a></li></ul>';
objAlaska.plans = '<ul><li>Delivered over 2 million barrels/day <a href="../peopleevents/e_consumption.html">at its peak</a> in 1988</li><li>Transported an average of 890,000 barrels/day in 2005</li><li>Amount of oil left in North Slope is unknown</li></ul>';

objCalifornia.project = 'California Aqueduct';
objCalifornia.location = 'Sacramento River delta to Southern California farmlands and the city of Los Angeles';
objCalifornia.commodity = 'Water';
objCalifornia.length = '444 miles';
objCalifornia.length_img = 'images/transport/california_graph.gif';
objCalifornia.construct = '1960-1973';
objCalifornia.facts = '<ul><li>Largest water-conveyance system in the world</li><li>System includes 20 <a href="../sfeature/pumping.html">pumping stations</a>, 130 hydroelectric dams, 100 dams and flow control structures</li></ul>';
objCalifornia.plans = '<ul><li>Supplies millions of acre-feet of water to southern California annually</li></ul>';

objVize.project = 'Vize-Constantinople Aqueduct';
objVize.location = 'Thrace (present-day Turkey)';
objVize.commodity = 'Water';
objVize.length = '150 miles';
objVize.length_img = 'images/transport/vize_graph.gif';
objVize.construct = '345-373';
objVize.facts = '<ul><li>Longest single water supply line in the ancient world</li><li>Built by hand over nearly 30 years</li><li>Delivered water to the metropolis of Byzantium. later called Constantinople (present-day Istanbul)</li></ul>';
objVize.plans = '<ul><li>In use for at least three centuries</li><li>Archeologists are excavating and studying the aqueduct</li></ul>';

objBlackMesa.project = 'Black Mesa Coal Pipeline';
objBlackMesa.location = 'Navaho reservation in Black Mesa, Arizona to the Mohave Power Plant in Laughlin, Nevada';
objBlackMesa.commodity = 'Coal Slurry';
objBlackMesa.length = '273 miles';
objBlackMesa.length_img = 'images/transport/black_mesa_graph.gif';
objBlackMesa.construct = '1969-1970';
objBlackMesa.facts = '<ul><li>Coal is mixed with water to form a slurry for transport</li><li>The only long-distance coal slurry pipeline in the U.S.</li><li>Abrasive mixture is hard to manage through a pipeline</li><li>Transported about five million tons of coal each year</li></ul>';
objBlackMesa.plans = '<ul><li>Closed due to pollution violations by its sole client</li></ul>';

objBaku.project = 'Baku-Tbilisi-Ceyhan Pipeline';
objBaku.location = 'Western Asia, from Caspian Sea to Mediterranean Sea';
objBaku.commodity = 'Crude Oil';
objBaku.length = '1100 miles';
objBaku.length_img = 'images/transport/baku_graph.gif';
objBaku.construct = '2003-2005';
objBaku.facts = '<ul><li>Second longest oil pipeline in the world</li><li>Predicted to reduce by 350 the number of oil tankers passing through the narrow, congested Bosphorus strait</li></ul>';
objBaku.plans = '<ul><li>Began transporting about 150,000 barrels per day in June 2005</li><li>Expected to increase to 1 million barrels/day by 2009</li></ul>';

objWestEast.project = 'West-East Gas Pipeline Project';
objWestEast.location = 'From China\'s Xinjiang Uygur Autonomous Region in Shaanxi Province to Shanghai';
objWestEast.commodity = 'Natural Gas';
objWestEast.length = '2500 miles';
objWestEast.length_img = 'images/transport/west_east_graph.gif';
objWestEast.construct = '2002-2004';
objWestEast.facts = '<ul><li>First Chinese use of advanced drilling and pipeline management technologies</li><li>Traverses three mountains and 37 rivers</li><li>Designers mapped the route using satellite remote sensing technology</li></ul>';
objWestEast.plans = '<ul><li>Sold 1.3 billion cubic meters of natural gas in 2004, its first year of operation</li></ul>';

//setup array of objects
var aryTransportData = new Array();
aryTransportData[0] = objAlaska;
aryTransportData[1] = objCalifornia;
aryTransportData[2] = objVize;
aryTransportData[3] = objBlackMesa;
aryTransportData[4] = objBaku;
aryTransportData[5] = objWestEast;


//alert(aryTransportData[2].project + ' ' + aryTransportData[2].construct);
document.write('<p class="quote">Compare a few notable pipelines and aqueducts or <a href="transport_print.html" target="_blank">show all</a>.</p>');
uiCreateTable();
initSelects();

function uiReturnSelect(newID){
	var strOut = '<select id="' + newID + '" size="1">';
	strOut += '<option value="' + newID + 'optnone" selected="selected">Choose a project</option>';
	for(var i=0; i<aryTransportData.length; i++){
		strOut += '<option value="' + newID + 'opt' + i + '">' + aryTransportData[i].project + '</option>';
	}
	strOut += '</select>';
	return strOut;
}

function uiCreateTable(){
	document.write('<table id="tbl_compare">');
	document.write('<thead><th>Category</th><th>Tranport System One</th><th>Tranport System Two</th></thead>');
	// for selects
	document.write('<tr id="select_row"><td>&nbsp;</td><td id="sys1-select">' + uiReturnSelect('sys1') + '</td><td id="sys2-select">' + uiReturnSelect('sys2') + '</td></tr>');
	// for data
	document.write('<tr><td class="label">Project:</td><td id="sys1-project">&nbsp;</td><td id="sys2-project">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Location:</td><td id="sys1-location">&nbsp;</td><td id="sys2-location">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Commodity:</td><td id="sys1-commodity">&nbsp;</td><td id="sys2-commodity">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Length:</td><td id="sys1-length">&nbsp;</td><td id="sys2-length">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Construction Dates:</td><td id="sys1-construct">&nbsp;</td><td id="sys2-construct">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Fast Facts:</td><td id="sys1-facts">&nbsp;</td><td id="sys2-facts">&nbsp;</td></tr>');
	document.write('<tr><td class="label">Status/Future Plans:</td><td id="sys1-plans">&nbsp;</td><td id="sys2-plans">&nbsp;</td></tr>');
	document.write('</table>');
}

function initSelects(){
	document.getElementById('sys1').onchange = function (){
		var strOut = '';
		strOut += this.id + '\n';
		strOut += (this.selectedIndex-1) + '\n';
//		alert(strOut);
		
		if(this.selectedIndex-1 == -1){
			uiClearTableData(this.id);
		}else{
			uiDisplayTableData(this.id, this.selectedIndex-1);
		}
	}
	document.getElementById('sys2').onchange = function (){
		var strOut = '';
		strOut += this.id + '\n';
		strOut += (this.selectedIndex-1) + '\n';
//		alert(strOut);
		
		if(this.selectedIndex-1 == -1){
			uiClearTableData(this.id);
		}else{
			uiDisplayTableData(this.id, this.selectedIndex-1);
		}
	}
}

function uiClearTableData(sideId){
	document.getElementById(sideId + '-project').innerHTML = '';
	document.getElementById(sideId + '-location').innerHTML = '';
	document.getElementById(sideId + '-commodity').innerHTML = '';
	document.getElementById(sideId + '-length').innerHTML = '';
	document.getElementById(sideId + '-construct').innerHTML = '';
	document.getElementById(sideId + '-facts').innerHTML = '';
	document.getElementById(sideId + '-plans').innerHTML = '';
}

function uiDisplayTableData(sideId, sysId){
	document.getElementById(sideId + '-project').innerHTML = '<b>' + aryTransportData[sysId].project + '</b>';
	document.getElementById(sideId + '-location').innerHTML = aryTransportData[sysId].location;
	document.getElementById(sideId + '-commodity').innerHTML = aryTransportData[sysId].commodity;
	document.getElementById(sideId + '-length').innerHTML = aryTransportData[sysId].length + '<br /><img src="' + aryTransportData[sysId].length_img + '" width="164" height="46" alt="' + aryTransportData[sysId].length + '" title="' + aryTransportData[sysId].length + '" />';
	document.getElementById(sideId + '-construct').innerHTML = aryTransportData[sysId].construct;
	document.getElementById(sideId + '-facts').innerHTML = aryTransportData[sysId].facts;
	document.getElementById(sideId + '-plans').innerHTML = aryTransportData[sysId].plans;
}