/**********************************************************/
/* Scripts for the searchBox that are dependent on jQuery */
/**********************************************************/

//since this script is called after the module's HTML is read, we know we can at least do this much before the document.ready state...
preInit();

// do stuff when DOM is ready
jQuery(document).ready(function($) {
	
	/* init the cascading select boxes on various pages*/
	if ($("#refineSearch_sb").length) {
		initRefineSearch();
	}
	
	/* and if the select boxes are within a searchbox module... */
	if ($("#searchBox").length) {
		initSearchBoxModule();
	}
	
});

function preInit() {
	
	// adds a link to CSS to the head, instead of inline, so it validates
	var headElement = document.getElementsByTagName("head")[0];
	linkElement=document.createElement("link");
	linkElement.href="search_mod/searchbox.css";
	linkElement.rel="stylesheet";
	headElement.appendChild(linkElement);
	
	// wrap the #searchBox in a container
	$('#searchBox').wrap('<div id="sbWrapper" />')
	
	// hide the searchbox
	.hide();
	// add in the Now-Loading icon
	var html = '';
	html += '<span class="loading">Loading...</span>';
	$('<div id="sbLoading"></div>').html(html).appendTo('#sbWrapper');
}


/* Allows for cascading (dependent) select boxes, as used on TypeBrowse, etc. */
/* 	based on code found at:
 *		http://jsatt.blogspot.com/2010/01/cascading-select-boxes-using-jquery.html
 *		&
 *		http://snipplr.com/view/26338/cascading-select-boxes
 */ 
function cascadeSelect(parent, child){
	var childOptions = child.find('option:not(.static)');
	child.data('options',childOptions);
	
	parent.change(function(){
		var parentValue = (this.value).replace(" ", "_");
		childOptions.remove();
		child
			.append(child.data('options').filter('.sub_' + parentValue))
			.change();
	})

	childOptions.not('.static, .sub_' + parent.val()).remove();
}

function initRefineSearch() {			
	// reset to the first option since browsers hold onto the last selection when you go back
	$('#refineSearch_sb form select').val($('option:first', '#refineSearch_sb').val());
	
	var refineSearchForm = $('#refineSearch_sb form');
	
	var makeSelectNew = refineSearchForm.find('#Make_395');
	var modelSelectNew = refineSearchForm.find('#Model_395');
	var trimSelectNew = refineSearchForm.find('#Trim_395');	
	cascadeSelect(makeSelectNew, modelSelectNew);
	cascadeSelect(modelSelectNew, trimSelectNew);
	
	var makeSelectUsed = refineSearchForm.find('#Make_396');
	var modelSelectUsed = refineSearchForm.find('#Model_396');
	var trimSelectUsed = refineSearchForm.find('#Trim_396');	
	cascadeSelect(makeSelectUsed, modelSelectUsed);
	cascadeSelect(modelSelectUsed, trimSelectUsed);
}

function initSearchBoxModule(){
	// reset the forms	
	$('form#refineSearchForm_sb')[0].reset();
	$('form#stockSearchForm')[0].reset();	
	
	// replace and initialize the Radio Btns
	if ($(".vintageSelect").length) {
		//yes it does ,do something
		initVintageSelectors.create('.vintageSelect');
	}
	
	// hide the Used search selects for now
	if ($("#refineSelects395").length) {
		$('#searchBox #refineSelects396').hide();
	}
	
	 //add vintage as query to Advanced Search
	 $('a#advSearchLink').attr('href','en_us/default.asp?vintage=395');


	
	/* Initialize the inline Label on the Stock# Search */
	/* ************************************************ */	
	var t = $("#searchBox #stockSearch input#StockNumber_sb");
	var text;
	var label = $('label[for='+t.attr('id')+']');
	var css_class = "inlineLabel";
	text = label.text();
	label.hide();
	
	// set up the focus hook
	t.focus(function() {
		if (t.val() == text) {
			t.val('');
		};
		t.removeClass(css_class);
		return t; // made chainable
	});
	
	// set up the blur hook
	t.blur(function() {
		if (t.val() == '') {
			t.val(text);
			if (!t.hasClass(css_class)) {
				t.addClass(css_class);
			}
		}
		return t;
	});
	
	// set up the change hook
	// when changing the field value programmatically, run .triggerHandler('change') to trigger this handler.
	t.change(function() {
		if (t.val() == '') {
			t.val(text);
		}
		if (t.val() == text) {
			t.addClass(css_class);
		} else {
			t.removeClass(css_class);
		}
		return t;
	});
	
	t.triggerHandler('change');
	
	/* combine both submit buttons into one */
	/* ************************************ */
	// hide submit btns for both Refine Search and for Stock # Search
	$("#searchBox input.submit").hide();	
	
	// insert a new 'button' to submit both forms
	var html = "";
	html += "<a name='submitBtn' id='submitBtn' title='Search' href='#'>Search</a>";	
	$("<div id='submitSearch'></div>")
		.html(html)
		.insertAfter('#stockSearch');
		
	// When the new button is clicked, 
	$("#searchBox #submitBtn").live("click", function(e){ 
		// check for stock# in that field, then submit appropriate form
		if (!$("input#StockNumber_sb").hasClass("inlineLabel") && $("input#StockNumber_sb").val()) {
			$("form#stockSearchForm").submit();
			e.preventDefault();
			return false;
		} else {
			// remove the hidden make-model-trim selectors for the inactive vintage
			$('div.refineSelects:hidden').remove();
			
			$("form#refineSearchForm_sb").submit();
			e.preventDefault();
			return false;
		}
	});
	
	// done initializing, so show the module, & hide the loading icon
	$('#searchBox').show().siblings('#sbLoading').hide();
}



