/// 1. Для настройки вида дизайна при котором рабочая область панели прокрутки становится уже на ширину скролбара
/// задаётся css класс родительскому элементу в котором размещаются табы и панели сообщений:
/// - chat_dialog_view_scroll_off при неактивной полосе прокрутки
/// - chat_dialog_view_scroll_on при активной. Стили табов и панелей сообщений представлены с css как дочернии.

/// 2. Build ScrollBar. Result HTML:
/// <div class="scrollPaneContainer">
///     <div class="{scrollContent.className}"></div>
///     <div class="scrollSlideHandle"></div>
/// </div>

$.fn.slideScroll = function(params) {
    params = $.extend({ value: 100, offCallback: null, onCallback: null }, params);
    var scrollContent = $(this),
        scrollPane = scrollContent.parent();
    var width, height;
    if (!scrollPane.is('.scrollPaneContainer')) {
        width = scrollContent.innerWidth();
        height = scrollContent.innerHeight();
        scrollContent.wrap(
                $('<div/>')
                    .attr('class', 'scrollPaneContainer')
                    .css({
                        width: width + 'px',
                        height: height + 'px'
                    })
            );
        scrollPane = scrollContent.parent();
        scrollPane.append(
                $('<div></div>')
                    .attr('class', 'scrollSlideHandle')
            );
    } else {
        width = scrollPane.innerWidth();
        height = scrollPane.innerHeight();
        scrollPane.unbind(
                'mousewheel',
                _mousewheelFunc
            );
    }
    var slider = scrollPane.find(".scrollSlideHandle");
    var enabled = false;
    if (height < scrollContent.height()) {
        slider.slider({ orientation: 'vertical', slide: function(e, ui) { _scrollFunc(ui.value); } });
        slider.slider('value', params.value);
        enabled = true;
    } else {
        slider.slider("destroy");
        enabled = false;
    }

    scrollContent.css({
        position: 'absolute',
        overflow: 'hidden',
        height: 'auto',
        width: width - scrollPane.find('.ui-slider .ui-slider-handle').width() - 3 + 'px'
    });

    scrollPane.find('.ui-widget-content').css({
        height: height - scrollPane.find('.ui-slider .ui-slider-handle').height() + 'px'
    });

    if (height < scrollContent.height()) {
        slider.css({
            left: width - scrollPane.find('.ui-slider .ui-slider-handle').width() + 'px',
            top: '3px'
        });
    }

    var _mousewheelFunc = function(event, delta) {
        slider.slider("value", slider.slider("value") + Math.round(delta) * 3);
        _scrollFunc(slider.slider("value"));
    };

    var _scrollFunc = function(value) {
        if (scrollContent.height() > scrollPane.height()) { scrollContent.css('top', Math.round((1 - value / 100) * (scrollPane.height() - scrollContent.height())) + 'px'); }
        else { scrollContent.css('top', 0); }
    }

    _scrollFunc(params.value);

    scrollPane.bind(
            'mousewheel',
            _mousewheelFunc
        );
        
    if (enabled) {
        if (params.onCallback != null && (typeof params.onCallback) == "function")
            params.onCallback();
    } else {
        if (params.offCallback != null && (typeof params.offCallback) == "function")
            params.offCallback();
    }
};