var Promadesign = Class.create();

Promadesign.prototype = {
	elements: new Array(),
	effects: new Array(),
	//holds current item that is clicked
	clickedElement: '',
	//temp locks some element effects
	tempLocked: false,
	//open full page
	fullpage:'',
	
	//constructor
	initialize: function(){
		//yeah i know.... could be dynamic.... dont need it...
		this.elements[0] = new Array('producten_link','');
		this.elements[1] = new Array('portfolio_link','');
		this.elements[2] = new Array('overons_link','');
		this.elements[3] = new Array('development_link','');
		this.elements[4] = new Array('contact_link','');
		
		
		this.startObservers();
		this.magixShow();
	},
	startObservers : function(){
		Ajax.Responders.register({
		  onCreate: function() {
		  	$('loader_container').setStyle({opacity:0.8});
		    $('loader_container').show();
		  },
		  onComplete: function() {
		    $('loader_container').hide();
		  }
		});
		
		
		Event.observe('producten_link','click',function(event){
			if(Promadesign.prototype.clickedElement != ''){
				Promadesign.prototype.makeShort(Promadesign.prototype.clickedElement,'yes');
				Promadesign.prototype.ChangeToNormal(Promadesign.prototype.clickedElement);
			}
			Promadesign.prototype.clickedElement = 'producten_link';
			Promadesign.prototype.moveShow(0);
		});
		Event.observe('producten_link','mouseover',function(event){
			if(Promadesign.prototype.tempLocked == false){
				Promadesign.prototype.makeLong('producten_link');
			}
		});
		Event.observe('producten_link','mouseout',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeShort('producten_link');
			}
		});
		//----------------------
		Event.observe('portfolio_link','click',function(event){
			if(Promadesign.prototype.clickedElement != ''){
				Promadesign.prototype.makeShort(Promadesign.prototype.clickedElement,'yes');
				Promadesign.prototype.ChangeToNormal(Promadesign.prototype.clickedElement);
			}
			Promadesign.prototype.clickedElement = 'portfolio_link';
			Promadesign.prototype.moveShow(1);
		});
		Event.observe('portfolio_link','mouseover',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeLong('portfolio_link');
			}
		});
		Event.observe('portfolio_link','mouseout',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeShort('portfolio_link');
			}
		});
		//----------------------
		Event.observe('overons_link','click',function(event){
			if(Promadesign.prototype.clickedElement != ''){
				Promadesign.prototype.makeShort(Promadesign.prototype.clickedElement,'yes');
				Promadesign.prototype.ChangeToNormal(Promadesign.prototype.clickedElement);
			}
			Promadesign.prototype.clickedElement = 'overons_link';
			Promadesign.prototype.moveShow(2);
		});
		Event.observe('overons_link','mouseover',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeLong('overons_link');
			}
		});
		Event.observe('overons_link','mouseout',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeShort('overons_link');
			}
		});
		//----------------------
		Event.observe('development_link','click',function(event){
			if(Promadesign.prototype.clickedElement != ''){
				Promadesign.prototype.makeShort(Promadesign.prototype.clickedElement,'yes');
				Promadesign.prototype.ChangeToNormal(Promadesign.prototype.clickedElement);
			}
			Promadesign.prototype.clickedElement = 'development_link';
			Promadesign.prototype.moveShow(3);
		});
		Event.observe('development_link','mouseover',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeLong('development_link');
			}
		});
		Event.observe('development_link','mouseout',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeShort('development_link');
			}
		});
		//----------------------
		Event.observe('contact_link','click',function(event){
			$('contactError').hide();
			
			if(Promadesign.prototype.clickedElement != ''){
				Promadesign.prototype.makeShort(Promadesign.prototype.clickedElement,'yes');
				Promadesign.prototype.ChangeToNormal(Promadesign.prototype.clickedElement);
			}
			Promadesign.prototype.clickedElement = 'contact_link';
			Promadesign.prototype.moveShow(4);
		});
		Event.observe('contact_link','mouseover',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeLong('contact_link');
			}
		});
		Event.observe('contact_link','mouseout',function(event){
			if (Promadesign.prototype.tempLocked == false) {
				Promadesign.prototype.makeShort('contact_link');
			}
		});		
		
		//contact
		Event.observe('contact_button','click',function(event){
			
			if ($F('name') == '' || $F('message') == '') {
				$('contactError').innerHTML = 'Uw naam en bericht zijn verplicht.';
				$('contactError').appear();
				new Effect.Highlight('contactError',{ startcolor: '#FF0000',endcolor: '#767000',duration:1});
			}
			else {
				$('contactError').hide();
				url = basepath + 'index.php/response/saveContact/';
				new Ajax.Request(url, {
					method: 'post',
					parameters: {
						name: $F('name'),
						email: $F('email'),
						tel: $F('tel'),
						website: $F('website'),
						message: $F('message')
					},
					onSuccess: function(transport){
						data = transport.responseText.evalJSON(true);
						if(data.error == 1){
							$('contactError').innerHTML = data.message;
							$('contactError').appear();
							new Effect.Highlight('contactError',{ startcolor: '#FF0000',endcolor: '#767000',duration:1});
						}else{
							$('name').clear();
							$('email').clear();
							$('tel').clear();
							$('website').clear();
							$('message').clear();
							
							$('contactError').innerHTML = 'Het formulier is verzonden.';
							$('contactError').appear();
							new Effect.Highlight('contactError',{ startcolor: '#00ff00',endcolor: '#767000'});
						}
						
					}
				});
			}
		});
		
		Event.observe('producten_leesmeer','click',function(event){
			$('full_text_producten').appear();
			$('producten_close').appear();
			Promadesign.prototype.fullpage = 'full_text_producten';
		});
		
		Event.observe('cms_leesmeer','click',function(event){
			$('full_text_cms').appear();
			$('producten_close').appear();
			Promadesign.prototype.fullpage = 'full_text_cms';
		});
		Event.observe('cart_leesmeer','click',function(event){
			$('full_text_cart').appear();
			$('producten_close').appear();
			Promadesign.prototype.fullpage = 'full_text_cart';
		});
		
		Event.observe('producten_close','click',function(event){
			$(Promadesign.prototype.fullpage).hide();
			$('producten_close').hide();
		});
		
		
	},
	magixShow : function(){
		
		$('producten_link').appear({ queue: { position: 'end', scope: 'nav' },duration:0.3});
		$('portfolio_link').appear({ queue: { position: 'end', scope: 'nav' },duration:0.3});
		$('overons_link').appear(  { queue: { position: 'end', scope: 'nav' },duration:0.3});
		$('development_link').appear({ queue: { position: 'end', scope: 'nav' },duration:0.3});
		$('contact_link').appear(  { queue: { position: 'end', scope: 'nav' },duration:0.3,
			afterFinish: function(){
				//new Effect.Parallel([
				//new Effect.Move(element, { sync: true, x: 20, y: -30, mode: 'relative' }), 
				new Effect.Highlight('contact_link',    { startcolor: '#fcee21',endcolor: '#000000'});
				new Effect.Highlight('development_link',{ startcolor: '#578b3e',endcolor: '#000000',delay:0.1});
				new Effect.Highlight('overons_link',    { startcolor: '#c85527',endcolor: '#000000',delay:0.2});
				new Effect.Highlight('portfolio_link',  { startcolor: '#29abe2',endcolor: '#000000',delay:0.3});
				new Effect.Highlight('producten_link',  { startcolor: '#ec2026',endcolor: '#000000',delay:0.4});
			}
		});
	},
	moveShow : function(moveElement){
		var effectsArray = new Array();
		for(i=0;i < this.elements.length;i++){
			
			calcLeftPos = 50+(i*25);
			calcRightPos = (700-150)-(this.elements.length-(i*25));
			//alert(calcRightPos);
			//Math.abs();
			
			if(i==moveElement){
				if(this.elements[i][1] == 'left'){
					//allready left... dont do anything
					//alert(this.elements[i][0]+': staat al links..');
					//return
				}else{
					//stop the makeShort effect
					//this.effects[this.elements[i][0]] = '';
					
					this.elements[i][1] = 'left';
					
					effect = new Effect.Move(this.elements[i][0],{sync:true, x: calcLeftPos, y: -30, mode: 'absolute' });
					effectsArray.push(effect);
					//alert('clicked and move left: '+this.elements[i][0]);
				}
				
				
			}else if(i < moveElement){
				if(this.elements[i][1] == 'left'){
					//alert(this.elements[i][0]+': staat al links..');
				}else{
					this.elements[i][1] = 'left';
					effect = new Effect.Move(this.elements[i][0],{sync:true, x: calcLeftPos, y: -130, mode: 'absolute' });
					effectsArray.push(effect);
					//alert(this.elements[i][0]+': move left');
				}
				
				
			}else if(i > moveElement){
				if (this.elements[i][1] == 'right') {
					//alert(this.elements[i][0]+': staat al rechts..');
				}
				else {
					this.elements[i][1] = 'right';
					effect = new Effect.Move(this.elements[i][0],{sync:true, x: calcRightPos, y: -130, mode: 'absolute' });
					effectsArray.push(effect);
					//alert(this.elements[i][0]+': move right');
				}
				
				
			}
		}
		new Effect.Parallel(effectsArray,{
			duration:1,
			beforeStart:function(){
				Promadesign.prototype.tempLocked = true;
				Promadesign.prototype.makeFatLine(Promadesign.prototype.clickedElement);
			},
			afterFinish:function(){
				Promadesign.prototype.tempLocked = false;
				Promadesign.prototype.showBlock(Promadesign.prototype.clickedElement);
			}
		});
	},
	makeLong : function(el){
		if(typeof this.effects[el] != 'undefined' && this.effects[el] != ''){
			this.effects[el].cancel();
			this.effects[el] = '';
		}
		leftPos = parseInt($(el).getStyle('left').replace(/px/,''));
		this.effects[el] = new Effect.Move(el,{ x: leftPos, y: -30, mode: 'absolute',duration:0.4,transition: Effect.Transitions.spring });
		
	},
	makeShort : function(el,force){
		//if this element is clicked dont do effect
		if(Promadesign.prototype.clickedElement == el && typeof force == 'undefined'){
			return;
		}
		
		if (typeof this.effects[el] != 'undefined' && this.effects[el] != '') {
			this.effects[el].cancel();
			this.effects[el] = '';
		}

		leftPos = parseInt($(el).getStyle('left').replace(/px/,''));
		//var_dump(dimensions);
		this.effects[el] = new Effect.Move(el,{ x: leftPos, y: -130, mode: 'absolute',duration:0.4,transition: Effect.Transitions.spring });
		
	},
	makeFatLine : function(el){
		itemm = el.replace(/_link/,'');
		new Effect.Morph(itemm+'_color', {
		  style: {
		    height: '490px',
			width:  '16px'
		  },
		  duration: 0.3
		});
		$(itemm+'_text').innerHTML = '<img src="res/images/nav_'+itemm+'_o.gif">';
		$(itemm+'_text').setStyle({left:'3px'});
	},
	ChangeToNormal : function(el){
		
		itemm = el.replace(/_link/,'');
		
		new Effect.Morph(itemm+'_color',{
		  style: {
		    height:'370px',
			width:'4px'
		  },
		  duration: 0.3
		});
		$(itemm+'_text').innerHTML = '<img src="res/images/nav_'+itemm+'.gif">';
		$(itemm+'_text').setStyle({left:'0px'});
		new Effect.DropOut(itemm+'_content');
	},
	showBlock : function(el){
		itemm = el.replace(/_link/,'');
		new Effect.SlideDown(itemm+'_content',{duration:0.3});		
	}
};












Event.observe(window,'load',function () { new Promadesign(); });




function var_dump(element, limit, depth)
{
	depth = depth?depth:0;
	limit = limit?limit:1;
	returnString = '<ol>';
	for(property in element)
	{
		//Property domConfig isn't accessable
		if (property != 'domConfig')
		{
			returnString += '<li><strong>'+ property + '</strong> <small>(' + (typeof element[property]) +')</small>';
			if (typeof element[property] == 'number' || typeof element[property] == 'boolean')
				returnString += ' : <em>' + element[property] + '</em>';
			if (typeof element[property] == 'string' && element[property])
				returnString += ': <div style="background:#C9C9C9;border:1px solid black; overflow:auto;"><code>' +
									element[property].replace(/</g, '<').replace(/>/g, '>') + '</code></div>';
			if ((typeof element[property] == 'object') && (depth <limit))
				returnString += var_dump(element[property], limit, (depth + 1));
			returnString += '</li>';
		}
	}
	returnString += '</ol>';
	if(depth == 0)
	{
		winpop = window.open("", "","width=800,height=600,scrollbars,resizable");
		winpop.document.write('<pre>'+returnString+ '</pre>');
		winpop.document.close();
	}
	return returnString;
}