var timer;
Event.observe(window, 'load', function() {
	// observe add category
	$$('a.meer').invoke('observe','click', function(event){
		Event.stop(event);
		$('maincontainer').scrollTo();
		var element = Event.element(event);
	
		if(!element.hasClassName("opened")){
			element.addClassName("opened");
			element.update("verberg");  
		}
		else{
			element.removeClassName("opened");
			element.update("lees verder");
		}
		new Effect.toggle('more','blind',{duration:1});
	});
	
	$$('#nav .mover').invoke('observe','click', function(event){
		Event.stop(event);
		var element 	= Event.element(event);
		
		var container 	= $('nav').down().next().down();
		var posLeft		= container.style.left;
		// to the left		
		if(element.hasClassName("left")){
			
			if(!element.hasClassName("none")){
				new Effect.Move (container,{ y: 0, x: 740 , duration:1.25, mode: 'relative', transition: Effect.Transitions.sinoidal});
			}
			if(posLeft== "-740px") $('terug').addClassName("none");
			$('verder').removeClassName("none");
			
		}
		//to the right
		else{
			if(!element.hasClassName("none")){
				new Effect.Move (container,{ y: 0, x: -740 , duration:1.25, mode: 'relative',transition: Effect.Transitions.sinoidal});
			}
			if(posLeft== "-1480px") $('verder').addClassName("none");
			$('terug').removeClassName("none");
		}
	});
	
	$$('a.swapper').invoke('observe','click', function(event){
		Event.stop(event);
	});
	
	$$("#start a").invoke('observe','mouseover',function(event){
		var element 	= Event.element(event);
		if(element.hasClassName("return")) return false;
		element.addClassName('hover');
		var intro 	= new canonIntro(element);
	});

	$$('.canonMover').invoke('observe','click',function(event){
		var element = Event.element(event);
		new canonMover(element);
		
	});
	
	$$('.canonMover').invoke('observe','mouseover',function(event){
		var element = Event.element(event);
		element.addClassName("hover");
		element.observe('mouseout',function(){
			element.removeClassName('hover');
		});
	});
	
	$$('.related a.rel').invoke('observe','click',function(event){
		Event.stop(event);
		var element = Event.element(event);
		new relatedInfo(element);
	});
	
	$$('#media img').invoke('observe','mouseover',function(event){
		var element = Event.element(event);
		var alt		= new showAltText(element);
	});

	if($('search') != null){
		$('search').observe('submit',function(event){
			Event.stop(event);
			var element = Event.element(event);
			var search 	= new canonSearch(element);
		});
	}
	$$(".subnav a").invoke("observe","mouseover",function(event){
		var element = Event.element(event);
		if(element.hasClassName("home")){
			$('subnavoog').down().addClassName("hovert");
			element.observe("mouseout",function(){
				$('subnavoog').down().removeClassName("hovert");
			});
		}
	});
	
	if($('zoekInVenster') != null) $('zoekInVenster').observe('click',function(event){
		
		var search = $('search');
		if(!search.hasClassName("opened")){
			new Effect.Move (search,{ y: 0, x: 250 , duration:0.5, mode: 'relative',transition: Effect.Transitions.sinoidal});	
			search.addClassName("opened");	
		}else{
			new Effect.Move (search,{ y: 0, x: -250 , duration:0.5, mode: 'relative',transition: Effect.Transitions.sinoidal});	
			search.removeClassName("opened");
		}	
		
	});

});

var showAltText = Class.create({
	initialize: function(element) {
		this.element	= element;
		this.altText	= this.element.alt;
		if(this.altText == "") return;
		this.showAlt();
	},
	showAlt: function(){	
		this.div = new Element('div',{'class': 'altText'}).update(this.altText).setOpacity(0.8);
		var iw	= this.element.getWidth();
		this.div.setStyle({
			width: (iw-22) + 'px'
		});
		this.element.insert({after: this.div});
		
		var pos = this.element.positionedOffset();
		var h	= this.element.getHeight();
		var dh	= this.div.getHeight();
		
		this.div.setStyle({
			position: 'absolute',
			top: (pos[1]+h-dh-6) + 'px',
			left: (pos[0]+6) + 'px'
		});
		
		this.div.show();
		this.observeMouseout();
	},
	observeMouseout: function(){
		this.element.observe('mouseout',function(){
			this.div.remove();
			this.stopObserve();	
		}.bind(this));
	},
	stopObserve: function(){
		this.element.stopObserving('mouseout');
	}
});

