var csSearch = function() {
	var $container              = $('#search-autotrader');
	var $newUsedLink            = $container.find('a.new-used');
	var $introFieldset          = $container.find('div.intro');
	var $advancedSearchFieldset = $container.find('fieldset.advanced-search');
	var $mainForm               = $container.find('div.main-form');
	var $searchButton           = $container.find('input#search');
	var $form					= $container.find('form');
	var $postcode				= $container.find('#PostCode');
	var $distance				= $container.find('#Distance');
	
	// can only be set once it is inserted
	var $newUsedFieldset; 				
	var $chooseCar; 							
	var $makeModelFieldset; 			
	var $advancedSearchLink;			
	var $newRadio;
	var $usedRadio;
	var $bncisRadio;
	var $make;
	var $model;

	var models; // model array for currently selected make
	var postcodeDefaultValue = 'Postcode';
	var distanceDefaultValue = '';

	var config = {
		html: {
			makeModel: '<a href="#" class="choose-car">&hellip;or choose another car</a><fieldset class="make-model"><label for="Make" class="accessibility">Make:</label><select id="Make" name="Make"><option value="">Make</option></select><label for="Model" class="accessibility">Model:</label><select id="Model" disabled="disabled" name="Model"><option value="">Model</option></select></fieldset>',
			newUsed: '<fieldset class="new-or-used-car"><h3>Do you want a&hellip;</h3><div><input type="radio" class="radio" name="SearchType" value="new" id="newCar"/><label for="newCar">New car</label><br /><input type="radio" class="radio" name="SearchType" value="used" id="usedCar"/><label for="usedCar">Used car</label></div></fieldset>',
			advancedSearch: '<a href="#" class="advanced-search">Advanced Search</a>'
		},
		elements: {
			chooseLink: 'a.choose-car',
			newUsedFieldset: 'fieldset.new-or-used-car',
			makeModelFieldset: 'fieldset.make-model',
			advancedSearchLink: 'a.advanced-search',
			newRadio: 'input#newCar',
			usedRadio: 'input#usedCar',
			bncisRadio: 'input#bncis',
			make: 'select#Make',
			model: 'select#Model'
		}
	};
	
	// helper functions for the form
	var form = function() {
		var init = function() {
			// change appearance of the box depending on whether JS is on or not
			$container.addClass('js');			
			
			// do all the DOM manipulations necessary
			makeModel.init();

			advancedSearch.init();
			
			// attach event handler for form submit
			$form.submit(function() {
				return form.submit();
			});
			
			// remove the link that switches between used & new search for non-JS
			$newUsedLink.remove();
		};

		var changeAction = function(options) {
			var action = $form.attr('action');
			
			action = action.split('/'); // 0: international code, 1: make, 2: model, 3:section, 4: used/new. 
			action.shift(); // Shift needed to get rid of empty element in the front!
			if (options.make) {
			  var model = "";
				// change the make part of the action
				action[1] = urlSafe(options.make);
				// set the model action to the 1st model
				action[2] = model;
				options.make = null; // reset the object;
			} else if (options.model) {
				// change the model of the action
				action[2] = urlSafe(options.model);
				options.model = null;
			} else if (options.newUsed) {
				// change the used/new of the action
				action[4] = urlSafe(options.newUsed);
				options.newUsed = null;
			}
			// set the action again
			$form.attr('action', '/' + action.join('/'));
		};
		
		var submit = function() {
			// validate before submitting
			return validate();
		};
		
		var validate = function() {
			var returnVal = true;
			var postCodeVal = $.trim($postcode.val());
			var distanceVal = $distance.find('option:selected').val();

			if (!$form.hasClass('new')) {
        if (postCodeVal != postcodeDefaultValue && postCodeVal != '') {
				  if (postCodeVal.length < 4 || postCodeVal.length > 4) {
					  alert('Please enter a valid postcode');
					  returnVal = false;
				  }
				  else {
				    if (distanceVal == distanceDefaultValue) {
				      alert('Please select a search radius');
					    returnVal = false;
					  }
					}
				}
			}
			return returnVal;
		};
		
		// make sure we remove spaces
		// lowercase & hyphenate the url segment
		var urlSafe = function(segment) {
			segment = segment.toLowerCase();
			segment = $.trim(segment);
			segment = segment.replace(' ', '-', 'gi');
			return segment;
		};
		
		return {
			init:init,
			changeAction:changeAction,
			submit:submit
		};
	}();

	var makeModel = function() {
		var init = function() {
			insert();
			show();
      changeMake();
			changeModel();
		};
		
		var insert = function() {
			// insert for JS usage
			// put in make model dropdown & link
			$(config.html.makeModel).appendTo($introFieldset);
			$chooseCar = $container.find(config.elements.chooseLink);
			$makeModelFieldset = $container.find(config.elements.makeModelFieldset);
			$make = $container.find(config.elements.make);
			$model = $container.find(config.elements.model);
		};
		
		var show = function() {
			// attach event-listener to show makemodel dropdown when needed
			$chooseCar.click(function () {
				$(this).siblings('p').remove().end().remove();
				$makeModelFieldset.show();
				return false;
			});
			
		};
		
		var changeMake = function() {
			$make.change(function(e) {
				$model.attr('disabled', 'disabled');
				
				var currentMake = $(e.target).find("option:selected").text();
				$model.attr('disabled', '');
				
				if (e.target.selectedIndex > 0) {
			    form.changeAction({
				    make:currentMake
			    });
			  }
			  
			});			
		};
		
		var changeModel = function() {
			$model.change(function(e) {
			
			  var currentModel = $(e.target).find("option:selected").text();

				if (e.target.selectedIndex > 0) {
				  form.changeAction({
					  model:currentModel
				  });
				}
			});
		};
		
		var populateMake = function() {
			// skip the 1st 2 array elements as they have 'make' & 'any' in them
			for (var i = 2; i < make_v.length; i++) {
				$make.append('<option value="'+ make_v[i] + '">'+ make_v[i] + '</option>');
			}
		};
		
		var populateModel = function(makeName) {
			// get the index of the make & retrieve the correct model array
			models = _model[getMakeIndex(makeName)];
			// remove the current options of the select
			$model.children().remove();
			// skip the 1st one as it is 'any'
			for (var i = 1; i < models.length; i++) {
				$model.append('<option value="' + models[i] + '">' + models[i] + '</option>');
			}
		};

		var getMakeIndex = function(name) {
			// compare the passed name with the autotrader array 
			// & return the index of the matched item
			for (var i = 0; i < make_v.length; i++) {
				if (make_v[i] === name) {
					return i;
				}
			}
		};
		
		return {init:init};
	}();

	var newUsed = function() {
		var init = function() {
			insert();
			toggle();
		};
		var insert = function() {
			// put in the new / used radio buttons
			$(config.html.newUsed).prependTo($mainForm);
			// set up the values needed
			$newUsedFieldset = $container.find(config.elements.newUsedFieldset);
			$newRadio        = $container.find(config.elements.newRadio);
			$usedRadio       = $container.find(config.elements.usedRadio);
			$bncisRadio       = $container.find(config.elements.bncisRadio);

			// set the checked option if depending on the section we are in
			if ($form.hasClass('used')) {
				$usedRadio.attr('checked', 'checked');
			} else if ($form.hasClass('new')) {
				$newRadio.attr('checked', 'checked');
			} else {
				$bncisRadio.attr('checked', 'checked');
			}
		};
		var toggle = function() {
			var t;

			$newUsedFieldset.find('input:radio').click(function (e) {
				t = e.target;
				// switch to new
				if (t.value === 'new') {
					if ($form.hasClass('used')) {
						$form.removeClass('used');
					}
					$form.addClass('new');

				// switch to used
				} else if (t.value === 'used') {
					if ($form.hasClass('new')) {
						$form.removeClass('new');
					}
					$form.addClass('used');
				}
				// change the action
				form.changeAction({
					newUsed: t.value
				});
			});
			
		};
		return {init:init};
	}();
	
	var advancedSearch = function() {
		var init = function() {
			// check if advanced search is shown: if yes, DO NOT insert link
			if (!$advancedSearchFieldset.hasClass('show-advanced')) {
				insert();
				show();				
			}
		};
		
		var insert = function() {
			// insert link that displays the advanced search
			$(config.html.advancedSearch).insertBefore($searchButton);
			$advancedSearchLink = $container.find(config.elements.advancedSearchLink);
		};
		
		var show = function() {
			// hide the advanced search, put the link in & attach the event listener
			$advancedSearchLink.click(function() {
				$(this).fadeOut('fast', function() {
					$(this).remove();
				});
				$advancedSearchFieldset.slideDown('fast', function() {
					$advancedSearchFieldset.addClass('show-advanced');
					$advancedSearchFieldset.attr('style', 'display:block');
				});

				return false;
			});
		};
		return {init:init};
	}();
	
	var init = function() {
		form.init();
	};
	
	return {
		init:init
	};
}();

// execute as soon as possible!
csSearch.init();

// need to wait for onload as this function is only available in the util.js
$(window).load(function() {
	$('#search-autotrader').find('input:text').autoInputLabel();
});