Event.observe(window, 'load', function() {

	if($('impression') != null) var epg = new cassetteSlider();
	if($('showcase') != null) var epg = new cassetteShowCase();
	$$(".verzenden").invoke("observe","click",sendForm);

});

inTransform = false;
function sendForm(event){
	Event.stop(event);
	var inputs 		= $("contact").getElements('text');
	var form_values = $("contact").serialize(true);
	var reg 		= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var missed 		= false;
	var falseMail	= false
	var fieldCheck	= "";
	var mailCheck	= "";
	
	inputs.each(function(i){
		if(i.hasClassName("required") && i.hasClassName("email") && reg.test($F(i)) == false){
			i.addClassName("missed");
			falseMail 	= true;
			mailCheck 	= "- Het ingevulde email adres is niet geldig<br />";
		}
		else if(i.hasClassName("required") && $F(i) == ""){
			i.addClassName("missed");
			missed 		= true;
			fieldCheck 	= "- Je hebt niet alle velden ingevuld, vul de gemarkeerde velden in<br />";
		}else i.removeClassName("missed");

	});
	
	if(missed == true || falseMail == true){
		$('msg').update(fieldCheck+mailCheck);

		if(inTransform == true) return false;
		inTransform = true;
		new Effect.Highlight('msg',{startcolor:"#2778C2",endcolor:"#ffffff", duration:1,
			afterFinish: function(){
				inTransform = false;
			}
		});
		return false;
	}else{
		new Ajax.Request('pages/handle_form.php',{
			parameters: form_values,
			onComplete: function(r){
				var resp = r.responseText;
				if(resp == "verstuurd"){
					$("contact").update("<h2>Formulier verstuurd</h2>Bedankt voor het invullen van het contact formulier. Ik neem zo spoedig mogelijk contact met je op.")
				}
			}.bind(this)
		});
	}
}

var cassetteShowCase = Class.create({
	initialize: 	function() {
		if($('showcase').hasClassName("paused")) return;
		this.timer			= null;
		this.cases			= $('cases');
		this.currentCase 	= this.cases.down();
		this.nextCase 		= this.cases.down().next();
		this.itemCount		= $$('#cases .case').length-1;
		this.currentCount	= 0;
		//this.selector		= this.cases.next();
		//this.clickedItem	= null;
		this.speed			= 0.5;		
		
		this.timer = setTimeout(function(){
			this.fadeCurrent();
		}.bind(this),7000);
		
	//	this.observeClicks();
	},
	fadeCurrent: 	function(){
		//new debug("fade current case");		
		new Effect.Fade(this.currentCase,{
			duration:this.speed,
			afterFinish: function(){
				this.showNext();
				//this.updateSelector();		
			}.bind(this)
		});
	},
	showNext: 		function(){
		//new debug("show next");		
		new Effect.Appear(this.nextCase,{
			duration:this.speed,
			afterFinish: function(){
				this.currentCase.removeClassName("active"); 
				this.nextCase.addClassName("active");
				
				this.currentCount++;
				this.createInterval();
				this.resetVars();
			}.bind(this)
		});
	},
	createInterval: function(){
		this.timer 	= setTimeout(function(){
			clearInterval(this.timer);
			this.timer = null;
			this.fadeCurrent();
		}.bind(this),7000);
	},
	resetVars: 		function(){
		if(this.currentCount == this.itemCount){
			this.currentCase 	= this.nextCase;
			this.nextCase 		= this.cases.down();
			this.currentCount	= -1;
		}else{		
			this.currentCase 	= this.nextCase;
			this.nextCase		= this.cases.down().next(this.currentCount);
		}
	},
	updateSelector: function(){
		$$('#showcase .selector span').invoke('removeClassName','active');
		if( this.currentCount == -1){
			this.selector.down().addClassName('active');
		}else{
			this.selector.down().next(this.currentCount).addClassName('active');
		}
	},
	observeClicks: 	function(){
		
		$$('#showcase .selector span').invoke('observe','click',function(event){
			//stop observer on selector
			$$('#showcase .selector span').invoke('stopObserving','click');
			
			var element = Event.element(event);
			var id		= parseInt(element.id.replace("case",""));
		
			// clear interval
			clearInterval(this.timer);
			this.timer = null;
			
			//new debug("interval cleared");		
			$$('.selector span').invoke('removeClassName','active');
			element.addClassName('active');
			
			// active case
			var activeItem 	= $$('#cases .active');
			if(id == 0) var clickedItem = this.cases.down();
			else var clickedItem = this.cases.down().next(id-1);
			
			// fade current item
			new Effect.Fade(activeItem[0] ,{
				duration:this.speed,
				afterFinish: function(){
					activeItem[0].removeClassName('active');
					clickedItem.addClassName('active');
					
					new Effect.Appear(clickedItem,{
						duration:this.speed,
						afterFinish: function(){
							//start observing selector clicks
							this.observeClicks();
						}.bind(this)
					});
					
				}.bind(this)
			});
			
		}.bind(this));
	
	}
});

