var sysNavi = Class.create(
{
	initialize: function(parent, index, id, classNames, icon, text, pre, post, url, fancyAnimation)
	{
		this.index = index;
		this.parent = $(parent);
		this.id = id;
		this.classNames = classNames;
		this.icon = icon;
		this.text = text;
		this.pre = pre;
		this.post = post;
		this.url = url;
		this.fancyAnimation = fancyAnimation;

		this.animation = false;
		
		this.object = new Element('li');
		
		if(!url)
		{
			this.object.setStyle({
				backgroundColor: 'transparent',
				cursor: 'default'
			});
		}

		this.span = new Element('div', {
			'id'	: this.id
			}).addClassName(url ? 'item' : '');
		
		if(this.classNames !== "")
		{
			this.span.addClassName(this.classNames);
		}
		
		this.object.insert(this.span);

		if(this.url)
		{
			this.a = new Element('a', {
				'href'	: this.url,
				'title'	: this.text
				});
		}
		else
		{
			this.a = '';
		}
		
		if(this.icon)
		{
			this.iconSpan = new Element('div').addClassName('sys_icon');
			this.iconImg = new Element('img', {
				'src'	: theme_path + 'images/icons/' + this.icon,
				'alt'	: this.text
				});
			this.iconSpan.insert(this.iconImg);
			
			if(this.url)
			{
				this.a.insert(this.iconSpan);
			}
		}
		else
		{
			this.iconSpan = '';
		}
		
		this.textSpan = new Element('div', {
			'id'	: this.id + '_text'
			}).addClassName('sys_text');
		this.textSpan.insert(' ');
		this.textSpan.insert(this.text);

		this.preSpan = new Element('div', {}).addClassName('sys_pre');
		
		if(this.pre !== '')
		{
			this.preSpan.insert(this.pre + " ");
		}
		
		this.postSpan = new Element('div', {}).addClassName('sys_post');
		if(this.post !== '')
		{
			this.postSpan.insert(" " + this.post);
		}
		
		if(this.a)
		{
			this.a.insert(this.preSpan);
			this.a.insert(this.iconSpan);
			this.a.insert(this.textSpan);
			this.a.insert(this.postSpan);
			this.span.insert(this.a);
		}
		else
		{
			this.span.insert(this.preSpan);
			this.span.insert(this.iconSpan);
			this.span.insert(this.textSpan);
			this.span.insert(this.postSpan);
		}
		

		this.parent.insert(this.object);

		this.textSpan.hide();
		
		this.textSpan.object = this;

		if(this.a)
		{
			Event.observe(this.object, 'mouseout', this.offMouse.bind(this));
			Event.observe(this.object, 'widget:scheduledmouseout', this.offMouse.bind(this));
	
			Event.observe(this.object, 'mouseover', this.onMouse.bind(this));
			Event.observe(this.object, 'widget:scheduledmouseon', this.onMouse.bind(this));
		}
	},

	onMouse: function(event)
	{
		if(!this.fancyAnimation)
		{
			this.textSpan.show();
			return;
		}

		if(!this.mouseInContainer(event))
		{
			return;
		}

		if(this.animating)
		{
			
			clearTimeout(this.ontimer);
			this.ontimer = setTimeout('navis[' + this.index + '].object.fire("widget:scheduledmouseon")', 10);
			return;
		}

		clearTimeout(this.ontimer);
		
		this.animating = true;
				
		jQuery('#' + this.textSpan.identify()).show(sysNiceAnimationSpeed, this.doneAnimating.bind(this));
	},

	offMouse: function(event)
	{

		if(!this.fancyAnimation)
		{
			this.textSpan.hide();
			return;
		}
		
		if(this.mouseInContainer(event))
		{
			return;
		}
		
		if(this.animating)
		{
			clearTimeout(this.offtimer);
			this.offtimer = setTimeout('navis[' + this.index + '].object.fire("widget:scheduledmouseout")', sysNiceAnimationSpeed * 2);
			return;
		}

		clearTimeout(this.offtimer);
										
		this.animating = true;
		
		jQuery('#' + this.textSpan.identify()).hide(sysNiceAnimationSpeed, this.doneAnimating.bind(this));
	},

	mouseInContainer: function(event)
	{
		var offset	= this.object.cumulativeOffset();
		var size	= this.object.getDimensions();

		var mouse = {
				x: Event.pointerX(event),
				y: Event.pointerY(event)
			};
			
		if(mouse.x > offset.left && mouse.x < (offset.left + size.width)
				&& mouse.y > offset.top && mouse.y < (offset.top + size.height))
		{
			return true; //inside this.object
		}
		
		return false; //cursor not inside this.object
	},

	doneAnimating: function()
	{
		this.animating = false;
	}		
});