/*
--------------------------------------------------------------------------------
 JavaScript: Tire Selector Entry Form.
 Requires: prototype.js
--------------------------------------------------------------------------------
*/

var TireSelectorEntryForm = Class.create();
TireSelectorEntryForm.prototype = {

// URL to the application that generates the Tire Selector AJAX data.
//
AJAX_URL : '/cfmx/web/gytires/ajax/tireselector/ajax.data.cfm',

// Text used for the first item in each drop down list.
//
LIST_LABEL : "Select\u2026",

// Page elements.
//
VEHICLE_FORM : null,
VEHICLE_YEAR_SELECT : null,
VEHICLE_MAKE_SELECT : null,
VEHICLE_MODEL_SELECT : null,
VEHICLE_OPTION_SELECT : null,
VEHICLE_SUBMIT : null,
SIZE_FORM : null,
SIZE_WIDTH_SELECT : null,
SIZE_RATIO_SELECT : null,
SIZE_DIAMETER_SELECT : null,
SIZE_SUBMIT : null,
TIRE_NAME_SELECT : null,
TIRE_NAME_SUBMIT : null,

// Reference the the Tire Selector tabs.
//
tabs : null,

// Initialize the Tire Selector.
//
initialize : function( elements ) {

	this.VEHICLE_FORM =             $( elements.vehicleForm );
	this.VEHICLE_YEAR_SELECT =      $( elements.vehicleYearSelect );
	this.VEHICLE_MAKE_SELECT =      $( elements.vehicleMakeSelect );
	this.VEHICLE_MODEL_SELECT =     $( elements.vehicleModelSelect );
	this.VEHICLE_OPTION_SELECT =    $( elements.vehicleOptionSelect );
	this.VEHICLE_SUBMIT =           $( elements.vehicleSubmit );
	this.SIZE_FORM =                $( elements.sizeForm );
	this.SIZE_WIDTH_SELECT =        $( elements.sizeWidthSelect );
	this.SIZE_RATIO_SELECT =        $( elements.sizeRatioSelect );
	this.SIZE_DIAMETER_SELECT =     $( elements.sizeDiameterSelect );
	this.SIZE_SUBMIT =              $( elements.sizeSubmit );
	this.TIRE_NAME_SELECT =         $( elements.tireNameSelect );
	this.TIRE_NAME_SUBMIT =         $( elements.tireNameSubmit );

	// Vehicle drop downs.
	if ( this.VEHICLE_YEAR_SELECT != null ) Event.observe( this.VEHICLE_YEAR_SELECT, 'change', this.onYearChange.bind( this ), false );
	if ( this.VEHICLE_MAKE_SELECT != null ) Event.observe( this.VEHICLE_MAKE_SELECT, 'change', this.onMakeChange.bind( this ), false );
	if ( this.VEHICLE_MODEL_SELECT != null ) Event.observe( this.VEHICLE_MODEL_SELECT, 'change', this.onModelChange.bind( this ), false );
	if ( this.VEHICLE_OPTION_SELECT != null ) Event.observe( this.VEHICLE_OPTION_SELECT, 'change', this.onOptionChange.bind( this ), false );
	
	// Tire size drop downs.
	if ( this.SIZE_WIDTH_SELECT != null ) Event.observe( this.SIZE_WIDTH_SELECT, 'change', this.onSizeWidthChange.bind( this ), false );
	if ( this.SIZE_RATIO_SELECT != null ) Event.observe( this.SIZE_RATIO_SELECT, 'change', this.onSizeRatioChange.bind( this ), false );
	if ( this.SIZE_DIAMETER_SELECT != null ) Event.observe( this.SIZE_DIAMETER_SELECT, 'change', this.onSizeDiameterChange.bind( this ), false );

	// Tire name drop down.
	if ( this.TIRE_NAME_SELECT != null ) Event.observe( this.TIRE_NAME_SELECT, 'change', this.onTireNameChange.bind( this ), false );

	this.initForms();

}, // End initialize().

initForms : function() {

	// Reset the forms.
	this.resetVehicleForm();
	this.resetSizeForm();

	// Populate the year field.
    new Ajax.Request(
		this.AJAX_URL + '?select=years', {
		method: 'get',
		onComplete: this.populateYears.bind( this ) }
	);

	// Populate the size width field.
    new Ajax.Request(
		this.AJAX_URL + '?select=sectionwidths', {
		method: 'get',
		onComplete: this.populateSizeWidths.bind( this ) }
	);

	// Populate the tire name field.
    new Ajax.Request(
		this.AJAX_URL + '?select=tirenames', {
		method: 'get',
		onComplete: this.populateTireNames.bind( this ) }
	);

}, // End initForms().

resetVehicleForm : function() {

	if ( this.VEHICLE_MAKE_SELECT != null ) {
		this.VEHICLE_MAKE_SELECT.disabled = true;
		this.clearOptions(this.VEHICLE_MAKE_SELECT);
		this.addOption(this.VEHICLE_MAKE_SELECT, this.LIST_LABEL, "");
	} // End if.

	if ( this.VEHICLE_MODEL_SELECT != null ) {
		this.VEHICLE_MODEL_SELECT.disabled = true;
		this.clearOptions(this.VEHICLE_MODEL_SELECT);
		this.addOption(this.VEHICLE_MODEL_SELECT, this.LIST_LABEL, "");
	} // End if.

	if ( this.VEHICLE_OPTION_SELECT != null ) {
		this.VEHICLE_OPTION_SELECT.disabled = true;
		this.clearOptions(this.VEHICLE_OPTION_SELECT);
		this.addOption(this.VEHICLE_OPTION_SELECT, this.LIST_LABEL, "");
	} // End if.

	if ( this.VEHICLE_FORM != null ) this.VEHICLE_SUBMIT.disabled = true;

	if ( this.VEHICLE_FORM != null ) this.VEHICLE_FORM.reset();

}, // End resetVehicleForm().

resetSizeForm : function() {

	if ( this.SIZE_RATIO_SELECT != null ) {
		this.SIZE_RATIO_SELECT.disabled = true;
		this.clearOptions(this.SIZE_RATIO_SELECT);
		this.addOption(this.SIZE_RATIO_SELECT, this.LIST_LABEL, "");
	} // End if.

	if ( this.SIZE_DIAMETER_SELECT != null ) {
		this.SIZE_DIAMETER_SELECT.disabled = true;
		this.clearOptions(this.SIZE_DIAMETER_SELECT);
		this.addOption(this.SIZE_DIAMETER_SELECT, this.LIST_LABEL, "");
	} // End if.

	if ( this.SIZE_FORM != null ) this.SIZE_FORM.reset();

}, // End resetSizeForm().

onYearChange : function() {

	this.VEHICLE_MAKE_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_MAKE_SELECT);
	this.addOption(this.VEHICLE_MAKE_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_MODEL_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_MODEL_SELECT);
	this.addOption(this.VEHICLE_MODEL_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_OPTION_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_OPTION_SELECT);
	this.addOption(this.VEHICLE_OPTION_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_SUBMIT.disabled = true;

	if ( this.VEHICLE_YEAR_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a year." );
	}

	new Ajax.Request(
		this.AJAX_URL + '?select=makes&year=' + escape( this.VEHICLE_YEAR_SELECT.value ), {
		method: 'post',
		onComplete: this.populateMakes.bind( this ) }
	);

}, // End onYearChange().

onMakeChange : function() {
	
	this.VEHICLE_MODEL_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_MODEL_SELECT);
	this.addOption(this.VEHICLE_MODEL_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_OPTION_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_OPTION_SELECT);
	this.addOption(this.VEHICLE_OPTION_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_SUBMIT.disabled = true;

	if ( this.VEHICLE_MAKE_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a make." );
	}
	
	new Ajax.Request(
	 	this.AJAX_URL + '?select=models&year=' + escape( this.VEHICLE_YEAR_SELECT.value ) + '&make=' + escape( this.VEHICLE_MAKE_SELECT.value ), {
		method: 'get',
		onComplete: this.populateModels.bind( this ) }
	);

}, // End onMakeChange().

onModelChange : function() {

	this.VEHICLE_OPTION_SELECT.disabled = true;
	this.clearOptions(this.VEHICLE_OPTION_SELECT);
	this.addOption(this.VEHICLE_OPTION_SELECT, this.LIST_LABEL, "");

	this.VEHICLE_SUBMIT.disabled = true;

	if ( this.VEHICLE_MODEL_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a model." );
	}

	new Ajax.Request(
	 	this.AJAX_URL + '?select=options&year=' + escape( this.VEHICLE_YEAR_SELECT.value ) + '&make=' + escape( this.VEHICLE_MAKE_SELECT.value ) + '&model=' +  escape( this.VEHICLE_MODEL_SELECT.value ), {
		method: 'get',
		onComplete: this.populateOptions.bind( this ) }
	);

}, // End onModelChange().

onOptionChange : function() {

	this.VEHICLE_SUBMIT.disabled = true;

	if ( this.VEHICLE_OPTION_SELECT.selectedIndex == 0 ) {
		return alert( "Please select an option." );
	}

	this.VEHICLE_SUBMIT.disabled = false;

}, // End onOptionChange().

onSizeWidthChange : function() {

	this.SIZE_RATIO_SELECT.disabled = true;
	this.clearOptions(this.SIZE_RATIO_SELECT);
	this.addOption(this.SIZE_RATIO_SELECT, this.LIST_LABEL, "");

	this.SIZE_DIAMETER_SELECT.disabled = true;
	this.clearOptions(this.SIZE_DIAMETER_SELECT);
	this.addOption(this.SIZE_DIAMETER_SELECT, this.LIST_LABEL, "");

	this.SIZE_SUBMIT.disabled = true;
	
	if ( this.SIZE_WIDTH_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a width." );
	}

	new Ajax.Request(
	 	this.AJAX_URL + '?select=aspectratios&sectionwidth=' + escape( this.SIZE_WIDTH_SELECT.value ), {
		method: 'get',
		onComplete: this.populateSizeRatios.bind( this ) }
	);

}, // End onSizeWidthChange().

onSizeRatioChange : function() {

	this.SIZE_DIAMETER_SELECT.disabled = true;
	this.clearOptions(this.SIZE_DIAMETER_SELECT);
	this.addOption(this.SIZE_DIAMETER_SELECT, this.LIST_LABEL, "");

	this.SIZE_SUBMIT.disabled = true;

	if ( this.SIZE_RATIO_SELECT.selectedIndex == 0 ) {
		return alert( "Please select an aspect ratio." );
	}

	new Ajax.Request(
	 	this.AJAX_URL + '?select=rimdiameters&sectionwidth=' + escape( this.SIZE_WIDTH_SELECT.value ) + '&aspectratio=' + escape( this.SIZE_RATIO_SELECT.value ), {
		method: 'get',
		onComplete: this.populateSizeDiameters.bind( this ) }
	);

}, // End onSizeRatioChange().

onSizeDiameterChange : function() {

	this.SIZE_SUBMIT.disabled = true;

	if ( this.SIZE_DIAMETER_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a diameter." );
	}

	this.SIZE_SUBMIT.disabled = false;

}, // End onSizeDiameterChange().

onTireNameChange : function() {
	
	this.TIRE_NAME_SUBMIT.disabled = true;

	if ( this.TIRE_NAME_SELECT.selectedIndex == 0 ) {
		return alert( "Please select a tire name." );
	}

	this.TIRE_NAME_SUBMIT.disabled = false;
	
}, // End onTireNameChange().

populateYears : function( response ) {	

	this.VEHICLE_YEAR_SELECT.disabled = false;		
	var resp = response.responseText.evalJSON();	
	var years = resp.data;
	for (var i=0; i<years.length; i++) {
		this.addOption(this.VEHICLE_YEAR_SELECT, years[i].DATA, years[i].DATA);
	}

}, // End populateYears().

populateMakes : function(response) {

	this.VEHICLE_MAKE_SELECT.disabled = false;
	var resp = response.responseText.evalJSON();
	var makes = resp.data;
	for (var i=0; i<makes.length; i++) {
		this.addOption(this.VEHICLE_MAKE_SELECT, makes[i].DATA, makes[i].DATA);
	}

}, // End populateMakes().

populateModels : function(response) {

	this.VEHICLE_MODEL_SELECT.disabled = false;
	var resp = response.responseText.evalJSON();
	var models = resp.data;
	for (var i=0; i<models.length; i++) {
		this.addOption(this.VEHICLE_MODEL_SELECT, models[i].DATA, models[i].DATA);
	}

}, // End populateModels().

populateOptions : function( response ) {

	this.VEHICLE_OPTION_SELECT.disabled = false;
	var resp = response.responseText.evalJSON();
	var options = resp.data;
	for (var i=0; i<options.length; i++) {
		this.addOption(this.VEHICLE_OPTION_SELECT, options[i].DATA, options[i].DATA);
	}

}, // End populateOptions().

populateSizeWidths : function(response){	

	this.SIZE_WIDTH_SELECT.disabled = false;	
	var resp = response.responseText.evalJSON();
	var sizeWidths = resp.data;
	for (var i=0; i<sizeWidths.length; i++) {
		this.addOption(this.SIZE_WIDTH_SELECT, sizeWidths[i].DATA, sizeWidths[i].DATA);
	}

}, // End populateSizeWidths().

populateSizeRatios : function( response ) {

	this.SIZE_RATIO_SELECT.disabled = false;
	var resp = response.responseText.evalJSON();
	var sizeRatios = resp.data;
	for (var i=0; i<sizeRatios.length; i++) {
		this.addOption(this.SIZE_RATIO_SELECT, sizeRatios[i].DATA, sizeRatios[i].DATA);
	}

}, // End populateSizeRatios().

populateSizeDiameters : function( response ) {

	this.SIZE_DIAMETER_SELECT.disabled = false;
	var resp = response.responseText.evalJSON();
	var sizeDiameters = resp.data;
	for (var i=0; i<sizeDiameters.length; i++) {
		this.addOption(this.SIZE_DIAMETER_SELECT, sizeDiameters[i].DATA, sizeDiameters[i].DATA);
	}

}, // End populateSizeDiameters().

populateTireNames : function( response ) {	

	this.TIRE_NAME_SELECT.disabled = false;		
	var resp = response.responseText.evalJSON();	
	var tireNames = resp.data;
	for (var i=0; i<tireNames.length; i++) {
		var url = '/goodyeartireselectorca/display_tire.jsp?prodline=' + escape( tireNames[i].NAME ) + '&mrktarea=' + escape( tireNames[i].CATEGORY );
		url = url.replace( '+', '%2B' );
		this.addOption( this.TIRE_NAME_SELECT, tireNames[i].NAME, url );
	}

}, // End populateTireNames().

/**
 * Remove all of the options from the passed <select> object
 *
 * @param selectObject
 */
clearOptions : function(selectObject)
{
	if (!selectObject) {
		return;
	}
	
	while (selectObject.options.length>0) {
		selectObject.remove(0);
	}
}, // End this.clearOptions().

/**
 * Add a name/value option to the passed <select> object
 *
 * @param selectObject
 * @param name
 * @param value
 */
addOption : function(selectObject, name, value) {
	if (!selectObject) {
		return;
	}
	
	selectObject.options[selectObject.options.length] = 
		new Option(name, value);
}, // End this.addOption().

/**
 * Trim leading and trailing whitespace
 *
 * @param str
 */
trim : function(str) {
	if (!str) {
		return "";
	}
	return str.replace(/^\s+|\s+$/g,"");
} // End trim().

}; // End class TireSelectorEntryForm.