/**
 * All search related JavaScript
 */


// when DOM is ready
$(function(){
	
	
	/**
	 * Show-hide additional fields in exact search
	 */
	(function(){
			
		function show() {
			var additionalFields = $("#exact-search .extra-fields");
			
			// expand the hidden area
			additionalFields.css({display: "block", opacity: 0});
			// change link text (and icon)
			$("span", this).html(gettext('Hide choices'));
			var img = $("img", this);
			if ( img) 
			img.attr("src", img.attr("src").replace(/\/[^\/]+$/, '/expander-icon-open.gif'));
			// fade in form fields
			additionalFields.animate({opacity: 1}, "slow");
			
			return false;
		}
		
		function hide() {
			var additionalFields = $("#exact-search .extra-fields");
			
			// fade out extra fields
			var that = $(this);
			additionalFields.animate({opacity: 0}, "fast", function(){
				// collapse the area
				additionalFields.hide();
				// change link text (and icon)
				// NOTE: It's important to do this after collapsing,
				//       because otherwise IE7 will leave the icon to the position,
				//       where it was before collapsing.
				$("span", that).html(gettext('Specify more'));
				var img = $("img", that);
				img.attr("src", img.attr("src").replace(/\/[^\/]+$/, '/expander-icon-closed.gif'));
			});
			
			return false;
		}
		
		var expander = $("#exact-search .expander a");
		if ( $("#exact-search .extra-fields:visible").length ) {
			expander.toggle(hide, show);
		}
		else {
			expander.toggle(show, hide);
		}
		
	})();

	(function(){
			
		function show() {
			var additionalFields = $("#exact-search .leasing-fields");
			
			// expand the hidden area
			additionalFields.css({display: "block", opacity: 0});
			additionalFields.animate({opacity: 1}, "slow");
			$("span", this).html(gettext("Don't search by lease"));
			var img = $("img", this);
			if ( img) {
				img.attr("src", img.attr("src").replace(/\/[^\/]+$/, '/expander-icon-open.gif'));
			}

			return false;
		}
		
		function hide() {
			var additionalFields = $("#exact-search .leasing-fields");
			
			// fade out extra fields
			var that = $(this);
			additionalFields.animate({opacity: 0}, "fast", function(){
				additionalFields.hide();
			});
			$("span", that).html(gettext('Search by lease payment'));
			var img = $("img", that);
			if (img) {
				img.attr("src", img.attr("src").replace(/\/[^\/]+$/, '/expander-icon-closed.gif'));
			}
			
			return false;
		}
		
		var expander = $("#exact-search #leasing-group-btn");
		if ( $("#exact-search .leasing-fields:visible").length ) {
			expander.toggle(hide, show);
		}
		else {
			expander.toggle(show, hide);
		}
		
	})();
	
	
	
	
	
	/**
	 * Multiselect fields
	 */
	$("#exact-search select").change(function(){
		var multiSelect = $("+ .multi-select", this);
		// if "Select multiple..." is chosen from select box
		// display list of checkboxes after the select
		if ($(this).val() == "multiple") {
			// if multi-select is missing, create it first
			if (!multiSelect.length) {
				// get all options, except first empty one and last "Select multiple..."
				var options = $("option:not([value='']):not([value='multiple'])", this);
				
				var fieldName = $(this).attr("id");
				
				// create array of checkboxes (HTML strings)
				var checkboxes = $.map(options, function(option){
					var value = $(option).attr("value");
					var text = $(option).text();
					var id = fieldName + '-' + value;
				
					return '<span class="checkbox-line"><input type="checkbox" class="type-checkbox" ' +
							'id="' + id +  '" name="' + fieldName + '[' + value + ']" ' +
							'value="' + value + '" /><label for="' + id +  '">' + text + '</label></span>';
				});
				
				$(this).after( '<span class="multi-select">' + checkboxes.join(" ") + '</span>' );
				
				multiSelect = $("+ .multi-select", this); // find it again, now it should be there
			}
			
			multiSelect.show();
		}
		else {
			// hide and unselect all checkboxes
			multiSelect.hide();
			$("input[type=checkbox]", multiSelect).removeAttr("checked");
		}
	});
	
	
	
	/**
	 * Price and currency select boxes - submit form when changed.
	 */
	$("#search-results form select").change(function(){
		this.form.submit();
	});
	
	
	/**
	 * Highlighting search results rows when hovering with mouse
	 *
	 * This is now quite a bit optimized,
	 * but still not as fast as with pure CSS :hover
	 */
	$("#search-results tbody").map( function() {
		var that = $(this);
		var cells = $("td", that);
		var tools = $(".tools div", that);
		if (!that.hasClass('banner')) {
			that.hover(
				// over
				function(){
						that.css("background", "#fff3c1"); // light yellow
						tools.show();	
				},
				// out
				function(){
						that.css("background", "white");
						tools.hide();		
				}
			);
		}
	});

	$("#search-results .thumbnail").mouseover( function() {
		if (!$(this).attr('src'))
			return;
		var src = $(this).attr('src').replace('98x74', '413x310');
		return overlib("<img src=\""+src+"\"   alt=\"\"  />");
	});
	$("#search-results .thumbnail").mouseout( function() {
		nd();
	});
	
	$("#search-results .toolbar .save-search a").click( function() { 
		$("#search-results .toolbar .save-search span").show();
		$(this).hide();
		return false;
	});
	
	$("#search-results .toolbar .save-search span .btn").click( function() { 
		$("#search-results .toolbar .save-search a").show();
		$("#search-results .toolbar .save-search span").hide();
	});

	$('#exact-search select[name=make_id]').change( function() {
		if ($('#exact-search select[name=model_id]')) {
			var model_selection = ModelSelection($('#exact-search select[name=model_id]'), $(this).val());
			model_selection.setMode('');
			model_selection.load();
		}
	});
});