var Application = Class.create();

Application.BounceElement = Class.create({
	initialize: function(element){
		this.element = $(element);
		
		this.element.observe('mouseover', this.start.bindAsEventListener(this));
		this.element.observe('mouseout', this.stop.bindAsEventListener(this));
	},
	
	start: function(){
		new Effect.Morph(this.element, { 
			style: {
				marginTop: '-20px'
			},
			duration: 0.15,
			queue: {
				position: 'end',
				scope: this.element.identify()
			}
		});
	},
	
	stop: function(){
		new Effect.Morph(this.element, { 
			style: {
				marginTop: '0px'
			},
			duration: 0.25,
			queue: {
				position: 'end',
				scope: this.element.identify()
			}
		});
	}
});

Application.HoverOverlays = Class.create({
	initialize: function(element){
		this.element = $(element);
		
		this.overlay = this.element.cloneNode(true);
		
		this.overlay.addClassName('overlay');
		this.overlay.setOpacity(0);
		
		this.element.insert({ after: this.overlay });
		
		this.overlay.observe('mouseover', this.start.bindAsEventListener(this));
		this.overlay.observe('mouseout', this.stop.bindAsEventListener(this));
	},
	
	start: function(){
		new Effect.Opacity(this.overlay, { 
			to: 1,
			duration: 0.25,
			queue: {
				position: 'end',
				scope: this.element.identify()
			}
		});
	},
	
	stop: function(){
		new Effect.Opacity(this.overlay, { 
			to: 0,
			duration: 0.5,
			queue: {
				position: 'end',
				scope: this.element.identify()
			}
		});
	}
});

document.observe('dom:loaded', function(){
	$$('#footerNavigation li').each(function(element){
		new Application.BounceElement(element);
	});
	
	$$('#headerNavigation .menus a, #headerNavigation .calendar a, #headerNavigation .about a, #headerNavigation .contact a').each(function(element){
		new Application.HoverOverlays(element);
	});
});