function setupLocaleAndMode(locale,mode) {
    //do request
    var request = getRequest();
    request.open("get", "/UAWSelectorServlet?data=locale&locale=" + locale, false);
    request.send(null);

    //do request
    var request = getRequest();
    request.open("get", "/UAWSelectorServlet?data=orderAvailability&orderAvailability=" + mode, false);
    request.send(null);
}

function getVehiclesInfo(makeId) {

	//do request
	var request = getRequest();
	request.open("get", "/UAWSelectorServlet?data=styles&modelId=" + makeId, false);
	request.onreadystatechange = function() {
		if ( request.readyState == 4 ) {
		 	//populate table with new styles
		 	var allStyles = trimContent(request.responseText).split(";;");
			var lowestMsrp = 0;
			var trimName = "";
			for (var i = 0; i < allStyles.length; i++) {
				var eachStyle = allStyles[i];
				var styleParams = eachStyle.split("~~");	
				var msrp = styleParams[4];
				if ( i == 0 ) {
					lowestMsrp = msrp;
				} else if ( msrp < lowestMsrp ) {
					lowestMsrp = msrp;
				}
			}
			
			return styleParams[3];
		}
	}
  	request.send(null);
}

function getVehicleModels(vehicleId) {
	//do request
	var request = getRequest();
	request.open("get", "/UAWSelectorServlet?data=styles&modelId=" + vehicleId, false);
  	request.send(null);
	
	return trimContent(request.responseText);	
}

function getModelStandardEquipment(styleId,headerName) {
	//do request
	var request = getRequest();
	request.open("get", "/UAWSelectorServlet?data=standardequipment&headername=" + headerName + "&styleId=" + styleId, false);
  	request.send(null);
	
	return trimContent(request.responseText);
}

function fillSelect(selectElm, responseText) {
    selectElm.options.length = 0;
    //selectElm.options[0] = new Option("", "0", true, true);
    var response = responseText.split(";;");
    for (var i = 0; i < response.length; i++) {
        var style = response[i].split("~~");
       	selectElm.options[selectElm.options.length] = new Option(style[1], style[0], false, false);
    }
    selectElm.disabled = false;
}

function fillModelsSelect(selectElm, modelsArray) {
    selectElm.options.length = 0;
    //selectElm.options[0] = new Option("", "0", true, true);
    for (var i = 0; i < modelsArray.length; i++) {
        var style = modelsArray[i].split("~~");
       	selectElm.options[selectElm.options.length] = new Option(style[0], style[1], false, false);
    }
    selectElm.disabled = false;
}

function fillCfModelsSelect(selectElm, modelsArray) {
    selectElm.options.length = 0;
    //selectElm.options[0] = new Option("", "0", true, true);
    for (var i = 0; i < modelsArray.length; i++) {
        var style = modelsArray[i].split("~~");
		cfModelName = style[0];
		cfModelYear = style[1];
       	selectElm.options[selectElm.options.length] = new Option(cfModelYear + " " + cfModelName, cfModelName, false, false);
    }
    selectElm.disabled = false;
}

