$().ready(function() {
	
	$('span.voorbeeld').hide();
	
	// demo 'button' submit de frmDemo
   $('#btnDemo').click(function() {
      $('#frmDemo').submit();
   })
	
	//creeer de tabs
	$('#tabs').tabs();
	
	$('#txtPsw').change(function() {
		fc = new FieldChecker($(this));
		fc.errText = ke.loginTxt.passwordErr;
		fc.checkField("val.length < 8");
	});
	
	$('#btnLogin').button({
      icons: {primary: 'ui-icon-newwin' }   
   });   // no click handler because button has type='submit' so already submits the form

	$('#frmLogin').submit(function(){
		if (va.checkFormFields.call(this, ke.fieldCheckerTxt) === false) {
			return false;	// don't execute the ajax login and do not submit the form
		}
	});   // #frmLogin.submit

		
	/*
	* grote IMG tonen/verbergen gecentreerd en met fadeIn. Click op de img sluit de img.
	* 
	* The <img> tag is already definied in the html (right after the first <div> tag):
	* <img id="vbKeGroot" src="images/regexp_cheatsheet.png" style="width: 970px; height: 800px" class="hidden" />

	*/
	$('#vbKeKlein').click(function(){
		showLargeImg();
	});
	
	var bodyBgColor = $('body').css('background-color');
	
	var hiddeLargeImg = function() {
		$('#vbKeGroot').fadeOut();
		$closeButton.hide();
		$('body').css('background-color', bodyBgColor);
		$('#demoMovie').show();
	};
	
	var topPosition = '20em';		// large img absolute top position
	var largeImgWidth = $("#vbKeGroot").width();
	
	var $closeButton = $('<img />').attr('src', 'images/close.gif' ).css({
			'position': 'absolute', 
			'top': topPosition,
			'width': '90px',
			'hight': '30px',
			'z-index': '10',
			'cursor': 'pointer',
			'opacity': 0.6
		}).appendTo('body').hide();							
	
	var showLargeImg = function() {
		$('#demoMovie').hide();			// hide the demomovie because it's always on top of the large image, no matter the z-order of the image
	
		var leftPosition = ($('body').width() - largeImgWidth) / 2;		// img width is 840px. Center the image so calculate the left position
		$('#vbKeGroot').css({
				position: 'absolute', 
				top: topPosition,
				left: leftPosition,
				'z-index': '10',
				cursor: 'pointer',
				border: '2px solid'
			})
			.fadeIn("slow")
			.one('click', hiddeLargeImg);									// add a 'one' click handler that closes the large image
		
		$('body').css('background-color', '#E5E5E5');
		
		// show the close button on the large image:
		$closeButton.one('click', hiddeLargeImg)
			.css('left', leftPosition + largeImgWidth - 90)			// position the close button in the upper right corner
			.show();		
	};
	// einde script grote IMG tonen ---------------------------------------------
	
});