var MenuSlider = Class.create({
	initialize: function(_classStyle) {
		MenuSlider.instances.push(this);
		this.classStyle = _classStyle;
		this.refresh();
    },
	
	refresh: function () {
		$$('li.' + this.classStyle + ' a').each(function(node) {
			var _node = $(node);
			var _inner = _node.innerHTML;
			_node.innerHTML = '<span class="out" style="top: 0px;">' + _inner + '</span>';
			_node.insert( '<span class="bg" style="top: -28px;"></span>' );
			_node.insert( '<span class="over" style="top: -28px;">' + _inner + '</span>' );
			
			_node.observe('mouseenter', function() {
				this.select('.out')[0].morph('top: 28px;', {duration: 0.25});
				this.select('.over')[0].morph('top: 0px;', {duration: 0.25});
				this.select('.bg')[0].morph('top: 0px;', {duration: 0.13});
			}.bind(_node));
			_node.observe('mouseleave', function() {
				this.select('.out')[0].morph('top: 0px;', {duration: 0.25});
				this.select('.over')[0].morph('top: -28px;', {duration: 0.25});
				this.select('.bg')[0].morph('top: -28px;', {duration: 0.13});
			}.bind(_node));
        });
	}
});

Object.extend(MenuSlider,{
    instances: [],
    findByElementId: function(id){
        return MenuSlider.instances.find(function(instance){
            return (instance.container.id && instance.container.id == id);
        });
    }
});
/*
(function($) {
	$.fn.menu = function (options) {
		var defaults = {
			font: 14,
			width: 110,
			height: 45,
			type: 'horizontal',
			image: 'image'
		};
		var opts = $.extend($.fn.menu.defaults, options);

		return this.each(function () {
			$(this).css('height', opts.height + 'px');

			$("li",	this).css({'line-height': opts.height + 'px', 'height': opts.height + 'px', 'float': opts.type == 'vertical' ? 'none' : 'left'});
			var _children = $("li a", this);
			_children.css({'height': opts.height + 'px', 'width': opts.width + 'px'});
			_children.wrapInner( '<span class="out" style="' + (opts.type == 'vertical' ? 'left' : 'top') + ': 0px;"></span>' )
			.append( '<span class="bg" style="' + (opts.type == 'vertical' ? 'left' + ': -' + opts.width : 'top' + ': -' + opts.height) + 'px;"></span>' );

			// loop each anchor and add copy of text content
			_children.each(function() {
				if ($(this).hasClass('on')) return;
				$( '<span class="over" style="' + (opts.type == 'vertical' ? 'left' + ': -' + opts.width : 'top' + ': -' + opts.height) + 'px;">' +  $(this).text() + '</span>' ).appendTo( this );
			});

			
			_children.bind('mouseenter', function() {
				if ($(this).hasClass('on')) return;
				// this function is fired when the mouse is moved over
				if (opts.type == 'horizontal') {
					$(".out",	this).stop().animate({'top':	opts.height + 'px'},	250); // move down - hide
					$(".over",	this).stop().animate({'top':	'0px'},		250); // move down - show
					$(".bg",	this).stop().animate({'top':	'0px'},		130); // move down - show
				} else {
					$(".out",	this).stop().animate({'left':	opts.width + 'px'},	250); // move down - hide
					$(".over",	this).stop().animate({'left':	'0px'},		250); // move down - show
					$(".bg",	this).stop().animate({'left':	'0px'},		130); // move down - show
				}
			});
			
			_children.bind('mouseleave', function() {
				if ($(this).hasClass('on')) return;
				// this function is fired when the mouse is moved off
				if (opts.type == 'horizontal') {
					$(".out",	this).stop().animate({'top':	'0px'},		250); // move up - show
					$(".over",	this).stop().animate({'top':	'-' + opts.height + 'px'},	250); // move up - hide
					$(".bg",	this).stop().animate({'top':	'-' + opts.height + 'px'},	130); // move up - hide
				} else {
					$(".out",	this).stop().animate({'left':	'0px'},		250); // move up - show
					$(".over",	this).stop().animate({'left':	'-' + opts.width + 'px'},	250); // move up - hide
					$(".bg",	this).stop().animate({'left':	'-' + opts.width + 'px'},	130); // move up - hide
				}
			});
		});
	};
})(jQuery);*/