$(document).ready(function() {
    
    //create and hide the background layer for the login screen
    $('<div id="loginBackground"></div>').hide().prependTo('body');
    
    //cache login box & background
    var $login = $('#login');
    var $background = $('#loginBackground');
    
    //hide login by default
    $login.hide();
    
    //add a close link to login panel
    $('<a href="#" class="closeLink">X</a>')
        .click(function(){
            $background.fadeTo('slow',0,function(){$background.hide();});
            $login.fadeTo('slow',0,function(){$login.hide()});
            return false;
        })
        .prependTo('#login');
    
    //add click events to all member login links
    $('.loginLink').click(function(){
        $background.css({
            height      : $('body').outerHeight() + 'px',
            width       : '100%',
            position    : 'absolute',
            top         : '0px',
            background  : '#000',
            zIndex      : 12
        }).fadeTo('slow',0.5);
        $login.css({
            position    : 'absolute',
            zIndex      : 13,
            top         : $(window).scrollTop() + ($(window).height()/2) - ($login.outerHeight()/2) + 'px',
            left        : ($(window).width()/2) - ($login.outerWidth()/2) + 'px'
        }).fadeTo('slow',1);
        return false;        
    });
    
    
    //initiate the banner functionality
    $('#banner').killerBanner();

});