/* Tile Match Game Logic */
$(document).ready(function($){

    var tileSelected = false;
    var timer = false;
    // The name of the character set that will be used as the name of the best time
    var timeName = (hiragana == true) ? 'hiragana' : 'katakana';

    var kanaTotal = kanaCount;
    // Set the on screen counter
    $('#kanaCount').text(kanaCount);

    $('#runner').runner({
        stopAt: 3600000
    });

    if (Modernizr.localstorage)
    {
        // Set time if it's better than their previous
        if(localStorage.getItem(timeName + 'Time') !== null)
        {
            $('<p id="best-time">Your best time is '+ msToTime(localStorage[timeName + 'Time']) +'</p>').insertAfter('#tile-intro');
        }

    }

    // If a tile that hasn't already been slotted is clicked. Use on because events will be detached when elements are moved around the page
    $('.tiles').on('click', '.tile:not(.set-tile)', function(){

        // Remove the active status from any other tiles
        $('.tile').removeClass('active-tile');
        // Select the tile
        $(this).addClass('active-tile');
        // Indicate we have a tile selected
        tileSelected = true;

        // Start the timer
        if(timer == false)
        {
            $('#runner').runner('start');
            timer = true;
        }
    });

    $('.tile-slot').click(function(){

        // If a tile is currently selected
        if(tileSelected == true)
        {
            // If the currently selected tile and the clicked tile slot match
            if($('.tile.active-tile').data('kana') == $(this).data('kana'))
            {
                // Deselect the tile
                tileSelected = false;

                // Clone the tile that is being moved
                var tile = $('.tile.active-tile').clone();
                // Delete the original tile
                $('.tile.active-tile').remove();
                // Add the cloned tile to the slot
                $(this).find('span').hide();
                $(this).append(tile);
                // Remove the active status of the tile
                $(tile).removeClass('active-tile');
                // Add a class the remove the pointer cursor from the slot
                $(this).addClass('filled-slot');
                $(tile).addClass('set-tile');

                // Decrement the kana count and check if any more tiles remain
                kanaCount--;
                // Update the on screen counter
                $('#kanaCount').text(kanaCount);
                // If the user is done
                if(kanaCount == 0)
                {
                    // Update the on screen counter with an exclamation mark!
                    $('#kanaCount').text(kanaCount + ' !');

                    // Stop the timer
                    $('#runner').runner('stop');
                    // Get the users time
                    var userTime = $('#runner').runner('info').time;

                    // Save their time
                    if (Modernizr.localstorage)
                    {
                        // Set time if it's better than their previous
                        if(localStorage.getItem(timeName + 'Time') !== null)
                        {
                            // If this is their best time
                            if(userTime < localStorage[timeName + 'Time'])
                            {
                                localStorage[timeName + 'Time'] = userTime;
                                $('.congratulations #best-time').fadeIn('slow');
                                $('#best-time').remove();
                                $('<p id="best-time">Your best time is '+ msToTime(localStorage[timeName + 'Time']) +'</p>').insertAfter('#tile-intro');
                            }
                            else
                            {
                                $('.congratulations #you-did-it').fadeIn('slow');
                            }
                        } // If they have no previously recorded time
                        else
                        {
                            $('.congratulations #you-did-it').fadeIn('slow');
                            localStorage[timeName + 'Time'] = userTime;
                            $('<p id="best-time">Your best time is '+ msToTime(localStorage[timeName + 'Time']) +'</p>').insertAfter('#tile-intro');
                        }

                    }
                    else
                    {
                        // Congratulate them
                        $('.congratulations #you-did-it').fadeIn('slow');
                    }
                }
            }
        }

    });

    // Reset the tile game
    $('#reset').click(function(){
        // Move any slotted tiles back
        $('.tiles').append($('.tile-slot > .tile'));
        // Remove the set-tile class from any previously slotted tiles
        $('.tile').removeClass('set-tile');
        // Remove the filled-slot class from any slots which previously held tiles
        $('.tile-slot').removeClass('filled-slot');
        // Deselect any tile that is selected
        $('.tile').removeClass('active-tile');
        // Shuffle all of the tiles
        $('.tile').shuffle();
        // Show the text of the tile slots
        $('.tile-slot > span').show();
        // Hide any congratulation messages that may be visible
        $('.congratulations #you-did-it, .congratulations #best-time').hide();
        // Reset the kana counter
        kanaCount = kanaTotal;
        // Reset the on screen counter
        $('#kanaCount').text(kanaCount);
        // Reset the timer
        timer = false;
        $('#runner').runner('stop');
        $('#runner').runner('reset');
    });

    // Shuffle array function used when resetting the tile game
    (function($){

        $.fn.shuffle = function() {

            var allElems = this.get(),
                getRandom = function(max) {
                    return Math.floor(Math.random() * max);
                },
                shuffled = $.map(allElems, function(){
                    var random = getRandom(allElems.length),
                        randEl = $(allElems[random]).clone(true)[0];
                    allElems.splice(random, 1);
                    return randEl;
               });

            this.each(function(i){
                $(this).replaceWith($(shuffled[i]));
            });

            return $(shuffled);

        };

    })(jQuery);

    // Formats the milliseconds that runner records into a readable time format. Taken from the runner code
    function msToTime(time)
    {
        var i, len, ms, output, prefix, separator, step, steps, value, _i, _len;
        steps = [3600000, 60000, 1000, 10];
        separator = ['', ':', ':', '.'];
        prefix = '';
        output = '';
        ms = time;
        len = steps.length;
        value = 0;

        if (time < 0) {
            time = Math.abs(time);
            prefix = '-';
        }
        for (i = _i = 0, _len = steps.length; _i < _len; i = ++_i) {
            step = steps[i];
            value = 0;

            if (time >= step) {
                value = Math.floor(time / step);
                time -= value * step;
            }

            if ((value || i > 1 || output) && (i !== len - 1 || ms)) {
                output += (output ? separator[i] : '') + pad(value);
            }
        }

        return prefix + output;
    };

    function pad(num) {
        return (num < 10 ? '0' : '') + num;
    };

});