function show_component(id) {
	$$('div.componentList li a').invoke('removeClassName','gold');
	$$('.componentDisplay').invoke('hide');	
	$('component_'+id).show();
	$('component_link_'+id).down().addClassName('gold');	
}


// http://datashaman.com/blog/2007/03/30/get-url-parameters-in-javascript/
// TODO: Rework this
function setupParameters() {
    var parameters = new Object();
    if(window.location.search) {
        var paramArray = window.location.search.substr(1).split('&');
        var length = paramArray.length;
 
        for (var index = 0;index <length; index++ ) {
            var param = paramArray[index].split('=');
            var name = param[0];
            var value =
                typeof param[1] == "string"
                ? decodeURIComponent(param[1].replace(/\+/g, ' '))
                : null;
            parameters[name] = value;
        }
    }
    window.location.parameters = parameters;
}

function getParameter(name) {
    if(typeof window.location.parameters == "undefined")
        setupParameters();
    return window.location.parameters[name];
}
// GetParams


Event.addBehavior({ 
  "form.remote" : Remote.Form
});


function open_new_window(url, w, h) {
	if(url) {
		var width = (w) ? w : 600;
		var height = (h) ? h : 400;
		var default_options = "resizable=yes,scrollbars=yes,location=yes,status=yes,toolbars=yes";
		window.open(url,'mywindow','width=' + width + ',height=' + height + "," + default_options);
	}
}


function toggleCriteria(name) {
	if(name == "planname") {
		var div = document.getElementById();
		var image = document.getElementById();
	}
}

function toggleBlind(element) {
	el = document.getElementById(element);
	if(el.style.display == "none") {
		Effect.BlindDown(element, {duration:0.15});
	} else {
		Effect.BlindUp(element, {duration:0.15});
	}
}

function togglePlanCriteriaArrow(element) {
	el = document.getElementById(element);
	var rightImg = '/images/plans/rightArrow.png';
	var downImg = '/images/plans/downArrow.png';
	var re = /right/.test(el.src)	;
	el.src = (re) ? downImg : rightImg;
	return;
}

/*
*	Determines equality of two arrays
* @returns		true | false
*/
function areArraysEqual(array1, array2) {
   var temp = new Array();
   if ( (!array1[0]) || (!array2[0]) ) { // If either is not an array
      return false;
   }
   if (array1.length != array2.length) {
      return false;
   }
   // Put all the elements from array1 into a "tagged" array
   for (var i=0; i<array1.length; i++) {
      key = (typeof array1[i]) + "~" + array1[i];
   // Use "typeof" so a number 1 isn't equal to a string "1".
      if (temp[key]) { temp[key]++; } else { temp[key] = 1; }
   // temp[key] = # of occurrences of the value (so an element could appear multiple times)
   }
   // Go through array2 - if same tag missing in "tagged" array, not equal
   for (var i=0; i<array2.length; i++) {
      key = (typeof array2[i]) + "~" + array2[i];
      if (temp[key]) {
         if (temp[key] == 0) { return false; } else { temp[key]--; }
      // Subtract to keep track of # of appearances in array2
      } else { // Key didn't appear in array1, arrays are not equal.
         return false;
      }
   }
   // If we get to this point, then every generated key in array1 showed up the exact same
   // number of times in array2, so the arrays are equal.
   return true;
}


/**
* Marks a dom element for deletion. Used by the admin controller for removing attributes from vehicles
*/
function mark_for_destroy(element) {
	$(element).next('.should_destroy').value = 1;
	$(element).up('.info_row').hide();
}

/** -------------------------------------------------------------------
* PLAN-DETAIL-PAGE
* Methods used for the plan detail view: /plans/PLAN_NAME
* ------------------------------------------------------------------- */
		
	function onPlanFormSubmitBegin() {
		$("planFormSpinner").show();
	}
	
	function onPlanFormSubmitComplete() {
		$("planFormSpinner").hide();		
	}

