Skip to content
Snippets Groups Projects
index.html 131 KiB
Newer Older
  • Learn to ignore specific revisions
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    
        <link rel="shortcut icon" type="image/x-icon" href="img/icon.ico" />
        <title>Strip Poker Night at the Inventory</title>
    
    	<!-- Stylesheets -->
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    	<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
    	<link rel="stylesheet" type="text/css" href="css/spni.css">
    </head>
    <body onload="initialSetup()">
    
    Joseph Kantel's avatar
    Joseph Kantel committed
    <!-- Warning Screen -->
    <div id="warning-screen" class="screen-container" hidden>
      <div class="screen">
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        <!-- Banner Flair -->
        <button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
          <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
        </button>
    
        <button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair substitute-version" onclick="showVersionModal()">
          Unknown Version
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        </button>
    
        <button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        </button>
    
        <button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
          Help / FAQ
        </button>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        <button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
          Credits
        </button>
        <a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
          <img class="reddit-logo" src="img/reddit.png"/>
        </a>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        <!-- Banner -->
        <div class="title-banner-container">
          <div class="bordered title-banner-area">
            <img class="bordered title-banner" src="img/title.png">
          </div>
        </div>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        <!-- Content -->
        <div class="main-title-container">
    
    Joseph Kantel's avatar
    Joseph Kantel committed
            <div class="warning-text">
                <p>This game contains material that is only suitable for adults. <b style="color:#DD3333">If you are under the age of 18, please leave now.</b></p>
    
                <br>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
                <p><b style="color:#DD3333">Strip Poker Night at the Inventory</b> is a free, open source, and community run project. All characters represented within are 18+ and the property of their original owners.</p>
    
                <p>The latest version of the game can be played at
                <br><a href="https://spnati.net" target="_blank"><b>spnati.net</b></a></p>
    
                <br><br><br>
                
                <p>Make sure to check out our list of <a href="#" onclick="showHelpModal()">Frequently-Asked Questions</a>!</p>
                
                <br><br>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
                <p>By clicking the button below, you are confirming that you are an adult and such material is legal in your region.</p>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
            </div>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
          <!-- Start Button -->
          <div id='title-start-edge' class='bordered'>
            <button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="enterTitleScreen()">
    
              <img class='title-entrance-image' src='img/enter.png'/>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
            </button>
          </div>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
        </div>
    
    Joseph Kantel's avatar
    Joseph Kantel committed
      </div>
    </div>
    
    
    <!-- Title Screen -->
    <div id="title-screen" class="screen-container" hidden>
      <div class="screen">
    
        <!-- Title Candy -->
        <img id="left-title-candy" class="title-candy" src=""/>
        <img id="right-title-candy" class="title-candy" src=""/>
    
    
        <!-- Banner Flair -->
        <button id="title-settings-button" class="bordered smooth-button smooth-button-red" onclick="showGameSettingsModal()">
          <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
        </button>
    
        <button id="title-version-button" class="bordered smooth-button smooth-button-red banner-flair substitute-version" onclick="showVersionModal()">
          Unknown Version
    
        </button>
    
        <button class="bordered smooth-button smooth-button-red bug-report-button title-bug-report-button" onclick="showBugReportModal()">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
    
        <button id="title-help-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showHelpModal()">
          Help / FAQ
        </button>
    
        <button id="title-credits-button" class="bordered smooth-button smooth-button-red banner-flair" onclick="showCreditModal()">
          Credits
        </button>
    
        <a class="bordered reddit-button smooth-button smooth-button-red" href="https://www.reddit.com/r/spnati/">
          <img class="reddit-logo" src="img/reddit.png"/>
        </a>
    
        <!-- Banner -->
        <div class="title-banner-container">
          <div class="bordered title-banner-area">
            <img class="bordered title-banner" src="img/title.png">
          </div>
        </div>
    
        <!-- Content -->
    
        <div class="main-title-container male">
    
          <!-- Player Name -->
          <div id="title-name-block">
            <div class="title-label">Who are you?</div>
            <input type="text" class='bordered' id='player-name-field'/>
          </div>
    
          <!-- Player Gender -->
          <div id='title-gender-block'>
            <input type='image' value='' id='male-gender-button' class='bordered title-content-button' src='img/male.png' onclick='changePlayerGender("male")'>
    
            <input type='image' value='' id='female-gender-button' class='bordered title-content-button' src='img/female.png' onclick='changePlayerGender("female")'>
    
          </div>
    
          <!-- Player Male Size -->
    
          <div id='male-size-container' class='title-size-block medium'>
            <input type='image' value='' id="small-junk-button" class='bordered title-small-button title-content-button' src='img/male_small.png' onclick='changePlayerSize("small")'>
    
            <input type='image' value='' id="medium-junk-button" class='bordered title-medium-button title-content-button' src='img/male_medium.png' onclick='changePlayerSize("medium")'>
    
            <input type='image' value='' id="large-junk-button" class='bordered title-large-button title-content-button' src='img/male_large.png' onclick='changePlayerSize("large")'>
    
          </div>
    
          <!-- Player Female Size -->
    
          <div id='female-size-container' class='title-size-block medium'>
            <input type='image' value='' id="small-boobs-button" class='bordered title-small-button title-content-button' src='img/female_small.png' onclick='changePlayerSize("small")'>
    
            <input type='image' value='' id="medium-boobs-button" class='bordered title-medium-button title-content-button' src='img/female_medium.png' onclick='changePlayerSize("medium")'>
    
            <input type='image' value='' id="large-boobs-button" class='bordered title-large-button title-content-button' src='img/female_large.png' onclick='changePlayerSize("large")'>
    
          </div>
    
          <!-- Player Wardrobe -->
          <div id='title-wardrobe-block'>
            <div class='title-label'>What are you wearing?</div>
    
            <div id='title-warning-label'>Select 0 to 8 articles. Wear whatever you want.</div>
    
    
            <!-- Male Clothing -->
            <div id='male-clothing-container' class='title-clothing-container'>
              <input type='image' value='' id="male-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/male/hat.png' onclick='selectClothing(0)'>
    
              <input type='image' value='' id="male-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/male/headphones.png' onclick='selectClothing(1)'>
              <input type='image' value='' id="male-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/male/jacket.png' onclick='selectClothing(2)'>
              <input type='image' value='' id="male-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/male/shirt.png' onclick='selectClothing(3)'>
              <input type='image' value='' id="male-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/male/tshirt.png' onclick='selectClothing(4)'>
              <input type='image' value='' id="male-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/male/undershirt.png' onclick='selectClothing(5)'>
    
              <input type='image' value='' id="male-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/male/glasses.png' onclick='selectClothing(6)'>
              <input type='image' value='' id="male-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/male/belt.png' onclick='selectClothing(7)'>
              <input type='image' value='' id="male-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/male/pants.png' onclick='selectClothing(8)'>
              <input type='image' value='' id="male-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/male/shorts.png' onclick='selectClothing(9)'>
              <input type='image' value='' id="male-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/male/kilt.png' onclick='selectClothing(10)'>
              <input type='image' value='' id="male-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/male/boxers.png' onclick='selectClothing(11)'>
    
              <input type='image' value='' id="male-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/male/necklace.png' onclick='selectClothing(12)'>
              <input type='image' value='' id="male-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/male/tie.png' onclick='selectClothing(13)'>
              <input type='image' value='' id="male-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/male/gloves.png' onclick='selectClothing(14)'>
              <input type='image' value='' id="male-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/male/socks.png' onclick='selectClothing(15)'>
              <input type='image' value='' id="male-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/male/shoes.png' onclick='selectClothing(16)'>
              <input type='image' value='' id="male-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/male/boots.png' onclick='selectClothing(17)'>
    
            </div>
    
            <!-- Female Clothing -->
            <div id='female-clothing-container' class='title-clothing-container' hidden>
              <input type='image' value='' id="female-clothing-option-0" class='bordered title-clothing-button title-content-button titleClothing0' src='player/female/hat.png' onclick='selectClothing(0)'>
    
              <input type='image' value='' id="female-clothing-option-1" class='bordered title-clothing-button title-content-button titleClothing1' src='player/female/headphones.png' onclick='selectClothing(1)'>
              <input type='image' value='' id="female-clothing-option-2" class='bordered title-clothing-button title-content-button titleClothing2' src='player/female/jacket.png' onclick='selectClothing(2)'>
              <input type='image' value='' id="female-clothing-option-3" class='bordered title-clothing-button title-content-button titleClothing3' src='player/female/shirt.png' onclick='selectClothing(3)'>
              <input type='image' value='' id="female-clothing-option-4" class='bordered title-clothing-button title-content-button titleClothing4' src='player/female/tanktop.png' onclick='selectClothing(4)'>
              <input type='image' value='' id="female-clothing-option-5" class='bordered title-clothing-button title-content-button titleClothing5' src='player/female/bra.png' onclick='selectClothing(5)'>
    
              <input type='image' value='' id="female-clothing-option-6" class='bordered title-clothing-button title-content-button titleClothing6' src='player/female/glasses.png' onclick='selectClothing(6)'>
              <input type='image' value='' id="female-clothing-option-7" class='bordered title-clothing-button title-content-button titleClothing7' src='player/female/belt.png' onclick='selectClothing(7)'>
              <input type='image' value='' id="female-clothing-option-8" class='bordered title-clothing-button title-content-button titleClothing8' src='player/female/pants.png' onclick='selectClothing(8)'>
              <input type='image' value='' id="female-clothing-option-9" class='bordered title-clothing-button title-content-button titleClothing9' src='player/female/shorts.png' onclick='selectClothing(9)'>
              <input type='image' value='' id="female-clothing-option-10" class='bordered title-clothing-button title-content-button titleClothing10' src='player/female/skirt.png' onclick='selectClothing(10)'>
              <input type='image' value='' id="female-clothing-option-11" class='bordered title-clothing-button title-content-button titleClothing11' src='player/female/panties.png' onclick='selectClothing(11)'>
    
              <input type='image' value='' id="female-clothing-option-12" class='bordered title-clothing-button title-content-button titleClothing12' src='player/female/necklace.png' onclick='selectClothing(12)'>
              <input type='image' value='' id="female-clothing-option-13" class='bordered title-clothing-button title-content-button titleClothing13' src='player/female/bracelet.png' onclick='selectClothing(13)'>
              <input type='image' value='' id="female-clothing-option-14" class='bordered title-clothing-button title-content-button titleClothing14' src='player/female/gloves.png' onclick='selectClothing(14)'>
              <input type='image' value='' id="female-clothing-option-15" class='bordered title-clothing-button title-content-button titleClothing15' src='player/female/stockings.png' onclick='selectClothing(15)'>
              <input type='image' value='' id="female-clothing-option-16" class='bordered title-clothing-button title-content-button titleClothing16' src='player/female/socks.png' onclick='selectClothing(16)'>
              <input type='image' value='' id="female-clothing-option-17" class='bordered title-clothing-button title-content-button titleClothing17' src='player/female/shoes.png' onclick='selectClothing(17)'>
    
            </div>
          </div>
    
          <!-- Start Button -->
          <div id='title-start-edge' class='bordered'>
            <button id='title-start-button' class='bordered smooth-button smooth-button-red' onclick="validateTitleScreen()">
    
              <img class='title-entrance-image' src='img/enter.png'/>
    
    	</div>
    	<div id='title-gallery-edge' class='bordered'>
    		<button id='title-gallery-button' class='bordered smooth-button smooth-button-red' onclick="loadGalleryScreen()">
              <img class='title-gallery-image' src='img/gallery.svg'/>
            </button>
        </div>
    
    	<div id='title-tags-edge' class='bordered'>
    		<button id='title-tags-button' class='bordered smooth-button smooth-button-red' onclick="showPlayerTagsModal()">
              <span class="glyphicon glyphicon-tags" aria-hidden="true"></span>
            </button>
        </div>
    
      </div>
    </div>
    
    
    <!-- Main Select Screen -->
    <div id="main-select-screen" class="screen-container" hidden>
      <div class="screen">
    
    
        <!-- Opponent Dialogues -->
        <div class="dialogue-bubble-row">
          <div id="select-bubble-1" class="bordered left dialogue-bubble-area">
    
            <div class="dialogue-bubble arrow-down">
    
              <span id="select-dialogue-1" class="dialogue"></span>
            </div>
          </div>
          <div id="select-bubble-2" class="bordered halfLeft dialogue-bubble-area">
    
            <div class="dialogue-bubble arrow-down">
    
              <span id="select-dialogue-2" class="dialogue"></span>
            </div>
          </div>
          <div id="select-bubble-3" class="bordered center dialogue-bubble-area">
    
            <div class="dialogue-bubble arrow-down">
    
              <span id="select-dialogue-3" class="dialogue"></span>
            </div>
          </div>
          <div id="select-bubble-4" class="bordered farHalfLeft dialogue-bubble-area">
    
            <div class="dialogue-bubble arrow-down">
    
              <span id="select-dialogue-4" class="dialogue"></span>
            </div>
          </div>
        </div>
    
        <!-- Opponent Images -->
        <div class="image-row">
    
    FarawayVision's avatar
    FarawayVision committed
          <div id="select-image-area-1" class="farLeft selection-image-area">
    
            <img id="select-image-1" class="opponent-image" hidden>
    
            <div id="opponent-suggestions-1" class="opponent-suggestion-container" hidden>
                <div class="bordered opponent-suggestion-header">Suggested Opponents</div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-1-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 1)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-1-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 2)">Name</button>
    
                    </div>
                </div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-1-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 3)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-1-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(1, 4)">Name</button>
    
    FarawayVision's avatar
    FarawayVision committed
          <div id="select-image-area-2" class="almostLeft selection-image-area">
    
            <img id="select-image-2" class="opponent-image" hidden>
    
            <div id="opponent-suggestions-2" class="opponent-suggestion-container" hidden>
                <div class="bordered opponent-suggestion-header">Suggested Opponents</div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-2-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 1)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-2-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 2)">Name</button>
    
                    </div>
                </div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-2-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 3)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-2-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(2, 4)">Name</button>
    
    FarawayVision's avatar
    FarawayVision committed
          <div id="select-image-area-3" class="almostRight selection-image-area">
    
            <img id="select-image-3" class="opponent-image" hidden>
    
            <div id="opponent-suggestions-3" class="opponent-suggestion-container" hidden>
                <div class="bordered opponent-suggestion-header">Suggested Opponents</div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-3-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 1)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-3-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 2)">Name</button>
    
                    </div>
                </div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-3-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 3)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-3-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(3, 4)">Name</button>
    
    FarawayVision's avatar
    FarawayVision committed
          <div id="select-image-area-4" class="farRight selection-image-area">
    
            <img id="select-image-4" class="opponent-image" hidden>
    
            <div id="opponent-suggestions-4" class="opponent-suggestion-container" hidden>
                <div class="bordered opponent-suggestion-header">Suggested Opponents</div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-4-1" class="opponent-suggestion-cell opponent-suggestion-cell-1">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 1)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-4-2" class="opponent-suggestion-cell opponent-suggestion-cell-2">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 2)">Name</button>
    
                    </div>
                </div>
                <div class="opponent-suggestion-row">
                    <div id="opponent-suggestion-4-3" class="opponent-suggestion-cell opponent-suggestion-cell-3">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="left">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 3)">Name</button>
    
                    </div>
                    <div id="opponent-suggestion-4-4" class="opponent-suggestion-cell opponent-suggestion-cell-4">
    
                        <img class="opponent-suggestion-image" data-toggle="tooltip" data-placement="right">
    
                        <button class="bordered opponent-suggestion-label smooth-button-green" onclick="suggestionSelected(4, 4)">Name</button>
    
        <!-- Hide Button -->
        <button class='bordered hide-table-button' onclick="hideSelectionTable()">
          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
        </button>
    
        <button class='bordered table-bug-report-button' onclick="showBugReportModal()">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
        </button>
    
        <div id="select-table">
    
          <!-- Opponent Selections -->
          <div class="bordered left opponent-area">
            <div id="select-name-label-1" class="bordered opponent-name-label">Opponent 1</div>
            <button id="select-slot-button-1" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(1)">Select Opponent</button>
          </div>
          <div class="bordered halfLeft opponent-area">
            <div id="select-name-label-2" class="bordered opponent-name-label">Opponent 2</div>
            <button id="select-slot-button-2" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(2)">Select Opponent</button>
          </div>
          <div class="bordered center opponent-area">
            <div id="select-name-label-3" class="bordered opponent-name-label">Opponent 3</div>
            <button id="select-slot-button-3" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(3)">Select Opponent</button>
          </div>
          <div class="bordered farHalfLeft opponent-area">
            <div id="select-name-label-4" class="bordered opponent-name-label">Opponent 4</div>
            <button id="select-slot-button-4" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectOpponentSlot(4)">Select Opponent</button>
          </div>
    
          <!-- Dock Area -->
          <div id='main-select-area' class='bordered'>
    
            <!-- Select Buttons -->
    
            <button id='select-main-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backSelectScreen()">
    
              Back
            </button>
    
            <button id='select-group-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(1)">
    
              Testing Tables
            </button>
    
            <button id='select-group-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="clickedSelectGroupButton(0)">
    
              Preset Tables
    
            </button>
            <button id='select-random-group-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomGroupButton()">
    
              Random Table
    
            </button>
    
            <!-- Advance Button Casing -->
            <div id='select-advance-top' class='bordered'> </div>
            <div id='select-advance-bottom' class='bordered'> </div>
    
            <!-- Advance Button -->
            <button id='main-select-button' class='bordered smooth-button smooth-button-red' onclick="advanceSelectScreen()" disabled="true">
              Start
            </button>
    
            <!-- More Select Buttons -->
            <button id='select-random-female-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseFemale(player) {return player.gender.toLowerCase() === 'female';})">
              Random Females
            </button>
            <button id='select-random-male-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="clickedRandomFillButton(function chooseMale(player) {return player.gender.toLowerCase() === 'male';})">
              Random Males
            </button>
            <button id='select-random-button' class='bordered main-select-button  smooth-button smooth-button-blue' onclick="clickedRandomFillButton()">
    
    Joseph Kantel's avatar
    Joseph Kantel committed
              Random Fill
            </button>
    
            <button id='select-remove-all-button' class='bordered main-select-button  smooth-button smooth-button-red' onclick="clickedRemoveAllButton()" disabled="true">
    
    Joseph Kantel's avatar
    Joseph Kantel committed
              Remove All
    
            </button>
    
          </div>
        </div>
    
      </div>
    </div>
    
    
    <!-- Individual Select Screen -->
    <div id="individual-select-screen" class="screen-container" hidden>
      <div class="screen">
    
        <!-- Opponent Info -->
        <div class="dialogue-bubble-row">
          <div id="individual-stats-page-1-1" class="bordered left dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="individual-name-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="individual-sex-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="individual-source-label-1" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="individual-stats-page-1-2" class="bordered left dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="individual-writer-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="individual-artist-label-1" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
    
              <div class="bordered stats-label">Stats</div>
    
              <div class="bordered stats-content">
                <div id="individual-counts-1">
    
                  <span id="individual-line-count-label-1"></span> unique lines <br />
    
                  <span id="individual-pose-count-label-1"></span> poses
                </div>
    
          </div>
          <div id="individual-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
            <div id="individual-description-label-1">
            </div>
          </div>
    
          <div id="individual-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="individual-name-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="individual-sex-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="individual-source-label-2" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="individual-stats-page-2-2" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="individual-writer-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="individual-artist-label-2" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
    
              <div class="bordered stats-label">Stats</div>
    
              <div class="bordered stats-content">
                <div id="individual-counts-2">
    
                  <span id="individual-line-count-label-2"></span> unique lines <br />
    
                  <span id="individual-pose-count-label-2"></span> poses
                </div>
    
          </div>
          <div id="individual-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
            <div id="individual-description-label-2">
            </div>
          </div>
    
          <div id="individual-stats-page-3-1" class="bordered center dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="individual-name-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="individual-sex-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="individual-source-label-3" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="individual-stats-page-3-2" class="bordered center dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="individual-writer-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="individual-artist-label-3" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
    
              <div class="bordered stats-label">Stats</div>
    
              <div class="bordered stats-content">
                <div id="individual-counts-3">
    
                  <span id="individual-line-count-label-3"></span> unique lines <br />
    
                  <span id="individual-pose-count-label-3"></span> poses
                </div>
    
          </div>
          <div id="individual-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
            <div id="individual-description-label-3">
            </div>
          </div>
    
          <div id="individual-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="individual-name-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="individual-sex-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="individual-source-label-4" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="individual-stats-page-4-2" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="individual-writer-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="individual-artist-label-4" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
    
              <div class="bordered stats-label">Stats</div>
    
              <div class="bordered stats-content">
                <div id="individual-counts-4">
    
                  <span id="individual-line-count-label-4"></span> unique lines <br />
    
                  <span id="individual-pose-count-label-4"></span> poses
                </div>
    
          </div>
          <div id="individual-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
            <div id="individual-description-label-4">
            </div>
          </div>
        </div>
    
        <!-- Opponent Images -->
        <div class="image-row">
    
          <div class="farLeft selection-image-area">
    
            <img id="individual-image-1" class="opponent-image" hidden>
            <img id="individual-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="individual-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="individual-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="individual-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, false)"></select>
    
          <div class="almostLeft selection-image-area">
    
            <img id="individual-image-2" class="opponent-image" hidden>
            <img id="individual-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="individual-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="individual-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="individual-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, false)"></select>
    
          <div class="almostRight selection-image-area">
    
            <img id="individual-image-3" class="opponent-image" hidden>
            <img id="individual-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="individual-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="individual-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="individual-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, false)"></select>
    
          <div class="farRight selection-image-area">
    
            <img id="individual-image-4" class="opponent-image" hidden>
            <img id="individual-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="individual-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="individual-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="individual-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, false)"></select>
    
        <!-- Hide Button -->
        <button class='bordered hide-table-button' onclick="hideSingleSelectionTable()">
          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
        </button>
    
        <button class='bordered table-bug-report-button' onclick="showBugReportModal()">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
        </button>
    
        <!-- Dock Area -->
        <div id="individual-select-table">
    
          <!-- Opponent Selections -->
          <div class="bordered left small-opponent-area">
    
            <button id="individual-button-1" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(1)">Select Opponent</button>
    
          </div>
          <div class="bordered halfLeft small-opponent-area">
    
            <button id="individual-button-2" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(2)">Select Opponent</button>
    
          </div>
          <div class="bordered halfRight small-opponent-area">
    
            <button id="individual-button-3" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(3)">Select Opponent</button>
    
          </div>
          <div class="bordered right small-opponent-area">
    
            <button id="individual-button-4" class="bordered smooth-button smooth-button-green full-select-slot-button" onclick="selectIndividualOpponent(4)">Select Opponent</button>
    
          </div>
    
          <!-- Dock Area -->
          <div id='main-select-area' class='bordered'>
    
            <!-- Buttons -->
    
            <button id='individual-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
    
            <button id='individual-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openSearchModal()">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    
            </button>
    
            <!-- Advance Button Casing -->
            <div class='bordered long-select-advance-top'> </div>
            <div class='bordered long-select-advance-bottom'> </div>
    
            <!-- Page Selection -->
            <div class="select-page-display">
              <div class="bordered page-label">Page</div>
              <input id="individual-page-indicator" type="text" class="bordered page-indicator" value="" />
              <div id="individual-max-page-indicator" class="bordered of-label">of 1</div>
            </div>
    
            <div class="select-page-selection">
              <button class="bordered smooth-button first-page-button" onclick="changeIndividualPage(true, -1)">
                <span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
              </button>
              <button class="bordered smooth-button left-page-button" onclick="changeIndividualPage(false, -1)">
                <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
              </button>
    
              <button class="bordered smooth-button go-page-button" onclick="changeIndividualPage(true, 0)">
                <div style="margin-top:2px"><b>Go</b></div>
    
              </button>
              <button class="bordered smooth-button right-page-button" onclick="changeIndividualPage(false, 1)">
                <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
              </button>
              <button class="bordered smooth-button last-page-button" onclick="changeIndividualPage(true, 1)" style="border-right: 2px solid">
                <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
              </button>
            </div>
    
            <!-- More Buttons -->
    
            <button id='individual-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(1)">
              Basic Info
            </button>
            <button id='individual-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(2)">
    
              Credits
            </button>
    
            <button id='individual-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeIndividualStats(3)">
    
              More Info
            </button>
    
          </div>
    
      </div>
    </div>
    
    
    <!-- Group Select Screen -->
    <div id="group-select-screen" class="screen-container" hidden>
      <div class="screen">
    
        <!-- Opponent Info -->
        <div class="dialogue-bubble-row">
          <div id="group-stats-page-1-1" class="bordered left dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="group-name-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="group-sex-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="group-source-label-1" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="group-stats-page-1-2" class="bordered left dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="group-writer-label-1" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="group-artist-label-1" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
              <div class="bordered stats-label">Stats</div>
              <div class="bordered stats-content">
                <div id="group-counts-1">
    
                  <span id="group-line-count-label-1"></span> unique lines <br />
    
                  <span id="group-pose-count-label-1"></span> poses
                </div>
              </div>
            </div>
    
          </div>
          <div id="group-stats-page-1-3" class="bordered left dialogue-bubble-area" style="display:none;">
            <div id="group-description-label-1">
            </div>
          </div>
    
          <div id="group-stats-page-2-1" class="bordered halfLeft dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="group-name-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="group-sex-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="group-source-label-2" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="group-stats-page-2-2" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="group-writer-label-2" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="group-artist-label-2" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
              <div class="bordered stats-label">Stats</div>
              <div class="bordered stats-content">
                <div id="group-counts-2">
    
                  <span id="group-line-count-label-2"></span> unique lines <br />
    
                  <span id="group-pose-count-label-2"></span> poses
                </div>
              </div>
            </div>
    
          </div>
          <div id="group-stats-page-2-3" class="bordered halfLeft dialogue-bubble-area" style="display:none;">
            <div id="group-description-label-2">
            </div>
          </div>
    
          <div id="group-stats-page-3-1" class="bordered center dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="group-name-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="group-sex-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="group-source-label-3" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="group-stats-page-3-2" class="bordered center dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="group-writer-label-3" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="group-artist-label-3" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
              <div class="bordered stats-label">Stats</div>
              <div class="bordered stats-content">
                <div id="group-counts-3">
    
                  <span id="group-line-count-label-3"></span> unique lines <br />
    
                  <span id="group-pose-count-label-3"></span> poses
                </div>
              </div>
            </div>
    
          </div>
          <div id="group-stats-page-3-3" class="bordered center dialogue-bubble-area" style="display:none;">
            <div id="group-description-label-3">
            </div>
          </div>
    
          <div id="group-stats-page-4-1" class="bordered farHalfLeft dialogue-bubble-area">
            <div class="stats-section">
              <div class="bordered stats-label">Name</div>
              <div id="group-name-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Sex</div>
              <div id="group-sex-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section-large">
              <div class="bordered stats-label">Source</div>
              <div id="group-source-label-4" class="bordered stats-content"></div>
            </div>
          </div>
          <div id="group-stats-page-4-2" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
            <div class="stats-section">
              <div class="bordered stats-label">Writer</div>
              <div id="group-writer-label-4" class="bordered stats-content"></div>
            </div>
            <div class="input-group stats-section">
              <div class="bordered stats-label">Artist</div>
              <div id="group-artist-label-4" class="bordered stats-content"></div>
            </div>
    
            <div class="stats-section">
              <div class="bordered stats-label">Stats</div>
              <div class="bordered stats-content">
                <div id="group-counts-4">
    
                  <span id="group-line-count-label-4"></span> unique lines <br />
    
                  <span id="group-pose-count-label-4"></span> poses
                </div>
              </div>
            </div>
    
          </div>
          <div id="group-stats-page-4-3" class="bordered farHalfLeft dialogue-bubble-area" style="display:none;">
            <div id="group-description-label-4">
            </div>
          </div>
        </div>
    
        <!-- Opponent Images -->
        <div class="image-row">
    
          <div class="farLeft selection-image-area">
    
            <img id="group-image-1" class="opponent-image" hidden>
            <img id="group-badge-1" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="group-status-1" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="group-layer-1" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="group-costume-select-1" class="alt-costume-dropdown" onchange="altCostumeSelected(1, true)"></select>
    
          <div class="almostLeft selection-image-area">
    
            <img id="group-image-2" class="opponent-image" hidden>
            <img id="group-badge-2" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="group-status-2" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="group-layer-2" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="group-costume-select-2" class="alt-costume-dropdown" onchange="altCostumeSelected(2, true)"></select>
    
          <div class="almostRight selection-image-area">
    
            <img id="group-image-3" class="opponent-image" hidden>
            <img id="group-badge-3" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="group-status-3" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="group-layer-3" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="group-costume-select-3" class="alt-costume-dropdown" onchange="altCostumeSelected(3, true)"></select>
    
          <div class="farRight selection-image-area">
    
            <img id="group-image-4" class="opponent-image" hidden>
            <img id="group-badge-4" class="badge-icon" src="img/epilogue_icon.png" hidden/>
    
            <img id="group-status-4" class="status-icon" src="img/testing-badge.png" hidden/>
    
            <img id="group-layer-4" class="layer-icon" src="img/layers1.png" hidden/>
    
            <select id="group-costume-select-4" class="alt-costume-dropdown" onchange="altCostumeSelected(4, true)"></select>
    
        <!-- Hide Button -->
        <button id="group-hide-button" class='bordered' onclick="hideGroupSelectionTable()">
          <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
        </button>
    
        <button class='bordered table-bug-report-button group-bug-report-button' onclick="showBugReportModal()">
          <span class="glyphicon glyphicon-warning-sign" aria-hidden="true"></span>
        </button>
    
        <!-- Dock Area -->
        <div id="group-select-table">
    
          <!-- Opponent Selections -->
          <div id="group-select-area" class="bordered opponent-area">
            <div id="group-name-label" class="bordered opponent-name-label">Opponent 1</div>
            <button id="group-button" class="bordered smooth-button smooth-button-green select-slot-button" onclick="selectGroup()">Select Group</button>
          </div>
    
          <!-- Dock Area -->
          <div id='main-select-area' class='bordered'>
    
            <!-- Buttons -->
    
            <button id='group-back-button' class='bordered main-select-button select-back-button smooth-button smooth-button-red' onclick="backToSelect()">
    
            <button id='group-switch-testing-button' class='bordered main-select-button smooth-button smooth-button-green' onclick="switchSelectGroupScreen()">
              Preset Tables
            </button>
    
    
            <button id='group-search-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="openGroupSearchModal()">
              <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    
            </button>
    
            <!-- Advance Button Casing -->
            <div class='bordered long-select-advance-top'> </div>
            <div class='bordered long-select-advance-bottom'> </div>
    
            <!-- Page Selection -->
            <div class="select-page-display">
              <div class="bordered page-label">Page</div>
              <input id="group-page-indicator" type="text" class="bordered page-indicator" value="" />
              <div id="group-max-page-indicator" class="bordered of-label">of 1</div>
            </div>
    
            <div class="select-page-selection">
              <button class="bordered smooth-button first-page-button" onclick="changeGroupPage(true, -1)">
                <span class="glyphicon glyphicon-fast-backward" aria-hidden="true"></span>
              </button>
              <button class="bordered smooth-button left-page-button" onclick="changeGroupPage(false, -1)">
                <span class="glyphicon glyphicon-triangle-left" aria-hidden="true"></span>
              </button>
              <button class="bordered smooth-button go-page-button" onclick="changeGroupPage(true, 0)">
                <div style="margin-top:2px"><b>Go</b></div>
              </button>
              <button class="bordered smooth-button right-page-button" onclick="changeGroupPage(false, 1)">
                <span class="glyphicon glyphicon-triangle-right" aria-hidden="true"></span>
              </button>
              <button class="bordered smooth-button last-page-button" onclick="changeGroupPage(true, 1)" style="border-right: 2px solid">
                <span class="glyphicon glyphicon-fast-forward" aria-hidden="true"></span>
              </button>
            </div>
    
            <!-- More Buttons -->
    
            <button id='group-basic-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(1)">
              Basic Info
            </button>
            <button id='group-credits-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(2)">
    
              Credits
            </button>
    
            <button id='group-more-info-button' class='bordered main-select-button smooth-button smooth-button-blue' onclick="changeGroupStats(3)">
    
              More Info
            </button>
    
          </div>
    
    <!-- Gallery Screen -->
    <div id="gallery-screen" class="screen-container" hidden>
      <div class="screen">
    	  <div id="gallery-gender-block">
    		  <input type="image" id="gallery-gender-all" class="gallery-gender-button bordered" src='img/all.png' onclick="galleryGender('all')"/>
    		  <input type="image" id="gallery-gender-any" class="gallery-gender-button bordered" src='img/any.png' style="opacity:0.4;" onclick="galleryGender('any')" />