//  ************** VARIAVEIS DA BIBLIOTECA ******************* //

// Ativar a exibição simultânea de imagens das traduções
// Obs.: A desabilitação dessa funcionalidade diminui o tempo de carregamento
// das páginas de texto. Desative somente se a conexão com o servidor estiver muito lenta.
// 1 para ativar e 0 para desativar 
	var ativaimagens = 1;
	
//Ativar a largura fixa da tradução simultânea na tela
//O valor zero desativa e o valor 1 ativa
	var ativalargura = 1;
//A largura padrão é de 160 pixels
	var largurafixa = "200";
//MAXCHARS indica o número máximo de caracteres que podem ser inseridos na tradução
//sem que haja ativação automática da largura
	var MAXCHARS = 28;

//Classe do titulo
	var classetitulo = "conteudobranconegrito";
//Classe do texto
	var classetexto = "conteudo";
//Classe do fundo da parte de baixo
	var classebaixo = "fundoazul";
//Classe do fundo da parte de baixo
	var classecima = "fundoazulescuro";
	
// Grossura da Borda
	var border = "2";
	
// Distancia que sera dada horizontalmente do cursor do mouse
	var offsetx = 10;
	
// Distancia que sera dada verticalmente do cursor do mouse
	var offsety = 10;
	
//browsers que esta funcao suporta
ie4=false;
ie5=false;
ns4=false;
ns6=false;

//abaixo se detecta qual dos 4 browsers está sendo utilizado pelo usuário
// e coloca o valor true na variável correspondente a esse browser

if (document.all)
	ie4 = true;
if ((ie4) && (navigator.userAgent.indexOf('MSIE 5')>0))
	ie5 = true;

if ((ie4) && (navigator.userAgent.indexOf('MSIE 6')>0))
	ie5 = true;

if ((!ie4) && (document.getElementById))
	ns6 = true;

if (document.layers)
	ns4 = true;

// x e y são variaveis que guardarao a posicao do mouse na tela
var x;
var y;
//dir é o quadrante que o layer quadro deve ser desenhado
var dir;

// quando estiver usando ie5, é necessário que o quadrande parão seja 6 para o bom funcionamento da biblioteca
if (ie5)
{
	dir = 6;
}

// quando estiver usando ie4, é necessário que o quadrande parão seja 7 para o bom funcionamento da biblioteca
if (ie4 && !ie5)
	dir = 7;

if (ns4 || ns6)
{
	document.captureEvents(Event.MOUSEMOVE);
   document.onmousemove = MoveQuadro;
}

if (ie4)
{
	document.onmousemove = MoveQuadro
}

//  ************** FUNCOES ÚTEIS ******************* //


//funcao que grava cookies no computador do usuário. Basicamente, é usada no Read in Web para guardar as 
//respostas dadas pelos alunos
function grava_cookie(nome,value)
{
	var expiredays = 15000;
	var ExpireDate = new Date ();
	ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000));

	document.cookie = nome + "=" + escape(value) + "endofcookie" + 
	((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString() +";path=/");

}

//funcao para ler cookies existentes no computador do usuário
function le_cookie(nome,elemento)
{
	var cookies = document.cookie;

	if(cookies == "") return;

	var start = cookies.indexOf(nome);
	if(start == -1) return;

	start += nome.length + 1;
	var end = cookies.indexOf("endofcookie", start);
	if(end == -1) end = cookies.length;
		
	var cookieVal = cookies.substring(start, end);
	
	var arr = cookieVal.split('&');
	for(var i = 0; i < arr.length; i++)
	{
		var a = arr[i].split('endofcookie');
	}	
	elemento.value = unescape(a[0]);
}

//retorna true se o layer 'qual' estiver visivel e falso caso contrario
function IsVisible(qual)
{
	if (ie4)
	{
		if (document.all[qual].style.visibility=="visible")
			return(true);
		else
			return(false);
	}
		
	if (ns4)
	{
		if (self.document.layers[qual].visibility=="show")
			return(true);
		else
			return(false);
	}
	if (ns6)
	{
		if (document.getElementById(qual).style.visibility=="visible")
			return(true);
		else
			return(false);
	}

	return(false);
}

