mock_keys.html: Statefulness and filter [#24]

hmml_to_html/mock_keys.html

@@ -203,6 +203,47 @@
                 </div>
             </div>
         </div>
+        <div>
+            <p>Temporary Keybinding Documentation:</p>
+
+            <p>Menu toggling:<br>
+                q = quotes<br>
+                r = references<br>
+                f = filter<br>
+                c = credits<br>
+
+                <p>Global Keys:<br>
+                    W,A,P / S,D,N = jump to previous / next marker<br>
+                    V = Reset filter<br>
+                    z = Toggle filter mode between "inclusive" and "exclusive"<br>
+                </p>
+
+                <p>Quote menu:<br>
+                    w,↑ / s,↓ = focus previous / next quote<br>
+                    Enter = jump to marker<br>
+                </p>
+
+                <p>Reference menu:<br>
+                    w,↑ / s,↓ = focus previous / next reference<br>
+                    a,← / d,→ = focus previous / next identifier of current reference<br>
+                    Enter = jump to marker<br>
+                    o = follow link to current reference<br>
+                </p>
+
+                <p>Filter menu:<br>
+                    w,↑ / s,↓ = focus previous / next category<br>
+                    a,← / d,→ = move left / right between topics and media<br>
+                    v = invert topics / media, as per focus<br>
+                    x = toggle currently focused category and focus next category<br>
+                    X = toggle currently focused category and focus previous category<br>
+                </p>
+
+                <p>Credits menu:<br>
+                    w,↑ / s,↓ = focus previous / next credit<br>
+                    a,← / d,→ = move left / right between homepage / support urls<br>
+                    Enter / o = follow currently focused link<br>
+                </p>
+</div>
         <script>
 
 var quotesMenu = document.querySelector(".quotes_container");
@@ -219,8 +260,16 @@ var menuState = {
     creditsMenu
 };
 
-var focusedElement;
+var focusedElement = null;
-var focusedIdentifier;
+var focusedIdentifier = null;
+
+var lastFocusedQuote = null;
+var lastFocusedReference = null;
+var lastFocusedIdentifier = null;
+var lastFocusedCategory = null;
+var lastFocusedTopic = null;
+var lastFocusedMedium = null;
+var lastFocusedCreditItem = null;
 
 function toggleMenuVisibility(element) {
     if(element.classList.contains("visible"))
@@ -229,7 +278,11 @@ function toggleMenuVisibility(element) {
         element.parentNode.classList.remove("visible");
         focusedElement.classList.remove("focused");
         focusedElement = null;
-        focusedIdentifier = null;
+        if(focusedIdentifier)
+        {
+            focusedIdentifier.classList.remove("focused");
+            focusedIdentifier = null;
+        }
     }
     else
     {
@@ -237,37 +290,62 @@ function toggleMenuVisibility(element) {
         {
             menuState[menuIndex].classList.remove("visible");
             menuState[menuIndex].parentNode.classList.remove("visible");
+            if(focusedElement)
+            {
+                focusedElement.classList.remove("focused");
+            }
+            if(focusedIdentifier)
+            {
+                focusedIdentifier.classList.remove("focused");
+            }
         }
         element.classList.add("visible");
         element.parentNode.classList.add("visible");
 
         if(element.classList.contains("quotes_container"))
         {
-            focusedElement = element.querySelectorAll(".ref")[0];
+            if(!lastFocusedQuote)
+            {
+                lastFocusedQuote = element.querySelectorAll(".ref")[0];
+            }
+            focusedElement = lastFocusedQuote;
             focusedElement.classList.add("focused");
         }
         else if(element.classList.contains("references_container"))
         {
-            focusedElement = element.querySelectorAll(".ref")[0];
+            if(!lastFocusedReference || !lastFocusedIdentifier)
+            {
+                lastFocusedReference = element.querySelectorAll(".ref")[0];
+                lastFocusedIdentifier = lastFocusedReference.querySelector(".ref_indices").firstElementChild;
+            }
+            focusedElement = lastFocusedReference;
             focusedElement.classList.add("focused");
-            focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
+            focusedIdentifier = lastFocusedIdentifier;
             focusedIdentifier.classList.add("focused");
         }
         else if(element.classList.contains("filter_container"))
         {
-            focusedElement = element.querySelectorAll(".filter_content")[0];
+            if(!lastFocusedCategory)
+            {
+                lastFocusedCategory = element.querySelectorAll(".filter_content")[0];
+            }
+            focusedElement = lastFocusedCategory;
             focusedElement.classList.add("focused");
         }
         else if(element.classList.contains("credits_container"))
         {
-            if(element.querySelectorAll(".credit .support")[0])
+            if(!lastFocusedCreditItem)
             {
-                focusedElement = element.querySelectorAll(".credit .support")[0];
+                if(element.querySelectorAll(".credit .support")[0])
-            }
+                {
-            else
+                    lastFocusedCreditItem = element.querySelectorAll(".credit .support")[0];
-            {
+                }
-                focusedElement = element.querySelectorAll(".credit .person")[0];
+                else
+                {
+                    lastFocusedCreditItem = element.querySelectorAll(".credit .person")[0];
+                }
             }
+            focusedElement = lastFocusedCreditItem;
             focusedElement.classList.add("focused");
         }
     }
@@ -275,6 +353,7 @@ function toggleMenuVisibility(element) {
 
 function handleKey(key)
 {
+    var gotKey = true;
     switch (key) {
         case "q": {
             toggleMenuVisibility(quotesMenu)
@@ -290,24 +369,27 @@ function handleKey(key)
         } break;
 
         case "Enter": {
-            if(focusedElement.parentNode.classList.contains("quotes_container"))
+            if(focusedElement)
             {
-                var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
+                if(focusedElement.parentNode.classList.contains("quotes_container"))
-                player.setTime(parseInt(time, 10));
-                player.play();
-            }
-            else if(focusedElement.parentNode.classList.contains("references_container"))
-            {
-                var time = focusedIdentifier.getAttribute("data-timestamp");
-                player.setTime(parseInt(time, 10));
-                player.play();
-            }
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.hasAttribute)
                 {
-                    var url = focusedElement.getAttribute("href");
+                    var time = focusedElement.querySelector(".timecode").getAttribute("data-timestamp");
-                    window.open(url, "_blank");
+                    player.setTime(parseInt(time, 10));
+                    player.play();
+                }
+                else if(focusedElement.parentNode.classList.contains("references_container"))
+                {
+                    var time = focusedIdentifier.getAttribute("data-timestamp");
+                    player.setTime(parseInt(time, 10));
+                    player.play();
+                }
+                else if(focusedElement.parentNode.classList.contains("credit"))
+                {
+                    if(focusedElement.hasAttribute)
+                    {
+                        var url = focusedElement.getAttribute("href");
+                        window.open(url, "_blank");
+                    }
                 }
             }
             else
@@ -317,189 +399,245 @@ function handleKey(key)
         } break;
 
         case "o": {
-            if(focusedElement.parentNode.classList.contains("references_container"))
+            if(focusedElement)
             {
-                var url = focusedElement.getAttribute("href");
+                if(focusedElement.parentNode.classList.contains("references_container"))
-                window.open(url, "_blank");
-            }
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.hasAttribute("href"))
                 {
                     var url = focusedElement.getAttribute("href");
                     window.open(url, "_blank");
                 }
-            }
+                else if(focusedElement.parentNode.classList.contains("credit"))
-        } break;
-
-        case "w": {
-            if(focusedElement.parentNode.classList.contains("quotes_container"))
-            {
-                if(focusedElement.previousElementSibling)
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedElement.hasAttribute("href"))
-                    focusedElement = focusedElement.previousElementSibling;
-                    focusedElement.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.classList.contains("references_container"))
-            {
-                if(focusedElement.previousElementSibling)
-                {
-                    focusedElement.classList.remove("focused");
-                    focusedIdentifier.classList.remove("focused");
-                    focusedElement = focusedElement.previousElementSibling;
-                    focusedElement.classList.add("focused");
-                    focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
-                    focusedIdentifier.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
-            {
-                if(focusedElement.previousElementSibling &&
-                    focusedElement.previousElementSibling.classList.contains("filter_content"))
-                {
-                    focusedElement.classList.remove("focused");
-                    focusedElement = focusedElement.previousElementSibling;
-                    focusedElement.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.parentNode.previousElementSibling)
-                {
-                    focusedElement.classList.remove("focused");
-                    if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
-                        focusedElement.classList.contains("support"))
                     {
-                        focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".support");
+                        var url = focusedElement.getAttribute("href");
+                        window.open(url, "_blank");
                     }
-                    else
-                    {
-                        focusedElement = focusedElement.parentNode.previousElementSibling.querySelector(".person");
-                    }
-                    focusedElement.classList.add("focused");
                 }
             }
         } break;
 
-        case "s": {
+        case "w": case "ArrowUp": {
-            if(focusedElement.parentNode.classList.contains("quotes_container"))
+            if(focusedElement)
             {
-                if(focusedElement.nextElementSibling)
+                if(focusedElement.parentNode.classList.contains("quotes_container"))
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedElement.previousElementSibling)
-                    focusedElement = focusedElement.nextElementSibling;
-                    focusedElement.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.classList.contains("references_container"))
-            {
-                if(focusedElement.nextElementSibling)
-                {
-                    focusedElement.classList.remove("focused");
-                    focusedIdentifier.classList.remove("focused");
-                    focusedElement = focusedElement.nextElementSibling;
-                    focusedElement.classList.add("focused");
-                    focusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
-                    focusedIdentifier.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
-            {
-                if(focusedElement.nextElementSibling &&
-                    focusedElement.nextElementSibling.classList.contains("filter_content"))
-                {
-                    focusedElement.classList.remove("focused");
-                    focusedElement = focusedElement.nextElementSibling;
-                    focusedElement.classList.add("focused");
-                }
-            }
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.parentNode.nextElementSibling)
-                {
-                    focusedElement.classList.remove("focused");
-                    if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
-                        focusedElement.classList.contains("support"))
                     {
-                        focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".support");
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedQuote = focusedElement.previousElementSibling;
+                        focusedElement = lastFocusedQuote;
+                        focusedElement.classList.add("focused");
                     }
-                    else
+                }
+                else if(focusedElement.parentNode.classList.contains("references_container"))
+                {
+                    if(focusedElement.previousElementSibling)
                     {
-                        focusedElement = focusedElement.parentNode.nextElementSibling.querySelector(".person");
+                        focusedElement.classList.remove("focused");
+                        focusedIdentifier.classList.remove("focused");
+
+                        lastFocusedReference = focusedElement.previousElementSibling;
+                        focusedElement = lastFocusedReference;
+                        focusedElement.classList.add("focused");
+
+                        lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
+                        focusedIdentifier = lastFocusedIdentifier;
+                        focusedIdentifier.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
+                {
+                    if(focusedElement.previousElementSibling &&
+                        focusedElement.previousElementSibling.classList.contains("filter_content"))
+                    {
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedCategory = focusedElement.previousElementSibling;
+                        focusedElement = lastFocusedCategory;
+                        focusedElement.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.parentNode.classList.contains("credit"))
+                {
+                    if(focusedElement.parentNode.previousElementSibling)
+                    {
+                        focusedElement.classList.remove("focused");
+                        if(focusedElement.parentNode.previousElementSibling.querySelector(".support") &&
+                            focusedElement.classList.contains("support"))
+                        {
+                            lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".support");
+                            focusedElement = lastFocusedCreditItem;
+                        }
+                        else
+                        {
+                            lastFocusedCreditItem = focusedElement.parentNode.previousElementSibling.querySelector(".person");
+                            focusedElement = lastFocusedCreditItem;
+                        }
+                        focusedElement.classList.add("focused");
                     }
-                    focusedElement.classList.add("focused");
                 }
             }
         } break;
 
-        case "a": {
+        case "s": case "ArrowDown": {
-            if(focusedElement.parentNode.classList.contains("references_container"))
+            if(focusedElement)
             {
-                if(focusedIdentifier.previousElementSibling)
+                if(focusedElement.parentNode.classList.contains("quotes_container"))
                 {
-                    focusedIdentifier.classList.remove("focused");
+                    if(focusedElement.nextElementSibling)
-                    focusedIdentifier = focusedIdentifier.previousElementSibling;
+                    {
-                    focusedIdentifier.classList.add("focused");
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedQuote = focusedElement.nextElementSibling;
+                        focusedElement = lastFocusedQuote;
+                        focusedElement.classList.add("focused");
+                    }
                 }
-            }
+                else if(focusedElement.parentNode.classList.contains("references_container"))
-            else if(focusedElement.classList.contains("filter_content"))
-            {
-                if(focusedElement.parentNode.classList.contains("filter_media"))
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedElement.nextElementSibling)
-                    focusedElement = focusedElement.parentNode.previousElementSibling.children[1];
+                    {
-                    focusedElement.classList.add("focused");
+                        focusedElement.classList.remove("focused");
+                        focusedIdentifier.classList.remove("focused");
+
+                        lastFocusedReference = focusedElement.nextElementSibling;
+                        focusedElement = lastFocusedReference;
+                        focusedElement.classList.add("focused");
+
+                        lastFocusedIdentifier = focusedElement.querySelector(".ref_indices").firstElementChild;
+                        focusedIdentifier = lastFocusedIdentifier;
+                        focusedIdentifier.classList.add("focused");
+                    }
                 }
-            }
+                else if(focusedElement.parentNode.parentNode.classList.contains("filters"))
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.classList.contains("support"))
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedElement.nextElementSibling &&
-                    focusedElement = focusedElement.previousElementSibling;
+                        focusedElement.nextElementSibling.classList.contains("filter_content"))
-                    focusedElement.classList.add("focused");
+                    {
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedCategory = focusedElement.nextElementSibling;
+                        focusedElement = lastFocusedCategory;
+                        focusedElement.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.parentNode.classList.contains("credit"))
+                {
+                    if(focusedElement.parentNode.nextElementSibling)
+                    {
+                        focusedElement.classList.remove("focused");
+                        if(focusedElement.parentNode.nextElementSibling.querySelector(".support") &&
+                            focusedElement.classList.contains("support"))
+                        {
+                            lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".support");
+                            focusedElement = lastFocusedCreditItem;
+                        }
+                        else
+                        {
+                            lastFocusedCreditItem = focusedElement.parentNode.nextElementSibling.querySelector(".person");
+                            focusedElement = lastFocusedCreditItem;
+                        }
+                        focusedElement.classList.add("focused");
+                    }
                 }
             }
         } break;
 
