var isIE = (navigator.userAgent.indexOf('MSIE') != -1)? true : false;
var isIE6 = (navigator.userAgent.indexOf('MSIE 6') != -1)? true : false;
var isFF2 = (navigator.userAgent.indexOf('Firefox/2') != -1)? true : false;
var isFF3 = (navigator.userAgent.indexOf('Firefox/3') != -1)? true : false;
var isIE7 = (navigator.userAgent.indexOf('MSIE 7') != -1)? true : false;

var Nav = Class.create({
	
	initialize: function () {
		
		this._nodes = $$('#myNav .main');
		this._contentOld = '';
		this._contentOldLink = '';
		this._contentOldArrow = '';
		this._subNavOld = '';
		this._subNavInfos = new Array();
		this._id = -1;
		this._fixContentInterval = -1;
		this._closeOnClickOut = false;
		
		Event.observe(document,"mouseup",this._close.bind(this));
		
		for (var i=0;i<this._nodes.length;i++) {
			
			this[i+'roll'] = new Roll(this._nodes[i]);			
			Event.observe(this._nodes[i],'mouseover',this._setClickOut.bind(this,false));
			Event.observe(this._nodes[i],'mouseout',this._setClickOut.bind(this,true));
			
			this._nodes[i].parentNode.id = 'nav'+i;			
			var subNav = $$('#nav'+i+' .subNav');		
			if (subNav.length>0) {
				this._subNavInfos[i] = subNav[0].offsetWidth;
				Event.observe(this._nodes[i],'click',this.view.bind(this,subNav[0],i,subNav[0]));
			}
			
		}
		
	},
	
	_setPosition: function (id) {
		
		var parent = this._nodes[id].parentNode;
		var subNav = $$('#nav'+id+' .subNav');
		var subContent = $$('#nav'+id+' .sub');
		
		Event.observe(subNav[0],'mouseover',this._setClickOut.bind(this,false));
		Event.observe(subNav[0],'mouseout',this._setClickOut.bind(this,true));
		
		var cnt = 0;
		for (var i=0;i<subContent.length;i++) {
			var view = subContent[i].parentNode.getElementsByTagName('div')[0];
			if (view) {
				cnt++;
				if (cnt==1) {
					this.viewContent(view,id,subNav[0],subContent[i],'visible');
				}
				Event.observe(subContent[i],'click',this.viewContent.bind(this,view,id,subNav[0],subContent[i],'visible'));
			}
		}
		
		var top = (isIE) ?25 :26;
		Element.setStyle(subNav[0], { top:parent.offsetTop + top + 'px' });
		this._setNavPosition(id,subNav[0]);
		
	},
	
	_setArrowPos: function (pos,posSubNav,arrow) {
		arrow.style.left = (pos.parentNode.offsetLeft - posSubNav.offsetLeft) + (pos.offsetWidth/2) - (arrow.offsetWidth/2) + 'px';
	},
	
	_setNavPosition: function (id,subNav) {	
		var parent = this._nodes[id].parentNode;
		var left = parent.offsetLeft;		
		if (left + subNav.offsetWidth > $('page').offsetWidth - 142) {
			left = parent.offsetLeft - subNav.offsetWidth + this._nodes[id].offsetWidth;
			if (left<0) {
				//left =  parent.offsetLeft + parent.offsetWidth/2 - subNav.offsetWidth/2;
				left = 0;				
			}
		}
		Element.setStyle(subNav, { left:left + 'px' });		
		this._setArrowPos(this._nodes[id],subNav,this._nodes[id].parentNode.getElementsByTagName('span')[0]);		
	},
	
	view: function (o,id,subNav) {
		
		if (this._id==-1||this._id!=id) {
			
			if (this._id!=-1) {
				this[this._id+'roll'].manual(0);
				this[this._id+'roll'].unlock();
				this._subNavOld.setStyle({ visibility:'hidden' });	
			}
			
			this._subNavOld = subNav;
			
			this[id+'roll'].lock();
			this._setPosition(id);
			this._setNavPosition(id,subNav);
			o.setStyle({ visibility:'visible' });
						
			this._id = id;
			
		}
		else {
			
			this[id+'roll'].unlock();
			o.setStyle({ visibility:'hidden' });
			subNav.setStyle({ visibility:'hidden' });
			this._contentOld.setStyle({ visibility:'hidden' });			
			Element.setStyle(this._contentOldArrow,{ visibility:'hidden' });			
			Element.removeClassName(this._contentOldLink,'on');
			
			this._contentOld = '';
			this._contentOldLink = '';
			this._contentOldArrow = '';
			
			this._id = -1;
			
		}
		
	},
	
	viewContent: function (o,id,subNav,subContent,visibility) {
		
		if (this._contentOld!=o) {
			
			var s = this._getRealSize(o,subNav.getElementsByTagName('ol')[0]);
			subNav.setStyle({ width:s + 25 + 'px' });			
			o.style.width = s + 'px';
			
			this._setNavPosition(id,subNav);
			
			Element.addClassName(subContent,'on');
			if (this._contentOld!=''&&this.contentOld!=o) {
				this._contentOld.style.visibility = 'hidden';
				Element.removeClassName(this._contentOldLink,'on');
				Element.setStyle(this._contentOldArrow,{ visibility:'hidden' });
			}
			this._contentOldLink = subContent;
			this._contentOld = o;
			
			Element.setStyle(o,{ visibility:'visible' });
			var toMove = subContent.up().getElementsByTagName('div')[0];
			var top = subNav.offsetHeight + 'px';

			Element.setStyle(toMove,{ top:top });
			
			var arrow = subNav.getElementsByTagName('span')[1];			
			this._contentOldArrow = arrow;			
			Element.setStyle(arrow,{
				visibility:'visible',
				left:subContent.offsetLeft + subContent.offsetWidth/2 - arrow.offsetWidth/2 + 'px',
				top:subNav.offsetHeight-1+'px'
			});
			
			myIE6Hack.fixLayerWithFrame(o,id+"Nav",{ top:subContent.offsetTop-45, width:s+30, height:o.offsetHeight+30 });
		
		}
		
	},
	
	_getRealSize: function (o,o2) {
		$('navUtils').innerHTML = o.innerHTML;
		$('navUtils2').innerHTML = o2.innerHTML;
		var size = ($('navUtils').offsetWidth>$('navUtils2').offsetWidth) ?$('navUtils').offsetWidth :$('navUtils2').offsetWidth;
		if (size>$('page').offsetWidth) size = $('page').offsetWidth-26;
		return size;
	},
	
	_setClickOut: function (clickOut) {
		this._closeOnClickOut = clickOut;
	},
	
	_close: function () {
		if (this._closeOnClickOut&&this._id!=-1) {
			
			this[this._id+'roll'].manual(0);
			this[this._id+'roll'].unlock();
			this._subNavOld.setStyle({ visibility:'hidden' })
			this._contentOld.setStyle({ visibility:'hidden' });			
			Element.setStyle(this._contentOldArrow,{ visibility:'hidden' });		
			Element.removeClassName(this._contentOldLink,'on');
			
			this._contentOld = '';
			this._contentOldLink = '';
			this._contentOldArrow = '';			
			this._id = -1;
			
		}
	}
	 
});

Event.observe(window, 'load', function (){
	
	if ($('myNav')) {
		var myNav = new Nav();
	}
	
});