/* Flashcard Logic */
$(document).ready(function($){

    var cardNumber = 1;

    // Flip the card when clicked
    $('.flashcard-container').on('click', '.flashcard', function(){

        if($(this).hasClass('flipped'))
        {
            $(this).removeClass('flipped');
        }
        else
        {
            $(this).addClass('flipped');
        }
    });

    // The right arrow has been clicked to show the next card
    $('.arrow.right').click(function(){
        // Make sure that the left arrow is showing now that we are no longer on the first card
        if($('.arrow.left:not(:visible)'))
        {
            $('.arrow.left').css('visibility', 'visible');
        }

        // If we're at the end then hide the right arrow
        if($('.flashcard:visible').next().next().length == 0)
        {
            $(this).css('visibility', 'hidden');
        }

        //
        $('.flashcard:visible').next().removeClass('hidden');
        //
        $('.flashcard:visible').prev().addClass('hidden').removeClass('flipped');;

        // Update the flashcard counter
        cardNumber++;
        $('#flashCount').text( cardNumber + ' / ' + kanaCount);

    });

    // The left arrow has been clicked to show the previous card
    $('.arrow.left').click(function(){
        // Make sure that the right arrow is showing now that we are no longer on the last card
        if($('.arrow.right:not(:visible)'))
        {
            $('.arrow.right').css('visibility', 'visible');
        }

        // If we're back at the beginning then hide the left arrow
        if($('.flashcard:visible').prev().prev().length == 0)
        {
            $(this).css('visibility', 'hidden');
        }

        // Show the previous card
        $('.flashcard:visible').prev().removeClass('hidden');
        // Hide the next card
        $('.flashcard:visible').next().addClass('hidden').removeClass('flipped');

        // Update the flashcard counter
        cardNumber--;
        $('#flashCount').text( cardNumber + ' / ' + kanaCount);

    });

    // Shuffle the deck of cards
    $('#shuffle').click(function(){

        // Reset the card counter
        cardNumber = 1;
        $('#flashCount').text( cardNumber + ' / ' + kanaCount);
        // Hide the left arrow
        $('.arrow.left').css('visibility', 'hidden');
        // Show the right arrow
        $('.arrow.right').css('visibility', 'visible');
        // Hide the visible flashcard
        $('.flashcard:visible').addClass('hidden');
        // Shuffle the deck
        $('.flashcard').shuffle();
        $('.flashcard:first').removeClass('hidden');

    });

    // Shuffle the deck of flashcards
    (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);


});