function selectTab(activeTab,active_gtab,content,subcontent) {

	// ================== get reference to all tabs
	tab = document.getElementById("tabs-config");
	//gtab = document.getElementById("graphical-tabs");
	aTab = document.getElementById(activeTab);
	//a_gtab = document.getElementById(active_gtab);

	// ================== check if tab being selected is disabled
	if ( aTab.className == "disabled" ) {
		return;
	}
	if ( active_gtab == 'g_options_options' ) {
		if ( getDomContent('details-options-note') == "None Selected" ) {
			return;
		}
	}
	
	// ================== reset all tabs
	tabCount = tab.getElementsByTagName("DIV")[0].getElementsByTagName("DIV").length;
	for ( i=0;i<tabCount;i++ ) {
		currentTab = tab.getElementsByTagName("DIV")[0].getElementsByTagName("DIV")[i];
		currentTab.className = "label";
		//currentGTab = gtab.getElementsByTagName("IMG")[i];
		//currentGTab.src = "/images/100/configurator/" + gtab.getElementsByTagName("A")[i].getAttribute('name') + ".gif"
		//currentGTab = gtab.getElementsByTagName("IMG")[6];
		//currentGTab.src = "/images/100/configurator/" + gtab.getElementsByTagName("A")[6].getAttribute('name') + ".gif"		
	}
	
	// ================== set active tab
	aTab.parentNode.className = "label active-tab-label";
	//a_gtab.getElementsByTagName("IMG")[0].src = "/images/100/configurator/" + a_gtab.getAttribute('name') + '_selected.gif';
	
	// ================== hide the content body of all inactive tabs
	body = document.getElementById("config-tab-body");			
	contentCount = body.getElementsByTagName("DIV").length;
	for ( i=0;i<contentCount;i++ ) {
		currentDiv = body.getElementsByTagName("DIV")[i];
		if ( currentDiv.id.indexOf('tab-body') == 0 ) {
			currentDiv.style.display = "none";
		}
	}
	hideDom('colors_options_body');
	hideDom('options_options_body');
	
	// ================== show the content body of active tab
	try {
		optionsNextButton = document.getElementById("next-button");
		optionsBackButton = document.getElementById("back-button");
		bottomOptionsNextButton = document.getElementById("bottom-next-button");
		bottomOptionsBackButton = document.getElementById("bottom-back-button");
		tabSystemMessage = getDomContent("config-text");
		detailsContentArea = document.getElementById("config-details");
		configTabBody = document.getElementById("config-tab-body");
		mainContentArea = document.getElementById("config-main");
		
		document.getElementById(content).style.display = "block";
		var isContentLoading = false;
		if ( tabSystemMessage.indexOf('Loading') >= 0 ) {
			isContentLoading = true;
		}
		switch (content) {
			case "tab-body-make": 			
				if ( !isContentLoading ) {
					setDomContent( 'config-text','Click to select a make' );
				}
				detailsContentArea.style.display = "none";
				configTabBody.style.width = "710px";
				mainContentArea.style.width = "710px";
				hideNavButtons();
				break;
			case "tab-body-model": 			
				if ( !isContentLoading ) {
					setDomContent( 'config-text','Click to select a model' ); 
				}
				detailsContentArea.style.display="none";
				hideNavButtons();
				configTabBody.style.width = "710px";
				mainContentArea.style.width = "710px";
				break;
			case "tab-body-trim": 			
				if ( !isContentLoading ) {
					setDomContent( 'config-text','Click to select a trim' ); 
				}
				detailsContentArea.style.display="none";

				initDom('trim-back-button').onclick = function() {
					hideNavButtons();
					selectTab('t_model','g_model','tab-body-model');
				}												
				initDom('trim-next-button').onclick = function() {
					var styleId = '0';
					trims = document.getElementsByName('trimName');
					for ( i=0;i<trims.length;i++ ) {
						if ( trims[i].checked ) {
							styleId = trims[i].value;
							break;
						}
					}
					displayTrimInfo(styleId);
				}	
				configTabBody.style.width = "710px";
				mainContentArea.style.width = "710px";
				hideNavButtons();				
				break;
			case "tab-body-colors": 
				if ( !isContentLoading ) {
					setDomContent( 'config-text','Click to select an exterior color.' ); 
				}
				hideNavButtons();
				showDom('colors_image');
				hideDom('options_image');
				showDom('color-next-button');
				showDom('color-back-button');
				hideDom('option-next-button');
				hideDom('option-back-button');					
				showDom('config-details');
				showDom('colors_options_body');

				initDom('color-back-button').onclick = function() { selectTab('t_trim','g_trim','tab-body-trim'); }	
				initDom('color-back-button').style.cursor = 'pointer';					

				setDomContent('colors_name',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname'));										

				// ==== ON TAB ACTIVATE: If colors have not yet been selected, disable next button else enable and assign onclick functionality.
				if ( getDomContent('description-color-info').length <= 0 ) {
					initDom('color-next-button').onclick = "javascript: void(0)";
					initDom('color-next-button').style.cursor = 'not-allowed';
				} else {
					initDom('color-next-button').onclick = function() { displayOptions(); }
					initDom('color-next-button').style.cursor = 'pointer';
				}
				configTabBody.style.width = "470px";
				mainContentArea.style.width = "470px";
				break;	
			case "tab-body-options": 
				if ( getDomContent('description-color-info').length <= 0 ) {
					return;
				}
				showDom('options_options_body'); 
				hideDom('colors_options_body');					
				setDomContent('config-text','Click to select an option');
				showDom('options_image');
				hideDom('colors_image');		
				hideDom('color-next-button');
				hideDom('color-back-button');	
				showDom('option-next-button');
				showDom('option-back-button');					
				hideDom('colors_options_body');
				showDom('options_options_body');

				hideNavButtons();
				detailsContentArea.style.display = "block";
				configTabBody.style.width = "470px";
				mainContentArea.style.width = "470px";				

				setDomContent('options_name',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname'));										
				initDom('option-next-button').onclick = function() { displaySummary(); }		
				initDom('option-back-button').onclick = function() { selectTab("t_colors","g_colors_options","tab-body-colors"); }												
				initDom('option-next-button').style.cursor = "pointer";
				initDom('option-back-button').style.cursor = "pointer";					
				break;
			case "tab-body-summary": 		
				setDomContent('config-text','Select to change any of your selections'); 
				detailsContentArea.style.display = "block";
				setDomContent('summary_name',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname'));										
			
				/*setDomContent('option-next','Next: Request quote');*/
				/*setDomContent('bottom-option-next','Next: Request quote');*/				
				initDom('summary-next-button').onclick = function() { displayQuote(); }
				initDom('summary-back-button').onclick = function() { selectTab("t_options","g_colors_options","tab-body-options"); }		
				changeNavButtonsCursor('pointer');
				/*showNavButtons();*/
				configTabBody.style.width = "470px";
				mainContentArea.style.width = "470px";				
				hideNavButtons();
				break;											
			case "tab-body-quote": 			
				hideNavButtons();
				document.getElementById("config-text").innerHTML = "To request a dealer quote please enter your information below"; 
				setDomContent('quote_name',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname'));										
				detailsContentArea.style.display = "block";
				configTabBody.style.width = "470px";
				mainContentArea.style.width = "470px";				
				break;					
			default: document.getElementById("config-text").innerHTML = "Invalid tab selected.";
		}
	} catch (Exception) {}
}

function hideDom(dom) {
	try {
		document.getElementById(dom).style.display = "none";
	} catch( Exception ) {}
}

function showDom(dom) {
	try {
		document.getElementById(dom).style.display = "block";
	} catch( Exception ) {}
}

function setDomContent(dom,value) {
	try {
		document.getElementById(dom).innerHTML = value;
	} catch( Exception ) {}
}

function appendDomContent(dom,value) {
	try {
		document.getElementById(dom).innerHTML += value;
	} catch( Exception ) {}
}

function getDomContent(dom) {
	try {
		return document.getElementById(dom).innerHTML;
	} catch( Exception ) {}
}

function initDom(dom) {
	try {
		return document.getElementById(dom);
	} catch( Exception ) {}
}

function changeNavButtonsCursor(curPointer) {
	initDom('next-button').style.cursor = curPointer;
	initDom('option-next').style.cursor = curPointer;	
	initDom('bottom-next-button').style.cursor = curPointer;
	initDom('bottom-option-next').style.cursor = curPointer;	
}

function resetSelectedColors() {
	// empty selected color fields
	setDomContent('selected-ext-color','');
	setDomContent('selected-int-color','');	
	setDomContent('details-color-note','');	
	setDomContent('description-color-info','');
	initDom('color-desc').className = 'unconfigured-desc';
	initDom('details-color-note').className = 'unconfigured-note';
	initDom('details-color-header').getElementsByTagName('SPAN')[0].innerHTML = "<a onclick='javascript: expandContractDom(this,initDom(\"description-color-info\"));' href='javascript:void(0);'>+ Color</a>";
	
	// reset color borders
	extColorDivs = initDom('ext-colors').getElementsByTagName('DIV');
	for ( i=0;i<extColorDivs.length;i++ ) {
		extColorDivs[i].style.border = "1px solid #ccc";
	}
	intColorDivs = initDom('int-colors').getElementsByTagName('DIV');
	for ( i=0;i<intColorDivs.length;i++ ) {
		intColorDivs[i].style.border = "1px solid #ccc";
	}
	
	hideDom('int-color-box');
	
}

function updateConfigSummary(op) {
	try {
		var infos = value.split('~~');
	} catch (Exception) {}
	switch (op) {
		case "selectedMake":
			resetSelectedColors();
			
			// disable all other tabs once a make is selected
			initDom('t_trim').className = 'disabled';
			initDom('t_colors').className = 'disabled';
			initDom('t_options').className = 'disabled';
			initDom('t_summary').className = 'disabled';
			initDom('t_quote').className = 'disabled';
			//initDom('g_trim').className = 'disabled';
			//initDom('g_colors_options').className = 'disabled';
			//initDom('g_options_options').className = 'disabled';
			//initDom('g_summary').className = 'disabled';
			//initDom('g_quote').className = 'disabled';
			
			break;
		case "selectedModel":
		
			// disable all other tabs once a make is selected
			initDom('t_colors').className = 'disabled';
			initDom('t_options').className = 'disabled';
			initDom('t_summary').className = 'disabled';
			initDom('t_quote').className = 'disabled';
			//initDom('g_colors_options').className = 'disabled';
			//initDom('g_options_options').className = 'disabled';
			//initDom('g_summary').className = 'disabled';
			//initDom('g_quote').className = 'disabled';

			// ==== fill all infos on page
			setDomContent('details-model-name',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname') + "<br /><span id='details-trim'>" + getDomContent('modelinfo-stylename')+"</span>");
			setDomContent('colors_image',"<div style='width=290px;height:130px;overflow:hidden'><img class='colors-image-image' src='"+ getDomContent('modelinfo-photo') +"'/></div><div class='evoxSignature'><img src='/images/000/evoxlogo.jpg' alt='&copy; eVox Productions' /></div>");
			setDomContent('options_image',"<img class='options-image-image' src='" + getDomContent('modelinfo-photo') + "' /><div class='evoxSignature'><img src='/images/000/evoxlogo.jpg' alt='&copy; eVox Productions' /></div>");
			setDomContent('details-payment-msrp',comatize(getDomContent('modelinfo-basemsrp')));
			setDomContent('details-payment-subtotal',comatize(getDomContent('modelinfo-basemsrp')));
			setDomContent('details-payment-options','$0.0');
			/*setDomContent('details-model-note',getDomContent('modelinfo-year') + " " + getDomContent('modelinfo-makename') + " " + getDomContent('modelinfo-modelname'));*/
			/*setDomContent('details-trim-note',getDomContent('modelinfo-stylename'));*/
			setDomContent('summary_make',getDomContent('modelinfo-makename'));
			setDomContent('summary_model',getDomContent('modelinfo-stylename'));
			setDomContent('summary_trim',getDomContent('modelinfo-modelname'));	
				
			// ==== get estimated  payment
			updatePrice(); 
			calcMonthly(); 
			setDomContent('details-payment-estimate', '$' + document.options.monthly.value);
			
			// ==== activate areas with values
			/*initDom('model-desc').className = "configured-desc";	initDom('details-model-note').className = "configured-note";*/
			/*initDom('trim-desc').className = "configured-desc";	initDom('details-trim-note').className = "configured-note";*/
		return;
		case "selectedExtColor":
			document.configForm.selectedExtColor.value = infos[1];
			initDom('color-desc').className = "configured-desc";
			initDom('details-color-note').className = "configured-note";		
			setDomContent('details-color-note',infos[0]);
			setDomContent('ext-color-name',infos[0]);
			setDomContent('description-color-info','Exterior: ' + getDomContent('ext-color-name') + "<br />" + "Interior: " + getDomContent('int-color-name'))
			// ==== update Summary
			setDomContent('summary_extcolor',getDomContent('ext-color-name'));
			// ==== Update Right Configuration Box
			if ( initDom('description-color-info').style.display != "block" ) {
				expandContractDom(initDom('details-color-header').getElementsByTagName('A')[0],initDom('description-color-info'));	
			}
		return;
		case "selectedIntColor":
			// colorName ~~ colorCode
			document.configForm.selectedIntColor.value = infos[1];
			initDom('color-desc').className = "configured-desc";
			initDom('details-color-note').className = "configured-note";			
			setDomContent('int-color-name',infos[0]);
			setDomContent('description-color-info','<div>Exterior: ' + getDomContent('ext-color-name') + "</div><div>Interior: " + getDomContent('int-color-name') + "</div>")
			// ==== update Summary
			setDomContent('summary_intcolor',getDomContent('int-color-name'));
			// ==== Update Right Configuration Box
			if ( initDom('description-color-info').style.display != "block" ) {
				expandContractDom(initDom('details-color-header').getElementsByTagName('A')[0],initDom('description-color-info'));	
			}
		return;
		case "selectedOptions":
			// GroupName ~~ ChromeCode ~~ ItemName
				document.getElementById('details-options-note').innerHTML = "Selected";
				injectSelect(document.configForm.selectedOptions,infos[0] + "~~" + infos[1]);
				options = document.configForm.selectedOptions.options;
				var optList = "";
				
				for ( i=0;i<options.length;i++ ) {
					if( options[i].innerHTML != "" )
					{
						var option = options[i].innerHTML.split("::");
						if ( option[1] != "" ) {
							optList += "<div style='font-weight: bold; text-transform: capitalize;'>" + option[0] + "</div><div style='font-weight: normal; margin-left: 3px; text-transform: capitalize;'>- " + option[1] + "</div>";
						} else {
							optList += "<div style='font-weight: bold; text-transform: capitalize;'>" + option[0] + "</div>";
						}
					}
				}
				initDom('description-options-info').innerHTML = optList;
				
			// ==== Update Right Configuration Box
				initDom('options-desc').className = "configured-desc";
				initDom('details-options-note').className = "configured-note";	
			return;				
	}
}

function displaySelectedOptions() {
	 opt = initDom('options_options_body');
	 optImg = opt.getElementsByTagName("IMG");
	 var content = "";
	 var currentGroup ="";
	 for ( i=0;i<optImg.length;i++ ) {
		status = optImg[i].getAttribute('title');
		group = optImg[i].getAttribute('group');
		desc = optImg[i].getAttribute('desc');
		
		if ( i == 0) {
			currentGroup = group;
		}
					if ( option[1] != "" ) {
						optList += "<div style='font-weight: bold; text-transform: capitalize;'>" + option[0] + "</div><div style='font-weight: normal; margin-left: 3px; text-transform: capitalize;'>- " + option[1] + "</div>";
					} else {
						optList += "<div style='font-weight: bold; text-transform: capitalize;'>" + option[0] + "</div>";
					}
		
		
		if ( status.toUpperCase() = "SELECTED" ) {
			if ( currentGroup == group ) {
				content = "<div style='font-weight: bold; text-transform: capitalize;'>" + group + "</div><div style='font-weight: normal; margin-left: 3px; text-transform: capitalize;'>- " + desc + "</div>";
			} else {
				content += "<div style='font-weight: bold; text-transform: capitalize;'>" + desc + "</div>";
			}
		}
	 }
}

function colorHover(colorObj,colorName,colorbox,colornamebox,tempbox) {
	try {
		colorObj.style.borderColor = "black";
		setDomContent(colornamebox,colorName);
	} catch(Exception) {}
}

function colorNotHover(colorObj,colorName,colorbox,colornamebox,tempbox) {
	colorObj.style.borderColor = "#ccc";
	var activeColorName = "None selected.";

	if ( getDomContent(tempbox) != "" ) {
		activeColorName = getDomContent(tempbox);
		setDomContent(colornamebox,activeColorName);
	} else {
		setDomContent(colornamebox,activeColorName);
	}
	
	if ( colorName == getDomContent(tempbox) ) {
		var boxName = colorbox.substring(0,3) + "-colors";
		var colors = initDom(boxName).getElementsByTagName('DIV');	
		for ( i=0;i<colors.length;i++ ) {
			colors[i].style.borderColor = "#ccc";
		}
	
		colorObj.style.borderColor = "black";
		setDomContent(colornamebox,colorName);
	} else {
		setDomContent(colornamebox,activeColorName);
	}
}

function resetColors() {
	try {
		extcolors = initDom('ext-colors').getElementsByTagName("DIV");
		intcolors = initDom('int-colors').getElementsByTagName("DIV");
		setDomContent('selected-int-color','');
		for ( i=0;i<extcolors.length;i++ ) {
			extcolors[i].borderColor = "#ccc";
		}
		for ( i=0;i<intcolors.length;i++ ) {
			intcolors[i].borderColor = "#ccc";
		}
	} catch(Exception) {}
}

function expandContractDom(triggerDom, targetDom) {
	var flagName = triggerDom.innerHTML.substring(1,triggerDom.innerHTML.length);
	var flagStatus = triggerDom.innerHTML.substring(0,1);
	if ( flagStatus == "-" ) {
		targetDom.style.display = "none";
		triggerDom.innerHTML = "+" + flagName;
	} else if ( flagStatus == "+" ) {
		targetDom.style.display = "block";
		triggerDom.innerHTML = "-" + flagName;
	}
}

function trimSpaces(content) {
	return content.replace(/^\s+|\s+$/g, '')
}

function summarizeOptions() {
	initDom('options-desc').className = 'configured-desc';
	initDom('details-options-note').className = 'configured-note';
	var options = initDom('options_options_body');
	var checkboxes = options.getElementsByTagName('IMG');
	var previousGroupName = "";
	var optList = " ";
 	var optionBuffer = "";
 	var optionCount=0;
	for ( i=0;i<checkboxes.length;i++ ) {
		var groupName = checkboxes[i].getAttribute('group');
		var status = checkboxes[i].getAttribute('title');
		var description = checkboxes[i].getAttribute('desc');
		var price = checkboxes[i].getAttribute('price');
		var optionCode = checkboxes[i].getAttribute('opcode');

		
		if ( status == "Selected" ) {
			if ( groupName != previousGroupName ) {
				optList += "<div style='font-weight: bold; text-transform: capitalize;'>" + groupName.toLowerCase() + "</div><div style='font-weight: normal; margin-left: 3px; text-transform: capitalize;'>- " + description.toLowerCase() + "</div>";
				initDom('details-options-note').innerHTML = "";
			} else {
				optList += "<div style='font-weight: normal; margin-left: 3px; text-transform: capitalize;'>- " + description.toLowerCase() + "</div>";
				initDom('details-options-note').innerHTML = "";
			}
			previousGroupName = groupName;

			//Store options in string format, and remove text after "-inc" 
			if(optionCount > 0){
				optionBuffer +="~~";
			}
			var last = description.toLowerCase().indexOf("-inc:");
			var option_desc = "";
			if(last > 0){	
				option_desc = description.toLowerCase().substring(0,last);
			} else {
				option_desc = description.toLowerCase();
			}			
			optionBuffer += option_desc+"::"+optionCode.replace("-","")+"::"+price;
				optionCount++;
		}
	}
	initDom('quote-option-desc').innerHTML = optionBuffer;
	initDom('description-options-info').innerHTML = optList;
}

function comatize(content) {
	var comatized = content;
	try {
		index = content.indexOf(".");
		for ( i=(index-3);i>1;i-=3 ) {
			start = content.substring(0,i);
			end = content.substring(i,content.length);
			comatized = start + "," + end;
			content = comatized;
		}
	} catch (Exception) {}
	return comatized;
}