/**
* File: product_search_template_functions.js
* Author: Brian Schemp
* 
* Purpose:	Configure events in the product search bar. Set the product search form for entering in a product number or keyword.  Also set the 
*			vehicle and vehicle year pull-downs in the product search bar.
*
* History: 10/21/2009 Brian - Created.
*		
*
*/

//global variable to store the productYear object.
var productYearObj = null;

//called when the page is ready
$(document).ready(function() {
	//get values from cookie.
	var cookieCatalogId = ($.cookie("CATALOGID") == undefined) ? 0 : $.cookie("CATALOGID");
	var cookieYearId = ($.cookie("YEARID") == undefined) ? 0 : $.cookie("YEARID");
	
	//set the vehicle and year pull-downs.
	getCatalogs(cookieCatalogId);
	getCatalogYears(cookieCatalogId, cookieYearId);
						   
	//set onChange event for the vehicle pull-down.
	$("#vehicleId").change(function(evt) {
		evt.preventDefault();
		var selectedVehicleId = $(this).val();		
		getCatalogYears(selectedVehicleId, 0);
	});
	
	//set onFocus event for the keyword text field.
	$("#keyword").focus(function(evt) {
		evt.preventDefault();
		$(this).val("");						 
	});
	
	//set onFocus event for the part number text field.
	$("#partNumber").focus(function(evt) {
		evt.preventDefault();
		$(this).val("");					  
	});
	
	//set the submit event for the product search form.
	$("#vehicleSearchForm").bind('submit', function(evt) {
		//prevent default submit event.
		evt.preventDefault();
		
		//get form values.
		var keywordValue = $("#keyword").val();
		var partNumberValue = $("#partNumber").val();
		var selectedCatalog = $("#vehicleId").val();
		var selectedCatalogYear = $("#yearId").val();
		
		/*if(selectedCatalog == "0"){
			alert("Please select a Model");
		}*/
					
		if(keywordValue.length == 0 && partNumberValue.length == 0) {
			alert("Please enter a Keyword or a Part Number");	
		}
		
		else if(keywordValue.toUpperCase() == "ENTER KEYWORD" && partNumberValue.toUpperCase() == "ENTER PART NUMBER") {
			alert("Please enter a Keyword or a Part Number");
		}
		
		else if(keywordValue.toUpperCase() != "ENTER KEYWORD" && keywordValue.length > 0 && selectedCatalog == "0") {
			alert("Please select a Model");
		}
		
		else if(keywordValue.toUpperCase() != "ENTER KEYWORD" && keywordValue.length > 0  && selectedCatalog != "0") {
			window.location = "/controller.cfm?type=product&action=displayProductCategories&keyword=" + keywordValue + "&productSearchCatalogId=" + selectedCatalog + "&productYearId=" + selectedCatalogYear;	
		}
		
		else if(partNumberValue.toUpperCase() != "ENTER PART NUMBER" && partNumberValue.length > 0) {
			window.location = "/controller.cfm?type=product&action=productNumberSearch&partNumber=" + partNumberValue + "&productSearchCatalogId=" + selectedCatalog + "&productYearId=" + selectedCatalogYear;
		}		
	});	
});

/**
* Get the active catalogs and load them into the vehicle pull-down.  Select the vehicle
* that was chosen.
*
* @param {Object} catalogId
*/
function getCatalogs(catalogId) {
	$.post(
		"/object/Vehicle.cfc",
		{
			method: "getVehicleCatalogs",
			returnFormat: "json"
		},
		function(response){
			var catalogData = response.DATA;
			
			//cache the catalog pull-down.
			var catalogPulldown = $("#vehicleId");
			
			//remove all pull-down values.
			catalogPulldown.children().remove();
			
			//set default value.
			catalogPulldown.append('<option value="0">Select A Model</option>');
			
			//loop over the catalogs and set the pull-down options.
			$.each(catalogData, function(index, optionData) {
				var responseCatalogId = optionData[0];
				var catalogName = optionData[1];
				
				if(responseCatalogId == catalogId) {
					catalogPulldown.append('<option value="' + responseCatalogId + '" selected="selected">' + catalogName + '</option>');	
				}
				
				else {
					catalogPulldown.append('<option value="' + responseCatalogId + '">' + catalogName + '</option>');	
				}
			});			
		},
		"json"
	);	
}

