/**
 * UsedCarsModule -> DisplayUsedCars -> actionSearchBox
 */
(function($) {
	var searchTypeSelector = 'input:hidden[name="searchBoxAdvanced"]';
	var advancedSectionSelector = '.advanced';
	var advancedText = 'Advanced Search';
	var basicText = 'Basic Search';

	var downloadAdvancedOptions = function(params) {
		return (function() {
			var data = params;
			if(!data.module.find('form').find(advancedSectionSelector).html().match(/^\s*$/)) {
				return true;
			}
			$.ajax({
				url: data.url,
				data: {
					searchBoxAdvanced:1
				},
				success: function(response) {
					var responseDOM = $('<div></div>').html(response);
					var advancedSection = responseDOM.find(advancedSectionSelector).contents().detach();
					responseDOM.remove();
					data.module.find(advancedSectionSelector).hide().empty().append(advancedSection);
					data.module.trigger('loaded');
				}
			});
			return false;
		})();
	};

	var isAdvanced = function($form) {
		return $form.find(searchTypeSelector).val() == 1;
	}

	var showAdvanced = function($form, $link) {
		$form.find(searchTypeSelector).val(1);
		$form.find(advancedSectionSelector).children().show().end().hide().slideDown();
		$link.html(basicText);
	};

	var showBasic = function($form, $link) {
		$form.find(searchTypeSelector).val(0);
		$form.find(advancedSectionSelector).slideUp(function() {
			$(this).show().children().hide();
		});
		$link.html(advancedText);
	};

	var toggleSearchType = function(event) {
		var $form = event.data.module.find('form');
		var $link = $(this);
		if(isAdvanced($form)) {
			showBasic($form, $link);
		} else {
			if(downloadAdvancedOptions(event.data)) {
				showAdvanced($form, $link);
			} else {
				event.data.module.one('loaded', event.data, $.proxy(toggleSearchType, this));
			}
		}
		return false;
	};

	var updateModels = function(event) {
		var make = $(this);
		(function() {
			var model = event.data.module.find(':input[name="model"]'); // to get a LOCAL reference to models
			$.ajax({
				url: event.data.url,
				data: make.serialize(),
				dataType: 'json',
				success: function(data) {
					model.find('option:gt(0)').remove();
					for(var i in data) {
						$('<option></option>').html(data[i]).appendTo(model);
					}
				}
			});
		})();
	};

	/**
	 * It must be applied to the main SearchBoxModule div.
	 * Dynamically loads advanced search fields, toggles advanced/basic
	 * search box type, dynamically downloads a list of models for the
	 * currently selected make.
	 */
	$.fn.gkSearchBox = function(toggleSearchTypeSelector, ajaxUrl) {
		return this.each(function() {
			var $this = $(this);
			var data = {
				module: $this,
				url: ajaxUrl
			};
			$this.find(toggleSearchTypeSelector).click(data, toggleSearchType);
			$this.find(':input[name="make"]').change(data, updateModels);

		});
	};
})(jQuery);

/**
 * UsedCarsModule -> DisplayUsedCars -> actionLatestCars
 */
(function($){
	var showPreview = function(event) {
		var previewFor =  $(this);
		var image = previewFor.clone(false);
		var preview = $('<div></div>').attr('id', event.data.previewId).
		css('position', 'absolute').append(image);
		$('body').append(preview);
	};

	var hidePreview = function(event) {
		$('#' + event.data.previewId).remove();
	};

	var movePreview = function(event) {
		var preview = $('#' + event.data.previewId);
		preview.css('top', (event.pageY - (preview.height() / 2)) +'px').css('left', event.pageX + 12 + 'px');
	};

	/**
	 * It should be applied to an element containing img tags.
	 * Shows a car preview.
	 */
	$.fn.gkUsedCarPreview = function(previewId) {
		return this.find('img').each(function() {
			var data = {
				previewId: previewId
			};
			$(this).mouseenter(data, showPreview).mouseleave(data, hidePreview).
			mousemove(data, movePreview);
		});
	};
})(jQuery);

/**
 * UsedCars -> DisplayUsedCars -> actionCarDetails
 */
(function($) {
	/**
	 * Displays a slideshow.
	 * This method should be applied to the container of all the images,
	 * which are to be included in the slideshow.
	 */
	$.fn.gkSlideShow = function() {

	};

	/**
	 * When a user hovers over an image, it appears in the preview area.
	 * @param previewImg string a selector of the img tag which will be
	 * used to show preview
	 */
	$.fn.gkCarDetailsImagePreview = function(previewImg) {
		this.find('img').mouseenter({
			'previewImg': this.find(previewImg)
		}, function(event) {
			var preview = event.data.previewImg;
			var minHeight = preview.parent().css('min-height');
			minHeight = minHeight == 0 ? 0 : minHeight.substr(0, minHeight.length - 2);
			if(minHeight < preview.height()) {
				preview.parent().css('display', 'block').css('min-height', preview.height() + 'px');
			}
			preview.attr('src', $(this).attr('src'));
		});
		return this;
	};
})(jQuery);