Debate Timer - Tyler Keohane

A simplistic debate timer for anyone to use. TG Studios. Copyright 2011.

HTML

<div class="title"> Cosmos Debate Timer</div>
<div class="tabs">
    <input class="tab1" type="button" onClick="iSet(0)" value="Constructive" />
    <input class="tab2" type="button" onClick="iSet(1)" value="Cross-X" />
    <input class="tab3" type="button" onClick="iSet(2)" value="Rebuttle" />
    <input class="tab4" type="button" onClick="iSet(3)" value="Aff Prep" />
    <input class="tab5" type="button" onClick="iSet(4)" value="Neg Prep" />
</div>
<div id="rotator" class="rotator">
    <div class="rotatorInner">
        <div class="rotatorBlock">
            <div class="rotatorContents">
                <div id="Constructive"></div>
                <input type="button" id="startBtn" class="actBtn1" onClick="operToggle(0)" value="Start" />
                <input type="button" id="stopBtn" class="actBtn2" onClick="operToggle(5)" value="Stop" />
                <input type="button" id="resetBtn" class="actBtn3" onClick="resetTime(0)" value="Reset" />
            </div>
        </div>
        <div class="rotatorBlock">
            <div class="rotatorContents">
                <div id="Cross-X"></div>
                <input type="button" id="startBtn" class="actBtn1" onClick="operToggle(1)" value="Start" />
                <input type="button" id="stopBtn" class="actBtn2" onClick="operToggle(5)" value="Stop" />
                <input type="button" id="resetBtn" class="actBtn3" onClick="resetTime(1)" value="Reset" />
            </div>
        </div>
        <div class="rotatorBlock">
            <div class="rotatorContents">
                <div id="Rebuttle"></div>
                <input type="button" id="startBtn" class="actBtn1" onClick="operToggle(2)" value="Start" />
                <input type="button" id="stopBtn" class="actBtn2" onClick="operToggle(5)" value="Stop" />
                <input type="button" id="resetBtn" class="actBtn3" onClick="resetTime(2)" value="Reset" />
            </div>
        </div>
        <div class="rotatorBlock">
            <div...

CSS

html, body {
    margin: 0px;
    padding: 0px;
}
.title {
    margin: 20px auto 0px;
    padding: 3px 0px 7px;
    width: 400px;
    color: #FFF;
    background: #CCC;
    border: 1px solid #AAA;
    border-radius: 7px 7px 0px 0px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    text-shadow: 0 1px 2px #333;
    text-align: center;
    font-family:"Arial Black", Arial, sans;
    z-index: -1;
}
.rotator {
    margin: -177px auto 0px;
    padding: 0px;
    position: relative;
    width: 400px;
    height: 125px;
    background: #CCC;
    border: 1px solid #AAA;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    border-radius: 0px 0px 7px 7px;
    overflow: hidden;
    z-index: 1;
}
.rotatorInner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transition: left 1s ease;
    -moz-transition: left 1s ease;
    -webkit-transition: left 1s ease;
}
.rotatorBlock {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 7px;
    float: left;
    clear: none;
}
.rotatorContents {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    color: #FFF;
    text-shadow: 0 1px 2px #333;
    text-align: center;
    font-family:"Arial Black", Arial, sans;
    font-size: 175%;
}
.actBtn1, .actBtn2, .actBtn3 {
    margin: 5px -6px;
    padding: 0px;
    width: 100px;
    height: 50px;
    color: #333;
    background-color: #EEF;
    border: 1px solid #AAA;
    text-shadow: 0 1px 2px #999;
    font-size: 50%;
    font-family:"Arial Black", Arial, sans;
}
.actBtn1 {
    border-radius: 7px 0px 0px 7px
}
.actBtn3 {
    border-radius: 0px 7px 7px 0px
}
.tabs {
    margin: 0px auto 0px auto;
    padding: 0px;
    position: relative;
    width: 402px;
    height: 200px;
    font-size: 50%;
    z-index: 0;
}
.tab1, .tab2, .tab3, .tab4, .tab5 {
    margin: -1px -3px 0px 0px;
    padding: 5px 0px;
    width: 81px;
    color: #000;
    text-shadow: 0 1px 2px #FFF;
    border: 1px solid #AAA;
    overflow: hidden;
...

JavaScript

// Debate Timer
var oper = {
    'x': 5
};

var times = {
    0: {
        name: 'Constructive',
        norm: 240,
        time: 240
    },
    1: {
        name: 'Cross-X',
        norm: 180,
        time: 180
    },
    2: {
        name: 'Rebuttle',
        norm: 240,
        time: 240
    },
    3: {
        name: 'Aff Prep',
        norm: 120,
        time: 120
    },
    4: {
        name: 'Neg Prep',
        norm: 120,
        time: 120
    },
    5: ""
};

function operToggle(num) {
    oper.x = num;
}

function resetTime(num) {
    oper.x = 5;
    times[num].time = times[num].norm;
}

function zeroTime() {
    if (times[oper.x] < 0) {
        times[oper.x].time = 0;
        times[oper.x].err = "Your " + times[oper.x].name + " is finished!";
    }
}

function dispSec(num) {
    s = times[num].time % 60;
    s = s < 10 ? ('0' + s) : s;
    return s;
}

function disp(num) {
    document.getElementById(times[num].name).innerHTML = times[num].name + " - " + Math.floor(times[num].time / 60) + ":" + dispSec(num);
}

function timer() {
    times[oper.x].time -= 1;
    disp(0);
    disp(1);
    disp(2);
    disp(3);
    disp(4);
    setTimeout(timer, 1000);
}

timer();

// Rotator Script

function children(d) {
    var c = [],
        i;
    for (i = 0; i < d.childNodes.length; i++) {
        if (d.childNodes[i].nodeType === 1) {
            c.push(d.childNodes[i]);
        }
    }
    return c;
}

var r = document.getElementById('rotator'),
    inner = children(r)[0],
    n = children(inner),
    c = n.length,
    i = 0,
    j;
inner.style.width = c * 100 + '%';
for (j = n.length; j--;) {
    n[j].style.width = (100 / c).toFixed(1) + '%';
}

function iSet(x) {
    i = x;
    inner.style.left = -Math.round((i % c) * 100) + '%';
}