var Spa = {}, BrowserSupp = {}, videoOverlay;

window.addEvent('domready', function()
{
	// Tabs
	$$('.tabcontainer').each(function(container, i)
	{
		new Spa.Tabs(
		{
			container: container,
			buttons: container.getElements('ul.tabs li a'),
			tabs: container.getElements('div.tab')
		});
	});
	
	// Tooltip
	$$('.tip').each(function(element, i){
		element.getParent('li').addEvents(
		{
			mouseenter: function()
			{
				if (document.isIE()){ element.getNext('.tooltip').show(); }
				else { element.getNext('.tooltip').setStyles({ 'display': 'block', 'opacity': 0 }).fade(1); }
			},
			mouseleave: function()
			{
				element.getNext('.tooltip').hide();
			}
		});
	});
	
	// Accordion
	$$('.accordion-wrapper').each(function(container, i){
		var accordion = new Fx.Accordion(container.getElements('dt'), container.getElements('dd'),
		{
			opacity: 0,
			alwaysHide: true,
			onActive: function(toggler) { toggler.addClass('active'); },
			onBackground: function(toggler) { toggler.removeClass('active'); }
		});
	});
	
	// Video Overlay
	videoOverlay = new Spa.VideoOverlay({ buttons: $$('.videoOverlay') });
	
	if (document.id('contact')){
		var contactForm = document.id('contact');
		if (contactForm){
			$$('.activateField').each(function(input, i){
				input.addEvent('change', function()
				{
					if (input.get('checked') == true && input.get('value') == 1)
					{
						document.id('productioncode-wrapper').show();
					}
					else
					{
						document.id('productioncode-wrapper').hide();
					}
				});				
				if (input.get('checked')){ input.fireEvent('change'); };
			});			
			
			var contactResponse = document.id('contactResponse');
			contactForm.set('send',{
				onComplete: function(response){
					response = JSON.decode(response);
					(function()
					{
						if (response.errors.length > 0)
						{
							contactResponse.set('html', 'Niet alle velden zijn juist ingevuld').addClass('error');
							contactForm.getElements('input, textarea').removeClass('errorField');
							response.errors.each(function(error)
							{
								if (document.id(error))
								{
									document.id(error).addClass('errorField');
								}
							});
						}
						else
						{
							contactResponse.set('html', 'Bedankt voor uw interesse, wij zullen zo spoedig mogelijk reageren');
							contactForm.getElement('fieldset').setStyle('display', 'none');
						}
					}).delay(400);
				}
			});
			contactForm.addEvent('submit', function(e)
			{
				e.stop();
				contactResponse.set('html', 'Uw gegevens worden gecontroleerd');
				contactForm.send();
			});
		}
	}
	
	new BrowserSupp.Select;
	
	var overlayOntour = $('overview-ontour');
	if (overlayOntour){
		new Spa.onTour({
			overlay: overlayOntour,
			form: $('onTour-form'),
			table: overlayOntour.getElement('.overview table')
		});
	}
});


function showVideo(videoId){
	if (!videoOverlay){
		videoOverlay = new Spa.VideoOverlay;
	}
	videoOverlay.setVideoId(videoId);
	videoOverlay.show();
}


