document.observe('dom:loaded', function()
{
	var nav = new CatNavigation();
});

var CatNavigation = Class.create(
{
	initialize: function()
	{		
		this.items = new Array();
	
		this.elements = $$('ul.nav li a');
		
		for (var i=0; i<this.elements.length; i++)
		{
			element = this.elements[i];
			
			this.items[this.items.length] = new CatNavigationItem(element);
		}
	}
});

var CatNavigationItem = Class.create(
{
	initialize: function(element)
	{
		this.element = element;
		
		try
		{
			var positions = this.element.getStyle('background-position').split(' ');
			
			if (positions == '')
			{
				throw new Exception();
			}
		}
		catch(e)
		{
			return false;
		}
		
		this.positionX = positions[0];
		this.positionY = positions[1];
		
		this.defaultStyles = this.positionY == '0px' ? {marginTop: '0px'} : {marginTop: '10px'};
		
		this.element.setStyle({backgroundPosition: this.positionX + ' 0'});
		this.element.setStyle(this.defaultStyles);
		
		this.addEvents();
	},
	
	addEvents: function()
	{	
		this.element.observe('mouseover', this.mouseIn.bind(this));
		this.element.observe('mouseout', this.mouseOut.bind(this));
	},
	
	mouseIn: function(event)
	{
		this.morphing = true;

		new Effect.Morph(this.element,
		{
			style: 'margin-top: 0px',
			duration: 0.2,
			afterFinish: function()
			{
				this.morphing = false;
				
				if (typeof pe != 'undefined')
				{
					pe.stop();
				}
			}.bind(this)
		});
	},
	
	mouseOut: function()
	{
		new PeriodicalExecuter(function(pe)
		{
			if (!this.morphing)
			{
				this.morphing = true;
			
				new Effect.Morph(this.element,
				{
					style: this.defaultStyles,
					duration: 0.2,
					afterFinish: function()
					{
						this.morphing = false;
						pe.stop();
					}.bind(this)
				});
			}
		}.bind(this), 0.1);
	}
});