Event.observe(window, 'load', function() {
	if($('imp1') != null) var kb = new kadebuurtImpression();
	
	$$('.imageSelector img').invoke('observe','click',function(event){
		var el = Event.element(event);
		var is = new imageSwapper(el); 
	});
	
	if($('npFotoboek') != null) var fb = new fotoboek();
	
});

var fotoboek = Class.create({
	initialize: function(element) {
		this.interval		= 4000;
		this.duration		= 0.2
		this.wrapper		= $('npFotoboek');
		this.selector		= $('npSelector');
		this.active			= this.wrapper.down();
		this.nextImg		= this.active.next();
		this.counter		= 0;
		this.timer			= null;
		this.play			= true;
		this.itemCount		= $$("#npFotoboek img").length;
		if(this.itemCount <= 1) return;
		this.setTimer();
		this.observeClicks();
	},
	observeClicks: function(){

		$$('.selector img').invoke('observe','click',function(event){
			this.clearTimer();
			this.element	= Event.element(event);
			
			this.nextImg	= $("la-"+this.element.id); 
			
			$$('.selector img').invoke("removeClassName","active");
			this.element.addClassName("active");			
			this.fadeCurrent();
		}.bind(this));
		
	},
	clearTimer: function(){
		clearInterval(this.timer);
		this.timer	= null;
		this.play	= false;
	},
	setTimer: function(){
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.fadeCurrent();
		}.bind(this),this.interval);
	},
	updateSelector: function(){
		if(this.play == true){
			$$('.selector img').invoke("removeClassName","active");
			this.selector.down().next(this.counter).addClassName("active");
		}
		this.counter++;
		this.updateIds();
	},
	updateIds: function(){
		this.active			= this.nextImg;
		if(this.active.next() != null){
			this.nextImg = this.active.next();
			if(this.play == true) this.setTimer();
		}
	},
	fadeCurrent: function(){
		new Effect.Fade(this.active,{duration: this.duration});
		new Effect.Appear(this.nextImg,{
			duration: this.duration,
			afterFinish: function(){
				$$('#impressionContainer .active').invoke("removeClassName","active");	 
				this.nextImg.addClassName("active");
				this.updateSelector();
			}.bind(this)
		});
	}
	
});

var imageSwapper = Class.create({
	initialize: function(element) {
		this.element		= element;
		this.imgSrc			= this.element.id;
		this.duration		= 0.2;
		this.container		= $('impressionContainer');	
		this.active 		= $$('#impressionContainer .active');	 
		this.old			= $("la-"+this.active);
		this.nwe			= $("la-"+this.imgSrc);
		this.updateSelector();
		this.fadeCurrent();
	},
	updateSelector: function(){
		$$('.imageSelector img').invoke("removeClassName","active");
		this.element.addClassName('active');
	},
	fadeCurrent: function(){
		new Effect.Fade(this.active[0],{duration: this.duration});
		new Effect.Appear(this.nwe,{
			duration: this.duration,
			afterFinish: function(){
				$$('#impressionContainer .active').invoke("removeClassName","active");	 
				this.nwe.addClassName("active");
			}.bind(this)
		});
	},
	showNew: function(){
		new Effect.Appear(this.imgContainer,{
			delay:0.1,
			duration: this.duration
		});	
	}
});


var kadebuurtImpression = Class.create({
	initialize: function() {
		this.timer			= null;
		this.loader			= null;
		this.wrapper1		= $('imp1');
		this.wrapper2		= $('imp2');
		this.currentCount	= 2;
		this.insertIn		= this.wrapper2;
		this.timer = setTimeout(function(){
			this.loadImage();		
		}.bind(this),2000);
	},
	loadImage: function(){
		if(this.currentCount==6) this.currentCount = 1;
		new Ajax.Request('pages/impression.php',{
			parameters: 'counter='+this.currentCount,	
			onComplete: function (resp){
				this.newImage	= resp.responseText;	
				this.currentCount++;
				this.insertImage();
			}.bind(this)
		});
	},
	insertImage: function(){
		var images = '<img src='+this.newImage+' />';
		if(this.insertIn == $('imp2') ){
			this.wrapper2.update(images).hide();
			this.fadeIn 	= this.wrapper1;
			this.fadeOut 	= this.wrapper2;
			this.insertIn	= this.wrapper1;
		}else{
			this.wrapper1.update(images).hide();
			this.fadeOut 	= this.wrapper1;
			this.fadeIn 	= this.wrapper2;
			this.insertIn	= this.wrapper2;
		}
		
		this.loadInterval();
	},
	loadInterval: function(){
		
		this.loader 	= setTimeout(function(){
			clearInterval(this.loader);
			this.loader = null;
			this.crossFade();
		}.bind(this),2000);
		
	},
	crossFade: function(){
		
		new Effect.Parallel([
			new Effect.Fade(this.fadeIn, { sync: true}), 
			new Effect.Appear(this.fadeOut, { sync: true}) 
		],{ 
			duration: 1.0,
			afterFinish: function(){
				this.createInterval();
			}.bind(this)
		});
	},
	createInterval: function(){		
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.loadImage();
		}.bind(this),8000);
	}
});

var kadebuurtSatellite = Class.create({
	initialize: function(element) {
		this.element		= element;
		this.grid			= $('grid');
		this.page			= element.className;
		this.pageId			= $("sat_"+this.page);
		this.checkCoordinates();
		this.updateNavigators();
		this.updatePageTitle();
	},
	checkCoordinates: function(){
		var pos = this.pageId.positionedOffset();
		this.posLeft	= pos[0];	
		this.posTop 	= pos[1]; 
		this.moveGrid();
	},
	moveGrid: function(){
		new Effect.Move (this.grid,{ y: -this.posTop, x:-this.posLeft , duration:1, mode: 'absolute'});
	},
	updateNavigators: function(){
		$$(".satellite a").invoke("removeClassName","active");
		$$(".navigator ."+this.page).invoke("addClassName","active");
	},
	updatePageTitle: function(){
		var nT	= "Wijkteam Kadebuurt Gouda | "+ this.page;
		document.title = nT;
	}
});