/*
--------------------------------------------------------------------------------
 JavaScript: 2008 NPP4 Promotion Landing Page.
--------------------------------------------------------------------------------
*/

// Default value for the ZIP field. This gets set automatically.
//
var my_onZipFieldValue;

// Reference the the tire selector tabs.
//
var my_tabs;

// Executed when the page initializes.
//
function my_init() {

	// Set up the ZIP code text box functionality.
	var my_zipField = $( 'my_zipField' );
	my_onZipFieldValue = my_zipField.value;
	Event.observe( my_zipField, 'focus', my_onZipFieldFocus, false );
	Event.observe( my_zipField, 'blur', my_onZipFieldBlur, false );
	// Initialize the Tire Selector module.
	my_initTireSelector();

} // End my_init().

/*
--------------------------------------------------------------------------------
 Complete Details.
--------------------------------------------------------------------------------
*/

// Toggle the display for the complete details.
//
function my_toggleDetails( id ) {
	var obj = $( 'my_details' );

	if ( obj.className == 'my_detailsOff' ) {
		obj.className = 'my_detailsOn';
	} else {
		obj.className = 'my_detailsOff';
	} // End if.

} // End my_toggleDetails().

/*
--------------------------------------------------------------------------------
 Tire Selector Module.
--------------------------------------------------------------------------------
*/

// URL to the application that generates the Tire Selector AJAX data.
//
var MY_TIRESELECTOR_AJAX_URL = '/cfmx/web/geminicarcare/ajax/tireselector/ajax.data.cfm';

// Text used for the first item in each drop down list.
//
var MY_TIRESELECTOR_LIST_LABEL = "Select\u2026";

// Initializes the Tire Selector module.
//
function my_initTireSelector() {
	// Vehicle drop downs.
	Event.observe( $( 'my_year' ), 'change', my_yearChange, false );
	Event.observe( $( 'my_make' ), 'change', my_makeChange, false );
	Event.observe( $( 'my_model' ), 'change', my_modelChange, false );
	Event.observe( $( 'my_option' ), 'change', my_optionChange, false );
	
	// Tire size drop downs.
	Event.observe( $( 'my_sizeWidth' ), 'change', my_sizeWidthChange, false );
	Event.observe( $( 'my_sizeRatio' ), 'change', my_sizeRatioChange, false );
	Event.observe( $( 'my_sizeDiameter' ), 'change', my_sizeDiameterChange, false );

	my_initTireSelectorForms();

} // End my_initTireSelector();

// Initializes the tabs.
// Called on the HTML page, immediately after div#my_tabContainer.
//
function my_initTabs() {

	// Find the starting tab.
	var startTab = 0;
	if ( window.location.href.endsWith( '#bySize' ) ) {
		startTab = 1;
	} else if ( window.location.href.endsWith( '#TireCatalog' ) ) {
		startTab = 2;
	} // End if.

	// Initialize the tabs.
	my_tabs = new Tabs( 'my_tabContainer' );
	my_tabs.selectTab( startTab );

} // End my_initTabs().

function my_initTireSelectorForms() {

	// Reset the forms.
	my_resetVehicleForm();
	my_resetSizeForm();

	// Populate the year field.
    new Ajax.Request(
		MY_TIRESELECTOR_AJAX_URL + '?select=years', {
		method: 'get',
		onComplete: my_populateYears }
	);

	// Populate the size width field.
    new Ajax.Request(
		MY_TIRESELECTOR_AJAX_URL + '?select=sectionwidths', {
		method: 'get',
		onComplete: my_populateSizeWidths }
	);

} // End my_initTireSelectorForms().

// Shows/hides a specified form list item.
//
function my_enableFormFieldListItem( listItem, show ) {

	listItem.className = ( ( show ) ? 'my_listItemOn' : 'my_listItemOff' );

} // End my_enableFormFieldListItem().

