var prev = 'tab_1';
var nav = 0;

$(function(){
	$('a.lightbox').lightBox({fixedNavigation:true});

	$('div.menuitem').hover(function(){
		$('div#submenu_'+this.id).show();
	},function(){
		$('div#submenu_'+this.id).hide();
	});

	$('div.leesmeer').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.zoek-een-woning').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.zoek-bedrijfsruimte').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.verzenden').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.zoek').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.login').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div.details').hover(function(){
		$(this).css('background-position','right');
	},function(){
		$(this).css('background-position','left');
	});

	$('div#home-fader').innerfade({
		speed: 'slow',
		timeout: 5000,
		type: 'sequence',
		containerheight: '225px'
	});

	$('div.home-tab').hover(function(){
		$('div#'+this.id+' div#home-tab-middle').css('color','#000');
	},function(){
		$('div#'+this.id+' div#home-tab-middle').css('color','#606060');
	});

	$('div.home-tab').click(function(){
		var id = this.id;
		aantal = id.replace('tab_','');
		$('div#tab-content-slider').animate({'margin-left':('-'+((aantal-1)*683)+'px')}, 500);

		$('div#'+prev+' div.home-tab-left-act').removeClass('home-tab-left-act');
		$('div#'+prev+' div.home-tab-middle-act').removeClass('home-tab-middle-act');
		$('div#'+prev+' div.home-tab-right-act').removeClass('home-tab-right-act');
		$('div#'+this.id+' div.home-tab-left').addClass('home-tab-left-act');
		$('div#'+this.id+' div.home-tab-middle').addClass('home-tab-middle-act');
		$('div#'+this.id+' div.home-tab-right').addClass('home-tab-right-act');
		prev = this.id;

	});

	$('div#'+prev+' div.home-tab-left').addClass('home-tab-left-act');
	$('div#'+prev+' div.home-tab-middle').addClass('home-tab-middle-act');
	$('div#'+prev+' div.home-tab-right').addClass('home-tab-right-act');

	$('div#content-fader').innerfade({
		speed: 'slow',
		timeout: 5500,
		type: 'sequence',
		containerheight: '252px'
	});

	$('div#zoek').click(function(){
		var ptype = $('input:radio[name=type]:checked').val();
		if(ptype==1){
			$('form#frm-homezoek').attr('action','/wonen-actuele-projecten.htm');
		} else {
			$('form#frm-homezoek').attr('action','/werken-actuele-projecten.htm');
		}
		$('form#frm-homezoek').submit();
	});

	$('div#login').click(function(){
		$('form#frm-login').submit();
	});

	$('div#intern-zoek').click(function(){
		var ret = true;
		ret = checkFromTill('input#inp_grondgebonden_from', 'input#inp_grondgebonden_till', ret);
		ret = checkFromTill('input#inp_appartementen_from', 'input#inp_appartementen_till', ret);
		ret = checkFromTill('input#inp_omzet_from', 'input#inp_omzet_till', ret);
		ret = checkFromTill('input#inp_units_from', 'input#inp_units_till', ret);
		ret = checkFromTill('input#inp_oppervlakte_from', 'input#inp_oppervlakte_till', ret);

		if (ret){
			$('form#frm-intern-zoek').submit();
		}
	});

	if ($('input.date').length>0){
		$('input.date').datePicker({startDate: '01-01-1970'});
	}

	updatePlaatsenHome();

	$('input[name=type]').change(function(){
		updatePlaatsenHome();
	});	

	updateBtn();

	$('div#related-projects-scroller').css('width',($('div.reated-item-holder').length * $('div#reated-item-holder').width()));
	$('div#related-projects-btn-right').click(function(){
		nav++;
		$('div#related-projects-scroller').animate({'margin-left': '-'+($('div#reated-item-holder').width()*nav)+'px'}, 500);
		updateBtn();
	});

	$('div#related-projects-btn-left').click(function(){
		nav--;
		$('div#related-projects-scroller').animate({'margin-left': '-'+($('div#reated-item-holder').width()*nav)+'px'}, 500);
		updateBtn();
	});

	updateProjectBtn();
	$('div#project-holder').css('width',($('div.project-slider-item').length * $('div#project-slider-item').width()));
	$('div#project-slider-right').click(function(){
		nav++;
		$('div#project-holder').animate({'margin-left': '-'+($('div#project-slider-item').width()*nav)+'px'}, 500);
		updateProjectBtn();
	});

	$('div#project-slider-left').click(function(){
		nav--;
		$('div#project-holder').animate({'margin-left': '-'+($('div#project-slider-item').width()*nav)+'px'}, 500);
		updateProjectBtn();
	});

	$('div#contact-verzenden').click(function(){
		$('form#contactfrm').submit();
	});

	$('form#contactfrm').submit(function(){
		var ret = true;
		if ($('input#naam').val()==''){
			$('input#naam').addClass('error');
			ret = false;
		} else {
			$('input#naam').removeClass('error');
		}

		if ($('textarea#vraag').text()==''){
			$('textarea#vraag').addClass('error');
			ret = false;
		} else {
			$('textarea#vraag').removeClass('error');
		}

		if ($('input#adres').val()==''){
			$('input#adres').addClass('error');
			ret = false;
		} else {
			$('input#adres').removeClass('error');
		}

		if ($('input#postcode').val()==''){
			$('input#postcode').addClass('error');
			ret = false;
		} else {
			$('input#postcode').removeClass('error');
		}

		if ($('input#plaats').val()==''){
			$('input#plaats').addClass('error');
			ret = false;
		} else {
			$('input#plaats').removeClass('error');
		}

		if ($('input#email').val()==''){
			$('input#email').addClass('error');
			ret = false;
		} else {
			$('input#email').removeClass('error');
		}

		return ret;
	});

});