-        case "d": {
+        case "a": case "ArrowLeft": {
-            if(focusedElement.parentNode.classList.contains("references_container"))
+            if(focusedElement)
             {
-                if(focusedIdentifier.nextElementSibling)
+                if(focusedElement.parentNode.classList.contains("references_container"))
                 {
-                    focusedIdentifier.classList.remove("focused");
+                    if(focusedIdentifier.previousElementSibling)
-                    focusedIdentifier = focusedIdentifier.nextElementSibling;
+                    {
-                    focusedIdentifier.classList.add("focused");
+                        focusedIdentifier.classList.remove("focused");
+
+                        lastFocusedIdentifier = focusedIdentifier.previousElementSibling;
+                        focusedIdentifier = lastFocusedIdentifier;
+                        focusedIdentifier.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.classList.contains("filter_content"))
+                {
+                    if(focusedElement.parentNode.classList.contains("filter_media"))
+                    {
+                        focusedElement.classList.remove("focused");
+                        lastFocusedMedium = focusedElement;
+
+                        if(!lastFocusedTopic)
+                        {
+                            lastFocusedTopic = focusedElement.parentNode.previousElementSibling.children[1];
+                        }
+                        lastFocusedCategory = lastFocusedTopic;
+                        focusedElement = lastFocusedCategory;
+                        focusedElement.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.parentNode.classList.contains("credit"))
+                {
+                    if(focusedElement.classList.contains("support"))
+                    {
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedCreditItem = focusedElement.previousElementSibling;
+                        focusedElement = lastFocusedCreditItem;
+                        focusedElement.classList.add("focused");
+                    }
                 }
             }
-            else if(focusedElement.classList.contains("filter_content"))
+        } break;
+
+        case "d": case "ArrowRight": {
+            if(focusedElement)
             {
-                if(focusedElement.parentNode.classList.contains("filter_topics"))
+                if(focusedElement.parentNode.classList.contains("references_container"))
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedIdentifier.nextElementSibling)
-                    focusedElement = focusedElement.parentNode.nextElementSibling.children[1];
+                    {
-                    focusedElement.classList.add("focused");
+                        focusedIdentifier.classList.remove("focused");
+
+                        lastFocusedIdentifier = focusedIdentifier.nextElementSibling;
+                        focusedIdentifier = lastFocusedIdentifier;
+                        focusedIdentifier.classList.add("focused");
+                    }
                 }
-            }
+                else if(focusedElement.classList.contains("filter_content"))
-            else if(focusedElement.parentNode.classList.contains("credit"))
-            {
-                if(focusedElement.classList.contains("person") &&
-                    focusedElement.nextElementSibling)
                 {
-                    focusedElement.classList.remove("focused");
+                    if(focusedElement.parentNode.classList.contains("filter_topics"))
-                    focusedElement = focusedElement.nextElementSibling;
+                    {
-                    focusedElement.classList.add("focused");
+                        focusedElement.classList.remove("focused");
+                        lastFocusedTopic = focusedElement;
+
+                        if(!lastFocusedMedium)
+                        {
+                            lastFocusedMedium = focusedElement.parentNode.nextElementSibling.children[1];
+                        }
+                        lastFocusedCategory = lastFocusedMedium;
+                        focusedElement = lastFocusedCategory;
+                        focusedElement.classList.add("focused");
+                    }
+                }
+                else if(focusedElement.parentNode.classList.contains("credit"))
+                {
+                    if(focusedElement.classList.contains("person") &&
+                        focusedElement.nextElementSibling)
+                    {
+                        focusedElement.classList.remove("focused");
+
+                        lastFocusedCreditItem = focusedElement.nextElementSibling;
+                        focusedElement = lastFocusedCreditItem;
+                        focusedElement.classList.add("focused");
+                    }
                 }
             }
         } break;
 
         case "x": {
-            console.log("TODO(matt): Implement me!\n");
+            if(focusedElement && focusedElement.classList.contains("filter_content"))
-            if(focusedElement.classList.contains("filter_content"))
             {
-                focusedElement.classList.toggle("off");
+                filterItemToggle(focusedElement);
                 if(focusedElement.nextElementSibling &&
                     focusedElement.nextElementSibling.classList.contains("filter_content"))
                 {
@@ -511,12 +649,9 @@ function handleKey(key)
         } break;
 
         case "X": {
-            console.log("TODO(matt): Implement me!\n");
+            if(focusedElement && focusedElement.classList.contains("filter_content"))
-            if(focusedElement.classList.contains("filter_content"))
             {
-                focusedElement.classList.toggle("off");
+                filterItemToggle(focusedElement);
-                filterState[focusedElement.classList[1]].off = !filterState[focusedElement.classList[1]].off; 
-                applyFilter()
                 if(focusedElement.previousElementSibling &&
                     focusedElement.previousElementSibling.classList.contains("filter_content"))
                 {
@@ -531,19 +666,15 @@ function handleKey(key)
             toggleFilterMode();
         } break;
 
+        case "v": {
+            if(focusedElement && focusedElement.classList.contains("filter_content"))
+            {
+                invertFilter(focusedElement)
+            }
+        } break;
+
         case "V": {
-            console.log("TODO(matt): Implement me!\n");
+            resetFilter();
-            for(category in filterState)
-            {
-                filterState[category].off = false;
-            }
-            if(filterMode == "exclusive")
-            {
-                filterModeElement.classList.remove("exclusive");
-                filterModeElement.classList.add("inclusive");
-                filterMode = "inclusive";
-            }
-            applyFilter();
         } break;
 
         case 'N':
@@ -557,13 +688,20 @@ function handleKey(key)
         case 'W': {
             player.jumpToPrevMarker();
         } break;
+        default: {
+            gotKey = false;
+        } break;
     }
+    return gotKey;
 }
 
 var player = new Player(document.querySelector(".player_container"), onRefChanged);
 window.addEventListener("resize", function() { player.updateSize(); });
 document.addEventListener("keypress", function(ev) {
-    handleKey(ev.key);
+    if(handleKey(ev.key) == true && focusedElement)
+    {
+        ev.preventDefault();
+    }
 });
 
 var refTimecodes = document.querySelectorAll(".refs .ref .timecode");
@@ -647,109 +785,141 @@ filterModeElement.addEventListener("click", function(ev) {
     toggleFilterMode();
 });
 
-// Filter Toggle
+function filterItemToggle(filterItem)
-var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
-for(var i = 0; i < filterCategories.length; ++i)
 {
-    filterCategories[i].addEventListener("click", function(ev) {
+    var selectedCategory = filterItem.classList[1];
-        var selectedCategory = this.classList[1];
+    filterState[selectedCategory].off = !filterState[selectedCategory].off;
-        filterState[selectedCategory].off = !filterState[selectedCategory].off;
 
-        if(filterState[selectedCategory].off)
+    if(filterState[selectedCategory].off)
+    {
+        filterItem.classList.add("off");
+        var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
+        for(var j = 0; j < testMarkers.length; ++j)
         {
-            this.classList.add("off");
+            if(filterState[selectedCategory].type == "topic")
-            var testMarkers = document.querySelectorAll(".marker." + selectedCategory + ", .marker.cat_" + selectedCategory);
-            for(var j = 0; j < testMarkers.length; ++j)
             {
-                if(filterState[selectedCategory].type == "topic")
+                testMarkers[j].classList.remove("cat_" + selectedCategory);
+                testMarkers[j].classList.add("off_" + selectedCategory);
+                var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
+                for(var k = 0; k < markerCategories.length; ++k)
                 {
-                    testMarkers[j].classList.remove("cat_" + selectedCategory);
+                    if(markerCategories[k].classList.contains(selectedCategory))
-                    testMarkers[j].classList.add("off_" + selectedCategory);
-                    var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
-                    for(var k = 0; k < markerCategories.length; ++k)
                     {
-                        if(markerCategories[k].classList.contains(selectedCategory))
+                        markerCategories[k].classList.add("off");
-                        {
-                            markerCategories[k].classList.add("off");
-                        }
                     }
                 }
-                else
+            }
-                {
+            else
-                    testMarkers[j].classList.remove(selectedCategory);
+            {
-                    testMarkers[j].classList.add("off_" + selectedCategory);
+                testMarkers[j].classList.remove(selectedCategory);
-                }
+                testMarkers[j].classList.add("off_" + selectedCategory);
+            }
 
-                Skipping = 1;
+            Skipping = 1;
-                if(filterMode == "exclusive")
+            if(filterMode == "exclusive")
+            {
+                testMarkers[j].classList.add("skip");
+            }
+            else
+            {
+                var markerClasses = testMarkers[j].classList;
+                for(var k = 0; k < markerClasses.length; ++k)
+                {
+                    if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
+                    {
+                        Skipping = 0;
+                    }
+                }
+                if(Skipping)
                 {
                     testMarkers[j].classList.add("skip");
                 }
-                else
-                {
-                    var markerClasses = testMarkers[j].classList;
-                    for(var k = 0; k < markerClasses.length; ++k)
-                    {
-                        if(markerClasses[k] in filterState || markerClasses[k].replace(/^cat_/, "") in filterState)
-                        {
-                            Skipping = 0;
-                        }
-                    }
-                    if(Skipping)
-                    {
-                        testMarkers[j].classList.add("skip");
-                    }
-                }
-
             }
+
         }
-        else
+    }
+    else
+    {
+        filterItem.classList.remove("off");
+        var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
+        for(var j = 0; j < testMarkers.length; ++j)
         {
-            this.classList.remove("off");
+            if(filterState[selectedCategory].type == "topic")
-            var testMarkers = document.querySelectorAll(".marker.off_" + selectedCategory);
-            for(var j = 0; j < testMarkers.length; ++j)
             {
-                if(filterState[selectedCategory].type == "topic")
+                testMarkers[j].classList.remove("off_" + selectedCategory);
+                testMarkers[j].classList.add("cat_" + selectedCategory);
+                var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
+                for(var k = 0; k < markerCategories.length; ++k)
                 {
-                    testMarkers[j].classList.remove("off_" + selectedCategory);
+                    if(markerCategories[k].classList.contains(selectedCategory))
-                    testMarkers[j].classList.add("cat_" + selectedCategory);
-                    var markerCategories = testMarkers[j].querySelectorAll(".category." + selectedCategory);
-                    for(var k = 0; k < markerCategories.length; ++k)
                     {
-                        if(markerCategories[k].classList.contains(selectedCategory))
+                        markerCategories[k].classList.remove("off");
-                        {
-                            markerCategories[k].classList.remove("off");
-                        }
                     }
                 }
-                else
+            }
-                {
+            else
-                    testMarkers[j].classList.remove("off_" + selectedCategory);
+            {
-                    testMarkers[j].classList.add(selectedCategory);
+                testMarkers[j].classList.remove("off_" + selectedCategory);
-                }
+                testMarkers[j].classList.add(selectedCategory);
+            }
 
-                Skipping = 0;
+            Skipping = 0;
-                if(filterMode == "inclusive")
+            if(filterMode == "inclusive")
+            {
+                testMarkers[j].classList.remove("skip");
+            }
+            else
+            {
+                var markerClasses = testMarkers[j].classList;
+                for(var k = 0; k < markerClasses.length; ++k)
+                {
+                    if(markerClasses[k].startsWith("off_"))
+                    {
+                        Skipping = 1;
+                    }
+                }
+                if(!Skipping)
                 {
                     testMarkers[j].classList.remove("skip");
                 }
-                else
-                {
-                    var markerClasses = testMarkers[j].classList;
-                    for(var k = 0; k < markerClasses.length; ++k)
-                    {
-                        if(markerClasses[k].startsWith("off_"))
-                        {
-                            Skipping = 1;
-                        }
-                    }
-                    if(!Skipping)
-                    {
-                        testMarkers[j].classList.remove("skip");
-                    }
-                }
             }
         }
+    }
+}
+
+var filterCategories = filter.querySelectorAll(".filter_topics .filter_content,.filter_media .filter_content");
+
+function resetFilter()
+{
+    for(i in filterCategories)
+    {
+        if(filterCategories[i].classList && filterCategories[i].classList.contains("off"))
+        {
+            filterItemToggle(filterCategories[i]);
+        }
+    }
+    if(filterMode == "exclusive")
+    {
+        toggleFilterMode();
+    }
+}
+
+function invertFilter(focusedElement)
+{
+    var siblings = focusedElement.parentNode.querySelectorAll(".filter_content");
+    for(i in siblings)
+    {
+        if(siblings[i].classList)
+        {
+            filterItemToggle(siblings[i]);
+        }
+    }
+}
+
+for(var i = 0; i < filterCategories.length; ++i)
+{
+    filterCategories[i].addEventListener("click", function(ev) {
+        filterItemToggle(this);
     });
 }