window.addEvent('domready', function() { //Start script when DOM is ready
	
	//Declaring the animations
	var frame1Morph = new Fx.Morph($('frame1'), {duration: 'long', link: 'ignore', transition: Fx.Transitions.Sine.easeOut});
	var frame2Morph = new Fx.Morph($('frame2'), {duration: 'long', link: 'ignore', transition: Fx.Transitions.Sine.easeOut});
	var frame3Morph = new Fx.Morph($('frame3'), {duration: 'long', link: 'ignore', transition: Fx.Transitions.Sine.easeOut});
	var frame4Morph = new Fx.Morph($('frame4'), {duration: 'long', link: 'ignore', transition: Fx.Transitions.Sine.easeOut});
	
	var textleft1Tween = new Fx.Tween($('textleft1'), {property: 'left', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textleft2Tween = new Fx.Tween($('textleft2'), {property: 'left', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textleft3Tween = new Fx.Tween($('textleft3'), {property: 'left', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textleft4Tween = new Fx.Tween($('textleft4'), {property: 'left', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	
	var textright1Tween = new Fx.Tween($('textright1'), {property: 'right', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textright2Tween = new Fx.Tween($('textright2'), {property: 'right', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textright3Tween = new Fx.Tween($('textright3'), {property: 'right', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	var textright4Tween = new Fx.Tween($('textright4'), {property: 'right', duration: 'normal', link: 'cancel', transition: Fx.Transitions.Sine.easeIn});
	
	var sat1Tween = new Fx.Tween($('sat1'), {property: 'opacity', link: 'cancel', duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
	var sat2Tween = new Fx.Tween($('sat2'), {property: 'opacity', link: 'cancel', duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
	var sat3Tween = new Fx.Tween($('sat3'), {property: 'opacity', link: 'cancel', duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
	var sat4Tween = new Fx.Tween($('sat4'), {property: 'opacity', link: 'cancel', duration: 'normal', transition: Fx.Transitions.Sine.easeOut});
	
	//Variables for checking the state of the frame animations
	var set = false;
	var busy = false;
	var sat = 0;
	
	function drawSat() {
		switch (sat) {
			case 0:
				sat1Tween.start(0);
				sat2Tween.start(0);
				sat3Tween.start(0);
				sat4Tween.start(0);
				break;
			case 1:
				sat1Tween.start(0);
				sat2Tween.start(1);
				sat3Tween.start(1);
				sat4Tween.start(1);
				break;
			case 2:
				sat1Tween.start(1);
				sat2Tween.start(0);
				sat3Tween.start(1);
				sat4Tween.start(1);
				break;
			case 3:
				sat1Tween.start(1);
				sat2Tween.start(1);
				sat3Tween.start(0);
				sat4Tween.start(1);
				break;
			case 4:
				sat1Tween.start(1);
				sat2Tween.start(1);
				sat3Tween.start(1);
				sat4Tween.start(0);
				break;
		}
	}
	
	sat1Tween.set('opacity', '0');
	sat2Tween.set('opacity', '0');
	sat3Tween.set('opacity', '0');
	sat4Tween.set('opacity', '0');
	
	//Animation events when started/completed
	frame1Morph.addEvent('start', function() {
		sat1Tween.set('display', 'none');
		busy=true;
		if (set==false) {
			textleft1Tween.start(-200);
			textright1Tween.start(-200);
		}
	});	
	frame1Morph.addEvent('complete', function() {
		busy=false;
		if (set==false) {
			frame1Morph.set({'z-index': 1});
			sat1Tween.set('display', 'block');
			drawSat();
		}
		if (set==true) {
			textleft1Tween.start(0);
			textright1Tween.start(0);
		}
	});
	
	frame2Morph.addEvent('start', function() {
		sat2Tween.set('display', 'none');
		busy=true;
		if (set==false) {
			textleft2Tween.start(-200);
			textright2Tween.start(-200);
		}
	});
	frame2Morph.addEvent('complete', function() {
		busy=false;
		if (set==false) {
			frame2Morph.set({'z-index': 1});
			sat2Tween.set('display', 'block');
			drawSat();
			}
		if (set==true) {
			textleft2Tween.start(0);
			textright2Tween.start(0);
		}
	});
	
	frame3Morph.addEvent('start', function() {
		sat3Tween.set('display', 'none');
		busy=true;
		if (set==false) {
			textleft3Tween.start(-200);
			textright3Tween.start(-200);
		}
	});
	frame3Morph.addEvent('complete', function() {
		busy=false;
		if (set==false) {
			frame3Morph.set({'z-index': 1});
			sat3Tween.set('display', 'block');
			drawSat();
		}
		if (set==true) {
			textleft3Tween.start(0);
			textright3Tween.start(0);
		}
	});
	
	frame4Morph.addEvent('start', function() {
		sat4Tween.set('display', 'none');
		busy=true;
		if (set==false) {
			textleft4Tween.start(-260);
			textright4Tween.start(-260);
		}
	});
	frame4Morph.addEvent('complete', function() {
		busy=false;
		if (set==false) {
			frame4Morph.set({'z-index': 1});
			sat4Tween.set('display', 'block');
			drawSat();
		}
		if (set==true) {
			textleft4Tween.start(0);
			textright4Tween.start(0);
		}
	});
	
	//Frame events when clicked
	$('frame1').addEvent('click', function() {
		if (set==false && busy==false) {
			set=true;
			frame1Morph.set({'z-index': 2});
			frame1Morph.start({'width': [175, 700], 'background-position': ['-262px 0', '0 0']});
		} else if (set==true && busy==false) {
			set=false;
			frame1Morph.start({'width': [700, 175], 'background-position': ['0 0', '-262px 0']});
		}
	});
	$('frame2').addEvent('click', function() {
		if (set==false && busy==false) {
			set=true;
			frame2Morph.set({'z-index': 2});
			frame2Morph.start({'width': [175, 700], 'left': [175, 0], 'background-position': ['-262px 0', '0 0']});
		} else if (set==true && busy==false) {
			set=false;
			frame2Morph.start({'width': [700, 175], 'left': [0, 175], 'background-position': ['0 0', '-262px 0']});
		}
	});
	$('frame3').addEvent('click', function() {
		if (set==false && busy==false) {
			set=true;
			frame3Morph.set({'z-index': 2});
			frame3Morph.start({'width': [175, 700], 'left': [350, 0], 'background-position': ['-262px 0', '0 0']});
		} else if (set==true && busy==false) {
			set=false;
			frame3Morph.start({'width': [700, 175], 'left': [0, 350], 'background-position': ['0 0', '-262px 0']});
		}
	});
	$('frame4').addEvent('click', function() {
		if (set==false && busy==false) {
			set=true;
			frame4Morph.set({'z-index': 2});
			frame4Morph.start({'width': [175, 700], 'left': [525, 0], 'background-position': ['-262px 0px', '0 0px']});
		} else if (set==true && busy==false) {
			set=false;
			frame4Morph.start({'width': [700, 175], 'left': [0, 525], 'background-position': ['0 0px', '-262px 0px']});
		}
	});
	
	//Saturation effects
	$('frame1').addEvent('mouseover', function() {
		sat = 1;
		if (!busy) { drawSat(); }
	});
	$('frame1').addEvent('mouseout', function() {
		sat = 0;
		if (!busy) { drawSat(); }
	});
	
	$('frame2').addEvent('mouseover', function() {
		sat = 2;
		if (!busy) { drawSat(); }
	});
	$('frame2').addEvent('mouseout', function() {
		sat = 0;
		if (!busy) { drawSat(); }
	});

	$('frame3').addEvent('mouseover', function() {
		sat = 3;
		if (!busy) { drawSat(); }
	});
	$('frame3').addEvent('mouseout', function() {
		sat = 0;
		if (!busy) { drawSat(); }
	});
	
	$('frame4').addEvent('mouseover', function() {
		sat = 4;
		if (!busy) { drawSat(); }
	});
	$('frame4').addEvent('mouseout', function() {
		sat = 0;
		if (!busy) { drawSat(); }
	});
	
	/* JavaScript email address formatting to prevent spam crawlers from nicking them */
	$('email1').innerHTML = '<a href="mailto:contact@aerix.nl">contact@aerix.nl</a>';
	$('email2').innerHTML = '<a href="mailto:contact@aerix.nl">Contact</a>';
});