function checkFromTill(from, till, ret){
	retfrom = checkIsNumeric(from, true);
	rettill = checkIsNumeric(till, true);

	if (retfrom && rettill){
		if ($(from).val()=='' || $(till).val()=='' || parseInt($(till).val())>= parseInt($(from).val())){
			$(from).css('border-color','#DDDDDD');
			$(till).css('border-color','#DDDDDD');
			return ret;
		} else {
			$(from).css('border-color','#FF0000');
			$(till).css('border-color','#FF0000');
			return false;
		}
	} else {
		return false;
	}
}

function checkIsNumeric(input, ret){
	if ($(input).val()!='' && isNaN($(input).val())){
		$(input).css('border-color','#FF0000');
		return false;
	} else {
		$(input).css('border-color','#DDDDDD');
		return ret;
	}
}

function updateProjectBtn(){
	if (nav<=0){
		$('div#project-slider-left').hide();
	} else {
		$('div#project-slider-left').show();
	}
	if (nav>=($('div.project-slider-item').length-1)){
		$('div#project-slider-right').hide();
	} else {
		$('div#project-slider-right').show();
	}
}

function updateBtn(){
	if (nav<=0){
		$('div#related-projects-btn-left').hide();
	} else {
		$('div#related-projects-btn-left').show();
	}
	if (nav>=($('div.reated-item-holder').length-2)){
		$('div#related-projects-btn-right').hide();
	} else {
		$('div#related-projects-btn-right').show();
	}
}

var map = null;
var marker = null;
var myLatlng = null;
var markerArray = new Array();

function updateProjectResultaten(ptype, actueel, referenties, locatie, status, soort){
	var myUrl = '/ajax.php?action=projecten&ptype='+ptype+'&actueel='+actueel+'&referenties='+referenties+'&locatie='+locatie+'&status='+status+'&soort='+soort;
	if ($('div#resultaten-result').length){
		$.ajax({
			url: myUrl,
			cache: false,
			dataType: "xml",			
			success: function(xml){
				var html = '';

				// Clear markers
				for (i=0; i<markerArray.length; i++){
					markerArray[i].setMap(null);
				}
				markerArray = new Array();

				// Map her positioneren naar locatie
				if ($(xml).find('projecten').attr('plaats')!=''){
					var plaats = 'NL,'+$(xml).find('projecten').attr('plaats');
					var zoomlevel = parseInt($(xml).find('projecten').attr('zoomlevel'));
					var geocoder = new google.maps.Geocoder();
					geocoder.geocode( { 'address': plaats}, function(results, gstatus) {
						if (gstatus == google.maps.GeocoderStatus.OK) {
							map.setCenter(results[0].geometry.location);
							map.setZoom(zoomlevel);
						}
					});
				}

				// Projects weergeven
				$(xml).find('project').each(function(){			
					var description = '';
					var image = '';

					// Active or inctive marker
					if ($(this).attr('active')=='true'){
						myMarker = '/images/marker.png';
						active = true;
					} else {
						myMarker = '/images/marker-inactive.png';
						active = false;
					}

					// get position of marker
					myLatlng = new google.maps.LatLng($(this).attr('lat'),$(this).attr('lon'));

					// Create marker
					marker = new google.maps.Marker({  
						position: myLatlng,    
						map: map,
						icon: myMarker,
						title:$(this).attr('title'),
						id: $(this).attr('id')
					});   

					// Add marker to marker array (for clearing markers)
					markerArray.push(marker);
				
					if (active){
						// Add click event
						google.maps.event.addListener(marker, 'click', function() { 
							var id = this.id;
							$('div.resultaten-item-active').removeClass('resultaten-item-active');
							$('div#result_'+id).addClass('resultaten-item-active');

							//$("div#resultaten-result").scrollTo($('div#result_'+id), 200);
							location.href='#link_'+id;
						});

						// Get decription
						$(this).find('desc').each(function(){
							description = $(this).text();
						});

						// Get image
						$(this).find('image').each(function(){
							image = $(this).attr('file');
						});

						// Build result
						html += '<div id="result_'+$(this).attr('id')+'" class="resultaten-item">';
							html += '<a name="link_'+$(this).attr('id')+'"></a>';
							html += '<div id="resultaten-item-image"><img src="'+image+'"></div>';
							html += '<div id="resultaten-item-tekst">';
								html += '<div id="resultaten-item-title"><h2>'+$(this).attr('title')+'</h2></div>';
								html += '<div id="resultaten-item-description">'+description+'</div>';
								html += '<div id="resultaten-item-btn"><a href="'+$(this).attr('url')+'"><div class="details" id="detail_'+$(this).attr('id')+'"></div></a></div>';
							html += '</div>';
						html += '</div>';			
						html += '<div id="resultaten-item-lijn"></div>';
					}
				});

				// Add html to result holder
				$('div#resultaten-result-holder').html(html);

				$('div.details').hover(function(){
					$(this).css('background-position','right');
				},function(){
					$(this).css('background-position','left');
				});

			}
		});		
	}
}

