var iModels = 4;
vcc.xmlModels = null;
vcc.arSelectedEngines = [];
var iCarImgOrigH;

document.write("<style>#loadingCompare { visibility:visible; }</style>");

vcc.initModels = function() {
	if (strDropdownXml.length > 0)
		vcc.onEnginesLoad(strDropdownXml);
	else {
		vcc.showError("No Dropdown XML");
	}
	iCarImgOrigH = vcc.getH("carImg0");
	vcc.hide("loadingCompare");
}

vcc.onEnginesLoad = function(result) {
	vcc.xmlModels = vcc.createXmlObj(result, true);
	if (!vcc.xmlModels) {
		vcc.showBrowserTooOld("loadingCompare", sBrowserTooOld);
		return;
	}	
	arXmlModels = vcc.xmlModels.firstChild.childNodes;
	for (var i=0; i<iModels; i++) {
		var elmModelSelect = vcc.getElementByIdFragment("selectModel" + i, "select");
		if (elmModelSelect) {
			elmModelSelect.setAttribute("selectnr", i);
			elmModelSelect.onchange = vcc.listEnginesNew;
			for (var j=0; j<arXmlModels.length; j++) {
				var elmOption = document.createElement("option");				
				elmModelSelect.appendChild(elmOption);
				elmOption.innerHTML = arXmlModels[j].getAttribute("displayname");
				elmOption.value = j;
				elmOption.setAttribute("modelCode", arXmlModels[j].getAttribute("modelcode").toLowerCase());
			}
		}
	}
	//vcc.hide("loading");
}

// This function is renamed to avoid conflicting name with the original function which is saved in custom-javascript-fields on old CMS-site.
vcc.listEnginesNew = function() {
	var iSelectNr = this.getAttribute("selectnr");
	var iSelectedModel = parseInt(this.options[this.selectedIndex].value);
	var elmEngineSelect = vcc.getElementByIdFragment("selectEngine" + iSelectNr, "select");
	var elmModelSelect = vcc.getElementByIdFragment("selectModel" + iSelectNr, "select");
	vcc.arSelectedEngines[iSelectNr] = "";
	if (!isNaN(iSelectedModel)) {
		var arEngines = arXmlModels[iSelectedModel].childNodes;
		elmEngineSelect.disabled = false;
		elmEngineSelect.setAttribute("selectnr", iSelectNr);
		elmEngineSelect.onchange = vcc.onEngineChoose;
		elmEngineSelect.options.length = 0;
		for (var i=0; i<arEngines.length; i++) {
			var elmOption = document.createElement("option");
			//elmEngineSelect.options.add(elmOption);
			elmEngineSelect.appendChild(elmOption);
			elmOption.innerHTML = arEngines[i].getAttribute("shortdisplayname");
			elmOption.value = arEngines[i].getAttribute("id");
			//var sCarName = elmModelSelect.options[elmModelSelect.selectedIndex].getAttribute("carName");
			//var sImgUrl = arCarImages[sCarName];
			var sModelCode = elmModelSelect.options[elmModelSelect.selectedIndex].getAttribute("modelCode").toLowerCase();
			var sImgUrl = arCarImages[sModelCode] || "/_layouts/Volvocars.Web.Sites/Images/compare_models_car_silhuette.jpg";
			elmOption.setAttribute("image", sImgUrl);
		}
		if (arEngines.length) // preselect the first engine
			vcc.onEngineChoose(null, elmEngineSelect);
	}
	else {
		elmEngineSelect.disabled = true;
		elmEngineSelect.options.length = 0;
		var elmImage = vcc.getObj("carImg" + iSelectNr);
		elmImage.src = "/_layouts/Volvocars.Web.Sites/Images/compare_models_car_silhuette.jpg";
	}
	vcc.colorModelData(iSelectNr);
	vcc.fixCompareButton();
}

vcc.fixCompareButton = function() {
	var bCarSelected;
	for (var i=0; i<iModels; i++) {
		var elmSelect = vcc.getElementByIdFragment("selectModel" + i, "select");
		if (elmSelect.options[elmSelect.selectedIndex].value.length > 0)
			bCarSelected = true;
	}
	var sClass = bCarSelected ? "deluxeButton" : "deluxeButton off";
	var elmButton = vcc.getObj("compareButton");
	elmButton.className = sClass;
}

vcc.filterCategories = function(iCategory) {
	var elmDataTable = vcc.getObj("modelData");
	var arRows = elmDataTable.getElementsByTagName("tr");
	for (var i=0; i<arRows.length; i++) {
		if (iCategory.length < 1)
			arRows[i].style.display = "";
		else {
			if (arRows[i].id.indexOf("modelCategory") > -1 && arRows[i].id.indexOf("modelCategory" + iCategory + "_") < 0)
				arRows[i].style.display = "none";
			else
				arRows[i].style.display = "";
		}
	}
}

