$(document).ready(function() {
    var randOrd = function() {
        return (Math.round(Math.random())-0.5); 
    };
    var checkOrder = function() {
        $('#order-container .character').each(function(index, element){
            c = $(element).text();
            if($(element).text() == name[index]) {
                $(element).addClass('character-pos-ok');          
            } else {
                $(element).removeClass('character-pos-ok');
            }
        });
        
    }
    var orderUpdate = function(event, ui) {
        // Order of characters changed. Check which are valid.
        checkOrder();
    }
    var verticallyCenter = function(){
        // Vertically center content
        $('#content-container').css({
            'height': $(window).height() - $('.menu').height() -3,
        });
        $('#order-container').css({
            'padding-top': ($(window).height() / 2) - ($('.character').height() / 2)
        });                
    };
    var horizontallyCenter = function(){
        // Vertically center content
        $('#content-container').css({
            'width': $(window).width(),
        });
        $('#order-container').css({
            'padding-left': ($(window).width() / 2) - ($('#order-container').width() / 2)
        });                
    };
    name = new Array('S', 'T', 'E', 'R', 'K', 'W', 'E', 'B', 'W', 'E', 'R', 'K');
    rname = new Array('S', 'T', 'E', 'R', 'K', 'W', 'E', 'B', 'W', 'E', 'R', 'K');
    rname.sort(randOrd);
    $.each(rname, function(index, value) {
        $('#order-container').append('<div class="character">'+ value +'</div>');
    }); 
    $("#order-container").sortable({
        update: orderUpdate,
        placeholder: 'character-highlight'
    });
    $("#order-container").disableSelection();
    checkOrder();
    verticallyCenter();
    horizontallyCenter();
    $("#content-container").css('visibility', 'visible').hide();
    $("#content-container").fadeIn('fast');
    $(window).resize(function() {
        $("#content-container").fadeOut('fast', function(){
            verticallyCenter();
            horizontallyCenter();
            
        });
        $("#content-container").fadeIn('fast');            
    });

});