var currentPage = 0;
var currentVideo = -1;
var workOpen = false;

function setOpacity ()
{
	
var work_button = $('sidebar').getElement('ul').getElement('li.green');
var showreel_button = $('sidebar').getElement('ul').getElement('li.orange');
var about_button = $('sidebar').getElement('ul').getElement('li.blue');
var contact_button = $('sidebar').getElement('ul').getElement('li.pink');
	
	work_button.setStyles({ 'opacity':0 });
	showreel_button.setStyles({ 'opacity':0 });
	about_button.setStyles({ 'opacity':0 });
	contact_button.setStyles({ 'opacity':0 });
	


};

function setOpacityZero (element)
{
	element.setStyles({ 'opacity':0 });
};

function setOpacityOne (element)
{
	element.setStyles({ 'opacity':1 });
};

function siteLoad ()
{
	var new_id = gup('id');
	if (new_id != "" && parseInt(new_id) < 6)
	{
		if (parseInt(new_id) == 5)
		{
			var video_id = gup('video');
			if (video_id != "")
			{
				playVideo(parseInt(video_id));
			}
			else openContent(1);
		}
		else openContent(parseInt(new_id));
	}
	else 
	{
		setTimeout("showBoxes()",600);
		document.location.href = "http://www.framebender.dk/index.php#";
	}
	setTimeout("showMenu()",800);
	
	
};

function fadeElementIn (element)
{
	element.set('morph', { duration: 300, transition: 'sine:out' });
	element.morph({ 'opacity':[0,1] });
};

function fadeElementOut (element)
{
	element.set('morph', { duration: 100, transition: 'sine:out' });
	element.morph({ 'opacity':[1,0] });
};


function openContent(id)
{
	if (id != currentPage)
	{
		var filename;
		switch(id)
		{
			case 1:
			animateWork();
			filename = "work.php?id=0";
			break;
			case 2:
			animateShowreel();
			filename = "video.php?id=-1";
			break;
			case 3:
			animateAbout();
			filename = "about.php";
			break;
			case 4:
			animateContact();
			filename = "contact.php";
			break;
		};
		loadPage(filename);
		currentPage = id;
		document.location.href = "http://www.framebender.dk/index.php#?id="+currentPage;
	};
	
};

function loadVideo(url)
{
	
};

function loadPage(filename)
{
	
	fadeElementOut($('content').getElements('div'));
	
	
	new Request.HTML({
	url: filename,
	method: 'get',
	update: 'content',
	evalScripts: true, /* this is the default */
	onComplete: function(){
			
			/*if (currentPage == 2) {
				setOpacityOne($('content').getElements('div'));
			}
			else 
			{*/
				setOpacityZero($('content').getElements('div'));
				setTimeout(function() {fadeElementIn($('content').getElements('div'));}, 1000);
				
			//}
			//fadeElementIn($('content').getElements('div'));
		}
	}).send();
	
};

function showBoxes ()
{
								 
	$('green').set('morph', {
		duration: 400,
		transition: Fx.Transitions.Elastic.easeOut
	});
	$('green').morph({
		'left':345,
		'top':295,
		'width':50,
		'height':34,
		'opacity':1
	});
	
	$('orange').set('morph', {
		duration: 600,
		transition: Fx.Transitions.Elastic.easeOut
	});
	$('orange').morph({
		'left':405,
		'top':295,
		'width':50,
		'height':34,
		'opacity':1
	});
	
	$('blue').set('morph', {
		duration: 800,
		transition: Fx.Transitions.Elastic.easeOut
	});
	$('blue').morph({
		'left':345,
		'top':355,
		'width':50,
		'height':34,
		'opacity':1
	});
	
	$('pink').set('morph', {
		duration: 1000,
		transition: Fx.Transitions.Elastic.easeOut
	});
	$('pink').morph({
		'left':405,
		'top':355,
		'width':50,
		'height':34,
		'opacity':1
	});
								 
};

function showMenu ()
{
	
	var menuChain = new Chain();
	
var work_button = $('sidebar').getElement('ul').getElement('li.green');
var showreel_button = $('sidebar').getElement('ul').getElement('li.orange');
var about_button = $('sidebar').getElement('ul').getElement('li.blue');
var contact_button = $('sidebar').getElement('ul').getElement('li.pink');

	work_button.set('morph', { duration: 150, transition: 'sine:out', onComplete:function(){ menuChain.callChain() } });
	
	showreel_button.set('morph', { duration: 150, transition: 'sine:out', onComplete:function(){ menuChain.callChain() } });
	
	about_button.set('morph', { duration: 150, transition: 'sine:out', onComplete:function(){ menuChain.callChain() } });
	
	contact_button.set('morph', { duration: 150, transition: 'sine:out', onComplete:function(){ menuChain.callChain() } });
	
	menuChain.chain(
	function(){work_button.morph({ 'opacity':[0,1] })},
	function(){showreel_button.morph({ 'opacity':[0,1] })},
	function(){about_button.morph({ 'opacity':[0,1] })},
	function(){contact_button.morph({ 'opacity':[0,1] })}
	);
	
	(function(){menuChain.callChain();}).delay(0);
};

