// <script type="text/javascript">

/*** Abstract Dialog ***/
var AbstractDialog = Class.create({
	
	initialize: function(pane, width)
	{
		
		pane.setStyle({'display': 'none', width: width + 'px'});
		$(document.body).insert(pane);
		
		this.pane = pane;
		this.width = width;
		this.overlay = Overlay.singleton();
		this.showing = false;
		
		Event.observe(document, "keydown",
		    function(event) {
		    	if (this.showing && event.keyCode == Event.KEY_ESC)
		    		this.close();
		    }.bind(this)
		); 
	}
	
	,show: function(options)
	{
		var self = this;
		
		if (! options) options = {};
		
		this.beforeShow(options);
		
		this.overlay.show();
		
		var dim = document.viewport.getDimensions();
		var offsetTop = document.viewport.getScrollOffsets().top;
		this.pane.style.left = (dim.width - this.width) / 2 + 'px';
		this.pane.style.top = (dim.height - 300) / 3 + offsetTop + 'px';
		
		new Effect.Appear(this.pane, { duration: 0.5, afterFinish: function() {
			this.afterShow(options);
			this.showing = true;
		}.bind(this)});
	}
	
	,close: function()
	{
		this.showing = false;

		this.beforeClose();
		
		this.overlay.close();
		new Effect.Fade(this.pane, {duration: 0.2, afterFinish: this.afterClose.bind(this)});
	}
	
	/** Callbacks **/
	,beforeShow: function(options) {}
	,afterShow: function(options) {}
	,beforeClose: function(options) {}
	,afterClose: function(options) {}
});

var Overlay = Class.create({

	initialize: function() 
	{
		this.showing = 0;
		
		this.overlay = new Element("div", {'class': 'dialog-overlay'});
		this.overlay.setStyle({ display: 'none'});
		
		$(document.body).insert(this.overlay);
	}
	
	,show: function()
	{
		if (this.showing++)
			return;
	
		var dim = this.getPageSize();
        this.overlay.setStyle({ width: dim.width + 'px', height: dim.height + 'px' });
        new Effect.Appear(this.overlay, { duration: 0.5, from: 0.0, to: 0.7 });
	}
	
	,close: function()
	{
		if (this.showing-- == 1)
			new Effect.Fade(this.overlay, { duration: 0.5 });	
	}
	
	,getPageSize: function()
	{ 
		var xScroll, yScroll;
		
		if (window.innerHeight && window.scrollMaxY) {	
			xScroll = window.innerWidth + window.scrollMaxX;
			yScroll = window.innerHeight + window.scrollMaxY;
		} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
			xScroll = document.body.scrollWidth;
			yScroll = document.body.scrollHeight;
		} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
			xScroll = document.body.offsetWidth;
			yScroll = document.body.offsetHeight;
		}
		
		var windowWidth, windowHeight;
		
		if (self.innerHeight) {	// all except Explorer
			if(document.documentElement.clientWidth){
				windowWidth = document.documentElement.clientWidth; 
			} else {
				windowWidth = self.innerWidth;
			}
			windowHeight = self.innerHeight;
		} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
			windowWidth = document.documentElement.clientWidth;
			windowHeight = document.documentElement.clientHeight;
		} else if (document.body) { // other Explorers
			windowWidth = document.body.clientWidth;
			windowHeight = document.body.clientHeight;
		}	
		
		// for small pages with total height less then height of the viewport
		if(yScroll < windowHeight){
			pageHeight = windowHeight;
		} else { 
			pageHeight = yScroll;
		}
	
		// for small pages with total width less then width of the viewport
		if(xScroll < windowWidth){	
			pageWidth = xScroll;		
		} else {
			pageWidth = windowWidth;
		}

		return {width: pageWidth, height: pageHeight};
	}
});

Overlay.singleton = function()
{
	if (! this.instance)
		this.instance = new Overlay();
		
	return this.instance;
}

var PersonalBrochureDownloadDialog = Class.create(AbstractDialog, {
	
	initialize: function($super)
	{
		var self = this;
		
		var pane;
		
		with ($E)
		{
			var buttonClose = a(
				{href: ''}
				,img({src: '/media/gfx/window_close.gif', 'class': 'button-close'})
			);
			
			Event.observe(buttonClose, 'click', function(event) {
				Event.stop(event);
				self.close();
			});
			
			pane = div(
				{'class': 'window-dialog'}
				,buttonClose
				,h1({title: "Brochure downloaden"})
				,p("Your personal brochure is ready. Please click on the link below and download your brochure.")
				,p({'class': 'align-center'}, a({href: '/static/brochure/personal?lang=' + Global.LanguageCode}, big(strong('Nu downloaden'))))
			);
		}
		
		$super(pane, 400);
	}
});