/** -------------------------------------------------------------------
* PLAN-SEARCH-PAGE
* Methods used for the plan search feature located at /plans/search
* ------------------------------------------------------------------- */

	/**
	 * Used for to initialize the first step of the request a quote process: /quote
	 */
	function search_wizardStep1() {
		var ddlYear = $('year');
		var ddlManufacturer = $('make_id');
		
		var resetFields = new Array( ddlYear, ddlManufacturer);
		for (var i = 0; i < resetFields.length; i++) 
			if (resetFields[i]) resetFields[i].selectedIndex = 0;
		
		//search_setVehicleParameters( getParameter('year'), getParameter('make_id'), getParameter('model_id'));
		ddlYear.observe('change', function(event) {
			search_onYearChange(event.target);
		});
		ddlManufacturer.observe('change', function(event) {
			search_onMakeChange(event.target);
		});
	}
	
	/**
	 * Used to strip any commas from mileage before the form is submitted
	 */
	function search_addFormBeforeSubmitHook(form_id) {
		$(form_id).observe('submit', function(event) {
			var old_mileage = $('search_mileage').value;
			$('search_mileage').value = old_mileage.replace(',','');
		});
	}
	

	/**
	 * Initializes a plan search form, set callbacks on drop elements. Automatically assigns GET variables to 
	 * applicable fields
	 */
	function search_initVehicles() {
		var ddlCountry = $('country_id');
		var ddlYear = $('year');
		var ddlManufacturer = $('make_id');
		
		var resetFields = new Array( ddlCountry, ddlYear, ddlManufacturer);
		for (var i = 0; i < resetFields.length; i++) 
			if (resetFields[i]) resetFields[i].selectedIndex = 0;
		
		search_setVehicleParameters( getParameter('year'), getParameter('make_id'), getParameter('model_id'));
		search_setGeoParameters( getParameter('country_id'), getParameter('state_id'));
		ddlYear.observe('change', function(event) {
			search_onYearChange(event.target);
		});
		ddlManufacturer.observe('change', function(event) {
			search_onMakeChange(event.target);
		});
	}
	
	function search_onYearChange(dropDownYears) {
		$('make_id').selectedIndex = 0;
		$('make_id').focus();
		$('model_id').selectedIndex = 0;
	}
	
	function search_onMakeChange(dropDownMake) {
		var vehicleMakeId = makes[dropDownMake.selectedIndex - 1][0];
		var vehicleModels = getModelsFromMakeId(vehicleMakeId);
		var vehicleModelOptions = convertArrayToOptions( vehicleModels);
		vehicleModels = new Array( getSelectPromptOption()).concat(vehicleModelOptions);
		setDropList( 'model_id', vehicleModels);
		$('model_id').focus();
	}
	
	/**
	 * Used for to initialize the first step of the request a quote process: /quote
	 */
	function search_wizardStep1() {
		var ddlYear = $('year');
		var ddlManufacturer = $('make_id');
		
		var resetFields = new Array( ddlYear, ddlManufacturer);
		for (var i = 0; i < resetFields.length; i++) 
			if (resetFields[i]) resetFields[i].selectedIndex = 0;
		
		//search_setVehicleParameters( getParameter('year'), getParameter('make_id'), getParameter('model_id'));
		ddlYear.observe('change', function(event) {
			search_onYearChange(event.target);
		});
		ddlManufacturer.observe('change', function(event) {
			search_onMakeChange(event.target);
		});
	}
	
	
	/**
	 * Sets the search page drop downs to the GET values passed in query string
	*/
	function search_setVehicleParameters(vehicleYear, makeId, modelId) {
		var ddlYear = $('year');
		var ddlMake = $('make_id');
		var ddlModel = $('model_id');
		var numYear = parseInt(vehicleYear);
		var numMakeId = parseInt(makeId);
		var numModelId = parseInt(modelId);		
		var vehicleYearOption = ddlYear.select('option[value='+numYear+']');
		var vehicleMakeOption = ddlMake.select('option[value='+numMakeId+']');
		
		if (numYear > 0 && vehicleYearOption.length > 0) {
			ddlYear.selectedIndex = vehicleYearOption[0].previousSiblings().size();
		}
		
		if (numMakeId > 0 && vehicleMakeOption.length > 0) {
			ddlMake.selectedIndex = vehicleMakeOption[0].previousSiblings().size();
			var vehicleMakeId = makes[ddlMake.selectedIndex - 1][0];
			var modelsForMake = getModelsFromMakeId(vehicleMakeId);
			var modelDropOptions = new Array( getSelectPromptOption()).concat( convertArrayToOptions(modelsForMake));
			setDropList('model_id', modelDropOptions);
			
			var vehicleModelOption = ddlModel.select('option[value='+numModelId+']');
			if (numModelId > 0 && vehicleModelOption.length > 0) 
				ddlModel.selectedIndex = vehicleModelOption[0].previousSiblings().size();
		}
	}
	
	// Called when the drop down element has been changed
	function search_onCountryChange(dropDownCountry) {
		var country_id = $('country_id').getValue();
		var ddlStates = $('state_id');
		var states = getStatesFromCountryId(country_id);
		var stateOptions = new Array( getSelectPromptOption()).concat( convertArrayToOptions(states));
		setDropList( 'state_id', stateOptions);
		ddlStates.focus();
	}
	
	function search_setGeoParameters(countryId, stateId) {
		var ddlCountries = $('country_id');
		var ddlStates = $('state_id');
		var numCountryId = parseInt(countryId);
		var numStateId = parseInt(stateId);
		var countryOption = ddlCountries.select('option[value='+numCountryId+']');
		
		if (numCountryId > 0 && countryOption.length > 0) {
			ddlCountries.selectedIndex = countryOption[0].previousSiblings().size();
			var states = getStatesFromCountryId(countryId);
			var stateDropOptions = new Array( getSelectPromptOption()).concat( convertArrayToOptions(states));
			setDropList('state_id', stateDropOptions);
			
			var activeStateOption = ddlStates.select('option[value='+numStateId+']');
			if (numStateId > 0 && activeStateOption.length > 0)
				ddlStates.selectedIndex = activeStateOption[0].previousSiblings().size();
		}
		
	}
	
	
