$(function () {
    $('#inp-email').focus();
    
    var buttonState = function (btn, state) {
        var bp = 'background-position';
        var y = [[0,-26],[-52,78],[52,26]];
        $(btn)
            .find('.fbtn-l').css(bp, '0 ' + y[state][0] + 'px').end()
            .find('.fbtn-m').css(bp, '0 ' + y[state][1] + 'px').end()
            .find('.fbtn-r').css(bp, '11px ' + y[state][0] + 'px').end();
    }
    $('.fbtn').mouseover(function (e) {
        buttonState(this, 1);
    }).mouseout(function (e) {
        buttonState(this, 0);
    }).mousedown(function (e) {
        buttonState(this, 2);
    }).mouseup(function (e) {
        buttonState(this, 1);
    }).find('TD').attr('unselectable', 'on');
    
    var handleLogin = function () {
        var $btn = $('#btn-signin');
        if ($btn.data('busy') == 1) return;
        $btn.data('busy', 1);
        
        var error = [];
        var focus = [];
        
        var $email = $('#inp-email'), email = $.trim($email.val());
        if (email == '') {
            $email.addClass('inp-error');
            error.push('Email Address');
            focus.push($email);
        }
        var $pass = $('#inp-pass'), pass = $.trim($pass.val());
        if (pass == '') {
            $pass.addClass('inp-error');
            error.push('Password');
            focus.push($pass);
        }
        if (error.length > 0) {
            $('#error-msg').html([
                'Please enter both your email address and password.'
            ].join('')).css('display', 'block');
            focus[0].focus();
            $btn.data('busy', 0);
            return false;
        }
        
        $btn.find('.load').css('display', 'block');
        return true;
    }
    
    $('#frm-login').submit(handleLogin);
    $('#btn-signin').data('busy', 0).click(function () {
        $('#frm-login').submit();
    });
    
});