function showSpecsGroup(specGroup) {
	
	currentTabId=specGroup;

	var listWrapper = document.getElementById('pSpecGroupList');
	var liArr = listWrapper.getElementsByTagName('li');
	for (var i = 0; i < liArr.length; i++) {
		liArr[i].className="tab";

		if(i<(liArr.length-1)){
			if(currentTabId=="tabAll"){
				document.getElementById('specGroup' + i).className = "pSpecGroup.active";
			}else if(liArr[i].id == currentTabId ){
				document.getElementById('specGroup' + i).className = "pSpecGroup.active";
			}else{
				document.getElementById('specGroup' + i).className = "pSpecGroup";
			 }
		}

	}
document.getElementById(specGroup).className="activeTab";

}

function changeHref(val){
	document.getElementById("pdfGoBtn").href = val;
}

var BYO_IMAGE_BASE = BASE_CONTEXT + '/assets/en/images/tools/BYO';
function showOptionPopUpDetails(vehicleCode,imageType,divId, optionCode, optionTitle,optionDescription) {
	var content = "<table id=\"optionTextPopup\" border=\"0\" bgcolor=\"#fff\" cellspacing=\"0\" cellpadding=\"2\" style=\"font-size:13px;\">";
		content += "<tr><td id='titleDetailded' colspan=2><table border=0><tr><td width='100%'><div id='descDetailed'>"+optionTitle+"</div></td><td width=75><div id=\"closeBtn\" onClick='closeMask()'>Close[X]</div></td></tr></table>";
		content += "<tr><td class='optionTextPopup' rowspan='3'><img id='test' src='"+BYO_IMAGE_BASE+"/thumbnails/"+vehicleCode+"/"+imageType+optionCode+".jpg' onError=\"showDefaultImage(this)\" height='140' width='140'></td>";
		content += "<td class='optionTextPopup' align=\"left\">"+optionDescription+"<br><br><br></td></tr>";
		content += "</table>";
	document.getElementById("optiondetailContent").innerHTML = content;
	var optionDiv = document.getElementById("optionDetailDialog");
	var targetPosition = getPosition( document.getElementById(divId) );
	var layerTop = targetPosition.y + 250;
	var layerLeft = targetPosition.x + 180;
	optionDiv.style.top = layerTop + "px";
	optionDiv.style.left = layerLeft + "px";
	optionDiv.style.display = "";
	optionDiv.style.visibility = "visible";
}

function closeMask(){
	var optionDiv = document.getElementById("optionDetailDialog");
	optionDiv.style.visibility = "hidden";
}

function showDefaultImage(imgObj){
	imgObj.src=BYO_IMAGE_BASE+'/thumbnails/generic.jpg';
	return;
}
function featuresTracking (selectedTab, modelSpecs,division,vehicleType, year , family){
	modelSpecs =modelSpecs.toUpperCase();
	selectedTab = selectedTab.toUpperCase();
	division=division.toUpperCase();
	vehicleType = vehicleType.toUpperCase();
	family = family.toUpperCase();
	clickTrack( {
		pageName : division + ' | ' + family + ' ' + year + ' | SPECS | ' + selectedTab,
		prop1 : family + ' ' + year,
		prop2 : 'SPECS',
		prop3 : family + ' ' + year + ' | SPECS',
		prop4 : selectedTab,
		prop5 : 'SPECS | ' + selectedTab,
		prop6 : family + ' ' + year + ' | SPECS | ' + selectedTab,
		prop7 : 'INDEX',
		prop8 : selectedTab + ' | INDEX',
		prop9 : 'SPECS | ' + selectedTab + ' | INDEX',
		prop10 : family + ' ' + year + ' | SPECS | ' + selectedTab + ' | INDEX',
		prop17 : 'VEHICLE DETAILS',
		prop18 : 'RESEARCH',
		prop19 : vehicleType,
		prop24 : 'EN',
		prop25 : division,
		prop26 : (new Date()).getHours(),
		prop27 : weekday[(new Date()).getDay()],
		prop30 : family + ' ' + modelSpecs + ' ' + year,
		prop31 : family + ' ' + modelSpecs + ' ' + year + ' | SPECS'
	});
	//tracking is not firing	JSP	17	FEATURES & SPECS	Features & Specs: when someone accesses the Fuel tab		<<DIVISION>> | <<MODEL>> | SPECS | FUEL	<<MODEL>>	SPECS	<<MODEL>> | SPECS	FUEL	SPECS | FUEL	<<MODEL>> | SPECS | FUEL	INDEX	FUEL | INDEX	SPECS | FUEL | INDEX	<<MODEL>> | SPECS | FUEL | INDEX							VEHICLE DETAILS	RESEARCH	<<VEHICLE TYPE>>					<<LANGUAGE>>	<<DIVISION>>	<<TIME OF DAY>>	<<DAY OF WEEK>>

}