/** -------------------------------------------------------------------
* LEFT-PANEL-WIDGET
* Left navigation methods for working with plan finder widget
* ------------------------------------------------------------------- */

	// Called when the a year is selected from side drop down
	function onSideWidgetYearSelected(yearList) {
		sideWidgetResetMakeModels();
		sideWidgetAssignManufacturers();
		$('left_make_id').focus();
	}

	function sideWidgetResetYear() {
		$('left_year').selectedIndex = 0;
	}

	function sideWidgetAssignManufacturers() {
		var manufacturers = getVehicleManufacturers();
		var manufacturerOptions = convertArrayToOptions( manufacturers);
		var manufacturerList = new Array( getSelectPromptOption()).concat(manufacturerOptions);
		setDropList('left_make_id', manufacturerList);
	}


	// Resets all side widget drop down lists
	function sideWidgetResetMakeModels() {
		var sideLists = new Array('left_make_id', 'left_model_id');
		for (var i=0; i < sideLists.length; i++)
			setDropListEmpty(sideLists[i]);
	}


	function onSideWidgetMakeSelected(vehicleMakeList) {
		if (vehicleMakeList.selectedIndex == 0) {
			setDropListEmpty('left_model_id');
			return;
		}
		var vehicleMakeId = makes[vehicleMakeList.selectedIndex - 1][0];
		var vehicleModels = getModelsFromMakeId(vehicleMakeId);
		var vehicleModelOptions = convertArrayToOptions( vehicleModels);
		vehicleModels = new Array( getSelectPromptOption()).concat(vehicleModelOptions);
		setDropList( 'left_model_id', vehicleModels);
		$('left_model_id').focus();
	}

/** -------------------------------------------------------------------
* VEHICLE-HELPERS
* GeneralHelper methods for working with dynamic drop down lists
* @dependencies: dynamic_makes.js must be loaded first
* ------------------------------------------------------------------- */

	// Converts a js array into a new array of option pairs
	function convertArrayToOptions(originalArray) {
		var optionsArray = new Array();
		for( var i =0; i < originalArray.length; i++)
			optionsArray.push( createOptionTag( originalArray[i][1], originalArray[i][0]));
		return optionsArray;
	}

	// Returns a JS array of all vehicle manufacturers
	function getVehicleManufacturers() {
		var manufactureres = new Array();
		for (var i = 0; i < makes.length; i++) {
			var make = new Array( makes[i][0], makes[i][1]);
			manufactureres.push(make);
		}
		return manufactureres;
	}

	/**
	 * Returns an <option /> element
	 * @param	value 	the value attribute of the tag
	 * @param	text		the text value of the option
	 */
	function createOptionTag(text, value) {
		return '<option value="' + value + '">' + text + "</option>";
	}
	
	// Returns generic <option> tag with a 'Select' prompt
	function getSelectPromptOption() {
		return createOptionTag("Please select", 0);
	}

	// Returns models defined in makes variable
	function getModelsFromMakeId(makeId) {
		return makes[makeId - 1][2];
	}

	// Sets the drop down list to its default page load state
	function setDropListEmpty(dropDownList) {
		clearDropList(dropDownList);
		setDropList( dropDownList, new Array(getSelectPromptOption()));
	}

	/**
	 * Populates a drop down list with specified options
	 * @param dropDownList		the id of the drop down list to fill
	 * @param optionsArray		an array of <option> tags
	 */
	function setDropList(dropDownList, optionsArray) {
		var opts = "";
		var ddl = $(dropDownList);
		for (var i = 0; i < optionsArray.length; i++)
			opts += optionsArray[i];
		ddl.update(opts);
	}
	
	// Removes decendants of a drop down list
	function clearDropList(dropDownList) {
		$(dropDownList).update();
	}

/** -------------------------------------------------------------------
* STATE-SELECTION
* Helper methods for drop down state lists
* @dependencies: dynamic_states.js must be loaded first
* ------------------------------------------------------------------- */
		
	function getStatesFromCountryId(countryId) {
		var countryStates = new Array();
		for (var i=0; i < states.length; i++) {
			var stateData = states[i];
			var stateLabel = stateData[1];
			var stateId = stateData[2];
			if (parseInt(stateData[0]) == parseInt(countryId)) countryStates.push( new Array(stateId, stateLabel));
		}
		return countryStates;
	}


/** -------------------------------------------------------------------
* CHAT
* Helper methods for online chat interface for Live2Support.com
* ------------------------------------------------------------------- */

	function initChat() {
		
	}