Spa.VideoOverlay = new Class({
	options: {
		buttons: null,
		mask: null,
		overlay: null,
		overlayContent: null,
		closeButton: null,
		videoId: new Array(),
		videoHeight: 325,
		videoWidth: 540,
		videoOptions: '&ap=%2526fmt%3D22&showsearch=0&rel=0',
		active: null
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);
		
		this.createElements();		
		this.activate();
	},
	
	activate: function()
	{
		this.options.buttons.each(function(element, i)
		{
			element.addEvent('click', function(e)
			{
				e.stop();
				this.setVideoId(element.get('href'));
				this.show();
			}.bind(this));
		}.bind(this));
	},
	
	createElements: function()
	{
		// Mask
		this.options.mask = new Mask().addEvents(
		{
			click: function()
			{
				this.hide();
			}.bind(this)
		});
		
		// Overlay & Content
		this.options.overlay = new Element('div', { 'id': 'overlay' }).inject($(document.body), 'bottom');		
		this.options.overlayContent = new Element('div', { 'id': 'overlayContent' }).inject(this.options.overlay);
		
		// Close Button
		this.options.closeButton = new Element('a',
		{
			'id': 'closeButton',
			'text': 'Sluit venster',
			'href': '#',
			'events': {
				click: function(e)
				{
					e.stop();
					this.hide();
				}.bind(this)
			}
		}).inject(this.options.overlay);
	},
	
	setVideoId: function(videoId)
	{
		if (videoId == this.options.active){ return false; }
		this.options.active = videoId;
		
		var videos = videoId.split(',');
		this.options.videoId.empty();
		
		for (var i=0; i < videos.length; i++)
		{
			this.options.videoId.push(videos[i]);
		}
		this.createEmbed();
	},
	
	createEmbed: function()
	{
		html = '';
		if (this.options.videoId.length > 1)
		{
			for (var i=0; i < this.options.videoId.length; i++)
			{
				if (i%2) { html += '<div class="right">'; }
				else { html += '<div class="left">'; }
				html += '<object width="' + this.options.videoWidth + '" height="' + this.options.videoHeight + '"><param name="movie" value="http://www.youtube.com/v/' + this.options.videoId[i] + this.options.videoOptions + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + this.options.videoId[i] + this.options.videoOptions + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + this.options.videoWidth + '" height="' + this.options.videoHeight + '"></embed></object></div>';
			}
		}
		else
		{
			html += '<object width="' + this.options.videoWidth + '" height="' + this.options.videoHeight + '"><param name="movie" value="http://www.youtube.com/v/' + this.options.videoId[0] + this.options.videoOptions + '"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/' + this.options.videoId[0] + this.options.videoOptions + '" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="' + this.options.videoWidth + '" height="' + this.options.videoHeight + '"></embed></object>';
		}
		this.options.overlayContent.set('html', html + '<div class="clear"></div>');
	},
	
	show: function()
	{
		this.setOverlayWidth();
		
		this.options.mask.show();
		this.options.overlay.show();
		
		this.options.overlay.setStyle('height', this.options.overlayContent.getSize().y.toInt());
		
		if (document.isIE6())
		{
			this.options.overlay.setStyles(
			{
				'left': ($(document.body).getSize().x / 2) - (overlaySize.x.toInt() / 2) + 'px',
				'top': ($(document.body).getSize().y / 2) - (overlaySize.y.toInt() / 2) + 'px',
				'display': 'block',
				'position': 'absolute'
			});
		}
		else
		{
			var overlaySize = this.options.overlay.getSize();
			this.options.overlay.setStyles(
			{
				'margin': '-' + overlaySize.y.toInt() / 2 + 'px 0 0 -' + overlaySize.x.toInt() / 2 + 'px',
				'left': '50%',
				'top': '50%',
				'position': 'fixed'
			});
		}
	},
	
	hide: function()
	{
		this.options.mask.hide();
		this.options.overlay.hide();
	},
	
	setOverlayWidth: function()
	{
		if (this.options.videoId.length >= 2 && $(document.body).getSize().x.toInt() > 1050)
		{
			this.options.overlay.setStyle('width', 1100);
		}
		else
		{
			this.options.overlay.setStyle('width', this.options.videoWidth);
		}
	},
	
	in_array: function(needle, haystack, argStrict)
	{
		var key = '', strict = !!argStrict;
		if (strict) {
			for (key in haystack) {
				if (haystack[key] === needle) {
					return true;
				}
			}
		} else {
			for (key in haystack) {
				if (haystack[key] == needle) {
					return true;
				}
			}
		}
		return false;
	}
});

Spa.Tabs = new Class({
	options: {
		container: null,
		buttons: null,
		tabs: null,
		active: 0
	},
	Implements: Options,
	
	initialize: function(options)
	{
		this.setOptions(options);		
		this.setButtons();
		this.setTabs();
		
		this.checkActive();
		
		$$('.opentab').each(function(link, i)
		{
			link.addEvent('click', function(e)
			{
				e.stop();
				var rel = link.get('rel');
				if (this.options.active != rel)
				{
					this.options.tabs[this.options.active].hide();
					this.options.active = rel;
				
					this.show();
					
					new Fx.Scroll(window).toElement(document.id('tabs'));
				}
			}.bind(this));
		}.bind(this));
	},
	
	checkActive: function()
	{
		var docHash = document.location.hash;
		if (docHash.length > 0)
		{
			if (this.isInteger(docHash.substr(-1, 1)) && docHash.substr(-1, 1) <= this.options.tabs.length)
			{
				this.options.active = docHash.substr(-1, 1);
				this.setTabs();
				new Fx.Scroll(window).toElement(document.id('tabs'));
			}
		}
		this.show();
	},
	
	setButtons: function()
	{
		this.options.buttons.each(function(button, i)
		{
			button.addEvent('click', function(e)
			{
				e.stop();
				if (this.options.active != i)
				{
					this.options.tabs[this.options.active].hide();
					this.options.active = i;

					this.show();
				}
			}.bind(this));
		}.bind(this));
	},
	
	setTabs: function()
	{
		this.options.tabs.each(function(el, i)
		{
			if (i != this.options.active)
			{
				el.hide();
			}
		}.bind(this));
	},
	
	show: function()
	{
		this.removeActive();
		this.options.buttons[this.options.active].getParent().addClass('active');
		
		this.options.tabs[this.options.active].setStyles(
		{
			'display': 'block',
			'opacity': 0
		}).fade(1);
	},
	
	removeActive: function()
	{
		this.options.buttons.each(function(el, i)
		{
			el.getParent().removeClass('active');
		});
	},
	
	isInteger: function(n)
	{
		return (Math.floor(n) == n);
	}
});