//altera o estado de visibilidade do layer 'qual' para 'estado'
function ChangeVisibility(qual,estado)
{
	if (estado==true)
	{
		if (ie4)
			document.all[qual].style.visibility="visible";
			
		if (ns4)
			self.document.layers[qual].visibility="show";

		if (ns6)
			document.getElementById(qual).style.visibility="visible";
	}
	else
	{
		if (ie4)
			document.all[qual].style.visibility="hidden";
		
		if (ns4)
			self.document.layers[qual].visibility="hide";

		if (ns6)
			document.getElementById(qual).style.visibility="hidden";
	}
	
}

//funcao para alterar a posicao do layer 'qual' na tela para a posicao X1 e Y1
//quando movemos um layer de posicao, é necessário verificar se devemos mudar seu quadrante, para que ele com certeza apareca por completo na tela

function MoveLayer(qual,X1,Y1)
{
	if (ie4 && !ie5)
	{  
		document.all[qual].style.pixelLeft = X1;
		document.all[qual].style.pixelTop = Y1;
	
		if (qual==qual)
		{
 			if (X1 <= 0 ) dir++;
 			if (Y1  <= 0 ) dir+=5;

 			//if (document.all[qual].style.pixelLeft + document.all[qual].style.pixelWidth >= document.body.clientWidth) dir--;
 			//if (document.all[qual].style.pixelTop + document.all[qual].style.pixelHeight >= document.body.clientHeight) dir-=5;
		}
	}

	if (ie5)
	{  
		document.all[qual].style.pixelLeft = X1;
		document.all[qual].style.pixelTop = Y1;
		if (qual==qual)
		{
 			if (X1 <= 0 ) dir++;
 			if (Y1  <= 0 ) dir+=5;

// 			if (document.all[qual].style.pixelLeft + document.all[qual].style.pixelWidth >= document.body.clientWidth+document.body.scrollLeft) dir--;
 			//if (document.all[qual].style.pixelTop + document.all[qual].style.pixelHeight >= document.body.clientHeight+document.body.scrollTop) dir-=5;
		}
	}


	if (ns4)
	{
		self.document.layers[qual].left = X1;
		self.document.layers[qual].top = Y1;
		if (qual==qual)
		{ 
			if (X1 <=0) dir++;
			if (Y1 <=0) dir+=5;
// 			if (document.layers[qual].left <= 0 ) dir++;
 			//if (document.layers[qual].top  <= 0 ) dir+=5;
		}
	}
   if (ns6)
	{	
		document.getElementById(qual).style.left = X1 + "px";
		document.getElementById(qual).style.top = Y1 + "px";
		if (qual==qual)
		{
			str1 = document.getElementById(qual).style.top;
			str2 = document.getElementById(qual).style.left;
			str3 = document.getElementById(qual).style.width;
			str4 = document.getElementById(qual).style.width;

			str1 = str1.substring(0,str1.length-2);
			str2 = str2.substring(0,str2.length-2);
			str3 = str3.substring(0,str3.length-2);
			str4 = str4.substring(0,str4.length-2);
		}
	}
}