function animateShowreel ()
{
	var animchain = new Chain();
	var trans = new Fx.Transition(Fx.Transitions.Elastic,0.2);
	var startDuration = 300;
	var start = function () {
		$('orange').set('morph', {
		duration: startDuration,
		transition: trans.easeOut,
		link: 'chain',
		onComplete: function () { animchain.callChain() }
		});
		$('orange').morph({
			'left':405,
			'top':100,
			'height':34,
			'width':50,
			'opacity':1
		});
		$('blue').set('morph', {
		duration: startDuration,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('blue').morph({
			'top':160,
			'left':345,
			'width':50,
			'height':34,
			'opacity':1
		});
		$('pink').set('morph', {
		duration: startDuration,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('pink').morph({
			'top':160,
			'left':405,
			'width':50,
			'height':34,
			'opacity':1
		});
		$('green').set('morph', {
		duration: startDuration,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('green').morph({
			'top':100,
			'left':345,
			'width':50,
			'height':34,
			'opacity':1
		})
	};
	
	var end = function () {
		trans = new Fx.Transition(Fx.Transitions.Elastic, 0.4);
		$('orange').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('orange').morph({
		'left':180,
		'top':100,
		'width':500,
		'height':34
		}).morph({
		'height':330
		});
	
		$('blue').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('blue').morph({
		'left':180,
		'top':160
		}).morph({
		'left':180,
		'top':455
		});
	
		$('pink').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('pink').morph({
		'left':630,
		'top':160
		}).morph({
		'left':630,
		'top':455
		});
	
		$('green').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
		});
		$('green').morph({
		'left':0,
		'top':100,
		'width':170
		}).morph({
		'left':0,
		'top':100,
		'height':110
		});
	};
	animchain.chain(start);
	animchain.chain(end);
	animchain.callChain();
};

function animateWork ()
{
	var trans = new Fx.Transition(Fx.Transitions.Elastic,0.2);
	$('orange').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('orange').morph({
		'left':305,
		'top':445,
		'height':34,
		'width':50,
		'opacity':1
	}).morph({
		'left':555
	});
	
	$('blue').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('blue').morph({
		'top':505,
		'left':245,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'left':445,
		'width':100,
		'height':34
	}).morph({
		'height':84
	});
	
	$('pink').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('pink').morph({
		'top':505,
		'left':305,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'left':555,
	}).morph({
	});
	
	$('green').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('green').morph({
		'top':445,
		'left':245,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'width':300,
		'height':34
	}).morph({
		'top':135,
		'height':344
	});
};

function animateAbout ()
{
	var pinkbounce = function () {
		$('pink').set('morph', {
			duration: 200,
			transition: Fx.Transitions.Circ.easeOut,
			link: 'chain',
			onComplete: function () {
				$('pink').set('morph', {
					duration: 300,
					transition: Fx.Transitions.Bounce.easeOut,
					link: 'chain'						
				});
				$('pink').morph({
					'top':41,
					'left':535,
					'height':70
				});
			}
		});
		$('pink').morph({
			'top':11,
			'left':535,
			'height':70
		});
	};
	var trans = new Fx.Transition(Fx.Transitions.Elastic,0.3);
		$('orange').set('morph', {
		duration: 300,
		transition:trans.easeOut,
		link: 'chain'
	});
	$('orange').morph({
		'left':405,
		'top':295,
		'height':34,
		'width':50,
		'opacity':1
	}).morph({
		'left':180,
		'top':135,
		'width':480,
		'height':100
	});
	
	$('blue').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('blue').morph({
		'top':355,
		'left':345,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'top':260,
		'left':220,
		'width':400,
		'height':279
	});
	
	$('pink').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain',
		onComplete:pinkbounce
	});
	$('pink').morph({
		'top':235,
		'left':405,
		'width':50,
		'height':34,
		'opacity':1
	});
	
	$('green').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('green').morph({
		'top':415,
		'left':345,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'top':565,
		'left':130,
		'height':12,
		'width':580
	});
};

function animateContact ()
{
	var trans = new Fx.Transition(Fx.Transitions.Elastic,0.2);
	$('orange').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('orange').morph({
		'left':300,
		'top':480,
		'height':34,
		'width':50,
		'opacity':1
	}).morph({
		'width':200
	}).morph({
		'top':430,
		'height':84
	});
	
	$('pink').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('pink').morph({
		'top':360,
		'left':300,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'width':200
	}).morph({
		'top':190,
		'height':164
	});
	
	$('blue').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('blue').morph({
		'top':420,
		'left':300,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'width':200
	}).morph({
		'top':380,
		'height':24
	});
	
	$('green').set('morph', {
		duration: 300,
		transition: trans.easeOut,
		link: 'chain'
	});
	$('green').morph({
		'top':300,
		'left':300,
		'width':50,
		'height':34,
		'opacity':1
	}).morph({
		'left':470,
		'width':30
	}).morph({
		'top':130
	});
};

function playVideo(id)
{
	animateShowreel();
	loadPage("video.php?id="+id);
	currentPage = 5;
	currentVideo = id;
	document.location.href = "http://www.framebender.dk/index.php#?id="+currentPage+"&video="+currentVideo;
}

function loadWorkList(id)
{
	loadPage("work.php?id="+id);
}

function loadVideo(id)
{
	loadPage("video.php?id="+id);
	currentVideo = id;
	document.location.href = "http://www.framebender.dk/index.php#?id="+currentPage+"&video="+currentVideo;
}

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

window.addEvent('domready',setOpacity);
window.addEvent('load',siteLoad);