function my_resetVehicleForm() {

	$('my_make').disabled = true;
	clearOptions($('my_make'));
	addOption($('my_make'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_modelListItem'), false );
	$('my_model').disabled = true;
	clearOptions($('my_model'));
	addOption($('my_model'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_optionListItem'), false );
	$('my_option').disabled = true;
	clearOptions($('my_option'));
	addOption($('my_option'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), false );
	$( 'my_vehicleSubmit' ).disabled = true;

	document.findByVehicle.reset();

} // End my_resetVehicleForm().

function my_resetSizeForm() {

	$('my_sizeRatio').disabled = true;
	clearOptions($('my_sizeRatio'));
	addOption($('my_sizeRatio'), MY_TIRESELECTOR_LIST_LABEL, "");

	$('my_sizeDiameter').disabled = true;
	clearOptions($('my_sizeDiameter'));
	addOption($('my_sizeDiameter'), MY_TIRESELECTOR_LIST_LABEL, "");

	document.findBySize.reset();

} // End my_resetSizeForm().

function my_yearChange() {

	$('my_make').disabled = true;
	clearOptions($('my_make'));
	addOption($('my_make'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_modelListItem'), false );
	$('my_model').disabled = true;
	clearOptions($('my_model'));
	addOption($('my_model'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_optionListItem'), false );
	$('my_option').disabled = true;
	clearOptions($('my_option'));
	addOption($('my_option'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), false );
	$( 'my_vehicleSubmit' ).disabled = true;

	if ( $('my_year').selectedIndex == 0 ) {
		return alert( "Please select a year." );
	}

	new Ajax.Request(
		MY_TIRESELECTOR_AJAX_URL + '?select=makes&year=' + escape( $('my_year').value ), {
		method: 'post',
		onComplete: my_populateMakes }
	);

} // End my_yearChange().

function my_makeChange() {
	
	my_enableFormFieldListItem( $('my_modelListItem'), false );
	$('my_model').disabled = true;
	clearOptions($('my_model'));
	addOption($('my_model'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_optionListItem'), false );
	$('my_option').disabled = true;
	clearOptions($('my_option'));
	addOption($('my_option'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), false );
	$( 'my_vehicleSubmit' ).disabled = true;

	if ( $('my_make').selectedIndex == 0 ) {
		return alert( "Please select a make." );
	}
	
	new Ajax.Request(
	 	MY_TIRESELECTOR_AJAX_URL + '?select=models&year=' + escape( $('my_year').value ) + '&make=' + escape( $('my_make').value ), {
		method: 'get',
		onComplete: my_populateModels }
	);

} // End my_makeChange().

function my_modelChange() {

	my_enableFormFieldListItem( $('my_optionListItem'), false );
	$('my_option').disabled = true;
	clearOptions($('my_option'));
	addOption($('my_option'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), false );
	$( 'my_vehicleSubmit' ).disabled = true;

	if ( $('my_model').selectedIndex == 0 ) {
		return alert( "Please select a model." );
	}

	new Ajax.Request(
	 	MY_TIRESELECTOR_AJAX_URL + '?select=options&year=' + escape( $('my_year').value ) + '&make=' + escape( $('my_make').value ) + '&model=' +  escape( $('my_model').value ), {
		method: 'get',
		onComplete: my_populateOptions }
	);

} // End my_modelChange().

function my_optionChange() {

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), false );
	$( 'my_vehicleSubmit' ).disabled = true;

	if ( $('my_option').selectedIndex == 0 ) {
		return alert( "Please select an option." );
	}

	my_enableFormFieldListItem( $('my_vehicleSubmitListItem'), true );
	$( 'my_vehicleSubmit' ).disabled = false;

} // End my_optionChange().

function my_sizeWidthChange() {

	$('my_sizeRatio').disabled = true;
	clearOptions($('my_sizeRatio'));
	addOption($('my_sizeRatio'), MY_TIRESELECTOR_LIST_LABEL, "");

	$('my_sizeDiameter').disabled = true;
	clearOptions($('my_sizeDiameter'));
	addOption($('my_sizeDiameter'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_sizeSubmitListItem'), false );
	$( 'my_sizeSubmit' ).disabled = true;
	
	if ( $('my_sizeWidth').selectedIndex == 0 ) {
		return alert( "Please select a width." );
	}

	new Ajax.Request(
	 	MY_TIRESELECTOR_AJAX_URL + '?select=aspectratios&sectionwidth=' + escape( $('my_sizeWidth').value ), {
		method: 'get',
		onComplete: my_populateSizeRatios }
	);

} // End my_sizeWidthChange().

function my_sizeRatioChange() {

	$('my_sizeDiameter').disabled = true;
	clearOptions($('my_sizeDiameter'));
	addOption($('my_sizeDiameter'), MY_TIRESELECTOR_LIST_LABEL, "");

	my_enableFormFieldListItem( $('my_sizeSubmitListItem'), false );
	$( 'my_sizeSubmit' ).disabled = true;

	if ( $('my_sizeRatio').selectedIndex == 0 ) {
		return alert( "Please select an aspect ratio." );
	}

	new Ajax.Request(
	 	MY_TIRESELECTOR_AJAX_URL + '?select=rimdiameters&sectionwidth=' + escape( $('my_sizeWidth').value ) + '&aspectratio=' + escape( $('my_sizeRatio').value ), {
		method: 'get',
		onComplete: my_populateSizeDiameters }
	);

} // End my_sizeRatioChange().

function my_sizeDiameterChange() {

	my_enableFormFieldListItem( $('my_sizeSubmitListItem'), false );
	$( 'my_sizeSubmit' ).disabled = true;

	if ( $('my_sizeDiameter').selectedIndex == 0 ) {
		return alert( "Please select a diameter." );
	}

	my_enableFormFieldListItem( $('my_sizeSubmitListItem'), true );
	$( 'my_sizeSubmit' ).disabled = false;

} // End my_sizeDiameterChange().

function my_populateYears(response){	

	$('my_year').disabled = false;	
	var resp = response.responseText.evalJSON();
	var years = resp.data;
	for (var i=0; i<years.length; i++) {
		addOption($('my_year'), years[i].DATA, years[i].DATA);
	}

} // End my_populateYears().

function my_populateMakes(response) {

	$('my_make').disabled = false;
	var resp = response.responseText.evalJSON();
	var makes = resp.data;
	for (var i=0; i<makes.length; i++) {
		addOption($('my_make'), makes[i].DATA, makes[i].DATA);
	}

} // End my_populateMakes().

function my_populateModels(response) {

	my_enableFormFieldListItem( $('my_modelListItem'), true );
	$('my_model').disabled = false;
	var resp = response.responseText.evalJSON();
	var models = resp.data;
	for (var i=0; i<models.length; i++) {
		addOption($('my_model'), models[i].DATA, models[i].DATA);
	}

} // End my_populateModels().

function my_populateOptions( response ) {

	my_enableFormFieldListItem( $('my_optionListItem'), true );
	$('my_option').disabled = false;
	var resp = response.responseText.evalJSON();
	var options = resp.data;
	for (var i=0; i<options.length; i++) {
		addOption($('my_option'), options[i].DATA, options[i].DATA);
	}

} // End my_populateOptions().

function my_populateSizeWidths(response){	

	$('my_sizeWidth').disabled = false;	
	var resp = response.responseText.evalJSON();
	var sizeWidths = resp.data;
	for (var i=0; i<sizeWidths.length; i++) {
		addOption($('my_sizeWidth'), sizeWidths[i].DATA, sizeWidths[i].DATA);
	}

} // End my_populateYears().

function my_populateSizeRatios( response ) {

	$('my_sizeRatio').disabled = false;
	var resp = response.responseText.evalJSON();
	var sizeRatios = resp.data;
	for (var i=0; i<sizeRatios.length; i++) {
		addOption($('my_sizeRatio'), sizeRatios[i].DATA, sizeRatios[i].DATA);
	}

} // End my_populateSizeRatios().

function my_populateSizeDiameters( response ) {

	$('my_sizeDiameter').disabled = false;
	var resp = response.responseText.evalJSON();
	var sizeDiameters = resp.data;
	for (var i=0; i<sizeDiameters.length; i++) {
		addOption($('my_sizeDiameter'), sizeDiameters[i].DATA, sizeDiameters[i].DATA);
	}

} // End my_populateSizeDiameters().

/*
--------------------------------------------------------------------------------
 Retailer Locator Module.
--------------------------------------------------------------------------------
*/

// Executed when the ZIP field has focus.
//
function my_onZipFieldFocus() {

	var my_zipField = $( 'my_zipField' );
	if ( my_zipField.value == my_onZipFieldValue ) my_zipField.value = '';

} // End my_onZipFieldFocus().

// Executed when the ZIP field loses focus.
//
function my_onZipFieldBlur() {

	var my_zipField = $( 'my_zipField' );
	if( my_zipField.value == '' ) my_zipField.value = my_onZipFieldValue;

} // End my_onZipFieldBlur().

// Executed when the user submits the ZIP form.
//
function my_onZipFormSubmit() {

	var my_zipField = $( 'my_zipField' );
	var zipIsInteger = my_isUnsignedInteger( my_zipField.value );

	if ( zipIsInteger == false ) {
		alert( 'Please enter a valid ZIP code.' );
		my_zipField.focus();
	} // End if.

	return zipIsInteger;

} // End my_onZipFormSubmit().

// Returns true if 's' is an unsigned integer.
//
function my_isUnsignedInteger( s ) {
	return ( s.toString().search( /^[0-9]+$/ ) == 0 );
} // End my_isUnsignedInteger().

/*
--------------------------------------------------------------------------------
 Disclaimers.
--------------------------------------------------------------------------------
*/

// Toggle the display for the disclaimers.
//
function my_toggleDisclaimers( id ) {

	var obj = $( 'my_disclaimers' );

	if ( obj.className == 'my_disclaimersOff' ) {
		obj.className = 'my_disclaimersOn';
	} else {
		obj.className = 'my_disclaimersOff';
	} // End if.

} // End my_toggleDisclaimers().

/*
--------------------------------------------------------------------------------
 Initialization.
--------------------------------------------------------------------------------
*/

// Initialize the page.
//
Event.observe( window, 'load', my_init, false );

