var scrollTimer;
var currentScrollItem = 0;
var scrollDelay = 5000;

window.addEvent('domready', function() {
	if ($(document.body).getElements('.scroller_picture').length > 0) {
		DD_roundies.addRule('.scroller_control_1', '10px');
		DD_roundies.addRule('.scroller_control_2', '10px');
		DD_roundies.addRule('.scroller_control_3', '10px');
		
		$(document.body).getElements('.scroller_picture').setStyle('display', 'none');
		$(document.body).getElements('.scroller_picture')[0].setStyle('display', 'block');
		
		var scrollTogglers = $(document.body).getElements('.scroller_control')[0].getElements('div');
		scrollTogglers.each(function(item, key) {
			item.addEvent('click', function() {
				setActiveScrollElement(key);	
				$(document.body).getElements('.scroller_control')[0].getElements('div').setStyle('background-color', '#444444');
				this.setStyle('background-color', '#FFFFFF');	
			});
		});
		
		scrollTimer = nextScrollElement.delay(scrollDelay);
	}
});

function setActiveScrollElement(el) {
	var images = $(document.body).getElements('.scroller_picture');
	images.each(function(item, key) {
		if (key == el) {
			item.setStyles({
				display: 'block',
				opacity: 0
			});
			item.fade('in');	
		} else {
			item.fade('out');	
		}
	});
}

function nextScrollElement() {
	currentScrollItem += 1;
	
	if (currentScrollItem >= 3) {
		currentScrollItem = 0;	
	}
	
	var scrollTogglers = $(document.body).getElements('.scroller_control')[0].getElements('div');
	
	$(document.body).getElements('.scroller_control')[0].getElements('div').setStyle('background-color', '#444444');
	scrollTogglers[currentScrollItem].setStyle('background-color', '#FFFFFF');
	
	setActiveScrollElement(currentScrollItem);
	scrollTimer = nextScrollElement.delay(scrollDelay);
}

function checkRadio(naam,div){
	var fieldName = naam;
	var div = div;
	if ($(fieldName).checked) { 
			$(div).setStyle('display', 'block');
		} else {
			$(div).setStyle('display', 'none');	
    }
}

function checkKrediet(naam){
	var fieldName = naam;
	
	if ($(fieldName).value > 125000) { 
            alert('Krediet bedag mag maximaal 125000 euro zijn');	
			$(fieldName).value = 125000;
    }
}

function checkUpload(naam,div){
	var fieldName = naam;
	var div = div;
	if ($(fieldName).value != "") { 
			$(div).setStyle('display', 'block');
		} else {
			$(div).setStyle('display', 'none');	
    }
}

function checkForInt(evt) {
	var charCode = ( evt.which ) ? evt.which : evt.keyCode;
	return ( charCode >= 48 && charCode <= 57 || charCode == 8 || charCode == 9 );
}

function check21() {
	var answer = confirm  ("Reserveer nu online bij Camping De Kleine Belties \n\nWelkom bij het online boeken van Vakantiepark  De Kleine Belties. Al onze accommodaties zijn nu online te reserveren. Enkele arrangementen zijn nog niet op deze manier te boeken. Dus mocht u iets missen bij het online boeken dan kunt u altijd telefonisch reserveren. \n\nHet online boeken is niet bestemd voor alleen reizende jongeren. Hierover kunt u telefonisch informeren. Mocht er wel een reservering worden gedaan voor alleen reizende jongeren ( beneden de 25 jaar ) dan behouden wij het recht om bij aankomst de toegang te weigeren. \n\nUw reservering wordt definitief na ontvangst van de schriftelijke bevestiging. Deze zal binnen een week na boeking bij u in de bus vallen. Dit om eventuele miscommunicatie te voorkomen.\n\n\n\nIk ga akkoord met bovengenoemde, en doe geen boeking voor bovengenoemde personen.")
	if (answer)
		return true;
	else
		return false;

}





