var aantalTimer = false;
var aantalTimerDuur = false;

var formEleLijst = new Array();
function initForm() {
	if ( $('#tabframe').length ) {
		$('#mrk').bind('change keyup', function() {
			laadMMU( {
				ele: { merk: $(this), model: $('#mdl') },
				laad: 'model'
			} );
		} );
		
		$('#tabframe .crs li img').click( function() {
			$(this).parent().find('input').prop('checked', true).trigger('change');
		} );
		
		// Aantal
		$('#tabframe').find('#mrk, #mdl, #prtot, #bjvan').bind( 'change', function() {
			var jxPar = new Array( 'zoek=aantal&ctg=!lease' );
			
			var eleLijst = $('#tabframe').find('#mrk, #mdl, #prtot, #bjvan');
			
			var aantal = eleLijst.length;
			for ( var i = 0; i < aantal; i++ ) {
				if ( eleLijst[ i ].type == 'radio' ) {
					if ( eleLijst[ i ].checked ) {
						jxPar.push( eleLijst[ i ].name+'='+eleLijst[ i ].value );
					}
					continue;
				}
				
				if ( !eleLijst[ i ].disabled && eleLijst[ i ].value ) {
					jxPar.push( eleLijst[ i ].id+'='+eleLijst[ i ].value );
				}
			}
			jxPar = jxPar.join('&');
			
			clearTimeout( aantalTimer );
			var aantalTimer = setTimeout( function() {
					$.ajax( {
						data: jxPar,
						success: function( data ) {
							var returnTxt = "Zoeken";
							
							if ( voertuig == 'motor' && parseInt( data[0] ) > 0 ) {
								returnTxt = data[0].toString()+" motor"+( data[0] > 1 ? "en" : "" );
							} else if ( parseInt( data[0] ) > 0 ) {
								returnTxt =  data[0].toString()+" auto"+( data[0] > 1 ? "'s" : "" );
							}
							$("#form-aantal").text( returnTxt );
							
							clearTimeout( aantalTimer );
						}
					} )
				}, aantalTimerDuur
			);
			
			aantalTimerDuur = 500;
		} );
		
		$('#knop-uitgebreidzoeken').click( function() {
			var hrefPar = $('#tabframe select, #tabframe input').not("[value='']").serialize();
			if ( hrefPar.length > 0 ) {
				this.href += '?'+hrefPar;
			}
		} );
	}
	
	if ( $('#form-uitgebreid').length ) {
		for ( var n = 1; n <= 3; n++ ) {
			$('#mrk-'+n).bind('change keyup', function() {
				$('#'+$(this).attr('id').replace( 'mrk', 'trfw') )[0].disabled = ( !$(this).val() );
				laadMMU( {
					ele: { merk: $(this), model: $('#'+this.id.replace( 'mrk', 'mdl') ) },
					laad: 'model'
				} );
			} );
		}
		
		// Van/tot select-boxen omzetten naar sliders.
		/*if ( runHeavy ) {
			var uiSetup = {
				labels: 6,
				lastTic: -1,
				sliderOptions: {
					change: function(e, ui) {
						wijzigingForm( false );
					}
				}
			};
			
			// Aan het eind de 1e optie toevoegen.
			$('ul.slider').each( function() {
				$('select', this).append( $('select:eq(0) option:eq(0)', this).outerHTML() );
			} );
			
			// Bouwjaar waarden omdraaien
			optiesOmdraaien( 'bjvan' );
			optiesOmdraaien( 'bjtot' );
			
			$('ul.slider').each( function() {
				var sVan = $('select:eq(0)', this);
				var sTm = $('select:eq(1)', this);
				if ( sVan.get(0).selectedIndex > sTm.get(0).selectedIndex ) {
					sTm.get(0).selectedIndex = ( $('option', sTm).length - 1 );
				}
				
				$('select', this).selectToUISlider( uiSetup ).hide();
				$('.ui-slider', this).wrap('<div class="grid-8 alpha omega"></div>');
				
				// Van
				$('select:eq(0)', this).parent().hide();
				
				var naam = $('li:eq(1) label', this).text().replace(' t/m','');
				$('label', this).remove();
				
				// T/m
				$('li:eq(1)', this).attr('class', 'clearfix').prepend( '<label>'+naam+'<\/label>' );
			} ).removeClass('verticaal');
		}*/
		
		// Energielabel
		if ( $('select#nrg').length ) {
			var html = '<ul class="pijl nrg" style="width: 100px;">';
			$('select#nrg option:gt(0)').each( function() {
				html += '<li><a href="#"><img src="/images/icoon/energielabel/'+$(this).val()+'-trede-nonactief.png" alt="Energielabel '+$(this).val()+'" title="Energielabel '+$(this).val()+( $(this).val() == 'A' ? '' : ' of beter' )+'" /></a></li>';
			} );
			html += '<li class="geen"><a href="#">Geen voorkeur</a></li>';
			html += '</ul><input type="hidden" id="nrg" name="nrg" value="'+$('select#nrg').val()+'" />';
			$('select#nrg').parents('ul').outerHTML( html );
			
			energielabelKeuze();
		}
		
		// Locatie
		if ( $('input[id^=locatie-]').length ) {
			$('#provincie, #plaats, #strl').bind( 'change keyup focus', function() {
				var locatieId = ( $(this).attr('id') == 'strl' ? 'plaats' : $(this).attr('id') );
				$('#locatie-'+locatieId).prop( 'checked', true );
				if ( $(this).attr('id') != 'plaats' ) {
					locatieWijziging();
				}
			} );
			$('#plaats').bind( 'blur', function() {
				locatieWijziging();
			} );
			$('input[name=locatie]').bind( 'change', function() {
				locatieWijziging();
			} );
		}
		
		formEleLijst = $('select, input:checkbox, input:text', $('#form-uitgebreid') );
		formEleLijst.change( function() {
			locatieWijziging()
		} );
		
		locatieWijziging();
		
		$('#form-uitgebreid').submit( function() {
			var aantal = parseInt( $('#form-aantal').text().replace('.','') );
			if ( aantal >= 15000 ) {
				$('#dialoog').dialog( {
					title: 'Teveel resultaten'
				} ).html( 'Uw zoekopdracht levert meer dan <strong>15.000</strong> resultaten op.<br />Stel meer filters in om dit aantal te verminderen.' ).dialog('open');
				return false;
			}
			return true;
		} );
	}
}

