function populateModels(selectId) {
	$.ajax({
		url: '/brand-to-model.php',
		dataType: 'json',
		data: {id:$("#brandDropDown").val()},
		success: function(data) {
			var select = $('#modelDropDown');
	        var options = select.attr('options');
	        
	        $('option', select).remove();
	        
			options[options.length] = new Option("geen voorkeur", 0);
			
	        $.each(data, function(index, array) {
	            options[options.length] = new Option(array['model'] + " (" + array['count'] + ")", array['id']);
	        });
	        
			if(selectId){
				$("select[name=item[model]] > option[value=" + selectId + "]").attr('selected', 'selected');
			}
	
	        $("#modelBox").slideDown();
		},
		error: function(XMLHttpRequest, textStatus, errorThrown) {
			console.log(textStatus, errorThrown);
		}
	});
}

$(document).ready(function() {		
	$('#brandDropDown').change(function() {
		populateModels();
	});
	
	$("ul#thumblist li img").click(function() {
		//$("div.big a").attr("href", "http://www.kemker.nl/content/image.php?width=800&cropratio=4:3&image=" + $(this).attr("rel"));2
		$("div.big img").attr("src", "http://www.kemker.nl/content/image.php?width=379&cropratio=4:3&image=" + $(this).attr("data-value"));
		$("div.big img").attr("data-value", $(this).parent("li").attr("data-value"));
	});
	
	$("div.big img").click(function() {
		$("ul#thumblist li[data-value='"+ $("div.big img").attr("data-value") +"'] a").click();
	});

	if($("div.options div").length > 5){
		$("div.options div:nth-child(5)").after("<div><a class=\"showOptions\" href=\"#\">Bekijk alle opties en extra's</a></div>");
		$("div.options div:gt(5)").hide();
	}
	
	$("a.showOptions").toggle(function() {
		$("div.options div").show();
		$("div.options div:last-child").after(this);
		return false;
	}, function() {
		$("div.options div:gt(5)").hide();
		$("div.options div:nth-child(5)").after(this);
		return false;
	});
});

$(function() {
	$("#slider-range-mileage").slider({
		range: true,
		min: 0,
		max: 300000,
		step: 5000,
		values: [0, 300000],
		change: function(event, ui) {
			$("#mileage").text('Kilometer stand: ' + ui.values[0] + ' km - ' + ui.values[1] + ' km');
			$("input#mileage-min").val(ui.values[0]);
			$("input#mileage-max").val(ui.values[1]);
		},
		slide: function(event, ui) {
			$("#mileage").text('Kilometer stand: ' + ui.values[0] + ' km - ' + ui.values[1] + ' km');
			$("input#mileage-min").val(ui.values[0]);
			$("input#mileage-max").val(ui.values[1]);
		}
	});
	$("#mileage").text('Kilometer stand: ' + $("#slider-range-mileage").slider("values", 0) + ' km - ' + $("#slider-range-mileage").slider("values", 1) + ' km');
	
	$("#slider-range-weight").slider({
		range: true,
		min: 400,
		max: 4000,
		step: 50,
		values: [400, 4000],
		change: function(event, ui) {
			$("#weight").text('Gewicht: ' + ui.values[0] + ' kg - ' + ui.values[1] + ' kg');
			$("input#weight-min").val(ui.values[0]);
			$("input#weight-max").val(ui.values[1]);
		},
		slide: function(event, ui) {
			$("#weight").text('Gewicht: ' + ui.values[0] + ' kg - ' + ui.values[1] + ' kg');
			$("input#weight-min").val(ui.values[0]);
			$("input#weight-max").val(ui.values[1]);
		}
	});
	$("#weight").text('Gewicht: ' + $("#slider-range-weight").slider("values", 0) + ' kg - ' + $("#slider-range-weight").slider("values", 1) + ' kg');

	$("#slider-range-price").slider({
		range: true,
		min: 0,
		max: 52500,
		step: 2500,
		values: [0, 52500],
		change: function(event, ui) {
			if(ui.values[1] == 52500)
			{
				$("#price").text("Prijs: \u20ac" + ui.values[0] + " - > \u20ac50000");
			}
			else
			{
				$("#price").text("Prijs: \u20ac" + ui.values[0] + " - \u20ac" + ui.values[1]);
			}
			$("input#price-min").val(ui.values[0]);
			$("input#price-max").val(ui.values[1]);
		},
		slide: function(event, ui) {
			if(ui.values[1] == 52500)
			{
				$("#price").text("Prijs: \u20ac" + ui.values[0] + " - > \u20ac50000");
			}
			else
			{
				$("#price").text("Prijs: \u20ac" + ui.values[0] + " - \u20ac" + ui.values[1]);
			}
			$("input#price-min").val(ui.values[0]);
			$("input#price-max").val(ui.values[1]);
		}
	});
	$("#price").text("Prijs: \u20ac" + $("#slider-range-price").slider("values", 0) + " - > \u20ac50000");

	$("#slider-range-age").slider({
		range: true,
		min: parseInt($("input#age-min").val()),
		max: parseInt($("input#age-max").val()),
		step: 1,
		values: [$("input#age-min").val(), $("input#age-max").val()],
		change: function(event, ui) {
			$("#age").text('Bouwjaar: ' + ui.values[0] + ' - ' + ui.values[1]);
			$("input#age-min").val(ui.values[0]);
			$("input#age-max").val(ui.values[1]);
		},
		slide: function(event, ui) {
			$("#age").text('Bouwjaar: ' + ui.values[0] + ' - ' + ui.values[1]);
			$("input#age-min").val(ui.values[0]);
			$("input#age-max").val(ui.values[1]);
		}
	});
	$("#age").text('Bouwjaar: ' + $("#slider-range-age").slider("values", 0) + ' - ' + $("#slider-range-age").slider("values", 1));

	$("a.advanced_search").click(function(){
		$("div#advanced_search").slideDown();
		$("input#advanced_search_status").val("on");
		$(this).remove();
	});
	
	if($("input#advanced_search_status").val() == "on"){
		$("div#advanced_search").show();
		$("a.advanced_search").remove();
	}
});