/*
 * DatePicker
 * @author Rick Hopkins
 * @modified by Micah Nolte and Martin Vasina
 * @modified again by Arian Stolwijk (version 0.4)
 * @version 0.4
 * @classDescription A date picker object. Created with the help of MooTools v1.2.1
 * MIT-style License.

-- start it up by doing this in your domready:

$$('input.DatePicker').each( function(el){
	new DatePicker(el);
});

 */

var DatePicker = new Class({

	Implements: [Options],
	
	options: {
		dayChars: 2,
		dayNames: ['Zondag', 'Maandag', 'Dinsdag', 'Woensdag', 'Donderdag', 'Vrijdag', 'Zaterdag'],
		daysInMonth: [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31],
		format: 'dd-mm-yyyy',
		monthNames: ['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'],
		startDay: 7,
		yearOrder: 'asc',
		yearRange: 3,
		yearStart: (new Date().getFullYear())
	},

	/* set and create the date picker text box */
	initialize: function(dp,options){
		this.setOptions(options);

		// Finds the entered date, or uses the current date
		if(dp.get('value') != '') {
			this.then = new Date(dp.value);
			this.today = new Date();
		} else {
			this.then = this.today = new Date();
		}
		// Set beginning time and today, remember the original
		this.oldYear = this.year = this.then.getFullYear();
		this.oldMonth = this.month = this.then.getMonth();
		this.oldDay = this.then.getDate();
		this.nowYear = this.today.getFullYear();
		this.nowMonth = this.today.getMonth();
		this.nowDay = this.today.getDate();

		this.options.monthNames = (this.options.monthNames && this.options.monthNames.length == 12 ? this.options.monthNames : this.options.monthNames) || this.options.monthNames; 
		this.options.daysInMonth = (this.options.daysInMonth && this.options.daysInMonth.length == 12 ? this.options.daysInMonth : this.options.daysInMonth) || this.options.daysInMonth; 
		this.options.dayNames = (this.options.dayNames && this.options.dayNames.length == 7 ? this.options.dayNames : this.options.dayNames) || this.options.dayNames;

		this.dp = dp;
		this.dp.set('id',dp.get('name'));

		this.container = this.calendar = this.active = false;
		this.dp.addEvents({
			'click': function(){this.create()}.bind(this),
			'focus': function(){this.create()}.bind(this)
		});
	},

	/* create the calendar */
	create: function(fade){
		if (this.calendar) return false;

		fade = ($type(fade) == 'boolean') ? fade : true;
		// IE does not want to fade :S
		if(Browser.Engine.trident && Browser.Engine.version <= 5){
			fade = false;
		}

		// Hide select boxes while calendar is up
		if(Browser.Engine.trident && Browser.Engine.version <= 4){
			$$('select').addClass('dp_hide');
		}
		
		/* create the outer container */
		this.container = new Element('div', {'class':'dp_container'}).injectBefore(this.dp);

		if (fade) {
			this.container.fade('hide');
		}
				
		/* create the calendar */
		this.calendar = new Element('div', {'class':'dp_cal'}).injectInside(this.container);
		
		/* create the date object */
		var date = new Date();
		
		/* create the date object */
		if (this.month && this.year) {
			date.setFullYear(this.year, this.month, 1);
		} else {
			this.month = date.getMonth();
			this.year = date.getFullYear();
			date.setDate(1);
		}
		this.year % 4 == 0 ? this.options.daysInMonth[1] = 29 : this.options.daysInMonth[1] = 28;
		
		/* set the day to first of the month */
		var firstDay = (1-(7+date.getDay()-this.options.startDay)%7);
		
		/* create the month select box */
		monthSel = new Element('select', {'id':this.dp.get('id') + '_monthSelect'});
		this.options.monthNames.each(function(item,index){
			monthSel.options[index] = new Element('option', {value: index});
			monthSel.options[index].set('text',item);
			if (this.month == index) monthSel.options[index].set('selected','selected');
		}.bind(this));
		
		/* create the year select box */
		yearSel = new Element('select', {'id':this.dp.get('id') + '_yearSelect'});
		var years = new Array();
		if (this.options.yearOrder == 'desc'){
			for (var y = this.options.yearStart; y > (this.options.yearStart - this.options.yearRange - 1); y--){
				years.include(y);
			}
		} else {
			for (var y = this.options.yearStart; y < (this.options.yearStart + this.options.yearRange + 1); y++){
				years.include(y);
			}
		}

		years.each(function(y,i){
			yearSel.options[i] = new Element('option',{value: y});
			yearSel.options[i].set('text',y);
			if (this.year == y) yearSel.options[i].set('selected','selected');			
		}.bind(this));
		
		/* start creating calendar */
		calTable = new Element('table');
		calTableThead = new Element('thead');
		calSelRow = new Element('tr');
		calSelCell = new Element('th', {'colspan':'7'});
		monthSel.injectInside(calSelCell);
		yearSel.injectInside(calSelCell);
		calSelCell.injectInside(calSelRow);
		calSelRow.injectInside(calTableThead);
		calTableTbody = new Element('tbody');
		
		/* create day names */
		calDayNameRow = new Element('tr');
		for (var i = 0; i < this.options.dayNames.length; i++) {
			calDayNameCell = new Element('th');
			calDayNameCell.appendText(this.options.dayNames[(this.options.startDay+i)%7].substr(0, this.options.dayChars)); 
			calDayNameCell.injectInside(calDayNameRow);
		}
		calDayNameRow.injectInside(calTableTbody);
		
		/* create the day cells */
		while (firstDay <= this.options.daysInMonth[this.month]){
			calDayRow = new Element('tr');
			for (i = 0; i < 7; i++){
				if ((firstDay <= this.options.daysInMonth[this.month]) && (firstDay > 0)){
					calDayCell = new Element('td', {'class':this.dp.get('id') + '_calDay', 'axis':this.year + '|' + (parseInt(this.month) + 1) + '|' + firstDay}).appendText(firstDay).injectInside(calDayRow);
				} else {
					calDayCell = new Element('td', {'class':'dp_empty'}).appendText(' ').injectInside(calDayRow);
				}
				// Show the previous day
				if ( (firstDay == this.oldDay) && (this.month == this.oldMonth ) && (this.year == this.oldYear) ) {
					calDayCell.addClass('dp_selected');
				}
				// Show today
				if ( (firstDay == this.nowDay) && (this.month == this.nowMonth ) && (this.year == this.nowYear) ) {
					calDayCell.addClass('dp_today');
				}
				firstDay++;
			}
			calDayRow.injectInside(calTableTbody);
		}
		
		/* table into the calendar div */
		calTableThead.injectInside(calTable);
		calTableTbody.injectInside(calTable);
		calTable.injectInside(this.calendar);

		if (fade) {
			this.container.fade('in');
		}
		
		/* set the onmouseover events for all calendar days */
		$$('td.' + this.dp.get('id') + '_calDay').each(function(el){
			el.addEvents({
				'mouseover': function(){
					el.addClass('dp_roll');
				},
				'mouseout': function(){
					el.removeClass('dp_roll');
				},
				'click': function(){
					ds = el.axis.split('|');
					this.dp.value = this.formatValue(ds[0], ds[1], ds[2]);
					this.remove();				
				}.bind(this)			
			});
		}.bind(this));
		
		/* set the onchange event for the month & year select boxes */
		[monthSel,yearSel].each(function(elmt){
			elmt.addEvents({
				'focus': function(){ 
					this.active = true; 
				}.bind(this),
				'change': function(){
					this.month = monthSel.value;
					this.year = yearSel.value;
					this.remove(false);
					this.create(false);
					this.active = false;
					this.dp.focus();
				}.bind(this)
			});
		}.bind(this));

		this.dp.addEvent('blur',function(){
			(function(){
				if (!this.active) {
					this.remove();
				}				
			}.bind(this)).delay(500);
		}.bind(this))
	},
	
	/* Format the returning date value according to the selected formation */
	formatValue: function(year, month, day){
		/* setup the date string variable */
		var dateStr = '';
		
		/* check the length of day */
		if (day < 10) day = '0' + day;
		if (month < 10) month = '0' + month;
		
		/* check the format & replace parts // thanks O'Rey */
		dateStr = this.options.format.replace( /dd/i, day ).replace( /mm/i, month ).replace( /yyyy/i, year );
		this.month = this.oldMonth = '' + (month - 1) + '';
		this.year = this.oldYear = year;
		this.oldDay = day;
		
		/* return the date string value */
		return dateStr;
	},
	
	/* Remove the calendar from the page */
	remove: function(fade){
		fade = ($type(fade) == 'boolean') ? fade : true;
		if(Browser.Engine.trident && Browser.Engine.version <= 5){
			fade = false;
		}
		if ($type(this.container) == 'element') {
			if (fade != false) {
				this.container.fade('out');
			}else{
				this.container.dispose();
			}
		}
		this.active = this.container = this.calendar = false;
		$$('select.dp_hide').removeClass('dp_hide');
	}
});

