/**
 * @author Ramon
 * -------------------------------------------------------------------- 
 */

	var _objs = [];
	var _overSub = []
	_overSub[0] = false; //Flag que indica se estou por cima de algum sub-Menu
	var _linksMenu = [];
	
/**
 * Classe Responsável pelo movimento
 * -------------------------------------------
 * Parâmetros:
 * _____________
 * _dir  -> Direção do texto (0 -> vai; 1-> volta)
 * _mn   -> Item do menu
 * _num  -> Número do índice
 * _dist -> Distância que será andando 
 */
	function Movimenta ()	
	{
		this.obj     = null;
		this.limite  = 40;
		this.velo    = 3;
		this.direcao = 0;
		this.move  = null; //controle do movimento dos itens
		
		this.vaiVolta = function ()
		{
			if( this.obj == null || this.obj == '' ) return; //Se não existe o nó, sai
				
			if (! this.move ) 
			{
				var _dist = this.obj.offsetLeft;
				switch (this.direcao) 
				{
					case 0: //Vai ?
						this.limite = this.limite || 40;
						this.velo   = this.velo || 3;
						var _this   = this;
						this.move = setInterval(function(){
							if (_dist <= _this.limite) 
							{
								_this.obj.style.left = _dist + 'px';
							}
							else 
								if (_dist > _this.limite) 
								{
									clearInterval(_this.move);
									_this.move = null;
									_this.obj.style.left = _this.limite + 'px';
									acabouMovimento(_this.obj.id, _this.direcao)
								}
							_dist += _this.velo;
						}, 1)
						break;
						
					case 1: //Volta ?
						this.limite = this.limite || 0;
						this.velo   = this.velo || 3;
						var _this   = this;
						this.move   = setInterval(function()
						{
							if (_dist >= _this.limite) 
							{
								_this.obj.style.left = _dist + 'px';
							}
							else 
							{
								clearInterval(_this.move);
								_this.move = null;
								_this.obj.style.left = _this.limite + 'px';
								acabouMovimento(_this.obj.id, _this.direcao)
							}
							_dist -= _this.velo;
						}, 1)
						break;
						
				}//End switch
			}//End if (! this.arrMov[this.numItem]) 			
		}//End método
		
		this.isRunning = function ( ) //Elemento está se movimentado?
		{
			return ( this.move == null ) ? false : true;
		}//End metodo
		
		this.stopRunning = function ( )
		{
			clearInterval(this.move);
			this.move = null;
		}//End metodo
		
	}//End class


/**
 * Função chamada toda vez que acaba o movimento
 * -------------------------------------------
 */

