/*
 * @name DoubleScroll
 * @desc displays scroll bar on top and on the bottom of the div
 * @requires jQuery
 *
 * @author Pawel Suwala - http://suwala.eu/
 * @author Antoine Vianey - http://www.astek.fr/
 * @version 0.5 (11-11-2015)
 *
 * Dual licensed under the MIT and GPL licenses:
 * http://www.opensource.org/licenses/mit-license.php
 * http://www.gnu.org/licenses/gpl.html
 * 
 * Usage:
 * https://github.com/avianey/jqDoubleScroll
 */
 (function( $ ) {
    
    jQuery.fn.doubleScroll = function(userOptions) {
    
        // Default options
        var options = {
            contentElement: undefined, // Widest element, if not specified first child element will be used
            beforeElement: undefined, // #5808 - Element before which render top scroll
            scrollCss: {
                'overflow-x': 'auto',
                'overflow-y': 'hidden'
            },
            contentCss: {
                'overflow-x': 'auto',
                'overflow-y': 'hidden'
            },
            onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present
            resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized
            timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing)
        };
    
        $.extend(true, options, userOptions);
    
        // do not modify
        // internal stuff
        $.extend(options, {
            //topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 20px;"><div class="doubleScroll-scroll" style="height: 20px;"></div></div>',
            topScrollBarMarkup: '<div class="doubleScroll-scroll-wrapper" style="height: 13px;"><div class="doubleScroll-scroll" style="height: 13px;"></div></div>',
            topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
            topScrollBarInnerSelector: '.doubleScroll-scroll'
        });

        var _showScrollBar = function($self, options) {
            // #5808 - If set beforeElement, render top scroll on it
            var beforeElement = $self;
            if(options.beforeElement) {
                beforeElement = $(options.beforeElement);
            }

            if (options.onlyIfScroll && beforeElement.get(0).scrollWidth <= $self.width()) { // #5808
                // content doesn't scroll
                // remove any existing occurrence...
                beforeElement.prev(options.topScrollBarWrapperSelector).remove(); // #5808
                return;
            }
        
            // add div that will act as an upper scroll only if not already added to the DOM
            var $topScrollBar = beforeElement.prev(options.topScrollBarWrapperSelector); // #5808

            if ($topScrollBar.length == 0) {
                
                // creating the scrollbar
                // added before in the DOM
                $topScrollBar = $(options.topScrollBarMarkup);
                beforeElement.before($topScrollBar); // #5808

                // apply the css
                $topScrollBar.css(options.scrollCss);
                $self.css(options.contentCss);

                // bind upper scroll to bottom scroll
                $topScrollBar.bind('scroll.doubleScroll', function() {
                    $self.scrollLeft($topScrollBar.scrollLeft());
                });

                // bind bottom scroll to upper scroll
                var selfScrollHandler = function() {
                    $topScrollBar.scrollLeft($self.scrollLeft());
                };
                $self.bind('scroll.doubleScroll', selfScrollHandler);
            }

            // find the content element (should be the widest one)  
            var $contentElement;        
            
            if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) {
                $contentElement = $self.find(options.contentElement);
            } else {
                $contentElement = $self.find('>:first-child');
            }
            
            // set the width of the wrappers
            $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth());
            $topScrollBar.width($self.width());
            $topScrollBar.scrollLeft($self.scrollLeft());
            
        }
    
        return this.each(function() {
            
            var $self = $(this);
            
            _showScrollBar($self, options);
            
            // bind the resize handler 
            // do it once
            if (options.resetOnWindowResize) {
            
                var id;
                var handler = function(e) {
                    _showScrollBar($self, options);
                };
            
                $(window).bind('resize.doubleScroll', function() {
                    // adding/removing/replacing the scrollbar might resize the window
                    // so the resizing flag will avoid the infinite loop here...
                    clearTimeout(id);
                    id = setTimeout(handler, options.timeToWaitForResize);
                });

            }

        });

    }

}( jQuery ));