$(document).ready(function() {

    // Form elements.
    var controls     = $('form input.one-line, form textarea.multi-line, form input.submit');

    // Main container (content area + sidebar).
    var container    = $('div.main-container');

    // Sidebar coordinates.
    var sidebar        = $('div.sidebar');
    var sidebar_top    = sidebar.offset().top;
    var sidebar_left   = sidebar.offset().left;
    var sidebar_height = sidebar.height();

    // Highlight form element if focused.
    controls.focusin(function() {
        $(this).addClass('focused');
    });

    // Restore on leaving.
    controls.focusout(function() {
        $(this).removeClass('focused');
    });

    // Stick sidebar to viewport on scrolling.
    $(window).scroll(function(event) {
        var current_top   = $(this).scrollTop();
        var client_height = $(window).height();

        if (( current_top >= sidebar_top ) && ( $(window).height() >= sidebar.height() )) {
            // ------------------------------ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
            // ------------------------------ If sidebar fits into viewport, stick it.
            sidebar.addClass('floating');
        }
        else {
            sidebar.removeClass('floating');
        }

        sidebar.offset({ left: sidebar_left });
    });

    // Recalculate sidebar left offset on window resize.
    $(window).resize(function() {
        sidebar_left = container.offset().left + container.width() - sidebar.width();
        sidebar.offset({ left: sidebar_left });
    });
});