Add layer-level-changed event and add $.indexOf polyfill

src/openseadragon.js

@@ -1332,6 +1332,50 @@ window.OpenSeadragon = window.OpenSeadragon || function( options ){
             }
         },
 
+        /**
+         * Find the first index at which an element is found in an array or -1
+         * if not present.
+         *
+         * Code taken and adapted from
+         * https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf#Compatibility
+         *
+         * @function
+         * @param {Array} array The array from which to find the element
+         * @param {Object} searchElement The element to find
+         * @param {Number} [fromIndex=0] Index to start research.
+         * @returns {Number} The index of the element in the array.
+         */
+        indexOf: function( array, searchElement, fromIndex ) {
+            if ( Array.prototype.indexOf ) {
+                this.indexOf = Array.prototype.indexOf;
+            } else {
+                this.indexOf = function( array, searchElement, fromIndex ) {
+                    var i,
+                        pivot = ( fromIndex ) ? fromIndex : 0,
+                        length;
+                    if ( !array ) {
+                        throw new TypeError( );
+                    }
+
+                    length = array.length;
+                    if ( length === 0 || pivot >= length ) {
+                        return -1;
+                    }
+
+                    if ( pivot < 0 ) {
+                        pivot = length - Math.abs( pivot );
+                    }
+
+                    for ( i = pivot; i < length; i++ ) {
+                        if ( array[i] === searchElement ) {
+                            return i;
+                        }
+                    }
+                    return -1;
+                };
+            }
+            return this.indexOf( array, searchElement, fromIndex );
+        },
 
         /**
          * Remove the specified CSS class from the element.

src/viewer.js

@@ -1072,7 +1072,7 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * @returns {Number} The level of the layer or -1 if not present.
      */
     getLayerLevel: function( drawer ) {
-        return this.drawers.indexOf( drawer );
+        return $.indexOf( this.drawers, drawer );
     },
 
     /**
@@ -1081,13 +1081,14 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
      * level layer.
      * @param {Number} level The new level
      * @returns {OpenSeadragon.Viewer} Chainable.
+     * @fires OpenSeadragon.Viewer.event:layer-level-changed
      */
     setLayerLevel: function( drawer, level ) {
-        var oldLevel = this.drawers.indexOf( drawer );
+        var oldLevel = this.getLayerLevel( drawer );
         if ( level === 0 || oldLevel === 0 ) {
             throw new Error( "Cannot reassign base level." );
         }
-        if ( level > this.drawers.length - 1 ) {
+        if ( level >= this.drawers.length ) {
             throw new Error( "Level bigger than number of layers." );
         }
         if ( level === oldLevel || oldLevel === -1 ) {
@@ -1100,6 +1101,25 @@ $.extend( $.Viewer.prototype, $.EventSource.prototype, $.ControlDock.prototype,
         var prevLevelCanvas = this.drawers[level - 1].canvas;
         prevLevelCanvas.parentNode.insertBefore( drawer.canvas,
             prevLevelCanvas.nextSibling );
+
+        /**
+         * Raised when the order of the layers has been changed.
+         * @event layer-level-changed
+         * @memberOf OpenSeadragon.Viewer
+         * @type {object}
+         * @property {OpenSeadragon.Viewer} eventSource - A reference to the Viewer which raised the event.
+         * @property {OpenSeadragon.Drawer} drawer - The drawer which level has
+         * been changed
+         * @property {Number} previousLevel - The previous level of the drawer
+         * @property {Number} newLevel - The new level of the drawer
+         * @property {?Object} userData - Arbitrary subscriber-defined object.
+         */
+        this.raiseEvent( 'layer-level-changed', {
+            drawer: drawer,
+            previousLevel: oldLevel,
+            newLevel: level
+        } );
+
         return this;
     },