var cassetteSlider = Class.create({
	initialize: function() {
		
		//this.direction 	= dir; 
		this.effectTime		= 1;
		this.wrapper		= $('impression');
		this.imgWrapper		= this.wrapper.next().down();
		this.preview		= this.imgWrapper.down();
		
		if(this.wrapper.down().next() != null){
			this.mover			= this.wrapper.down().next(1).down();
		}
		this.itemCount		= $$("#impression ul li").length;
		this.maxClick		= Math.floor(this.itemCount/15);
		this.leftClick		= this.wrapper.down();
		this.rightClick		= this.wrapper.down().next();
		
		this.currentId		= this.imgWrapper.id.gsub("prev_","");
		this.prevId			= null;
		this.nextId			= $(this.currentId).up().next().down().next();
		this.altText		= $('imgDesc');
		
		this.currentCount	= 0;
		this.observeClicks();
		this.observeImgClick();
						
	},
	observeClicks: function(){
		
		// single image selector
		$$('#impression .action').invoke('observe','click', function(event){
			var element = Event.element(event);
			if(element.hasClassName('sliderLeft')) this.direction = "left";
			else this.direction = "right";	
			
			
			if(this.direction == "left" && this.mover.hasClassName('inactive')) return;
			if(this.currentCount == 0 && this.direction == "left") return;
			if(this.currentCount == this.maxClick && this.direction == "right") return;
			
			this.moveBrowser(element);
			$$('#impression .action').invoke('stopObserving','click');
		}.bind(this));
		
		// automatically to next image
		$$("#preview .action").invoke('observe','click', function(event){
			var element = Event.element(event);
			
			if(element.hasClassName('sliderNext')){
				this.movement = "next";
				var src = this.nextId.previous().src;
				this.loadImage(src);

				$$('#impression span').invoke("removeClassName","active");
				this.nextId.addClassName("active");

			}else{
				this.movement = "prev";				
				var src = this.prevId.previous().src;
				this.loadImage(src);

				$$('#impression span').invoke("removeClassName","active");
				this.prevId.addClassName("active");
				
			}
		}.bind(this));
		
	},
	observeImgClick: function(){
	
		$$('#impression span').invoke('observe','click',function(event){
			this.movement = "none";
			
			var el 	= Event.element(event);
			this.clickedSpan = el;
			var src = el.previous().src;
			this.loadImage(src);
			
			$$('#impression span').invoke("removeClassName","active");
			el.addClassName("active");
			
		}.bind(this));
		
		$$('#impression span').invoke('observe','mouseover',function(event){
			var el 	= Event.element(event);
			el.addClassName("hover");
			el.observe("mouseout",function(){el.removeClassName("hover")});
		}.bind(this));
			
	},
	loadImage: function(src){
		this.heightCurrent = this.preview.height;
		
		// set wrapper for new size and scaling
		this.imgWrapper.setStyle({'height':this.heightCurrent+'px'});
		
		// get img.src and preload xl image
		this.xl_src = src.replace("th_","pr_");		
		var imgPreloader = new Image();
        imgPreloader.onload = (function(){
			this.activeImg = [imgPreloader.width,imgPreloader.height];
			this.fadeCurrent();			
        }).bind(this);
        imgPreloader.src = this.xl_src;

	},
	fadeCurrent: function(){
		
		new Effect.Fade(this.preview,{duration:this.effectTime/2,
			afterFinish: function(){
				this.showNewImage();
			}.bind(this)
		});
		
		new Effect.Fade(this.altText,{duration:this.effectTime/2});
			
	},
	showNewImage:function(){

		var yScale = (this.activeImg[1] / this.heightCurrent) * 100;
					
		this.preview.src = this.xl_src;
		if(this.movement != "none") this.preview.id  = "prev_"+this.nextId.id;
		
		if(this.movement == "next"){
			this.prevId		= $(this.currentId);
			this.currentId	= $(this.nextId.id);
			
			if($(this.currentId).up().next() != null){
				this.nextId		= $(this.currentId).up().next().down().next();
				$('showNext').show();
			}else{
				$('showNext').hide();
			}
			$('showPrev').show();	
			
			var alt = this.currentId.previous().alt; 		
			
		}else if(this.movement == "prev"){
			this.nextId		= $(this.currentId.id);
			if($(this.prevId.id).up().previous() != null){
				this.prevId		= $(this.prevId.id).up().previous().down().next();
				$('showPrev').show();
			}else{
				$('showPrev').hide();
			}
			$('showNext').show();
			this.currentId	= $(this.prevId.id);
			
			var alt = this.currentId.previous().alt; 		
			
		}else if(this.movement == "none"){
			
			this.currentId	= $(this.clickedSpan.id);
			if(this.currentId.up().next() != null){
				this.nextId = this.currentId.up().next().down().next();	
				$('showNext').show();
			}else{
				$('showNext').hide();
				
			}
			if(this.currentId.up().previous() != null){
				this.prevId		= this.currentId.up().previous().down().next();	
				$('showPrev').show();
			}else{
				$('showPrev').hide();
			}
			
			this.preview.id  = "prev_"+this.clickedSpan.id;
			var alt = this.clickedSpan.previous().alt; 		
		}
		
		this.altText.update(alt);
		
		this.preview.writeAttribute("width",false);
		new Effect.Appear(this.altText,{duration:this.effectTime/2});
		new Effect.Appear(this.preview,{duration:this.effectTime/2});
		//new Effect.Scale(this.imgWrapper, yScale, {scaleX: false, duration:this.effectTime/2, queue: 'front'});

	},
	moveBrowser: function(element){
		this.checkClassNames(element);
		
		this.movePx = (this.direction == "left") ? 255 : -255;
		
		new Effect.Move (this.mover,{ y: this.movePx, x: 0, duration:this.effectTime, mode: 'relative',
			afterFinish: function(){
				
				this.mover.removeClassName('start');
				if(this.direction == "left") this.currentCount--;
				else this.currentCount++;
				
				this.observeClicks();
				
				
			}.bind(this)
		});	
	},
	checkClassNames: function(){
		
		if(this.currentCount == this.maxClick -1 && this.direction == "right"){
			this.rightClick.addClassName("inactive");
			this.leftClick.removeClassName("inactive");	
		}
		if(this.currentCount == 1 && this.direction == "left"){
			this.rightClick.removeClassName("inactive");
			this.leftClick.addClassName("inactive");
		}
		
	}
});