vcc.colorModelData = function(iSelectNr, bReset) {
	if (bReset) {
		for (var i=0; i<iModels; i++) {
			vcc.addCssRule(".dataCell" + i, "color:black !important;");
			vcc.addCssRule(".dataCell" + i + " .modelHeader", "color:#ffffff !important; ");
		}
	}
	else {
		vcc.addCssRule(".dataCell" + iSelectNr, "color:#aaaaaa !important;");
		vcc.addCssRule(".dataCell" + iSelectNr + " .modelHeader", "color:#aaaaaa !important; ");
	}
}

vcc.onEngineChoose = function(evt, elmSelect) {
	elmSelect = elmSelect ? elmSelect : evt ? evt.target : this;
	var iSelectNr = elmSelect.getAttribute("selectnr");
	var sChoosenEngine = elmSelect.options[elmSelect.selectedIndex].value;
	vcc.arSelectedEngines[iSelectNr] = sChoosenEngine;
	var sImg = elmSelect.options[elmSelect.selectedIndex].getAttribute("image");
	var elmImage = vcc.getObj("carImg" + iSelectNr);
	elmImage.src = sImg;
	
	if (elmSelect)
		vcc.colorModelData(elmSelect.getAttribute("selectnr"));	
}

vcc.postCompareData = function() {
	var oXml = vcc.createXmlObj("<specification><vehicles></vehicles><categories/></specification>");
	var bCarSelected;
	for (var i=0; i<iModels; i++) {
		var oVehicleNode = oXml.createElement("vehicle");
		oXml.documentElement.firstChild.appendChild(oVehicleNode);
		var sId = vcc.arSelectedEngines[i];
		if (sId) {
			oVehicleNode.setAttribute("id", sId);
			bCarSelected = true;
		}
	}
	if (bCarSelected) {
		vcc.show("loadingCompare");
		VolvoCars.Web.Sites.WebServices.SCNG.GetComparisonByModelVariants(sMarketModelyearId, vcc.serializeXml(oXml), sCategoryMap, vcc.iGlobalState, vcc.GetComparisonByModelVariants_CallBack, vcc.GetComparisonByModelVariants_Failed);
	}
}

vcc.GetComparisonByModelVariants_CallBack = function(result, eventArgs) {
	var oParams = { sAllHeader: sAllTechnicalData };
	//var sXml = oAjaxXml.responseText;
	var oXml = vcc.createXmlObj(result);
	vcc.transformXml(oXml, "/_layouts/volvocars.web.sites/xslt/CompareModels.xslt", true, vcc.showCompareData, oParams);
}

vcc.GetComparisonByModelVariants_Failed = function(error) {
	vcc.hide("loadingCompare");
	alert(error.get_message());
}

vcc.showCompareData = function(sHtml) {
	vcc.hide("loadingCompare");
	vcc.colorModelData(null, true);
	var elmData = vcc.getObj("modelData");
	sHtml = sHtml.replace(/&amp;nbsp;/g, "&nbsp;"); // Firefox doesn't support disable-output-escaping in XSLT...
	elmData.innerHTML = sHtml;
	
	// Color the rows
	var sClass = "dataRow altColor";
	var arRows = elmData.getElementsByTagName("tr");
	for (var i=0; i<arRows.length; i++) {	
		if (arRows[i].className.indexOf("dataRow") > -1) {
			
			var bRowHasData = false;
			// Check if the row has any visible data, else hide it
			for (var c=0; c<iModels; c++) {
				var elmSelect = vcc.getElementByIdFragment("selectEngine" + i, "select");
				if (arRows[i].cells[c+1].innerHTML.toLowerCase().indexOf("<br") > 0)
					bRowHasData = true;
			}
			// If the row has cells that displays data, color it
			if (bRowHasData) {
				arRows[i].className = sClass;
				vcc.show(arRows[i]);
				sClass = (sClass == "dataRow") ? "dataRow altColor" : "dataRow";
			}
			else {
				arRows[i].className = "dataRow hidden";
			}
		}
		else
			sClass = "dataRow altColor";
	}
	
	// Stupid Firefox doesn't support disable-output-escaping, thats why we have to do this:
	var elmSelectFilter = vcc.getObj("selectFilter");
	elmSelectFilter.options[0].innerHTML = sAllTechnicalData;
}

function OnTimeout(result) 
{
	alert("Timed out");
}

vcc.addEvent(window, "load", "vcc.initModels");

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();