pooltracker

<?xml version="1.0" encoding="UTF-8" ?>
<Module>
  <ModulePrefs title="Pool Tracker" height="35">
    <Require feature="wave" /> 
  </ModulePrefs>
  <Content type="html">
    <![CDATA[     
       <style type="text/css">
           #content.edit #view {display : none; }
           #name { float: left; font-weight: bold; margin-right: 1em;}
           ul { padding: 0; margin: 0.2em; float: left; font-size: 0.8em;}
           li { display: inline; height: 1em; float: left;  width : 1em; margin: 0 0.1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;}
           li.unavalable { display:none; }
           li.clear, li.full, li.empty { cursor: pointer; }
           li.full { background-color: #000; }
           li.empty { background-color: #BBB; }
           li.breaker { width: .5em; }
           #content.view #edit {display: none; }
           form { display: inline; font-size: .8em;}
           #reset { text-decoration:underline; cursor:pointer;}
           #item.noreset .reset { display: none; }
      </style>
      <script type="text/javascript">
            function set_pool(item) {
                wave.getState().submitValue('pool', item._count);
            }

            function set_value(value, name) {
                wave.getState().submitValue(name, value);
            }

            function reset() {
                var state = wave.getState();
                var reset_value = parseInt(state.get('resetvalue', state.get('min', 0)));
                set_value(reset_value, 'pool');
            }

            function updateAll() {
                var state = wave.getState();
                var resetable = state.get('resetable', 0);
                document.getElementById('item').className = (resetable != 0 ? 'reset' : 'noreset');
                document.getElementById('resetable').checked = resetable != 0;

                var available = parseInt(state.get('cap', 10));
                var lowest = parseInt(state.get('min', 0));
                var active = parseInt(state.get('pool', 0));
                var reset_value = parseInt(state.get('resetvalue', lowest));
                var name = state.get('name', '');

                update_pool(lowest, available, active);
                update_selector(available, available+10, "maxvalue");
                update_selector(lowest, available, "minvalue");
                update_selector(reset_value, available, "resetvalue");
                update_name(name);
            }

            function update_name(name) {
                document.getElementById('namein').value = name;
                document.getElementById('name').textContent = name;
            }

            function update_pool(lowest, available, active) {
                var element = document.getElementById("pool");
                var count = 0;
                var value = Math.max(lowest, active);
                var match = /full|empty|unavalable/;
                for (var i in element.childNodes) {
                    var node = element.childNodes[i];
                    if (match.test(node.className)) {
                        if ( count >= available )
                            node.className = 'unavalable'; 
                        else
                            node.className = (count < value) ? 'full' : 'empty'; 
                        count += 1;
                    }
                }
                for (var i = count; i < available ; i ++) {
                    var newli = document.createElement('li');
                    newli.onclick = function() { set_pool(this);}
                    newli.className = (i < value) ? 'full' : 'empty';
                    newli._count = i+1;
                    element.appendChild(newli);
                    if (i%5 == 4){
                        var newdevider = document.createElement('li');
                        newdevider.className="breaker";
                        element.appendChild(newdevider);
                    }
                }
                document.getElementById("clear").style.display = (lowest > 0 ? "none" : "");
            }

            function update_selector(value, highpoint, name) {
                var selector = document.getElementById(name);
                var count = 0;
                for( var i in selector.childNodes) {
                    if (selector.childNodes[i].tagName == "OPTION") {
                        selector.childNodes[i].style.display = (count <= highpoint ? "" : "none");
                        count += 1;
                    }
                }
                for (var i = count; i <= highpoint ; i ++) {
                    var newoption = document.createElement('option');
                    newoption.textContent = i;
                    newoption.value = i;
                    selector.appendChild(newoption);
                }
                selector.selectedIndex = value;
            }

            function updateMode(mode) {
                document.getElementById('content').className = (mode == wave.Mode.EDIT ? 'edit' : 'view');
            }
            
            gadgets.util.registerOnLoadHandler(function() {
                document.getElementById("clear")._count = 0;
                wave.setStateCallback(updateAll);
                wave.setModeCallback(updateMode);
            });
      </script>
      <div id="content">
       <div id="item">
        <div id="view">
          <span id="name"></span>
          <ul class="pool" id="pool">
            <li class="clear" id="clear" onClick="set_pool(this);">X</li>
          </ul>
          <span class="reset" id="reset" onclick="reset()">Reset</span>
        </div>
        <form id="edit">
          <label>Name</label>
          <input type="text" id="namein" name="name" onchange="set_value(this.value, 'name');"></input>

          <label>Min Value</label>
          <select name="minvalue" id="minvalue" onchange="set_value(this.selectedIndex, 'min');">
            <option value="0">0</option>
          </select>

          <label>Max Value</label>
          <select name="maxvalue" id="maxvalue" onchange="set_value(this.selectedIndex, 'cap');">
            <option value="0">0</option>
          </select>

          <label>Resetable?</label>
          <input type="checkbox" id="resetable" onchange="set_value(this.checked ? 1 : 0, 'resetable');" />

          <label class="reset">Reset Value</label>
          <select name="resetvalue" class="reset" id="resetvalue" onchange="set_value(this.selectedIndex, 'resetvalue');">
            <option value="0">0</option>
          </select>
        </form>
       </div>
      </div>
    ]]>
  </Content>
</Module>