function labelsToInputs(selector, options) {
    $(selector).each(
	function() {
	    var emptyisuntouched = true;
	    var labelText = $(this).text();
	    var labelFor = $(this).attr("for");
	    var input = $("#" + labelFor);
	    if ($.trim(input.val()) == "") {
		if (input.attr("type") == 'password') {
		    try {
			input.attr("type", "text");
		    } catch (e) {
			// happens in text/html FF, never mind...
			var i = $("<input type='text' value='' id='" + input.attr("id") + " name='" + input.attr('name') + " class='" + input.attr("class") + "' />");
			input.before(i);
			input.hide();
			i[0].realInput = input;
			input = i;
			
		    }
		    input.addClass("password");
		}
		input.val(labelText);
		input.addClass("untouched");
		$(this).css("display", "none");
		var focus = function() {
		    // if entered for the first time, remove the label value
		    if ($(this).hasClass("untouched")) {
			if (emptyisuntouched) {
			    $(this).removeClass("untouched");
			}
			this.value = "";
			if ($(this).hasClass("password")) {
			    try {
				$(this).attr("type", "password");
			    } catch (e) {
				$(this.realInput).show().focus();
				$(this).hide();
				// happens in text/html FF, never mind...
				
			    }
			}
		    }
		};
		input.focus(focus);
		input.select(focus);
		input.blur(
		    function() {
			// if leaving, the value is empty, and empty is equivalent to 'untouched', put the label back in.
			if ($.trim($(this).val()) == "") {
			    if (emptyisuntouched) {
				$(this).addClass("untouched");
			    }
			    if ($(this).hasClass("untouched")) {
				$(this).val(labelText);
				if ($(this).hasClass("password")) {
				    try {
					$(this).attr("type", "text");
				    } catch (e) {
					// happens in text/html FF, never mind...
				    }
				}
			    }
			}
		    });
		if (! emptyisuntouched) {
		    input.keyup(
			function() {
			    $(this).removeClass("untouched");
			});
		}
	    } else {
		// value is not empty, so cant use it for the label
	    }

	});
}





/*
 *
 */