var canonSearch = Class.create({
	initialize: function(element) {
		this.element	= element;
		this.query		= element.down().value
		this.lightbox 	= new overlay('l');	
		this.searchDb();
	},
	searchDb: function(){
		new Ajax.Request("pages/zoek_canon.php",{
			parameters: "q="+this.query,
			onComplete:function(transport){
				this.update = transport.responseText;
				this.lightbox.updateOverlay(this.update,'l');
				
				//this.scrollToHeader();			
				$$('#overlayBox .close').invoke('observe','click',this.closeClick.bind(this));
				
				new Effect.ScrollTo('maincontainer');
				
				var h 	= $('overlayBox').getHeight();	
				var ph 	= this.lightbox.getPageSize();
				if(h < ph[1]){
					
				}else{
					document.body.setStyle({ height: (h+100) + 'px' });
					$('overlay').setStyle({ height: (h+100) + 'px' });
				}								
			}.bind(this)
		});
	},
	closeClick: function(event){
		Event.stop(event);
		this.lightbox.closeOverlay();
	}
});

var relatedInfo = Class.create({
	initialize: function(element) {
		this.element	= element;
		var pars 		= element.id.replace("rel-","").split("-");
		this.module_id  = pars[0];
		this.entry_id  	= pars[1];
		this.canan_pos	= pars[2];
		this.lightbox 	= new overlay();	
		this.getRelatedData();
	},
	scrollToHeader: function(){
		//alert("srolltp data");
		//new Effect.ScrollTo('header');
		//$('overlaybox').scrollTo();
	},
	getRelatedData: function(){
		new Ajax.Request("pages/canon_related.php",{
			parameters: "module_id="+this.module_id+"&entry_id="+this.entry_id+"&current="+this.canan_pos,
			onComplete:function(transport){
				this.update = transport.responseText;
				this.lightbox.updateOverlay(this.update,'m');
				this.scrollToHeader();			
				$$('#overlayBox .close').invoke('observe','click',this.closeClick.bind(this));
			}.bind(this)
		});
	},
	closeClick: function(event){
		Event.stop(event);
		this.lightbox.closeOverlay();
	}
});

var canonIntro = Class.create({
	initialize: function(element) {
		this.timer		= null;
		this.element	= element;
		this.canon_id 	= element.id.replace("canon-","");
		this.introWrap	= $('aankeilerContent');
		//this.getIntroText();
		this.startTimer();
	},
	startTimer: function(){
		this.timer 	= setTimeout(function(){
			this.getIntroText();
		}.bind(this),250);
		
		this.element.observe('mouseout',function(){
			this.stopTimer();
		}.bind(this));
	},
	stopTimer: function(){
		clearInterval(this.timer);
		this.introWrap.hide();
		this.timer = null;
		this.element.removeClassName('hover'+this.timer);
	},
	getIntroText: function(){
		//this.setStatus("getting new data");
		new Ajax.Request("pages/canon_aankeiler.php",{
			parameters: "canon_id="+this.canon_id,
			onComplete:function(transport){
				this.aankeiler = transport.responseText;
				//this.hideEye();
				this.showNew();
				this.observeMouse();
			}.bind(this)
		});
	},
	hideEye: function(){
		this.introWrap.addClassName('keiler').hide();
	},
	showNew: function(){
		//this.setStatus("showing new data");
		this.introWrap.update(this.aankeiler);
		//new Effect.Appear(this.introWrap,{duration:0.5,delay: 0.2});
		this.introWrap.show();
		//	if(timer == undefined) new Effect.Appear(this.introWrap,{duration:0.5,delay: 0.2});
		//	else this.introWrap.show();
	},
	observeMouse: function(){
			this.element.observe('mouseout',function(){
				this.introWrap.update();
				this.introWrap.hide();

			}.bind(this));
	},
	timeOut: function(){
		new Effect.Fade(this.introWrap,{duration:0.5,
			afterFinish: function(){
				this.introWrap.update();
				this.introWrap.removeClassName('keiler');
				new Effect.Appear(this.introWrap,{duration:0.5});	
				//this.setStatus("done!");
				
			}.bind(this)
		});
	},
	setStatus: function(status){
		$('debug').update(status);
	}
});

