/*
 	GetElementValueFromClassName
 	with this function you can read parts of classNames.
 	this can be used as such:
 	
 	var width = GetElementValueFromClassName(this.className, "w");
 	
 	where we read the value from the classname 'w:300' the selector is set between quotes.
 	the name is split with a ':'. This can be used to give parameters to javascript in 
 	className. 
 	
 	use carefully, as this is on the borderline of mixing presentation and behaviour...
 */
function GetElementValueFromClassName(className, element){
    var result = "";
	var test = new String(className);
	var elementString = new String(element);
	elementString = elementString + ":";	
	var startpos = test.indexOf(elementString, 0);	
	if (startpos >= 0){
	    test = test.substr(startpos, test.length);	    
	    if (test.indexOf(" ", 0) >= 0){
	        test = test.substr(elementString.length, test.indexOf(" ", 0) - elementString.length); 
	    }
	    else{
	        test = test.substr(elementString.length, test.length - elementString.length); 
	    }	    
	    result = test;
	}	
	return result;
}	



/*
	using it is simple
	
	$('#thing').click($.delegate({
	  '.quit': function() {  },//quit stuff inside brackets
	  '.edit': function() {  } // edit stuff inside brackets
	}));
	
	see it's origin here...
	http://www.danwebb.net/2008/2/8/event-delegation-made-easy-in-jquery
	thanks dann
*/
/* ++++++++++++++++++++++++++++++++
	++	jQuery Palette v0.1.8		++
	++	jquery.pallette-0.1.8.js	++
	++	updated	2008-07-24			++
	++										++
	++	Dependencies:					++
	++	- jQuery 1.2.6 or higher	++
	++++++++++++++++++++++++++++++++ */
	
	
(function( $ ) {
	$.fn.extend( {
	/* ========================
		==  Extending jQuery  ==
		======================== */
	
		palette: "0.1.8",
		
		contentObj: window.contentObj || {},
	
		hashRef: function() { // v0.1.5
			//	Finds corresponding element(s), based on href= attribute (hash) of first matched element. Works both ways.
			return this.is("[href*='#']") ? ( $(this[0].href.substring( this[0].href.lastIndexOf("#") )) ) : $("[href$='#" + this[0].id + "']");
		},

		forRef: function() { // v0.1.5
			//	Finds corresponding label(s), input, select or textarea, based on for= attribute of first matched element. Works both ways.
			return this.is("label[for]") ? $("#" + this[0].htmlFor) : $("label[for='" + this[0].id + "']");
		},
	
		
		overLabel: function() { // v0.1.6
			//	Makes 'overLabel' behavior possible. Works both on labels and form fields.
			//	Concept based on http://www.alistapart.com/articles/makingcompactformsmoreaccessible/
			//	CSS:		.jsOverLabel (on label)
			//				.jsOverLabelBlur (on parent of form field: blur)
			//	Deps.:	forRef() method (v0.1+)
			return this
				.each( function() {
					var jThis = $(this);
					var jRef = jThis.forRef();
					if ( jThis.is("label[for]") ) {
						var jFormControl = jRef;
						var jLabels = jThis;
					} else {
						var jFormControl = jThis;
						var jLabels = jRef;
					}
					if ( !( jFormControl.length > 0 && jLabels.length > 0 ) ) return true;	// continue
					
					jLabels.each( function() {
						$(this).addClass("jsOverLabel");
						if ( jFormControl.val() === "" ) jFormControl.parent().addClass("jsOverLabelBlur");
						jFormControl
							.focus( function() { $(this).parent().removeClass("jsOverLabelBlur"); } )
							.blur( function() { 
								var jFormControl = $(this);
								if ( jFormControl.val() === "" ) jFormControl.parent().addClass("jsOverLabelBlur");
							} )
							.click( function() { $(this).forRef().trigger("focus"); } );
					} );
				} );
		}
		
	} );
	
	$.extend( {
	/* ========================
		==  Custom functions  ==
		======================== */

		// custom project function here, triggered with: $.functionName();
		
	} );
} )(jQuery);

/**
 * Copy the value of an input field's title attribute to its value attribute.
 * Clear the input field on focus if its value is the same as its title.
 * Repopulate the input field on blur if it is empty.
 * Hide the input field's associated label if it has one.
 */

	/*
	  Main function
	
		http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/
		
		modified to use with jquery by wilfred nas 
			http://wnas.nl/ 
			wilfred@wnas.nl
	 */
