// JavaScript Document
if(!window.console) {
  window.console = new function() {
    this.log = function(str) {
		alert('Console: '+str); 
	};
    this.dir = function(str) { 
		//alert('Console: '+str); 
	};
  };
}
window.addEvent('domready', function() {
	enhanceFormFields();
	enableClickableBlocks();
	enableSimpleImageSlideShow();
	enableLightboxes();
	if (!$defined(siteRoot)) {
		siteRoot = '/';
	}
});

/*
 * showStatusMsg
 * 
 */
var msg = function(msgKey, mode) {
	var elStatusMsg = $(document.body).getElement('div#statusmsg');
	if(elStatusMsg!=null) {
		elStatusMsg.destroy();
	}
	elStatusMsg = new Element('div', {'id':'statusmsg'});
	elStatusMsg.addClass(mode);
	elStatusMsg.inject($(document.body).getElement('div.contentcontainer div.contentcontainer-inner'), 'top');
	elStatusMsg.load(siteRoot+'ajaxservices/?action=getstatusmsg&key='+msgKey);
	location.hash = 'statusmsg';
};
/*
 * showFase
 * 
 */
var showFase = function(actor, fase){
	$each($(actor).getParent('.fasebox').getElements('.fase'), function(el){
		el.removeClass('active');
	});
	$(actor).getParent('.fasebox').getElements('.fase')[fase].addClass('active');
};
/*
 * showPhoneNumber
 * 
 */
var showPhoneNumber = function(el){
	var contentid = $(el).getParent('form').getElement('input[name=contentid]').get('value');
	var elPhoneNumber = $(el).getParent('div.formrule').getElement('div.phonenumber');
	if(elPhoneNumber!=null) {
		elPhoneNumber.destroy();
	}
	elPhoneNumber = new Element('div');
	elPhoneNumber.addClass('phonenumber');
	elPhoneNumber.set('html','<p class="loading">Bezig met ophalen van het telefoonnummer...</p>');
	elPhoneNumber.inject($(el).getParent('div.formrule'), 'bottom');
	elPhoneNumber.load(siteRoot+'ajaxservices/?action=getphonenumber&id='+contentid);
	el.destroy();
};
/*
 * showEmailaddress
 * 
 */
var showEmailaddress = function(el){
	location.hash = 'emailForm';
};

/*
 * enableLightboxes
 * 
 */
var enableLightboxes = function() {
	$$(document.links).filter(function(el) {
		return el.rel && el.rel.test(/^lightbox/i);
	}).slimbox({/* Put custom options here */}, null, function(el) {
		return (this == el) || ((this.rel.length > 8) && (this.rel == el.rel));
	});
};
/*
 * enableClickableBlocks
 * 
 */
var enableSimpleImageSlideShow = function() {
	if ($(document.body).getElement('.advertisementcontainer .images .preview')!=null) {
		var slides = $(document.body).getElements('.advertisementcontainer .images .preview div');
		var links = $(document.body).getElements('.advertisementcontainer .images .thumbnails ul li a');
		$each(links, function(el) {
			el.addEvent('click', function(event){
				event.stop();
				this.blur();
				showSimpleImageSlideShowSlide(this);
			});
		});
	}
};
var showSimpleImageSlideShowSlide = function(el) {
	var slides = $(document.body).getElements('.advertisementcontainer .images .preview div');
	var thumbs = $(document.body).getElements('.advertisementcontainer .images .thumbnails ul li');
	$each(thumbs.combine(slides), function(el) {
		el.removeClass('active');
	});
	el.getParent().addClass('active');
	newslide = $(document.body).getElement('.advertisementcontainer .images .preview div'+el.get('href'));
	newslide.addClass('active');
};

/*
 * enableClickableBlocks
 * 
 */
var enableClickableBlocks = function() {
	$each($(document.body).getElements('.clickableblock'), function(el){
		el.addEvent('click', function(event){
			event.stop();
			location.href = this.getElement('a.clickableblocklink').get('href');
		});
	});
};

