DI tech lab exercise

by mich

HTML

<div id="latest_tracks">
    <header>Channel playlist</header>   
</div>

CSS

body {
    background-color: #333;
    font-family: Tahoma, Verdana, Segoe, sans-serif;
    
}
#latest_tracks header {
    font-size: 11px;
    padding: 5px 10px;
    color: #999;
}
.track-entry {
    background-color: #444;
    overflow: hidden;    
    padding: 5px 10px;
    font-size: 12px;
    font-weight: bold;
    color: #FFF;
    border-bottom: solid 1px #333;
    border-top: solid 2px #666;
}
.track-entry.nowplaying {
    background-color: #666;
    
}
.track-entry img {
    width: 60px;
    height: 60px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    border: solid 1px #777;
    float: left;
    margin-right: 10px;
}
.track-entry .info {
    width: 350px;
    float: left;
}
.track-entry .info div {
    margin-bottom: 3px;
}
.title { color: #FFF; }
.artist { color: #AAA; }
.time { 
    color: #AAA;
    font-size: 10px;
    font-weight: normal;
}
.nowplaying .time { 
    color: #FF0; 
    font-weight: bold; 
}

JavaScript

var relativeTime = function(timestamp, duration) {
    //convert to ms
    var duration = duration * 1000;
    //adjust for time drift
    var startTime = timestamp * 1000 - window.timeDrift;
    var now = new Date().getTime();

 
    //still playing? easy way out           
    if (now < (startTime + duration)) {
        return 'now playing';
    } else { //not playing anymore, get relative time in mins or hours
        var mins = Math.round((now - startTime) / 60000);
        if (mins >= 60) {
            var hours = Math.round(mins / 60)
            return hours.toString() + ' hour' + (hours != 1 ? 's' : '') + ' ago';
            //ternary statement adds an s if hours is not one (zero quantity gets plural)
        }        
        return mins.toString() + ' minute' + (mins != 1 ? 's' : '') + ' ago';
    }

};

//JSONP callback when the data is loaded
var loadTracks = function(data) {
    var $track;
    var isFirst = true;
    for (var i = 0; i < data.length; i += 1) {
        if (typeof data[i].ad == 'undefined') {
            $track = $('<div>', {
                "class": 'track-entry' + ((isFirst) ? ' nowplaying' : '')
            }).append(
            $('<img>', {
                "src": "http://placehold.it/60x60",
                "alt": "artwork"
            }), $('<div>', {
                "class": "info"
            }).append(
            $('<div>', {
                "class": "title"
            }).html(data[i].title), $('<div>', {
                "class": "artist"
            }).html(data[i].artist), $('<div>', {
                "class": "time"
            }).html(relativeTime(data[i].started, data[i].duration))));
            $track.appendTo($('#latest_tracks'));
            isFirst = false;
        }
    }

}

//JSONP callback for the ping
var setTimeDrift = function(data) {
    var localTime = new Date();
    var serverTime = new Date(data.time);
    window.timeDrift = serverTime.getTime() - localTime.getTime();
}

//make the callbacks global so...