function locatieWijziging( ExtraElementen ) {
	ExtraElementen = ( typeof ExtraElementen == 'string' ? ExtraElementen : false );
	if ( $('input[name=locatie]:checked').val() == 'provincie' ) {
		wijzigingForm( '#provincie'+( ExtraElementen ? ','+ExtraElementen : '' ) );
	} else if ( $('input[name=locatie]:checked').val() == 'plaats' ) {
		wijzigingForm( '#plaats,#strl'+( ExtraElementen ? ','+ExtraElementen : '' ) );
	} else {
		wijzigingForm( ExtraElementen );
	}
}

function energielabelKeuze() {
	$('ul.nrg a').click( function() {
		if ( $(this).parent().hasClass('geen') ) {
			$('#nrg').val('');
		} else {
			var nrgMatch = $('img', this).attr('src').match('([A-Z])-trede');
			if ( nrgMatch ) {
				$('#nrg').val(nrgMatch[1]);
			}
		}
		
		energielabelSet();
		
		locatieWijziging('#nrg');
		return false;
	} ).mouseover( function() {
		if ( $(this).parent().hasClass('geen') ) {
			energielabelSet();
			return false;
		}
		
		var liIndex = $(this).parent().index();
		$(this).parent().parent().find('li:lt('+( liIndex + 1 )+') img').each( function() {
			$(this).attr('src', $(this).attr('src').replace('-trede-nonactief.png', '-trede.png') );
		} ).end().find('li:gt('+liIndex+') img').each( function() {
			$(this).attr('src', $(this).attr('src').replace('-trede.png', '-trede-nonactief.png') );
		} );
	} ).parents('ul').mouseleave( function() {
		energielabelSet();
	} );
	
	energielabelSet();
}
function energielabelSet() {
	var imgActiefLijst = false;
	var imgNonactiefLijst = false;
	
	if ( !$('#nrg').val().length ) {
		imgNonactiefLijst = $('ul.nrg img');
	} else {
		var liIndex = $('ul.nrg img[src*='+$('#nrg').val()+'-trede]').parent().parent().index();
		imgActiefLijst = $('ul.nrg li:lt('+( liIndex + 1 )+') img');
		imgNonactiefLijst = $('ul.nrg li:gt('+liIndex+') img');
	}
	
	if ( imgActiefLijst ) {
		imgActiefLijst.each( function() {
			$(this).attr('src', $(this).attr('src').replace('-trede-nonactief.png', '-trede.png') );
		} );
	}
	if ( imgNonactiefLijst ) {
		imgNonactiefLijst.each( function() {
			$(this).attr('src', $(this).attr('src').replace('-trede.png', '-trede-nonactief.png') );
		} );
	}
}

function optiesOmdraaien( Id ) {
	var optieStart = $('select#'+Id+' option:first');
	var optieEind = $('select#'+Id+' option:last');
	
	var arr = $('select#'+Id+' option').not(optieStart).not(optieEind).reverse();
	$('select#'+Id).append(optieStart).append(arr).append(optieEind);
}

function wijzigingForm( ExtraElementen ) {
	var jxPar = new Array( 'zoek=aantal' );
	
	var eleLijst = formEleLijst;
	if ( ExtraElementen ) {
		eleLijst = eleLijst.add( ExtraElementen );
	}
	
	var aantal = eleLijst.length;
	for ( var i = 0; i < aantal; i++ ) {
		if ( eleLijst[ i ].type == 'checkbox' ) {
			if ( eleLijst[ i ].checked ) {
				jxPar.push( eleLijst[ i ].name+'='+eleLijst[ i ].value );
			}
			continue;
		}
		
		if ( !eleLijst[ i ].disabled && eleLijst[ i ].value ) {
			jxPar.push( eleLijst[ i ].name+'='+eleLijst[ i ].value );
		}
	}
	jxPar = jxPar.join('&');
	
	clearTimeout( aantalTimer );
	var aantalTimer = setTimeout( function() {
		$.ajax( {
			data: jxPar,
			success: function( data ) {
				$('#form-aantal').text( data[0].toString() );
				
				clearTimeout( aantalTimer );
			}
		} )
	}, aantalTimerDuur );
	
	aantalTimerDuur = 500;
}

$(document).ready( function() {
	setTimeout(	initForm, 1 );
} );