From dd6b9aed814125d19a70470afd038ed65dcb4e02 Mon Sep 17 00:00:00 2001
From: Alejandro Gallardo Escobar <alejandro.gallardo@artica.es>
Date: Mon, 13 Aug 2018 12:42:30 +0200
Subject: [PATCH] Refactored the layer configuration of the GIS maps to fix
 some bugs

---
 .../godmode/gis_maps/configure_gis_map.php    | 962 +++++++++---------
 pandora_console/include/functions_gis.php     |  79 +-
 pandora_console/include/styles/pandora.css    |  17 +
 3 files changed, 484 insertions(+), 574 deletions(-)

diff --git a/pandora_console/godmode/gis_maps/configure_gis_map.php b/pandora_console/godmode/gis_maps/configure_gis_map.php
index f145eba687..dab75690a2 100644
--- a/pandora_console/godmode/gis_maps/configure_gis_map.php
+++ b/pandora_console/godmode/gis_maps/configure_gis_map.php
@@ -38,6 +38,25 @@ $sec2 = safe_url_extraclean ($sec2);
 $sec = get_parameter_get ('sec');
 $sec = safe_url_extraclean ($sec);
 
+// Layers
+$layer_ids = get_parameter("layer_ids", array());
+$layers = get_parameter("layers", array());
+$layer_list = array();
+
+foreach ($layer_ids as $layer_id) {
+	if (empty($layers[$layer_id]) || empty($layers[$layer_id]["name"])) continue;
+	$trimmed_name = trim($layers[$layer_id]["name"]);
+	if (empty($trimmed_name)) continue;
+
+	$layer_list[] = array(
+		"id" => (strpos($layer_id, "new_") === false) ? (int) $layer_id : null,
+		"layer_name" => $trimmed_name,
+		"layer_visible" => ((int) $layers[$layer_id]["visible"] === 1),
+		"layer_group" => (int) $layers[$layer_id]["agents_from_group"],
+		"layer_agent_list" => $layers[$layer_id]["agents"]
+	);
+}
+
 $next_action = 'new_map';
 
 switch ($action) {
@@ -63,14 +82,7 @@ switch ($action) {
 				unset($map_connection_list_temp[$index]);
 			}
 		}
-		$layer_list = explode(",",get_parameter('layer_list'));
-		foreach ($layer_list as $index => $value) {
-			$cleanValue = trim($value);
-			if ($cleanValue == '') {
-				unset($layer_list[$index]);
-			}
-		}
-		
+
 		$map_connection_default = get_parameter('map_connection_default');
 		
 		$map_connection_list = array();
@@ -82,13 +94,6 @@ switch ($action) {
 			$map_connection_list[] = array('id_conection' => $idMapConnection, 'default' => $default);
 		}
 		
-		$arrayLayers = array();
-		foreach ($layer_list as $layerID) {
-			$layer = get_parameter('layer_values_' . $layerID);
-			$layer = json_decode(io_safe_output ($layer), true);
-			array_unshift ($arrayLayers, $layer);
-		}
-		
 		$invalidFields = gis_validate_map_data($map_name, $map_zoom_level,
 			$map_initial_longitude, $map_initial_latitude, $map_initial_altitude,
 			$map_default_longitude, $map_default_latitude, $map_default_altitude,
@@ -98,7 +103,7 @@ switch ($action) {
 			$idMap = gis_save_map($map_name, $map_initial_longitude, $map_initial_latitude,
 				$map_initial_altitude, $map_zoom_level, $map_background,
 				$map_default_longitude, $map_default_latitude, $map_default_altitude,
-				$map_group_id, $map_connection_list, $arrayLayers);
+				$map_group_id, $map_connection_list, $layer_list);
 			$mapCreatedOk = true;
 			$next_action = 'update_saved';
 		}
@@ -106,7 +111,6 @@ switch ($action) {
 			$next_action = 'save_new';
 			$mapCreatedOk = false;
 		}
-		$layer_list = $arrayLayers;
 		
 		ui_print_result_message ($mapCreatedOk, __('Map successfully created'),
 			__('Map could not be created'));
@@ -124,8 +128,8 @@ switch ($action) {
 		$map_default_latitude = '';
 		$map_default_altitude = '';
 		$map_group_id = '';
-		$map_connection_list = Array();
-		$layer_list = Array();
+		$map_connection_list = array();
+		$layer_list = array();
 		$map_levels_zoom = 0;
 		break;
 	case 'edit_map':
@@ -152,13 +156,6 @@ switch ($action) {
 				unset($map_connection_list_temp[$index]);
 			}
 		}
-		$layer_list = explode(",", get_parameter('layer_list'));
-		foreach ($layer_list as $index => $value) {
-			$cleanValue = trim($value);
-			if ($cleanValue == '') {
-				unset($layer_list[$index]);
-			}
-		}
 		
 		$map_connection_default = get_parameter('map_connection_default');
 		
@@ -171,26 +168,17 @@ switch ($action) {
 			$map_connection_list[] = array('id_conection' => $idMapConnection, 'default' => $default);
 		}
 		
-		$arrayLayers = array();
-		foreach ($layer_list as $layerID) {
-			$layer = get_parameter('layer_values_' . $layerID);
-			$layer = json_decode(io_safe_output ($layer), true);
-			array_unshift ($arrayLayers, $layer);
-		}
-		
-		
-		
 		$invalidFields = gis_validate_map_data($map_name, $map_zoom_level,
 			$map_initial_longitude, $map_initial_latitude, $map_initial_altitude,
 			$map_default_longitude, $map_default_latitude, $map_default_altitude,
 			$map_connection_list, $map_levels_zoom);