var canonMover = Class.create({
	initialize: function(element) {
		this.element		= element;
		this.container		= $('canonContainer');
		this.currentCanon	= $('activeCanon');
		this.duration		= 0.5;
		this.updateUrl		= "pages/canon_content.php";
		
		if(this.element.hasClassName('left')){
			this.direction 	= 'left';
			this.movePx		= 880;
			this.canonLoadId= $('prevItem').innerHTML;
		}
		else{
			this.direction 	= 'right';
			this.movePx		= -880;
			this.canonLoadId= $('nextItem').innerHTML;
		}
		this.createNewcanon();
		//this.moveCanonTo();
		$$('.canonMover').invoke('stopObserving','click');
		
		
	},
	createNewcanon: function(){
		var canon = new Element('div',{'class': 'canon-item', 'id': 'newCanon'}).hide();
		if(this.direction == 'left'){
			this.currentCanon.insert({before: canon});
			this.container.setStyle({
				left: -880 + 'px'
			});
		}
		else this.currentCanon.insert({after: canon});	
		this.newCanon		= $('newCanon');	
		this.updateNewCanon();		
	},
	updateNewCanon: function(){
		new Ajax.Updater(this.newCanon,this.updateUrl,{
			parameters: "load_canon="+this.canonLoadId,
			onComplete:function(){
				this.newCanon.show();
				this.moveCanonTo();
				this.getCanonTitle();
				this.updateHeader();
			}.bind(this)
		});
		
	},
	updateHeader: function(){
		$$("#canon li").invoke("removeClassName","active");
		var activeHeaderId	= parseInt(this.canonLoadId);
		
		if(activeHeaderId == 0) $("canon").down(1).addClassName("active");
		else $("canon").down(1).next(activeHeaderId-1).addClassName("active");
		
		var container 	= $('nav').down().next().down()
		var posLeft		= container.style.left;
		
		// move right on active header id	
		if(activeHeaderId == 10 || activeHeaderId == 20 || activeHeaderId == 30){
			if(this.direction == "right") new Effect.Move (container,{ y: 0, x: -740 , duration:1.25, mode: 'relative',transition: Effect.Transitions.sinoidal});	
		}
		// move left on active header id
		else if(activeHeaderId == 9 || activeHeaderId == 19 || activeHeaderId == 29){
			if(this.direction == "left") new Effect.Move (container,{ y: 0, x: 740 , duration:1.25, mode: 'relative',transition: Effect.Transitions.sinoidal});
		}
		// show / hide header nav TERUG
		if(activeHeaderId >= 10) $('terug').removeClassName("none");
		else $('terug').addClassName("none");
		
		// show / hide header nav VERDER
		if(activeHeaderId >= 30) $('verder').addClassName("none");
		else $('verder').removeClassName("none");
				
	},
	moveCanonTo: function(){
		new Effect.Move('canonContainer',{ y: 0, x: this.movePx , duration:this.duration, mode: 'relative',
			afterFinish: function(){
				this.updateCanonIds();
			}.bind(this)
		});
	},
	getCanonTitle: function(){
		new Ajax.Request("pages/get_canon_header.php",{
			parameters: "load_canon="+this.canonLoadId,
			onComplete:function(transport){
				document.title = transport.responseText;
			}.bind(this)
		});
	},
	updateCanonIds: function(){
		// remove "activeCanon" id old from current canon
		$('activeCanon').writeAttribute('id',false);
		
		// replace "newCanon" id with "activeCanon" id
		$('newCanon').writeAttribute('id',"activeCanon");
	
		//this.currentCanon.addClassName('activeCan');
		setTimeout(function(){
			if(this.direction == 'right'){
				this.container.setStyle({
					left: 0 + 'px'
				});
			}
			this.currentCanon.remove();
		}.bind(this),500);
		
		this.observeClicks();
		
		$('nextItem').update((parseInt(this.canonLoadId)+1));
		$('prevItem').update((parseInt(this.canonLoadId-1)));
		
		if($('prevItem').innerHTML >= 0) $('prevItem').removeClassName('hidden');
		else $('prevItem').addClassName('hidden');
		
		if($('nextItem').innerHTML < 40) $('nextItem').removeClassName('hidden');
		else $('nextItem').addClassName('hidden');
		
	},
	observeClicks: function(){
		setTimeout(function(){
			
			$$('.canonMover').invoke('observe','click',function(event){
				var element = Event.element(event);
				new canonMover(element);
			});
			
		}.bind(this),500);
		
		$$('a.meer').invoke('observe','click', function(event){
			Event.stop(event);
			$('maincontainer').scrollTo();
			var element = Event.element(event);

			if(!element.hasClassName("opened")){
				element.addClassName("opened");
				element.update("verberg");  
			}
			else{
				element.removeClassName("opened");
				element.update("lees verder");
			}
			new Effect.toggle('more','blind',{duration:1});
		});
		
		$$('.related a.rel').invoke('observe','click',function(event){
			Event.stop(event);
			var element = Event.element(event);
			new relatedInfo(element);
		});
		
		$$('#media img').invoke('observe','mouseover',function(event){
			var element = Event.element(event);
			var alt		= new showAltText(element);
		});
		
	}
});

