//
// view.js
//
// Written by Matthew K. Coughlin
//


//=========================================================
//
// View constructor
//
// Constants:  (static properties)
//   OPT_WORD
//   OPT_DIFFICULTY
//   OPT_THEME
//   OPT_AUTO_START
//   OPT_OPTIONS_SHOWN
//
//   THEME_MIN
//   THEME_MAX
//
// Methods:
//   init(model)
//
//   getTiles()
//   setTiles(letters)
//
//   getLettersTyped()
//   setLettersTyped(letters)
//
//   getSelectedTheme()
//
//   updateWordDimensions(letters)
//   updateButtons(gameIsActive)
//   updateDiff()
//   updateTheme()
//   updateAutoStart()
//   updateOptionsShown()
//   updateLiveLink(url)
//
//   setStatus(status)
//   showHint()
//   hideHint()
//   showSolved()
//   hideSolved()
//   showIncorrect()
//   hideIncorrect()
//   showExtraInfo(info)
//   hideExtraInfo()
//
function View() {

    // Private properties

    var _this = this;   // Alias of "this", for use by private methods

    var TILE_WIDTH = 62;
    var THEME_CLASS = ["white", "green"];

    var SOLVED_MSG =
        ["Correct", "You got it", "Good answer", "That's right",
         "You solved it"];
    var INCORRECT_MSG =
        ["Incorrect", "Try again", "Unknown word",
         "Sorry, I don't know that word"];


    // Privileged methods

    this.init = function(model) {
        this.model = model;

        // Make the form labels clickable on iOS devices
        $('form[name="pref"] label').click(function() { });

        // Make the tiles sortable
        $("#tiles ul").sortable({
            items: 'li', scroll: false, cursor: 'move',
            tolerance: 'intersect',
            update: function() {
                controller.tilesChanged();
            }
        });
    }


    this.getTiles = function() {
        var letters = '';
        $('#tiles ul li').each(function() {
            letters += this.innerHTML.toLowerCase();
        });
        return letters;
    }


    this.setTiles = function(letters) {
            var html = '';
            for (var i = 0; i < letters.length; i++) {
                html += '<li>' + letters.charAt(i).toUpperCase() + '</li>';
            }
            $('#tiles ul').html(html);
    }


    this.getLettersTyped = function() {
        return $("#guess div span").html().toLowerCase();
    }


    this.setLettersTyped = function(letters) {
        $("#guess div span").html(letters.toUpperCase());
    }


    this.getSelectedTheme = function() {
        return $('#options input[id^="theme"]:checked').val();
    }


    this.updateWordDimensions = function(letters) {
        // Set the total width for the tiles
        $('#tiles ul').width((letters.length * TILE_WIDTH) + 5);

        // Set the total width for the typed letters
        $('#guess div').css("visibility", "hidden");
        this.setLettersTyped(letters);
        var lettersWidth = $('#guess div span').width();
        $('#guess div').width(lettersWidth + 10);
        this.setLettersTyped('');
        $('#guess div').css("visibility", "visible");
    }


    this.updateButtons = function(gameIsActive) {
        if (gameIsActive) {
            $('#board .buttons .playAgain').hide();
            $('#board .buttons .active').show();
        }
        else {
            $('#board .buttons .active').hide();
            $('#board .buttons .playAgain').show();
        }
    }


    this.updateDiff = function() {
        var diff = this.model.getDifficulty();
        $('#diff' + diff).attr('checked', 'checked');
    }


    this.updateTheme = function() {
        var theme = this.model.getUiPref(View.OPT_THEME);

        // If the theme is valid
        if ((theme >= 0) && (theme < THEME_CLASS.length)) {
            $('#theme' + theme).attr('checked', 'checked');

            // Remove the existing class name
            for (var j = 0; j < THEME_CLASS.length; j++) {
                if ($('body').hasClass(THEME_CLASS[j])) {
                    $('body').removeClass(THEME_CLASS[j]);
                }
            }
            // Add the new class name
            $('body').addClass(THEME_CLASS[theme]);
        }
    }


    this.updateAutoStart = function() {
        var auto = this.model.getUiPref(View.OPT_AUTO_START);
        $('#autoCheckbox').attr('checked', (auto ? 'checked' : ''));
    }


    this.updateOptionsShown = function() {
        var opt = this.model.getUiPref(View.OPT_OPTIONS_SHOWN);
        if (opt) { $("#options").removeClass('hidden'); }   // Show the options
        else     { $("#options").addClass('hidden'); }      // Hide the options
    }


    this.updateLiveLink = function(url) {
        $('#liveLink a').attr('href', url);
    }

    this.setStatus = function(status) {
        $("#status span").html(status);
        this.hideExtraInfo();
    }


    this.showHint = function() {
        $("#guess").hide();
        $("#hint").show();
    }


    this.hideHint = function() {
        $("#hint").hide();
        $("#guess").show();
    }


    this.showSolved = function() {
        $("#status span").removeClass('error');

        if (this.model.getUiPref(View.OPT_AUTO_START)) {
            $("#status span").addClass('autoStart');
        }
        else {
            $("#status span").removeClass('autoStart');
        }

        var i = Math.round(Math.random() * (SOLVED_MSG.length - 1));
        this.setStatus(SOLVED_MSG[i]);
    }


    this.hideSolved = function() {
        $("#status span").removeClass('autoStart');
        this.setStatus('');
    }


    this.showIncorrect = function() {
        $("#status span").removeClass('autoStart');
        $("#status span").addClass('error');

        var i = Math.round(Math.random() * (INCORRECT_MSG.length - 1));
        this.setStatus(INCORRECT_MSG[i]);
    }


    this.hideIncorrect = function() {
        this.setStatus('');
    }


    this.showExtraInfo = function(info) {
        $("#extraInfo").html(info + "<br/>");
    }
    this.hideExtraInfo = function() {
        $("#extraInfo").html('');
    }
}


// Static View properties

// Terms for storing and retrieving UI Preferences, URL parameters,
// and cookies
View.OPT_WORD          = 'word';
View.OPT_DIFFICULTY    = 'diff';
View.OPT_THEME         = 'theme';
View.OPT_AUTO_START    = 'auto';
View.OPT_OPTIONS_SHOWN = 'opt';

View.THEME_MIN = 0;
View.THEME_MAX = 1;


// DOM loaded

$(document).ready(function(){
    model = new Model();
    view = new View();
    controller = new Controller();

    model.init();
    view.init(model);
    controller.init(view, model);

    if (window.focus) {
        window.focus();
    }
});