/*
 * EnhanceFormFields
 * 
 */
var enhanceFormFields = function() {
	$each($(document.body).getElements('form input[type=text]').combine($(document.body).getElements('form input[type=password]')).combine($(document.body).getElements('form textarea')), function(el){
		//
		// enable instructional texts for input fields.
		//
		var myovertext = new OverText(el, {
			poll: true,
			pollInterval: 400 //this is the default
		});
		//
		// clean data
		//
		el.set('value', el.get('value').stripTags().tidy());
		
		//
		// enable all input fields for limited input length
		//
		var rawdata = el.get('class');
		var classdata = new Hash();
		if(rawdata.indexOf(':')>-1){
			var label = el.getParent('div.formrule').getElement('label.overTxtLabel');
			var data = rawdata.match(/[a-z0-9]+[:][a-z0-9]+/gi);
			$each(data, function(value, index){
				var dataset = $H(JSON.decode('{'+value+'}'));
				classdata.combine(dataset);
			});
			if (classdata.get('maxlength')!=null) {
				var sizes = el.getSize();
				if(sizes.x>300){
					if (classdata.get('minlength')!=null) {
						label.set('text',label.get('text')+' (minimaal '+parseInt(classdata.get('minlength'))+' en maximaal '+parseInt(classdata.get('maxlength'))+' karakters)');
					} else {
						label.set('text',label.get('text')+' (maximaal '+parseInt(classdata.get('maxlength'))+' karakters)');
					}
				}
				el.addEvent('keydown', function(event){
					if(['up','down','left','right','backspace','delete','esc'].indexOf(event.key)<0 && this.get('value').length>=parseInt(classdata.get('maxlength'))) {
						event.stop();
						this.set('value',this.get('value').substring(0,parseInt(classdata.get('maxlength'))));
					}
				});
			}
		}
		if(el.hasClass('postcode')) {
			el.addEvent('blur', function(e){
				if(/^[0-9]{4}(\s)?[a-zA-Z]{2}$/.test($(this).get('value'))){
					$(this).set('value', $(this).get('value').replace(/^([0-9]{4})(\s)?([a-zA-Z]{2})$/, '$1 $3'));
				}
			});
		}
		if(el.hasClass('price')){
			el.addEvent('blur', function(e){
				var price = '';
				var myValue = $(this).get('value');
				if(myValue.length>0){
					if(/^([0-9]*)([\,])([0-9]{2})$/.test(myValue)){
						myValue = myValue.replace('.','');
						myValue = myValue.replace(/^([0-9]*)([\,])([0-9]{2})$/,'$1.$3');
					} else {
						myValue += '.00';
					}
					if(isNaN(myValue)) {
						price = '';
					} else {
						myValue = new Number(myValue);
						price = myValue.numberFormat(2, ',', '.');
					}
					$(this).set('value',price);
				}
			});
		}
	});
	//
	// enable all custom styled select fields
	//
	$each($(document.body).getElements('form select.styled'), function(el){
		if(el.options.length>0) {
			var selectOptions = el.options;
			var selectHandle = el.getParent('div.formrule').getElement('label.select');
			selectHandle.setStyles({
				'width':(selectHandle.getSize().x>300)?300:selectHandle.getSize().x
			});
			var selectOptionsContainer = new Element('div', {'id':'optionsfor_'+el.get('id'), 'class':'styledselectoptionscontainer'});
			var selectOptionsContainerInner = new Element('div', {'class':'styledselectoptionscontainer-inner'});
			selectOptionsContainer.setStyles({
				'top':selectHandle.getPosition().y+selectHandle.getSize().y, 
				'left':selectHandle.getPosition().x-10, 
				'width':(selectHandle.getSize().x>300)?300:selectHandle.getSize().x,
				'display':'none'
			});
			selectOptionsContainerInner.inject(selectOptionsContainer);
			var selectOptionsContainerList = new Element('ul');
			selectOptionsContainerList.inject(selectOptionsContainerInner);
			
			updateStyledSelectElementOptions(selectHandle, selectOptions, selectOptionsContainerList);
			
			selectOptionsContainer.inject($(document.body), 'bottom');
			
			el.addEvent('change', function(event){
				eval($(event).getProperty('onchange'));
			});
			el.addEvent('focus', function(event){
				$(document.body).getElement('form label[for='+$(this).get('id')+'].select').addClass('active');
				$(document.body).getElement('div#optionsfor_'+$(this).get('id')).setStyles({
					'display':'block'
				});
			});
			el.addEvent('blur', function(event){
				// a short delay is needed to prevent the select:blur event killing the a:click event
				(function(){
					$(document.body).getElement('form label[for='+$(this).get('id')+'].select').removeClass('active');
					$(document.body).getElement('div#optionsfor_'+$(this).get('id')).setStyles({
						'display':'none'
					});
				}.bind(this)).delay(200); // 200ms should do the trick, add more if needed by slower machines?
			});
			selectHandle.addEvent('mousedown', function(event){ event.stop(); });
			selectHandle.addEvent('mouseup', function(event){ event.stop(); });
			selectHandle.addEvent('click', function(event){
				if($(this).hasClass('active')) {
					event.stop(); 
				}
			});
		}
	});
};
var updateStyledSelectElementOptions = function(selectHandle, selectOptions, selectOptionsContainerList) {
	// empty the listElement
	selectOptionsContainerList.empty();
	// build the list
	for(var i=0; i<selectOptions.length; i++) {
		var optionElement = $(selectOptions[i]);
		var optionlinklistitem = new Element('li');
		var optionlink = new Element('a', {'href':'#'+i});
		optionlink.set('html',optionElement.get('text'));
		if(optionElement.get('selected')) {
			optionlink.addClass('selected');
			selectHandle.getElement('span').set('text',optionlink.get('text'));
		}
		optionlink.addEvent('click', function(event){
			event.stop();
			var optionElements = $(this).getParent('ul').getElements('li a');
			for(var y=0; y<optionElements.length; y++){
				optionElements[y].removeClass('selected');
			}
			$(this).addClass('selected');
			var parent = $(this).getParent('div.styledselectoptionscontainer');
			var value = $(this).get('href').split('#')[1];
			var selectElement = $(document.body).getElement('select#'+parent.get('id').substr(11));
			for(var x=0; x<selectElement.options.length;x++){
				selectElement.options[x].removeProperty('selected');
			}
			selectElement.options[value].set('selected','selected');
			selectElement.selectedIndex=value;
			var selectHandle = $(document.body).getElement('form label[for='+selectElement.get('id')+'].select');
			selectHandle.getElement('span').set('text',this.get('text'));
			
			// if browser is IE7, run onchange directly
			if(/MSIE/.test(navigator.appVersion)) {
				if($(selectElement).attributes.getNamedItem('onchange')!='null') {
					var onChangeText = $(selectElement).attributes.getNamedItem('onchange').value;
					onChangeText = onChangeText.replace('this','$(document.body).getElement(\'select#'+selectElement.id+'\')');
					eval(onChangeText);
				}
			} else {
				// fire the changed event of the select element
				$(selectElement).fireEvent('change', $(selectElement));
			}
		});
		optionlink.inject(optionlinklistitem);
		optionlinklistitem.inject(selectOptionsContainerList);
	};
};
/*
 * getSubcatgories - get the subcatgories fot the selected category
 * 
 */
