updated some comments, added mirroring to images, and fixed rerendering

bookmarks removing customization bug

1 files changed, 326 insertions, 245 deletions

diff --git a/startpage.html b/startpage.html
index b9bae9e..d549d11 100644
--- a/startpage.html
+++ b/startpage.html
@@ -12,10 +12,13 @@
       }
 
       .invertedX {
-        transform: scaleX(-1);
+        transform: scale(-1, 1);
       }
       .invertedY {
-        transform: scaleY(-1);
+        transform: scale(1, -1);
+      }
+      .doubleInverted {
+        transform: scale(-1, -1);
       }
 
       /*
@@ -533,9 +536,8 @@
           </p>
         </div>
     </div>
-    todo: recoloring links and then adding a new one resets the color, and something else. check the refreshing of containers, yo!
+    todo: 
     <br />also change add image to "add media" and add youtube iframe support
-    <br />also mirror images x/y?
   </body>
 
   <script>
@@ -587,7 +589,9 @@
       shadowY: "0",
       shadowBlur: "0",
       shadowRgba: "rgba(255,255,255,.90)",
-      zIndex: ""
+      zIndex: "",
+      invertX: false,
+      invertY: false
     };
 
     let wallpaper = "";
@@ -646,11 +650,10 @@
         }
 
         let loadingFromSave = (id != undefined);
-        let isImage = (imageUrl != undefined);
+        let isMedia = (imageUrl != undefined);
 
 
-        // if constructing image container
-        if (isImage) {
+        if (isMedia) {
           numberOfImageContainers++;
 
           if (loadingFromSave) {
@@ -680,7 +683,6 @@
 
           this.initializeImageContainer();
         }
-        // if constructing text container
         else {
           numberOfTextContainers++;
 
@@ -722,8 +724,7 @@
       
 
       /**
-       * creates image element and lets
-       * loadBookmarks() and applySettings() do the rest
+       * creates image element, applySettings() will do the rest
        */
       initializeImageContainer() {
         document.body.insertAdjacentHTML(
@@ -741,8 +742,7 @@
       }
 
       /**
-       * creates shell HTML to hold bookmarks and lets
-       * loadBookmarks() and applySettings() do the rest
+       * creates text container element, loadBookmarks() and applySettings() do the rest 
        */
       initializeTextContainer() {
         // insert default container HTML
@@ -799,97 +799,8 @@
       }
       
       /**
-       * creates container options menu in page settings menu
+       * inserts and populates the settings inputs for the given text container
        */
-          /**
-            * TODO: 
-            * -> remove "images" from wallpaper tab
-            * -> furthermore, condense all global settings into one tab
-            * - including wallpaper, audio, cursor
-            * rename settings form div ids (see "note to self")
-            */
-
-      loadBookmarkListings() {
-        if (Object.keys(this.sections).length == 0) {
-          let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
-          bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
-          return;
-        }
-
-        let sectionData = Object.values(this.sections);
-        let containerSettings = this.containerSettings;
-
-        let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
-        bookmarkListings.innerHTML = "";
-
-        // [in]render the section listings
-        for (let i = 0; i < sectionData.length; i++) {
-          bookmarkListings.insertAdjacentHTML(
-            "beforeend",
-            `
-              ${i == 0 ? "" : `<br />`}
-              <div id="${this.id}-section-listing--${i}" class="sectionListingContainer">
-                <span class=${this.id + "-section"}>
-                  ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label}
-                </span>
-
-                <div class="bookmarkListingButtons">
-                  ${(i > 1) ? `
-                    <button onClick="reorderSection(this, 'up')" class="bookmarkButton">
-                      up
-                    </button>
-                  ` : `` }
-
-                  ${(i > 0) && (i < sectionData.length - 1) ? `
-                    <button onClick="reorderSection(this, 'down')" class="bookmarkButton">
-                        down
-                    </button>
-                  ` : `` }
-                  <button onClick="deleteSection(this)" class="deleteButton">delete section</button>
-                </div>
-              </div>
-            `
-          );
-        }
-
-        // [re]render the link listings
-        for (let s = sectionData.length - 1; s >= 0; s--) {
-          for (let l = sectionData[s].links.length - 1; l >= 0; l--) {
-            let targetSection = document.getElementById(
-              this.id + "-section-listing--" + s
-            );
-
-            targetSection.insertAdjacentHTML(
-              "afterend",
-              `
-                <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer">
-                                    
-                  <span class="${this.id}-link">
-                    ${sectionData[s].links[l].label}
-                  </span>
-
-                  <div class="bookmarkListingButtons">
-                    ${l > 0 ? `
-                      <button onClick="reorderLink(this, 'up')" class="bookmarkButton">
-                        up
-                      </button>
-                    ` : ``
-                    }
-                    ${l < sectionData[s].links.length - 1 ? `
-                      <button onClick="reorderLink(this, 'down')" class="bookmarkButton">
-                        down
-                      </button>
-                    ` : ``
-                    }
-                    <button onClick="deleteLink(this)" class="deleteButton">delete link</button>
-                  </div>
-                </div>
-              `
-            );
-          }
-        }
-      }
-
       createTextContainerMenuListing() {
         let zindex = parseInt(this.containerSettings.zIndex);
         let upButtons = `
@@ -978,7 +889,7 @@
             </div>
             
           <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>color + shape options</p>
+              <p>shaping / color</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu">
@@ -1045,7 +956,7 @@
              </div>
 
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>header text options</p>
+              <p>date / clock / divider</p>
               <p class="expandedMenuIndicator">+</p>
             </div>              
             <div class="expandableMenu">
@@ -1098,7 +1009,7 @@
             </div>
 
             <div class="expandableMenuToggle" onclick="toggleExpandableMenu(this)">
-              <p>general text options</p>
+              <p>general text / font options</p>
               <p class="expandedMenuIndicator">+</p>
             </div>
             <div class="expandableMenu">
@@ -1277,7 +1188,90 @@
         document.getElementById(this.id + "-settings-divider-color").value =
           containerSettings.dividerColor;
       }
+       
+      /**
+       * [re]renders bookmarks shown in the settings menu for a given text container
+       */
+      loadBookmarkListings() {
+        if (Object.keys(this.sections).length == 0) {
+          let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
+          bookmarkListings.innerHTML = `<p style="padding: 0 0 .25rem 0; font-style: italic;">(there are no bookmarks to manage...)</p>`;
+          return;
+        }
 
+        let sectionData = Object.values(this.sections);
+        let containerSettings = this.containerSettings;
+
+        let bookmarkListings = document.getElementById(this.id + "-bookmark-menu--listings");
+        bookmarkListings.innerHTML = "";
+
+        // [in]render the section listings
+        for (let i = 0; i < sectionData.length; i++) {
+          bookmarkListings.insertAdjacentHTML(
+            "beforeend",
+            `
+              ${i == 0 ? "" : `<br />`}
+              <div id="${this.id}-section-listing--${i}" class="sectionListingContainer">
+                <span class=${this.id + "-section"}>
+                  ${sectionData[i].label == "" ? "<u>uncategorized links</u>: " : "<u>section</u>: " + sectionData[i].label}
+                </span>
+
+                <div class="bookmarkListingButtons">
+                  ${(i > 1) ? `
+                    <button onClick="reorderSection(this, 'up')" class="bookmarkButton">
+                      up
+                    </button>
+                  ` : `` }
+
+                  ${(i > 0) && (i < sectionData.length - 1) ? `
+                    <button onClick="reorderSection(this, 'down')" class="bookmarkButton">
+                        down
+                    </button>
+                  ` : `` }
+                  <button onClick="deleteSection(this)" class="deleteButton">delete section</button>
+                </div>
+              </div>
+            `
+          );
+        }
+
+        // [re]render the link listings
+        for (let s = sectionData.length - 1; s >= 0; s--) {
+          for (let l = sectionData[s].links.length - 1; l >= 0; l--) {
+            let targetSection = document.getElementById(
+              this.id + "-section-listing--" + s
+            );
+
+            targetSection.insertAdjacentHTML(
+              "afterend",
+              `
+                <div id="${this.id}-section-listing--${s}--${l}" class="linkListingContainer">
+                                    
+                  <span class="${this.id}-link">
+                    ${sectionData[s].links[l].label}
+                  </span>
+
+                  <div class="bookmarkListingButtons">
+                    ${l > 0 ? `
+                      <button onClick="reorderLink(this, 'up')" class="bookmarkButton">
+                        up
+                      </button>
+                    ` : ``
+                    }
+                    ${l < sectionData[s].links.length - 1 ? `
+                      <button onClick="reorderLink(this, 'down')" class="bookmarkButton">
+                        down
+                      </button>
+                    ` : ``
+                    }
+                    <button onClick="deleteLink(this)" class="deleteButton">delete link</button>
+                  </div>
+                </div>
+              `
+            );
+          }
+        }
+      }
       createImageContainerMenuListing() {
         let zindex = this.containerSettings.zIndex;
         let upButtons = `
@@ -1360,8 +1354,16 @@
                     <label for=${this.id + "-settings-shadow-blur"}>shadow sharpness/fuzziness: </label>
                     <input id=${this.id + "-settings-shadow-blur"} type="range" min="0" max="200" />
                   </div>
-
            
+                <p class="menuHeader">mirroring</p>
+                  <div class="containerOptionListing">
+                    <label for=${this.id + "-settings-mirror-x"}>mirror horizontally</label>
+                    <input id=${this.id + "-settings-mirror-x"} type="checkbox" />
+                  </div>
+                  <div class="containerOptionListing">
+                    <label for=${this.id + "-settings-mirror-y"}>mirror vertically</label>
+                    <input id=${this.id + "-settings-mirror-y"} type="checkbox" />
+                  </div>
             </div>
 
             <div class="manageButtons">
@@ -1406,18 +1408,134 @@
           containerSettings.borderWidth;
         document.getElementById(this.id + "-settings-border-radius").value =
           containerSettings.borderRadius;
+        // MIRRORING
+        document.getElementById(this.id + "-settings-mirror-x").checked =
+          containerSettings.invertX; 
+        document.getElementById(this.id + "-settings-mirror-y").checked =
+          containerSettings.invertY;
       }
+      
+      /**
+       * applies event listeners on container options inputs in settings menu (both text+media containers)
+       */
+      addSettingsMenuEventListeners() {
+        /** apply listeners for both text+media containers */
+        // container border setting listeners
+        document
+          .getElementById(this.id + "-settings-border-color")
+          .addEventListener("input", changeContainerBorderColor, false);
+        document
+          .getElementById(this.id + "-settings-border-width")
+          .addEventListener("input", changeContainerBorderWidth, false);
+        document
+          .getElementById(this.id + "-settings-border-radius")
+          .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners
+        // container shadow setting listeners
+        document
+          .getElementById(this.id + "-settings-shadow-x")
+          .addEventListener("input", changeContainerShadow, false);
+        document
+          .getElementById(this.id + "-settings-shadow-y")
+          .addEventListener("input", changeContainerShadow, false);
+        document
+          .getElementById(this.id + "-settings-shadow-blur")
+          .addEventListener("input", changeContainerShadow, false);
+        document
+          .getElementById(this.id + "-settings-shadow-color")
+          .addEventListener("input", changeContainerShadow, false);
+        document
+          .getElementById(this.id + "-settings-shadow-alpha")
+          .addEventListener("input", changeContainerShadow, false);
 
+        /** if this is an media container, settings diverge here */
+        if (this.imageUrl != undefined) {
+          document
+            .getElementById(this.id + "-settings-mirror-x")
+            .addEventListener("change", toggleMirrorX, false);
+          document
+            .getElementById(this.id + "-settings-mirror-y")
+            .addEventListener("change", toggleMirrorY, false);          
+          return;
+        }
 
+        /** text-only settings */
+        // container background color setting listeners
+        document
+          .getElementById(this.id + "-settings-bg-color")
+          .addEventListener("input", changeContainerBackground, false);
+        document
+          .getElementById(this.id + "-settings-bg-alpha")
+          .addEventListener("input", changeContainerBackground, false);
+        // container text setting listeners
+        document
+          .getElementById(this.id + "-settings-set-font-button")
+          .addEventListener("click", changeFont, false);
+        document
+          .getElementById(this.id + "-settings-left-align")
+          .addEventListener("change", changeContainerAlignment, false);
+        document
+          .getElementById(this.id + "-settings-center-align")
+          .addEventListener("change", changeContainerAlignment, false);
+        document
+          .getElementById(this.id + "-settings-right-align")
+          .addEventListener("change", changeContainerAlignment, false);
 
+        // bookmark section setting listeners
+        document
+          .getElementById(this.id + "-settings-section-color")
+          .addEventListener("input", changeSectionColor, false);
+        document
+          .getElementById(this.id + "-settings-section-size")
+          .addEventListener("input", changeSectionSize, false);
+        document
+          .getElementById(this.id + "-settings-section-bold")
+          .addEventListener("change", toggleSectionBold, false);
+        document
+          .getElementById(this.id + "-settings-section-italic")
+          .addEventListener("change", toggleSectionItalic, false);
+        // bookmark setting listeners
+        document
+          .getElementById(this.id + "-settings-link-color")
+          .addEventListener("input", changeLinkColor, false);
+        document
+          .getElementById(this.id + "-settings-link-size")
+          .addEventListener("input", changeLinkSize, false);
+        // clock setting listeners
+        document
+          .getElementById(this.id + "-settings-date-toggle")
+          .addEventListener("input", toggleDate, false);
+        document
+          .getElementById(this.id + "-settings-clock-toggle")
+          .addEventListener("input", toggleClock, false);
+        document
+          .getElementById(this.id + "-settings-clock-color")
+          .addEventListener("input", changeHeaderColor, false);
+        document
+          .getElementById(this.id + "-settings-clock-size")
+          .addEventListener("input", changeHeaderSize, false);
+        document
+          .getElementById(this.id + "-settings-clock-bold")
+          .addEventListener("change", toggleHeaderBold, false);
+        document
+          .getElementById(this.id + "-settings-clock-italic")
+          .addEventListener("change", toggleHeaderItalic, false);
+        // container divider setting listeners
+        document
+          .getElementById(this.id + "-settings-divider-toggle")
+          .addEventListener("change", toggleDivider, false);
+        document
+          .getElementById(this.id + "-settings-divider-color")
+          .addEventListener("input", changeDividerColor, false);
+      }
+       
       /*
-       * applies saved cosmetic customizations to container
+       * applies saved cosmetic customizations to container upon init (both text+media containers)
        */
       applySettings() {
-        // makes sure that any old themes will still load
+        // make sure old themes will still load
         this.ensureBackwardsCompatibility();
 
-        /** set options relevant to both image and text containers */
+        /** apply customizations relevant to both image and text containers */
         /** POSITION */
         document.getElementById(this.id).style.top    = this.y;
         document.getElementById(this.id).style.left   = this.x;
@@ -1450,11 +1568,25 @@
           containerSettings.borderColor;
 
 
-        /** if this is an image container, all relevant settings have been applied */
+        /** if this is a media container, settings diverge */
         if (this.imageUrl != undefined) {
+          let invertX = containerSettings.invertX;
+          let invertY = containerSettings.invertY;
+
+          if (invertY && invertX) {
+            document.getElementById(this.id).classList.add("doubleInverted"); 
+          }
+          else if (invertX) {
+            document.getElementById(this.id).classList.add("invertedX"); 
+          }
+          else if (invertY) {
+            document.getElementById(this.id).classList.toggle("invertedY"); 
+          }
+
           return;
         }
 
+        /** apply text-container-only customizations */
         /** FONT */
         if (containerSettings.fontCode != "") {
           document.head.insertAdjacentHTML(
@@ -1474,28 +1606,13 @@
           document.getElementById(this.id).style.textAlign = "right";
         }
 
-        /** BOOKMARK CUSTOMIZATION */
-        // apply link customization
-        let linkElements = document.getElementsByClassName(this.id + "-link");
-        for (let i = 0; i < linkElements.length; i++) {
-          linkElements[i].style.color = containerSettings.linkColor;
-          linkElements[i].style.fontSize = containerSettings.linkSize + "px";
-        }
-        // apply section customization
-        let sectionElements = document.getElementsByClassName(this.id + "-section");
-        for (let i = 0; i < sectionElements.length; i++) {
-          sectionElements[i].style.color = containerSettings.sectionColor;
-          sectionElements[i].style.fontSize = containerSettings.sectionSize + "px";
-          sectionElements[i].style.fontWeight = containerSettings.sectionBold ? "bold" : "normal";
-          sectionElements[i].style.fontStyle = containerSettings.sectionItalic ? "italic" : "normal";
-        }
-
+        /** BOOKMARK CUSTOMIZATION HAPPENS IN loadBookmarks() FOR EASIER, 
+          LESS INTENSE RE-RENDERING WHEN BOOKMARK CUSTOMIZATIONS CHANGE */
 
         /** BACKGROUND COLOR */
         document.getElementById(this.id).style.backgroundColor =
           containerSettings.backgroundRgba;
 
-
         /** HEADER  */
         // show header elements
         document.getElementById(this.id + "-date").style.display = 
@@ -1512,7 +1629,6 @@
         document.getElementById(this.id + "-header").style.fontStyle =
           containerSettings.headerItalic ? "italic" : "normal";
 
-
         /** DIVIDER */
         let divider = document.getElementById(this.id + "-divider");
         if (!containerSettings.enableDivider) {
@@ -1530,7 +1646,7 @@
       }
 
       /**
-       * applies event listeners for the container
+       * applies event listeners (moving/resizing) for the container
       */
       addContainerEventListeners() {
         let container = document.getElementById(this.id);
@@ -1556,111 +1672,7 @@
         });
       }
 
-      /**
-       * applies event listeners on container options inputs in settings menu
-       */
-      addSettingsMenuEventListeners() {
-        // container border setting listeners
-        document
-          .getElementById(this.id + "-settings-border-color")
-          .addEventListener("input", changeContainerBorderColor, false);
-        document
-          .getElementById(this.id + "-settings-border-width")
-          .addEventListener("input", changeContainerBorderWidth, false);
-        document
-          .getElementById(this.id + "-settings-border-radius")
-          .addEventListener("input", changeContainerBorderRadius, false); // container color setting listeners
-        // container shadow setting listeners
-        document
-          .getElementById(this.id + "-settings-shadow-x")
-          .addEventListener("input", changeContainerShadow, false);
-        document
-          .getElementById(this.id + "-settings-shadow-y")
-          .addEventListener("input", changeContainerShadow, false);
-        document
-          .getElementById(this.id + "-settings-shadow-blur")
-          .addEventListener("input", changeContainerShadow, false);
-        document
-          .getElementById(this.id + "-settings-shadow-color")
-          .addEventListener("input", changeContainerShadow, false);
-        document
-          .getElementById(this.id + "-settings-shadow-alpha")
-          .addEventListener("input", changeContainerShadow, false);
-
-        /** if this is an image container, all relevant listeners have been applied */
-        if (this.imageUrl != undefined) {
-          return;
-        }
-
-        // conatiner background color setting listeners
-        document
-          .getElementById(this.id + "-settings-bg-color")
-          .addEventListener("input", changeContainerBackground, false);
-        document
-          .getElementById(this.id + "-settings-bg-alpha")
-          .addEventListener("input", changeContainerBackground, false);
-        // container text setting listeners
-        document
-          .getElementById(this.id + "-settings-set-font-button")
-          .addEventListener("click", changeFont, false);
-        document
-          .getElementById(this.id + "-settings-left-align")
-          .addEventListener("change", changeContainerAlignment, false);
-        document
-          .getElementById(this.id + "-settings-center-align")
-          .addEventListener("change", changeContainerAlignment, false);
-        document
-          .getElementById(this.id + "-settings-right-align")
-          .addEventListener("change", changeContainerAlignment, false);
-
-        // bookmark section setting listeners
-        document
-          .getElementById(this.id + "-settings-section-color")
-          .addEventListener("input", changeSectionColor, false);
-        document
-          .getElementById(this.id + "-settings-section-size")
-          .addEventListener("input", changeSectionSize, false);
-        document
-          .getElementById(this.id + "-settings-section-bold")
-          .addEventListener("change", toggleSectionBold, false);
-        document
-          .getElementById(this.id + "-settings-section-italic")
-          .addEventListener("change", toggleSectionItalic, false);
-        // bookmark setting listeners
-        document
-          .getElementById(this.id + "-settings-link-color")
-          .addEventListener("input", changeLinkColor, false);
-        document
-          .getElementById(this.id + "-settings-link-size")
-          .addEventListener("input", changeLinkSize, false);
-        // clock setting listeners
-        document
-          .getElementById(this.id + "-settings-date-toggle")
-          .addEventListener("input", toggleDate, false);
-        document
-          .getElementById(this.id + "-settings-clock-toggle")
-          .addEventListener("input", toggleClock, false);
-        document
-          .getElementById(this.id + "-settings-clock-color")
-          .addEventListener("input", changeHeaderColor, false);
-        document
-          .getElementById(this.id + "-settings-clock-size")
-          .addEventListener("input", changeHeaderSize, false);
-        document
-          .getElementById(this.id + "-settings-clock-bold")
-          .addEventListener("change", toggleHeaderBold, false);
-        document
-          .getElementById(this.id + "-settings-clock-italic")
-          .addEventListener("change", toggleHeaderItalic, false);
-        // container divider setting listeners
-        document
-          .getElementById(this.id + "-settings-divider-toggle")
-          .addEventListener("change", toggleDivider, false);
-        document
-          .getElementById(this.id + "-settings-divider-color")
-          .addEventListener("input", changeDividerColor, false);
-      }
-
+      
       /**
        * [re]renders saved bookmark sections + links for container
        */
@@ -1721,31 +1733,58 @@
         if (!containerSettings.enableDivider) {
           document.getElementById(this.id + "-header").style.marginBottom = "18px";
         }
+
+        // apply link customization
+        let linkElements = document.getElementsByClassName(this.id + "-link");
+        for (let i = 0; i < linkElements.length; i++) {
+          linkElements[i].style.color = containerSettings.linkColor;
+          linkElements[i].style.fontSize = containerSettings.linkSize + "px";
+        }
+        // apply section customization
+        let sectionElements = document.getElementsByClassName(this.id + "-section");
+        for (let i = 0; i < sectionElements.length; i++) {
+          sectionElements[i].style.color = containerSettings.sectionColor;
+          sectionElements[i].style.fontSize = containerSettings.sectionSize + "px";
+          sectionElements[i].style.fontWeight = containerSettings.sectionBold ? "bold" : "normal";
+          sectionElements[i].style.fontStyle = containerSettings.sectionItalic ? "italic" : "normal";
+        }
       }
 