var PersonalBrochureDialog = Class.create(AbstractDialog, {
	
	initialize: function($super)
	{
		var self = this;
		
		var pane;
		
		with ($E)
		{
			var buttonClose = a(
				{href: ''}
				,img({src: '/media/gfx/window_close.gif', 'class': 'button-close'})
			);
			
			Event.observe(buttonClose, 'click', function(event) {
				Event.stop(event);
				self.close();
			});

			var selectGeslacht = select(
									{ name: 'gender' }, 
									[option({value: 'm'}).update("Dhr."), option({value: 'v'}).update('Mevr.')]);
									
			var inputNaam = input({'class': 'text', type: 'text', size: 24, name: 'naam'});
			var inputTelefoon = input({'class': 'text', type: 'text', name: 'telefoon', size: 15});
			var inputEmail = input({'class': 'text', type: 'text', name: 'email', size: 35});
			var inputOpmerkingen = textarea({rows: 5, cols: 35});
			var inputNieuwsbrief = input({
										type: 'checkbox', 
										name: 'nieuwsbrief', 
										style: 'float: left; margin-right: 8px;', 
										id: 'newsletter-check',
										checked: 'checked'
									});
									
			this.inputNaam = inputNaam;
			
			pane = div(
				{'class': 'window-dialog'}
				,buttonClose
				,h1("Brochure downloaden")
				,p('Uw persoonlijke brochure staat voor u klaar. Vul hieronder uw naam, e-mailadres en telefoonnummer in en klik op Downloaden om uw brochure te downloaden.')
				,fieldset(
					{'class': 'form'}
					,form(
						{method: 'post'}
						,ul(
							li(
								label({'class': 'label'}, "Name " + ' ', span({'class': 'required'}, "*"))
								,selectGeslacht
								,' '
								,inputNaam
							),
							li(
								label({'class': 'label'}, "Phone")
								,inputTelefoon
							),
							li(
								label({'class': 'label'}, "E-mail " + ' ', span({'class': 'required'}, "*"))
								,inputEmail
							),
							li(
								label({'class': 'label'}, "Questions \/ comments")
								,inputOpmerkingen
							),
							li(
								label({'class': 'label'}, "Newsletter")
								,div(
									{ style: 'float: left; width: 300px;'}
									,inputNieuwsbrief
									,label({
										style: 'float: left; width: 260px;',
										'for': 'newsletter-check'
									}, "I would like to receive the HAT Tours newsletter. This newsletter will keep me informed about last minutes, offers and new tour developments.")
									,div({'class': 'clear'})
								)
								,div({'class': 'clear'})
							)
							
						)
						,p(
							input({type: 'submit', value: 'Downloaden'})
						)
						,input({type: 'hidden', name: 'action', value: 'requestpassword'})
					)
				)
			)
		}
		
		// fetch the form
		var form = pane.select('FORM').first();
		form.observe('submit', function(event) {
			Event.stop(event);
			
			var url = '/static/brochure/submit.dialog.php';
			new Ajax.Request(url, {
			  method: 'post',
			  parameters: {
			  	geslacht: selectGeslacht.getValue()
			  	,naam: inputNaam.value
			  	,email: inputEmail.value
			  	,telefoon: inputTelefoon.value
			  	,nieuwsbrief: inputNieuwsbrief.checked ? 'true' : 'false'
			  	,opmerkingen: inputOpmerkingen.value
			  	,lang: Global.LanguageCode
			  },
			  onSuccess: function(transport) {
			   var json = transport.responseJSON;
			   
			   if (json.response == 'error')
			   {
			   	alert("The fields 'Name' and \/ or 'Email' are incomplete. Please make sure that the fields are not empty and that you have filled in your correct e-mail address.");
			   	inputNaam.focus();
			   }
			   else
			   {
			   	var dialog = new PersonalBrochureDownloadDialog();
			   	dialog.show();
			   	
			   	self.close();
			   }
			  }
			});

		});
		
		$super(pane, 500);
	}
	
	,afterShow: function(options)
	{
		this.inputNaam.focus();
	}
});

PersonalBrochureDialog.singleton = function()
{
	if (! this.instance)
		this.instance = new PersonalBrochureDialog();
		
	return this.instance;
}