-			
+
 		if (empty($invalidFields) && get_parameter('map_connection_list') != "") {
 			//TODO
 			gis_update_map($idMap, $map_name, $map_initial_longitude, $map_initial_latitude,
 				$map_initial_altitude, $map_zoom_level, $map_background,
 				$map_default_longitude, $map_default_latitude, $map_default_altitude,
-				$map_group_id, $map_connection_list, $arrayLayers);
+				$map_group_id, $map_connection_list, $layer_list);
 			$mapCreatedOk = true;
 		}
 		else {
@@ -222,16 +210,11 @@ if ($idMap) {
 ui_print_page_header (__('GIS Maps builder'),
 	"images/gm_gis.png", false, "configure_gis_map", true, $buttons);
 
-
-ui_require_javascript_file('openlayers.pandora');
-//Global vars for javascript and scripts.
 ?>
+
 <script type="text/javascript">
-var connectionMaps = Array();
-var agentList = Array();
-var countAgentList = 0;
-var countLayer = 0;
-var layerList = Array();
+
+var connectionMaps = [];
 
 function isInt(x) {
 	var y=parseInt(x);
@@ -239,47 +222,102 @@ function isInt(x) {
 	return x==y && x.toString()==y.toString();
 }
 
-function updateArrowLayers() {
-	var count = 0;
-	var lastIndex = null;
-	
-	for (var index in layerList) {
+function deleteConnectionMap(idConnectionMap) {
+	for (var index in connectionMaps) {
 		
 		//int because in the object array there are method as string
 		if (isInt(index)) {
-			numLayer = layerList[index];
-			layerObj = $("#layer_item_" + numLayer);
-			
-			//First element
-			if (count == 0) {
-				$('.up_arrow', layerObj).html('');
+			if (connectionMaps[index] == idConnectionMap) {
+				connectionMaps.splice(index, 1);
 			}
-			else {
-				$('.up_arrow', layerObj).html('<a class="up_arrow" href="javascript: upLayer(' + numLayer + ');"><?php html_print_image ("images/up.png"); ?></a>');
-			}
-			
-			$('.down_arrow', layerObj).html('<a class="down_arrow" href="javascript: downLayer(' + numLayer + ');"><?php html_print_image ("images/down.png"); ?></a>');
-			
-			
-			count++;
-			lastIndex = index;
 		}
 	}
 	
-	//Last element
-	if (lastIndex != null) {
-		numLayer = layerList[lastIndex];
-		layerObj = $("#layer_item_" + numLayer);
+	checked = $("#radiobtn0001", $("#map_connection_" + idConnectionMap)).attr('checked');
+	$("#map_connection_" + idConnectionMap).remove();
+	
+	if (checked) {
+		//Checked first, but not is index = 0 maybe.
 		
-		$('.down_arrow', layerObj).html('');
+		for (var index in connectionMaps) {
+			
+			//int because in the object array there are method as string
+			if (isInt(index)) {
+				$("#radiobtn0001", $("#map_connection_" + connectionMaps[index])).attr('checked', 'checked');
+				break;
+			}
+		}
 	}
 }
+
+function setFieldsRequestAjax(id_conexion) {
+	if (confirm('<?php echo __('Do you want to use the default data from the connection?');?>')) {
+		jQuery.ajax ({
+			data: "page=operation/gis_maps/ajax&opt=get_data_conexion&id_conection=" + idConnectionMap,
+			type: "GET",
+			dataType: 'json',
+			url: "ajax.php",
+			success: function (data) {
+				if (data.correct) {
+					$("input[name=map_initial_longitude]").val(data.content.initial_longitude);
+					$("input[name=map_initial_latitude]").val(data.content.initial_latitude);
+					$("input[name=map_initial_altitude]").val(data.content.initial_altitude);
+					$("input[name=map_default_longitude]").val(data.content.default_longitude);
+					$("input[name=map_default_latitude]").val(data.content.default_latitude);
+					$("input[name=map_default_altitude]").val(data.content.default_altitude);
+					$("input[name=map_zoom_level]").val(data.content.default_zoom_level);
+					$("input[name=map_levels_zoom]").val(data.content.num_zoom_levels);
+				}
+			}
+		});
+	}
+}
+
+function changeDefaultConection(id) {
+	setFieldsRequestAjax(id);
+}
+
+function addConnectionMap() {
+	idConnectionMap = $("#map_connection :selected").val();
+	connectionMapName = $("#map_connection :selected").text();
+	
+	//Test if before just added
+	for (var index in connectionMaps) {
+		if (isInt(index)) {
+			if (connectionMaps[index] == idConnectionMap) {
+				alert('<?php echo __("The connection"); ?> "' + connectionMapName + '" <?php echo __("just added previously."); ?>');
+				
+				return;
+			}
+		}
+	}
+	
+	tableRows = $("#chunk_map_connection").clone();
+	tableRows.attr('id','map_connection_' + idConnectionMap);
+	$("input[name=map_connection_default]",tableRows).val(idConnectionMap);
+	
+	if (connectionMaps.length == 0) {
+		//The first is checked
+		$("#radiobtn0001", tableRows).attr('checked', 'checked');
+		
+		//Set the fields with conexion data (in ajax)
+		setFieldsRequestAjax(idConnectionMap);
+	}
+	
+	connectionMaps.push(idConnectionMap);
+	
+	$("#text-map_connection_name", tableRows).val(connectionMapName);
+	$("#text-map_connection_name", tableRows).attr('name', 'map_connection_name_' + idConnectionMap);
+	$("#delete_row", tableRows).attr('href', "javascript: deleteConnectionMap(" + idConnectionMap + ")");
+	
+	$("#map_connection").append(tableRows);
+}
+
 </script>
+
 <?php
 
-echo '<form action="' . $url . '" id="form_setup" method="post" onSubmit="fillOrderField();">';
-
-
+echo '<form action="' . $url . '" id="form_setup" method="post">';
 
 //Load the data in edit or reload in update.
 switch ($action) {
@@ -301,22 +339,7 @@ switch ($action) {
 		$map_connection_list = $mapData['connections'];
 		$map_levels_zoom = gis_get_num_zoom_levels_connection_default($map_connection_list);
 		
-		//$map_levels_zoom = get_parameter('map_levels_zoom');
-		
-		$layer_list = array();
-		foreach ($mapData['layers'] as $layer) {
-			$layerAgentList = array();
-			foreach($layer['layer_agent_list'] as $layerAgent) {
-				$layerAgentList[] = $layerAgent['nombre'];
-			}
-			$layer_list[] = array(
-				'id' => $layer['id_tmap_layer'],
-				'layer_name' => $layer['layer_name'],
-				'layer_group' => $layer['layer_group'],
-				'layer_visible' => $layer['layer_visible'],
-				'layer_agent_list' => $layerAgentList
-				);
-		}
+		$layer_list = !empty($mapData['layers']) ? $mapData['layers'] : array();
 		break;
 }
 
@@ -393,16 +416,17 @@ echo "<h3>" . __('Layers') . ui_print_help_tip (__('Each layer can show agents f
 
 $table->width = '100%';
 $table->class = 'databox filters';
+$table->valign = array();
+$table->valign[0] = 'top';
+$table->valign[1] = 'top';
 $table->data = array ();
 
 $table->data[0][0] = "<h4>" .__('List of layers') . ui_print_help_tip (__('It is possible to edit, delete and reorder the layers.'), true) . "</h4>";
 $table->data[0][1] = '<div style="text-align: right;">' . html_print_button(__('New layer'), 'new_layer', false, 'newLayer();', 'class="sub add"', true) . '</div>';
 
-$table->data[1][0] = '<table class="databox" border="0" cellpadding="4" cellspacing="4" id="list_layers">' .
-	gis_add_layer_list($layer_list) . 
-	'</table>';
-$table->data[1][1] = '<div id="form_layer">
-		<table id="form_layer_table" class="" border="0" cellpadding="4" cellspacing="4" style="visibility: hidden;">
+$table->data[1][0] = '<table class="databox" border="0" cellpadding="4" cellspacing="4" id="list_layers"></table>';
+$table->data[1][1] = '<div id="form_layer" style="display: none;">
+		<table id="form_layer_table" class="" border="0" cellpadding="4" cellspacing="4">
 			<tr>
 				<td>' . __('Layer name') . ':</td>
 				<td>' . html_print_input_text ('layer_name_form', '', '', 20, 40, true) . '</td>
@@ -422,12 +446,15 @@ $table->data[1][1] = '<div id="form_layer">
 
 
 
-$table->data[1][1] .= html_print_button(__('Add agent'), 'add_agent', true, 'addAgentLayer();', 'class="sub add"', true);
+$table->data[1][1] .= html_print_button(__('Add agent'), 'add_agent', true, '', 'class="sub add"', true);
 
 $params = array();
 $params['return'] = true;
 $params['show_helptip'] = true;
-$params['input_name'] = 'id_agent';
+$params['print_hidden_input_idagent'] = true;
+$params['hidden_input_idagent_id'] = 'hidden-agent_id';
+$params['hidden_input_idagent_name'] = 'agent_id';
+$params['input_name'] = 'agent_alias';
 $params['value'] = '';
 $params['javascript_function_action_after_select'] = 'active_button_add_agent';
 $table->data[1][1] .= ui_print_agent_autocomplete_input($params);
@@ -445,8 +472,8 @@ $table->data[1][1] .= '</td>
 			</tr>
 			<tr>
 				<td align="right" colspan="4">' . 
-					html_print_button(__('Save Layer'), 'save_layer', false, 'saveLayer();', 'class="sub wand"', true) . '
-					' . html_print_input_hidden('layer_edit_id_form', '', true) . '
+					html_print_button(__('Save Layer'), 'save_layer', false, 'javascript:saveNewLayer();', 'class="sub wand"', true) . '
+					' . html_print_input_hidden('current_edit_layer_id', '', true) . '
 				</td>
 			</tr>
 		</table>
@@ -489,432 +516,357 @@ echo "</form>";
 	</tbody>
 </table>
 
-<table style="visibility: hidden;">
-	<tbody id="chuck_agent">
-		<tr>
-			<td class="col1">XXXX</td>
-			<td class="col2">
-				<input type="hidden" id="name_agent" name="name_agent" value="" />
-				<a id="delete_row" href="none"><?php html_print_image("images/cross.png", false, array("alt" => ""));?></a>
-			</td>
-		</tr>
-	</tbody>
-</table>
-
-<table style="visibility: hidden;">
-		<tbody id="chuck_layer_item">
-			<tr>
-				<td class="col1">XXXXXXXXXXXXXXXXXX</td>
-				<td class="up_arrow"><a id="up_arrow" href="javascript: upLayer();"><?php html_print_image("images/up.png", false, array("alt" => ""));?></a></td>
-				<td class="down_arrow"><a id="down_arrow" href="javascript: downLayer();"><?php html_print_image("images/down.png", false, array("alt" => ""));?></a></td>
-				<td class="col3">
-					<a id="edit_layer" href="javascript: editLayer(none);"><?php html_print_image("images/config.png", false, array("alt" => ""));?></a>
-				</td>
-				<td class="col4">
-					<input type="hidden" name="layer_values" id="layer_values" />
-					<a id="delete_row" href="none"><?php html_print_image("images/cross.png", false, array("alt" => ""));?></a>
-				</td>
-			</tr>
-		</tbody>
-</table>
 <?php
 //-------------------------END CHUNKS---------------------------------------
 
 ui_require_css_file ('cluetip');
 ui_require_jquery_file ('cluetip');
 ui_require_jquery_file ('pandora.controls');
-ui_require_jquery_file ('bgiframe');
 ui_require_jquery_file ('json');
 ?>
 <script type="text/javascript">
-function refreshMapView() {
-	map = null;
-	$("#map").html('');
+
+function active_button_add_agent() {
+	$("#button-add_agent").prop("disabled", false);
+}
+
+function addAgentClick (event) {
+	var $layerFormAgentIdInput = $("#hidden-agent_id");
+	var $layerFormAgentAliasInput = $("#text-agent_alias");
 	
-	id_connection_default = $("input[name=map_connection_default]:checked").val();
+	var agentId = Number.parseInt($layerFormAgentIdInput.val());
+	var agentAlias = $layerFormAgentAliasInput.val();
+	var layerId = $("input#hidden-current_edit_layer_id").val();
 	
-	jQuery.ajax ({
-		data: "page=operation/gis_maps/ajax&opt=get_map_connection_data&id_connection=" + id_connection_default,
-		type: "GET",
-		dataType: 'json',
-		url: "ajax.php",
-		success: function (data) {
-			if (data.correct) {
-				mapConnection = data.content;
-				
-				arrayControls = null;
-				arrayControls = Array('Navigation', 'PanZoom', 'MousePosition');
-				
-				
-				/*TODO read too from field forms user.*/
-				inital_zoom = mapConnection['default_zoom_level'];
-				num_levels_zoom = mapConnection['num_zoom_levels'];
-				center_latitude = mapConnection['initial_latitude'];
-				center_longitude = mapConnection['initial_longitude'];
-				center_altitude = mapConnection['initial_altitude'];
-				
-				baseLayer = jQuery.evalJSON(mapConnection['conection_data']);
-				
-				var objBaseLayers = Array();
-				objBaseLayers[0] = Array();
-				objBaseLayers[0]['type'] = baseLayer['type'];
-				objBaseLayers[0]['name'] = mapConnection['conection_name'];
-				objBaseLayers[0]['url'] = baseLayer['url'];
-				
-				js_printMap('map', inital_zoom, center_latitude, center_longitude, objBaseLayers, arrayControls);
-			}
+	if (Number.isNaN(agentId) || agentId === 0 || agentAlias.length === 0) return;
+	
+	addAgentRow(layerId, agentId, agentAlias);
+	
+	// Clear agent inputs
+	$layerFormAgentIdInput.val("");
+	$layerFormAgentAliasInput.val("");
+
+	$("#button-add_agent").prop("disabled", true);
+}
+
+function moveLayerRowUpOnClick (event) {
+	var $row = $(event.currentTarget).parent().parent();
+	$row.insertBefore($row.prev());
+}
+
+function moveLayerRowDownOnClick (event) {
+	var $row = $(event.currentTarget).parent().parent();
+	$row.insertAfter($row.next());
+}
+
+function removeLayerRowOnClick (event) {
+	$(event.currentTarget).parent().parent().remove();
+}
+
+function showLayerEditor (layerId) {
+	var $layerSaveBtn = $("input#button-save_layer");
+
+	// Clean editor
+	cleanLayerEditor();
+	
+	if (layerId) {
+		// Hide save layer button
+		$layerSaveBtn.hide();
+		// Hightlight selected row
+		hightlightRow(layerId);
+		// Get layer data
+		var data = getLayerData(layerId);
+		// Fill editor with data
+		setLayerEditorData(data);
+		// Bind editor events
+		bindLayerEditorEvents(layerId);
+	} else {
+		// Show save layer button
+		$layerSaveBtn.show();
+		// Remove the hightlight
+		hightlightRow();
+	}
+
+	// Show editor (if hidden)
+	$("div#form_layer").show();
+}
+
+function getLayerData (layerId) {
+	var $layerRow = $("tr#layer_row_" + layerId);
+	var layerName = $layerRow.find("input.layer_name").val();
+	var layerVisible = $layerRow.find("input.layer_visible").val() == 1;
+	var layerAgentsFromGroup = $layerRow.find("input.layer_agents_from_group").val();
+	var layerAgents = $layerRow.find("input.layer_agent_alias").map(function () {
+		return {
+			"id": $(this).data("agent-id"),
+			"alias": $(this).val()
+		};
+	}).get();
+
+	return {
+		id: layerId,
+		name: layerName,
+		visible: layerVisible,
+		agentsFromGroup: layerAgentsFromGroup,
+		agents: layerAgents
+	}
+}
+
+function setLayerEditorData (data) {
+	if (data == null) data = {};
+	// Set defaults
+	data = {
+		id: data.id || 0,
+		name: data.name || "",
+		visible: data.visible != null ? data.visible : true,
+		agentsFromGroup: data.agentsFromGroup || -1,
+		agents: data.agents || []
+	}
+
+	var $layerFormIdInput = $("input#hidden-current_edit_layer_id");
+	var $layerFormNameInput = $("input#text-layer_name_form");
+	var $layerFormVisibleCheckbox = $("input#checkbox-layer_visible_form");
+	var $layerFormAgentsFromGroupSelect = $("select#layer_group_form");
+	var $layerFormAgentInput = $("input#text-agent_alias");
+	var $layerFormAgentButton = $("input#button-add_agent");
+	var $layerFormAgentsListItems = $("tr.agents_list_item");
+
+	$layerFormIdInput.val(data.id);
+	$layerFormNameInput.val(data.name);
+	$layerFormVisibleCheckbox.prop("checked", data.visible);
+	$layerFormAgentsFromGroupSelect.val(data.agentsFromGroup);
+	$layerFormAgentInput.val("");
+	$layerFormAgentButton.prop("disabled", true);
+	$layerFormAgentsListItems.remove();
+
+	var $tableAgents = $("table#list_agents");
+	data.agents.forEach(function (agent) {
+		addAgentRow(data.id, agent.id, agent.alias);
+	});
+}
+
+function newLayer () {
+	showLayerEditor(null);
+}
+
+function saveNewLayer () {
+	var $layerFormNameInput = $("input#text-layer_name_form");
+	var $layerFormVisibleCheckbox = $("input#checkbox-layer_visible_form");
+	var $layerFormAgentsFromGroupSelect = $("select#layer_group_form");
+	var $layerFormAgentsListItems = $("tr.agents_list_item > td > span.agent_alias");
+	var newLayerId = "new_" . $("tr.layer_row").length + 1;
+
+	addLayerRow(newLayerId, {
+		id: newLayerId,
+		name: $layerFormNameInput.val(),
+		visible: $layerFormVisibleCheckbox.prop("checked"),
+		agentsFromGroup: $layerFormAgentsFromGroupSelect.val(),
+		agents: $layerFormAgentsListItems.map(function () {
+			return {
+				"id": $(this).data("agent-id"),
+				"alias": $(this).text()
+			};
+		}).get()
+	});
+}
+
+function cleanLayerEditor () {
+	// Clear editor events
+	unbindLayerEditorEvents();
+	// Add default data to the editor
+	setLayerEditorData();
+}
+
+function bindLayerEditorEvents (layerId) {
+	var $layerFormNameInput = $("input#text-layer_name_form");
+	var $layerFormVisibleCheckbox = $("input#checkbox-layer_visible_form");
+	var $layerFormAgentsFromGroupSelect = $("select#layer_group_form");
+	var $layerFormAgentButton = $("input#button-add_agent");
+
+	var $layerRow = $("tr#layer_row_" + layerId);
+
+	if ($layerRow.length === 0) return;
+
+	$layerFormNameInput.bind("change", function (event) {
+		var name = event.currentTarget.value;
+		$layerRow.find("span.layer_name").html(name);
+		$layerRow.find("input.layer_name").val(name);
+	});
+	$layerFormVisibleCheckbox.bind("click", function (event) {
+		var visible = $(event.currentTarget).prop("checked");
+		$layerRow.find("input.layer_visible").val(visible ? 1 : 0);
+	});
+	$layerFormAgentsFromGroupSelect.bind("change", function (event) {
+		var group = event.currentTarget.value;
+		$layerRow.find("input.layer_agents_from_group").val(group);
+	});
+	$layerFormAgentButton.bind("click", addAgentClick);
+}
+
+function unbindLayerEditorEvents () {
+	var $layerFormNameInput = $("input#text-layer_name_form");
+	var $layerFormVisibleCheckbox = $("input#checkbox-layer_visible_form");
+	var $layerFormAgentsFromGroupSelect = $("select#layer_group_form");
+	var $layerFormAgentButton = $("input#button-add_agent");
+
+	$layerFormNameInput.unbind("change");
+	$layerFormVisibleCheckbox.unbind("click");
+	$layerFormAgentsFromGroupSelect.unbind("change");
+	$layerFormAgentButton.unbind("click");
+}
+
+function getAgentRow (layerId, agentId, angentAlias) {
+	var $row = $("<tr class=\"agents_list_item\" />");
+	var $nameCol = $("<td />");
+	var $deleteCol = $("<td />");
+
+	var $agentName = $("<span class=\"agent_alias\" data-agent-id=\"" + agentId + "\">" + angentAlias + "</span>");
+	var $removeBtn = $('<a class="delete_row" href="javascript:;"><?php echo html_print_image("images/cross.png", true) ?></a>');
+
+	$removeBtn.click(function (event) {
+		var $layerRow = $("tr#layer_row_" + layerId);
+
+		if ($layerRow.length === 0) return;
+
+		var $agentListItemRow = $(event.currentTarget).parent().parent();
+		$layerRow.find("input.layer_agent_id[data-agent-id='" + agentId + "']").remove();
+		$layerRow.find("input.layer_agent_alias[data-agent-id='" + agentId + "']").remove();
+		$agentListItemRow.remove();
+	});
+
+	$nameCol.append($agentName);
+	$deleteCol.append($removeBtn);
+
+	$row.append($nameCol).append($deleteCol);
+
+	return $row;
+}
+
+function addAgentRow (layerId, agentId, agentAlias) {
+	if (agentId == null || agentId == 0 || agentAlias.length === 0) return;
+
+	var $layerRow = $("tr#layer_row_" + layerId);
+	if ($layerRow && $layerRow.find("input.layer_agent_id[value='" + agentId + "']").length === 0) {
+		$layerRow
+			.find("td:first-child")
+				.append(getLayerAgentIdInput(layerId, agentId))
+				.append(getLayerAgentAliasInput(layerId, agentId, agentAlias));
+	}
+
+	$("table#list_agents").append(getAgentRow(layerId, agentId, agentAlias));
+}
+
+function getLayerAgentIdInput (layerId, agentId) {
+	return $("<input class=\"layer_agent_id\" type=\"hidden\" data-agent-id=\"" + agentId + "\" name=\"layers[" + layerId + "][agents][" + agentId + "][id]\" value=\"" + agentId + "\">");
+}
+
+function getLayerAgentAliasInput (layerId, agentId, agentAlias) {
+	return $("<input class=\"layer_agent_alias\" type=\"hidden\" data-agent-id=\"" + agentId + "\" name=\"layers[" + layerId + "][agents][" + agentId + "][alias]\" value=\"" + agentAlias + "\">");
+}
+
+function getLayerRow (layerId, layerData) {
+	var $row = $("<tr id=\"layer_row_" + layerId + "\" class=\"layer_row\" />");
+	var $nameCol = $("<td />");
+	var $sortCol = $("<td />");
+	var $editCol = $("<td />");
+	var $deleteCol = $("<td />");
+
+	var $layerIdInput = $("<input class=\"layer_id\" type=\"hidden\" name=\"layer_ids[]\" value=\"" + layerId + "\">");
+	var $layerNameInput = $("<input class=\"layer_name\" type=\"hidden\" name=\"layers[" + layerId + "][name]\" value=\"" + layerData.name + "\">");
+	var $layerVisibleInput = $("<input class=\"layer_visible\" type=\"hidden\" name=\"layers[" + layerId + "][visible]\" value=\"" + layerData.visible + "\">");
+	var $layerAgentsFromGroupInput = $("<input class=\"layer_agents_from_group\" type=\"hidden\" name=\"layers[" + layerId + "][agents_from_group]\" value=\"" + layerData.agentsFromGroup + "\">");
+
+	var $layerName = $("<span class=\"layer_name\">" + layerData.name + "</span>");
+	var $sortUpBtn = $("<a class=\"up_arrow\" href=\"javascript:;\" />");
+	var $sortDownBtn = $("<a class=\"down_arrow\" href=\"javascript:;\" />");
+	var $editBtn = $('<a class="edit_layer" href="javascript:;"><?php echo html_print_image("images/config.png", true) ?></a>');
+	var $removeBtn = $('<a class="delete_row" href="javascript:;"><?php echo html_print_image("images/cross.png", true) ?></a>');
+
+	$sortUpBtn.click(moveLayerRowUpOnClick);
+	$sortDownBtn.click(moveLayerRowDownOnClick);
+	$editBtn.click(function () { showLayerEditor(layerId); });
+	$removeBtn.click(removeLayerRowOnClick);
+
+	$nameCol
+		.append($layerName)
+		.append($layerIdInput)
+		.append($layerNameInput)
+		.append($layerVisibleInput)
+		.append($layerAgentsFromGroupInput);
+	
+	if (layerData.agents && layerData.agents.length > 0) {
+		layerData.agents.forEach(function (agent) {
+			$nameCol.append(getLayerAgentIdInput(layerId, agent.id));
+			$nameCol.append(getLayerAgentAliasInput(layerId, agent.id, agent.alias));
+		});
+	}
+
+	$sortCol
+		.append($sortUpBtn)
+		.append($sortDownBtn);
+	$editCol
+		.append($editBtn);
+	$deleteCol
+		.append($removeBtn);
+
+	$row
+		.append($nameCol)
+		.append($sortCol)
+		.append($editCol)
+		.append($deleteCol);
+
+	return $row;
+}
+
+function addLayerRow (layerId, layerData) {
+	$("table#list_layers").append(getLayerRow(layerId, layerData));
+	showLayerEditor(layerId);
+}
+
+function hightlightRow (layerId) {
+	var highlightColor = "#E9F3D2";
+	$("tr.layer_row").css("background", "");
+	$("tr#layer_row_" + layerId).css("background", highlightColor);
+}
+
+function existInvalidLayerNames () {
+	var exist = false;
+	$("table#list_layers input.layer_name").each(function () {
+		if ($(this).val().trim().length === 0) {
+			exist = true;
+			return false; // Break jQuery object each
 		}
 	});
 	
+	return exist;
 }
 
-function active_button_add_agent() {
-	$("#button-add_agent").removeAttr('disabled');
-}
-
-function loadAgents(agent_list) {
-	if (agent_list != null) {
-		for (index in agent_list) {
-			if (isInt(index)) {
-				addAgentLayer(agent_list[index]);
-			}
-		}
+function onFormSubmit (event) {
+	// Validate layer names
+	if (existInvalidLayerNames()) {
+		event.preventDefault();
+		event.stopPropagation();
+		alert("<?php echo __("Empty layer names are not supported"); ?>");
+		return false;
 	}
-}
-
-function setFieldsFormLayer(layer_name,layer_group, layer_visible_form, agent_list) {
-	$("#text-layer_name_form").val(layer_name);
-	$("#layer_group_form [value="+layer_group+"]").prop("selected", true);
-	$("#text_id_agent").val('<?php echo __('Select'); ?>');
-	if (layer_visible_form == '0') {
-		$("#checkbox-layer_visible_form").removeAttr("checked");
-	}
-	else {
-		$("#checkbox-layer_visible_form").attr("checked", 'checked');
-	}
-	$("#list_agents").empty(); //Clean list agents
-	
-	loadAgents(agent_list);
-}
-
-function deleteLayer(idRow) {
-	$("#layer_item_" + idRow).remove();
-	$("#hidden-layer_edit_id_form").val('');
-	
-	for (var index in layerList) {
-		
-		//int because in the object array there are method as string
-		if (isInt(index)) {
-			if (layerList[index] == idRow) {
-				layerList.splice(index, 1);
-			}
-		}
-	}
-	
-	updateArrowLayers();
-	
-	//If delete the layer in edit progress, must clean the form.
-	if ($("#hidden-layer_edit_id_form").val() == idRow) {
-		$("#form_layer_table").css('visibility', 'hidden');
-		agentList = Array();
-		countAgentList = 0;
-		
-		setFieldsFormLayer('', 0, true, null);
-		$("#hidden-layer_edit_id_form").val('');
-		$("input[name=save_layer]").val('<?php echo __("Save Layer"); ?>');
-	}
-}
-
-function newLayer() {
-	agentList = Array();
-	countAgentList = 0;
-	
-	setFieldsFormLayer('', -1, true, null);
-	$("#form_layer_table").css('visibility', 'visible');
-	$("#hidden-layer_edit_id_form").val('');
-	$("input[name=save_layer]").val('<?php echo __("Save Layer"); ?>');
-}
-
-function serializeForm() {
-	layer = {};
-	layer.id = 0;
-	layer.layer_name = $("#text-layer_name_form").val();
-	layer.layer_group = $("#layer_group_form :selected").val();
-	if ($("#checkbox-layer_visible_form:checked").val() == 1)
-		layer.layer_visible = 1;
-	else
-		layer.layer_visible = 0;
-	layer.layer_agent_list = Array();
-	
-	for (var index2 in agentList) {
-		if (isInt(index2)) {
-			layer.layer_agent_list[index2] = $("#name_agent_" + agentList[index2]).val();
-		}
-	}
-	
-	return $.toJSON(layer);
-}
-
-function editLayer(indexLayer) {
-	agentList = Array();
-	countAgentList = 0;
-	
-	stringValuesLayer = $("#layer_values_" + indexLayer).val();
-	layer = $.evalJSON(stringValuesLayer);
-	
-	setFieldsFormLayer(layer.layer_name, layer.layer_group, layer.layer_visible, layer.layer_agent_list);
-	$("#hidden-layer_edit_id_form").val(indexLayer);
-	
-	$("input[name=save_layer]").val('<?php echo __("Update Layer"); ?>');
-	
-	$("#form_layer_table").css('visibility', 'visible');
-	
-	hightlightRow(indexLayer);
-}
-
-function hightlightRow(idLayer) {
-	row = $("#layer_item_" + idLayer);
-	
-	$(".col1").css('background', '');
-	$(".up_arrow").css('background', '');
-	$(".down_arrow").css('background', '');
-	$(".col3").css('background', '');
-	$(".col4").css('background', '');
-	$(".col1", row).css('background', '#E9F3D2');
-	$(".up_arrow", row).css('background', '#E9F3D2');
-	$(".down_arrow", row).css('background', '#E9F3D2');
-	$(".col3", row).css('background', '#E9F3D2');
-	$(".col4", row).css('background', '#E9F3D2');
-}
-
-function saveLayer() {
-	layer_id = $("#hidden-layer_edit_id_form").val();
-	
-	if (layer_id == '') {
-		id = countLayer;
-		tableRow = $("#chuck_layer_item").clone();
-		tableRow.attr('id', "layer_item_" + id);
-		$("#layer_values", tableRow).attr("name", "layer_values_" + id);
-		$("#layer_values", tableRow).attr("id", "layer_values_" + id);
-	}
-	else {
-		id = layer_id;
-		tableRow = $("#layer_item_" + id);
-	}
-	
-	$(".col1", tableRow).html($("#text-layer_name_form").val());
-	$("#edit_layer", tableRow).attr("href", "javascript: editLayer(" + id + ");");
-	$("#delete_row", tableRow).attr("href", "javascript: deleteLayer(" + id + ")");
-	$("#up_arrow", tableRow).attr("href", "javascript: upLayer(" + id + ")");
-	$("#down_arrow", tableRow).attr("href", "javascript: downLayer(" + id + ")");
-	
-	$("#layer_values_" + id, tableRow).val(serializeForm());
-	
-	if (layer_id == '') {
-		$("#list_layers").append(tableRow);
-		layerList.push(countLayer);
-		
-		countLayer++;
-	}
-	
-	updateArrowLayers();
-	hightlightRow(id);
-	
-	editLayer(id);
-	$("input[name=save_layer]").val('<?php echo __("Update Layer"); ?>');
-}
-
-function deleteAgentLayer(idRow) {
-	$("#agent_" + idRow).remove();
-	
-	for (var index in agentList) {
-		//int because in the object array there are method as string
-		if (isInt(index)) {
-			if (agentList[index] == idRow) {
-				agentList.splice(index, 1);
-			}
-		}
-	}
-}
-
-function addAgentLayer(agent_name) {
-	if (typeof(agent_name) == 'undefined')
-		agent_name = $("#text-id_agent").val(); //default value
-	
-	tableRow = $("#chuck_agent").clone();
-	
-	tableRow.attr('id','agent_' + countAgentList);
-	agentList.push(countAgentList);
-	
-	$(".col1", tableRow).html(agent_name);
-	$("#delete_row", tableRow).attr("href", 'javascript: deleteAgentLayer(' + countAgentList + ')');
-	$("#name_agent", tableRow).val(agent_name);
-	$("#name_agent", tableRow).attr("name", "name_agent_" + countAgentList);
-	$("#name_agent", tableRow).attr("id", "name_agent_" + countAgentList);
-	
-	countAgentList++;
-	
-	$("#list_agents").append(tableRow);
-	$("#button-add_agent").attr('disabled', true);
-}
-
-function deleteConnectionMap(idConnectionMap) {
-	for (var index in connectionMaps) {
-		
-		//int because in the object array there are method as string
-		if (isInt(index)) {
-			if (connectionMaps[index] == idConnectionMap) {
-				connectionMaps.splice(index, 1);
-			}
-		}
-	}
-	
-	checked = $("#radiobtn0001", $("#map_connection_" + idConnectionMap)).attr('checked');
-	$("#map_connection_" + idConnectionMap).remove();
-	
-	if (checked) {
-		//Checked first, but not is index = 0 maybe.
-		
-		for (var index in connectionMaps) {
-			
-			//int because in the object array there are method as string
-			if (isInt(index)) {
-				$("#radiobtn0001", $("#map_connection_" + connectionMaps[index])).attr('checked', 'checked');
-				break;
-			}
-		}
-	}
-}
-
-function setFieldsRequestAjax(id_conexion) {
-	if (confirm('<?php echo __('Do you want to use the default data from the connection?');?>')) {
-		jQuery.ajax ({
-			data: "page=operation/gis_maps/ajax&opt=get_data_conexion&id_conection=" + idConnectionMap,
-			type: "GET",
-			dataType: 'json',
-			url: "ajax.php",
-			success: function (data) {
-				if (data.correct) {
-					$("input[name=map_initial_longitude]").val(data.content.initial_longitude);
-					$("input[name=map_initial_latitude]").val(data.content.initial_latitude);
-					$("input[name=map_initial_altitude]").val(data.content.initial_altitude);
-					$("input[name=map_default_longitude]").val(data.content.default_longitude);
-					$("input[name=map_default_latitude]").val(data.content.default_latitude);
-					$("input[name=map_default_altitude]").val(data.content.default_altitude);
-					$("input[name=map_zoom_level]").val(data.content.default_zoom_level);
-					$("input[name=map_levels_zoom]").val(data.content.num_zoom_levels);
-				}
-			}
-		});
-	}
-}
-
-function changeDefaultConection(id) {
-	
-	setFieldsRequestAjax(id);
-}
-
-function addConnectionMap() {
-	idConnectionMap = $("#map_connection :selected").val();
-	connectionMapName = $("#map_connection :selected").text();
-	
-	//Test if before just added
-	for (var index in connectionMaps) {
-		if (isInt(index)) {
-			if (connectionMaps[index] == idConnectionMap) {
-				alert('<?php echo __("The connection"); ?> "' + connectionMapName + '" <?php echo __("just added previously."); ?>');
-				
-				return;
-			}
-		}
-	}
-	
-	tableRows = $("#chunk_map_connection").clone();
-	tableRows.attr('id','map_connection_' + idConnectionMap);
-	$("input[name=map_connection_default]",tableRows).val(idConnectionMap);
-	
-	if (connectionMaps.length == 0) {
-		//The first is checked
-		$("#radiobtn0001", tableRows).attr('checked', 'checked');
-		
-		//Set the fields with conexion data (in ajax)
-		setFieldsRequestAjax(idConnectionMap);
-	}
-	
-	connectionMaps.push(idConnectionMap);
-	
-	$("#text-map_connection_name", tableRows).val(connectionMapName);
-	$("#text-map_connection_name", tableRows).attr('name', 'map_connection_name_' + idConnectionMap);
-	$("#delete_row", tableRows).attr('href', "javascript: deleteConnectionMap(" + idConnectionMap + ")");
-	
-	$("#map_connection").append(tableRows);
-}
-
-function fillOrderField() {
+	// Save connection list
 	$('#map_connection_list').val(connectionMaps.toString());
-	$('#layer_list').val(layerList.toString());
 }
 
-function upLayer(idLayer) {
-	var toUpIndex = null;
-	var toDownIndex = null;
-	
-	for (var index in layerList) {
-		
-		//int because in the object array there are method as string
-		if (isInt(index)) {
-			toUpIndex = index;
-			if (layerList[index] == idLayer)
-				break;
-			toDownIndex = index;
-		}
-	}
-	
-	if (toDownIndex != null) {
-		layerToUp = "#layer_item_" + layerList[toUpIndex];
-		layerToDown = "#layer_item_" + layerList[toDownIndex];
-		$(layerToDown).insertAfter(layerToUp);
-		
-		temp = layerList[toUpIndex];
-		layerList[toUpIndex] = layerList[toDownIndex];
-		layerList[toDownIndex] = temp;
-		
-		updateArrowLayers();
-	}
-}
+// Bind events
+$("form#form_setup").submit(onFormSubmit);
+
+// Populate layer list
+var layers = <?php echo json_encode($layer_list); ?>;
+layers.forEach(function (layer) {
+	$("table#list_layers").append(
+		getLayerRow(layer["id"], {
+			name: layer["layer_name"],
+			visible: layer["layer_visible"],
+			agentsFromGroup: layer["layer_group"],
+			agents: layer["layer_agent_list"]
+		})
+	);
+});
 
-function downLayer(idLayer) {
-	var toUpIndex = null;
-	var toDownIndex = null;
-	var found = false;
-	
-	for (var index in layerList) {
-		
-		//int because in the object array there are method as string
-		if (isInt(index)) {
-			if (layerList[index] == idLayer) {
-				toDownIndex = index;
-				found = true;
-			}
-			else {
-				if (found) {
-					toUpIndex = index;
-					break;
-				}
-			}
-		}
-	}
-	
-	if (toUpIndex != null) {
-		layerToUp = "#layer_item_" + layerList[toUpIndex];
-		layerToDown = "#layer_item_" + layerList[toDownIndex];
-		$(layerToDown).insertAfter(layerToUp);
-		
-		temp = layerList[toUpIndex];
-		layerList[toUpIndex] = layerList[toDownIndex];
-		layerList[toDownIndex] = temp;
-		
-		updateArrowLayers();
-	}
-}
 </script>
diff --git a/pandora_console/include/functions_gis.php b/pandora_console/include/functions_gis.php
index d37a4a433e..dd0ba2e972 100644
--- a/pandora_console/include/functions_gis.php
+++ b/pandora_console/include/functions_gis.php
@@ -824,11 +824,11 @@ function gis_save_map($map_name, $map_initial_longitude, $map_initial_latitude,
 			)
 		);
 		if ((isset($layer['layer_agent_list'])) AND (count($layer['layer_agent_list']) > 0)) {
-			foreach ($layer['layer_agent_list'] as $agent_name) {
+			foreach ($layer['layer_agent_list'] as $agent) {
 				db_process_sql_insert('tgis_map_layer_has_tagente',
 					array(
 						'tgis_map_layer_id_tmap_layer' => $idLayer,
-						'tagente_id_agente' => agents_get_agent_id(io_safe_input($agent_name))
+						'tagente_id_agente' => $agent["id"]
 					)
 				);
 			}
@@ -884,7 +884,6 @@ function gis_update_map($idMap, $map_name, $map_initial_longitude, $map_initial_
 		$list_onlyIDsLayers[$idLayer['id_tmap_layer']] = 0;
 	}
 	
-	
 	foreach ($arrayLayers as $index => $layer) {
 		
 		if ($layer['id'] != 0) {
@@ -915,13 +914,11 @@ function gis_update_map($idMap, $map_name, $map_initial_longitude, $map_initial_
 		
 		if (array_key_exists('layer_agent_list', $layer)) {
 			if (count($layer['layer_agent_list']) > 0) {
-				foreach ($layer['layer_agent_list'] as $agent_name) {
-					
-					db_process_sql_insert('tgis_map_layer_has_tagente',
+				foreach ($layer['layer_agent_list'] as $agent) {
+					$id = db_process_sql_insert('tgis_map_layer_has_tagente',
 						array(
 							'tgis_map_layer_id_tmap_layer' => $idLayer,
-							'tagente_id_agente' => agents_get_agent_id(
-								io_safe_input($agent_name))
+							'tagente_id_agente' => $agent["id"]
 						)
 					);
 				}
@@ -1244,7 +1241,8 @@ function gis_get_map_data($idMap) {
 			break;
 	}
 	
-	$sql = "SELECT id_tmap_layer, layer_name,
+	$sql = "SELECT id_tmap_layer AS id,
+				layer_name,
 				tgrupo_id_grupo AS layer_group,
 				view_layer AS layer_visible
 			FROM tgis_map_layer
@@ -1254,12 +1252,12 @@ function gis_get_map_data($idMap) {
 	if ($layers === false) $layers = array();
 	
 	foreach ($layers as $index => $layer) {
-		if (!isset($layer['id_tmap_layer']))
+		if (!isset($layer['id']))
 			continue;
 		
-		$id_tmap_layer = (int) $layer['id_tmap_layer'];
+		$id_tmap_layer = (int) $layer['id'];
 		
-		$sql = "SELECT nombre
+		$sql = "SELECT id_agente AS id, alias
 				FROM tagente
 				WHERE id_agente IN (
 					SELECT tagente_id_agente
@@ -1331,63 +1329,6 @@ function gis_get_num_zoom_levels_connection_default($map_connection_list) {
 	}
 }
 
-/**
- * This function use in form the "pandora_console/godmode/gis_maps/configure_gis_map.php"
- * in the case of edit a map or when there are any error in save new map. Because this function
- * return a html code that it has the rows of layers of map.
- * 
- * @param Array $layer_list The list of layers for convert a html.
- * 
- * @return String The html source code.
- */
-function gis_add_layer_list($layer_list) {
-	$returnVar = '';
-	
-	$count = 0;
-	foreach ($layer_list as $layer) {
-		//Create the layer temp form as it was in the form
-		$layerTempForm = array();
-		$layerTempForm['id'] = $layer['id'];
-		$layerTempForm['layer_name'] = $layer['layer_name'];
-		$layerTempForm['layer_group'] = $layer['layer_group'];
-		$layerTempForm['layer_visible'] = $layer['layer_visible'];
-		if (array_key_exists('layer_agent_list', $layer)) {
-			foreach ($layer['layer_agent_list'] as $agent) {
-				$layerTempForm['layer_agent_list'][] = $agent;
-			}
-		}
-		
-		$layerDataJSON = json_encode($layerTempForm);
-		
-		$returnVar .= '
-			<tbody id="layer_item_' . $count . '">
-				<tr>
-					<td class="col1">' .
-						$layer['layer_name'] .
-						'</td>
-					<td class="up_arrow"><a id="up_arrow" href="javascript: upLayer(' . $count . ');">' . html_print_image("images/up.png", true, array("alt" => "")) . '</a></td>
-					<td class="down_arrow"><a id="down_arrow" href="javascript: downLayer(' . $count . ');">' . html_print_image("images/down.png", true, array("alt" => "")) . '</a></td>
-					<td class="col3">
-						<a id="edit_layer" href="javascript: editLayer(' . $count . ');">' . html_print_image("images/config.png", true, array("alt" => "")) . '</a>
-					</td>
-					<td class="col4">
-						<input type="hidden" name="layer_values_' . $count . '" value=\'' . $layerDataJSON . '\' id="layer_values_' . $count . '" />
-						<a id="delete_row" href="javascript: deleteLayer(' . $count . ')">' . html_print_image("images/cross.png", true, array("alt" => "")) . '</a>
-					</td>
-				</tr>
-			</tbody>
-			<script type="text/javascript">
-				layerList.push(countLayer);
-				countLayer++;
-				updateArrowLayers();
-			</script>';
-		
-		$count ++;
-	}
-	
-	return $returnVar;
-}
-
 function gis_calculate_distance($lat_start, $lon_start, $lat_end, $lon_end) {
 	//Use 3958.9=miles, 6371.0=Km;
 	$earthRadius = 6371;
diff --git a/pandora_console/include/styles/pandora.css b/pandora_console/include/styles/pandora.css
index fe4782bb31..7ffd0d59a4 100644
--- a/pandora_console/include/styles/pandora.css
+++ b/pandora_console/include/styles/pandora.css
@@ -4658,3 +4658,20 @@ form ul.form_flex li ul li{
 .dialog-grayed .ui-dialog-buttonpane {
 	background: #373737 !important;
 }
+
+a.down_arrow {
+	content: url("../../images/down.png");
+	max-width: 21px;
+	max-height: 21px;
+}
+
+a.up_arrow {
+	content: url("../../images/down.png");
+	transform: rotate(180deg);
+	max-width: 21px;
+	max-height: 21px;
+}
+
+tr:last-child > td > a.down_arrow, tr:first-child > td > a.up_arrow {
+	visibility: hidden;
+}