function acabouMovimento ( _objId, _dir )
{
	
	switch ( _dir )
	{
		case 0: // Foi?
			switch ( _objs[ _objId ][1] )
			{
				case 0: // Menu ?
					if ( _objs[ _objId ].volta )//Tenho que voltar o menu?
					{
						with ( _objs[ _objId ][2] ) //Configurando a movimentacao
						{
							limite  = 0;
							direcao = 1;
							vaiVolta(); //Volta
						}
					}
					else //Então exibirei o Sub-menu
					{
						var _ob = '';
						if ( _ob = _objs[ "subMenu_item" + _objId.match(/_item(\d)/)[1] ] ) //Existe esse sub-menu?
						{
							setTimeout
							(
								function ()
								{
									if (! _objs[ _objId ].volta && ! _overSub[0] )//Após um segundo, ainda estou no item? então exibo o sub-menu
									{
										with ( _ob[2] ) //Configurando a movimentacao
										{
											limite = 156;
											direcao=0;
											vaiVolta(); //Vai subMenu
										}//End with
										
										for (var _ix in _objs ) //Todos os outros sub-menus terão que voltar
										{
											if ( _ix != _ob[0].id && /subMenu_item/.test( _ix ) ) //é sub-menu e diferente de mim?
											{
												with ( _objs[ _ix ][ 2 ] ) //Configurando a movimentacao
												{
													limite = 0;
													direcao=1;
													vaiVolta(); //Vai subMenu
												}//End with
											}//End if ( _ix != _objId && _ix.match(/subMenu_item(\d)/)[1] )
										}//End for (var _ix in _objs )
										
										_ob[0].style.display = "block";	
										_overSub[1] =_ob[0].id;
									}//End if (! _objs[ _objId ]['volta'] && ! _overSub[0] )
									_overSub[0] = true;
								}//End Function
							, 300);
						}//End if ( _ob = _objs[ "subMenu_item" + _objId.match(/_item(\d)/)[1] ] )
					}//End if ()
					_objs[ _objId ]['volta'] = false;					
				break;
				case 1: // Sub-menu ?
					if ( _objs[ _objId ].volta )//Tenho que voltar o Sub-menu?
					{
						with ( _objs[ _objId ][2] ) //Configurando a movimentacao
						{
							limite = 0; 
							direcao=1;
							vaiVolta(); //Volta sub-menu
						}//End with ( movimenta )
					}
					else 
						document.getElementById(_objId + "_box").style.zIndex = 2;
					
				break;
			}
		break;
		
		case 1: // Voltou?
			switch ( _objs[ _objId ][1] )
			{
				case 0: // Menu ?
				break;
				case 1: // Sub-menu ?
					if ( _objs[ _objId ][0] ) //Existe?
						_objs[ _objId ][0].style.display = "none";
						
					_objs[ _objId ]['volta'] = false;
					_overSub = [false, null];
					if ( document.getElementById(_objId + "_link1_clone")) //Já existe o nó clone do link?
						document.getElementById(_objId + "_link1_clone").style.display = "none";
						
					document.getElementById(_objId + "_box").style.zIndex = 1;
				break;
			}
			
		break;
	}//End switch ( _dir )

}

	overMenu = function ( evt )
	{
		var _objID = appWeb.getObjEvento(evt);
		var _mn = evt.srcElement || evt.target;
		if (_mn == null || _mn == '') return;
		
  	num = _mn.id.match(/item(\d+)/)[1];

		if ( _objs['move_item' + num][2].isRunning( ) )
		{
			_objs['move_item' + num][2].stopRunning();
		}//End if ( _objs[_i][2].isRunning( ) )
		with ( _objs['move_item' + num][2] )
		{
			_objs[ 'move_item' + num ]['volta'] = false;	
			limite  = 40;
			direcao =0;
			vaiVolta();
			_overSub[0] = false;
		}			
		
		for ( _i in _objs )
		{
			if ( _i.match(/_item(\d)/)[1] !=  num )
			{
				if( _objs[_i][2].isRunning( ) )
				{
					if (_i != 'subMenu_item' + num) 
					{
						_objs[_i]['volta'] = true;
					}//End if (! /subMenu/.test(_i) ) 
				}
				else //Parado
				{
					if (/subMenu/.test(_i)) //SubMenu?
					{
					 setTimeout ( 
					 function () {
					 	if (!_overSub[0] ) //Está por cima de algum subMenu?
						{
							for(var _val in _objs )
							{
								if (/subMenu/.test(_val) && 
										_objs[_val][2].direcao == 0 && 
										! _objs[_val]['volta'] && 
										_val.match(/_item(\d)/)[1] !=  num ) //é sub menu então volta?
								{
									with ( _objs[_val][2] )
									{
										limite = 0;
										direcao =1;
										vaiVolta(); //Volta		
									}//end with
								}
							}//End for(var _val in _objs )
							_overSub = [false, null];
						}
					 }, 600)
					} 
					else 
					{
						if ( _objs[_i][2].direcao == 0)
						{
							with ( _objs[_i][2] )
							{
								limite = 0;
								direcao=1;
								vaiVolta(); //Volta		
													
							}//end with
						}
					}
				}//End if( movimenta.isRunning() )
				
			}//End if( _inter[_i] != null )
			
		}//End for ( _i in _objs )
		
	}
	
	outMenu = function ( evt )
	{

		if (!evt) var evt = window.event;
		var tg = (window.event) ? evt.srcElement : evt.target;
//		if (tg.nodeName != 'DIV') return;
		var reltg = (evt.relatedTarget) ? evt.relatedTarget : evt.toElement;
		if(reltg == null) return;
		while (reltg.nodeName != 'BODY' && reltg.id != 'containerMenu' && ! /subMenu_item\d/.test(reltg.id) ){
			reltg = reltg.parentNode
			if(reltg == null) return;
		}
			
//		if ( reltg.id == 'containerMenu' ) return;
		if ( reltg == tg || reltg.id == 'containerMenu'  || 
					/subMenu_item/.test(tg.id) || 
					/subMenu_item/.test(reltg.id) ||
					/move_item/.test(tg.id)
					) {
						_overSub[0] = false;
					}
						
		for (var _i in _objs )
		{
			if( _objs[_i][2].isRunning() )
			{
				_objs[ _i ].volta = true;
			}
			else 
			{
				with ( _objs[_i][2] )
				{
					limite  = 0;
					direcao = 1;
					vaiVolta(); //Volta			
				}//End with
				
			}//End if( _inter[_i] != null )
		}//End for ( _i in _objs )
//		_overSub[0] = false;
	}

