(function($) {
    $.fn.SMSScrollbar = function(options) {
        var options = jQuery.extend({
            TargetID: null
        }, options);

        Scrollbar = function($jqObj) {
            this.$targetObj = $jqObj.find('.SMSScrollbar_target');
            this.$ctrlWrapper = $jqObj.find('.SMSScrollbar_wrapper');
            this.$ctrlContainer = $jqObj.find('.SMSScrollbar_container');
            this.$ctrlTrack = $jqObj.find('.SMSScrollbar_track');
            this.$ctrlBar = $jqObj.find('.SMSScrollbar_bar');
            this.ctrlTrackHeight = parseInt(this.$ctrlTrack.height());

            var scrollbarWidth = 16;
            var baseWidth = this.$targetObj.width();
            var newWidth = 0;

            this.$ctrlWrapper.css({ 'width': baseWidth + 'px' });

            newWidth = baseWidth;// -(this.$ctrlBar.width() - scrollbarWidth);
            this.$targetObj.css({ 'width': newWidth + 'px' });

            newWidth = baseWidth - this.$ctrlBar.width();
            this.$ctrlContainer.css({ 'width': newWidth + 'px' });

            this.minOffsetY = 0;
            this.maxOffsetY = this.minOffsetY + parseInt(this.$ctrlTrack.height()) - parseInt(this.$ctrlBar.height());
        }

        return this.each(function() {

            $(this).wrapInner('<div class="SMSScrollbar_wrapper"><div class="SMSScrollbar_container"><div class="SMSScrollbar_target"></div></div></div>');
            $(this).find('.SMSScrollbar_container').after('<div class="SMSScrollbar_track"><div class="SMSScrollbar_bar">&nbsp;</div></div>');

            var $targetElem = $(this).find('.SMSScrollbar_target');
            $targetElem.css({ 'width': $(this).width() + 'px', 'height': $(this).height() + 'px', 'overflow': 'auto' });

            var sb = new Scrollbar($(this));

            $targetElem.data('SMSScrollbar', sb);
            sb.$ctrlBar.data('SMSScrollbar', sb);

            $targetElem.scroll(function(eventObject) {
                var ctrl = $(this)[0];
                var sb = $(this).data('SMSScrollbar');

                var dY = (ctrl.scrollHeight - ctrl.clientHeight) / (sb.maxOffsetY);
                var targetScroll = ctrl.scrollTop / dY + sb.minOffsetY;

                if (targetScroll > sb.maxOffsetY) {
                    targetScroll = sb.maxOffsetY;
                }
                if (targetScroll < sb.minOffsetY) {
                    targetScroll = sb.minOffsetY;
                }
                if (ctrl.scrollHeight <= ctrl.clientHeight) {
                    targetScroll = sb.minOffsetY;
                }

                sb.$ctrlBar.css({ top: targetScroll });
            });

            sb.$ctrlBar.drag(function(ev, dd) {
                var sb = $(this).data('SMSScrollbar');
                var ctrl = sb.$targetObj[0];

                var targetTop = dd.offsetY;

                if (targetTop > sb.maxOffsetY) {
                    targetTop = sb.maxOffsetY;
                }
                if (targetTop < sb.minOffsetY) {
                    targetTop = sb.minOffsetY;
                }

                var dY = (ctrl.scrollHeight - ctrl.clientHeight) / (sb.maxOffsetY);
                var targetScroll = targetTop * dY;

                sb.$targetObj.scrollTop(targetScroll);

                $(this).css({ top: targetTop });
            }, { relative: true });
        });
    };
})(jQuery);