Element.implement({
	DatePicker: function (options){
		new DatePicker(this,options);
		return this;
	}
});

var bootzBox = new Class({
	options: {
		id: 'bootzbox',
		type: 'content',
		galleryType: 'fade',
		content: '',
		currentImage: 0,
		hazeOpacity: '0.75'
	},
	initialize: function(options) {
		// Set the local options through mootools options class
		this.setOptions(options);
		this.timer = null;
		
		// Create the elements
		this.haze = new Element('div', {'class': this.options.id+'-haze', 'styles': {'display': 'none', 'opacity': this.options.hazeOpacity}});
		this.container = new Element('div', {'class': this.options.id+'-container',
											 'styles': { 'display': 'none' }
		});
		this.content = new Element('div', {'class': this.options.id+'-content'});
		
		// Set the divs content
		switch($type(this.options.content)) {
			case 'element':
				var theClone = $(this.options.content).clone(true);
				this.content.adopt(theClone);
				theClone.setStyle('display', 'block');
				break;
			default:
				this.content.set('html', this.options.content);
				break;
		}
		
		this.container.adopt(this.content);	
		
		var parent = this;
		
		// Check if it's a picture gallery...
		if (this.options.type == 'gallery') {
			this.previous = new Element('div', {'class': this.options.id+'-previous', 'styles': {'display': 'none'}});
			this.next = new Element('div', {'class': this.options.id+'-next'});
			
			// Hide all images
			this.content.getElements('img').setStyles({'display': 'none',
													   'position': 'absolute',
													   'top': '0px',
													   'left': '0px'});
			
		    var imageArray = this.content.getElements('img');
			this.container.adopt(this.previous);
			
			if (imageArray.length > 1) {
				this.container.adopt(this.next);
			}
			
			this.next.addEvent('click', function() {
				parent.nextImage();
			});
			this.previous.addEvent('click', function() {
				parent.previousImage();
			});
		}
		
		// Add click/close event to the haze div
		this.haze.addEvent('click', function() {
			parent.hide();
		});
		
		// Adopt the divs into the body		
		$(document.body).adopt(this.haze);
		$(document.body).adopt(this.container);
		
		// Calculate the div into the center of the page
		var containerWidth = this.container.getDimensions().width;
		var containerHeight = this.container.getDimensions().height;
		var newLeft = Math.round(((getWidth() / 2) - (containerWidth / 2)) + $(document.body).getScroll().x);
		var newTop = Math.round(((getHeight() / 2) - (containerHeight / 2)) + $(document.body).getScroll().y);
		this.options.oldLeft = newLeft;
		this.options.oldTop = newTop;
		this.container.setStyles({'left': newLeft,
								  'top': newTop});
		
		// Keep it centered ;)	  
		this.timer = this.watchResize.periodical(200, this);
	},
	watchResize: function() {
		var containerWidth = this.container.getDimensions().width;
		var containerHeight = this.container.getDimensions().height;
		var newLeft = Math.round(((getWidth() / 2) - (containerWidth / 2)) + $(document.body).getScroll().x);
		var newTop = Math.round(((getHeight() / 2) - (containerHeight / 2)) + $(document.body).getScroll().y);
		
		if (this.options.oldLeft != newLeft || this.options.oldTop != newTop) {
			this.options.oldLeft = newLeft;
			this.options.oldTop = newTop;
			this.container.setStyles({'left': newLeft,
								  	  'top': newTop});
			this.haze.setStyles({'width': getScrollWidth(),
								 'height': getScrollHeight()});
		}
	},
	show: function() {
		this.haze.setStyles({'width': getScrollWidth(),
								 'height': getScrollHeight()});
		this.haze.setStyle('display', 'block');
		this.container.setStyle('display', 'block');	
		if (this.options.type == 'gallery') {
			this.next.setStyle('display', 'block');
			this.previous.setStyle('display', 'none');
			this.content.getElements('img').setStyle('display', 'none');
			this.options.currentImage = 0;
			this.content.getElements('img')[0].setStyle('display', 'block');	
			this.content.getElements('img')[0].setStyle('opacity', 1);	
		}
	},
	hide: function() {
		this.haze.setStyle('display', 'none');
		this.container.setStyle('display', 'none');	
		this.content.destroy();
		this.container.destroy();
		$clear(this.timer);
	},
	nextImage: function() {
		var imageArray = this.content.getElements('img');
		var currentImage = this.options.currentImage;
		this.previous.setStyle('display', 'block');
		
		if ((this.options.currentImage+1) >= (imageArray.length-1)) {
			this.next.setStyle('display', 'none');
		} 
		
		this.options.currentImage += 1;

		if (this.options.galleryType == 'fade') {
			this.fade(imageArray[currentImage], 'out');
			this.fade(imageArray[this.options.currentImage], 'in');
		} else {
			imageArray[currentImage].setStyle('display', 'none');
			imageArray[this.options.currentImage].setStyle('display', 'block');	
		}
	},
	previousImage: function() {
		var imageArray = this.content.getElements('img');
		this.next.setStyle('display', 'block');
		var currentImage = this.options.currentImage;
		
		if (this.options.currentImage == 1) {
			this.previous.setStyle('display', 'none');	
		}
				
		if (this.options.galleryType == 'fade') {
			this.fade(imageArray[currentImage], 'out');
			this.options.currentImage -= 1;
			this.fade(imageArray[this.options.currentImage], 'in');
		} else {
			imageArray[currentImage].setStyle('display', 'none');
			this.options.currentImage -= 1;
			imageArray[this.options.currentImage].setStyle('display', 'block');
		}	
	},
	fade: function(el, type) {
		var morpher;
		if (!el.retrieve('morpher')) {
			el.store('morpher', new Fx.Morph(el, {link: 'cancel',
											      onComplete: function(img) { 
											      	if (img.getStyle('opacity') == 0) {
											      		 img.setStyle('display', 'none'); 
											      	} 
											      }
												 }
											)
					);
		}
		
		morpher = el.retrieve('morpher');
		
		if (type == 'out') {
			morpher.start({'opacity': [1,0]});
		} else {
			el.setStyle('opacity', 0);
			el.setStyle('display', 'block');
			morpher.start({'opacity': [0,1]});	
		}	
	}
});
bootzBox.implement(new Events);
bootzBox.implement(new Options);



function showYoutubeBol(videoId) {
		youtubeBol = new bootzBox({'id': 'videoBol','content': '<div style="padding-top: 30px;"><object data="http://www.youtube.com/v/'+videoId+'&hl=en_US&fs=1&showinfo=0" height="338" type="application/x-shockwave-flash" width="450"><param name="movie" value="http://www.youtube.com/v/mAOJA6trWqc&hl=en_US&fs=1&showinfo=0" /></object></div>'});
 		var videoContainer = $(document.body).getElements('.videoBol-container')[0];
		var closeButton = new Element('div', {'class': 'gallery_close'});
		closeButton.addEvent('click', function() {
			youtubeBol.hide();
		});					
		videoContainer.adopt(closeButton);
	   
		youtubeBol.show();
}