function featuresOnStarTracking (selectedTab, modelSpecs,division,vehicleType, year , family, future_name){
	modelSpecs =modelSpecs.toUpperCase();
	selectedTab = 'SAFETY';
	division=division.toUpperCase();
	vehicleType = vehicleType.toUpperCase();
	family = family.toUpperCase();
	clickTrack( {
		pageName : division + ' | ' + family + ' ' + year + ' | SPECS | ' + selectedTab,
		prop1 : family + ' ' + year,
		prop2 : 'SPECS',
		prop3 : family + ' ' + year + ' | SPECS',
		prop4 : selectedTab,
		prop5 : 'SPECS | ' + selectedTab,
		prop6 : family + ' ' + year + ' | SPECS | ' + selectedTab,
		prop7 : future_name,
		prop8 : selectedTab + ' | ' + future_name,
		prop9 : 'SPECS | ' + selectedTab + ' | ' + future_name,
		prop10 : family + ' ' + year + ' | SPECS | ' + selectedTab + ' | ' + future_name,
		prop17 : 'VEHICLE DETAILS',
		prop18 : 'RESEARCH',
		prop19 : vehicleType,
		prop24 : 'EN',
		prop25 : division,
		prop26 : (new Date()).getHours(),
		prop27 : weekday[(new Date()).getDay()],
		prop30 : family + ' ' + modelSpecs + ' ' + year,
		prop31 : family + ' ' + modelSpecs + ' ' + year + ' | SPECS'
	});
}

var currentLayer = "suv1",currentSubModel = "",currentRadio, currentFirstRadio,currentSecondRadio;
var whichLayer,whichInput,whichSpan;
var check = false,disable = false;

function showLayer(id){
	document.getElementById(id).style.display="block";
}
function hideLayer(id){
	document.getElementById(id).style.display="none";
}
function closeLayer(){
	document.getElementById(currentLayer).style.display="none";
}

function initLayer(subModel,layerId,myArray,currentCombo,styleIds,tab){//open the layer
	showLayer(layerId);

	if(tab!="") showSpecsGroup(tab);
	if(styleIds!="") currentCombo = getComboByStyleId(myArray, styleIds);
	//alert(styleIds+"/"+currentCombo);
	currentSubModel = subModel;
	currentLayer = layerId;
	initRadio(layerId);
	loadRadio(layerId,myArray, subModel,currentCombo);
}
function initRadio(layerId){//make all radio active
	whichLayer = document.getElementById(layerId);
	whichInput = whichLayer.getElementsByTagName("input");
	whichSpan = whichLayer.getElementsByTagName("span");
	for(var i=0; i<whichInput.length-1; i++){
		whichInput[i].disabled = false;
		whichInput[i].checked = false;
		whichSpan[i].className = "active";
	}
}

function loadRadio(layerId,myArray,subModel,currentCombo){//first time load the layer, preload the popular choices, currentCombo is the number of the combo order of this subModel, which is the popular one when first load
	if(layerArray[layerId].length==1){//1 level case
		for(var i=0; i<whichInput.length-1; i++){
			if(whichInput[i].value==myArray[currentCombo][0]){ //preload the popular case
				whichInput[i].checked=true;
				whichSpan[i].className = "active";
			}
		}
	}else if (layerArray[layerId].length==2){//2 levels case
		for(var i=0; i<whichInput.length-1; i++){
			if(whichInput[i].value==myArray[currentCombo][0] || whichInput[i].value==myArray[currentCombo][1]){ //preload the popular case
				whichInput[i].checked=true;
				whichSpan[i].className = "active";
			}
			if(whichInput[i].value==myArray[currentCombo][0]) currentRadio = whichInput[i];
		}
		toggleRadio(currentRadio, layerId);//just like click the level1

	}else{//3 levels case
		for(var i=0; i<whichInput.length-1; i++){
			if(whichInput[i].value==myArray[currentCombo][0] || whichInput[i].value==myArray[currentCombo][1] || whichInput[i].value==myArray[currentCombo][2]){//preload
				whichInput[i].checked=true;
				whichSpan[i].className = "active";
			}
			if(whichInput[i].value==myArray[currentCombo][0]) {currentRadio = whichInput[i];}
			if(whichInput[i].value==myArray[currentCombo][1]) {currentSecondRadio = whichInput[i];}

		}
		toggleRadio(currentRadio, layerId);//just like click the level1
		//toggleRadio(currentSecondRadio, layerId);//just like click the level2
	}
}

var comboExist=false;
var specialCase=false;
var currentLevel, specialLevelName, vanCase;

