Nova página do gerador de links em Bootstrap

Edmar Moretti
1 parent c2030ece
Showing 5 changed files with 330 additions and 336 deletions Show diff stats
init/imagens/insert-link.png
init/index.js
permlinks/dicionario.js
permlinks/index.js
permlinks/index.php
@@ -78,7 +78,7 @@ botoesIni = [
 	"target": "_self"
 },{
 	"img":"insert-link.png",
-	"href": location.href.replace("index.php","") +  "../geradordelinks.htm",
+	"href": location.href.replace("index.php","") +  "../permlinks/index.php",
 	"titulo":$trad(13,g_traducao_init),
 	"subtitulo": $trad("13a",g_traducao_init),
 	"fa": "map-o",
 //veja em index.js o objeto que utiliza essa traducao
-g_traducao_mapas =
+g_traducao_permlinks =
 {
-		"mapas" : [{
-			pt : "Mapas de usu&aacute;rios",
-			en : "",
-			es : ""
-		}],
-		"copiado" : [{
-			pt : "Copiado",
+		"migalha" : [{
+			pt : "Links permanentes",
 			en : "",
 			es : ""
 		}]
@@ -46,37 +46,11 @@ Veja
 <i3geo/geradordelinks.htm>
  
 <i3geo/classesjs/funcoes.js>
-*/
-//
+ */
+
 //carrega as depend&ecirc;ncias
-//
-
-//TODO aplicar o padrao de css nos inputs (ver HTML)
-(function(){
-	var scriptLocation = "";
-	var scripts = document.getElementsByTagName('script');
-	for (var i = 0; i < scripts.length; i++) {
-		var src = scripts[i].getAttribute('src');
-		if (src) {
-			var index = src.lastIndexOf("index.js");
-			// is it found, at the end of the URL?
-			if ((index > -1) && (index + "index.js".length == src.length)) {
-				scriptLocation = src.slice(0, -"index.js".length);
-				break;
-			}
-		}
-	}
-	var allScriptTags = "";
-	var jsfiles = [];
-	//jsfiles[0] = "i3geo_tudo_compacto.js.php"
-	jsfiles[0] = "../pacotes/openlayers/OpenLayers2131.js.php";
-	for (var i = 0; i < jsfiles.length; i++)
-	{
-		var currentScriptTag = "<script src='" + scriptLocation + jsfiles[i] + "'></script>";
-		allScriptTags += currentScriptTag;
-	}
-	document.write(allScriptTags);
-})();
+
+
 /*
 Classe i3geo_gl_configura
  
@@ -105,7 +79,7 @@ tema - Id do elemento HTML que receber&amp;aacute; o combo com a lista de temas
 buscageo - Id do elemento HTML onde ser&aacute; inclu&iacute;da a op&ccedil;&atilde;o de busca de coordenadas geogr&aacute;ficas
  
 menu - id do elemento HTML onde ser&aacute; incluido a lista de menus
-*/
+ */
 function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tema,buscageo,menu)
 {
 	/*
@@ -118,31 +92,31 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	this.link = link;
 	/*
 	Guarda o valor do parametro seltema
-	*/
+	 */
 	this.nomeseltema = nomeseltema;
 	/*
 	Guarda o valor do parametro loc_i3geo
-	*/
+	 */
 	this.loc_i3geo = loc_i3geo;
 	/*
 	Guarda o valor do parametro menu
-	*/
+	 */
 	this.menu = menu;
 	/*
 	Guarda o valor do parametro grupo
-	*/
+	 */
 	this.grupo = grupo;
 	/*
 	Guarda o valor do parametro subgrupo
-	*/
+	 */
 	this.subgrupo = subgrupo;
 	/*
 	Guarda o valor do parametro tema
-	*/
+	 */
 	this.tema = tema;
 	/*
 	Guarda o valor do parametro buscageo
-	*/
+	 */
 	this.buscageo = buscageo;
 	/*
 	Function seltema
@@ -155,65 +129,28 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
  
 	idtema = identificador do tema conforme definido em menutemas/menutemas.xml
 	 */
-	this.seltema = function(idtema)
-	{
-		var novodiv = document.createElement("div");
-		novodiv.style.textAlign="left";
-		novodiv.id = idtema;
-		$i($i3geo_gl.temasa).appendChild(novodiv);
-		var novoel = document.createElement("img");
-		novoel.title = "excluir";
-		//novoel.onclick = excluir
-		eval("novoel.onclick = $i3geo_gl.excluir");
-		novoel.src = "imagens/x.png";
-		novodiv.appendChild(novoel);
-		var novoel = document.createElement("img");
-		novoel.title = "subir";
-		novoel.src = "imagens/sobe.gif";
-		//novoel.onclick = subir
-		eval("novoel.onclick = $i3geo_gl.subir");
-		novodiv.appendChild(novoel);
-		var novoel = document.createElement("img");
-		novoel.title = "descer";
-		novoel.src = "imagens/desce.gif";
-		//novoel.onclick = descer
-		eval("novoel.onclick = $i3geo_gl.descer;");
-		novodiv.appendChild(novoel);
-		var novoel = document.createElement("input");
-		eval("novoel.onclick = function(){$i3geo_gl.crialink()}");
-		novoel.title = "vis&iacute;vel/n&atilde;o vis&iacute;vel";
-		novoel.type = "checkbox";
-		novoel.style.cursor="pointer";
-		novoel.style.top="3px";
-		novoel.style.position="relative";
-		novoel.style.border="0px";
-		novoel.value=idtema;
-		novodiv.appendChild(novoel);
-		var novoel = document.createElement("span");
-		novoel.style.cursor="pointer";
-		novoel.title="preview";
-		novoel.style.textDecoration = "underline";
-		novoel.innerHTML = idtema;
-		eval("novoel.onclick = $i3geo_gl.preview");
-		novodiv.appendChild(novoel);
-		novodiv.appendChild(document.createElement("br"));
+	this.seltema = function(idtema){
+		var html = Mustache.to_html(
+				$("#templateCamada").html(),
+				{"idtema": idtema}
+		);
+		//console.info(html)
+		$("#"+$i3geo_gl.temasa).append(html);
 		this.crialink();
 	};
 	/*
 	Function crialink
  
 	Pega os parametros especificados pelo usu&aacute;rio e monta o link para mostrar na tela.
-	*/
+	 */
 	this.crialink = function()
 	{
 		var ins = $i3geo_gl.loc_i3geo+"/ms_criamapa.php?";
 		var iguias = $i($i3geo_gl.temasa).getElementsByTagName("input");
 		var tsl = []; //temas ligados
 		var tsd = []; //temas
-		for (var i=0;i<iguias.length; i++)
-		{
-			if (iguias[i].type == "checkbox")
-			{
+		for (var i=0;i<iguias.length; i++){
+			if (iguias[i].type == "checkbox"){
 				tsd.push(iguias[i].value);
 				if (iguias[i].checked == true)
 				{tsl.push(iguias[i].value);}
@@ -223,29 +160,24 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 		{ins += "&temasa="+tsd.join(" ");}
 		if(tsl.length > 0)
 		{ins += "&layers="+tsl.join(" ");}
-		if($i("pontos").value != "")
-		{
+		if($i("pontos").value != ""){
 			ins += "&pontos="+$i("pontos").value;
 			ins += "&nometemapontos="+$i("nometemapontos").value;
 		}
-		if($i("perfili") && $i("perfili").value != "")
-		{
+		if($i("perfili") && $i("perfili").value != ""){
 			ins += "&perfil="+$i("perfili").value;
 		}
-		if($i("interface").value != "")
-		{
+		if($i("interface").value != ""){
 			ins += "&interface="+$i("interface").value;
 		}
-		if($i($i3geo_gl.buscageo))
-		{
-			if($i("i3geo_gl_xmin").value != "")
-			{
-				ins += "&mapext="+$i("i3geo_gl_xmin").value+" ";
-				ins += $i("i3geo_gl_ymin").value+" ";
-				ins += $i("i3geo_gl_xmax").value+" ";
-				ins += $i("i3geo_gl_ymax").value;
-			}
+
+		if($i("i3geo_gl_xmin").value != "")	{
+			ins += "&mapext="+$i("i3geo_gl_xmin").value+" ";
+			ins += $i("i3geo_gl_ymin").value+" ";
+			ins += $i("i3geo_gl_xmax").value+" ";
+			ins += $i("i3geo_gl_ymax").value;
 		}
+
 		$i($i3geo_gl.link).href = ins;
 		$i($i3geo_gl.link).innerHTML = ins;
 	};
@@ -257,11 +189,34 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	idMenu - id do menu que ser&aacute; pesquisado
-	*/
-	this.combogrupos = function(idMenu)
-	{
-		$i($i3geo_gl.grupo).innerHTML = "<span style=color:red >Aguarde...</span>";
-		i3GEO.arvoreDeTemas.comboGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combosubgrupos",$i3geo_gl.grupo,"","530","1",idMenu);
+	 */
+	this.combogrupos = function(idMenu){
+		$("#temas").html("");
+		var grupos = function(retorno){
+			if(retorno.data){
+				var data = retorno.data,
+					grupos = data.grupos,
+					raiz = grupos[grupos.length-3].temasraiz,
+					temas = [];
+
+				//temas na raiz do menu
+				temas.push("<option value=''>Escolha um menu</option>");
+				$(raiz).each(function(i){
+					temas.push("<option value='"+raiz[i].tid+"'>"+raiz[i].nome+"</option>");
+				});
+				$("#temas").html(temas.join(""));
+				temas = [];
+				temas.push("<option value=''>Escolha um grupo</option>");
+				//grupos
+				$(grupos).each(function(i){
+					if(grupos[i].id_n1){
+						temas.push("<option value='"+grupos[i].id_n1+"'>"+grupos[i].nome+"</option>");
+					}
+				});
+				$("#grupos").html(temas.join(""));
+			}
+		};
+		i3GEO.php.pegalistadegrupos(grupos, idMenu, "sim");
 	};
 	/*
 	Function combosubgrupos
@@ -271,15 +226,35 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	idGrupo - id do grupo que ser&aacute; pesquisado
-	*/
-	this.combosubgrupos = function(idGrupo,dados)
+	 */
+	this.combosubgrupos = function(idGrupo)
 	{
-		//alert($i3geo_gl.subgrupo);
-		$i3geo_gl.combotemas(idGrupo,"",i3GEO.arvoreDeTemas.temasRaizGrupos[idGrupo]);
-		//if(dados != undefined)
-		//{$i3geo_gl.combotemas(idGrupo,$i3geo_gl.subgrupo,dados.temasgrupo);}
-		$i($i3geo_gl.subgrupo).innerHTML = "<span style=color:red >Aguarde...</span>";
-		i3GEO.arvoreDeTemas.comboSubGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combotemas",$i3geo_gl.subgrupo,"",idGrupo,"530","1");
+		$("#temas").html("");
+		var sgrupos = function(retorno){
+			if(retorno.data){
+				var data = retorno.data,
+					sgrupos = data.subgrupo,
+					raiz = data.temasgrupo,
+					temas = [];
+
+				//temas na raiz do menu
+				temas.push("<option value=''>Escolha um menu</option>");
+				$(raiz).each(function(i){
+					temas.push("<option value='"+raiz[i].tid+"'>"+raiz[i].nome+"</option>");
+				});
+				$("#temas").html(temas.join(""));
+				temas = [];
+				temas.push("<option value=''>Escolha um grupo</option>");
+				//subgrupos
+				$(sgrupos).each(function(i){
+					temas.push("<option value='"+sgrupos[i].id_n2+"'>"+sgrupos[i].nome+"</option>");
+				});
+				$("#subgrupos").html(temas.join(""));
+			}
+		};
+		i3GEO.php.pegalistadeSubgrupos(sgrupos, "",idGrupo);
+
+		//i3GEO.arvoreDeTemas.comboSubGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combotemas",$i3geo_gl.subgrupo,"",idGrupo,"","");
 	};
 	/*
 	Function combotemas
@@ -293,20 +268,20 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	idGrupo - id que identifica o grupo escolhido.
  
 	idSubGrupo - id do sibgrupo
-	*/
+	 */
 	this.combotemas = function (idGrupo,idSubGrupo,temas)
 	{
 		if(temas == undefined)
 		{temas = "";}
 		$i($i3geo_gl.tema).innerHTML = "<span style=color:red >Aguarde...</span>";
-		i3GEO.arvoreDeTemas.comboTemasMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.preseltema",$i3geo_gl.tema,"",idGrupo,idSubGrupo,"530","5","",temas);
+		i3GEO.arvoreDeTemas.comboTemasMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.preseltema",$i3geo_gl.tema,"",idGrupo,idSubGrupo,"","","",temas);
 	};
 	this.combointerfaces = function(){
 		var temp = function(retorno){
-			var ins = "<select id=interface onchange='$i3geo_gl.crialink()'><option value=''>Default</option>",
-				d = retorno.data,
-				n = d.length,
-				i;
+			var ins = "<select class='form-control' id=interface onchange='$i3geo_gl.crialink()'><option value=''>Default</option>",
+			d = retorno.data,
+			n = d.length,
+			i;
 			for(i=0; i<n; i++){
 				ins += "<option value='"+d[i]+"'>"+d[i]+"</option>";
 			}
@@ -319,7 +294,7 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Function preseltema
  
 	Compatibiliza a chamada da fun&ccedil;&atilde;o i3geo_combotemasMenu com a fun&ccedil;&atilde;o this.seltema em termos de n&uacute;mero de parametros
-	*/
+	 */
 	this.preseltema = function(idgrupo,idsubgrupo,idtema)
 	{
 		$i3geo_gl.seltema(idtema);
@@ -332,7 +307,7 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	e - elemento do DOM do objeto clicado.
-	*/
+	 */
 	this.preview = function(e)
 	{
 		var id = i3GEO.util.pegaElementoPai(e).id;
@@ -346,14 +321,16 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	e - elemento do DOM do objeto clicado.
-	*/
+	 */
 	this.descer = function(e)
 	{
-		var pai = i3GEO.util.pegaElementoPai(e);
-		divpai = pai.parentNode;
-		if(pai.nextSibling)
-		divpai.insertBefore(pai,pai.nextSibling.nextSibling);
+		var el = $("#"+e);
+		var p = el.next("ul");
+		if(p){
+			p.after(el);
+		}
 		$i3geo_gl.crialink();
+		return false;
 	};
 	/*
 	Function subir
@@ -363,13 +340,16 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	e - elemento do DOM.
-	*/
+	 */
 	this.subir = function(e)
 	{
-		var pai = i3GEO.util.pegaElementoPai(e);
-		divpai = pai.parentNode;
-		divpai.insertBefore(pai,pai.previousSibling);
+		var el = $("#"+e);
+		var p = el.prev("ul");
+		if(p){
+			p.before(el);
+		}
 		$i3geo_gl.crialink();
+		return false;
 	};
 	/*
 	Function excluir
@@ -379,101 +359,42 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
 	Parameters
  
 	e - elemento do DOM.
-	*/
-	this.excluir = function(e)
-	{
-		var pai = i3GEO.util.pegaElementoPai(e);
-		pai.parentNode.removeChild(pai);
+	 */
+	this.excluir = function(e){
+		$("#"+e).remove();
 		$i3geo_gl.crialink();
 	};
 	/*
 	Function buscageo_init
  
 	Inicializa o OpenLayers para permitir ao usu&aacute;rio escolher a abrang&ecirc;ncia espacial do link.
-	*/
-	this.buscageo_init = function()
-	{
-		var ins = "<div style=margin:10px;text-align:left; >";
-		ins += "<p class=paragrafo ><b>Utilize o navegador abaixo para definir as coordenadas geogr&aacute;ficas do seu mapa, ou digite os valores desejados (opcional):</b></p>";
-		ins += "<div id=i3geo_gl_mapa1 style='width:256px;height:256px;border:1px solid blue;display:none'></div>";
-		ins += "<div style=position:absolute;top:40px;left:270px;text-align:left; >";
-		ins += "Coordenadas geogr&aacute;ficas:<br><br>";
-		ins += "<table style=text-align:left >";
-		ins += "<tr><td style=text-align:left >Longitude m&iacute;nima:</td>";
-		ins += "<td><div style=padding:5px;width:80px; id=paiXmin >";
-		ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_xmin />";
-		ins += "</div></td></tr>";
-		ins += "<tr><td style=text-align:left >Longitude m&aacute;xima:</td>";
-		ins += "<td><div style=padding:5px;width:80px; id=paiXmax >";
-		ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_xmax />";
-		ins += "</div></td></tr>";
-		ins += "<tr><td style=text-align:left >Latitude m&iacute;nima:</td>";
-		ins += "<td><div style=padding:5px;width:80px; id=paiYmin >";
-		ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_ymin />";
-		ins += "</div></td></tr>";
-		ins += "<tr><td style=text-align:left >Latitude m&aacute;xima:</td>";
-		ins += "<td><div style=padding:5px;width:80px; id=paiYmax >";
-		ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_ymax />";
-		ins += "</div></td></tr></table>";
-		ins += "<input style='width:140px;position:relative;top:10px;left:-10px' class=aplicar type='button' value='capturar' onclick='$i3geo_gl.OL.capturageo()' />";
-		ins += "</div></div>";
-		document.getElementById(this.buscageo).innerHTML = ins;
-		$i("i3geo_gl_mapa1").style.display = "block";
-		$i3geo_gl.OL = new OpenLayers.Map('i3geo_gl_mapa1',{controls:[],numZoomLevels: 13});
-		//
-		//layers
-		//
-		var wsm = new OpenLayers.Layer.ArcGIS93Rest(
-			"ESRI World Street Map",
-			"http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
-			{
-				format : "jpeg"
-			}, {
-				isBaseLayer : true,
-				visibility : true
-			});
-		$i3geo_gl.OL.addLayer(wsm);
-
-		var bra = new OpenLayers.Layer.WMS(
-			"Base carto MMA",
-			"http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
-			{
-				layers : "baseraster",
-				srs : "EPSG:4618",
-				format : "image/png",
-				isBaseLayer : false
-			}, {
-				isBaseLayer : true,
-				visibility : false
-			});
-		$i3geo_gl.OL.addLayer(bra);
-
-		//
-		//zoom e controle de layers
-		//
-		var ls = new OpenLayers.Control.LayerSwitcher();
-		$i3geo_gl.OL.addControl(ls);
-		$i(ls.id).style.zIndex=2000;
-		$i3geo_gl.OL.setCenter(new OpenLayers.LonLat(-55,-14), 3);
-		var panel = new OpenLayers.Control.NavToolbar();
-		$i3geo_gl.OL.addControl(panel);
-		panel.div.style.left="-4px";
-		panel.div.style.top="-298px";
-		var zb = new OpenLayers.Control.PanZoomBar();
-		$i3geo_gl.OL.addControl(zb);
-		zb.div.style.left="0px";
+	 */
+	this.buscageo_init = function(){
+		$i3geo_gl.OL = new ol.Map({
+			layers: [
+			         new ol.layer.Tile({
+			        	 source: new ol.source.OSM()
+			         })
+			         ],
+			         target: 'i3geo_gl_mapa1',
+			         view: new ol.View({
+			        	 center: [0, 0],
+			        	 zoom: 2
+			         })
+		});
 		$i3geo_gl.OL.capturageo = function()
 		{
-			var b = $i3geo_gl.OL.getExtent();
-			$i("i3geo_gl_xmin").value = b.left;
-			$i("i3geo_gl_xmax").value = b.right;
-			$i("i3geo_gl_ymin").value = b.bottom;
-			$i("i3geo_gl_ymax").value = b.top;
+			var e = $i3geo_gl.OL.getView().calculateExtent($i3geo_gl.OL.getSize());
+			e = ol.proj.transformExtent(e,"EPSG:900913","EPSG:4326");
+			$i("i3geo_gl_xmin").value = e[0];
+			$i("i3geo_gl_xmax").value = e[2];
+			$i("i3geo_gl_ymin").value = e[1];
+			$i("i3geo_gl_ymax").value = e[3];
+			$(".coord").addClass("is-focused");
 			$i3geo_gl.crialink();
 		};
 	};
 }
-
 /*
 Function i3geo_gl_inicia
  
@@ -482,23 +403,20 @@ Inicia a interface do gerador de links.
 Parameters
  
 objeto_i3geo_gl_configura - objeto com os paramentros de configura&ccedil;&atilde;o criado pela fun&ccedil;&atilde;o i3geo_gl_configura
-*/
+ */
 function i3geo_gl_inicia(objeto_i3geo_gl_configura)
 {
 	/*
 	Propriedade $i3geo_gl
  
 	Cont&eacute;m o objeto $i3geo_gl com todas as propriedades e fun&ccedil;&otilde;es de controle da interface
-	*/
+	 */
 	i3GEO.configura.sid = "";
 	$i3geo_gl = objeto_i3geo_gl_configura;
-	if(document.getElementById($i3geo_gl.buscageo))
-	$i3geo_gl.buscageo_init();
+	if(document.getElementById($i3geo_gl.buscageo)){
+		$i3geo_gl.buscageo_init();
+	}
 	$i3geo_gl.combointerfaces();
+	//pega a lista de menus e as
 	i3GEO.arvoreDeTemas.comboMenus($i3geo_gl.loc_i3geo,"$i3geo_gl.combogrupos",$i3geo_gl.menu,"","530","1","");
-	/*
-	$inputText("paiPontos","","pontos","","","")
-	$inputText("paiNometemapontos","","nometemapontos","","","")
-	$inputText("paiPerfil","","perfil","","","")
-	*/
 }
 \ No newline at end of file
@@ -20,9 +20,39 @@ if (file_exists ( $dir_tmp )) {
 }
 error_reporting ( 0 );
 include "../init/head.php";
+
 ?>
-<body style="background-color: #eeeeee; padding-top: 55px; position: relative;" id="affix-topo"
-	data-spy="scroll" data-target="#indiceSpy" data-offset="80">
+<script src="../pacotes/ol3/ol-debug.js"></script>
+<style>
+.checkbox, .radio {
+	margin-bottom: 5px;
+	margin-top: 0;
+	position: relative;
+	top: 1px;
+}
+</style>
+<script id="templateCamada" type="x-tmpl-mustache">
+<ul class="list-inline" id="linha_{{{idtema}}}">
+	<li>
+		<button onclick="$i3geo_gl.excluir('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
+			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
+		</button>
+		<button onclick="$i3geo_gl.subir('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
+			<span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
+		</button>
+		<button onclick="$i3geo_gl.descer('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
+			<span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
+		</button>
+	</li>
+	<li class="checkbox">
+		<label>
+			<input onclick="$i3geo_gl.crialink();" type="checkbox" value="{{{idtema}}}"><span class="checkbox-material"><span class="check"></span></span> {{{idtema}}}
+		</label>
+	</li>
+</ul>
+</script>
+
+<body style="padding-top: 55px; position: relative;">
 	<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
 		<div class="container-fluid">
 			<div class="navbar-header">
@@ -36,132 +66,183 @@ include &quot;../init/head.php&quot;;
 			</div>
 		</div>
 	</nav>
-	<!--para as mensagens de alerta-->
-	<div class="navbar-fixed-top alert alert-success text-center" style="padding: 0px;"></div>
+	<nav style="padding-top: 10px;" class="navbar-fixed-top">
+		<div class="container">
+			<div class="well well-sm">
+				<div class="bs-component btn-group-sm pull-left" style="top: -2px; position: relative">
+					<button onclick="i3GEO.util.copyToClipboard($('#link').html());"
+						class="btn btn-primary btn-fab btn-fab-mini">
+						<i class="fa fa-files-o" aria-hidden="true"></i>
+					</button>
+				</div>
+				&nbsp; <a href="" id="link" target="_blank">http://</a>
+			</div>
+		</div>
+	</nav>
 	<div class="container-fluid">
 		<div class="row">
 			<ol class="breadcrumb">
 				<li><a href="../init/index.php">i3Geo</a></li>
-				<li class="active">Mapas de usu&aacute;rios</li>
+				<li class="active">Perm links</li>
 			</ol>
 		</div>
 	</div>
 	<div class="container">
-		<fieldset>
-			<legend style="font-size: 14px;"></legend>
-			<br>
-			<p class=paragrafo>
-				Para ver todos os par&acirc;metros de inicializa&ccedil;&atilde;o que podem ser utilizados: <a
-					href="ms_criamapa.php?ajuda" target=_blank>ms_criamapa.php?ajuda</a>
+		<div class="jumbotron">
+			<h1>Construtor de links</h1>
+			<p>Aqui voc&ecirc; pode gerar links para abrir o i3Geo de forma personalizada. Os links podem
+				ser inclu&iacute;dos em qualquer p&aacute;gina WEB, sendo poss&iacute;vel definir quais os temas
+				ser&atilde;o mostrados e qual a extens&atilde;o geogr&aacute;fica do mapa.</p>
+			<p>
+				Para ver todos os par&acirc;metros de inicializa&ccedil;&atilde;o que podem ser utilizados
+				acesse esse link: <a href="../ms_criamapa.php?ajuda" target=_blank>ms_criamapa.php?ajuda</a>
 			</p>
+		</div>
+		<div class="well bs-component">
+			<form class="form-vertical">
+				<fieldset>
+					<legend>Escolha das camadas</legend>
+					<h4>Escolha as camadas que ser&atilde;o inclu&iacute;das no mapa. As camadas são
+						organizadas em uma hierarquia começando em menu.</h4>
  
-			<p class=paragrafo>
-				Aqui voc&ecirc; pode gerar links para abrir o i3Geo de forma personalizada. Os links podem ser
-				inclu&iacute;dos em qualquer p&aacute;gina WEB, sendo poss&iacute;vel definir quais os temas
-				ser&atilde;o mostrados e qual a extens&atilde;o geogr&aacute;fica do mapa.<br> <br>
-			</p>
-		</fieldset>
-		<fieldset style="min-height: 100px;">
-			<p class=paragrafo>
-				Este &eacute; o link para abrir o mapa. Copie e cole em sua p&aacute;gina na internet ou clique
-				para testar: <a style="color: blue; font-size: 12px" href="" id=link target=blanck></a>
-
-		</fieldset>
-		<fieldset>
-			<div style="margin: 10px;">
-				<p class=paragrafo>
-					<b>Escolha os temas que ser&atilde;o inclu&iacute;dos no mapa (opcional):</b>
-				</p>
-				<p class=paragrafo>Menu:
-
-
-				<div id=menus style="text-align: left;">Aguarde...</div>
-				<br>
-				<p class=paragrafo>Grupo:
-
-
-				<div id=grupos style="text-align: left;">&nbsp;</div>
-				<br>
-				<p class=paragrafo>Sub-grupo:
+					<div class="form-group">
+						<label for="menus">Menu</label> <select onchange="$i3geo_gl.combogrupos(this.value)"
+							class="form-control" id="menus">
+						</select> <span class="material-input"></span>
+					</div>
+					<div class="form-group">
+						<label for="grupos">Grupo</label> <select onchange="$i3geo_gl.combosubgrupos(this.value)"
+							class="form-control" id="grupos">
+						</select> <span class="material-input"></span>
+					</div>
+					<div class="form-group">
+						<label for="subgrupos">Subgrupo</label> <select onchange="$i3geo_gl.combotemas('',this.value)"
+							class="form-control" id="subgrupos">
+						</select> <span class="material-input"></span>
+					</div>
+					<div class="form-group">
+						<label for="temas">Temas</label> <select style="font-size: 15px;" multiple
+							onchange="$i3geo_gl.preseltema('','',this.value)" class="form-control" id="temas">
+						</select> <span class="help-block">Na lista abaixo voc&ecirc; pode remover temas j&aacute;
+							escolhidos. Clique em v&aacute;rios temas para escolher mais de um</span> <span
+							class="material-input"></span>
+					</div>
+					<div class="form-group">
+						<label for="temasa">Temas j&aacute; escolhidos. Os que estiverem marcados,
+							ficar&atilde;o ligados logo ao abrir o mapa</label>
+						<div id="temasa" class="form-control" style='height: 120px; overflow: auto'></div>
+					</div>
+				</fieldset>
+			</form>
+		</div>
+		<div class="well bs-component">
+			<form class="form-vertical">
+				<fieldset>
+					<legend>Coordenadas</legend>
+					<p>Se vc quiser, o mapa poder&aacute; ser aberto mostrando pontos, digite abaixo as
+						coordenadas dos pontos em d&eacute;cimos de grau (exemplo: -54 -12 -54 1 -51 -15)</p>
+					<div class="form-group label-floating">
+						<label class="control-label" for="pontos">Coordenadas dos pontos</label> <input
+							class="form-control" id="pontos" type="text" onchange="$i3geo_gl.crialink()" />
+					</div>
+					<div class="form-group label-floating">
+						<label class="control-label" for="nometemapontos">Nome do tema para aparecer na
+							legenda</label> <input class="form-control" id="nometemapontos" type="text"
+							onchange="$i3geo_gl.crialink()" />
+					</div>
+				</fieldset>
+			</form>
+		</div>
+		<div class="well bs-component">
+			<form class="form-vertical">
+				<fieldset>
+					<legend>Perfis</legend>
+					<p>Caso existam perfis definidos na configura&ccedil;&atilde;o do menu de temas, vc pode
+						restringir a lista de temas do menu de adi&ccedil;&atilde;o de temas do i3Geo</p>
+					<div class="form-group label-floating">
+						<label class="control-label" for="perfili">Perfil</label> <input class="form-control"
+							id="perfili" type="text" onchange="$i3geo_gl.crialink()" />
+					</div>
+				</fieldset>
+			</form>
+		</div>
+		<div class="well bs-component">
+			<form class="form-vertical">
+				<fieldset>
+					<legend>Mapa</legend>
+					<div class="form-group">
+						<label for="temas">Escolha a interface que ser&aacute; utilizada para construir o mapa</label>
+						<div id="comboInterfaces"></div>
+						<span class="material-input"></span>
+					</div>
+				</fieldset>
+			</form>
+		</div>
+		<div class="well bs-component">
+			<form class="form-vertical">
+				<fieldset>
+					<legend>Extens&atilde;o geogr&aacute;fica</legend>
  
+					<div class="row">
+						<div class="col-sm-6 text-left">
+							<label> Utilize o navegador abaixo para definir as coordenadas geogr&aacute;ficas do
+								seu mapa. Ap&oacute;s escolher a regi&atilde;o, clique no botão de captura.</label>
+							<div class="row">
+								<div class="col-sm-6 text-center">
+									<div id="i3geo_gl_mapa1" style="width: 256px; height: 256px; border: 1px solid gray;"></div>
+								</div>
+								<div class="col-sm-6 text-center">
+									<button onclick="$i3geo_gl.OL.capturageo();return false;" class="btn btn-primary">Capturar</button>
+								</div>
+							</div>
+						</div>
+						<div class="col-sm-6 text-left">
+							<label>Coordenadas geogr&aacute;ficas escolhidas (em d&eacute;cimos de grau). Digite
+								os valores ou capture as coordenadas</label>
  
-				<div id=subgrupos style="text-align: left;">&nbsp;</div>
-				<br>
-				<p class=paragrafo>Tema:
+							<div class="coord form-group label-floating">
+								<label class="control-label" >X mínimo (longitude oeste -)</label> <input
+									class="form-control" id="i3geo_gl_xmin" type="text" onchange="$i3geo_gl.crialink()" />
+							</div>
+							<div class="coord form-group label-floating">
+								<label class="control-label" for="i3geo_gl_xmax">X m&aacute;ximo (longitude leste +)</label> <input
+									class="form-control" id="i3geo_gl_xmax" type="text" onchange="$i3geo_gl.crialink()" />
+							</div>
+							<div class="coord form-group label-floating">
+								<label class="control-label" for="i3geo_gl_ymin">Y m&iacute;nimo (latitude sul -)</label> <input
+									class="form-control" id="i3geo_gl_ymin" type="text" onchange="$i3geo_gl.crialink()" />
+							</div>
  
+							<div class="coord form-group label-floating">
+								<label class="control-label" for="i3geo_gl_ymax">Y m&aacute;ximo (latitude norte +)</label> <input
+									class="form-control" id="i3geo_gl_ymax" type="text" onchange="$i3geo_gl.crialink()" />
+							</div>
+						</div>
+					</div>
  
-				<div id=temas style="text-align: left;">&nbsp;</div>
-				<br>
-				<div style="left: 0px; text-align: left;">
-					Temas j&aacute; escolhidos. Os que estiverem marcados, ficar&atilde;o ligados logo ao abrir o
-					mapa:
-					<div id=temasa
-						style='width: 530px; border: 1px gray solid; height: 90px; top: 10px; left: 0px; text-align: left; overflow: auto'></div>
-				</div>
-			</div>
+				</fieldset>
+			</form>
+		</div>
  
-		</fieldset>
-		<fieldset>
-			<div style="margin: 10px;">
-				<p class=paragrafo>
-					<b>Se vc quiser, o mapa poder&aacute; ser aberto mostrando pontos, digite abaixo as coordenadas
-						dos pontos em d&eacute;cimos de grau (exemplo: -54 -12 -54 1 -51 -15) (opcional):</b>
-				</p>
-				<p class=paragrafo>Coordenadas dos pontos:</p>
-				<div style="padding: 5px;" id=paiPontos>
-					<input type=text size=60 id=pontos value="" onchange="$i3geo_gl.crialink()" />
-				</div>
-				<p class=paragrafo>Nome do tema para aparecer na legenda:</p>
-				<div style="padding: 5px;" id=paiNometemapontos>
-					<input type=text size=60 id=nometemapontos value="" onchange="$i3geo_gl.crialink()" /> &nbsp;
-				</div>
-			</div>
-		</fieldset>
-		<fieldset>
-			<div style="margin: 10px;">
-				<p class=paragrafo>
-					<b>Caso existam perfis definidos na configura&ccedil;&atilde;o do menu de temas, vc pode
-						restringir a lista de temas do menu de adi&ccedil;&atilde;o de temas do I3Geo (opcional)</b>
-				</p>
-				<p class=paragrafo>Perfil:</p>
-				<input onchange="$i3geo_gl.crialink()" type=text size=60 id=perfili value=""
-					style="border: 1px solid black" />
-			</div>
-		</fieldset>
-		<fieldset>
-			<div style="margin: 10px; text-align: left;">
-				<p class=paragrafo>
-					<b>Escolha a interface para o mapa (opcional)</b>
-				</p>
-				<div id="comboInterfaces" style="text-align: left;">
-					<select id=interface onchange="$i3geo_gl.crialink()">
-						<option value="">Default</option>
-						<option value="black_gm.phtml">Google Maps</option>
-						<option value="googleearth.phtml">Google Earth</option>
-						<option value="black_ol.htm">Openlayers</option>
-						<option value="black_osm.htm">Open Street Map</option>
-					</select>
-				</div>
-			</div>
-		</fieldset>
-		<fieldset id=buscageo></fieldset>
 	</div>
-
 	<script type="text/javascript" src="../classesjs/i3geo_tudo_compacto6.js"></script>
 	<script src='dicionario.js'></script>
 	<script src='index.js'></script>
 	<script>
-	//$(document).ready(function(){
-		i3GEO.configura = {"locaplic" : window.location.href.split("/permlinks")[0],"sid": ""};
-		$(".active").html($trad("mapas",g_traducao_mapas));
-		OpenLayers.ImgPath = "../pacotes/openlayers/img/";
+		//$(document).ready(function(){
+		i3GEO.configura = {
+			"locaplic" : window.location.href.split("/permlinks")[0],
+			"sid" : ""
+		};
+		$(".active").html($trad("migalha", g_traducao_permlinks));
  
-		var i3geo_gl_configura =
-			new i3geo_gl_configura(i3GEO.configura.locaplic, "", "temasa", "link", "grupos", "subgrupos", "temas", "buscageo", "menus");
+		var i3geo_gl_configura = new i3geo_gl_configura(
+				i3GEO.configura.locaplic, "", "temasa", "link", "grupos",
+				"subgrupos", "temas", "buscageo", "menus");
 		i3geo_gl_inicia(i3geo_gl_configura);
-
+		$i3geo_gl.buscageo_init();
 		$.material.init();
-	//});
+		//});
 	</script>
 </body>
 </html>
...	...	@@ -78,7 +78,7 @@ botoesIni = [
78	78	"target": "_self"
79	79	},{
80	80	"img":"insert-link.png",
81		- "href": location.href.replace("index.php","") + "../geradordelinks.htm",
	81	+ "href": location.href.replace("index.php","") + "../permlinks/index.php",
82	82	"titulo":$trad(13,g_traducao_init),
83	83	"subtitulo": $trad("13a",g_traducao_init),
84	84	"fa": "map-o",
...	...
1	1	//veja em index.js o objeto que utiliza essa traducao
2		-g_traducao_mapas =
	2	+g_traducao_permlinks =
3	3	{
4		- "mapas" : [{
5		- pt : "Mapas de usuários",
6		- en : "",
7		- es : ""
8		- }],
9		- "copiado" : [{
10		- pt : "Copiado",
	4	+ "migalha" : [{
	5	+ pt : "Links permanentes",
11	6	en : "",
12	7	es : ""
13	8	}]
...	...
...	...	@@ -46,37 +46,11 @@ Veja
46	46	<i3geo/geradordelinks.htm>
47	47
48	48	<i3geo/classesjs/funcoes.js>
49		-*/
50		-//
	49	+ */
	50	+
51	51	//carrega as dependências
52		-//
53		-
54		-//TODO aplicar o padrao de css nos inputs (ver HTML)
55		-(function(){
56		- var scriptLocation = "";
57		- var scripts = document.getElementsByTagName('script');
58		- for (var i = 0; i < scripts.length; i++) {
59		- var src = scripts[i].getAttribute('src');
60		- if (src) {
61		- var index = src.lastIndexOf("index.js");
62		- // is it found, at the end of the URL?
63		- if ((index > -1) && (index + "index.js".length == src.length)) {
64		- scriptLocation = src.slice(0, -"index.js".length);
65		- break;
66		- }
67		- }
68		- }
69		- var allScriptTags = "";
70		- var jsfiles = [];
71		- //jsfiles[0] = "i3geo_tudo_compacto.js.php"
72		- jsfiles[0] = "../pacotes/openlayers/OpenLayers2131.js.php";
73		- for (var i = 0; i < jsfiles.length; i++)
74		- {
75		- var currentScriptTag = "<script src='" + scriptLocation + jsfiles[i] + "'></script>";
76		- allScriptTags += currentScriptTag;
77		- }
78		- document.write(allScriptTags);
79		-})();
	52	+
	53	+
80	54	/*
81	55	Classe i3geo_gl_configura
82	56
...	...	@@ -105,7 +79,7 @@ tema - Id do elemento HTML que receber&aacute; o combo com a lista de temas
105	79	buscageo - Id do elemento HTML onde será incluída a opção de busca de coordenadas geográficas
106	80
107	81	menu - id do elemento HTML onde será incluido a lista de menus
108		-*/
	82	+ */
109	83	function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tema,buscageo,menu)
110	84	{
111	85	/*
...	...	@@ -118,31 +92,31 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
118	92	this.link = link;
119	93	/*
120	94	Guarda o valor do parametro seltema
121		- */
	95	+ */
122	96	this.nomeseltema = nomeseltema;
123	97	/*
124	98	Guarda o valor do parametro loc_i3geo
125		- */
	99	+ */
126	100	this.loc_i3geo = loc_i3geo;
127	101	/*
128	102	Guarda o valor do parametro menu
129		- */
	103	+ */
130	104	this.menu = menu;
131	105	/*
132	106	Guarda o valor do parametro grupo
133		- */
	107	+ */
134	108	this.grupo = grupo;
135	109	/*
136	110	Guarda o valor do parametro subgrupo
137		- */
	111	+ */
138	112	this.subgrupo = subgrupo;
139	113	/*
140	114	Guarda o valor do parametro tema
141		- */
	115	+ */
142	116	this.tema = tema;
143	117	/*
144	118	Guarda o valor do parametro buscageo
145		- */
	119	+ */
146	120	this.buscageo = buscageo;
147	121	/*
148	122	Function seltema
...	...	@@ -155,65 +129,28 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
155	129
156	130	idtema = identificador do tema conforme definido em menutemas/menutemas.xml
157	131	*/
158		- this.seltema = function(idtema)
159		- {
160		- var novodiv = document.createElement("div");
161		- novodiv.style.textAlign="left";
162		- novodiv.id = idtema;
163		- $i($i3geo_gl.temasa).appendChild(novodiv);
164		- var novoel = document.createElement("img");
165		- novoel.title = "excluir";
166		- //novoel.onclick = excluir
167		- eval("novoel.onclick = $i3geo_gl.excluir");
168		- novoel.src = "imagens/x.png";
169		- novodiv.appendChild(novoel);
170		- var novoel = document.createElement("img");
171		- novoel.title = "subir";
172		- novoel.src = "imagens/sobe.gif";
173		- //novoel.onclick = subir
174		- eval("novoel.onclick = $i3geo_gl.subir");
175		- novodiv.appendChild(novoel);
176		- var novoel = document.createElement("img");
177		- novoel.title = "descer";
178		- novoel.src = "imagens/desce.gif";
179		- //novoel.onclick = descer
180		- eval("novoel.onclick = $i3geo_gl.descer;");
181		- novodiv.appendChild(novoel);
182		- var novoel = document.createElement("input");
183		- eval("novoel.onclick = function(){$i3geo_gl.crialink()}");
184		- novoel.title = "visível/não visível";
185		- novoel.type = "checkbox";
186		- novoel.style.cursor="pointer";
187		- novoel.style.top="3px";
188		- novoel.style.position="relative";
189		- novoel.style.border="0px";
190		- novoel.value=idtema;
191		- novodiv.appendChild(novoel);
192		- var novoel = document.createElement("span");
193		- novoel.style.cursor="pointer";
194		- novoel.title="preview";
195		- novoel.style.textDecoration = "underline";
196		- novoel.innerHTML = idtema;
197		- eval("novoel.onclick = $i3geo_gl.preview");
198		- novodiv.appendChild(novoel);
199		- novodiv.appendChild(document.createElement("br"));
	132	+ this.seltema = function(idtema){
	133	+ var html = Mustache.to_html(
	134	+ $("#templateCamada").html(),
	135	+ {"idtema": idtema}
	136	+ );
	137	+ //console.info(html)
	138	+ $("#"+$i3geo_gl.temasa).append(html);
200	139	this.crialink();
201	140	};
202	141	/*
203	142	Function crialink
204	143
205	144	Pega os parametros especificados pelo usuário e monta o link para mostrar na tela.
206		- */
	145	+ */
207	146	this.crialink = function()
208	147	{
209	148	var ins = $i3geo_gl.loc_i3geo+"/ms_criamapa.php?";
210	149	var iguias = $i($i3geo_gl.temasa).getElementsByTagName("input");
211	150	var tsl = []; //temas ligados
212	151	var tsd = []; //temas
213		- for (var i=0;i<iguias.length; i++)
214		- {
215		- if (iguias[i].type == "checkbox")
216		- {
	152	+ for (var i=0;i<iguias.length; i++){
	153	+ if (iguias[i].type == "checkbox"){
217	154	tsd.push(iguias[i].value);
218	155	if (iguias[i].checked == true)
219	156	{tsl.push(iguias[i].value);}
...	...	@@ -223,29 +160,24 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
223	160	{ins += "&temasa="+tsd.join(" ");}
224	161	if(tsl.length > 0)
225	162	{ins += "&layers="+tsl.join(" ");}
226		- if($i("pontos").value != "")
227		- {
	163	+ if($i("pontos").value != ""){
228	164	ins += "&pontos="+$i("pontos").value;
229	165	ins += "&nometemapontos="+$i("nometemapontos").value;
230	166	}
231		- if($i("perfili") && $i("perfili").value != "")
232		- {
	167	+ if($i("perfili") && $i("perfili").value != ""){
233	168	ins += "&perfil="+$i("perfili").value;
234	169	}
235		- if($i("interface").value != "")
236		- {
	170	+ if($i("interface").value != ""){
237	171	ins += "&interface="+$i("interface").value;
238	172	}
239		- if($i($i3geo_gl.buscageo))
240		- {
241		- if($i("i3geo_gl_xmin").value != "")
242		- {
243		- ins += "&mapext="+$i("i3geo_gl_xmin").value+" ";
244		- ins += $i("i3geo_gl_ymin").value+" ";
245		- ins += $i("i3geo_gl_xmax").value+" ";
246		- ins += $i("i3geo_gl_ymax").value;
247		- }
	173	+
	174	+ if($i("i3geo_gl_xmin").value != "") {
	175	+ ins += "&mapext="+$i("i3geo_gl_xmin").value+" ";
	176	+ ins += $i("i3geo_gl_ymin").value+" ";
	177	+ ins += $i("i3geo_gl_xmax").value+" ";
	178	+ ins += $i("i3geo_gl_ymax").value;
248	179	}
	180	+
249	181	$i($i3geo_gl.link).href = ins;
250	182	$i($i3geo_gl.link).innerHTML = ins;
251	183	};
...	...	@@ -257,11 +189,34 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
257	189	Parameters
258	190
259	191	idMenu - id do menu que será pesquisado
260		- */
261		- this.combogrupos = function(idMenu)
262		- {
263		- $i($i3geo_gl.grupo).innerHTML = "<span style=color:red >Aguarde...</span>";
264		- i3GEO.arvoreDeTemas.comboGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combosubgrupos",$i3geo_gl.grupo,"","530","1",idMenu);
	192	+ */
	193	+ this.combogrupos = function(idMenu){
	194	+ $("#temas").html("");
	195	+ var grupos = function(retorno){
	196	+ if(retorno.data){
	197	+ var data = retorno.data,
	198	+ grupos = data.grupos,
	199	+ raiz = grupos[grupos.length-3].temasraiz,
	200	+ temas = [];
	201	+
	202	+ //temas na raiz do menu
	203	+ temas.push("<option value=''>Escolha um menu</option>");
	204	+ $(raiz).each(function(i){
	205	+ temas.push("<option value='"+raiz[i].tid+"'>"+raiz[i].nome+"</option>");
	206	+ });
	207	+ $("#temas").html(temas.join(""));
	208	+ temas = [];
	209	+ temas.push("<option value=''>Escolha um grupo</option>");
	210	+ //grupos
	211	+ $(grupos).each(function(i){
	212	+ if(grupos[i].id_n1){
	213	+ temas.push("<option value='"+grupos[i].id_n1+"'>"+grupos[i].nome+"</option>");
	214	+ }
	215	+ });
	216	+ $("#grupos").html(temas.join(""));
	217	+ }
	218	+ };
	219	+ i3GEO.php.pegalistadegrupos(grupos, idMenu, "sim");
265	220	};
266	221	/*
267	222	Function combosubgrupos
...	...	@@ -271,15 +226,35 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
271	226	Parameters
272	227
273	228	idGrupo - id do grupo que será pesquisado
274		- */
275		- this.combosubgrupos = function(idGrupo,dados)
	229	+ */
	230	+ this.combosubgrupos = function(idGrupo)
276	231	{
277		- //alert($i3geo_gl.subgrupo);
278		- $i3geo_gl.combotemas(idGrupo,"",i3GEO.arvoreDeTemas.temasRaizGrupos[idGrupo]);
279		- //if(dados != undefined)
280		- //{$i3geo_gl.combotemas(idGrupo,$i3geo_gl.subgrupo,dados.temasgrupo);}
281		- $i($i3geo_gl.subgrupo).innerHTML = "<span style=color:red >Aguarde...</span>";
282		- i3GEO.arvoreDeTemas.comboSubGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combotemas",$i3geo_gl.subgrupo,"",idGrupo,"530","1");
	232	+ $("#temas").html("");
	233	+ var sgrupos = function(retorno){
	234	+ if(retorno.data){
	235	+ var data = retorno.data,
	236	+ sgrupos = data.subgrupo,
	237	+ raiz = data.temasgrupo,
	238	+ temas = [];
	239	+
	240	+ //temas na raiz do menu
	241	+ temas.push("<option value=''>Escolha um menu</option>");
	242	+ $(raiz).each(function(i){
	243	+ temas.push("<option value='"+raiz[i].tid+"'>"+raiz[i].nome+"</option>");
	244	+ });
	245	+ $("#temas").html(temas.join(""));
	246	+ temas = [];
	247	+ temas.push("<option value=''>Escolha um grupo</option>");
	248	+ //subgrupos
	249	+ $(sgrupos).each(function(i){
	250	+ temas.push("<option value='"+sgrupos[i].id_n2+"'>"+sgrupos[i].nome+"</option>");
	251	+ });
	252	+ $("#subgrupos").html(temas.join(""));
	253	+ }
	254	+ };
	255	+ i3GEO.php.pegalistadeSubgrupos(sgrupos, "",idGrupo);
	256	+
	257	+ //i3GEO.arvoreDeTemas.comboSubGruposMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.combotemas",$i3geo_gl.subgrupo,"",idGrupo,"","");
283	258	};
284	259	/*
285	260	Function combotemas
...	...	@@ -293,20 +268,20 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
293	268	idGrupo - id que identifica o grupo escolhido.
294	269
295	270	idSubGrupo - id do sibgrupo
296		- */
	271	+ */
297	272	this.combotemas = function (idGrupo,idSubGrupo,temas)
298	273	{
299	274	if(temas == undefined)
300	275	{temas = "";}
301	276	$i($i3geo_gl.tema).innerHTML = "<span style=color:red >Aguarde...</span>";
302		- i3GEO.arvoreDeTemas.comboTemasMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.preseltema",$i3geo_gl.tema,"",idGrupo,idSubGrupo,"530","5","",temas);
	277	+ i3GEO.arvoreDeTemas.comboTemasMenu($i3geo_gl.loc_i3geo,"$i3geo_gl.preseltema",$i3geo_gl.tema,"",idGrupo,idSubGrupo,"","","",temas);
303	278	};
304	279	this.combointerfaces = function(){
305	280	var temp = function(retorno){
306		- var ins = "<select id=interface onchange='$i3geo_gl.crialink()'><option value=''>Default</option>",
307		- d = retorno.data,
308		- n = d.length,
309		- i;
	281	+ var ins = "<select class='form-control' id=interface onchange='$i3geo_gl.crialink()'><option value=''>Default</option>",
	282	+ d = retorno.data,
	283	+ n = d.length,
	284	+ i;
310	285	for(i=0; i<n; i++){
311	286	ins += "<option value='"+d[i]+"'>"+d[i]+"</option>";
312	287	}
...	...	@@ -319,7 +294,7 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
319	294	Function preseltema
320	295
321	296	Compatibiliza a chamada da função i3geo_combotemasMenu com a função this.seltema em termos de número de parametros
322		- */
	297	+ */
323	298	this.preseltema = function(idgrupo,idsubgrupo,idtema)
324	299	{
325	300	$i3geo_gl.seltema(idtema);
...	...	@@ -332,7 +307,7 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
332	307	Parameters
333	308
334	309	e - elemento do DOM do objeto clicado.
335		- */
	310	+ */
336	311	this.preview = function(e)
337	312	{
338	313	var id = i3GEO.util.pegaElementoPai(e).id;
...	...	@@ -346,14 +321,16 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
346	321	Parameters
347	322
348	323	e - elemento do DOM do objeto clicado.
349		- */
	324	+ */
350	325	this.descer = function(e)
351	326	{
352		- var pai = i3GEO.util.pegaElementoPai(e);
353		- divpai = pai.parentNode;
354		- if(pai.nextSibling)
355		- divpai.insertBefore(pai,pai.nextSibling.nextSibling);
	327	+ var el = $("#"+e);
	328	+ var p = el.next("ul");
	329	+ if(p){
	330	+ p.after(el);
	331	+ }
356	332	$i3geo_gl.crialink();
	333	+ return false;
357	334	};
358	335	/*
359	336	Function subir
...	...	@@ -363,13 +340,16 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
363	340	Parameters
364	341
365	342	e - elemento do DOM.
366		- */
	343	+ */
367	344	this.subir = function(e)
368	345	{
369		- var pai = i3GEO.util.pegaElementoPai(e);
370		- divpai = pai.parentNode;
371		- divpai.insertBefore(pai,pai.previousSibling);
	346	+ var el = $("#"+e);
	347	+ var p = el.prev("ul");
	348	+ if(p){
	349	+ p.before(el);
	350	+ }
372	351	$i3geo_gl.crialink();
	352	+ return false;
373	353	};
374	354	/*
375	355	Function excluir
...	...	@@ -379,101 +359,42 @@ function i3geo_gl_configura(loc_i3geo,nomeseltema,temasa,link,grupo,subgrupo,tem
379	359	Parameters
380	360
381	361	e - elemento do DOM.
382		- */
383		- this.excluir = function(e)
384		- {
385		- var pai = i3GEO.util.pegaElementoPai(e);
386		- pai.parentNode.removeChild(pai);
	362	+ */
	363	+ this.excluir = function(e){
	364	+ $("#"+e).remove();
387	365	$i3geo_gl.crialink();
388	366	};
389	367	/*
390	368	Function buscageo_init
391	369
392	370	Inicializa o OpenLayers para permitir ao usuário escolher a abrangência espacial do link.
393		- */
394		- this.buscageo_init = function()
395		- {
396		- var ins = "<div style=margin:10px;text-align:left; >";
397		- ins += "<p class=paragrafo ><b>Utilize o navegador abaixo para definir as coordenadas geográficas do seu mapa, ou digite os valores desejados (opcional):</b></p>";
398		- ins += "<div id=i3geo_gl_mapa1 style='width:256px;height:256px;border:1px solid blue;display:none'></div>";
399		- ins += "<div style=position:absolute;top:40px;left:270px;text-align:left; >";
400		- ins += "Coordenadas geográficas:<br><br>";
401		- ins += "<table style=text-align:left >";
402		- ins += "<tr><td style=text-align:left >Longitude mínima:</td>";
403		- ins += "<td><div style=padding:5px;width:80px; id=paiXmin >";
404		- ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_xmin />";
405		- ins += "</div></td></tr>";
406		- ins += "<tr><td style=text-align:left >Longitude máxima:</td>";
407		- ins += "<td><div style=padding:5px;width:80px; id=paiXmax >";
408		- ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_xmax />";
409		- ins += "</div></td></tr>";
410		- ins += "<tr><td style=text-align:left >Latitude mínima:</td>";
411		- ins += "<td><div style=padding:5px;width:80px; id=paiYmin >";
412		- ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_ymin />";
413		- ins += "</div></td></tr>";
414		- ins += "<tr><td style=text-align:left >Latitude máxima:</td>";
415		- ins += "<td><div style=padding:5px;width:80px; id=paiYmax >";
416		- ins += "<input onchange='$i3geo_gl.crialink()' type=text style=width:85px; value='' id=i3geo_gl_ymax />";
417		- ins += "</div></td></tr></table>";
418		- ins += "<input style='width:140px;position:relative;top:10px;left:-10px' class=aplicar type='button' value='capturar' onclick='$i3geo_gl.OL.capturageo()' />";
419		- ins += "</div></div>";
420		- document.getElementById(this.buscageo).innerHTML = ins;
421		- $i("i3geo_gl_mapa1").style.display = "block";
422		- $i3geo_gl.OL = new OpenLayers.Map('i3geo_gl_mapa1',{controls:[],numZoomLevels: 13});
423		- //
424		- //layers
425		- //
426		- var wsm = new OpenLayers.Layer.ArcGIS93Rest(
427		- "ESRI World Street Map",
428		- "http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer/export",
429		- {
430		- format : "jpeg"
431		- }, {
432		- isBaseLayer : true,
433		- visibility : true
434		- });
435		- $i3geo_gl.OL.addLayer(wsm);
436		-
437		- var bra = new OpenLayers.Layer.WMS(
438		- "Base carto MMA",
439		- "http://mapas.mma.gov.br/cgi-bin/mapserv?map=/opt/www/html/webservices/baseraster.map",
440		- {
441		- layers : "baseraster",
442		- srs : "EPSG:4618",
443		- format : "image/png",
444		- isBaseLayer : false
445		- }, {
446		- isBaseLayer : true,
447		- visibility : false
448		- });
449		- $i3geo_gl.OL.addLayer(bra);
450		-
451		- //
452		- //zoom e controle de layers
453		- //
454		- var ls = new OpenLayers.Control.LayerSwitcher();
455		- $i3geo_gl.OL.addControl(ls);
456		- $i(ls.id).style.zIndex=2000;
457		- $i3geo_gl.OL.setCenter(new OpenLayers.LonLat(-55,-14), 3);
458		- var panel = new OpenLayers.Control.NavToolbar();
459		- $i3geo_gl.OL.addControl(panel);
460		- panel.div.style.left="-4px";
461		- panel.div.style.top="-298px";
462		- var zb = new OpenLayers.Control.PanZoomBar();
463		- $i3geo_gl.OL.addControl(zb);
464		- zb.div.style.left="0px";
	371	+ */
	372	+ this.buscageo_init = function(){
	373	+ $i3geo_gl.OL = new ol.Map({
	374	+ layers: [
	375	+ new ol.layer.Tile({
	376	+ source: new ol.source.OSM()
	377	+ })
	378	+ ],
	379	+ target: 'i3geo_gl_mapa1',
	380	+ view: new ol.View({
	381	+ center: [0, 0],
	382	+ zoom: 2
	383	+ })
	384	+ });
465	385	$i3geo_gl.OL.capturageo = function()
466	386	{
467		- var b = $i3geo_gl.OL.getExtent();
468		- $i("i3geo_gl_xmin").value = b.left;
469		- $i("i3geo_gl_xmax").value = b.right;
470		- $i("i3geo_gl_ymin").value = b.bottom;
471		- $i("i3geo_gl_ymax").value = b.top;
	387	+ var e = $i3geo_gl.OL.getView().calculateExtent($i3geo_gl.OL.getSize());
	388	+ e = ol.proj.transformExtent(e,"EPSG:900913","EPSG:4326");
	389	+ $i("i3geo_gl_xmin").value = e[0];
	390	+ $i("i3geo_gl_xmax").value = e[2];
	391	+ $i("i3geo_gl_ymin").value = e[1];
	392	+ $i("i3geo_gl_ymax").value = e[3];
	393	+ $(".coord").addClass("is-focused");
472	394	$i3geo_gl.crialink();
473	395	};
474	396	};
475	397	}
476		-
477	398	/*
478	399	Function i3geo_gl_inicia
479	400
...	...	@@ -482,23 +403,20 @@ Inicia a interface do gerador de links.
482	403	Parameters
483	404
484	405	objeto_i3geo_gl_configura - objeto com os paramentros de configuração criado pela função i3geo_gl_configura
485		-*/
	406	+ */
486	407	function i3geo_gl_inicia(objeto_i3geo_gl_configura)
487	408	{
488	409	/*
489	410	Propriedade $i3geo_gl
490	411
491	412	Contém o objeto $i3geo_gl com todas as propriedades e funções de controle da interface
492		- */
	413	+ */
493	414	i3GEO.configura.sid = "";
494	415	$i3geo_gl = objeto_i3geo_gl_configura;
495		- if(document.getElementById($i3geo_gl.buscageo))
496		- $i3geo_gl.buscageo_init();
	416	+ if(document.getElementById($i3geo_gl.buscageo)){
	417	+ $i3geo_gl.buscageo_init();
	418	+ }
497	419	$i3geo_gl.combointerfaces();
	420	+ //pega a lista de menus e as
498	421	i3GEO.arvoreDeTemas.comboMenus($i3geo_gl.loc_i3geo,"$i3geo_gl.combogrupos",$i3geo_gl.menu,"","530","1","");
499		- /*
500		- $inputText("paiPontos","","pontos","","","")
501		- $inputText("paiNometemapontos","","nometemapontos","","","")
502		- $inputText("paiPerfil","","perfil","","","")
503		- */
504	422	}
505	423	\ No newline at end of file
...	...
...	...	@@ -20,9 +20,39 @@ if (file_exists ( $dir_tmp )) {
20	20	}
21	21	error_reporting ( 0 );
22	22	include "../init/head.php";
	23	+
23	24	?>
24		-<body style="background-color: #eeeeee; padding-top: 55px; position: relative;" id="affix-topo"
25		- data-spy="scroll" data-target="#indiceSpy" data-offset="80">
	25	+<script src="../pacotes/ol3/ol-debug.js"></script>
	26	+<style>
	27	+.checkbox, .radio {
	28	+ margin-bottom: 5px;
	29	+ margin-top: 0;
	30	+ position: relative;
	31	+ top: 1px;
	32	+}
	33	+</style>
	34	+<script id="templateCamada" type="x-tmpl-mustache">
	35	+<ul class="list-inline" id="linha_{{{idtema}}}">
	36	+ <li>
	37	+ <button onclick="$i3geo_gl.excluir('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
	38	+ <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
	39	+ </button>
	40	+ <button onclick="$i3geo_gl.subir('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
	41	+ <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
	42	+ </button>
	43	+ <button onclick="$i3geo_gl.descer('linha_{{{idtema}}}');return false;" role="button" class="btn btn-primary btn-fab btn-fab-mini">
	44	+ <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
	45	+ </button>
	46	+ </li>
	47	+ <li class="checkbox">
	48	+ <label>
	49	+ <input onclick="$i3geo_gl.crialink();" type="checkbox" value="{{{idtema}}}"><span class="checkbox-material"><span class="check"></span></span> {{{idtema}}}
	50	+ </label>
	51	+ </li>
	52	+</ul>
	53	+</script>
	54	+
	55	+<body style="padding-top: 55px; position: relative;">
26	56	<nav class="navbar navbar-fixed-top navbar-inverse" role="navigation">
27	57	<div class="container-fluid">
28	58	<div class="navbar-header">
...	...	@@ -36,132 +66,183 @@ include "../init/head.php";
36	66	</div>
37	67	</div>
38	68	</nav>
39		- <!--para as mensagens de alerta-->
40		- <div class="navbar-fixed-top alert alert-success text-center" style="padding: 0px;"></div>
	69	+ <nav style="padding-top: 10px;" class="navbar-fixed-top">
	70	+ <div class="container">
	71	+ <div class="well well-sm">
	72	+ <div class="bs-component btn-group-sm pull-left" style="top: -2px; position: relative">
	73	+ <button onclick="i3GEO.util.copyToClipboard($('#link').html());"
	74	+ class="btn btn-primary btn-fab btn-fab-mini">
	75	+ <i class="fa fa-files-o" aria-hidden="true"></i>
	76	+ </button>
	77	+ </div>
	78	+   <a href="" id="link" target="_blank">http://</a>
	79	+ </div>
	80	+ </div>
	81	+ </nav>
41	82	<div class="container-fluid">
42	83	<div class="row">
43	84	<ol class="breadcrumb">
44	85	<li><a href="../init/index.php">i3Geo</a></li>
45		- <li class="active">Mapas de usuários</li>
	86	+ <li class="active">Perm links</li>
46	87	</ol>
47	88	</div>
48	89	</div>
49	90	<div class="container">
50		- <fieldset>
51		- <legend style="font-size: 14px;"></legend>
52		- <br>
53		- <p class=paragrafo>
54		- Para ver todos os parâmetros de inicialização que podem ser utilizados: <a
55		- href="ms_criamapa.php?ajuda" target=_blank>ms_criamapa.php?ajuda</a>
	91	+ <div class="jumbotron">
	92	+ <h1>Construtor de links</h1>
	93	+ <p>Aqui você pode gerar links para abrir o i3Geo de forma personalizada. Os links podem
	94	+ ser incluídos em qualquer página WEB, sendo possível definir quais os temas
	95	+ serão mostrados e qual a extensão geográfica do mapa.</p>
	96	+ <p>
	97	+ Para ver todos os parâmetros de inicialização que podem ser utilizados
	98	+ acesse esse link: <a href="../ms_criamapa.php?ajuda" target=_blank>ms_criamapa.php?ajuda</a>
56	99	</p>
	100	+ </div>
	101	+ <div class="well bs-component">
	102	+ <form class="form-vertical">
	103	+ <fieldset>
	104	+ <legend>Escolha das camadas</legend>
	105	+ <h4>Escolha as camadas que serão incluídas no mapa. As camadas são
	106	+ organizadas em uma hierarquia começando em menu.</h4>
57	107
58		- <p class=paragrafo>
59		- Aqui você pode gerar links para abrir o i3Geo de forma personalizada. Os links podem ser
60		- incluídos em qualquer página WEB, sendo possível definir quais os temas
61		- serão mostrados e qual a extensão geográfica do mapa.<br> <br>
62		- </p>
63		- </fieldset>
64		- <fieldset style="min-height: 100px;">
65		- <p class=paragrafo>
66		- Este é o link para abrir o mapa. Copie e cole em sua página na internet ou clique
67		- para testar: <a style="color: blue; font-size: 12px" href="" id=link target=blanck></a>
68		-
69		- </fieldset>
70		- <fieldset>
71		- <div style="margin: 10px;">
72		- <p class=paragrafo>
73		- <b>Escolha os temas que serão incluídos no mapa (opcional):</b>
74		- </p>
75		- <p class=paragrafo>Menu:
76		-
77		-
78		- <div id=menus style="text-align: left;">Aguarde...</div>
79		- <br>
80		- <p class=paragrafo>Grupo:
81		-
82		-
83		- <div id=grupos style="text-align: left;"> </div>
84		- <br>
85		- <p class=paragrafo>Sub-grupo:
	108	+ <div class="form-group">
	109	+ <label for="menus">Menu</label> <select onchange="$i3geo_gl.combogrupos(this.value)"
	110	+ class="form-control" id="menus">
	111	+ </select> <span class="material-input"></span>
	112	+ </div>
	113	+ <div class="form-group">
	114	+ <label for="grupos">Grupo</label> <select onchange="$i3geo_gl.combosubgrupos(this.value)"
	115	+ class="form-control" id="grupos">
	116	+ </select> <span class="material-input"></span>
	117	+ </div>
	118	+ <div class="form-group">
	119	+ <label for="subgrupos">Subgrupo</label> <select onchange="$i3geo_gl.combotemas('',this.value)"
	120	+ class="form-control" id="subgrupos">
	121	+ </select> <span class="material-input"></span>
	122	+ </div>
	123	+ <div class="form-group">
	124	+ <label for="temas">Temas</label> <select style="font-size: 15px;" multiple
	125	+ onchange="$i3geo_gl.preseltema('','',this.value)" class="form-control" id="temas">
	126	+ </select> <span class="help-block">Na lista abaixo você pode remover temas já
	127	+ escolhidos. Clique em vários temas para escolher mais de um</span> <span
	128	+ class="material-input"></span>
	129	+ </div>
	130	+ <div class="form-group">
	131	+ <label for="temasa">Temas já escolhidos. Os que estiverem marcados,
	132	+ ficarão ligados logo ao abrir o mapa</label>
	133	+ <div id="temasa" class="form-control" style='height: 120px; overflow: auto'></div>
	134	+ </div>
	135	+ </fieldset>
	136	+ </form>
	137	+ </div>
	138	+ <div class="well bs-component">
	139	+ <form class="form-vertical">
	140	+ <fieldset>
	141	+ <legend>Coordenadas</legend>
	142	+ <p>Se vc quiser, o mapa poderá ser aberto mostrando pontos, digite abaixo as
	143	+ coordenadas dos pontos em décimos de grau (exemplo: -54 -12 -54 1 -51 -15)</p>
	144	+ <div class="form-group label-floating">
	145	+ <label class="control-label" for="pontos">Coordenadas dos pontos</label> <input
	146	+ class="form-control" id="pontos" type="text" onchange="$i3geo_gl.crialink()" />
	147	+ </div>
	148	+ <div class="form-group label-floating">
	149	+ <label class="control-label" for="nometemapontos">Nome do tema para aparecer na
	150	+ legenda</label> <input class="form-control" id="nometemapontos" type="text"
	151	+ onchange="$i3geo_gl.crialink()" />
	152	+ </div>
	153	+ </fieldset>
	154	+ </form>
	155	+ </div>
	156	+ <div class="well bs-component">
	157	+ <form class="form-vertical">
	158	+ <fieldset>
	159	+ <legend>Perfis</legend>
	160	+ <p>Caso existam perfis definidos na configuração do menu de temas, vc pode
	161	+ restringir a lista de temas do menu de adição de temas do i3Geo</p>
	162	+ <div class="form-group label-floating">
	163	+ <label class="control-label" for="perfili">Perfil</label> <input class="form-control"
	164	+ id="perfili" type="text" onchange="$i3geo_gl.crialink()" />
	165	+ </div>
	166	+ </fieldset>
	167	+ </form>
	168	+ </div>
	169	+ <div class="well bs-component">
	170	+ <form class="form-vertical">
	171	+ <fieldset>
	172	+ <legend>Mapa</legend>
	173	+ <div class="form-group">
	174	+ <label for="temas">Escolha a interface que será utilizada para construir o mapa</label>
	175	+ <div id="comboInterfaces"></div>
	176	+ <span class="material-input"></span>
	177	+ </div>
	178	+ </fieldset>
	179	+ </form>
	180	+ </div>
	181	+ <div class="well bs-component">
	182	+ <form class="form-vertical">
	183	+ <fieldset>
	184	+ <legend>Extensão geográfica</legend>
86	185
	186	+ <div class="row">
	187	+ <div class="col-sm-6 text-left">
	188	+ <label> Utilize o navegador abaixo para definir as coordenadas geográficas do
	189	+ seu mapa. Após escolher a região, clique no botão de captura.</label>
	190	+ <div class="row">
	191	+ <div class="col-sm-6 text-center">
	192	+ <div id="i3geo_gl_mapa1" style="width: 256px; height: 256px; border: 1px solid gray;"></div>
	193	+ </div>
	194	+ <div class="col-sm-6 text-center">
	195	+ <button onclick="$i3geo_gl.OL.capturageo();return false;" class="btn btn-primary">Capturar</button>
	196	+ </div>
	197	+ </div>
	198	+ </div>
	199	+ <div class="col-sm-6 text-left">
	200	+ <label>Coordenadas geográficas escolhidas (em décimos de grau). Digite
	201	+ os valores ou capture as coordenadas</label>
87	202
88		- <div id=subgrupos style="text-align: left;"> </div>
89		- <br>
90		- <p class=paragrafo>Tema:
	203	+ <div class="coord form-group label-floating">
	204	+ <label class="control-label" >X mínimo (longitude oeste -)</label> <input
	205	+ class="form-control" id="i3geo_gl_xmin" type="text" onchange="$i3geo_gl.crialink()" />
	206	+ </div>
	207	+ <div class="coord form-group label-floating">
	208	+ <label class="control-label" for="i3geo_gl_xmax">X máximo (longitude leste +)</label> <input
	209	+ class="form-control" id="i3geo_gl_xmax" type="text" onchange="$i3geo_gl.crialink()" />
	210	+ </div>
	211	+ <div class="coord form-group label-floating">
	212	+ <label class="control-label" for="i3geo_gl_ymin">Y mínimo (latitude sul -)</label> <input
	213	+ class="form-control" id="i3geo_gl_ymin" type="text" onchange="$i3geo_gl.crialink()" />
	214	+ </div>
91	215
	216	+ <div class="coord form-group label-floating">
	217	+ <label class="control-label" for="i3geo_gl_ymax">Y máximo (latitude norte +)</label> <input
	218	+ class="form-control" id="i3geo_gl_ymax" type="text" onchange="$i3geo_gl.crialink()" />
	219	+ </div>
	220	+ </div>
	221	+ </div>
92	222
93		- <div id=temas style="text-align: left;"> </div>
94		- <br>
95		- <div style="left: 0px; text-align: left;">
96		- Temas já escolhidos. Os que estiverem marcados, ficarão ligados logo ao abrir o
97		- mapa:
98		- <div id=temasa
99		- style='width: 530px; border: 1px gray solid; height: 90px; top: 10px; left: 0px; text-align: left; overflow: auto'></div>
100		- </div>
101		- </div>
	223	+ </fieldset>
	224	+ </form>
	225	+ </div>
102	226
103		- </fieldset>
104		- <fieldset>
105		- <div style="margin: 10px;">
106		- <p class=paragrafo>
107		- <b>Se vc quiser, o mapa poderá ser aberto mostrando pontos, digite abaixo as coordenadas
108		- dos pontos em décimos de grau (exemplo: -54 -12 -54 1 -51 -15) (opcional):</b>
109		- </p>
110		- <p class=paragrafo>Coordenadas dos pontos:</p>
111		- <div style="padding: 5px;" id=paiPontos>
112		- <input type=text size=60 id=pontos value="" onchange="$i3geo_gl.crialink()" />
113		- </div>
114		- <p class=paragrafo>Nome do tema para aparecer na legenda:</p>
115		- <div style="padding: 5px;" id=paiNometemapontos>
116		- <input type=text size=60 id=nometemapontos value="" onchange="$i3geo_gl.crialink()" />
117		- </div>
118		- </div>
119		- </fieldset>
120		- <fieldset>
121		- <div style="margin: 10px;">
122		- <p class=paragrafo>
123		- <b>Caso existam perfis definidos na configuração do menu de temas, vc pode
124		- restringir a lista de temas do menu de adição de temas do I3Geo (opcional)</b>
125		- </p>
126		- <p class=paragrafo>Perfil:</p>
127		- <input onchange="$i3geo_gl.crialink()" type=text size=60 id=perfili value=""
128		- style="border: 1px solid black" />
129		- </div>
130		- </fieldset>
131		- <fieldset>
132		- <div style="margin: 10px; text-align: left;">
133		- <p class=paragrafo>
134		- <b>Escolha a interface para o mapa (opcional)</b>
135		- </p>
136		- <div id="comboInterfaces" style="text-align: left;">
137		- <select id=interface onchange="$i3geo_gl.crialink()">
138		- <option value="">Default</option>
139		- <option value="black_gm.phtml">Google Maps</option>
140		- <option value="googleearth.phtml">Google Earth</option>
141		- <option value="black_ol.htm">Openlayers</option>
142		- <option value="black_osm.htm">Open Street Map</option>
143		- </select>
144		- </div>
145		- </div>
146		- </fieldset>
147		- <fieldset id=buscageo></fieldset>
148	227	</div>
149		-
150	228	<script type="text/javascript" src="../classesjs/i3geo_tudo_compacto6.js"></script>
151	229	<script src='dicionario.js'></script>
152	230	<script src='index.js'></script>
153	231	<script>
154		- //$(document).ready(function(){
155		- i3GEO.configura = {"locaplic" : window.location.href.split("/permlinks")[0],"sid": ""};
156		- $(".active").html($trad("mapas",g_traducao_mapas));
157		- OpenLayers.ImgPath = "../pacotes/openlayers/img/";
	232	+ //$(document).ready(function(){
	233	+ i3GEO.configura = {
	234	+ "locaplic" : window.location.href.split("/permlinks")[0],
	235	+ "sid" : ""
	236	+ };
	237	+ $(".active").html($trad("migalha", g_traducao_permlinks));
158	238
159		- var i3geo_gl_configura =
160		- new i3geo_gl_configura(i3GEO.configura.locaplic, "", "temasa", "link", "grupos", "subgrupos", "temas", "buscageo", "menus");
	239	+ var i3geo_gl_configura = new i3geo_gl_configura(
	240	+ i3GEO.configura.locaplic, "", "temasa", "link", "grupos",
	241	+ "subgrupos", "temas", "buscageo", "menus");
161	242	i3geo_gl_inicia(i3geo_gl_configura);
162		-
	243	+ $i3geo_gl.buscageo_init();
163	244	$.material.init();
164		- //});
	245	+ //});
165	246	</script>
166	247	</body>
167	248	</html>
...	...