var el,li;
document.observe("dom:loaded", function() {
	
	// observe project hovers
	$$(".blocklist img").invoke("observe","mouseover",function(event){
		el = Event.element(event);
		li = new oicCols();
		li.init(el);
	});
	// observe movers
	if($("inlineProjectList")){
		var slider = new oicCols();
		slider.observeSlider();
	}
	
	sc = new oICshowcase();
		
});

var oICshowcase = Class.create({
	initialize: function(){
		if(!$("showcase")) return;
		this.showcase 	= $("showcase");
		this.slider		= this.showcase.down().next();
		this.cases 		= this.showcase.down().next().down();
		this.caseCount	= $$(".case").length;
		this.selector	= $("caseSelector");
		
		this.counter	= 0;
		this.timer 		= null
		this.delay		= 7000;
		this.full	 	= 1;
		this.half		= 0.5;
		this.quart		= 0.25;
		this.currentCase= this.cases.down();
		this.nextCase 	= this.cases.down().next();
		
		this.cases.setStyle({
			left: "750px"
		});
		
		this.init();
		$$(".selector a").invoke("observe","click",this.showCase.bind(this));
		
		//$$("a.dwp").invoke("observe","click",this.showForm.bind(this));
	},
	showForm: function(event){
		Event.stop(event);
		if($("whitepaper")) return;
		
		new Ajax.Request("pages/whitepaper.php",{
			onComplete: function(t){
				var r = t.responseText;
				
				var div = new Element("div",{id:"whitepaper"}).update(r);
				$("showcase").insert({after:div});
				
				$("closeWP").observe("click",function(event){
					Event.stop(event);
					$("whitepaper").remove();
				}.bind(this))
			}.bind(this)
		})
	},
	init: function(){
		this.texts 	= this.currentCase.down();
		this.bg 	= this.currentCase.down().next();
		
		new Effect.Appear(this.bg,{
			duration:this.full,
			afterFinish: function(){
				this.showText();
			}.bind(this)
		});
	},
	showText: function(){
		new Effect.Appear(this.texts,{duration:this.half});
		new Effect.Move(this.texts,{y:50,x:260,mode: 'absolute',duration:this.half,
			afterFinish: function(){
				this.setTimer();
			}.bind(this)
		});
	},
	setTimer: function(){
		this.timer = setTimeout(this.moveToNextCase.bind(this),this.delay);
	},
	updateSelector: function(){
		$$('.selector a').invoke('removeClassName','active');

		if(this.counter == (this.caseCount-1)) this.selector.down(1).addClassName('active');
		else this.selector.down().next(this.counter).down().addClassName('active');
		
	},
	moveToNextCase: function(){
		clearInterval(this.timer);
		this.timer = null;
		
		this.updateSelector();
		
		
		new Effect.Fade(this.bg,{duration:this.half});
		new Effect.Fade(this.texts,{duration:this.half});
		
		
		new Effect.Move(this.slider.down(),{y:0,x:-1500,mode: 'relative',duration:this.full,
			afterFinish: function(){
				
				this.currentCase.down().writeAttribute("style",false).hide();
				
				// update current case
				this.currentCase = this.cases.down().next(this.counter);
				
				this.counter++;
				// reset or show next
				if(this.counter == this.caseCount) this.resetAll();
				else this.init();
				
			}.bind(this)
		});
		
	},
	resetAll: function(){
		this.cases.setStyle({
			left: "750px"
		});
		
		this.currentCase 	= this.cases.down();
		this.counter		= 0;
		
		this.init();
	},
	fadeCurrent: function(){
		
		new Effect.Fade(this.bg,{duration:this.half});
		new Effect.Fade(this.texts,{duration:this.half});
				
	},
	showCase: function(event){
		Event.stop(event);
		this.element	= Event.element(event);
		this.caseid		= parseInt(this.element.id.replace("tocase","")); 		
		
		if(this.caseid == this.counter+1){
			clearInterval(this.timer);
			this.timer = null;
			return; 
		}
		//alert(this.caseid+" = "+(this.counter+1));//return;
		// clear interval
		clearInterval(this.timer);
		this.timer = null;
		
		// fade current 
		this.fadeCurrent();
		
		// update selector
		$$('.selector a').invoke('removeClassName','active');
		this.element.addClassName("active");
		
		// set active in viewport
		this.cases.setStyle({
			left: (750- (1500*(this.caseid-1)))+"px"
		});
		
		// current case
		this.currentCase.down().writeAttribute("style",false).hide();
		
		
		if(this.caseid-2 < 0) this.currentCase = this.cases.down();
		else this.currentCase = this.cases.down().next(this.caseid-2);
		
		this.texts 	= this.currentCase.down();
		this.bg 	= this.currentCase.down().next();
		
		new Effect.Appear(this.bg,{
			duration:this.full,
			afterFinish: function(){
				
				new Effect.Appear(this.texts,{duration:this.half});
				new Effect.Move(this.texts,{y:50,x:260,mode: 'absolute',duration:this.half});
				this.counter = this.caseid-1;
				
			//	alert(this.counter);
			}.bind(this)
		});
		
		
	}
	});

