var hotelNoordzee = {};

hotelNoordzee.mainConfig = {
	global: {
		minWidth: 738,maxWidth: 1024,minHeight: 438,maxHeight: 614
	},
	win: {
		width: 0,height: 0
	},
	project: {
		resizeDelay: 300,resizeReady: false, klokObj: null
	},
	objects: {
		root: {
			obj: null,left: 0,top: 0,width: 0,height: 0
		},
		head: {
			obj: null,left: 0,top: 0,width: 0,height: 0
		},
		mainNav: {
			obj: null,left: 0,top: 90,width: 0,height: 0
		},
		content: {
			obj: null,left: 0,top: 114,width: 0,height: 0
		},
		foot: {
			obj: null,left: 0,top: 0,width: 0,height: 0
		}
	},
	overlay: {
		overlays: [], no: 0, mode: 0
	},
	gallery: {
		slides: [],current: 0,no: 0,delay: 10,pauze: 3000,steps: 50,step: 0, klokObj: null
	},
	tekst: {
		richting: 0,scrollTop: 0,height: 0,scrollHeight: 0, width: 0,left: 0,top: 0,delay: 50, dist: 1, klokObj: null
	},
	topicMenu: {
		obj: null,delay: 30, klokObj: null, steps: 18, step: 0,height: 0, width: 188, animeer: 0
	}
};

hotelNoordzee.init = function() 
{	

	for (var objId in this.mainConfig.objects)
	{
		if (document.getElementById(objId))
			this.mainConfig.objects[objId]['obj'] = document.getElementById(objId);
		else
			alert(objId);
	}
	
	this.mainConfig.objects.content['obj'].style.top = this.mainConfig.objects.content['top'] + 'px';
	
	if (document.getElementById('slideGallery'))
	{
		var imgs = document.getElementById('slideGallery').getElementsByTagName('img');
		for (var i=0; i<imgs.length; i++)
		{
			imgs[i].style.zIndex = 100-i;	
			this.mainConfig.gallery['slides'].push(imgs[i]);
			this.mainConfig.gallery['no'] = this.mainConfig.gallery['slides'].length;
		}
	}
	
	if (document.getElementById('overlay'))
	{
		var overlay = document.getElementById('overlay');
		this.mainConfig.overlay['mode'] = overlay.className;
		var overlays = overlay.getElementsByTagName('div');
		for (var i=0; i<overlays.length; i++)
		{
			this.mainConfig.overlay['overlays'].push(overlays[i]);	
		}
	}
	
	this.mainNavInit();
	
	this.resize();
};

hotelNoordzee.resize = function() {		
	this.mainConfig.project['klokObj'] = null;
	
	var width = 0;
	var height = 0;
	
	if (window.innerWidth)
	{
		width = window.innerWidth;
		height = window.innerHeight;
	}
	else if (document.documentElement)
	{
		width = document.documentElement.clientWidth;
		height = document.documentElement.clientHeight;	
	}
	else
	{
		width = document.body.clientWidth;
		height = document.body.clientHeight;
	}
	
	if (this.mainConfig.win['width'] != width ||	this.mainConfig.win['height'] != height)
	{
		this.mainConfig.win['width'] = width;
		this.mainConfig.win['height'] = height;
		this.resizeUpdate();
	}
	else
	{
		var self = this;
		this.mainConfig.project['klokObj'] = window.setTimeout(function(){self.resize();},self.mainConfig.project['resizeDelay']);	
	}
	
}