+      /**
+       * if a container is imported and missing a setting, add it and set to default
+       */
       ensureBackwardsCompatibility() {
         let currentSettings;
-        if (this.imageUrl == undefined) {
-          currentSettings = Object.keys(defaultTextContainerSettings); 
+        if (this.imageUrl != undefined) {
+          currentSettings = Object.keys(defaultImageContainerSettings); 
         } 
         else {
-          currentSettings = Object.keys(defaultImageContainerSettings); 
+          currentSettings = Object.keys(defaultTextContainerSettings); 
         }
 
         for (let i = 0; i < currentSettings.length; i++) {
           if (this.containerSettings[currentSettings[i]] == undefined) {
+
             console.log("found missing option: ");
             console.log(currentSettings[i]);
-            this.containerSettings[currentSettings[i]] = defaultTextContainerSettings[currentSettings[i]];
+
+            if (this.imageUrl != undefined) {
+              this.containerSettings[currentSettings[i]] = 
+                defaultImageContainerSettings[currentSettings[i]];
+            }
+            else {
+              this.containerSettings[currentSettings[i]] = 
+                defaultTextContainerSettings[currentSettings[i]];
+            }
           }
         }
       }
       
     }
 
-    /*************************
-     * constructor / init :p *
-     *************************/
+    /******************************
+     * page constructor / init :p *
+     ******************************/
     (() => {
       window.onbeforeunload = unloadPage;
       
@@ -2887,7 +2926,7 @@
       let containerId = colorChange.target.id.split("-settings")[0];
       let container   = containerDataMap.get(containerId);
 
-     container.containerSettings.headerColor = colorChange.target.value;
+      container.containerSettings.headerColor = colorChange.target.value;
       document.getElementById(containerId + "-header").style.color =
         container.containerSettings.headerColor;
     }
@@ -2922,7 +2961,7 @@
       let containerId = colorChange.target.id.split("-settings")[0];
       let container   = containerDataMap.get(containerId);
 
-     container.containerSettings.dividerColor = colorChange.target.value;
+      container.containerSettings.dividerColor = colorChange.target.value;
       let divider = document.getElementById(containerId + "-divider");
       // set multiple places for compatibility
       divider.style.color = container.containerSettings.dividerColor;
@@ -2943,7 +2982,8 @@
         document.getElementById(containerId + "-clock").style.marginBottom = "0px";
       }
     }