//esta funcao posiciona o layer usando a funcao acima levando em consideracao o quadrante e a posicao do mouse na tela
function AjeitaQuadrante(qual,quadrante)
{
	if (quadrante==1)
	{dir=1;
		if (ie4)
			MoveLayer(qual,x-offsetx-document.all[qual].style.pixelWidth,y-offsety-document.all[qual].style.pixelHeight);
		if (ns4)
			MoveLayer(qual,x-offsetx-document.layers[qual].width,y-offsety-document.layers[qual].height);
		if (ns6)
			MoveLayer(qual,x-offsetx-document.getElementById(qual).style.width,y-offsety-document.getElementById(qual).style.height);
	}

	if (quadrante==2)
	{dir=2;
		if (ie4)
			MoveLayer(qual,x-(document.all[qual].style.pixelWidth/2),y-offsety-document.all[qual].style.pixelHeight);
		if (ns4)
			MoveLayer(qual,x-(document.layers[qual].width/2),y-offsety-document.layers[qual].height);
		if (ns6)
			MoveLayer(qual,x-(document.getElementById(qual).style.width/2),y-offsety-document.getElementById(qual).style.height);
	}

	if (quadrante==3)
	{dir=3;
		if (ie4)
			MoveLayer(qual,x+offsetx,y-offsety-document.all[qual].style.pixelHeight);
		if (ns4)
			MoveLayer(qual,x+offsetx,y-offsety-document.layers[qual].height);
		if (ns6)
			MoveLayer(qual,x+offsetx,y-offsety-offsety-document.getElementById(qual).style.height);
	}

	if (quadrante==4)
	{dir=4;
		if (ie4)
			MoveLayer(qual,x-offsetx-document.all[qual].style.pixelWidth,y-offsety);
		if (ns4)
			MoveLayer(qual,x-offsetx-document.layers[qual].width,y-offsety);
		if (ns6)
			MoveLayer(qual,x-offsetx-document.getElementById(qual).style.width,y-offsety);
	}

	if (quadrante==5)
	{dir=5;
			MoveLayer(qual,x+offsetx,y-offsety);
	}

	if (quadrante==6)
	{dir=6;
		if (ie4)
			MoveLayer(qual,x-offsetx-document.all[qual].style.pixelWidth,y+offsety);
		if (ns4)
			MoveLayer(qual,x-offsetx-document.layers[qual].width,y+offsety);
		if (ns6)
		{
			str1 = document.getElementById(qual).style.width; 
			str1 = str1.substring(0,str1.length-2);
			MoveLayer(qual,x-offsetx-str1*1,y+offsety);
		}
	}


	if (quadrante==7)
	{dir=7;
		if (ie4)
			MoveLayer(qual,x-(document.all[qual].style.pixelWidth/2),y+offsety*2);
		if (ns4)
			MoveLayer(qual,x-(document.layers[qual].width/2),y+offsety*2);
		if (ns6)
			MoveLayer(qual,x-(document.getElementById(qual).style.width/2),y+offsety*2);
	}

	if (quadrante>=8)
	{dir=8;			
			MoveLayer(qual,x+offsetx,y+offsety*2);
	}

}

//  ************** FUNCOES DO LAYER QUADRO ***************** //

//funcao que a pág na internet chama para que o layer quadro tenha seu conteudo alterado, 
//e para o tornar visivel COM TITULO
function QuadroTitulo(texto,titulo,imagem)
{
	if ( (ativalargura) || ( (titulo.length > MAXCHARS) || (texto.length > MAXCHARS) ) ){
		//ativalargura = 1;
		largura = largurafixa;
		}
	else{
		//ativalargura = 0;
		largura = "100%";
		}
	txt = "<TABLE BORDER=0 CELLPADDING="+border+" CELLSPACING=0><TR class=\""+classecima+"\"><TD WIDTH='100%'><TABLE WIDTH='100%' BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD WIDTH='"+largura+"' align=\"center\" class=\""+classetitulo+"\">"+titulo+"</TD></TR></TABLE><TABLE WIDTH='100%' BORDER=0 CELLPADDING=2 CELLSPACING=0><TR class=\""+classebaixo+"\"><TD";
	txt = txt + " WIDTH='"+largura+"' class=\""+classetexto+"\" nowrap>"+texto+"</TD></TR>";
	if (ativaimagens){
		if ((!imagem)||(imagem==""))
			txt = txt + "</TABLE></TD></TR></TABLE>";
		else 
			txt = txt + "<TR><TD align=\"center\"><img src=\""+imagem+"\" ></TD></TR></TABLE></TD></TR></TABLE>";
	}
	else
		txt = txt + "</TABLE></TD></TR></TABLE>";
	EscreveLayer("quadro",txt);	
	if (ie4 && !ie5)
		AjeitaQuadrante("quadro",7);
	else
		AjeitaQuadrante("quadro",6);
	ChangeVisibility("quadro",true);
}

//nos exercicios dos tutoriais existem alguns que permitem que o usuário clique sobre uma palavra da tela.
//Essa funcao torna visível o layer com fundo colorido correspondente a palavra clicada.
//Posicionando antes de acordo com a posicao relativa do texto(o layer do texto sempre deve se chamar Layer2)
function clicou(qual)
{
	if (IsVisible(qual)==false)
	{
		if (document.all)
		{
			document.all[qual].style.pixelTop=document.all["Layer2"].style.pixelTop+document.all[qual].style.pixelTop;
			document.all[qual].style.pixelLeft=document.all["Layer2"].style.pixelLeft+document.all[qual].style.pixelLeft;
		}

		if (!ns4 && !ie4 && ns6)
		{
			str1 = document.getElementById(qual).style.top;
			str2 = document.getElementById("Layer2").style.top;
			str3 = document.getElementById(qual).style.left;
			str4 = document.getElementById("Layer2").style.left;

			str1 = str1.substring(0,str1.length-2);
			str2 = str2.substring(0,str2.length-2);
			str3 = str3.substring(0,str3.length-2);
			str4 = str4.substring(0,str4.length-2);
			MoveLayer(qual,str3*1+str4*1,str1*1+str2*1);
		}

		if (ns4)
		{
			MoveLayer(qual,self.document.layers["Layer2"].left+document.layers[qual].left,self.document.layers["Layer2"].top+document.layers[qual].top);
		}

		ChangeVisibility(qual,true);
	}
}