hotelNoordzee.resizeUpdate = function()
{
	if (this.mainConfig.win['width'] <= this.mainConfig.global['minWidth'])
	{
		this.mainConfig.objects.root['width'] = this.mainConfig.global['minWidth'];
		this.mainConfig.objects.root['left'] = 0;
		
		this.mainConfig.objects.content['width'] = this.mainConfig.global['minWidth'];
		this.mainConfig.objects.content['height'] = this.mainConfig.global['minHeight'];
	}
	else if (this.mainConfig.win['width'] >= this.mainConfig.global['maxWidth'])
	{
		this.mainConfig.objects.root['width'] = this.mainConfig.global['maxWidth'];
		this.mainConfig.objects.root['left'] = Math.floor((this.mainConfig.win['width']-this.mainConfig.global['maxWidth'])/2);
		
		this.mainConfig.objects.content['width'] = this.mainConfig.global['maxWidth'];
		this.mainConfig.objects.content['height'] = this.mainConfig.global['maxHeight'];
	}
	else
	{
		this.mainConfig.objects.root['width'] = this.mainConfig.win['width'];
		this.mainConfig.objects.root['left'] = 0;
		
		this.mainConfig.objects.content['width'] = this.mainConfig.win['width'];
		this.mainConfig.objects.content['height'] = Math.floor(this.mainConfig.win['width'] * this.mainConfig.global['maxHeight'] / this.mainConfig.global['maxWidth']);
	}
	
	this.mainConfig.objects.root['obj'].style.left = this.mainConfig.objects.root['left'] + 'px';
	this.mainConfig.objects.root['obj'].style.width = this.mainConfig.objects.root['width'] + 'px';	
	
	this.mainConfig.objects.foot['top'] = this.mainConfig.objects.content['top'] + this.mainConfig.objects.content['height'];
	this.mainConfig.objects.foot['obj'].style.top = this.mainConfig.objects.foot['top'] + 'px';	
	
	for (var objId in this.mainConfig.objects)
	{
		this.mainConfig.objects[objId]['obj'].style.top = this.mainConfig.objects[objId]['top'] + 'px';
	}
	
	if (this.mainConfig.gallery['no'] > 0)
	{
		for (var i=0; i<this.mainConfig.gallery['no']; i++)
		{
			this.mainConfig.gallery['slides'][i].style.width = this.mainConfig.objects.content['width'] + 'px';
			this.mainConfig.gallery['slides'][i].style.height = this.mainConfig.objects.content['height'] + 'px';
		}
	}
	
	switch(parseInt(this.mainConfig.overlay['mode']))
	{
		case 1:
			var dX = Math.floor(this.mainConfig.objects.content['width']/3);
			var dXD = this.mainConfig.objects.content['width'] - 2 * dX;
			var dY = Math.floor(this.mainConfig.objects.content['height']/3);
			var dYD = this.mainConfig.objects.content['height'] - 2 * dY;
			
			this.mainConfig.overlay['overlays'][0].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][0].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][0].style.left = '0px';
			this.mainConfig.overlay['overlays'][0].style.top = dY + 'px';
			
			this.mainConfig.overlay['overlays'][1].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][1].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][1].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][1].style.top = '0px';
			
			this.mainConfig.overlay['overlays'][2].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][2].style.height = dYD + 'px';
			this.mainConfig.overlay['overlays'][2].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][2].style.top = 2*dY + 'px';
			
			this.mainConfig.overlay['overlays'][3].style.width = dXD + 'px';
			this.mainConfig.overlay['overlays'][3].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][3].style.left = 2*dX + 'px';
			this.mainConfig.overlay['overlays'][3].style.top = dY + 'px';
			break;
		case 2:
			var dX = Math.floor(this.mainConfig.objects.content['width']/3);
			var dXD = this.mainConfig.objects.content['width'] - 2 * dX;
			var dY = Math.floor(this.mainConfig.objects.content['height']/3);
			var dYD = this.mainConfig.objects.content['height'] - 2 * dY;
			
			this.mainConfig.overlay['overlays'][0].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][0].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][0].style.left = '0px';
			this.mainConfig.overlay['overlays'][0].style.top = dY + 'px';
			
			this.mainConfig.overlay['overlays'][1].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][1].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][1].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][1].style.top = '0px';
			
			this.mainConfig.overlay['overlays'][2].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][2].style.height = dYD + 'px';
			this.mainConfig.overlay['overlays'][2].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][2].style.top = 2*dY + 'px';
			
			this.mainConfig.overlay['overlays'][3].style.width = dXD + 'px';
			this.mainConfig.overlay['overlays'][3].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][3].style.left = 2*dX + 'px';
			this.mainConfig.overlay['overlays'][3].style.top = dY + 'px';
			
			this.mainConfig.overlay['overlays'][4].style.width = dXD-8 + 'px';
			this.mainConfig.overlay['overlays'][4].style.height = dYD-8 + 'px';
			this.mainConfig.overlay['overlays'][4].style.left = 2*dX + 'px';
			this.mainConfig.overlay['overlays'][4].style.top = 2*dY + 'px';
			this.mainConfig.overlay['overlays'][4].style.padding = '4px';
			break;	
		case 3:
			var dX = Math.floor(this.mainConfig.objects.content['width']/3);
			var dXD = this.mainConfig.objects.content['width'] - 2 * dX;
			var dY = Math.floor(this.mainConfig.objects.content['height']/3);
			var dYD = this.mainConfig.objects.content['height'] - 2 * dY;
			
			this.mainConfig.overlay['overlays'][0].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][0].style.height = this.mainConfig.objects.content['height'] + 'px';
			this.mainConfig.overlay['overlays'][0].style.left = '0px';
			this.mainConfig.overlay['overlays'][0].style.top = '0px';
			
			/**
			* in IE6, scrollHeight bepalen voordat je hoogte aan element toekent
			* elementhoogte toegekend: hoogte + padding
			* elementhoogte niet toegekend: elementhoogte + padding + border = 
			* 
			*/
			this.mainConfig.tekst['scrollHeight'] = this.mainConfig.overlay['overlays'][1].scrollHeight;
			/*this.mainConfig.overlay['overlays'][1].style.width = dX-20 + 'px';
			this.mainConfig.overlay['overlays'][1].style.height = 2*dY-8 + 'px';*/
			this.mainConfig.overlay['overlays'][1].style.left = '4px';
			this.mainConfig.overlay['overlays'][1].style.top = '4px';
			this.mainConfig.tekst['height'] = 2*dY-8;
			this.mainConfig.tekst['width'] = dX-26;
			this.mainConfig.tekst['left'] = 4;
			this.mainConfig.tekst['top'] = 4;
			var rect = 'rect(';
			rect += this.mainConfig.tekst['scrollTop'] + 'px,';
			rect += this.mainConfig.tekst['width'] + 'px,';
			rect += this.mainConfig.tekst['scrollTop'] + this.mainConfig.tekst['height'] + 'px,0px)';			
			this.mainConfig.overlay['overlays'][1].style.clip = rect; 
			
			this.mainConfig.overlay['overlays'][2].style.width = 12 + 'px';
			this.mainConfig.overlay['overlays'][2].style.height = '18px';
			this.mainConfig.overlay['overlays'][2].style.left = dX-16 + 'px';
			this.mainConfig.overlay['overlays'][2].style.bottom = dYD+4 + 'px';
			
			this.mainConfig.overlay['overlays'][3].style.width = '43px';
			this.mainConfig.overlay['overlays'][3].style.height = '18px';
			this.mainConfig.overlay['overlays'][3].style.left = dX-48 + 'px';
			this.mainConfig.overlay['overlays'][3].style.bottom = dYD-22 + 'px';
			
			this.mainConfig.overlay['overlays'][4].style.width = dX-8 + 'px';
			/*this.mainConfig.overlay['overlays'][4].style.height = 'px';*/
			this.mainConfig.overlay['overlays'][4].style.left = '4px';
			this.mainConfig.overlay['overlays'][4].style.bottom = '4px';
			this.topicMenuInit();
			
			this.mainConfig.overlay['overlays'][5].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][5].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][5].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][5].style.top = '0px';
			
			this.mainConfig.overlay['overlays'][6].style.width = dX + 'px';
			this.mainConfig.overlay['overlays'][6].style.height = dYD + 'px';
			this.mainConfig.overlay['overlays'][6].style.left = dX + 'px';
			this.mainConfig.overlay['overlays'][6].style.top = 2*dY + 'px';
			
			this.mainConfig.overlay['overlays'][7].style.width = dXD + 'px';
			this.mainConfig.overlay['overlays'][7].style.height = dY + 'px';
			this.mainConfig.overlay['overlays'][7].style.left = 2*dX + 'px';
			this.mainConfig.overlay['overlays'][7].style.top = dY + 'px';
			
			this.mainConfig.overlay['overlays'][8].style.width = dXD-8 + 'px';
			this.mainConfig.overlay['overlays'][8].style.height = dYD-8 + 'px';
			this.mainConfig.overlay['overlays'][8].style.left = 2*dX + 'px';
			this.mainConfig.overlay['overlays'][8].style.top = 2*dY + 'px';
			this.mainConfig.overlay['overlays'][8].style.padding = '4px';
			
			with(document.getElementById('imgGroot'))
			{
				style.width = 2*dX + 'px';
				style.height = 2*dY + 'px';
				style.left = dX + 'px';
				style.top = '0px';	
			}
			with(document.getElementById('imgKlein'))
			{
				style.width = dX + 'px';
				style.height = dY + 'px';
				style.left = dX + 'px';
				style.top = 2*dY + 'px';	
			}
			break;	
		
	}
	
	this.mainConfig.objects.root['obj'].style.visibility = 'visible';
	
	var self = this;
	this.mainConfig.project['klokObj'] = window.setTimeout(function(){self.resize();},self.mainConfig.project['resizeDelay']);
	
	if (!this.mainConfig.project['resizeReady'] && this.mainConfig.gallery['no'] > 1)
	{
		this.slideGallery();
	}
	
	this.mainConfig.project['resizeReady'] = true;
}

