var Menu = Class.create({
	initialize:function()
	{
		this.newPage 			= null;
		this.currentPage		= null;
		this.clickedLink 		= null;
		this.contentContainer 	= null;
		this.menuContainer		= null;
		this.window				= null;
		this.url				= '';
		this.busy 				= false;
		this.loadIntv			= 0;
		
		this.initUrlId();
	},
	initUrlId:function()
	{
		var loc 		= String(document.location.href);
		var hostname	= String(document.location.hostname);
		var protocol	= String(document.location.protocol);
		
		this.url = loc.substring(hostname.length+protocol.length+2);
		if(this.url.length>1)
		{
			this.url = '/html/'+this.url.substring(6);
		}
		else
		{
			this.url = '/';
		}
	},
	activate:function()
	{
		this.contentContainer 	= $('content');
		this.menuContainer 		= $('menuContainer');
		
		this.menuContainer.observe('click',this.onLinkClick.bind(this));

		this.links = $$('#menuContainer a');
		this.links.each(function(o){
			var href = o.readAttribute('href');
			if(href==this.url) {
				o.setStyle({color:'#000000'});
				o.addClassName('active');
			}
			o.writeAttribute('onclick','return false');
			o.writeAttribute('rel',href);
			o.writeAttribute('href','javascript:/'+href+';');
			
			if(document.location.pathname==href) this.onNewPageAppear();
		}.bind(this));
	},
	onLinkClick:function(e)
	{
		this.clickedLink=Event.findElement(e,'a');
		if(!this.clickedLink||this.busy) return;
		if(this.clickedLink.hasClassName('progress')) return;
		if(this.clickedLink.hasClassName('active')) {
			return new Effect.multiple([this.contentContainer,this.clickedLink],Effect.Shake,{duration:0.5,distance:2,afterFinish:this.afterShaken.bind(this)});
		}
		this.clickedLink.morph('color:#000000');

		//load new page
		this.busy = true;
		this.resetActiveLink();
		this.loadIntv = setTimeout(this.setProgressIcon.bind(this),200);

		new Ajax.Request(this.getPageUrl(this.clickedLink.readAttribute('rel')),{onComplete:this.onNewPageDataLoaded.bind(this)});
	},
	afterShaken:function()
	{
		this.shaking = false;
	},
	setProgressIcon:function()
	{
		this.clickedLink.addClassName('progress');
	},
	getPageUrl:function(linkUrl)
	{
		var page = 'index';
		if(linkUrl.length>1) page = linkUrl.substring(6);
		return '/includes/php/pages/'+page+'.php';
	},
	resetActiveLink:function()
	{
		var activeLink = $$('#menuContainer a.active');
		if(activeLink.length) {
			activeLink.each(function(o){o.removeClassName('active');o.morph('color:#8b8b8b')});
		}
	},
	onNewPageDataLoaded:function(req)
	{
		clearTimeout(this.loadIntv);
		this.clickedLink.removeClassName('progress');
		this.clickedLink.addClassName('active');
		
		this.newPage = Builder.node('div');
		
		this.newPage.innerHTML = req.responseText;
		Element.setOpacity(this.newPage,0);
		
		this.currentPage = $$('#content div')[0];
		
		this.currentPage.appear({from:1,to:0,duration:0.5});
		new Effect.Move(this.currentPage,{duration:0.5,x:0,y:-(this.currentPage.getHeight()),afterFinish:this.onOldPageDisappear.bind(this)});
	},
	onOldPageDisappear:function()
	{
		this.currentPage.remove();
		this.newPage.setStyle({top:'-130px'});
		this.contentContainer.appendChild(this.newPage);
		
		new Effect.Appear(this.newPage,{duration:0.5});
		new Effect.Move(this.newPage,{duration:0.5,x:0,y:130});
		new Effect.BlindDown(this.newPage,{afterFinish:this.onNewPageAppear.bind(this)});
	},
	onNewPageAppear:function()
	{
		
		if(this.newPage) this.newPage.setStyle({top:0});
		this.busy = false;
		
		$$('.thumb').map(function(e){
			e.observe('click',function(evt){
				var thumb = Event.findElement(evt,'.thumb');

				if(!thumb) return;
				if(!thumb.style.backgroundImage) return;
				
				var imagePath = thumb.style.backgroundImage.toString().substring(4);
				
				imagePath = imagePath.substring(0,imagePath.length-1);
				imagePath = imagePath.replace(/\/thumbs/,'').split('"').join('').split('\'').join('');

				this.popup = new ImageViewer(imagePath).show();

			}.bind(this));
		}.bind(this));
	},
	viewImage:function(e,dir)
	{
		var img = $(e.elements.content.select('img').first());
		var imgNum = img.src;
		imgNum = Number(imgNum.substring(imgNum.length-5).substring(0,1));
		
		var thumbs = $$('.thumb');
		var targetNum = 0;
		switch(dir)
		{
			case 'next':
				targetNum = imgNum+1;
				var nextPresent = thumbs.find(function(e){
					return e.style.backgroundImage.match(targetNum+'.jpg');
				});
				if(!nextPresent) targetNum = 1;
			break;
			case 'prev':
				targetNum = imgNum-1;
				if(targetNum<=0) targetNum = thumbs.length;
			break;
		}
		var src = img.src.replace(String(imgNum)+'.jpg',targetNum+'.jpg');
		img.writeAttribute('src',src);
		e.setCaption('Screenshot '+targetNum);
	}
});
var ImageViewer = Class.create({
	initialize:function(imagePath)
	{
		this.timeout = 0;
		this.effects = [];
		this.img = null;
		this.container = null;
		this.closeButton = null;
		this.overlay = null;
		this.imagePath = imagePath;
	},
	show:function()
	{
		if(!this.container){
			Event.observe(window,'resize',this._onResize.bind(this));
			Event.observe(window,'scroll',this._onScroll.bind(this));
			Event.observe(document,'keydown',this._onKeyDown.bind(this));
			
			this.progress = Builder.node('div',{className:'imageProgress'});
			this.progress.setOpacity(0);
			this.progress.shadow();
			document.body.appendChild(this.progress);
			
			
			this.overlay = Builder.node('div',{className:'overlay'});
			this.overlay.observe('click',this.close.bind(this));
			this.overlay.setOpacity(0);
			document.body.appendChild(this.overlay);
			
			this.closeButton = Builder.node('div',{id:'imageClose'});
			this.closeButton.observe('click',this.close.bind(this));
			
			this.img 			= Builder.node('img',{width:0,height:0,alt:''});
			this.container 		= Builder.node('div',{className:'imgContainer'});
			this.container.appendChild(this.closeButton);
			this.container.appendChild(this.img);
			document.body.appendChild(this.container);
		}
		this.progress.center();
		this.progress.appear({duration:0.3});
		this.progress.appear({duration:0.3});
		
		if(this.overlay.getOpacity()<=0) this.overlay.appear({from:0,to:0.4,duration:0.3});
		this.container.setOpacity(0);
		
		this.img.onload = this._onImageLoaded.bind(this);

		new Ajax.Request('/image.xml.php',{parameters:'&imagePath='+this.imagePath,onComplete:this._onImageDataLoaded.bind(this)});

		return this;
	},
	_onKeyDown:function(e)
	{
		if(e.keyCode==Key.ESCAPE) this.close();
	},
	_onScroll:function(e)
	{
		if(!this._fitsToScreen()) return;
		this._centerContent(e);
	},
	_onResize:function(e)
	{
		this._centerContent();
	},
	_centerContent:function(e)
	{
		this.progress.center(true);
		
		clearTimeout(this.timeout);
		this.timeout = setTimeout(function(){
			[this.progress,this.container].each(function(elem){
				if(this._handleImagePosition())
				{
					this.effects.invoke('cancel');
					this.effects = [];
					this.effects.push(elem.center(true,{duration:0.5}));
				}
			}.bind(this))
		}.bind(this),200);
	},
	_fitsToScreen:function()
	{
		var vp = document.viewport.getDimensions();
		return !(this.container.getHeight()>=vp.height||this.container.getWidth()>=vp.width);
	},
	_handleImagePosition:function()
	{
		if(!this._fitsToScreen())
		{
			this.container.setStyle({left:0,top:document.viewport.getScrollOffsets().top+'px'});
			return false;
		}
		return true;
	},
	close:function()
	{
		this.container.dropOut();
		this.progress.hide();
		this.overlay.hide();
	},
	_onImageDataLoaded:function(request)
	{
		var xml = request.responseXML;
		
		var src = '';
		var width = 0;
		var height = 0;
		
		try{
			src 	= xml.getElementsByTagName('src')[0].firstChild.nodeValue;
			width 	= xml.getElementsByTagName('width')[0].firstChild.nodeValue;
			height 	= xml.getElementsByTagName('height')[0].firstChild.nodeValue;
		}catch(e)
		{
			alert('De afbeelding kan helaas niet getoond worden');
		}
		
		this.container.setStyle({width:width+'px',height:height+'px'});
		
		this.img.width 	= width;
		this.img.height = height;
		this.img.src 	= this.imagePath;
		
		if(width&&height)
		{
			this.img.shadow();
			this._handleImagePosition();
		}
		
	},
	_onImageLoaded:function(e)
	{
		this.container.center();
		this.container.appear({from:0,to:1,duration:0.5,afterFinish:function(){this.progress.appear({to:0,duration:0.2});}.bind(this)});
	}
});
var menu = new Menu();

Event.observe(window,'load',menu.activate.bind(menu));