window.addEvent('domready', function() {
	
	/* The initial colors of the form is set in the CSS, but it also needs to be set here */
	/* Form focus colors */
	var inputbgfocus = '#555';
	var inputtextfocus = '#fff';
	var inputborderfocus = '#555';
	/* Form normal state colors */
	var inputbg = '#212121';
	var inputtext = '#fff';
	var inputborder = '#656565';
	/* Video info */
	var videopath = 'http://cdn.row27.com/clients/osu/fb/iam.swf';
	var titlename = 'I am';
	var videowidth = 600;
	var fullscreen = true;
	var videoheight = 337;
	
	$('video').setHTML('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,28,0" width="'+ videowidth +'" allowFullScreen="'+ fullscreen +'" height="'+ videoheight +'" title="'+ titlename +'"> <param name="movie" value="'+ videopath +'" /> <param name="quality" value="high" /> <param name="bgcolor" value="#000000"> <param name="wmode" value="transparent" /> <embed src="'+ videopath +'" quality="high" bgcolor="#000000" pluginspage="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash" type="application/x-shockwave-flash" width="'+ videowidth +'" height="'+ videoheight +'" allowFullScreen="'+ fullscreen +'"></embed></object>');
	
	var sendform = $('sendform');
	var myspace = $('myspace');
	var sslider = new Fx.Slide('sslider', {duration: 500});
	var mslider = new Fx.Slide('mslider', {duration: 500});
	var shidden = true;
	var mhidden = true;
	sslider.hide();
	mslider.hide();
	var snone = function(){ sendform.setStyle('display', 'none'); }
	var mnone = function(){ myspace.setStyle('display', 'none'); }
	var sblock = function(){ sendform.setStyle('display', 'block'); }
	var mblock = function(){ myspace.setStyle('display', 'block'); }
	$('fwd').addEvent('click', function(e) {
		e = new Event(e).stop();
		if (mhidden == false){
			mslider.toggle();
			mhidden = true;
			sslider.toggle();
			shidden = false;
		} else if (shidden == false) { 
			sslider.toggle();
			shidden = true;
		} else { 
			sslider.toggle();
			shidden = false;
		}
			
	});
	$('mysp').addEvent('click', function(e) {
		e = new Event(e).stop();
		if (shidden == false){
			sslider.toggle();
			shidden = true;
			mslider.toggle();
			mhidden = false;
		} else if (mhidden == false) { 
			mslider.toggle();
			mhidden = true;
		} else { 
			mslider.toggle();
			mhidden = false;
		}
	});
	$('sclose').addEvent('click', function(e) {
		e = new Event(e).stop();
		sslider.toggle();
		shidden = true;								   
	});
	$('mclose').addEvent('click', function(e) {
		e = new Event(e).stop();
		mslider.toggle();
		mhidden = true;								   
	});
	var thisone = '.f2'
	var submheight = 130;
	var logheight = 133;
	var addheight = 175;
	$$('.f5, .f4, .f3, .f2').each(function(el){ el.setStyle('opacity', 0); });
	$('addanother').addEvent('click', function(e) {
		e = new Event(e).stop();
		if ( thisone == '.f5' ) {} else {
			addheight = addheight-37;
			logheight = logheight-37;
			submheight = submheight-37;
			$('add').effect('bottom', {duration: 500, wait:false}).start(addheight);
			$('log').effect('bottom', {duration: 500, wait:false}).start(logheight);
			$('subm').effect('bottom', {duration: 500, wait:false}).start(submheight);
		}
		if ( thisone == '.f2' ) {
			thisone = '.f3';
			$$('.f2').each(function(el){ el.effect('opacity', {duration: 500, wait:false}).start(1); });
		} else if( thisone == '.f3' ) {
			thisone = '.f4';
			$$('.f3').each(function(el){ el.effect('opacity', {duration: 500, wait:false}).start(1); });
		} else if( thisone == '.f4' ) {
			thisone = '.f5';
			$$('.f4').each(function(el){ el.effect('opacity', {duration: 500, wait:false}).start(1); });
		} else {
			$('add').effect('opacity', {duration: 500, wait:false}).start(0);
			$$('.f5').each(function(el){ el.effect('opacity', {duration: 500, wait:false}).start(1); });
		}
	});
	$('badge').setStyle('opacity', 0.3);
	$('badge').addEvent('mouseenter', function(){ this.effect('opacity', {duration: 500, wait:false}).start(1); });
	$('badge').addEvent('mouseleave', function(){ this.effect('opacity', {duration: 500, wait:false}).start(0.3); });
	$('sendtofriends').addEvent('submit', function(e) {
		e = new Event(e).stop();
		var log = $('log').empty();
		this.send({
			update: log
		});
	});
	var inputs = $$('input, textarea');
	inputs.each(function(el){
		var inputsfx = new Fx.Styles(el, {duration:200, wait:false});
		el.addEvent('focus', function(){
			inputsfx.start({'background-color': inputbgfocus, 'color': inputtextfocus, 'border-color': inputborderfocus});									
		});
		el.addEvent('blur', function(){
			inputsfx.start({'background-color': inputbg, 'color': inputtext, 'border-color': inputborder});									
		});
	});
	var sendbuttonfx = new Fx.Styles('subm', {duration:200, wait:false});
	$('subm').addEvent('mouseenter', function(){
		sendbuttonfx.start({'background-color': inputbgfocus, 'color': inputtextfocus});									
	});
	$('subm').addEvent('mouseleave', function(){
		sendbuttonfx.start({'background-color': inputbg, 'color': inputtext});									
	});
});