var Navi = Class.create({
	initialize: function(container, id) {
		var divs = $$('div.'+id);
		var lis = $$('li.'+id)[0];
		
		var con = $(container);
		var img = lis.getElementsByTagName('img')[0];
		
		this.id = id;
		this.img = img;
		
		if(divs.length > 0)
		this.con = con;
		this.divs = divs;
		this.lis = lis;
		Event.observe(this.lis, 'mouseover', this.show.bind(this));
	},
	show: function(e) {
		
		if(this.shown)
			return false;
		this.shown = true; 
		
		if(this.con)
			this.con.show();
		this._src = this.img.src;
		this.imgShow();
		for(var i=0; i<this.divs.length; i++) {
			$(this.divs[i]).show();
		}
		this._hide = this.hide.bind(this);
		Event.observe(this.lis, 'mouseout', this._hide);
		if(this.con)
		Event.observe(this.con, 'mouseout', this._hide);
	},
	hide: function(e) {
		var t = e ? e.relatedTarget : e.toElement;
		if(this.shown && (!this.con || !t.descendantOf(this.con)) && !t.descendantOf(this.lis)) {
			
			this.img.src = this._src;
			if(this.con)
				this.con.hide();
			for(var i=0; i<this.divs.length; i++) {
				$(this.divs[i]).hide();
			}
			Event.stopObserving(this.lis, 'mouseout', this._hide);
			if(this.con)
			Event.stopObserving(this.con, 'mouseout', this._hide);
			this._hide = null;
			
			this.shown = false; 
		}
	},
	imgShow: function() {
		if(!this.img.src.match(/-hover/))
			this.img.src = this.img.src.replace(/\.png/, '-hover.png');
	},
	imgHide: function() {
		if(this.img.src.match(/-hover/))
			this.img.src = this.img.src.replace(/-hover/, '');
	}
})