//	initialize request object
var xhr = null;
try {
	xhr = new XMLHttpRequest();
} catch (trymicrosoft) {
	try {
		xhr = new ActiveXObject("Msxml2.XMLHTTP");
	} catch (othermicrosoft) {
		try {
			xhr = new ActiveXObject("Microsoft.XMLHTTP");
		} catch (failed) {
			xhr = null;	//no support found
		}
	}
}

var cars = new Array();
var carsReady = 0;
var sel ={};
var sel_in_form = new Array();
var csupport = false;
var ready = false;
var drawready = false;

//data i will show in the degraded table
var t_data = ['msrp', 'hp', 'torque', 'mpgc', 'mpgh', 'fuel', 'weight', 'length', 'width', 'height'];
var units = {
	hp		:	'hp',
	torque	:	'ft lbs',
	fuel		:	'gal',
	weight	:	'lbs',
	length	:	'in',
	width		:	'in',
	height	:	'in'
};

//formats MSRP
function to$(x) {
	x += '';
	var rgx = /(\d+)(\d{3})/;
	while (rgx.test(x)) {
		x = x.replace(rgx, '$1' + ',' + '$2');
	}
	return '$' + x;
}

//removes a car
function removeCar() {
	var i = this.name.charAt(this.name.length - 1);
	if (cars.length > 0) {
		if (csupport == true) {
			cars[i] = null;
			draw();
		} else {
			//unPopTable(i)
			document.getElementById('col' + i).className = 'colorCode';
			popTable(cars[i], 'clear');
		}
	}
	document.getElementById('carBox' + i).className = 'colorCode';
	document.getElementById('year' + i).selectedIndex = 0;
	document.getElementById('make' + i).className = '';
	document.getElementById('model' + i).className = '';
	document.getElementById('cmsrp' + i).innerHTML = 'MSRP';
}

//for when there's no canvas
function popTable(car, clear) {
	var head = document.getElementById('head' + car.id).firstChild;
	if (head.nodeType != 1) head = head.nextSibling;
	head.innerHTML = 'Vehicle ' + (parseInt(car.id) + 1) + ': ' + car.year + ' ' + car.make + ' ' + car.model;
	var out;
	for (var i = 0; i < t_data.length; i++) {
		if (clear && clear == 'clear') {
			out = '';
		} else {
			out = units[t_data[i]] ? (car[t_data[i]] + ' ' + units[t_data[i]]) : car[t_data[i]];
			if (t_data[i] == 'msrp') out = to$(out);
		}
		document.getElementById(t_data[i] + car.id).innerHTML = out;
	}
}

//control switcher...
function changeView() {
	var views = document.getElementById('output').childNodes;
	for (var i = 0; i < views.length; i ++) {
		if (views[i].nodeType == 1) {
			views[i].className = 'hide';
		}
	}
	var tabs = document.getElementById('views').getElementsByTagName('a');
	for (var i = 0; i < tabs.length; i ++) {
		tabs[i].className = 'i';
	}
	var current = this.id;
	current = current.substring(0, current.indexOf('Tab'));
	this.className = 'currentTab';
	document.getElementById(current).className = '';
}

function sendRequest(from) {
	var fromValue = from.options[from.selectedIndex].value;
	from = from.name;
	var carNumber = parseInt(from.charAt(from.length-1));
	if (fromValue.indexOf('...') > -1) {
		//empty / hide all subsequent selects in this group...
		for (var i = sel_in_form.length-1; i >= 0; i--) {
			if (sel_in_form[i].name == from) break;
			if (sel_in_form[i].className == 'active'
				&& sel_in_form[i].name.indexOf(carNumber) > -1) {
				sel_in_form[i].className = '';
				sel_in_form[i].length = 0;
			}
			
		}		
	} else {
		//get selected option of sel and send the xmlhttprequest...
		var url = 'index.php?a'; 
		for (var i = 0; i < sel_in_form.length; i++) {
			if (sel_in_form[i].className == 'active'
				&& sel_in_form[i].name.indexOf(carNumber) > -1) {
				url += '&' + sel_in_form[i].name + '=' + sel_in_form[i].options[sel_in_form[i].selectedIndex].value;
			}
			if (sel_in_form[i].name == from) break;
		}
		if (from.indexOf('model') > -1 && carNumber < 2 && sel['year' + (carNumber+1)].options[0]) {
			//we have all 3 so let's also send the 1st value of the next dropdown.
			var nextValue = sel['year' + (carNumber+1)].options[sel['year' + (carNumber+1)].selectedIndex].value
			url += '&year' + (carNumber+1) + '=' + nextValue;
			
		}
		xhr.open('GET', url, true);
		xhr.onreadystatechange = updatePage;
		xhr.send(null);
	}
}