var overlay = Class.create({
	initialize: function(element) {
		if($('overlay') == null){
			$$("body").first().insert(
		      new Element('div',{ id: 'overlay' })
		    );
		}
		$$("body").first().insert(
	      new Element('div',{ id: 'overlayBox' })
	    );
		this.element  	= element;
		this.delay		= 2000;
		this.overlay 	= $('overlay'); 
		this.overlayBox	= $('overlayBox'); 
		this.overlayBox.hide();
		this.overlay.hide();
		this.showOverlay();
	},
	showOverlay: function(){
		var arrayPageSize = this.getPageSize();
		this.pageHeight = arrayPageSize[1];
		this.overlay.setStyle({ height: this.pageHeight + 'px' });
		
		new Effect.Appear(this.overlay,{duration:0.5, from:0.0, to:0.8});
		this.overlay.observe('click',this.closeOverlay.bind(this))
	},
	showInner: function(size){
		switch(size){

			case "l":
				this.overlayBox.addClassName('large');
				new Effect.Appear(this.overlayBox,{delay:0.6,duration:0.5});
			break;
			
			case "m":
				var overlayBoxHeight = this.overlayBox.getHeight();
				var marginTop = (this.pageHeight - overlayBoxHeight)-100;
				this.overlayBox.setStyle({ top: marginTop+'px' });
				new Effect.Appear(this.overlayBox,{delay:0.6,duration:0.5});
			break;
			
		}
	//	var overlayBoxHeight = this.overlayBox.getHeight();
	//	var marginTop = this.pageHeight - overlayBoxHeight - 100;
	//	this.overlayBox.setStyle({ top: marginTop+'px' });
	//	new Effect.Appear(this.overlayBox,{delay:0.6,duration:0.5});
	},
	updateOverlay: function(update,size){
		this.overlayBox.update(update);
		this.showInner(size);
	},
	closeOverlay: function(){
		new Effect.Fade(this.overlayBox,{duration:0.2, from:1, to:0.0});
		new Effect.Fade(this.overlay,{delay:0.2, duration:0.5, from:0.8, to:0.0});
		
		timer = setTimeout( function(){
			$('overlayBox').remove();
			$('overlay').remove();
		}, 600);
	},
	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 [pageWidth,pageHeight];
		
	}
});


function showComments(canon_id,com_on){
	
	if($('more').style.display == 'none') new Effect.BlindDown('more','blind',{duration:1});
	
	var container 	= $('data').down();
	$('vensterTags').hide();

	new Ajax.Updater(container,"pages/get_comments.php",{
		parameters: "canon_id="+canon_id+"&comment_on="+com_on,
		onComplete:function(){}
	});	
}

function commentVenster(){
	form_values = $('commentForm').serialize(true);
	var missed;

	var name 	= form_values['naam'];
	var email 	= form_values['email'];
	var comment = form_values['bericht'];

	var ans 	= form_values['answer'];
	var x 		= parseFloat(form_values['x']);
	var y 		= parseFloat(form_values['y']);	
	var t 		= x + y;

	if(ans == ''){
		$('answer').addClassName('missed');
		missed = true;
	}else{
		$('answer').removeClassName('missed');
	}

	if(name == ''){
		$('naam').addClassName('missed');
		missed = true;
	}else{
		$('naam').removeClassName('missed');
	}
	
	if(email == ''){
		$('email').addClassName('missed');
		missed = true;
	}else{
		$('email').removeClassName('missed');
	}

	if(comment == ''){
		$('bericht').addClassName('missed');
		missed = true; 
	}else{
		$('bericht').removeClassName('missed');
	}

	if(missed == true){
		$('msg').innerHTML= "!U heeft een aantal velden niet ingevuld";
		return false;
	}

	if(ans != t){
		$('answer').addClassName('missed');
		$('msg').innerHTML= "&nbsp;! U heeft niet goed opgeteld, probeer het nog een keer.";
		$('answer').value ='';
		return false;	
	}else{
		$('answer').removeClassName('missed');
	}

	new Ajax.Request('pages/send_comment.php',{
		parameters: form_values,
		onComplete: function (transport) {
			var date = transport.responseText;
			var reactie = new Element('div',{'class': 'comment'}).hide();
			reactie.update("<div class='date'>"+date+"</div><div class='msg'><strong>"+name+"</strong>"+comment+"</div><div class='clear'></div>");
		
			$('commentForm').insert({before: reactie});
			new Effect.BlindDown(reactie);
			$('commentForm').reset();
		}
		
	});
}