//nos exercicios dos tutoriais existem alguns que permitem que o usuário clique sobre uma palavra da tela.
//Essa funcao torna INvisível o layer com fundo colorido correspondente a palavra previamente clicada.
//Posicionando depois este layer na posicao inicial(antes do clique do usuário)
//ver exemplo de seu funcionamento no Modulo1 Atividade 2 - Tut - Exercício2

function desclicar(qual)
{
	if (IsVisible(qual)==true)
	{
		ChangeVisibility(qual,false);

		if (ie4)
		{
			document.all[qual].style.pixelTop=document.all[qual].style.pixelTop-document.all["Layer2"].style.pixelTop;
			document.all[qual].style.pixelLeft=document.all[qual].style.pixelLeft-document.all["Layer2"].style.pixelLeft;
		}

		if (!ie4 && ns6)
		{
			str1 = document.getElementById(qual).style.top; 
			str2 = document.getElementById("Layer2").style.top; 
			str3 = document.getElementById(qual).style.left; 
			str4 = document.getElementById("Layer2").style.left; 

			str1 = str1.substring(0,str1.length-2);
			str2 = str2.substring(0,str2.length-2);
			str3 = str3.substring(0,str3.length-2);
			str4 = str4.substring(0,str4.length-2);
	 		
			MoveLayer(qual,str3*1+str4*1,str1*1+str2*1);
		}

		if (ns4)
		{ 
	 		self.document.layers[qual].top=document.layers[qual].top-self.document.layers["Layer2"].top;
	 		self.document.layers[qual].left=self.document.layers["Layer2"].left+document.layers[qual].left;
		}
	}
}


// Funcao para limpar o conteudo do layer 'quadro' e também para torná-lo invisivel
function Saiu()
{
	ChangeVisibility("quadro",false);
	EscreveLayer("quadro","");
}

// Funcao para limpar o conteudo do layer 'forum' e também para torná-lo invisivel
function SaiuForum()
{
	ChangeVisibility("forum",false);
	EscreveLayer("forum","");
}


//quando o mouse é movido, esta funcao é chamado, que atualiza as variáveis x e y (responsáveis por quardar a pocisao do mouse na tela)
//logo depois chama a funcao ajeitaquadrante, para que a posicao do layer na tela seja desenhada de acordo com a posicao do mouse
function MoveQuadro(e)
{
	if (ie4 && !ie5)
	{
		x=event.x;
		y=event.y;
	}

	if (ie5)
	{
		x=event.x+document.body.scrollLeft;
		y=event.y+document.body.scrollTop;
	}
	
	if (ns4)
	{
		x=e.pageX;
		y=e.pageY;
	}

	if (ns6)
	{
		x=e.pageX;
		y=e.pageY;
	}
		AjeitaQuadrante('quadro',dir);
}