var getSubcatgories = function(el, target){
	var maincategoryid = el.options[el.selectedIndex].value;
	var targetElement = $(document.body).getElement('select#'+target);
	targetElement.selectedIndex = -1;
	targetElement.empty();
	//targetElement.load('ajax_getsubcategories.cfm?id='+maincategoryid);
	var myHTMLRequest = new Request.HTML({
		'url':siteRoot+'ajaxservices/',
		'link':'cancel',
		'noCache':'true',
		'onRequest':function(){
			var waitElement = new Element('span', {'class':'loading'});
			waitElement.inject($(targetElement), 'after');
		},
		'onSuccess':function(responseTree, responseElements, responseHTML, responseJavaScript){
			var waitElement = $(targetElement).getParent('div.formrule').getElement('span.loading');
			if(waitElement!=null) { waitElement.destroy(); }
			targetElement.set('html',responseHTML);
			var selectOptions = targetElement.options;
			var selectHandle = targetElement.getParent('div.formrule').getElement('label.select');
			var selectOptionsContainerList = $(document.body).getElement('div#optionsfor_'+targetElement.get('id')+' div ul');
			updateStyledSelectElementOptions(selectHandle, selectOptions, selectOptionsContainerList);
		}
	});
	myHTMLRequest.get({'id':maincategoryid, 'action':'getsubcategories'});
};


