var Navigation = new Class
({
	// Implementation
	Implements: [Options],

	// Options
	options:
	{
		menuFxTransition: Fx.Transitions.Sine.easeOut,
		menuFxDuration: 600
	},

	// Initialize
	initialize: function(options)
	{
		// Set options
		this.setOptions(options);

		// Objects
		this.active = 0;

		// Create an array of expanded containers, make loop and fill array
		this.expand = new Array();

		this.options.expand.each(function(item, index)
		{
			this.expand[index] = item;
		}.bind(this));

		// Fire functions
		this.setup();
	},

	setup: function()
	{
		var buttonsX = new Array();
		var buttonsY = new Array();

		this.options.menu.each(function(item, index)
		{
			item.removeEvents();

			buttonsX[index] = index * (-170);
			buttonsY[index] = -850 + (index * (-170));

			item.setStyle('background-position', buttonsX[index] + 'px 0');

			item.addEvents
			({
				'mouseover': function()
				{
					if(/msie|MSIE 6/.test(navigator.userAgent))
					{
						item.setStyle('background-position', buttonsX[index] + 'px 0');
					}
					else
					{
						item.setStyle('background-position', buttonsY[index] + 'px 0');
					}
				}.bind(this),

				'mouseleave': function()
				{
					item.setStyle('background-position', buttonsX[index] + 'px 0');
					
				}.bind(this)
			});

			item.addEvent('mouseover', function()
			{
				this.active = 1;
				this.remove();
				item.removeEvents();
				this.enable(item, this.expand[index], buttonsX[index], buttonsY[index]);
			}.bind(this));


		}.bind(this));

		$('header').removeEvents();

		delete buttonsX;
		delete buttonsY;
	},

	enable: function(menu, expand, link, hover)
	{
		if(this.morph)
		{
			this.morph.cancel();
			this.morph.removeEvents();
		}

		this.morph = new Fx.Morph(expand, {duration: this.options.menuFxDuration, transition: this.options.menuFxTransition});

		this.setup();

		if(/msie|MSIE 6/.test(navigator.userAgent))
		{
			menu.setStyle('background-position', link + 'px 0');
		}
		else
		{
			menu.setStyle('background-position', hover + 'px 0');
		}

		menu.setStyle('background-position', hover + 'px 0');

		this.morph.start({'opacity': [0, 1]});

		expand.addEvents
		({
			'mouseenter': function()
			{
				if(/msie|MSIE 6/.test(navigator.userAgent))
				{
					menu.setStyle('background-position', link + 'px 0');
				}
				else
				{
					menu.setStyle('background-position', hover + 'px 0');
				}

			}.bind(this),

			'mouseleave': function()
			{
				this.active = 0;

				if(expand.getStyle('opacity') == 1)
				{
					this.morph.start({'opacity': [1, 0]});
				}
				else
				{
					this.morph.cancel();
					expand.setStyle('opacity', 0);
				}

				menu.setStyle('background-position', link + 'px 0');


			}.bind(this)

		});

		$('header').addEvent('mouseleave', function()
		{
			this.active = 0;

				if(expand.getStyle('opacity') == 1)
				{
					this.morph.start({'opacity': [1, 0]});
				}
				else
				{
					this.morph.cancel();
					expand.setStyle('opacity', 0);
				}

				menu.setStyle('background-position', link + 'px 0');
		}.bind(this));
	},

	remove: function()
	{
		this.options.expand.each(function(item)
		{
			item.setStyle('opacity', '0');
		});
	}

});

// Instance
window.addEvent('domready', function()
{
	new Navigation
	({
		menu: $('menu').getElements('a'),
		expand: $$('#expand' + ' div div.expand')
	});
});