// Muda o conteudo de um Layer
function EscreveLayer(qual,Conteudo)
{
	if (ie4 && !ie5)
	{
		if (Conteudo !="")
		{
			document.all[qual].innerHTML = Conteudo;	
			// no caso do ie4, não é possivel fazer um o dimensionamento automático, portanto utilizamos o padro 340 e 40 para seu novo tamanho de layer
			document.all[qual].style.pixelHeight = 40;
			document.all[qual].style.pixelWidth = 340;
		}
		else
		{
			document.all[qual].style.pixelHeight = 0;
			document.all[qual].style.pixelWidth = 0;
		}


	}
	if (ie5)
	{
		document.all[qual].innerHTML = Conteudo;
		if (Conteudo!="")
		{
			document.all[qual].style.pixelHeight = document.all[qual].offsetHeight;
			document.all[qual].style.pixelWidth = document.all[qual].offsetWidth;
		}
		else
		{
			document.all[qual].style.pixelHeight = 0;
			document.all[qual].style.pixelWidth = 0;
		}
	}
		
	if (ns4)
	{
		document.layers[qual].document.open();
		document.layers[qual].document.write(Conteudo);
		document.layers[qual].document.close();
      document.layers[qual].height = document.layers[qual].document.height;
      document.layers[qual].width = document.layers[qual].document.width;
	}

	if (ns6)
	{	
		document.getElementById(qual).innerHTML=Conteudo;
      if (Conteudo=="")
		{
			document.getElementById(qual).height = "0px";
      	document.getElementById(qual).width = "0px";
		}
		else
		{
			// no caso do ie4, não é possivel fazer um o dimensionamento automático, portanto utilizamos o padro 340 e 40 para seu novo tamnho de layer
			document.getElementById(qual).height = "40px";
      	document.getElementById(qual).width = "340px";
		}
	}

}
//funcao que recebe qual o arquivo de som deve tocar e que habilita o layer Som para começar a tocar o som chamado
function SOM(ArqSom,JaAcionouSom)
{
/*
	Conteudo = "<OBJECT ";
   Conteudo += 'ID="WMPlay" ';
   Conteudo += 'CLASSID="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"';
 Conteudo += '22d6f312-b0f6-11d0-94ab-0080c74c7e95';
   Conteudo += 'WIDTH=165';
   Conteudo += 'HEIGHT=45>';
   Conteudo += '<PARAM NAME="FILENAME" VALUE="http://www.ead.unicamp.br/readweb/sons/modulo1/planet.asf">';
   Conteudo += '<PARAM NAME="AutoStart" VALUE="True">';
   Conteudo += '<PARAM NAME="TransparentAtStart" VALUE="True">';
   Conteudo += '<PARAM NAME="ShowControls" VALUE="1">';
   Conteudo += '<PARAM NAME="ShowDisplay" VALUE="1">';
   Conteudo += '<PARAM NAME="ShowStatusBar" VALUE="1">';
   Conteudo += '<PARAM NAME="AutoSize" VALUE="1">';

   Conteudo +=    '<EMBED type="application/x-mplayer2" SRC="http://www.ead.unicamp.br/readweb/sons/modulo1/planet.asf" CONTROLS=console';
   /Conteudo +=    'name="WMPlay" autostart="1" showcontrols="1" showdisplay="0" showstatusbar="0" displaysize="0" width=165 height=44></EMBED>';

   Conteudo += '</OBJECT>';

	var Conteudo  = '<OBJECT ID="WMPlay" width=165 height=45';
	Conteudo += 'classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95"\n';
	Conteudo += 'codebase= "http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,52,701" standby="Carregando o Som" type="application/x-oleobject">\n';
	Conteudo += '<param name="FileName" value="' + ArqSom + '">\n';
	Conteudo += '<param name="ShowStatusBar" value="False">\n';
	Conteudo += '<param name="AutoSize" value="False">\n';
	Conteudo += '<param name="AutoStart" value="True">\n';
	Conteudo += '<embed type="application/x-mplayer2"\n';
	Conteudo += 'pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" src="' + ArqSom + '" name="WMPlay" autostart="1" showcontrols="1" showdisplay="0" showstatusbar="0" displaysize="0" width=165 height=44>\n';
	Conteudo += '</object>\n';


*/

	var Conteudo  = '<object id="WMPlay" width="165" height="45"';


if (!ie5)
	{
		Conteudo += 'classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95"\n';
		Conteudo += 'codebase="CODEBASE=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715"\n';
	}
	Conteudo += 'standby="" type="application/x-oleobject">\n';
	Conteudo += '<param name="FileName" value="../../../sons/modulo1/planet.asf">\n';
	Conteudo += '<param name="ShowStatusBar" value="False">\n';
	Conteudo += '<param name="AutoSize" value="False">\n';
	Conteudo += '<param name="AutoStart" value="True">\n';
	Conteudo += '<embed type="application/x-mplayer2"\n';
	Conteudo += 'pluginspage="http://download.microsoft.com/download/winmediaplayer/nsplugin/6.4/WIN98/EN-US/wmpplugin.exe" src="http://www.unicamp.br/iel/readweb/sons/modulo1/planet.asf" name="WMPlay" autostart="1" showcontrols="1" showdisplay="0" showstatusbar="0" displaysize="0" width="165" height="44">\n';
	Conteudo += '</object>\n';


	if (JaAcionouSom==0)
	{
		JaAcionouSom=1

		ChangeVisibility('Som',true);
		EscreveLayer('Som',Conteudo);
	}
	else
		ChangeVisibility('Som',false);
}