hotelNoordzee.slideGallery = function()
{
	var self = this;
	this.mainConfig.gallery['klokObj'] = window.setTimeout(function(){self.slideOpacity();},self.mainConfig.gallery['pauze']);
}

hotelNoordzee.slideOpacity = function()
{
	this.mainConfig.gallery['klokObj'] = null;
	this.mainConfig.gallery['step'] = parseInt(this.mainConfig.gallery['step'])+1;
	if (parseInt(this.mainConfig.gallery['step']) >= parseInt(this.mainConfig.gallery['steps']))
	{
		this.slideUpdate();
	}
	else
	{
		var opa = Math.floor(100*Math.cos((Math.PI/2)*(parseInt(this.mainConfig.gallery['step'])/parseInt(this.mainConfig.gallery['steps']))));
		var img = this.mainConfig.gallery.slides[this.mainConfig.gallery.current].style;
		img.opacity = opa/100;
		img.filter = 'alpha(opacity=' + opa + ')';
		var self = this;
		this.mainConfig.gallery['klokObj'] = window.setTimeout(function(){self.slideOpacity();},self.mainConfig.gallery['delay']);
	}
}

hotelNoordzee.slideUpdate = function()
{
	this.mainConfig.gallery['step'] = 0;
	
	var no = parseInt(this.mainConfig.gallery['no']);
	var current = parseInt(this.mainConfig.gallery['current']) + 1;
	if (current >= no)
		current = 0;
		
	for (var i=0; i<no; i++)
	{
		slide = current + i;
		if (slide >= no)
			slide -= no;
		this.mainConfig.gallery['slides'][slide].style.zIndex = 100-i;
		this.mainConfig.gallery['slides'][slide].style.opacity = 1;
		this.mainConfig.gallery['slides'][slide].style.filter = 'alpha(opacity=100)';
	}
	
	this.mainConfig.gallery.current = current;
	
	var self = this;
	this.mainConfig.gallery['klokObj'] = window.setTimeout(function(){self.slideOpacity();},self.mainConfig.gallery['pauze']);
}

