separate backgrounds from general overlays

Closes #1532 (closed)

frontend-js/src/main/js/gui/leftPanel/OverlayPanel.js

@@ -114,6 +114,27 @@ OverlayPanel.prototype.constructor = OverlayPanel;
  * @private
  */
 OverlayPanel.prototype._createOverlayPanelGui = function () {
+  var backgroundsDiv = Functions.createElement({
+    type: "div",
+    name: "backgroundsOverlays",
+    className: "searchPanel"
+  });
+  this.getElement().appendChild(backgroundsDiv);
+
+  var backgroundsTitle = Functions.createElement({
+    type: "h5",
+    content: "BACKGROUNDS:"
+  });
+  backgroundsDiv.appendChild(backgroundsTitle);
+
+  var backgroundsTableDiv = Functions.createElement({
+    type: "table",
+    name: "backgroundsTab",
+    className: "table table-bordered",
+    style: "width:100%"
+  });
+  backgroundsDiv.appendChild(backgroundsTableDiv);
+
   var generalOverlaysDiv = Functions.createElement({
     type: "div",
     name: "generalOverlays",
@@ -338,8 +359,6 @@ OverlayPanel.prototype.createBackgroundRow = function (background, checked) {
 
   result.appendChild(viewTd);
 
-  var dataTd = document.createElement("td");
-  result.appendChild(dataTd);
   result.title = background.getDescription();
   return result;
 };
@@ -572,13 +591,25 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       } else {
         customOverlays.push(overlay);
       }
+
     }
-    var table = self.getControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_TABLE);
-    table.appendChild(self.createTableHeader());
 
+    var table = $("[name='backgroundsTab']", self.getElement())[0];
+    table.innerHTML = "<thead><tr><th>Name</th><th>View</th></tr></thead>";
     var body = document.createElement("tbody");
     table.appendChild(body);
 
+    for (i = 0; i < backgrounds.length; i++) {
+      var background = backgrounds[i];
+      body.appendChild(self.createBackgroundRow(background, background === selectedBackground));
+    }
+
+    table = self.getControlElement(PanelControlElementType.OVERLAY_GENERAL_OVERLAY_TABLE);
+    table.appendChild(self.createTableHeader());
+
+    body = document.createElement("tbody");
+    table.appendChild(body);
+
     generalOverlays.sort(function (o1, o2) {
       var val1 = o1.getId();
       var val2 = o2.getId();
@@ -594,14 +625,15 @@ OverlayPanel.prototype.refresh = function (showDefault) {
       }
       return 0;
     });
-    for (i = 0; i < backgrounds.length; i++) {
-      var background = backgrounds[i];
-      body.appendChild(self.createBackgroundRow(background, background === selectedBackground));
-    }
     for (i = 0; i < generalOverlays.length; i++) {
       overlay = generalOverlays[i];
       body.appendChild(self.createOverlayRow(overlay, selectedOverlay[overlay.getId()], false));
     }
+    if (generalOverlays.length > 0) {
+      $(table.parentNode).show();
+    } else {
+      $(table.parentNode).hide();
+    }
 
     var title = self.getControlElement(PanelControlElementType.OVERLAY_CUSTOM_OVERLAY_TITLE);
     var addButton = $("[name='addOverlay']", self.getElement());