var $canvas = $("#snakeCanvas");
var canvasEl = $canvas[0];
var $scoreValue = $("#score span.value");
var $levelSelectSection = $("#levelSelect");

canvasEl.width = canvasEl.clientWidth;
canvasEl.height = canvasEl.clientHeight;

var initializePage = function() {

    // Load the snake levels onto the page UI.
    _.each(SnakeLevels, function(levelSet, setName) {
        var newHtml = "<h5>" + setName + "</h5>" +
                      "<ol levelSet='" + setName + "'>";

        _.each(levelSet, function(levelData, levelIdx) {
            newHtml += "<li levelNum='" + levelIdx + "'>" +
                levelData.name + "</li>"; });

        newHtml += "</ol>"; });
};

var loadLevel = function(ev) { }

var nextLevel = function() { };

var updateScore = function(ev) {
    var curScore = parseInt(scoreValue.textContent);
    curScore += ev.detail.bodyLength;
    curScore.textContent = curScore;

    if (evDetail.score == Snake.currentLevel.targetScore)
        nextLevel(); };

$canvas.on('score', updateScore);


// Add listeners for each of the level list items.
var levelLis = document.querySelectorAll("#levelSelect li");
for (var i = 0; i < levelLis.length; ++i) {
    levelLis[i].addEventListener("click", loadLevel); }

loadLevel({target: document.querySelector("#levelSelect li.selected")});


window.onload = initializePage;