Widget:CharacterList

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.0.min.js"></script>

<style>

   button {
       background-color: #b36e14;
       border: 1px solid #64320d;
       outline: none;
       cursor: pointer;
       padding: 7px 16px;
       transition: 0.3s;
       display: inline;
       color: white;
       height: 31px;
   }

   #buttons {
       text-align: center;
       position: relative;
       display: block;
       float: left;
   }

   #chars a img.thumbborder {
       display: inline-grid;
       border: none;
   }

   #chars a:hover img.thumbborder {
       -webkit-filter: grayscale(50%) brightness(50%);
       filter: grayscale(70%) brightness(50%) blur(2px);
       -webkit-transition: -webkit-filter 250ms linear;
       transition: filter 250ms linear;
   }

   #chars a:hover .tcont {
       opacity: 1;
       transition: opacity 250ms linear;
   }

   #chars a:hover {
       text-decoration: none;
   }

   div#chars .tcont {
       position: relative;
       opacity: 0;
       color: white;
       font-family: Berkshire Swash;
       font-size: 18px;
       display: inline-block;
       width: 135px;
       top: -90px;
       left: 10px;
       text-align: center;
   }

   #chars a {
       display: inline-grid;
       max-width: 150px;
       max-height: 150px;
       margin-right: 20px;
       margin-left: 30px;
       margin-bottom: 30px;
   }

   div#filter {
       border: 3px solid #dddddd;
       border-radius: 20px;
       overflow: hidden;
       display: block;
   }

   div#chars {
       text-align: center;
   }

   div#chars #breaker {
       text-align: left;
       text-size: 18px;
       text-weight: bold;
   }

   #breaker {
       display: block;
       text-align: left;
       font-size: 20px;
       font-weight: bold;
       padding: 5px;
   }

   #charSelect-s1,
   #charSelect-s2 {
       border: 1px solid #000;
       font-size: 14px;
       color: #fff;
       background: #444;
       padding: 2px;
       position: relative;
       width: 220px;
       float: right;
       height: 31px;
   }

   #charTitle {
       display: block;
       text-align: center;
       font-size: 24px;
       font-weight: bold;
       padding-top: 40px;
   }

</style>

