//GLOBAL ELEMENT FADING FUNCTION (TRANSPARANCY ON MOUSEOVER)

var elFade = {
	timeout : null,
	elFadeOut : function(elementid){
		clearTimeout(this.timeout);
		this.timeout = setTimeout(function(){new Effect.Opacity(elementid, {duration:.2, from: 1, to: .6})},100);
		//set timeout for clean transition
	},
	elFadeIn : function(elementid){
			clearTimeout(this.timeout);
			new Effect.Opacity(elementid, {
			duration: 0.2, 
			from: 0.6, 
			to: 1
			});
	}
}

//USER LOGIN FUNCTIONS (SLIDING DIV EFFECTS)

var loginFlag = false;

function myCallBackOnFinish(){ //fades in login content
	new Effect.Opacity('login-content', {
		duration: 0.5,
		from: 0,
		to:1.0
	});
}

function myCallBackOnStart(){ //fades out login content
	new Effect.Opacity('login-content', {
		duration: 0.5,
		from: 1,
		to:0,
		afterFinish: finishHide //calls function to shrinks login div 
	});
}

function finishHide(){ //shrink login div
	Element.removeClassName('login-toggle', 'active');//change direction of arrow on login button
	new Effect.Scale('container-login', .5, { 
		duration: .2,
		transition: Effect.Transitions.slowsto,
		scaleY: true,
		scaleX: false,
		scaleContent: false
	}); 
	loginFlag = false;
}

function showhidelogin(){	
	if(!loginFlag){//checks to see whether div is open or closed
		$('login-toggle').morph('active', {duration: .1});//change direction of arrow on login button
		new Effect.Scale('container-login', 15000, {
			duration: .2,
			transition: Effect.Transitions.slowsto,
			scaleY: true,
			scaleX: false,
			scaleContent: false,
			afterFinish: myCallBackOnFinish
		});
		loginFlag = true;
	}else{
		myCallBackOnStart();//call to fade content & shrink div
	}
}