(function($) {
    var toolbar, position, floatingToolbar;
    $.fn.toolbar = function() {
        return this.each(function() {
            $(window).scroll(toogleContentHeader);
            $(window).resize(toogleContentHeader);
            toolbar = $(this);
            position = toolbar.position().top;
            toolbar.after('<div id="floating-toolbar"></div>');
            floatingToolbar = $('#floating-toolbar');
            toolbar.clone(true).prependTo(floatingToolbar);
            toogleContentHeader();
            //floatingToolbar.hide();
        });

    }

    function toogleContentHeader() {
        var scrollOffset = $(window).scrollTop();
        if (position < scrollOffset) {
            floatingToolbar.find(':input').each(function(i) {
                var input = $(this);
                input.attr('id', input.attr('id').replace(/_temp/, ''));
            });
            toolbar.find(':input').each(function(i) {
                var input = $(this);
                input.attr('id', input.attr('id') + '_temp');
            });
            floatingToolbar.show();
        } else {
            floatingToolbar.find(':input').each(function(i) {
                var input = $(this);
                input.attr('id', input.attr('id') + '_temp');
            });
            toolbar.find(':input').each(function(i) {
                var input = $(this);
                input.attr('id', input.attr('id').replace(/_temp/, ''));
            });
            floatingToolbar.hide();
        }
    }
})(jQuery);