Spa.onTour = new Class({
	options: {
		mask: null,
		overlay: null,
		form: null,
		table: null,
		open: false
	},
	Implements: Options,
	initialize: function(options){
		this.setOptions(options);
		
		this.options.mask = new Mask(document.body, { 'class': 'white-mask' });
		
		this.addEvents();
	},
	addEvents: function(){
		var select = this.options.overlay.getElement('select');
		select.addEvent('change', function(){
			this.filter(select.get('value'));
		}.bind(this));
		
		this.options.form.addEvent('submit', function(e){
			e.stop();
			var value = this.options.form.getElement('select').get('value');
			//this.filter(value);
			if (select.getElement('option[value=' + value + ']')){
				select.getElement('option[value=' + value + ']').set('selected', true);
			}
			select.fireEvent('change');
		}.bind(this));
		
		this.options.overlay.getElements('a.close').addEvent('click', function(e){
			e.stop();
			this.close();
		}.bind(this));
		
		this.options.table.getElements('> tr').addEvents({
			mouseenter: function(){ this.addClass('hover'); },
			mouseleave: function(){ this.removeClass('hover'); }
		});
		
		this.options.mask.addEvent('click', function(){
			this.close();
		}.bind(this));
	},
	filter: function(region){
		if (!this.options.open){ this.open(); }
		
		var ie = Browser.Engine.trident;
		
		this.options.table.getElements('tr[class!=' + region + ']').setStyle('display', 'none');
		if (this.options.table.getElements('tr.' + region).length > 0){
			this.options.table.getElements('tr.' + region).setStyle('display', (ie ? 'block' : 'table-row'));
			if (region.length < 1){
				this.options.table.getElement('tr.empty').setStyle('display', (ie ? 'block' : 'table-row'));
			}
		}
		else {
			this.options.table.getElement('tr.empty').setStyle('display', (ie ? 'block' : 'table-row'));
		}
	},
	open: function(){
		this.options.open = true;
		this.options.mask.show();
		this.options.overlay.setStyle('display', 'block');
	},
	close: function(){
		this.options.open = false;
		this.options.mask.hide();
		this.options.overlay.setStyle('display', 'none');
	}
});

/**
 * BrowserSupp.Select
 *
 * @author René Drieënhuizen
 **/
BrowserSupp.Select = new Class({
	options: {
		select: null
	},
	Implements: Options,
	initialize: function(select, options){
		this.setOptions(options);
		this.setSelect(select);
		this.createCustom();
	},
	setSelect: function(select){
		this.options.select = typeof select == 'undefined' ? $$('select') : select;
	},
	createCustom: function(){
		this.options.select.each(function(select, i){
			if (!select.get('custom')){				
				var wrapper = new Element('div', { 'class': 'dropdown-wrapper' });
				var label = new Element('span', { 'class': 'label' });
				wrapper.wraps(select);
				label.inject(select, 'before');
				select.addEvents({
					mouseenter:function(){
						this.getParent().addClass('hover');
					},
					mouseleave:function(){
						this.getParent().removeClass('hover');
					},
					change:function(){
						label.set('text', select.getElement('option:selected').get('text'));
						select.blur();
					}
				});
				select.fireEvent('change').set('custom', true);
			}
		}.bind(this));
	}
});

document.isIE6 = function()
{
	if (Browser.Engine.trident && Browser.Engine.version == 4){ return true; }
	else { return false; }
} 
document.isIE = function()
{
	if (Browser.Engine.trident){ return true; }
	else { return false; }
}

Element.implement(
{
	hasEvent: function(eventType,fn)
	{
		var myEvents = this.retrieve('events');
		return myEvents && myEvents[eventType] && (fn == undefined || myEvents[eventType].keys.contains(fn));
	},
	show: function()
	{
		this.setStyle('display','block');
	},
	inline: function()
	{
		this.setStyle('display','inline');
	},
	hide: function()
	{
		this.setStyle('display','none');
	}
});