// Creates & initializes the replacement DIVs for the Radio Btns, and keeps them selectable, for the searchBox.
;var initVintageSelectors = {
	create: function(selector) {
	// Default to New & hide year selectors
	$('#searchBoxVintageNew').attr('checked', 'checked');
	$('#selectYears').hide();
	
	// loop over every element matching the selector
	$(selector).each(function() {
	 var $list = $('<div></div>');
	 // loop over every radio button in each container
	 $(this)
	   .find('input:radio')
	   .each(function(i) {
		var radioValue = $(this).parent().text();
		var radioText;
		if (radioValue==395) {
			radioText = "New"
		} else if (radioValue==396) {
			radioText = "Pre-Owned"
		} else {
			radioText = radioValue
		}
		var $item = $('<a href="#"></a>')
		  .attr('title', radioText)
		  .addClass(radioText)
		  .text(radioText);
		
		initVintageSelectors.addHandlers($item);
		$list.append($item);
		
		if($(this).is(':checked')) {
		  $item.addClass('checked');
		}
	   });
	   // Hide the original radio buttons
	   $(this).append($list).find('label').hide();
	});
	},
	addHandlers: function(item) {
	$(item).click(function(e) {
	 // Handle click
	 var vintageRadio = $(this);
	 var allLinks = $(this).parent();
	 var radioText = vintageRadio.text();
	 var radioValue;
	 
		if (radioText=="New") {
			radioValue = "395";
			// also hide year selectors
			$('#selectYears').hide();
		} else if (radioText=="Pre-Owned") {
			radioValue = "396";
			// show year selectors
			$('#selectYears').show();
		} else {
			radioValue = radioText;
			// show year selectors
			$('#selectYears').show();
		}
	 
	 // Set the radio button value
	 allLinks
	   .parents()
	   .find('input:radio[value=' + radioValue + ']')
	   .attr('checked', 'checked');
	   
	   $('div.refineSelects').hide();
	   $('div#refineSelects'+radioValue+'').show();
	   
	 // Mark as checked
	 allLinks.children().removeClass('checked');
	 vintageRadio.addClass('checked');
	 
	 //add vintage as query to Advanced Search
	 $('a#advSearchLink').attr('href','en_us/default.asp?vintage='+radioValue);
	 
	 
	 // prevent default link click
	 e.preventDefault();
		
	}).hover(function() {
	 // Handle mouse over
	 $(this).addClass('hovering');
	}, function() {
	 // Handle mouse out
	 $(this).removeClass('hovering')
	});    
	}
}


/* Console Logging for debugging help
 * A log function has been attached to the jQuery object.
 * You can then call this in your code using 
 * 	jQuery.log('my message') or $.log('my message') 
 */
;jQuery.log = function(message) {
  try {
     console.debug(message);
  } catch(e) {
	  try {
		console.log(message);
	  } catch(e) {
		//alert(message);
	  }
  }
};