<script>

   window.addEventListener('load',
       function() {

$("#chars img.thumbborder").wrap("

");

           $("div#filter").each(function() {
               $(this).after("" + $(this).parent("a").attr("title") + "")
           });

           $("#chars img").each(function() {
               var text = $(this).attr("class");
               text = text.substring(0, text.indexOf(" "));
               $(this).parent().parent().attr("class", text);
           });

           $("span.tcont").each(function() {
               if ($(this).height() >= 29 && $(this).height() < 57) {
                   $(this).parent().css("position", "relative");
                   $(this).css("top", "-100px");
               }
               if ($(this).height() >= 57) {
                   $(this).parent().css("position", "relative");
                   $(this).css("top", "-110px");
               }
           });

           var classList = [];
           $("div#chars a").each(function() {
               var val = $(this).attr("class");
               val = val.substring(0, val.indexOf("-"));
               if (classList.indexOf(val) < 0) {
                   classList.push(val);
               }
           });

           var charList = [];
           $("span.tcont").each(function() {
               if (charList.indexOf($(this).text()) < 0) {
                   charList.push($(this).text());
               }
           });

           var s1List = [];
           $("div#chars a").each(function() {
               if ($(this).attr("class").startsWith("s1")) {
                   if (s1List.indexOf($(this).find("span.tcont").text()) < 0) {
                       s1List.push($(this).find("span.tcont").text());
                   }
               }
           });

           var s2List = [];
           $("div#chars a").each(function() {
               if ($(this).attr("class").startsWith("s2")) {
                   if (s2List.indexOf($(this).find("span.tcont").text()) < 0) {
                       s2List.push($(this).find("span.tcont").text());
                   }
               }
           });

           $("div#chars").before("<select id='charSelect-s1'> <option>Season 1 Characters</option><option>Band of Thieves</option> <option>Porc Hunters</option> <option>The Jewel of the Dingo Isles</option> <option>The Many Gobos of Pat</option> <option>The Sunswords</option> <option>The Unseen Rogues</option> <option>Kobold Headhunters</option> <option>Zarlin Catacombs</option> <option>The New Crew</option> <option>Silvermine Mountains</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");

           $("#charSelect-s1").before("<select id='charSelect-s2'><option>Season 2 Characters</option> <option>Woodcarvers</option> <option>Okagnoma Guild Hall</option> <option>Murder Bros</option> <option>The Cobblers</option> <option>The Tower of Ultimate Wizardry: Chapter One</option> <option>Unexpected Discovery</option> <option>Buckeroos</option> <option>Fall of Dundinborough</option> <option>Den of Devils</option> <option>The Skeleton King</option><option>Player Characters</option><option>NPC Characters</option><option>Minor Characters</option><option>All Characters</option></select>");

$("#charSelect-s2").before('

<button id="b-s1" onclick="changeSeason(this)">Season One</button><button id="b-s2" onclick="changeSeason(this)">Season Two</button>');

           /*Default Select Behavior */
           $("#charSelect-s1").show();
           $("#charSelect-s2").hide();
           $("#b-s1").css('background-color', '#89540F');

           /*Default*/
           $("div#chars a").hide();
           $("span#breaker").remove();
           $("#charTitle").remove();
           for (var i = 0; i < s1List.length; i++) {
               $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
           }
           $("#charSelect-s1").after("Season 1 Characters");

           $("select#charSelect-s1").change(function() {
               $("div#chars a").hide();
               $("span#breaker").remove();
               $("#charTitle").remove();
               $("#charSelect-s1").after("" + $(this).val() + "");
               if ($(this).val() == "All Characters") {
                   for (var i = 0; i < charList.length; i++) {
                       $("span.tcont:contains('" + charList[i] + "'):first").parent().show();
                   }
               }
               if ($(this).val() == "Season 1 Characters") {
                   for (var i = 0; i < s1List.length; i++) {
                       $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                   }
               }
               if ($(this).val() == "Band of Thieves") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c1-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Porc Hunters") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c2-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Jewel of the Dingo Isles") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c3-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Many Gobos of Pat") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c4-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Sunswords") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c5-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Unseen Rogues") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c6-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Kobold Headhunters") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c7-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Zarlin Catacombs") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c8-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The New Crew") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c9-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Silvermine Mountains") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s1c10-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Player Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s1List.length; i++) {
                       $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                   }
                   $("div#chars a:not([class*='-m'])").hide();
                   $("span#breaker").remove();
               }
               if ($(this).val() == "NPC Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s1List.length; i++) {
                       $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                   }
                   $("div#chars a:not([class*='-n'])").hide();
                   $("span#breaker").remove();
               }
               if ($(this).val() == "Minor Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s1List.length; i++) {
                       $("span.tcont:contains('" + s1List[i] + "')").parent("[class*='s1c']:first").show();
                   }
                   $("div#chars a:not([href*='Minor_Characters'])").hide();
                   $("span#breaker").remove();
               }
           });

           $("select#charSelect-s2").change(function() {
               $("div#chars a").hide();
               $("span#breaker").remove();
               $("#charTitle").remove();
               $("#charSelect-s2").after("" + $(this).val() + "");
               if ($(this).val() == "All Characters") {
                   for (var i = 0; i < charList.length; i++) {
                       $("span.tcont:contains('" + charList[i] + "'):first").parent().show();
                   }
               }
               if ($(this).val() == "Season 2 Characters") {
                   for (var i = 0; i < s2List.length; i++) {
                       $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                   }
               }
               if ($(this).val() == "Woodcarvers") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c1-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Okagnoma Guild Hall") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c2-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Murder Bros") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c3-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Cobblers") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c4-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Tower of Ultimate Wizardry: Chapter One") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c5-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Unexpected Discovery") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c6-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Buckeroos") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c7-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Fall of Dundinborough") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c8-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Den of Devils") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c5-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "The Skeleton King") {
                   $("div#chars a").hide();
                   $("div#chars a[class*='s2c5-']").show();
                   $("span#breaker").remove();
                   $("div#chars").find("[class*='-n']:parent:visible").first().before("NPC Characters");
                   $("div#chars").find("[class*='-m']:parent:visible").first().before("Player Characters");
               }
               if ($(this).val() == "Player Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s2List.length; i++) {
                       $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                   }
                   $("div#chars a:not([class*='-m'])").hide();
                   $("span#breaker").remove();
               }
               if ($(this).val() == "NPC Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s2List.length; i++) {
                       $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                   }
                   $("div#chars a:not([class*='-n'])").hide();
                   $("span#breaker").remove();
               }
               if ($(this).val() == "Minor Characters") {
                   $("div#chars a").hide();
                   for (var i = 0; i < s2List.length; i++) {
                       $("span.tcont:contains('" + s2List[i] + "')").parent("[class*='s2c']:first").show();
                   }
                   $("div#chars a:not([href*='Minor_Characters'])").hide();
                   $("span#breaker").remove();
               }
           });

           $("span.tcont").each(function() {
               if ($(this)[0].scrollWidth > 135) {
                   console.log("Fix Spacing > " + $(this).text());
               }
           });

           if ($(window).width() <= 992) {
               $("span.tcont").css("opacity", "1");
               $("#chars a img.thumbborder").css("filter", "brightness(50%)");
           }

       }, false);

   function changeSeason(val) {
       if (val.id == "b-s1") {
           $("#b-s1").css('background-color', '#89540F');
           $("#b-s2").css('background-color', '#b36e14');
           $('#charSelect-s2').prop('selectedIndex', 0);
           $("#charSelect-s1").show();
           $("#charSelect-s2").hide();
           $('#charSelect-s1').trigger('change');
       }

       if (val.id == "b-s2") {
           $("#b-s2").css('background-color', '#89540F');
           $("#b-s1").css('background-color', '#b36e14');
           $('#charSelect-s1').prop('selectedIndex', 0);
           $("#charSelect-s1").hide();
           $("#charSelect-s2").show();
           $('#charSelect-s2').trigger('change');

       }
   }

</script>