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.
    var newHtml = "";

    _.each(SnakeLevels, function(levelSet, setName) {
        newHtml += "<h5>" + setName + "</h5>" +
                      "<ol levelSet='" + setName + "'>";

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

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

    $levelSelectSection.append(newHtml);

    // 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", levelLiClicked); }

    // Load the initial level.
    // loadLevel({target: document.querySelector("#levelSelect li.selected")});

};

var levelLiClicked = function(ev) {
    var $levelLi = $(ev.target);
    var $levelSetOl = $levelLi.closest("ol");

    $("#levelSelect li.selected").removeClass("selected");
    $levelLi.addClass("selected");

    loadLevel($levelSetOl.attr("levelSet"), $levelLi.attr("levelNum")); };

var loadSelectedLevel = function() {
    var $selectedLi = $("#levelSelect li.selected");
    var $selectedLevelSetOl = $selectedLi.closest("ol");

    loadLevel($selectedLevelSetOl.attr("levelSet"),
              $selectedLi.attr("levelNum")); };

var loadLevel = function(levelSetName, levelNum) {
    console.log("Loading " + levelSetName + " level " + levelNum);

    var levelData = SnakeLevels[levelSetName].levels[parseInt(levelNum)];

    // TODO: create some way to select the difficulty (defaults to easy).

    // TODO: Show start overlay UI

    // Initialize the board using the level data.
    $scoreValue.text("0");
    Snake.initialize(levelData);

};

var nextLevel = function() { };

var updateScore = function(ev) {
    var evDetail = ev.originalEvent.detail;
    var curScore = parseInt($scoreValue.text());
    $scoreValue.text(curScore + (evDetail.bodyLength * evDetail.fps));

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

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


window.onload = initializePage;