var oicCols = Class.create({
	startTimer: function(el){
		this.el 		= el;
		
		this.txt 		= this.el.previous(); 
		this.effect 	= null;
		this.useBW		= false;
		
		this.timer 		= null;
		this.interval 	= 500;
		
		
		this.checkTimer();
	},
	checkTimer: function(){
		this.timer = setTimeout(function(){
			this.el.stopObserving("mouseout");
			this.init();
		}.bind(this),this.interval);
		
		this.el.observe('mouseout',function(){
			this.stopTimer();
		}.bind(this));
		
	},
	stopTimer: function(){
		clearInterval(this.timer);
		this.timer = null;
	},
	init: function(el){
		this.el 		= el;
		
		this.txt 		= this.el.previous(); 
		this.effect 	= null;
		this.useBW		= false;
		
		// li wrapper
		this.currentProjectCase = this.el.up(1);
		
		// check for if open
		if(this.el.hasClassName("opened") && this.effect != null ){
			this.effect.cancel();
			return;
		}
		this.el.addClassName("opened");
		
		// move up 		
		this.effect 	= new Effect.Move(this.txt, { x: 0, y: 40, mode: 'absolute', duration:0.5});
		
		// observe mouseout
		this.observeMouseOut();
	},
	observeMouseOut: function(){
		document.observe('mouseover', function(event){
			var element = Event.element(event);
			if (element.descendantOf(this.currentProjectCase) == false){
				this.effect.cancel();
				this.resetCurrentProject();
				document.stopObserving('mouseover');
			}
		}.bind(this));
	},
	resetCurrentProject: function(){
						
		this.effect = new Effect.Move(this.txt, { x: 0, y: 120, mode: 'absolute',duration:0.2,
			afterFinish:function(){
				this.el.removeClassName("opened");
				//this.checkTimer();
			}.bind(this)
		});
	},
	observeSlider: function(){
		this.currentCount 	= 1;
		this.maxClick 		= $$("#inlineProjectList li").length/3;
		
		$("casesToRight").observe("click",this.moveToRight.bind(this));
		$("casesToLeft").observe("click",this.moveToLeft.bind(this));
	},
	moveToRight: function(event){
		Event.stop(event);
		if(this.currentCount == this.maxClick){
			return;
		}
		new Effect.Move("cases", { x: -985, y: 0, mode: 'relative', duration:0.5});
		this.currentCount++;
		
	},
	moveToLeft: function(event){
		Event.stop(event);
		if(this.currentCount == 1) return;
		new Effect.Move("cases", { x: 985, y: 0, mode: 'relative', duration:0.5});
		this.currentCount--;
	}
});

function validateForm(formid){
	
	var inputs 		= $(formid).getInputs("text");
	var cbs 		= $(formid).getInputs("radio");
	var form_values = $(formid).serialize(true);
	var reg 		= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var namefield 	= /mail/
	var missed 		= false;
	var fieldCheck	= "";
	var mail		= "";

	inputs.each(function(i){
		if(i.hasClassName("required") && namefield.test(i.name) && reg.test($F(i)) == false){
			i.addClassName("missed");
			missed 		= true;
			mail 		= "- Het ingevulde email adres is niet geldig<br>";
		}
		else if(i.hasClassName("required") && $F(i) == ""){
			i.addClassName("missed");
			missed 		= true;
			fieldCheck 	= "- Niet alle verplichte velden zijn ingevuld<br>";
		}else i.removeClassName("missed");
		
	});
	
	var groups = $$("#"+formid+" .block");
	groups.each(function(g){
		var count = 0;
		var gid = g.id;
		if(!g.hasClassName("required")) return;
		
		var l 	= $$("#"+gid+" input");
		l.each(function(item){
			if(item.checked == true) count++;
		});		
		

		if(count == 0){
			missed = true;
			g.addClassName("missed");
		}else g.removeClassName("missed");
	});

	if(missed == true){
	//	var tt = new toolTip(fieldCheck+mail);
	//	var pos = $("submit"+formid.replace("form","")).cumulativeOffset();
	//	tt.setPosition(pos);
		
		$('msg').update(fieldCheck+mail).addClassName("missed");
		return false;
	}
}

function downloadWP(formid){

	var inputs 		= $(formid).getInputs("text");
	var form_values = $(formid).serialize(true);
	var reg 		= /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
	var namefield 	= /mail/
	var missed 		= false;
	var fieldCheck	= "";
	var mail		= "";

	inputs.each(function(i){
		if(i.hasClassName("required") && namefield.test(i.name) && reg.test($F(i)) == false){
			i.addClassName("missed");
			missed 		= true;
			mail 		= "- Emailadres niet geldig<br>";
		}
		else if(i.hasClassName("required") && $F(i) == ""){
			i.addClassName("missed");
			missed 		= true;
			fieldCheck 	= "- Niet alle velden zijn ingevuld<br>";
		}else i.removeClassName("missed");
		
	});
	
	if(missed == true) $('msg').update(fieldCheck+mail).addClassName("missed");
	else{
		new Ajax.Request("pages/verstuur_form.php",{
			parameters: form_values,
			onComplete: function(t){
				var r = t.responseText.split("||");
				if(r[0] == "download"){
					$(formid).update(r[1]);
				}
			}
		})
	}
	return false;
	
}	
	
function initAnimation(){
	var flashvars 	= {};
	var params 		= {};
	params.wmode 	= "transparent";
	var attributes 	= {};
	swfobject.embedSWF("flash/test.swf", "oICintro", "1200", "340", "9.0.0", false, flashvars, params, attributes);	
}