function log(_text, clear){
	if ( !(_div = document.getElementById("log") ) )
	{ 
		var _div = document.createElement("DIV");
		_div.id = "log";
		with (_div.style) {
			background = "#fff";
			border = "1px #f00 solid";
			width = "400px"
			height = "550px";
			position = "absolute";
			top = "10px";
			left = "300px";
			overflow = "auto";
			zIndex = 1000;
		}
		document.getElementById("page0").appendChild( _div );
	}
	if (clear) _div.innerHTML = "";
	_div.innerHTML += _text + "<br>";
}
	
function fundoTransparente ( _node, _trans )
{
	var _newNode = document.createElement("DIV");
	_newNode.className = _node.className;
	with (_newNode.style) 
	{
		filter  = "alpha(opacity=" + _trans + ")";
		display = "block";
		top     = "0px";
		left    = "-10px";
		opacity = _trans/100;
  }
	_newNode.id += "bg";
	_node.style.background = "none";
	_node.insertBefore( _newNode, _node.firstChild ) ;
}

function clickMenu ( evt )	
{
	if (!evt) var evt = window.event;
	var tg = (window.event) ? evt.srcElement : evt.target;	
	if (tg.nodeName == 'LABEL') //Cliquei no label do link? (subMenu)
	{
		var _link = null;
		var _numItem = tg.parentNode.id.match(/_item(\d)/)[1]; //Qual item do menu?
		switch ( tg.parentNode.id.split( '_' )[0] ) 
		{
			case 'menu' :
			case 'move' :
				_link = _linksMenu[_numItem][1];
			break;
			case 'subMenu' :
				var _numLink = tg.parentNode.id.match(/_link(\d)/)[1]; //Qual item do subMenu?
				
				_link = _linksMenu[_numItem] ? _linksMenu[_numItem][0][_numLink] : null;
			break;
		}
		
		if ( _link != null ) panel1_loadContent( _link ); //Carrega o link clicado
		
	}//End if (tg.nodeName == 'LABEL')
   else (tg.nodeName == 'DIV') //Cliquei no label do link? (subMenu)
   {
			var _link = null;
			var _numItem = null; //Qual item do menu?
			if ( _numItem = tg.id.match(/_item(\d)/) )
			{
				_numItem = _numItem[1];
				switch ( tg.id.split( '_' )[0] ) 
				{
					case 'menu' :
					case 'move' :
						_link = _linksMenu[_numItem][1];
					break;
					case 'subMenu' :
						var _numLink = tg.id.match(/_link(\d)/)[1]; //Qual item do subMenu?
						
						_link = _linksMenu[_numItem] ? _linksMenu[_numItem][0][_numLink] : null;
					break;
				}	
				
				if ( _link != null ) panel1_loadContent( _link ); //Carrega o link clicado
			}
	 }
}//End metodo

