function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}  
}



window.addEvent("load", function(){ 

	
	
	$('tableTop').setStyle('opacity','0');
	$('tableBottom').setStyle('opacity','0');
	
	$('tableTop').tween('opacity','1');
	$('tableBottom').tween('opacity','1');
	
	//$(document.body).tween('opacity','1.0');
	
	//alert(Browser.Engine.name);
	var minHeight = 10;
	var minWidth = 10;
	var maxHeight = 800;
	var maxWidth = 800;
	// Pock();
	function Pock() {
		//var bodyHandler = this.getElements('body');
		
		(function(){ $(document.body).tween('opacity','1'); }).delay(1000);
		(function(){ $('con1').tween('width',maxWidth); }).delay(1000);
		(function(){ $('con1').tween('height',maxHeight); }).delay(2000);
		(function(){ $('con1').tween('width',minWidth); }).delay(3000);
		(function(){ $('con1').tween('height',minHeight); }).delay(4000);
		
		(function(){ $('con2').tween('width',maxWidth); }).delay(5000);
		(function(){ $('con2').tween('height',maxHeight); }).delay(6000);
		(function(){ $('con2').tween('width',minWidth); }).delay(7000);
		(function(){ $('con2').tween('height',minHeight); }).delay(8000);
		
		(function(){ $('con3').tween('width',maxWidth); }).delay(9000);
		(function(){ $('con3').tween('height',maxHeight); }).delay(10000);
		(function(){ $('con3').tween('width',minWidth); }).delay(11000);
		(function(){ $('con3').tween('height',minHeight); }).delay(12000);
		
		(function(){ $('con4').tween('width',maxWidth); }).delay(13000);
		(function(){ $('con4').tween('height',maxHeight); }).delay(14000);
		(function(){ $('con4').tween('width',minWidth); }).delay(15000);
		(function(){ $('con4').tween('height',minHeight); }).delay(16000);
		(function(){ Pock() }).delay(17000);
		
	};
});
	