var BookDialog = Class.create(AbstractDialog, {
	initialize: function($super, tourName, language, urlOk)
	{
		var self = this;
		
		var pane;
		
		with ($E)
		{
			var buttonClose = a(
				{href: ''}
				,img({src: '/media/gfx/window_close.gif', 'class': 'button-close'})
			);
			
			Event.observe(buttonClose, 'click', function(event) {
				Event.stop(event);
				self.close();
			});

			var selectGeslacht = select(
									{ name: 'gender' }, 
									[option({value: 'm'}).update("Dhr."), option({value: 'v'}).update('Mevr.')]);
									
			var inputNaam = input({'class': 'text', type: 'text', size: 24, name: 'naam'});
			var inputTelefoon = input({'class': 'text', type: 'text', name: 'telefoon', size: 15});
			var inputEmail = input({'class': 'text', type: 'text', name: 'email', size: 35});
			var inputLocatie = input({'class': 'text', type: 'text', name: 'locatie', size: 35});
			var inputDatum = input({'class': 'text', type: 'text', name: 'datum', size: 15});
			var inputOpmerkingen = textarea({rows: 5, cols: 35});
			var inputNieuwsbrief = input({
										type: 'checkbox', 
										name: 'nieuwsbrief', 
										style: 'float: left; margin-right: 8px;', 
										id: 'newsletter-check',
										checked: 'checked'
									});
			var inputTour = input({type: 'hidden', value: tourName, name: 'tour'});
			var inputLanguage = input({type: 'hidden', value: language, name: 'language'});
					
			var inputTypeBook = input({type: 'radio', name: 'info-type', value: 'book'});
			var inputTypeInfo = input({type: 'radio', name: 'info-type', value: 'info', 'checked': 'checked'});
							
			var inputType = div(
				div(inputTypeBook, label({ 'for': inputTypeBook.identify() }, ' Boeken'))
				,div(inputTypeInfo, label({ 'for': inputTypeInfo.identify()}, ' Informatie aanvraag'))
			)
									
									
			var options = [option({value: ''}).update('')];
			
			for (var i = 1; i <= 20; i++) options.push(
				option({value: i}).update(i));
				
			options.push(option({value: '> 20'}).update('> 20'));
			
			var inputPersonen = select({name: 'personen'}, options);

			this.inputNaam = inputNaam;
			
			pane = div(
				{'class': 'window-dialog'}
				,buttonClose
				,h1("Booking \/ Information")
				,p("Please fill out the form below. Upon receipt we will contact you as soon as possible.")
				,fieldset(
					{'class': 'form'}
					,form(
						{method: 'post'}
						,ul(
							li(
								label({'class': 'label'}, "Name " + ' ', span({'class': 'required'}, "*"))
								,selectGeslacht
								,' '
								,inputNaam
							),
							li(
								label({'class': 'label'}, "Phone")
								,inputTelefoon
							),
							li(
								label({'class': 'label'}, "E-mail " + ' ', span({'class': 'required'}, "*"))
								,inputEmail
							),
							li(
								label({'class': 'label'}, "City and country" + ' ' + ' ')
								,inputLocatie
							),
							li(
								label({'class': 'label'}, "Booking or Information" + ' ')
								,inputType
							),
							
							li(
								label({'class': 'label'}, "Tour" + ' ')
								,tourName
							),
							li(
								label({'class': 'label'}, "Number of persons" + ' ')
								,inputPersonen
							),
							li(
								label({'class': 'label'}, "Deparure date" + ' ', br(), small("dd\/mm\/jjjj"))
								,inputDatum
							),
							li(
								label({'class': 'label'}, "Questions \/ comments")
								,inputOpmerkingen
							),
							li(
								label({'class': 'label'}, "Newsletter")
								,div(
									{ style: 'float: left; width: 300px;'}
									,inputNieuwsbrief
									,label({
										style: 'float: left; width: 260px;',
										'for': 'newsletter-check'
									}, "I would like to receive the HAT Tours newsletter. This newsletter will keep me informed about last minutes, offers and new tour developments.")
									,div({'class': 'clear'})
								)
								,div({'class': 'clear'})
							)
							
						)
						,p(
							input({type: 'submit', value: 'Versturen'})
						)
					)
				)
			)
		}
		
		// fetch the form
		var form = pane.select('FORM').first();
		form.observe('submit', function(event) {
			Event.stop(event);
			
			var url = '/static/book/submit.dialog.php';
			new Ajax.Request(url, {
			  method: 'post',
			  parameters: {
			  	geslacht: selectGeslacht.getValue()
			  	,naam: inputNaam.value
			  	,email: inputEmail.value
			  	,telefoon: inputTelefoon.value
			  	,locatie: inputLocatie.value
			  	,personen: inputPersonen.value
			  	,datum: inputDatum.value
			  	,nieuwsbrief: inputNieuwsbrief.checked ? 'true' : 'false'
			  	,opmerkingen: inputOpmerkingen.value
			  	,type: inputTypeInfo.checked ? 'info' : 'book'
			  	,language: language
			  	,tour: tourName
			  },
			  onSuccess: function(transport) {
			   var json = transport.responseJSON;
			   
			   if (json.response == 'error')
			   {
			   	alert("The fields 'Name' and \/ or 'Email' are incomplete. Please make sure that the fields are not empty and that you have filled in your correct e-mail address.");
			   	inputNaam.focus();
			   }
			   else
			   {
			   	document.location = urlOk;
			   }
			  }
			});

		});
		
		$super(pane, 500);
	}
	
	,afterShow: function(options)
	{
		this.inputNaam.focus();
	}
});

BookDialog.singleton = function()
{
	if (! this.instance)
		this.instance = new BookDialog();
		
	return this.instance;
}