<!DOCTYPE html>
<!--
    Roller Derby Scoreboard    Copyright © 2011 Neale Pickett

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful, but
    WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
    General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see
    <http://www.gnu.org/licenses/>.
-->
<html>
  <head>
    <title>LADD Scoreboard</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="res/scoreboard.css">
    <style type="text/css">
#jam {
    bottom: auto;
    top: 2em;
}
#jamtext {
    bottom: auto;
    top: 1.5em;
}
#jamno {
    bottom: auto;
    top: 3em;
}
.timeouts {
    margin: 0em 6em;
}
.jammer {
    margin: 0em 3em;
}

/*
 * Penalties
 */
#penalties-a, #penalties-b {
    position: absolute;
    font-size: 13%;
    bottom: 2px;
    border-collapse: collapse;
}

#penalties-a {
    left: 0;
}
#penalties-b {
    right: 0;
}

#penalties td {
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.075);
    padding: 0;
    vertical-align: bottom;
}

#penalties .minors td {
    height: 3em;
}
#penalties .majors td {
    height: 8em;
}
#penalties .minors div {
    background-color: #880;
    color: black;
}
#penalties .majors div {
    background-color: #800;
}
#penalties .sk8ers td {
    font-family: sans-serif;
    vertical-align: top;
    width: 1em;
    line-height: 75%;
}
    </style>
    <script type="text/javascript" src="logos/logos.js"></script>
    <script type="text/javascript" src="res/scoreboard.js"></script>
    <script type="text/javascript" src="res/penalties.js"></script>
    <script type="text/javascript">
tenths = true;
    </script>
  </head>
    <body>
        <div id="scoreboard">
            <p class="left">
                <img  class="logo"     id="logo-a" src="" alt="A" onclick="handle(event);">
                <span class="timeouts" id="timeouts-a" onclick="handle(event);">0</span>
                <span class="jammer"   id="jammer-a" onclick="handle(event);">★</span>
                <span class="score"    id="score-a" onclick="handle(event);">-</span>
            </p>

            <p class="center">
                <span id="period" onclick="handle(event);">--:--</span>
                <span id="jam" onclick="handle(event);">-:--.-</span>
                <span id="jamtext" onclick="handle(event);"></span>
                <span id="jamno" onclick="handle(event);">0</span>
            </p>

            <p class="right">
                <img  class="logo"     id="logo-b" src="" alt="B" onclick="handle(event);">
                <span class="timeouts" id="timeouts-b" onclick="handle(event);">0</span>
                <span class="jammer"   id="jammer-b" onclick="handle(event);">★</span>
                <span class="score"    id="score-b" onclick="handle(event);">-</span>
            </p>
        </div>

    <div id="penalties">
      <table id="penalties-a">
        <tr class="majors"></tr>
        <tr class="sk8ers"></tr>
      </table>

      <!-- Right here would be an excellent place for a sponsor logo -->

      <table id="penalties-b">
        <tr class="majors"></tr>
        <tr class="sk8ers"></tr>
      </table>
    </div>

    <div id="notice">
      <div id="notice-1">Power Jam</div>
      <div id="notice-2">Grand Slam</div>
      <div id="notice-3">Ouch</div>
      <div id="notice-4">OMG</div>
    </div>
  </body>
</html>