var loginCleared    	 = false;
var searchCleared    	 = false;
var newsletterCleared    = false;
var passwordCleared 	 = false;
var opmerkingenCleared   = false;
var state           	 = "in";

function toggleLoginSlider(){
	if (state == "in")
	{
		$('#sidebar').animate({left: 0}, 300, function(){
			state = "out";
			$(this).removeClass("sb_hidden");
			$(this).addClass("sb_visible");
		});
	}
	else
	{
		$('#sidebar').addClass("sb_under");
		$('#sidebar').animate({left: -142}, 300, function(){
			state = "in";
			$(this).removeClass("sb_under");
			$(this).removeClass("sb_visible");
			$(this).addClass("sb_hidden");
		});
	}
}

$(document).ready(function(){
						   
	// add an onChange event to username and password
	// fields that clear the field
	
	$("#username").each(function(){
		$(this).focus(function(){
			if (loginCleared == false){
				this.value = "";
				loginCleared = true;
			}
	   	});
	});
	
	$("#search").each(function(){
		$(this).focus(function(){
			if (searchCleared == false){
				this.value = "";
				searchCleared = true;
			}
	   	});
	});
	
	$("#nlemail").each(function(){
		$(this).focus(function(){
			if (newsletterCleared == false){
				this.value = "";
				newsletterCleared = true;
			}
	   	});
	});
	
	$("#password").each(function(){
		$(this).focus(function(){
			if (passwordCleared == false){
				this.value = "";
				passwordCleared = true;
				changeInputType(this,'password','',true,false);
			}
	   	});
	});
	
	$("#opmerkingen").each(function(){
		$(this).focus(function(){
			if (opmerkingenCleared == false){
				this.value = "";
				opmerkingenCleared = true;				
			}
	   	});
	});
	
	// add an onclick event to menu element with id "login"
	
	$(".loginlink").click(function(){
		toggleLoginSlider();
	});	
});

function changeInputType(
  oldElm, 			// a reference to the input element
  iType, 			// value of the type property: 'text' or 'password'
  iValue, 			// the default value, set to 'password' in the demo
  blankValue, 		// true if the value should be empty, false otherwise
  noFocus) {  		// set to true if the element should not be given focus

  if(!oldElm || !oldElm.parentNode || (iType.length<4) || 
    !document.getElementById || !document.createElement) return;
  var isMSIE=/*@cc_on!@*/false; //http://dean.edwards.name/weblog/2007/03/sniff/
  if(!isMSIE){
    var newElm=document.createElement('input');
    newElm.type=iType;
  } else {
    var newElm=document.createElement('span');
    newElm.innerHTML='<input type="'+iType+'" name="'+oldElm.name+'">';
    newElm=newElm.firstChild;
  }
  var props=['name','id','className','size','tabIndex','accessKey'];
  for(var i=0,l=props.length;i<l;i++){
    if(oldElm[props[i]]) newElm[props[i]]=oldElm[props[i]];
  }
  newElm.onfocus=function(){return function(){
    if(this.hasFocus) return;
    var newElm=changeInputType(this,'password',iValue,
      (this.value.toLowerCase()==iValue.toLowerCase())?true:false);
    if(newElm) newElm.hasFocus=true;
  }}();
  newElm.onblur=function(){return function(){
    if(this.hasFocus)
    if(this.value=='' || (this.value.toLowerCase()==iValue.toLowerCase())) {
      changeInputType(this,'text',iValue,false,true);
    }
  }}();
 // hasFocus is to prevent a loop where onfocus is triggered over and over again
  newElm.hasFocus=false;
  // some browsers need the value set before the element is added to the page
  // while others need it set after
  if(!blankValue) newElm.value=iValue;
  oldElm.parentNode.replaceChild(newElm,oldElm);
  if(!isMSIE && !blankValue) newElm.value=iValue;
  if(!noFocus || typeof(noFocus)=='undefined') {
    window.tempElm=newElm;
    setTimeout("tempElm.hasFocus=true;tempElm.focus();",1);
  }
  return newElm;
}

var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = (tag)? new RegExp("\\b" + tag + "\\b", "i") : null,
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(!nodeName || nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = "",
				xhtmlNamespace = "http://www.w3.org/1999/xhtml",
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
			}
			try	{
				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = [],
				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};