var autoPopulate = {
	
	sInputClass:'populate', // Class name for input elements to autopopulate
	
	
	init:function() {
		// Check for DOM support
		if (!document.getElementById || !document.createTextNode) {return;}
		// Find all input elements with the given className
		var arrInputs = $('input.populate'); //getElementsByClassName(document, 'input', autoPopulate.sInputClass);
		var iInputs = arrInputs.length;
		var oInput;
		for (var i=0; i<iInputs; i++) {
			oInput = arrInputs[i];
			// Make sure it's a text input
			if (oInput.type != 'text') { continue; }
			// If value is empty and title is not, assign title to value
			if ((oInput.value == '') && (oInput.title != '')) { 
				//console.log(oInput.value+'boe');
				oInput.value = oInput.title; 
				jQuery('input.autopopulate').addClass('defaultInput');
			}
			// Add event handlers for focus and blur
			jQuery('input.autopopulate').focus(function() {
				// If value and title are equal on focus, clear value
				if (this.value == this.title) {
					this.value = '';
					this.select(); // Make input caret visible in IE
					jQuery(this).val('').removeClass('defaultInput');
				}
			});
			jQuery('input.autopopulate').blur(function() {
				// If the field is empty on blur, assign title to value
				if (!this.value.length) { 
					this.value = this.title;
					jQuery(this).addClass('defaultInput');
				}
				else {
					if (this.value != this.title) { jQuery(this).removeClass('defaultInput'); }
				}
			});
		}
	}
};
/* ======================
	==  Function calls  ==
	====================== */


/**
 * Init on dom ready.
 */
$(document).ready(function() {	
	autoPopulate.init();

	jQuery.delegate = function(rules) {
	  return function(e) {
	    var target = $(e.target);
	    for (var selector in rules)
	      if (target.is(selector)) return rules[selector].apply(this, $.makeArray(arguments));
	  }
	}

	$(function(){
	  $('.populate').each(function(){
	
	    var e = $(this);
	    if (e.attr('title').length &! e.val().length) {
	      e.val(e.attr('title'));
	    }
	    if (e.attr('title') == e.val()) e.addClass('inputLabel');
	
	    e.focus(function(){
	      var e = $(this);
	      if (e.attr('title') == e.val()) {
	        e.val('').removeClass('inputLabel');
	      }
	    }).blur(function(){
	      var e = $(this);
	      if (e.attr('title').length &! e.val().length) {
	        e.val(e.attr('title')).addClass('inputLabel');
	      }
	    });
	
	    $('label[@for='+$(this).attr('id')+']').addClass('hiddenlabel');
	
	  });
	});

	// autoPopulate.init();
	// leeg de velden als ze gelijk zijn aan de title...
	// anders is je vraag invalide
	jQuery('form').submit(function(){
 		var els = this.elements;
		for (var i=0;i<els.length;i++) {
			if (els[i].title == els[i].value)
			els[i].value = '';
		}
	});
	
	jQuery('.tabs').tabs();
	
	jQuery('input[type="text"]').addClass('text');
	jQuery('input[type="password"]').addClass('password');


	$('body').click($.delegate({
	  '.vktrigger': function(e) {
	/*
	 * 
		in order to toggle the 'voorkeuren' pane, you have to add two things to the 'trigger'
		a class of .vktrigger and a class of .t:IDOFTHEPANETOBETOGGLED
		
		furthermore you have to add an id to the pane to be toggled of #IDOFTHEPANETOBETOGGLED,
		aka the same as behind the .t: class on the trigger
		
		vktrigger tells the js that it is a trigger, t:IDOFTHEPANETOBETOGGLED tells what pane has to be triggered...
	 */
	  	var that = e.target; // get the thing that was actually clicked
	    $(that).toggleClass('active');//give it a class
		var vk = GetElementValueFromClassName(that.className,'t'); // get the toggly thingamagic
		if (vk != 'profiel'){
			jQuery('#'+vk).slideToggle('slow');// slide it out
		}
		else {
			jQuery('#'+vk).toggle();// slide it out	
		}
		return false;	// stop the default behaviour
	  },'.cancel': function(e){
		/*
			we travel upwards  to find something that has an id we assume that that is the parent to be closed..
		*/
	  	var that = e.target; // get the thing that was clicked
	  	var parent = that.parentNode; // go find the parent node
		while ( parent != null && !parent.id ) { // if the parent has no id
			parent = parent.parentNode; // go up one more time.
		}
		jQuery(parent).slideToggle('slow'); // slide in
		}

	}));
	
	// zebra effect op tables should be done serverside...
	jQuery('tbody tr:even').addClass('alt');
	
	// om iets te doen wat serverside mis kan gaan.. markeren van de eerste li
	jQuery('li:first, #main .main div:first').not('.first').addClass('first');
	
	// nogmaals markeren van de laatste paging
	jQuery('.paging:last').not('.paginglast').addClass('paginglast');
	
	jQuery('.login fieldset label.overlabeltag').overLabel();
		if(jQuery('.smoelenboek td div .close').length > 0) { 
	        jQuery('.smoelenboek td div .close').click(tb_remove);
	    }
});

var paging = $(".paging");
    for (var i=0; i < paging.length; i++) {
        var sumWidth = 0;
        for (var j=0; j < paging[i].getElementsByTagName("li").length; j++) {
            sumWidth += $(paging[i].getElementsByTagName("li")[j]).width();
        }
        $(paging[i].getElementsByTagName("li")[0]).css({marginLeft: Math.floor(($(paging[i]).width() - sumWidth)/2) + "px"});
    }