/*
 * checkSearchForm - controleerd formulier op basis van css classnames.
 * 
 */
var checkSearchForm = function(form) {
	var postcodeElement = $(form).getElement('input#wfi_postcode');
	var distanceElement = $(form).getElement('select#wfi_maxdistance');
	if (postcodeElement.get('value') != '') {
		if (distanceElement.selectedIndex < 1) {
			distanceElement.selectedIndex = distanceElement.options.length-1;
			distanceElement.options[distanceElement.options.length-1].selected = 'selected';
		}
	}
	
	// always submit the form
	return true;
};
	

/*
 * Checkform - controleerd formulier op basis van css classnames.
 * 
 */
var checkForm = function(form) {
	checkFormResult = true;
	$each($(form).getElements('input[type=text]').combine($(form).getElements('input[type=password]')).combine($(form).getElements('textarea')), function(el){
		// clean data
		el.set('value', el.get('value').stripTags().tidy());
		// check data
		if(el.getParent('div.formrule').getElement('span.required')!=null || el.get('value').lenght>0) {
			var testResult = true;
			var patern = '';
			if(el.hasClass('email')) {
				pattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;
			} else if(el.hasClass('postcode')) {
				pattern = /^[0-9]{4}(\s)?[a-zA-Z]{2}$/;
			} else if(el.hasClass('url')) {
				patern = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
			} else {
				pattern = /(.)+/;
			}
			if(el.get('value')!=el.get('defaultValue') || el.get('value')!='') {
				var classdata = new Hash();
				if(el.get('class').indexOf(':')>-1){
					var label = el.getParent('div.formrule').getElement('label.overTxtLabel');
					var data = el.get('class').match(/[a-z0-9]+[:][a-z0-9]+/gi);
					$each(data, function(value, index){
						var dataset = $H(JSON.decode('{'+value+'}'));
						classdata.combine(dataset);
					});
					if (classdata.get('minlength')!=null) {
						if(el.get('value').length<parseInt(classdata.get('minlength'))) {
							testResult = false;
						}
					}
				} else {
					testResult = pattern.test(el.get('value'));
				}
			} else {
				testResult = false;
			}
			if (testResult) {
				el.getParent('div.formrule').removeClass('validate-error');
				el.getParent('div.formrule').addClass('validate-ok');
			} else {
				el.getParent('div.formrule').removeClass('validate-ok');
				el.getParent('div.formrule').addClass('validate-error');
				checkFormResult = false;
			}
		}
	});
	$each($(form).getElements('input[type=radio]').combine($(form).getElements('input[type=checkbox]')), function(el){
		if(el.getParent('div.formrule').getElement('span.required')!=null){
			var siblings = form.getElements('input[name='+el.get('name')+']');
			var testResult = false;
			for(var i=0; i<siblings.length; i++) {
				if(siblings[i].get('checked')!=false) {
					testResult = true;
				}
			}
			if (testResult) {
				el.getParent('div.formrule').removeClass('validate-error');
				el.getParent('div.formrule').addClass('validate-ok');
			} else {
				el.getParent('div.formrule').removeClass('validate-ok');
				el.getParent('div.formrule').addClass('validate-error');
				checkFormResult = false;
			}
		}
	});
	$each($(form).getElements('select.styled'), function(el){
		if(el.getParent('div.formrule').getElement('span.required')!=null){
			if (el.get('value')!='-1' && el.get('value')!='null' && el.get('value')!='') {
				el.getParent('div.formrule').removeClass('validate-error');
				el.getParent('div.formrule').addClass('validate-ok');
			} else {
				el.getParent('div.formrule').removeClass('validate-ok');
				el.getParent('div.formrule').addClass('validate-error');
				checkFormResult = false;
			}
		}
	});
	if(!checkFormResult) {
		msg('formIsIncomplete','note');
	} else if (form.getElement('div#statusmsg')!=null) {
		form.getElement('div#statusmsg').destroy();
	}
	return checkFormResult;
};