window.addEvent('domready', function() {
	if(Browser.Engine.trident4) {
	
		$('win1').setStyle('background-image','url(img/win_compas_on_01.jpg)');
		$('win2').setStyle('background-image','url(img/win_compas_on_02.jpg)');
		$('win3').setStyle('background-image','url(img/win_compas_on_03.jpg)');
		$('win4').setStyle('background-image','url(img/win_compas_on_04.jpg)');
		
	};
	
	// $(document.body).setStyle('opacity','0');
	$('tableTop').setStyle('opacity','0');
	$('tableBottom').setStyle('opacity','0');
	//$(document.body).setStyle('visibility','visible');
	
	var userLocation = 'Start';
	
	$('con1').getElement('table').set('morph', {duration: 'short', transition: 'sine:out'});
	$('con2').getElement('table').set('morph', {duration: 'short', transition: 'sine:out'});
	$('con3').getElement('table').set('morph', {duration: 'short', transition: 'sine:out'});
	$('con4').getElement('table').set('morph', {duration: 'short', transition: 'sine:out'});
						
	
	
	function startMe() {
	
		$("menuBlock").getElement('a[id=' + userLocation + ']').getElement('img').set('src','img/' + userLocation + '_out.gif');
		var restoreFrame = $("menuBlock").getElement('a[id=' + userLocation + ']').getElement('img').get('alt');
		var restoreTable = $('con' + restoreFrame).getElement('table');
		restoreTable.setStyle('height', restoreTable.getStyle('height').toInt());
		restoreTable.setStyle('width', restoreTable.getStyle('width').toInt());
		$('de' + restoreFrame).set('text','');
		restoreTable.morph({height: 100, width: 100,  opacity: 0});
		$('win1').tween('height', '300');
		$('win2').tween('height', '300');
		userLocation = 'Start';	
	};
	
	$('menuLogo').addEvents({
		"click": function(event) { 
			event.stop();
			if (userLocation != 'Start') {
				startMe();
			
			}
		}
	});
	
	
	
	$$("#menuBlock a").each(function(element, index){
		
		element.addEvents({
			"mouseenter": function(el, obj){
				this.getElement('img').set('src','img/' + this.get('id') + '_over.gif');
			},
			"mouseleave": function(el, obj){
				if (userLocation != this.get('id')) { 
					this.getElement('img').set('src','img/' + this.get('id') + '_out.gif');
				};
			},
			"click": function(event) { 
				event.stop();
				if (this.get('id') != userLocation) {
					
					var refreshFrame = this.getElement('img').get('alt');
					var updateFrame  = $('de' + refreshFrame);
					
					if (userLocation != 'Start') {
						// set recent location to OUT
						$("menuBlock").getElement('a[id=' + userLocation + ']').getElement('img').set('src','img/' + userLocation + '_out.gif');
						var restoreFrame = $("menuBlock").getElement('a[id=' + userLocation + ']').getElement('img').get('alt');
						var restoreTable = $('con' + restoreFrame).getElement('table');
						restoreTable.set('morph', {duration: 'short', transition: 'sine:in'});
						$('de' + restoreFrame).set('text','');
						restoreTable.setStyle('height', restoreTable.getStyle('height').toInt());
						restoreTable.setStyle('width', restoreTable.getStyle('width').toInt());
						$('win' + restoreFrame).tween('height', '40');
						restoreTable.morph({height: 50, width: 50,  opacity: 0});
						//restoreTable.setStyle('background-color','transparent');
						// restoreTable.setStyle('overflow','hidden');
						var oldCanvas = $('con' + restoreFrame).getElement('table');
						
					} else {
					
						$('win1').tween('height', '150');
						$('win2').tween('height', '150');
					}
					$('win1').tween('height', '40');
					var Canvas = $('con' + refreshFrame).getElement('table');
					Canvas.set('morph', {duration: 300, transition: 'sine:out'});
					//updateFrame.setStyle('background-color','white');
					
					userLocation = this.get('id');
					// alert(userLocation);
					
					var req = new Request.HTML({  
						method: 'get',
						chain: 'link',
						url: this.get('href'),
						noCache:true,
						data: { 'do' : '1' },  
						onRequest: function() { 
							//updateFrame.set('text','');
							updateFrame.setStyle('opacity','0');
                            updateFrame.setStyle('background-color','transparent');
						},
						update: updateFrame,
						onComplete: function(response) {
							//updateFrame.morph('opacity','1.0');
							//updateFrame.morph('.contentHolderOpen');
							Canvas.setStyle('width', '50');
							Canvas.setStyle('height', '50');
                            Canvas.setStyle('background-color','white');
							Canvas.tween('opacity','1.0');
							if (refreshFrame == 3) {
								Canvas.setStyle('left', '0');
								if(Browser.Engine.trident4) {
									Canvas.morph({width: 600});
								} else {
									Canvas.morph({width: 600, left:-460});
								}
							} else {
								Canvas.morph({width: 600});
							}
							updateFrame.setStyle('width','580');
							(function(){ $(updateFrame).tween('opacity','1.0'); }).delay(300);
							//$('de' + refreshFrame).setStyle('width','600');
							
						}
						
					}).send();
				}
			}
			
		});
		
	});
	
	
	
	function openMenu(id, refreshFrame, href) {
        $("menuBlock").getElement('a[id='+ id +']').getElement('img').set('src','img/'+ id +'_over.gif');
	    var updateFrame  = $('de' + refreshFrame);
        $('win1').tween('height', '40');
        var Canvas = $('con' + refreshFrame).getElement('table');
        Canvas.set('morph', {duration: 300, transition: 'sine:out'});
        
        userLocation = id;
        
        var req = new Request.HTML({  
            method: 'get',  
            url: href,
            noCache: true,
            data: { 'do' : '1' },  
            onRequest: function() { 
                updateFrame.setStyle('opacity','0');
                updateFrame.setStyle('background-color','transparent');
            },
            update: updateFrame,
            onComplete: function(response) {
                Canvas.setStyle('width', '50');
                Canvas.setStyle('height', '50');
                Canvas.setStyle('background-color','white');
                Canvas.tween('opacity','1.0');
                if (refreshFrame == 3) {
                    Canvas.setStyle('left', '0');
                    if(Browser.Engine.trident4) {
                        Canvas.morph({width: 600});
                    } else {
                        Canvas.morph({width: 600, left:-460});
                    }
                } else {
                    Canvas.morph({width: 600});
                }
                updateFrame.setStyle('width','580');
    
                (function(){ $(updateFrame).tween('opacity','1.0'); }).delay(300);
                
                
            }
            
        }).send();
	}
	
	//////////////////////////////////////////////////////////////////////////////////
	//
	//		AUTO START ... HIER ONDER !
	//
	//////////////////////////////////////////////////////////////////////////////////
	
	    
    // open portfolio in 1.5 secs
	 (function(){ openMenu('M_portfolio','3','pages/portfolio.html'); }).delay(1500);
	
	//////////////////////////////////////////////////////////////////////////////////
	//
	//		AUTO START ... HIER BOVEN !
	//
	//////////////////////////////////////////////////////////////////////////////////
	
	$('menuLogo').addEvent('click', function(event){
  		event.stop();
  		 if (userLocation != 'Start') {
			startMe();
		}
	});
	
	
	
	
	
});