function toggleRadio(thisRadio, layerId, filterKeepActive){
	for(var k=0; k<layerArray[layerId].length; k++){
		if(layerArray[layerId][k]==thisRadio.name){
			currentLevel = k; // the level which has the current radio picked
		}
	}
	for(var n=0;  n<whichInput.length-1; n++){
		if(whichInput[n].name==layerArray[layerId][0]){//make the first level active at first
			whichInput[n].disabled=false;
			whichSpan[n].className = "active";
		}
	}
	if(currentLevel!=2){//drive type does not toggle the other levels
	//console.log(currentLevel);
		for(var k=0; k<layerArray[layerId].length; k++){
			if(layerArray[layerId][k]!=thisRadio.name){//find the other level except the currentLevel clicked
				specialCase=false; // each level might have radio checked but need to be disabled in the non-combo case
				for(var j=0; j<whichInput.length-1; j++){
					if(whichInput[j].name==layerArray[layerId][k]){//get the radios in the k level
						if(whichInput[j].disabled){
							whichInput[j].disabled = false;
							whichSpan[j].className = "active";
						}
						comboExist=false;
						for(var m=0; m<subModelArray[currentSubModel][3].length; m++){//check combo
							if(subModelArray[currentSubModel][3][m][k]==whichInput[j].value && subModelArray[currentSubModel][3][m][currentLevel]==thisRadio.value){
								comboExist=true;
							}
						}
						if(!comboExist){//this input radio has non-combo with the currentLevel radio clicked
							if(whichInput[j].checked){
								whichInput[j].checked=false;
								specialCase=true; // need to check the other available radio button
								specialLevelName=whichInput[j].name;
							}
							whichInput[j].disabled=true;
							whichSpan[j].className = "grey";
						}
					}
				}
				if(specialCase){ //pick the first available radio to check in this k level
					for(var n=0;  n<whichInput.length-1; n++){
						if(whichInput[n].name==specialLevelName && !whichInput[n].disabled){
							whichInput[n].checked=true;
							whichSpan[n].className = "active";
							break;
						}
					}
				}
			}
		}
	}
	if(currentLevel==0 && layerArray[layerId].length>2){//when click the first level, make the second level radio call to check the combo between 2nd and 3rd level, so disable not exist combo
		for(var i=0; i<whichInput.length-1; i++){
			if(whichInput[i].name==layerArray[layerId][1]&&whichInput[i].checked)
				currentSecondRadio = whichInput[i]; //find the radio checked in the second level layerArray[layerId][1]
		}
		for(var j=0; j<whichInput.length-1; j++){
			if(whichInput[j].name==layerArray[layerId][0]&&whichInput[j].checked)
				currentFirstRadio = whichInput[j]; //find the radio checked in the second level layerArray[layerId][1]
		}
		
		toggleRadio(currentSecondRadio, layerId, "0");
		disable3rdLevelRadio(currentFirstRadio.value, currentSecondRadio.value, layerId);
	}
	if(filterKeepActive!=null && filterKeepActive!=""){
		for(var p=0;  p<whichInput.length-1; p++){
			if(whichInput[p].name==layerArray[layerId][filterKeepActive]){//make the filterKeepActive level active to solve the dead end case
				whichInput[p].disabled=false;
				whichSpan[p].className = "active";
			}
		}
	}
	vanCase = true;
	if(layerId=="van1"){//express vehicle specail case
		for(var i=0; i<whichInput.length-1; i++){
			if(whichInput[i].name==layerArray[layerId][2]&&whichInput[i].checked)
				vanCase = false;
		}
		if(vanCase){//nothing checked in the 3rd level
			for(var i=0; i<whichInput.length-1; i++){
				if(whichInput[i].name==layerArray[layerId][2]&&!whichInput[i].disabled){
					whichInput[i].checked=true; break;
				}
			}
		}
	}
}

function disable3rdLevelRadio(v1, v2, layerId){
	var tempV="";
	for(var mm=0; mm<subModelArray[currentSubModel][3].length; mm++){//check combo
		if(subModelArray[currentSubModel][3][mm][0]==v1 && subModelArray[currentSubModel][3][mm][1]==v2){
			tempV = tempV +','+ subModelArray[currentSubModel][3][mm][2];
		}
	}
	for(var jj=0; jj<whichInput.length-1; jj++){
		if(whichInput[jj].name==layerArray[layerId][2]){
			if(tempV.indexOf(whichInput[jj].value)==-1){
				whichInput[jj].disabled=true;
				whichSpan[jj].className = "grey";
			}
		}
	}
}

function getComboByStyleId(myArray, styleIds){
	var combo = "0";
	for(c=0;c<myArray.length;c++){
		if(myArray[c][4]==styleIds)
			combo = c;
	}
	return combo;
}