$(document).ready(
    function() {

	// open external links in a new window
	$(".contactenverdieping a.external").click(
	    function() {
		window.open(this.href);
		return false;
	    }
	);


	//var effect = "drop";
	var speed = "slow";

	// clicking anywhere on the 'slider' will toggle it.
	$(".contactenverdieping .slider").live("click",
	    function(ev) {

		if ($(ev.target).is(".contactenverdieping .slider .more a, .contactenverdieping .slider .more input, .contactenverdieping .slider .more textarea")) {
		    // not toggling because this ia link or an input
		    return;
		}
		if ($(this).parents("div.contactenverdieping").hasClass("shown")) {
		    // show siblings again
		    $(this).siblings("div.slider").show(speed);
		    // and all items in the other row:
		    $(this).parents("div.row").siblings("div.row").find("div.slider").show(speed);
		    // Hide my more div again
		    $(this).find("div.more").hide(speed);

		    $(this).parents("div.contactenverdieping").removeClass("shown");		    
		    document.location.hash = "none"; // setting to "" wil scroll the page

		} else {
		    // hide all siblings
		    $(this).siblings("div.slider").hide(speed);
		    // and all items in the other row
		    $(this).parents("div.row").siblings("div.row").find("div.slider").hide(speed);
		    // show and calculate width of my 'more' div.
		    $(this).find("div.more").show(speed).css("width", ($(this).parents("div.row").width() - $(this).width()) + "px");
		    $(this).parents("div.contactenverdieping").addClass("shown");
		}
	    });
	// except of course when clicking on links
	 $(".contactenverdieping .slider .more a, .contactenverdieping .slider .more input").live("click",
	    function(ev) {	
		ev.stopPropagation();
	    }
	);
	// clicking on the actual anchor is already arranged by the match on .slider
	// still, we want the hash of document.location to be correct
	// so it must be _removed_ when clicking a second time.
	$(".contactenverdieping .slider > a.navigate").live("click",
	    function(ev) {
		ev.preventDefault(); // no not place it any way
		if (document.location != this.href) { // only if it's not already there (then it is removed by .slider.click()
		    document.location = this.href;
		}
	    }
	);

	//clicking somewhere else, or, on the still visible headers also restores the initial state
	$("body").click(
	    function(ev) {
		if ($(ev.target).is(".contactenverdieping .row h2") || $(ev.target).parents(".contactenverdieping").length == 0) {
		    var parent = $("div.contactenverdieping");
		    if (parent.hasClass("shown")) {
			parent.find("div.more").hide(speed);
			parent.find("div.slider").show(speed);
			parent.removeClass("shown");
			document.location.hash = "none";
		    }

		}
	    });
	
	var loadMailBlock = function() {
	    // add validation to mail form
	    MMBaseValidator.prototype.prefetchNodeManager("email");
	    var validator = new MMBaseValidator($(".contactenverdieping div.mail"));
	    
	    // furthermore we like the 'required' error message to look like just a star, to take up less space
	    var stars = function() {
		$(".contactenverdieping span.error.required").html("*");
		$(".contactenverdieping span.error.minLength").html("*");	    
	    };
	    $(".contactenverdieping div.mail input[type=submit]").attr("disabled", "disabled");
	    $(".contactenverdieping div.mail").bind(
		"mmValidate", 
		function(ev, validator, valid, server) {
		    if (server) {
			stars();
		    }
		    // enable/disable the submit button:
		    if (validator.invalidElements == 0) {
			$(".contactenverdieping div.mail input[type=submit]").removeAttr("disabled");
		    } else {
			$(".contactenverdieping div.mail input[type=submit]").attr("disabled", "disabled");
		    }
		    
		});
	    stars();

	    // convert to mail form post to javascript
	    $(".contactenverdieping div.mail input[type=submit]").click(
		function() {
		    try {
			var action = this.form.action;
			var block = $(this).parents("div.mail");
			var d = {};
			block.find("input,textarea").each(
				   function() {
				       d[this.name] = $(this).val();
				   });
						
			$.ajax({ async: false,
				 url: action,
				 type: "POST",
				 data: d,
			     complete: function(data){
				 $(block).replaceWith(data.responseText);
				 var b = $(".contactenverdieping div.mail div.more").show();
				 loadMailBlock();
			     }});
		    } catch (e) {
			// console.log(e);
		    }
		    // console.log("returngin false");
		    return false;
		});
	    labelsToInputs(".contactenverdieping div.mail label");
	};

	var loadChatBlock = function() {
	    
	    // show the chat button
	    var workgroup ='nazorg@workgroup.chat.eo.nl';
	    var d = new Date();
	    var v1 = d.getSeconds() + '' + d.getDay();
	    var img = "http://nazorg.eo.nl/webchat/live?action=isAvailable&workgroup=" + workgroup;
	    var gotoURL = "http://nazorg.eo.nl/webchat/start.jsp?workgroup=" + workgroup + "&location=" + window.location.href;
	    $(".contactenverdieping .chatbutton").html("<a href=\"#\" onclick=\"launchWin(\'framemain\','" + 
						       gotoURL + "',500, 400);return false;\"><img border=\"0\" src=\"" + img + "\"></a>"); 
	};
	
	var load = function() {
	    loadMailBlock();
	    loadChatBlock();
	    // initially open the one associated with the hash
	    if (document.location.hash.indexOf("#wb_contact") >= 0) {
		$("a[href=" + document.location.hash + "]").click();
	    }
	    $(window).bind("beforeunload", 
			   function() {
			       $(".contactenverdieping div.mail .untouched").val("");
			   });
	};

	$(".webblock_contact_ajax").each(
	    function() {
		var block = $(this).parents(".contactenverdieping")[0];
		var webblocknumber = block.id.substring(3);
		var d = { thisWebblock: webblocknumber };

		$.ajax({ url: "/components/webblock_contact/body.jspx", 
			 data: d,
			 complete: function(data){
			     $(block).html(data.responseText);
			     load();
			     labelsToInputs(".contactenverdieping div.mail label");
			 }});
	    });


	
    });