Add z-index for thumbs to options

[coeamyd]

I have a situation where I'm using overscroll to scroll an area on the main page. There are items in this area that open a jQuery UI dialog, that needs to sit above the scrollbars, so I parameterized its z-index accordingly. Now I also need to use overscroll inside this dialog, but the thumbs won't show, since they have a fixed z-index below the dialog.

Unified diff of required changes:

@@ -91,7 +92,8 @@
                 wheelDelta: o.constants.wheelDelta,
                 scrollDelta: o.constants.scrollDelta,
                 direction: 'multi',
-                cancelOn: ''
+                cancelOn: '',
+                zIndex: 999
             }, options);

             // check for inconsistent directional restrictions
@@ -132,13 +135,13 @@
                     data.thumbs = {};

                     if (data.sizing.container.scrollWidth > 0 && options.direction !== 'vertical') {
-                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal))
+                        data.thumbs.horizontal = $(o.div).css(o.getThumbCss(data.sizing.thumbs.horizontal, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.horizontal);
                     }

-                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
-                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical))
+                    if (data.sizing.container.scrollHeight > 0 && options.direction !== 'horizontal') {
+                        data.thumbs.vertical = $(o.div).css(o.getThumbCss(data.sizing.thumbs.vertical, data.options.zIndex))
                                     .css({ opacity: options.persistThumbs ? o.constants.thumbOpacity : 0 });
                         target.prepend(data.thumbs.vertical);
                     }
@@ -506,7 +517,7 @@
         },

         // gets the CSS object for a thumb
-        getThumbCss: function (size) {
+        getThumbCss: function (size, zIndex) {

             return {
                 position: "absolute",
@@ -517,7 +528,7 @@
                 "-moz-border-radius": size.corner + "px",
                 "-webkit-border-radius": size.corner + "px",
                 "border-radius": size.corner + "px",
-                "z-index": "999"
+                "z-index": zIndex
             };

         }