function updateZoek(ptype, actueel, referenties, locatie, status, soort){	
	$.ajax({
		url: '/ajax.php?action=zoek&ptype='+ptype+'&actueel='+actueel+'&referenties='+referenties+'&locatie='+locatie+'&status='+status+'&soort='+soort,
		cache: false,		
		success: function(html){
			$('div#resultaten-zoek').html(html);

			$('div#zoek-extra').hover(function(){
				$(this).css('background-position','right');
			},function(){
				$(this).css('background-position','left');
			});

			$('div#zoek-extra').click(function(){
				var ptype = $('input#ptype').val();
				var actueel = $('input#actueel').val();
				var referenties = $('input#referenties').val();
				var locatie = $('select#locatie').val();
				var status = $('select#status').val();
				var soort = $('select#soort').val();

				updateProjectResultaten(ptype, actueel, referenties, locatie, status, soort);
				updateZoek(ptype, actueel, referenties, locatie, status, soort);
			});

			$('select#locatie').change(function(){
				var ptype = $('input#ptype').val();
				var actueel = $('input#actueel').val();
				var referenties = $('input#referenties').val();
				var locatie = $('select#locatie').val();
				var status = $('select#status').val();
				var soort = $('select#soort').val();

				updateZoek(ptype, actueel, referenties, locatie, status, soort);
			});

			$('select#status').change(function(){
				var ptype = $('input#ptype').val();
				var actueel = $('input#actueel').val();
				var referenties = $('input#referenties').val();
				var locatie = $('select#locatie').val();
				var status = $('select#status').val();
				var soort = $('select#soort').val();

				updateZoek(ptype, actueel, referenties, locatie, status, soort);
			});

			$('select#soort').change(function(){
				var ptype = $('input#ptype').val();
				var actueel = $('input#actueel').val();
				var referenties = $('input#referenties').val();
				var locatie = $('select#locatie').val();
				var status = $('select#status').val();
				var soort = $('select#soort').val();

				updateZoek(ptype, actueel, referenties, locatie, status, soort);
			});

		}
	});
}

function updatePlaatsenHome(){
	if ($('div#home-plaatsen').length){
		var ptype = $('input:radio[name=type]:checked').val();
		$.ajax({
			url: '/ajax.php?action=plaatsen&ptype='+ptype,
			cache: false,
			success: function(html){
				$('div#home-plaatsen').html(html);
			}
		});		
	}
}

function loadProjects(address, zoomlevel, ptype, actueel, referenties, locatie, status, soort) {
	var geocoder = new google.maps.Geocoder();
	geocoder.geocode( { 'address': address}, function(results, gstatus) {
		if (gstatus == google.maps.GeocoderStatus.OK) {
			var latlng = results[0].geometry.location;

			var myOptions = {
				zoom: zoomlevel,
				center: latlng,
				mapTypeControl: false,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};
			map = new google.maps.Map(document.getElementById("resultaten-google"),myOptions);

			updateProjectResultaten(ptype, actueel, referenties, locatie, status, soort);
			updateZoek(ptype, actueel, referenties, locatie, status, soort);

			return results[0].geometry.location;
		} else {
			alert("Geocode was not successful for the following reason: " + gstatus);
		}
	});
}

function loadMap(lat, lon, zoomlevel, div){

	// get position of marker
	myLatlng = new google.maps.LatLng(lat, lon);

	var myOptions = {
		zoom: zoomlevel,
		center: myLatlng,
		mapTypeControl: false,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	map = new google.maps.Map(document.getElementById(div),myOptions);


	// Create marker
	marker = new google.maps.Marker({  
		position: myLatlng,    
		map: map,
		icon: '/images/marker.png'
	}); 
}