-    // TEXT
+
+    // GENERAL TEXT SETTINGS
     function changeContainerAlignment(alignmentChanged) {
       let containerId = alignmentChanged.target.id.split("-settings")[0];
       let container   = containerDataMap.get(containerId);
@@ -3019,6 +3059,47 @@
       document.getElementById(containerId).style.boxShadow = shadow;
     }
 
+    // IMAGE INVERSION
+    function toggleMirrorX(checkboxChanged) {
+      let containerId = checkboxChanged.target.id.split("-settings")[0];
+      let container   = containerDataMap.get(containerId);
+      let invertX = checkboxChanged.target.checked;
+
+      container.containerSettings.invertX = invertX;
+
+      if (invertX && container.containerSettings.invertY) {
+        document.getElementById(containerId).classList.remove("invertedY"); 
+        document.getElementById(containerId).classList.add("doubleInverted"); 
+      }
+      else if (!invertX && document.getElementById(containerId).classList.contains("doubleInverted")) {
+        document.getElementById(containerId).classList.remove("doubleInverted"); 
+        document.getElementById(containerId).classList.add("invertedY"); 
+      }
+      else {
+        document.getElementById(containerId).classList.toggle("invertedX"); 
+      }  
+    }
+
+    function toggleMirrorY(checkboxChanged) {
+      let containerId = checkboxChanged.target.id.split("-settings")[0];
+      let container   = containerDataMap.get(containerId);
+      let invertY = checkboxChanged.target.checked;
+
+      container.containerSettings.invertY = invertY;
+
+      if (invertY && container.containerSettings.invertX) {
+        document.getElementById(containerId).classList.remove("invertedX"); 
+        document.getElementById(containerId).classList.add("doubleInverted"); 
+      }
+      else if (!invertY && document.getElementById(containerId).classList.contains("doubleInverted")) {
+        document.getElementById(containerId).classList.remove("doubleInverted"); 
+        document.getElementById(containerId).classList.add("invertedX"); 
+      }
+      else {
+        document.getElementById(containerId).classList.toggle("invertedY"); 
+      }
+    }
+
     /************************************
      * RESET / IMPORT & EXPORT HANDLERS *
      ************************************/