var vehicleJsonPath = '../json/vehicle_info.php';

function loadExpandedOptions() 
{
	$('#expandButton').hide();
	$('#shortenButton').show();
	
	$('.vehicle_model').hide();
	$('.vehicle_year').hide();
	$('.vehicle_id').hide();
	$('.vehicle_color').hide();
	$('#vehicle_model').val('');
	$('#vehicle_year').val('');
	$('#vehicle_id').val('');
	$('#vehicle_color').val('');
	
	
	var post = {'allMakes':true};
	
	$.getJSON(vehicleJsonPath,post,
		function(data){
			updateVehicleMake(data,true);
		}
	);
}

function loadShortendOptions() 
{
	
	$('#shortenButton').hide();
	$('#expandButton').show();
	
	$('.vehicle_model').hide();
	$('.vehicle_year').hide();
	$('.vehicle_id').hide();
	$('.vehicle_color').hide();
		
	$('#vehicle_model').val('');
	$('#vehicle_year').val('');
	$('#vehicle_id').val('');
	$('#vehicle_color').val('');
	
	
	var post = {'shortMakes':true};
	
	$.getJSON(vehicleJsonPath,post,
		function(data){
			updateVehicleMake(data,false);
		}
	);
}

function updateVehicleMake(data,more) 
{
	if (data.length == 0) {
		return;
	} else if (data.length > 1) {
		opt = '<option value="">Select Your Vehicle Make...</option>';
	} else {
		opt = '';
	}
	for( i=0 ;i < data.length; i++) {
	    opt += "<option>"+data[i]+'</option>';
	}
	opt += '<option value="" disabled=disabled> </option>';		
	
	if (more) {
		opt += '<option value=":LESS:">Show less cars...</option>';		
	} else {
		opt += '<option value=":MORE:">Show more cars...</option>';
		
	}
	opt += '<option value="Unknown">I cannot find my vehicle</option>';		
	
	$('#vehicle_make').html(opt);
	
}

function checkVehicleMake() 
{
	if ($('select#vehicle_make').val() == ':MORE:') {
		loadExpandedOptions();
	} else if ($('select#vehicle_make').val() == ':LESS:') {
		loadShortendOptions();
	} else {
		$('.vehicle_model').hide();
		$('.vehicle_year').hide();
		$('.vehicle_id').hide();
		$('.vehicle_color').hide();	
		$('#vehicle_model').val('');
		$('#vehicle_year').val('');
		$('#vehicle_id').val('');
		$('#vehicle_color').val('');

		var post = {
			'make': $('select#vehicle_make').val()
		};
	
		$.getJSON(vehicleJsonPath,post,
			function(data){
				updateVehicleModel(data);
			}
		);
	}
}

function updateVehicleModel(data) 
{
	if (data.length == 0) {
		return;
	} else if (data.length > 1) {
		opt = '<option value="">Select Your Vehicle Model...</option>';
	} else {
		opt = '';
	}
	for( i=0 ;i < data.length; i++) {
	    opt += "<option>"+data[i]+'</option>';
	}
	$('#vehicle_model').html(opt);
	$('.vehicle_model').show();
	if (data.length == 1 ) {
		checkVehicleModel();
	}
}

function checkVehicleModel() 
{
	
	$('.vehicle_year').hide();
	$('.vehicle_id').hide();
	$('.vehicle_color').hide();
	$('#vehicle_year').val('');
	$('#vehicle_id').val('');
	$('#vehicle_color').val('');
	
	var post = {
		'make': $('select#vehicle_make').val(),
		'model': $('select#vehicle_model').val()
	};
	
	$.getJSON(vehicleJsonPath,post,
		function(data){
			updateVehicleYear(data);
		}
	);
}

function updateVehicleYear(data) 
{
	if (data.length == 0) {
		return;
	} else if (data.length > 1) {
		opt = '<option value="">Select Your Vehicle Year...</option>';
	} else {
		opt = '';
	}
	for( i=0 ;i < data.length; i++) {
	    opt += "<option>"+data[i]+'</option>';
	}
	$('#vehicle_year').html(opt);
	$('.vehicle_year').show();
	if (data.length == 1 ) {
		checkVehicleYear();
	}
}

function checkVehicleYear() 
{
	$('.vehicle_id').hide();
	$('.vehicle_color').hide();	
	$('#vehicle_id').val('');
	$('#vehicle_color').val('');

	var post = {
		'make': $('select#vehicle_make').val(),
		'model': $('select#vehicle_model').val(),
		'year': $('select#vehicle_year').val()
	};
	
	$.getJSON(vehicleJsonPath,post,
		function(data){
			updateVehicleTrans(data);
		}
	);
}

function updateVehicleTrans(data) 
{
	if (data.length == 0) {
		return;
	} else if (data.length > 1) {
		opt = '<option value="">Select Your Vehicle Transmision...</option>';
	} else {
		opt = '';
	}
	for( i=0 ;i < data.length; i++) {
	    opt += "<option value='"+data[i]['vehicle_id']+"'>"+data[i]['trany']+'</option>';
	}
	$('#vehicle_id').html(opt);
	$('.vehicle_id').show();
	$('.vehicle_color').show();
}


$(document).ready(function(){
	
	$('#vehicle_make').change(checkVehicleMake);
	$('#vehicle_make').append('<option value="" disabled=disabled> </option>');
	$('#vehicle_make').append('<option value=":MORE:">Show more cars...</option>');
	$('#vehicle_make').append('<option value="Unknown">I cannot find my vehicle</option>');
	
	$('#vehicle_model').change(checkVehicleModel);
	$('#vehicle_year').change(checkVehicleYear);
});