/*
 * getAddressByPostcode
 * output: <span class="state"><strong>Spijkenisse</strong> (Zuid-Holland, NL)</span>
 */
var getAddressByPostcode = function(el) {
	var inputValue = $(el).get('value');
	var elStateMsg = $(el).getParent('div.formrule').getElement('span.state');
	if(/[0-9]{4}(\s)?[a-zA-Z]{2}/.test(inputValue)){
		if(elStateMsg==null) {
			elStateMsg = new Element('span', {'class':'state'});
			elStateMsg.inject($(el).getParent('div.formrule'), 'bottom');
		}
		elStateMsg.set('html','<span class="loading">Bezig met ophalen van het adres...</span>');
		elStateMsg.load(siteRoot+'ajaxservices/?action=getaddressbypostcode&postcode='+inputValue.replace(/^([0-9]{4})(\s)?([a-zA-Z]{2})$/, '$1 $3'));
	} else {
		if(elStateMsg!=null) {
			elStateMsg.destroy();
		}
	}
};

/*
 * checkUsernameAvailability
 */
var checkUsernameAvailability = function(el) {
	var inputValue = $(el).get('value');
	var elCheckMsg = $(el).getParent('div.formrule').getElement('span.username');
	if(elCheckMsg==null) {
		elCheckMsg = new Element('span', {'class':'username'});
		elCheckMsg.inject($(el).getParent('div.formrule'), 'bottom');
	}
	elCheckMsg.set('html','<span class="loading">Bezig met controleren van de gebruikersnaam...</span>');
	elCheckMsg.load(siteRoot+'ajaxservices/?action=checkusernameavailability&username='+inputValue);
};




Number.implement({
	/*
	Property: numberFormat
		Format a number with grouped thousands.

	Arguments:
		decimals, optional - integer, number of decimal percision; default, 2
		dec_point, optional - string, decimal point notation; default, '.'
		thousands_sep, optional - string, grouped thousands notation; default, ','

	Returns:
		a formatted version of number.

	Example:
		>(36432.556).numberFormat()  // returns 36,432.56
		>(36432.556).numberFormat(2, '.', ',')  // returns 36,432.56
	*/
	numberFormat : function(decimals, dec_point, thousands_sep) {
		decimals = Math.abs(decimals) + 1 ? decimals : 2;
		dec_point = dec_point || '.';
		thousands_sep = thousands_sep || ',';
	
		var matches = /(-)?(\d+)(\.\d+)?/.exec((isNaN(this) ? 0 : this) + ''); // returns matches[1] as sign, matches[2] as numbers and matches[3] as decimals
		var remainder = matches[2].length > 3 ? matches[2].length % 3 : 0;
		return (matches[1] ? matches[1] : '') + (remainder ? matches[2].substr(0, remainder) + thousands_sep : '') + matches[2].substr(remainder).replace(/(\d{3})(?=\d)/g, "$1" + thousands_sep) + (decimals ? dec_point + (+matches[3] || 0).toFixed(decimals).substr(2) : '');
	}


});