hotelNoordzee.tekstScrollUp = function()
{
	this.mainConfig.tekst['klokObj'] = null;
	if (this.mainConfig.tekst['richting'] == 1)	
	{
		
		if (this.mainConfig.tekst['scrollTop'] + this.mainConfig.tekst['height'] < this.mainConfig.tekst['scrollHeight'])
		{
			this.mainConfig.tekst['scrollTop'] += 10;
			
			var rect = 'rect(';
			rect += this.mainConfig.tekst['scrollTop'] + 'px,';
			rect += this.mainConfig.tekst['width'] + 'px,';
			rect += this.mainConfig.tekst['scrollTop'] + this.mainConfig.tekst['height'] + 'px,0px)';
			
			this.mainConfig.overlay['overlays'][1].style.clip = rect; 
			this.mainConfig.overlay['overlays'][1].style.top = this.mainConfig.tekst['top'] - this.mainConfig.tekst['scrollTop'] + 'px';
			
			var self = this;
			this.mainConfig.tekst['klokObj'] = window.setTimeout(function(){self.tekstScrollUp(true);},self.mainConfig.tekst['delay']);
		}
	}
}

hotelNoordzee.tekstScrollDown = function()
{
	this.mainConfig.tekst['klokObj'] = null;
	if (this.mainConfig.tekst['richting'] == -1)	
	{
		if (this.mainConfig.tekst['scrollTop'] > 0)
		{
			this.mainConfig.tekst['scrollTop'] -= 10;
			if (this.mainConfig.tekst['scrollTop'] < 0)
				this.mainConfig.tekst['scrollTop'] = 0;
			
			var rect = 'rect(';
			rect += this.mainConfig.tekst['scrollTop'] + 'px,';
			rect += this.mainConfig.tekst['width'] + 'px,';
			rect += this.mainConfig.tekst['scrollTop'] + this.mainConfig.tekst['height'] + 'px,0px)';
			
			this.mainConfig.overlay['overlays'][1].style.clip = rect; 
			this.mainConfig.overlay['overlays'][1].style.top = this.mainConfig.tekst['top'] - this.mainConfig.tekst['scrollTop'] + 'px';
			
			var self = this;
			this.mainConfig.tekst['klokObj'] = window.setTimeout(function(){self.tekstScrollDown();},self.mainConfig.tekst['delay']);
		}
	}
}

