var startHeight = '315px'; //'327px';
var maximHeight = '338px'; //'350px';

//#f46

var leftDark = /*'#2e3777'; //'#94374c'; //*/'#2a2a33';
var leftMean = /*'#3f4888'; //'#a5485d'; //*/'#4c4c55';//'#bb8811';
var leftLite = /*'#5961a1'; //*/'#df526e'; //'#7f7f88';

var rightLite = /*'#6a72aa'; //'#d0727f'; //*/'#a1a199';
var rightMean = /*'#596199'; //'#bf616e'; //'#7f7f77';*/'#eebb00';
var rightDark = /*'#3f487f'; //'#a54855'; //*/'#4c4c44';

var portfolioList = '<ul>Please make a selection:<li><a href="http://www.mark-silver.com/portfolio/">Design</a></li><li><a id="digital" href="javascript:;" onmouseover="comingDigital(0);" onmouseout="comingDigital(1);">Digital</a></li><li><a id="music" href="javascript:;" onmouseover="comingMusic(0);" onmouseout="comingMusic(1);">Music</a></li><br><li><a id="optionsclose" onclick="clearOptions();">[x]</a></li></ul>';
var resumeForm= '<div id="signin"><p>Please enter the key below.</p><br><form name="form1" onsubmit="javascript:return false;"><input type="text" name="key"/></form><br><a id="submitkey" href="javascript:pseudoLink();">[ok]</a><a id="cancelthis" href="javascript:clearOptions();">[x]</a></div>';

function pseudoLink() {
	window.location = 'resume.php?key=' + document.form1.key.value;
}

function clearOptions() {
	$('options').innerHTML = '';
	$('leftspan').style.backgroundColor = '#6db';
	$('leftspan').style.borderColor = '#6db';
	$('rightspan').style.backgroundColor = '#6db';
	$('rightspan').style.borderColor = '#6db';
}

function comingDigital(opsh) {
	if (opsh == 0) {
		$('digital').innerHTML = 'coming soon';
	} else {
		$('digital').innerHTML = 'Digital';
	}
}

function comingMusic(opsh) {
	if (opsh == 0) {
		$('music').innerHTML = 'coming soon';
	} else {
		$('music').innerHTML = 'Music';
	}
}

window.addEvent('domready', function() {

	var morphleft = new Fx.Morph('leftimg', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphright = new Fx.Morph('rightimg', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphbox = new Fx.Morph('box', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var lcolor = new Fx.Morph('left', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var rcolor = new Fx.Morph('right', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphcanvas = new Fx.Morph('canvas', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphlspan = new Fx.Morph('leftspan', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphrspan = new Fx.Morph('rightspan', {link: 'cancel', duration: 'long', transition: Fx.Transitions.Circ.easeOut});
	var morphh1 = new Fx.Morph('head1', {link: 'cancel', duration: 'short', transition: Fx.Transitions.Sine.easeIn});
	
	Element.Events.specialmouseenter = {
		base: 'mouseover', //we set a base type
		condition: function(e){ //and a function to perform additional checks.
			return (true); //this means the event is free to fire
		}
	};
	
	
	$('right').addEvent('mouseenter', function(e) {
		e.stop();
		morphleft.start({
			width: '188px',
			height: '87px'
		});
		morphright.start({
			width: '188px',
			height: '87px'
		});
		morphbox.start({
			width: '376px',
			height: maximHeight
		});
		lcolor.start({
			backgroundColor: leftMean,
			height: maximHeight,
			marginTop: '0'
		});
		rcolor.start({
			backgroundColor: rightMean,
			height: maximHeight,
			marginTop: '0'
		});
		morphcanvas.start({
			marginTop: '27px'
		});
		morphrspan.start({
			backgroundColor: '#6db'
		});
		morphh1.start({
			backgroundColor: '#3f4888',
			letterSpacing: '0px',
			zIndex: '12'
		});
	});
	$('right').addEvent('mouseleave', function(e) {
		e.stop();
		morphleft.start({
			width: '11px',
			height: '94px'
		});
		morphright.start({
			width: '289px',
			height: '22px'
		});
		morphbox.start({
			width: '300px',
			height: startHeight
		});
		lcolor.start({
			backgroundColor: leftDark,
			height: startHeight,
			marginTop: '0'
		});
		rcolor.start({
			backgroundColor: rightLite,
			height: startHeight,
			marginTop: '0'
		});
		morphcanvas.start({
			marginTop: '50px'
		});
		morphrspan.start({
			//backgroundColor: '#bdf',
			//borderWidth: '.5px',
			//borderColor: '#bdf'
		});
	});
	
	$('left').addEvent('specialmouseenter', function(e) {
		e.stop();
		morphleft.start({
			width: '289px',
			height: '22px'
		});
		morphright.start({
			width: '11px',
			height: '94px'
		});
		morphbox.start({
			width: '376px',
			height: maximHeight
		});
		lcolor.start({
			backgroundColor: leftLite,
			height: maximHeight,
			marginTop: '0'
		});
		rcolor.start({
			backgroundColor: rightDark,
			height: startHeight,
			marginTop: '23px'
		});
		morphcanvas.start({
			marginTop: '27px'
		});
		morphrspan.start({
			backgroundColor: '#6db'
		});
		morphlspan.start({
			//backgroundColor: '#fff',
			//borderWidth: '2px',
			//borderColor: '#34b'
		});
		morphh1.start({
			backgroundColor: '#3f4888',
			letterSpacing: '0px',
			zIndex: '12'
		});
	});
	$('left').addEvent('mouseleave', function(e) {
		e.stop();
		morphleft.start({
			width: '11px',
			height: '94px'
		});
		morphright.start({
			width: '289px',
			height: '22px'
		});
		morphbox.start({
			width: '300px',
			height: startHeight
		});
		lcolor.start({
			backgroundColor: leftDark,
			height: startHeight
		});
		rcolor.start({
			backgroundColor: rightLite,
			height: startHeight,
			marginTop: '0'
		});
		morphcanvas.start({
			marginTop: '50px'
		});
		morphlspan.start({
			//backgroundColor: '#bdf',
			//borderWidth: '.5px',
			//borderColor: '#bdf'
		});
	});
	$('right').addEvent('click', function(e) {
		e.stop();
		morphleft.start({
			width: '11px',
			height: '94px'
		});
		lcolor.start({
			backgroundColor: leftDark,
			height: startHeight,
			marginTop: '23px'
		});
		morphlspan.start({
			backgroundColor: '#676',
			borderColor: '#333'
		});
		$('options').innerHTML = portfolioList;
	});
	$('left').addEvent('click', function(e) {
		e.stop();
		morphleft.start({
			width: '300px',
			height: '0px'
		});
		morphright.start({
			width: '1px',
			height: '300px'
		});
		lcolor.start({
			backgroundColor: '#f46',
			height: '300px'
		});
		morphrspan.start({
			backgroundColor: '#676',
			borderColor: '#333'
		});
		$('options').innerHTML = resumeForm;
		var morphsignin = new Fx.Morph('signin');
		morphsignin.set({
			backgroundColor: '#f46'
		});
	});
	$('leftspan').addEvent('mouseenter', function(e) {
		e.fire();
	});
	$('leftspan').addEvent('mouseleave', function(e) {
		e.stop();
	});
});