function updatePage() {
	if (xhr.readyState == 4) {
		if (xhr.status == 200) {			
			eval('var json = ' + xhr.responseText);
			if (json.select) {
				var to = json.select.id;
				var carNumber = parseInt(to.charAt(to.length-1));

				//empty / hide all subsequent selects in this group... 
				for (var i = sel_in_form.length-1; i >= 0; i--) {
					if (sel_in_form[i].name == to) break;
					if (sel_in_form[i].className == 'active'
						&& sel_in_form[i].name.indexOf(carNumber) > -1) {
						sel_in_form[i].className = '';
						sel_in_form[i].length = 0;
					}
					
				}			
				sel[to].length = 0;
				sel[to].className = 'active';
				var opt = json.select.options;
				for (var i = 0; i < opt.length; i++) {
					//each of these becomes an option :)
					sel[to].options.add(new Option(opt[i],opt[i],false)); 
					//alert(opt[i]);
				}
			}
			if (json.car) {
				//color-code the car
				document.getElementById('carBox' + json.car.id).className = 'colorCode' + json.car.id;
				//insert MSRP
				document.getElementById('cmsrp' + json.car.id).innerHTML = to$(json.car.msrp);
				cars[json.car.id] = json.car;
				if (csupport == true) {
					if (!drawready) {
						document.getElementById('views').className = '';
						document.body.className = '';
						document.getElementById('dimView').className = '';
					}
					draw();
					drawready = true;
				} else {
					//color-code the column
					document.getElementById('col' + json.car.id).className = 'colorCode' + json.car.id;
					popTable(cars[json.car.id])
				}
			}
		
		} else {
			alert('Problem connecting to server (request status ' + xhr.status + ').  Please try again later.')
		}
	}	
}

function init() {
	//only run init once
	if (ready == true) return;

	//if canvas is supported, unhide everything and set up control
	if (document.getElementById('dimDisplay') && document.getElementById('dimDisplay').getContext && !window.opera) {
		csupport = true;
		document.getElementById('textOutput').className = 'hide';
		for (var i = 0; i < 3; i ++) {
			document.getElementById('cmsrp' + i).className = 'msrp';
		}

		var cv = document.getElementById('views').getElementsByTagName('a');
		for (var i = 0; i < cv.length; i++) {
			cv[i].onclick = changeView;
		}
	}
	if (xhr != null) {
		var inputs = document.getElementsByTagName('input');
		for (var i = 0; i < inputs.length; i++) {
			if (inputs[i].className == 'reset') {
				inputs[i].onclick = removeCar;
			} 
		}
		var f = document.getElementsByTagName('form')[0];
		f.className = '';
		f.onsubmit = function() {return false};
		
		sel_in_form = document.getElementsByTagName('select');
		for (var i = 0, len = sel_in_form.length; i < len; i++) {
			if (sel_in_form[i].getAttribute('name')) {
				if (i == 0) sel_in_form[i].className = 'active';
				sel[sel_in_form[i].getAttribute('name')] = sel_in_form[i];
				sel_in_form[i].onchange = function() {sendRequest(this)};
			}
		}
	}
	
	//see if we are in text-only mode intentionally vs. text-only degraded mode
	if (('' + window.location).indexOf('tm') > -1 || csupport) {
		document.getElementById('textMode').className='';
		document.getElementById('disclaimer').className = 'hide';
	}
		
	sel['year0'].selectedIndex=0;
	
	ready = true;
	
}


if (xhr != null) {
	if (document.addEventListener) {
		document.addEventListener("DOMContentLoaded", init, false);
	}
	window.onload = init;
}