( function($) {
$(document).ready(function(){
	var $model = $('#tow_model'),
		$year = $('#tow_year'),
		$manu = $('#tow_manufacturer'),
		$plans = $('#form-plans'),
		category,
		manu,
		brand,
		defaultHTML = '<p>Please select.</p>';
	$year.empty().html('<option>Loading years</option>').attr('disabled', 'disabled');
	$manu.empty().html('<option>Select a manufactuer</option>').attr('disabled', 'disabled');
	$model.empty().html('<option>Select a model</option>').attr('disabled', 'disabled');
	$.ajax({
		type: 'get',
		dataType: 'json',
		url: 'xhr/getmanufacturers.php',
		success: function(data){
			$manu.empty().attr('disabled', false);
			var options = '<option>Select Manufacturer</option>';
			for(var i=0, j=data.length; i<j; i++){
				if(data[i] != ''){
					options += '<option>'+ data[i] +'</option>';
				};
			};
			$manu.html(options);
		}
	});	
	$manu.bind('change', function(){
		manu = $(this).val();
		//$manu.empty().html('<option>Please wait.</option>').attr('disabled', 'disabled');
		//$model.empty().html('<option>Select a model.</option>').attr('disabled', 'disabled');
		$.ajax({
			type: 'get',
			dataType: 'json',
			data: {manu: manu},
			url: 'xhr/getmodels.php',
			success: function(data){
				$model.empty().attr("disabled", false);
				var options = '<option>Select one</option>';
				for(var i=0, j=data.length; i<j; i++){
					options += '<option>'+ data[i] +'</option>';	
				};
				$model.html(options);
				if($plans.html() == manuHTML){
					$plans.hide().html(defaultHTML).fadeIn();
				};
			}
		});
	
	});
	$model.bind('change', function(){
		model = $(this).val();
		$.ajax({
			type: 'get',
			dataType: 'json',
			data: {model: model, manu: manu},
			url: 'xhr/getyear.php',
			success: function(data){			
				$year.empty().attr("disabled", false);
				var options = '<option>Select one</option>';
				for(var i=0, j=data.length; i<j; i++){
						options += '<option>'+ data[i] +'</option>';
				};
				$year.html(options);
			}
		});
	});
	$year.bind('change', function(){	
		year = $(this).val();
		$.ajax({
			type: 'get',
			data: {year: year,  manu: manu, model: model},
			url: 'xhr/getplans.php',
			success: function(data){
				$plans.hide().html(data).fadeIn();
			}
		});	
	});
	$year.val('Select a year.');
});
} ) ( jQuery );