<!--

 /******************************************************
  * Login functionality
  ******************************************************/
  

    var Login = new Object();
    

   /**
    * Build login UI
    */
    Login.build = function()
    {
        // Declare defaults
        this.html = new Object();

        // Get references
        this.html.background = document.getElementById('login-background');
        this.html.box = document.getElementById('login-box');
        this.html.username = document.getElementById('username');
        this.html.password = document.getElementById('password');
        this.html.button = document.getElementById('login-button');

        // Set event handlers for button
        this.html.button.onmouseover = function()
        {
            this.src = this.src.split('_1').join('_2');
        };
        this.html.button.onmouseout = function()
        {
            this.src = this.src.split('_2').join('_1');
        };
        
        // Catch form submit action
        document.forms[0].onsubmit = function()
        {
            Login.tryLogin();
            return false;
        };
        
        // Show form
        this.html.background.style.display = 'block';
        
        // Set initial focus
        this.html.username.focus();
    };
    

   /**
    * Try to login
    */
    Login.tryLogin = function()
    {
        var callback = function(result)
        {
            // Redirect on success
            if (result)
                return window.location.href = document.forms[0].action + result;

            // Show error
            Login.showError();
        };

        // Show failure right away without credentials
        if (!this.html.username.value.length || !this.html.password.value.length)
            callback(false);

        // Perform service request
        else
            Json.call('Authenticate.logIn', [this.html.username.value, this.html.password.value], callback);
    };
    

   /**
    * Show error for user
    */
    Login.showError = function()
    {
        var step = 0;
        var move = 0;

        // Animation handler
        var process = function()
        {
            step = move == 4 ? step + 1 : step;
            move = move == 4 ? 1 : move + 1;
            
            Login.html.box.style.left = origX + ((step % 2 == 0 ? -1 : 1) * move) + 'px';
            
            if (step == 5)
                complete(window.clearInterval(timer));
        };
        
        // Handler to reset box properties
        var complete = function()
        {
            Login.html.box.style.position = 'inherit';

            // Set focus to right field
            if (!Login.html.username.value.length)
                Login.html.username.focus();

            else
            {
                Login.html.password.value = '';
                Login.html.password.focus();
            }
        };
        
        // Get original position
        var origX = Common.getTotalOffsetLeft(this.html.box);
        var origY = Common.getTotalOffsetTop(this.html.box);
        
        // Make box relative
        this.html.box.style.position = 'absolute';
        this.html.box.style.left = origX + 'px';
        this.html.box.style.top = origY + 'px';
        
        // Create animation
        var timer = window.setInterval(process, 10);
    };


    // Enable login after document is loaded
    window.onload = function()
    {
        Login.build();
    };


// -->