/*

* @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
                       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>',
                       topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper',
                       topScrollBarInnerSelector: '.doubleScroll-scroll'
               });

               var _showScrollBar = function($self, options) {

                       if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) {
                               // content doesn't scroll
                               // remove any existing occurrence...
                               $self.prev(options.topScrollBarWrapperSelector).remove();
                               return;
                       }

                       // add div that will act as an upper scroll only if not already added to the DOM
                       var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector);

                       if ($topScrollBar.length == 0) {

                               // creating the scrollbar
                               // added before in the DOM
                               $topScrollBar = $(options.topScrollBarMarkup);
                               $self.before($topScrollBar);

                               // 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 ));