/**
* Get the catalog years for a specific catalog and call a helper function to 
* load the data into the years pull-down.
*
* @param {Object} catalogId
* @param {Object} catalogYearId
*/
function getCatalogYears(catalogId, catalogYearId) {
	//set default value for the catalogId if it's zero.
	if(catalogId == 0) {
		catalogId = 1;
	}
	
	$.post(
		"/object/Vehicle.cfc",
		{
			method: "getAllVehicleYears",
			returnFormat: "json"			
		},
		function(response) {
			$.each(response, function(index, optionData) {							
				var responseCatalogId = optionData['catalogId'];
				
				if(responseCatalogId == catalogId) {
					productYearObj = optionData['years'];	
				}								
			});
			
			//call helper function.
			loadCatalogYears(catalogYearId);
		},
		"json"
	);	
}

/**
* Load the catalog years into the year pull-down.  Select the year that
* was chosen.
*
* @param {Object} catalogYearId
*/
function loadCatalogYears(catalogYearId){
	var productYearPulldown = $("#yearId");
	
	//remove all pull-down values.
	productYearPulldown.children().remove();
	
	//variable to store the product years array.
	var productYearArray = [];
	
	//loop over the object and create a year array.
	$.each(productYearObj, function(index, productYearData) {
		productYearArray.push({
			yearId: productYearData.yearId,
			year: productYearData.year
		});
	});
	
	//sort by year.
	productYearArray.sort(function(a,b){
		return a.year - b.year;							   
	});
			
	//add default value.
	productYearPulldown.append('<option value="0">All Years</option>');
	
	//add each value to the year pull-down.
	$.each(productYearArray, function(index, productYearData) {
		if(catalogYearId == productYearData.yearId) {
			productYearPulldown.append('<option value="' + productYearData.yearId + '" selected="selected">' + productYearData.year + '</option>');	
		}
		
		else {
			productYearPulldown.append('<option value="' + productYearData.yearId + '">' + productYearData.year + '</option>');	
		}
	});
}

/**
* Set the image rollovers.
*
*/
function setImageRollovers() {
	var startProductSearchImage = $("#startProductSearch");
	var startCategorySearchImage = $("#startProductCategorySearch");
	
	//set mouse-over and mouse-out events for 'Go' image.
	startProductSearchImage.hover(
		function(){
			swapImage(startProductSearchImage, "go_PUSH.jpg", "/images/HomePage/");
		},
		
		function(){
			swapImage(startProductSearchImage, "go.jpg", "/images/HomePage/");
		}		
	);
	
	//set mouse-over and mouse-out events for 'Search By Category' image.
	startCategorySearchImage.hover(
		function(){
			swapImage(startCategorySearchImage, "ORANGE_SEARCH_PUSH.jpg", "/images/HomePage/");
		},
		
		function(){
			swapImage(startCategorySearchImage, "ORANGE_SEARCH.jpg", "/images/HomePage/");
		}		
	);	
}

/*
* Called to open the multiple vehicle popup window. Set the cfwindow with it's initializataion
* parameters and setup the function to be called when the user closes the popup window.
*
*/
function displayCategoryCatalogChoiceWindow(evt) {
	evt.preventDefault();
	var backgroundPopup = $("#backgroundPopup");		
	backgroundPopup.css({"opacity": "0.7"});  
	backgroundPopup.fadeIn("slow");		
	
	$("#dialog").load("/controller.cfm?type=product&action=getCatalogsForCategorySearch");
	$("#dialog").dialog({
		title: "Please Choose A Vehicle Line",
		resizable: false,
		close: function(evt, ui) {$("#backgroundPopup").fadeOut("slow");}
	});
}