Untitled

<html>
    <head>
        <title>Shake The Shack Line!</title>

        <style>

            * {
                margin:0;
            }

            html, body {
                margin:0;
                padding:0;
                font-size:1.5em;
                font-family:sans, "Arial", "Helvetica";
                background-color:#eee;
                color:#000;
            }

            div {
                margin:0;
                padding:0;
            }

            #idHeader {
                background-color:#00b7ee;
                font-weight:bold;
                text-align:center;
            }

            #idBody {
                padding:1em 0em 0em 0em;
                color:#22376f;
                background-color:#ccf1fc;
            }

            #idFooter {
                background-color:#00b7ee;
                font-weight:bold;
                text-align:right;
            }

            /*--- */

            #mainMain {
                text-align:center;
            }

            #infoWhichNote {
                margin-top:0.5em;
                text-align:center;
            }

            #infoSoundLink {
                margin-top:0.5em;
                text-align:center;
                font-weight:bold;
            }

            #timerSingPrompt {
                font-size:2.5em;
                font-weight:bold;
                text-align:center;
                margin-top:0.5em;
            }

            #singProgWrapper {
                text-align:center;
                position:relative;
            }
                #singProgBg {
                    position:relative;
                }
                #singProgBar {
                    position:relative;
                    top:-50px;
                }

            #idListHolder {
                padding:0.5em 0em 0.5em 1.0em;
                background-color:#abe7f9;
            }
                #idListHeader {
                    font-weight:bold;
                    font-style:italic;
                    margin-bottom:0.33em;
                }
                #idList {
                    color:#00b7ee;
                    font-weight:normal;
                }

                .nameOwn {
                    padding-top:5px;
                    padding-left:1.25em;
                    color:#22376f;
                    font-weight:bold;
                }
                .nameGhosted {
                    padding-top:5px;
                    padding-left:1.25em;
                    color:#bdbdbd;
                }
                .nameRegular {
                    padding-top:5px;
                    padding-left:1.25em;
                    color:#00b7ee
                }

        </style>

        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>

        <script type="text/javascript" src="shared.js"></script>

        <script type="text/javascript">

            var SING_DURATION = 5000;
            var _id;
            var _nextEventMs;
            var _chordNum = 0;
            var _noteIndex = -1;
            var _doesAudio;

            var _intervalPost;
            var _intervalDisplay;
            var _timeDeltaMs;
            var _roundTrip;
            var _start;

            var _debug = (window.location.href).indexOf("debug") > -1;

            //

            function updateFromServer()
            {
                doPrintNamesPost();
                doGetNextEvent();
            }

            function doPrintNamesPost() // plus keepalive
            {
                $.post("printHandler.php", { type:"names", keepalive:_id }, printNamesPostBack );
            }
            function printNamesPostBack($s)
            {
                if ($s.indexOf("ERROR:") == 0)
                {
                    alert($s);
                    return;
                }

                // parse incoming data, which is formatted like this:
                // id~name~position|id~name~position...

                var sRecs = $s.split("|");
                var array = new Array();
                for (var i = 0; i < sRecs.length; i++)
                {
                    var a = sRecs[i].split("~");
                    array[i] = { id:a[0], name:a[1], position:a[2] };
                }
                array.sort(printNameSorter);

                // print it nicely

                var string = "";

                for (var i = 0; i < array.length; i++)
                {
                    var cls;
                    var imgName;

                    // node graphic
                    if (array[i].id == _id) {
                        imgName = "node_filled_50.png";
                        cls = "nameOwn";
                    }
                    else if (array[i].position < -10) {
                        imgName = "node_gray_50.png";
                        cls = "nameGhosted";
                    }
                    else {
                        imgName = "node_empty_50.png";
                        cls = "nameRegular";
                    }

                    string += "<div style='clear:left;float:left;'><img src='_img/" + imgName + "' /></div>";
                    string += "<div class='" + cls + "'>" + array[i].name;
                    if (_debug)
                    {
                        // position
                        string += " (" + array[i].position + ")";
                    }
                    string += "</div>";
                }
                $("#idList").replaceWith("<div id='idList'>" + string + "</div>");
            }

            function printNameSorter($o1,$o2)
            {
                a = parseInt($o1.position);
                b = parseInt($o2.position);
                return a + b; // descending order
            }

            $(document).ready(function()
            {
                if (document.cookie && getCookie("id"))
                {
                    _id = getCookie("id");

                    if (! _id || _id.length == 0)
                    {
                        // DANGER
                        window.location = "client_login.htm";
                    }
                }
                else
                {
                    // DANGER
                    window.location = "client_login.htm";
                }

                _doesAudio = browserAudioDetect();
                //_doesAudio = true;

                doFirstTimePost();
            });

            function doFirstTimePost()
            {
                _start = new Date().getTime();
                $.post("timingInfoHandler.php", { id:_id }, firstTimePostBack);
            }
            function firstTimePostBack($s)
            {
                var serverTimeMs = getPdlParam($s, 0);

                var clientTimeMs = new Date().getTime();
                _timeDeltaMs = serverTimeMs - clientTimeMs;
                _roundTrip = clientTimeMs - _start;

                /// alert('roundtrip=' + _roundTrip);

                _nextEventMs = getPdlParam($s, 1);
                _chordNum = 0; //xxx
                _noteIndex = getPdlParam($s, 2);
                updateInfo();

                // continue startup:
                updateFromServer();
                _intervalPost = setInterval(updateFromServer, 4000);

                updateView();
                _intervalView = setInterval(updateView, 100);
            }

            function doGetNextEvent()
            {
                $.post("timingInfoHandler.php", {  id:_id }, getNextEventHandler);
            }
            function getNextEventHandler($s)
            {
                _nextEventMs = getPdlParam($s, 1);

                var wasNI = _noteIndex;
                _noteIndex = getPdlParam($s, 2);

                var wasCN = _chordNum;
                _chordNum = 0; //xxx

                if (_noteIndex != wasNI || _chordNum != wasCN) {
                    updateInfo();
                }
            }

            function secondsToString($sec)
            {
                var min = (Math.floor($sec / 60)).toString();
                var sec = ($sec % 60).toString();
                if (sec.length == 1) sec = "0" + sec;
                return min + ":" + sec;
            }

            function updateView()
            {
                var nowAdjustedMs = new Date().getTime() + _timeDeltaMs + _roundTrip*0.33;
                var msLeft = _nextEventMs - nowAdjustedMs;
                var secLeft = Math.ceil(msLeft/1000); // NB "ceil"

                if (nowAdjustedMs < _nextEventMs)
                {
                    var strTime = secondsToString(secLeft);
                    $("#timerSingPrompt").replaceWith("<div id='timerSingPrompt'>" + strTime + "</div>");
                    //$("#infoSoundLink").show();
                    $("#singProgWrapper").hide();
                }
                else // ... is in the past
                {
                    if (nowAdjustedMs - _nextEventMs < SING_DURATION + 2000)
                    {
                        $("#timerSingPrompt").replaceWith("<div id='timerSingPrompt'>" + "SING NOW!" + "</div>");
                        //$("#infoSoundLink").show();
                        $("#singProgWrapper").show();

                        // stretch progbar
                        var w = ((nowAdjustedMs - _nextEventMs) / SING_DURATION) * 600;
                        if (w > 600) w = 600;
                        $("#progBarStretch").width(w);
                        $("#progBarStretch").height(50);
                    }
                    else
                    {
                        $("#timerSingPrompt").replaceWith("<div id='timerSingPrompt' span style='font-size:2.5em;'>The next event will begin shortly<br/>&nbsp;</div>");
                        //$("#infoSoundLink").hide();
                        $("#singProgWrapper").hide();
                    }
                }
            }

            function playAudio($url)
            {
                // change src property should have been changed by now
                document.getElementById("audioTag").play();
            }

            function updateInfo()
            {
                if (_noteIndex < 0) return;

                var a = _chords[_chordNum]; // array of keys (eg, ["c1","e","g"])
                var key = a[_noteIndex]; // eg, "c1"
                var o = _allNotes[key];
                var sPhrase = o.phrase;
                var sPathMp3 = o.pathMp3;
                var sPathVideo = o.pathVideo;

                //

                /*
                var s = "When timer reaches zero,<br/>sing this note out loud:<br/>";
                s += '<img src="_img/note.png" border="0"/>';
                s += "<span style='font-size:1.5em'>" + sPhrase + "</span>";
                $("#infoWhichNote").replaceWith("<div id='infoWhichNote'>" + s + "</div>");
                */

                //

                if (_doesAudio) {
                    // s = "<a href='#' onclick='playAudio(0); return false;' ><img src='_img/iconPlay2x.gif' border='0'/> HEAR THE NOTE</a>";
                    s = "<a href='#' onclick='playAudio(0); return false;' ><img src='_img/iconPlay2x.gif' border='0'/> <b>Listen to the following note</b></a><br/>Then, sing it out loud<br/>when the timer reaches zero!";
                }
                else {
                    // s = "<a href='" + sPathVideo + "'><img src='_img/iconPlay2x.gif' border='0'/> HEAR THE NOTE ON YOUTUBE</a>";
                    s = "<a href='" + sPathVideo + "'><img src='_img/iconPlay2x.gif' border='0'/><b>Listen to the following note<br/>on YouTube</b></a><br/><br/>Then, sing it out loud<br/>when the timer reaches zero!";
                }
                $("#infoSoundLink").replaceWith("<div id='infoSoundLink'>" + s + "</div>");

                //

                // THIS DOESNT WORK
                // $("#audioTag source").attr("src", sPathMp3);

                // THIS DOESNT WORK EITHER
                $("#audioTag source").replaceWith("<source src='" + sPathMp3 + "' />");

                // THIS DOES, IT LOOKS LIKE
                $("#audioTag").replaceWith("<audio id='audioTag'><source src='" + sPathMp3 + "' /></audio>");
            }

        </script>

    </head>
    <body>

        <div id="idHeader"><img src="_img/header640.jpg" border="0" alt="Shake The Shack Line - Parsons MFADT Student Project" /></div>

        <div id="idBody">

            <div id="infoSoundLink"></div>

            <div id="timerSingPrompt"></div>

            <div id="singProgWrapper">
                <div id="singProgBg"><img src="_img/progBarBg600.gif" border="0"/></div>
                <div id="singProgBar"><img id="progBarStretch" src="_img/progBarStretch.gif" width="600" height="50" border="0" /></div>
            </div>

            <br/>

            <div id="idListHolder">
                <div id="idListHeader">Who's playing?</div>
                <img src="_img/node_begin_w32.png"/><br/><div id="idList">&nbsp;</div><div style="clear:left;"><img src="_img/node_end_w32.png"/></div>
            </div>

            <audio id="audioTag">
                <!-- <source src="testtone.ogg" /> -->
                <!-- firefox!! -->

                <source src="testtone.mp3" />
            </audio>

        </div>

        <div id="idFooter"><a href="mailto:felaa538@newschool.edu?subject=Feedback - Shack Line Project" ><img src="_img/footer640.jpg" border="0" alt="Parsons MFA Design + Technology Student&nbsp;Project" /></a></div>

    </body>
</html>