/*
	uiLogic.js
	carbuilder
	ben@dealer.com
	*/
	
	var fName = "optionsForm";
	var violationDialog;	
	
	// NOTE: overrides default display logic in option-logic.js
	var includeNbs = false;
	var noPngSupport = /MSIE ((5\.5)|[6789])/.test(navigator.userAgent) && navigator.platform == "Win32";
	var blankImg = "blank-status.png";
	var includedImg = "included.png";
	var excludedImg = "excluded2.png";
	var requiredImg = "required.png";
	var selectedImg = "selected.png";
	
	function violation( left, right, violationType ) {
		violationDialog.getDoc().body.innerHTML = "";
		
		//this method puts the violation at the cursor possition instead of centered... 
		openDialog(violationDialog, null, true); //showDialog();
		
		var bg = "line-height: 20px; background-color:#CFCFCF";
		if( noPngSupport ){
			violationDialog.getDoc().body.innerHTML = "<div style='background: #cdcdcd; border-bottom: 1px solid #898989; font-size: 14px; "+
				"font-weight: bold; margin-left: -10px; margin-top: -15px; margin-right: -10px; padding: 3px;"+bg+"'>.: Option Conflict :.</div>";
		}else{
			violationDialog.getDoc().body.innerHTML = "<div style='background: #cdcdcd; border-bottom: 1px solid #898989; font-size: 14px; "+
				"font-weight: bold; margin-left: -8px; margin-right: -8px; margin-top: -8px; padding: 3px;"+bg+"'>.: Option Conflict :.</div>";
		}
		
		violationDialog.getDoc().body.innerHTML += "<div id='wrapper' style='overflow: auto; width: 100%; height: 100%; margin: 0px; padding: 0px;'></div>";
		
		violationDialog.getDoc().getElementById("wrapper").innerHTML += "<div style='color: #550000; padding-top: 3px; font-size: 12px;'>"+
			"<b>The option you have selected below has caused a conflict.</b> Please resolve any conflicts by modifying your selections below. "+
			"This window will close when the conflicts have been resolved. Un-check the option you just checked to cancel.</div><br/>";
		
		displayExpression( left, violationDialog.getDoc() );
		
		var img = ((violationType=='requires')?requiredImg:(violationType=='includes')?includedImg:excludedImg);
		var imgStr = "<img src='"+img+"' border='0' width='15' height='15' valign='top' style='margin-top: -1px;'>";
		
		if( noPngSupport )
			imgStr = "<img id='dlgImg' src='blank.gif' border='0' width='15' height='15' align='absmiddle'>";
		
		violationDialog.getDoc().getElementById("wrapper").innerHTML += "<br/><br/><div style='padding-bottom: 2px;'><b style='font-weight: bold; color: #550000;'>"+
			violationType.toUpperCase() + "</b> ("+imgStr+") the following Options or Colors:</div>";
		includeNbs = true;
		
		if( noPngSupport )
			setTimeout("IEImgHack('"+img+"')", 300);
				
		displayExpression( right, violationDialog.getDoc() );
	}
	
	function IEImgHack( img ){
		violationDialog.getDoc().getElementById("dlgImg").runtimeStyle.filter = 
			"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + img + "',sizingMethod='scale')";
	}
	
	// NOTE: overrides default display logic in option-logic.js
	function displayExpression( expression, doc ){
		displayingExpression = true; // defined in option-logic.js
		if( expression instanceof Or ){
			displayExpression( expression.left, doc );
			doc.getElementById("wrapper").innerHTML += "&nbsp;&nbsp;<b>OR</b><br/>";
			displayExpression( expression.right, doc );
		}else if( expression instanceof And ){
			displayExpression( expression.left, doc );
			doc.getElementById("wrapper").innerHTML += "&nbsp;&nbsp;<b>AND</b><br/>";
			displayExpression( expression.right, doc );
		}else{
			// construct the checkbox html which references the Option objects
			var checkbox = new Array();			
			
			if( includeNbs )
				checkbox.push( "&nbsp;&nbsp;&nbsp;" );
				
			checkbox.push("<input type='checkbox' ");
			if ( _contains(selectedOptions,expression.optionId ) || _contains(includedOptions,expression.optionId ) || _contains(requiredOptions,expression.optionId) )
				checkbox.push("checked ")
			checkbox.push("onClick=\"parent.closeViolationDialog();parent.doLogic( this"+((self.fName)?", '"+self.fName+"'":"")+" )\" id='" + expression.optionId + "'>");

			var option = findObject( packages, expression.optionId );
			if ( option == null )
				option = findObject( options, expression.optionId );
			if ( option == null )
				option = findObject( exteriorColors, expression.optionId );
			if ( option == null )
				option = findObject( interiorColors, expression.optionId );
		
			checkbox.push( "&nbsp;" + ((!includeNbs)?"<b>":"") + option.name + ((!includeNbs)?"</b>":"") );
			checkbox.push( "</input>" );

			doc.getElementById("wrapper").innerHTML += checkbox.join("");
		}
		
		displayingExpression = false;
	}
	
	// NOTE: overrides default display logic in option-logic.js
	function closeViolationDialog(){
		if ( !displayingExpression ){
			violationDialog.closeDialog();
			includeNbs = false;
			//setTimeout("updateTotals();", 500);
		}
	}
	
	function updateUI(){
	
		
		for (var i = 0; i < selectedOptions.length; i++) {
			
			if(document.getElementById( selectedOptions[i] ))
			   document.getElementById( selectedOptions[i] ).checked = true;
		
			if(document.getElementById("opt_"+selectedOptions[i]))	{	
					optionsTotal += parseInt(document.getElementById("opt_"+selectedOptions[i]).getAttribute("price"));
			}
			
			if(document.getElementById( 'img-' + selectedOptions[i] ) )
				document.getElementById( 'img-' + selectedOptions[i] ).src = "/carbuilder/lite/optionlogic/"+selectedImg;
				
			if(isColor(selectedOptions[i])){
				alert("found color in selected options.");	
				document.getElementById( 'swatch_' + selectedOptions[i] ).className = 'selectedSwatch';
			}
		}	
		
		for (var i = 0; i < includedOptions.length; i++) {
			
			document.getElementById( includedOptions[i] ).checked = true;
			if(document.getElementById("opt_"+includedOptions[i]))
				document.getElementById("opt_"+includedOptions[i]).style.backgroundColor = "#B6D1E5";
				
			if(document.getElementById( 'img-' + includedOptions[i] ) )
				document.getElementById( 'img-' + includedOptions[i] ).src = "/carbuilder/lite/optionlogic/"+includedImg;
			
		}
		
		for (var i = 0; i < requiredOptions.length; i++) {
			document.getElementById( requiredOptions[i] ).checked = true;
			
			if(document.getElementById("opt_"+requiredOptions[i])){
				document.getElementById("opt_"+requiredOptions[i]).style.backgroundColor = "#ACD2A3";
				optionsTotal += parseInt(document.getElementById("opt_"+requiredOptions[i]).getAttribute("price"));				
			}
			if(document.getElementById( 'img-' + requiredOptions[i] ) )
				document.getElementById( 'img-' + requiredOptions[i] ).src = "/carbuilder/lite/optionlogic/"+requiredImg;
			
		}
	
		for (var i = 0; i < excludedOptions.length; i++) {
			document.getElementById( excludedOptions[i] ).checked = false;

			if(document.getElementById( 'opt_' + excludedOptions[i] )){
				document.getElementById( 'opt_' + excludedOptions[i] ).style.backgroundColor = '#cfcfcf';
				document.getElementById( 'opt_' + excludedOptions[i] ).style.color = '#666666';
			}
			if(document.getElementById( 'img-' + excludedOptions[i] )	)
				document.getElementById( 'img-' + excludedOptions[i] ).src = "/carbuilder/lite/optionlogic/"+excludedImg;
				
			if(isColor(excludedOptions[i])){	
				document.getElementById( 'swatch_' + excludedOptions[i] ).className = 'excludedSwatch';
				document.getElementById( 'swatch_' + excludedOptions[i] ).style.color="#FFFFFF";
				document.getElementById( 'swatch_' + excludedOptions[i] ).style.color="#FFFFFF";
			}	
		}
		
		//set the cookie for summary page and page refreshing... 		
		cookies.setCookie("CarbuilderSelectedOptions", selectedOptions.toString() );
		cookies.setCookie("CarbuilderIncludedOptions", includedOptions.toString() );
		cookies.setCookie("CarbuilderRequiredOptions", requiredOptions.toString() );
		cookies.setCookie("CarbuilderExcludedOptions", excludedOptions.toString() );
		cookies.setCookie("CarbuilderVehicleId", vehicleId );
		
		updatePrices( );
		checkColors( document.optionsForm.elements );
	}
	
	function clearAll( inputs ) {
		
		//reset prices
		optionsTotal = 0;
		
		for( var i = 0; i < inputs.length; i++ ) {
			document.getElementById( inputs[i].id ).checked = false;			
			if(document.getElementById( 'img-' + inputs[i].id ))
				document.getElementById( 'img-' + inputs[i].id ).src = "/carbuilder/lite/optionlogic/"+blankImg;
			
			if(document.getElementById( 'swatch_' + inputs[i].id ))
				document.getElementById( 'swatch_' + inputs[i].id ).className = 'colorSwatch';
			
		}
		
	}
	
	function checkColors( inputs ){
	
		for( var i = 0; i < inputs.length; i++ ) {			
			//only options have coloring indicators.. 
			if(document.getElementById( 'opt_' + inputs[i].id )){
				
				document.getElementById( 'opt_' + inputs[i].id ).style.color = '#000000';
					
				//if it's not checked and not in excluded options array needs to be white
				if( ! document.getElementById( inputs[i].id ).checked  
				&&  ! _contains(excludedOptions, inputs[i].id)
				&&  ! _contains(selectedOptions, inputs[i].id) ){
					document.getElementById( 'opt_' + inputs[i].id ).style.backgroundColor = '#FFFFFF';
					document.getElementById( 'opt_' + inputs[i].id ).style.color = '#000000';
				}
				
				
				
				//if it's checked...
				if( document.getElementById( inputs[i].id ).checked && !updated ){
					if(_contains(selectedOptions,inputs[i].id))
						document.getElementById( 'opt_' + inputs[i].id ).style.backgroundColor = "#FFFBC2";
					else if(_contains(includedOptions,inputs[i].id))
						document.getElementById( 'opt_' + inputs[i].id ).style.backgroundColor = "#B6D1E5";
					else if(!_contains(excludedOptions, inputs[i].id) )
						document.getElementById( 'opt_' + inputs[i].id ).style.backgroundColor = "#cfcfcf";
				}
				
				//if it's in the excluded array it needs to be grey..
				if(_contains(excludedOptions, inputs[i].id)){
					document.getElementById( 'opt_' + inputs[i].id ).style.backgroundColor = '#cfcfcf';
					document.getElementById( 'opt_' + inputs[i].id ).style.color = '#666666';
				}
								
			}else{
				//need to check colors and mark accordingly.. 
				if(_contains(selectedOptions,inputs[i].id))
					document.getElementById( 'swatch_' + inputs[i].id ).className = 'selectedSwatch';
				if(_contains(excludedOptions,inputs[i].id))	
					document.getElementById( 'swatch_' + inputs[i].id ).className = 'excludedSwatch';
			}
		}
		updated = true;			
	}
	
	
	//this function is called on load to maintain the users last selected state.. 
	var updated = false;
	function checkUIUpdate( ){
		//only restore the selected options if we're dealing with the same vehicle.. 
		if(cookies.getCookie("CarbuilderVehicleId") && vehicleId == cookies.getCookie("CarbuilderVehicleId")){
			
			//retrieve the data from the cookies.. 
			if(cookies.getCookie("CarbuilderSelectedOptions")!="")
				selectedOptions = cookies.getCookie("CarbuilderSelectedOptions").split(",");
			
			if(cookies.getCookie("CarbuilderIncludedOptions"))
				includedOptions = cookies.getCookie("CarbuilderIncludedOptions").split(",");
			
			if(cookies.getCookie("CarbuilderRequiredOptions"))
				requiredOptions = cookies.getCookie("CarbuilderRequiredOptions").split(",");
			
			if(cookies.getCookie("CarbuilderExcludedOptions"))
				excludedOptions = cookies.getCookie("CarbuilderExcludedOptions").split(",");
			
			//alert("update? " + selectedOptions + "\nio=" + excludedOptions.length);
			updateUI( );
			
		}				
	}
	
	
	function isColor(optionId){
		if(document.getElementById("swatch+"+optionId))
			return true;
		else
			return false;
		
	}