hotelNoordzee.tekstScrollInit = function(richting)
{
	this.mainConfig.tekst['klokObj'] = null;
	this.mainConfig.tekst['richting'] = richting;
}




hotelNoordzee.topicMenuInit = function()
{
	this.mainConfig.topicMenu['obj'] = document.getElementById('topicMenu');
	this.mainConfig.topicMenu['height'] = this.mainConfig.topicMenu['obj'].scrollHeight;
	this.mainConfig.topicMenu['obj'].style.clip = 'rect(0px,0px,0px,0px)';
	this.mainConfig.topicMenu['obj'].onmouseover = function()
	{
		hotelNoordzee.topicMenuControl(1);	
	}
	var as = this.mainConfig.topicMenu['obj'].getElementsByTagName('a');
	for (var i = 0; i<as.length; i++)
	{
		as[i].onmouseout = function()
		{
			hotelNoordzee.topicMenuControl(-1);	
		}
	}
}
hotelNoordzee.topicMenuControl = function(richting)
{
	this.mainConfig.topicMenu['richting'] = richting;
	this.topicMenuAnimeer();
}

hotelNoordzee.topicMenuAnimeer = function()
{
	this.mainConfig.topicMenu['klokObj'] = null;
	this.mainConfig.topicMenu['step'] += this.mainConfig.topicMenu['richting'];
	
	if (this.mainConfig.topicMenu['richting'] == -1)
	{
		if (this.mainConfig.topicMenu['step'] < 0)
		{
			this.mainConfig.topicMenu['richting'] = 0;
			this.mainConfig.topicMenu['step'] = 0;
		}
	}
	else if (this.mainConfig.topicMenu['richting'] == 1)
	{
		if (this.mainConfig.topicMenu['step'] > this.mainConfig.topicMenu['steps'])
		{
			this.mainConfig.topicMenu['richting'] = 0;
			this.mainConfig.topicMenu['step'] = this.mainConfig.topicMenu['steps'];
		}
	}
	else
		return;
		
	var height = Math.ceil(this.mainConfig.topicMenu['height']*Math.sin(this.mainConfig.topicMenu['step']*Math.PI/ (2*this.mainConfig.topicMenu['steps'])));
	this.mainConfig.topicMenu['obj'].style.clip = 'rect(0px,' + this.mainConfig.topicMenu.width + 'px,' + height + 'px,0px)';
	this.mainConfig.topicMenu['obj'].style.height = height + 'px';
	
	var self = this;
	if (this.mainConfig.topicMenu['richting'] != 0)
		this.mainConfig.topicMenu['klokObj'] = window.setTimeout(function(){self.topicMenuAnimeer();},this.mainConfig.topicMenu['delay']);
}

hotelNoordzee.mainNavInit = function()
{
	var ul = this.mainConfig.objects.mainNav['obj'].getElementsByTagName('ul')[0];
	var ullis = ul.getElementsByTagName('li');
	var oldClass;
	
	for (var i=0; i<ullis.length; i++)
	{
		if (ullis[i].getElementsByTagName('ul').length > 0)
		{
			var ulli = ullis[i];
			var a = ulli.getElementsByTagName('a')[0];
			
			ulli.onmouseover = function()
			{
				if (this.getElementsByTagName('a')[0].className == 'MenuBarItemSubMenu' || this.getElementsByTagName('a')[0].className == 'MenuBarItemSubMenuDown')
				{
					oldClass = this.getElementsByTagName('a')[0].className;	
				}
				
				this.getElementsByTagName('a')[0].className = 'actief';
				this.getElementsByTagName('ul')[0].style.display = 'block';
			}
			ulli.onmouseout = function()
			{
				this.getElementsByTagName('a')[0].className = oldClass;
				this.getElementsByTagName('ul')[0].style.display = 'none';
			}
			
			ulli.getElementsByTagName('a')[0].onmouseover = function()
			{
				this.parentNode['onmouseover']();
			}
		}
	}
}

window.onload = function()
{
	hotelNoordzee.init();
}