var marginChange1;
var marginChange2;
var marginChange3;
var marginChange4;

function isMouseLeaveOrEnter(e, handler) {
	if (e.type != 'mouseout' && e.type != 'mouseover')
		return false;
	var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
	while (reltg && reltg != handler)
		reltg = reltg.parentNode; return (reltg != handler); 
}
function OnLoad() {
	marginChange1 = $('Screen1').effects({duration: 500, transition: Fx.Transitions.sineInOut});
	marginChange2 = $('Screen2').effects({duration: 500, transition: Fx.Transitions.sineInOut});
	marginChange3 = $('Screen3').effects({duration: 500, transition: Fx.Transitions.sineInOut});
	marginChange4 = $('Screen4').effects({duration: 500, transition: Fx.Transitions.sineInOut});	
}
function MouseOn(element, event, object) {
	if (!isMouseLeaveOrEnter(event, object))
		return;		
	var marginChange = GetFx(element);
	marginChange.stop();
	marginChange.start({'margin-top': [0]});
}
function MouseOut(element, event, object) {
	if (!isMouseLeaveOrEnter(event, object))
		return;		
	var marginChange = GetFx(element);
	marginChange.stop();
	marginChange.start({'margin-top': [232]});	
}
function GetFx(element) {
	var marginChange;
	switch(element) {
		case "Screen1":
			marginChange = marginChange1;
			break;
		case "Screen2":
			marginChange = marginChange2;
			break;
		case "Screen3":
			marginChange = marginChange3;
			break;
		case "Screen4":
			marginChange = marginChange4;
			break;	
	}	
	return marginChange;
}