window.onload = function () 
{
	arrImages = { 'loader'  : new Image() };
	arrImages[ 'loader' ].src = "images/loader.gif";
	
	panel1_loadContent( 'home.html' );
	/**
	 * JSON de configuração dos links para menu e subMenu
	 */
	 _linksMenu = 
	({
		1:[ { 
				1: 'historia.html',
				2: 'missao.html',
				3: 'visao.html',
				4: 'valores.html',
				5: 'cod_conduta.html',
				6: 'resp_soc_amb.html',
				7: 'gestao.html'
				}, ["aempresa.html", 2]
			 ],
		2:[ {
				1: 'logistica.html',
				2: 'terminal.html',
				3: 'despacho.html',
				4: 'rastreamento.html'
				}, ["servicos.html", 3]
		 	], 
		3:[ {},
				['cases.html', 4]
		 	], 
		4:[ {},
				['clientes.html', 5]
		 	], 
		5:[ {
				1: 'tipos_med_cont.html',
				2: 'esc_navios.html',
				3: 'conver_medidas.html',
				4: 'taxa_cambio.html',
				5: 'dicas_import.php'
				}, ["dicas_import.php", 6]
		 	], 
		6:[ {
				1: 'fale_conosco.html',
				2: 'banco_talentos.html'
				}, ["contatos.html", 7]
		 	],
		7:['home.html', 1],
		8:['sitemap.html', 1]
	})
	
	document.getElementById("imgHome").onclick = function (){
		var lnk = _linksMenu[7];
		panel1_loadContent(lnk);
	}
	
	document.getElementById("imgMail").onclick = function (){
		var lnk = _linksMenu[6][1];
		panel1_loadContent(lnk);
	}

	document.getElementById("imgContatos").onclick = function (){
		var lnk = _linksMenu[6][1];
		panel1_loadContent(lnk);
	}
		
	document.getElementById("imgAtuacao").onclick = function (){
		var lnk = _linksMenu[1][1];
		panel1_loadContent(lnk);
	}
		
	//Home (imagem logo)
	document.getElementById("esq_logo").firstChild.onclick = function ()
	{
		panel1_loadContent( _linksMenu[7] );
	}
	
	document.getElementById("imgSiteMap").onclick = function (){
		var lnk = _linksMenu[8];
		panel1_loadContent(lnk);
	}
	var _totChildren = document.getElementById('containerMenu').childNodes.length;
	var _child = null;
	movimenta = new Movimenta();
	
	appWeb.setEvento( document.getElementById('containerMenu'), 'mouseout' , outMenu  );
	
	for(var _i=0;_i<_totChildren;_i++)
	{
		if( _child = document.getElementById("menu_item" + _i) )
		{
			//Configurando o moveItem
			var _div = document.createElement("DIV");
			var _esqItem = document.getElementById("esq_top_item" + _i);
			_div.id = 'move_item' + _i;
			with( _div.style )
			{
				width  = _child.offsetWidth  + 'px';
				height = _child.offsetHeight + 'px';
				position = "absolute";
				zIndex = 100;
			}
			
			//Dando nome aos elementos
			_esqItem.appendChild( _div );
			_esqItem.firstChild.id = "link_item" + _i; 
			_esqItem.firstChild.style.position = "relative";
			_esqItem.firstChild.firstChild.id = "img_item" + _i; 
			
			//Movimenta o elemento
			_objs[ _div.id ] = [ _div, 0, new Movimenta() ];
			_objs[_div.id][2].velo   = 5;
			_objs[_div.id][2].limite = 40;
			_objs[_div.id][2].obj = _div;
			_objs[_div.id]['volta'] = false;
			
			//Observer os eventos: click e mouseover
			_div.appendChild( _esqItem.firstChild );
			appWeb.setEvento( _div, 'click' , clickMenu  );		
			appWeb.setEvento( _div, 'mouseover', overMenu );
			appWeb.setEvento( _div, 'click' , clickMenu  );

			if ( _subMn = document.getElementById('subMenu_item' + _i) ) //Têm subMenu? Então vamos configurar, para movimentar
			{
				fundoTransparente ( _subMn, 50 );
				_objs[ _subMn.id ] = [ _subMn, 1, new Movimenta() ];
				_objs[ _subMn.id ][2].velo  = 50;
				_objs[ _subMn.id ][2].obj  = _subMn;
				_objs[ _subMn.id ]['volta'] = false;
				appWeb.setEvento( _subMn, 'mouseout' , outMenu  );
				appWeb.setEvento( _subMn, 'click' , clickMenu  );
				_subMn.style.display = "block";
				
				var _subMnClone = document.createElement("DIV");
				_subMnClone.id = _subMn.id + "_box";
				document.getElementById("container00").appendChild( _subMnClone );
				_subMnClone = document.getElementById(_subMn.id + "_box");
				with( _subMnClone.style )
				{
					width  = _subMn.offsetWidth  + 'px';
					height = _subMn.style.height;
					top    = _subMn.offsetTop  + 126 + 'px';
					left   = _subMn.offsetLeft + 156 + 'px';
					position = "absolute";
				}
				for(_ix=1;_ix<_subMn.childNodes.length;_ix++)
				{
					var _it = null;
					if ( _it = document.getElementById( _subMn.id + "_link" + _ix ) )
					{
						var _link = document.createElement("DIV");
//						var _link = _it.cloneNode(false);
						_link.id = _it.id + "_box";
						with( _link.style )
						{
							width  = _it.offsetWidth  + 'px';
							height = _it.style.height;
						}
						_subMnClone.appendChild( _link );
						_link = document.getElementById( _it.id + "_box");
						appWeb.setEvento( _link, 'click' , clickMenu  );
					}
				}
				_subMn.style.display = "none";	
			}//End if (_subMn = document.getElementById('subMenu_item' + _i))
			
		}//End if( _child = document.getElementById("esq_top_item" + _i) )

	}//End for(var _i=0;_i<_totChildren;_i++)
	
	for ( var _i in _objs ) //Incluir os sub-menus para um único Pai (containerMenu)
	{
		if (_i.match(/subMenu_item\d/))//é sub-menu? então, vamos trocar de pai
		{
			document.getElementById('containerMenu').appendChild(_objs[_i][0]);
			_objs[_i][0] = document.getElementById( _i );
		}
	}//End for ( var _i in objs )
	
}