commonwealth-vlr-engine 0.0.1

data/app/assets/javascripts/wdl-viewer/jquery-deparam.js

@@ -0,0 +1,113 @@
+// https://github.com/AceMetrix/jquery-deparam
+(function(deparam){
+    if (typeof require === 'function' && typeof exports === 'object' && typeof module === 'object') {
+        var jquery = require('jquery');
+        module.exports = deparam(jquery);
+    } else if (typeof define === 'function' && define.amd){
+        define(['jquery'], function(jquery){
+            return deparam(jquery);
+        });
+    } else {
+        var global
+        try {
+          global = (false || eval)('this'); // best cross-browser way to determine global for < ES5
+        } catch (e) {
+          global = window; // fails only if browser (https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives)
+        }
+        global.deparam = deparam(jQuery); // assume jQuery is in global namespace
+    }
+})(function ($) {
+    var deparam = function( params, coerce ) {
+        var obj = {},
+        coerce_types = { 'true': !0, 'false': !1, 'null': null };
+
+        // Iterate over all name=value pairs.
+        params.replace(/\+/g, ' ').split('&').forEach(function(v){
+            var param = v.split( '=' ),
+            key = decodeURIComponent( param[0] ),
+            val,
+            cur = obj,
+            i = 0,
+
+            // If key is more complex than 'foo', like 'a[]' or 'a[b][c]', split it
+            // into its component parts.
+            keys = key.split( '][' ),
+            keys_last = keys.length - 1;
+
+            // If the first keys part contains [ and the last ends with ], then []
+            // are correctly balanced.
+            if ( /\[/.test( keys[0] ) && /\]$/.test( keys[ keys_last ] ) ) {
+                // Remove the trailing ] from the last keys part.
+                keys[ keys_last ] = keys[ keys_last ].replace( /\]$/, '' );
+
+                // Split first keys part into two parts on the [ and add them back onto
+                // the beginning of the keys array.
+                keys = keys.shift().split('[').concat( keys );
+
+                keys_last = keys.length - 1;
+            } else {
+                // Basic 'foo' style key.
+                keys_last = 0;
+            }
+
+            // Are we dealing with a name=value pair, or just a name?
+            if ( param.length === 2 ) {
+                val = decodeURIComponent( param[1] );
+
+                // Coerce values.
+                if ( coerce ) {
+                    val = val && !isNaN(val) && ((+val + '') === val) ? +val        // number
+                    : val === 'undefined'                       ? undefined         // undefined
+                    : coerce_types[val] !== undefined           ? coerce_types[val] // true, false, null
+                    : val;                                                          // string
+                }
+
+                if ( keys_last ) {
+                    // Complex key, build deep object structure based on a few rules:
+                    // * The 'cur' pointer starts at the object top-level.
+                    // * [] = array push (n is set to array length), [n] = array if n is
+                    //   numeric, otherwise object.
+                    // * If at the last keys part, set the value.
+                    // * For each keys part, if the current level is undefined create an
+                    //   object or array based on the type of the next keys part.
+                    // * Move the 'cur' pointer to the next level.
+                    // * Rinse & repeat.
+                    for ( ; i <= keys_last; i++ ) {
+                        key = keys[i] === '' ? cur.length : keys[i];
+                        cur = cur[key] = i < keys_last
+                        ? cur[key] || ( keys[i+1] && isNaN( keys[i+1] ) ? {} : [] )
+                        : val;
+                    }
+
+                } else {
+                    // Simple key, even simpler rules, since only scalars and shallow
+                    // arrays are allowed.
+
+                    if ( Object.prototype.toString.call( obj[key] ) === '[object Array]' ) {
+                        // val is already an array, so push on the next value.
+                        obj[key].push( val );
+
+                    } else if ( {}.hasOwnProperty.call(obj, key) ) {
+                        // val isn't an array, but since a second value has been specified,
+                        // convert val into an array.
+                        obj[key] = [ obj[key], val ];
+
+                    } else {
+                        // val is a scalar.
+                        obj[key] = val;
+                    }
+                }
+
+            } else if ( key ) {
+                // No value was defined, so set something meaningful.
+                obj[key] = coerce
+                ? undefined
+                : '';
+            }
+        });
+
+        return obj;
+    };
+    $.prototype.deparam = $.deparam = deparam;
+    return deparam;
+});

data/app/assets/javascripts/wdl-viewer/jquery.ba-throttle-debounce.min.js

@@ -0,0 +1,9 @@
+/*
+ * jQuery throttle / debounce - v1.1 - 3/7/2010
+ * http://benalman.com/projects/jquery-throttle-debounce-plugin/
+ * 
+ * Copyright (c) 2010 "Cowboy" Ben Alman
+ * Dual licensed under the MIT and GPL licenses.
+ * http://benalman.com/about/license/
+ */
+(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

data/app/assets/javascripts/wdl-viewer/jquery.hammer.min.js

@@ -0,0 +1,7 @@
+/*! Hammer.JS - v1.0.5 - 2013-04-07
+ * http://eightmedia.github.com/hammer.js
+ *
+ * Copyright (c) 2013 Jorik Tangelder <j.tangelder@gmail.com>;
+ * Licensed under the MIT license */
+
+(function(t,e){"use strict";function n(){if(!i.READY){i.event.determineEventTypes();for(var t in i.gestures)i.gestures.hasOwnProperty(t)&&i.detection.register(i.gestures[t]);i.event.onTouch(i.DOCUMENT,i.EVENT_MOVE,i.detection.detect),i.event.onTouch(i.DOCUMENT,i.EVENT_END,i.detection.detect),i.READY=!0}}var i=function(t,e){return new i.Instance(t,e||{})};i.defaults={stop_browser_behavior:{userSelect:"none",touchAction:"none",touchCallout:"none",contentZooming:"none",userDrag:"none",tapHighlightColor:"rgba(0,0,0,0)"}},i.HAS_POINTEREVENTS=navigator.pointerEnabled||navigator.msPointerEnabled,i.HAS_TOUCHEVENTS="ontouchstart"in t,i.MOBILE_REGEX=/mobile|tablet|ip(ad|hone|od)|android/i,i.NO_MOUSEEVENTS=i.HAS_TOUCHEVENTS&&navigator.userAgent.match(i.MOBILE_REGEX),i.EVENT_TYPES={},i.DIRECTION_DOWN="down",i.DIRECTION_LEFT="left",i.DIRECTION_UP="up",i.DIRECTION_RIGHT="right",i.POINTER_MOUSE="mouse",i.POINTER_TOUCH="touch",i.POINTER_PEN="pen",i.EVENT_START="start",i.EVENT_MOVE="move",i.EVENT_END="end",i.DOCUMENT=document,i.plugins={},i.READY=!1,i.Instance=function(t,e){var r=this;return n(),this.element=t,this.enabled=!0,this.options=i.utils.extend(i.utils.extend({},i.defaults),e||{}),this.options.stop_browser_behavior&&i.utils.stopDefaultBrowserBehavior(this.element,this.options.stop_browser_behavior),i.event.onTouch(t,i.EVENT_START,function(t){r.enabled&&i.detection.startDetect(r,t)}),this},i.Instance.prototype={on:function(t,e){for(var n=t.split(" "),i=0;n.length>i;i++)this.element.addEventListener(n[i],e,!1);return this},off:function(t,e){for(var n=t.split(" "),i=0;n.length>i;i++)this.element.removeEventListener(n[i],e,!1);return this},trigger:function(t,e){var n=i.DOCUMENT.createEvent("Event");n.initEvent(t,!0,!0),n.gesture=e;var r=this.element;return i.utils.hasParent(e.target,r)&&(r=e.target),r.dispatchEvent(n),this},enable:function(t){return this.enabled=t,this}};var r=null,o=!1,s=!1;i.event={bindDom:function(t,e,n){for(var i=e.split(" "),r=0;i.length>r;r++)t.addEventListener(i[r],n,!1)},onTouch:function(t,e,n){var a=this;this.bindDom(t,i.EVENT_TYPES[e],function(c){var u=c.type.toLowerCase();if(!u.match(/mouse/)||!s){(u.match(/touch/)||u.match(/pointerdown/)||u.match(/mouse/)&&1===c.which)&&(o=!0),u.match(/touch|pointer/)&&(s=!0);var h=0;o&&(i.HAS_POINTEREVENTS&&e!=i.EVENT_END?h=i.PointerEvent.updatePointer(e,c):u.match(/touch/)?h=c.touches.length:s||(h=u.match(/up/)?0:1),h>0&&e==i.EVENT_END?e=i.EVENT_MOVE:h||(e=i.EVENT_END),h||null===r?r=c:c=r,n.call(i.detection,a.collectEventData(t,e,c)),i.HAS_POINTEREVENTS&&e==i.EVENT_END&&(h=i.PointerEvent.updatePointer(e,c))),h||(r=null,o=!1,s=!1,i.PointerEvent.reset())}})},determineEventTypes:function(){var t;t=i.HAS_POINTEREVENTS?i.PointerEvent.getEvents():i.NO_MOUSEEVENTS?["touchstart","touchmove","touchend touchcancel"]:["touchstart mousedown","touchmove mousemove","touchend touchcancel mouseup"],i.EVENT_TYPES[i.EVENT_START]=t[0],i.EVENT_TYPES[i.EVENT_MOVE]=t[1],i.EVENT_TYPES[i.EVENT_END]=t[2]},getTouchList:function(t){return i.HAS_POINTEREVENTS?i.PointerEvent.getTouchList():t.touches?t.touches:[{identifier:1,pageX:t.pageX,pageY:t.pageY,target:t.target}]},collectEventData:function(t,e,n){var r=this.getTouchList(n,e),o=i.POINTER_TOUCH;return(n.type.match(/mouse/)||i.PointerEvent.matchType(i.POINTER_MOUSE,n))&&(o=i.POINTER_MOUSE),{center:i.utils.getCenter(r),timeStamp:(new Date).getTime(),target:n.target,touches:r,eventType:e,pointerType:o,srcEvent:n,preventDefault:function(){this.srcEvent.preventManipulation&&this.srcEvent.preventManipulation(),this.srcEvent.preventDefault&&this.srcEvent.preventDefault()},stopPropagation:function(){this.srcEvent.stopPropagation()},stopDetect:function(){return i.detection.stopDetect()}}}},i.PointerEvent={pointers:{},getTouchList:function(){var t=this,e=[];return Object.keys(t.pointers).sort().forEach(function(n){e.push(t.pointers[n])}),e},updatePointer:function(t,e){return t==i.EVENT_END?this.pointers={}:(e.identifier=e.pointerId,this.pointers[e.pointerId]=e),Object.keys(this.pointers).length},matchType:function(t,e){if(!e.pointerType)return!1;var n={};return n[i.POINTER_MOUSE]=e.pointerType==e.MSPOINTER_TYPE_MOUSE||e.pointerType==i.POINTER_MOUSE,n[i.POINTER_TOUCH]=e.pointerType==e.MSPOINTER_TYPE_TOUCH||e.pointerType==i.POINTER_TOUCH,n[i.POINTER_PEN]=e.pointerType==e.MSPOINTER_TYPE_PEN||e.pointerType==i.POINTER_PEN,n[t]},getEvents:function(){return["pointerdown MSPointerDown","pointermove MSPointerMove","pointerup pointercancel MSPointerUp MSPointerCancel"]},reset:function(){this.pointers={}}},i.utils={extend:function(t,n,i){for(var r in n)t[r]!==e&&i||(t[r]=n[r]);return t},hasParent:function(t,e){for(;t;){if(t==e)return!0;t=t.parentNode}return!1},getCenter:function(t){for(var e=[],n=[],i=0,r=t.length;r>i;i++)e.push(t[i].pageX),n.push(t[i].pageY);return{pageX:(Math.min.apply(Math,e)+Math.max.apply(Math,e))/2,pageY:(Math.min.apply(Math,n)+Math.max.apply(Math,n))/2}},getVelocity:function(t,e,n){return{x:Math.abs(e/t)||0,y:Math.abs(n/t)||0}},getAngle:function(t,e){var n=e.pageY-t.pageY,i=e.pageX-t.pageX;return 180*Math.atan2(n,i)/Math.PI},getDirection:function(t,e){var n=Math.abs(t.pageX-e.pageX),r=Math.abs(t.pageY-e.pageY);return n>=r?t.pageX-e.pageX>0?i.DIRECTION_LEFT:i.DIRECTION_RIGHT:t.pageY-e.pageY>0?i.DIRECTION_UP:i.DIRECTION_DOWN},getDistance:function(t,e){var n=e.pageX-t.pageX,i=e.pageY-t.pageY;return Math.sqrt(n*n+i*i)},getScale:function(t,e){return t.length>=2&&e.length>=2?this.getDistance(e[0],e[1])/this.getDistance(t[0],t[1]):1},getRotation:function(t,e){return t.length>=2&&e.length>=2?this.getAngle(e[1],e[0])-this.getAngle(t[1],t[0]):0},isVertical:function(t){return t==i.DIRECTION_UP||t==i.DIRECTION_DOWN},stopDefaultBrowserBehavior:function(t,e){var n,i=["webkit","khtml","moz","ms","o",""];if(e&&t.style){for(var r=0;i.length>r;r++)for(var o in e)e.hasOwnProperty(o)&&(n=o,i[r]&&(n=i[r]+n.substring(0,1).toUpperCase()+n.substring(1)),t.style[n]=e[o]);"none"==e.userSelect&&(t.onselectstart=function(){return!1})}}},i.detection={gestures:[],current:null,previous:null,stopped:!1,startDetect:function(t,e){this.current||(this.stopped=!1,this.current={inst:t,startEvent:i.utils.extend({},e),lastEvent:!1,name:""},this.detect(e))},detect:function(t){if(this.current&&!this.stopped){t=this.extendEventData(t);for(var e=this.current.inst.options,n=0,r=this.gestures.length;r>n;n++){var o=this.gestures[n];if(!this.stopped&&e[o.name]!==!1&&o.handler.call(o,t,this.current.inst)===!1){this.stopDetect();break}}return this.current&&(this.current.lastEvent=t),t.eventType==i.EVENT_END&&!t.touches.length-1&&this.stopDetect(),t}},stopDetect:function(){this.previous=i.utils.extend({},this.current),this.current=null,this.stopped=!0},extendEventData:function(t){var e=this.current.startEvent;if(e&&(t.touches.length!=e.touches.length||t.touches===e.touches)){e.touches=[];for(var n=0,r=t.touches.length;r>n;n++)e.touches.push(i.utils.extend({},t.touches[n]))}var o=t.timeStamp-e.timeStamp,s=t.center.pageX-e.center.pageX,a=t.center.pageY-e.center.pageY,c=i.utils.getVelocity(o,s,a);return i.utils.extend(t,{deltaTime:o,deltaX:s,deltaY:a,velocityX:c.x,velocityY:c.y,distance:i.utils.getDistance(e.center,t.center),angle:i.utils.getAngle(e.center,t.center),direction:i.utils.getDirection(e.center,t.center),scale:i.utils.getScale(e.touches,t.touches),rotation:i.utils.getRotation(e.touches,t.touches),startEvent:e}),t},register:function(t){var n=t.defaults||{};return n[t.name]===e&&(n[t.name]=!0),i.utils.extend(i.defaults,n,!0),t.index=t.index||1e3,this.gestures.push(t),this.gestures.sort(function(t,e){return t.index<e.index?-1:t.index>e.index?1:0}),this.gestures}},i.gestures=i.gestures||{},i.gestures.Hold={name:"hold",index:10,defaults:{hold_timeout:500,hold_threshold:1},timer:null,handler:function(t,e){switch(t.eventType){case i.EVENT_START:clearTimeout(this.timer),i.detection.current.name=this.name,this.timer=setTimeout(function(){"hold"==i.detection.current.name&&e.trigger("hold",t)},e.options.hold_timeout);break;case i.EVENT_MOVE:t.distance>e.options.hold_threshold&&clearTimeout(this.timer);break;case i.EVENT_END:clearTimeout(this.timer)}}},i.gestures.Tap={name:"tap",index:100,defaults:{tap_max_touchtime:250,tap_max_distance:10,tap_always:!0,doubletap_distance:20,doubletap_interval:300},handler:function(t,e){if(t.eventType==i.EVENT_END){var n=i.detection.previous,r=!1;if(t.deltaTime>e.options.tap_max_touchtime||t.distance>e.options.tap_max_distance)return;n&&"tap"==n.name&&t.timeStamp-n.lastEvent.timeStamp<e.options.doubletap_interval&&t.distance<e.options.doubletap_distance&&(e.trigger("doubletap",t),r=!0),(!r||e.options.tap_always)&&(i.detection.current.name="tap",e.trigger(i.detection.current.name,t))}}},i.gestures.Swipe={name:"swipe",index:40,defaults:{swipe_max_touches:1,swipe_velocity:.7},handler:function(t,e){if(t.eventType==i.EVENT_END){if(e.options.swipe_max_touches>0&&t.touches.length>e.options.swipe_max_touches)return;(t.velocityX>e.options.swipe_velocity||t.velocityY>e.options.swipe_velocity)&&(e.trigger(this.name,t),e.trigger(this.name+t.direction,t))}}},i.gestures.Drag={name:"drag",index:50,defaults:{drag_min_distance:10,drag_max_touches:1,drag_block_horizontal:!1,drag_block_vertical:!1,drag_lock_to_axis:!1,drag_lock_min_distance:25},triggered:!1,handler:function(t,n){if(i.detection.current.name!=this.name&&this.triggered)return n.trigger(this.name+"end",t),this.triggered=!1,e;if(!(n.options.drag_max_touches>0&&t.touches.length>n.options.drag_max_touches))switch(t.eventType){case i.EVENT_START:this.triggered=!1;break;case i.EVENT_MOVE:if(t.distance<n.options.drag_min_distance&&i.detection.current.name!=this.name)return;i.detection.current.name=this.name,(i.detection.current.lastEvent.drag_locked_to_axis||n.options.drag_lock_to_axis&&n.options.drag_lock_min_distance<=t.distance)&&(t.drag_locked_to_axis=!0);var r=i.detection.current.lastEvent.direction;t.drag_locked_to_axis&&r!==t.direction&&(t.direction=i.utils.isVertical(r)?0>t.deltaY?i.DIRECTION_UP:i.DIRECTION_DOWN:0>t.deltaX?i.DIRECTION_LEFT:i.DIRECTION_RIGHT),this.triggered||(n.trigger(this.name+"start",t),this.triggered=!0),n.trigger(this.name,t),n.trigger(this.name+t.direction,t),(n.options.drag_block_vertical&&i.utils.isVertical(t.direction)||n.options.drag_block_horizontal&&!i.utils.isVertical(t.direction))&&t.preventDefault();break;case i.EVENT_END:this.triggered&&n.trigger(this.name+"end",t),this.triggered=!1}}},i.gestures.Transform={name:"transform",index:45,defaults:{transform_min_scale:.01,transform_min_rotation:1,transform_always_block:!1},triggered:!1,handler:function(t,n){if(i.detection.current.name!=this.name&&this.triggered)return n.trigger(this.name+"end",t),this.triggered=!1,e;if(!(2>t.touches.length))switch(n.options.transform_always_block&&t.preventDefault(),t.eventType){case i.EVENT_START:this.triggered=!1;break;case i.EVENT_MOVE:var r=Math.abs(1-t.scale),o=Math.abs(t.rotation);if(n.options.transform_min_scale>r&&n.options.transform_min_rotation>o)return;i.detection.current.name=this.name,this.triggered||(n.trigger(this.name+"start",t),this.triggered=!0),n.trigger(this.name,t),o>n.options.transform_min_rotation&&n.trigger("rotate",t),r>n.options.transform_min_scale&&(n.trigger("pinch",t),n.trigger("pinch"+(1>t.scale?"in":"out"),t));break;case i.EVENT_END:this.triggered&&n.trigger(this.name+"end",t),this.triggered=!1}}},i.gestures.Touch={name:"touch",index:-1/0,defaults:{prevent_default:!1,prevent_mouseevents:!1},handler:function(t,n){return n.options.prevent_mouseevents&&t.pointerType==i.POINTER_MOUSE?(t.stopDetect(),e):(n.options.prevent_default&&t.preventDefault(),t.eventType==i.EVENT_START&&n.trigger(this.name,t),e)}},i.gestures.Release={name:"release",index:1/0,handler:function(t,e){t.eventType==i.EVENT_END&&e.trigger(this.name,t)}},"object"==typeof module&&"object"==typeof module.exports?module.exports=i:(t.Hammer=i,"function"==typeof t.define&&t.define.amd&&t.define("hammer",[],function(){return i}))})(this),function(t,e){"use strict";t!==e&&(Hammer.event.bindDom=function(n,i,r){t(n).on(i,function(t){var n=t.originalEvent||t;n.pageX===e&&(n.pageX=t.pageX,n.pageY=t.pageY),n.target||(n.target=t.target),n.which===e&&(n.which=n.button),n.preventDefault||(n.preventDefault=t.preventDefault),n.stopPropagation||(n.stopPropagation=t.stopPropagation),r.call(this,n)})},Hammer.Instance.prototype.on=function(e,n){return t(this.element).on(e,n)},Hammer.Instance.prototype.off=function(e,n){return t(this.element).off(e,n)},Hammer.Instance.prototype.trigger=function(e,n){var i=t(this.element);return i.has(n.target).length&&(i=t(n.target)),i.trigger({type:e,gesture:n})},t.fn.hammer=function(e){return this.each(function(){var n=t(this),i=n.data("hammer");i?i&&e&&Hammer.utils.extend(i.options,e):n.data("hammer",new Hammer(this,e||{}))})})}(window.jQuery||window.Zepto);

data/app/assets/javascripts/wdl-viewer/modernizr-wdl.min.js

@@ -0,0 +1,3 @@
+/* custom Modernizr build used on WDL production */
+/* js flexbox flexboxlegacy canvas no-touch history rgba csstransforms fontface video audio localstorage fullscreen */
+window.Modernizr=function(window,document,undefined){var version="2.6.2",Modernizr={},enableClasses=true,docElement=document.documentElement,mod="modernizr",modElem=document.createElement(mod),mStyle=modElem.style,inputElem=document.createElement("input"),smile=":)",toString={}.toString,prefixes=" -webkit- -moz- -o- -ms- ".split(" "),omPrefixes="Webkit Moz O ms",cssomPrefixes=omPrefixes.split(" "),domPrefixes=omPrefixes.toLowerCase().split(" "),tests={},inputs={},attrs={},classes=[],slice=classes.slice,featureName,injectElementWithStyles=function(rule,callback,nodes,testnames){var style,ret,node,docOverflow,div=document.createElement("div"),body=document.body,fakeBody=body||document.createElement("body");if(parseInt(nodes,10)){while(nodes--){node=document.createElement("div");node.id=testnames?testnames[nodes]:mod+(nodes+1);div.appendChild(node)}}style=["&#173;",'<style id="s',mod,'">',rule,"</style>"].join("");div.id=mod;(body?div:fakeBody).innerHTML+=style;fakeBody.appendChild(div);if(!body){fakeBody.style.background="";fakeBody.style.overflow="hidden";docOverflow=docElement.style.overflow;docElement.style.overflow="hidden";docElement.appendChild(fakeBody)}ret=callback(div,rule);if(!body){fakeBody.parentNode.removeChild(fakeBody);docElement.style.overflow=docOverflow}else{div.parentNode.removeChild(div)}return!!ret},_hasOwnProperty={}.hasOwnProperty,hasOwnProp;if(!is(_hasOwnProperty,"undefined")&&!is(_hasOwnProperty.call,"undefined")){hasOwnProp=function(object,property){return _hasOwnProperty.call(object,property)}}else{hasOwnProp=function(object,property){return property in object&&is(object.constructor.prototype[property],"undefined")}}if(!Function.prototype.bind){Function.prototype.bind=function bind(that){var target=this;if(typeof target!="function"){throw new TypeError}var args=slice.call(arguments,1),bound=function(){if(this instanceof bound){var F=function(){};F.prototype=target.prototype;var self=new F;var result=target.apply(self,args.concat(slice.call(arguments)));if(Object(result)===result){return result}return self}else{return target.apply(that,args.concat(slice.call(arguments)))}};return bound}}function setCss(str){mStyle.cssText=str}function setCssAll(str1,str2){return setCss(prefixes.join(str1+";")+(str2||""))}function is(obj,type){return typeof obj===type}function contains(str,substr){return!!~(""+str).indexOf(substr)}function testProps(props,prefixed){for(var i in props){var prop=props[i];if(!contains(prop,"-")&&mStyle[prop]!==undefined){return prefixed=="pfx"?prop:true}}return false}function testDOMProps(props,obj,elem){for(var i in props){var item=obj[props[i]];if(item!==undefined){if(elem===false)return props[i];if(is(item,"function")){return item.bind(elem||obj)}return item}}return false}function testPropsAll(prop,prefixed,elem){var ucProp=prop.charAt(0).toUpperCase()+prop.slice(1),props=(prop+" "+cssomPrefixes.join(ucProp+" ")+ucProp).split(" ");if(is(prefixed,"string")||is(prefixed,"undefined")){return testProps(props,prefixed)}else{props=(prop+" "+domPrefixes.join(ucProp+" ")+ucProp).split(" ");return testDOMProps(props,prefixed,elem)}}tests["flexbox"]=function(){return testPropsAll("flexWrap")};tests["flexboxlegacy"]=function(){return testPropsAll("boxDirection")};tests["canvas"]=function(){var elem=document.createElement("canvas");return!!(elem.getContext&&elem.getContext("2d"))};tests["touch"]=function(){var bool;if("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch){bool=true}else{injectElementWithStyles(["@media (",prefixes.join("touch-enabled),("),mod,")","{#modernizr{top:9px;position:absolute}}"].join(""),function(node){bool=node.offsetTop===9})}return bool};tests["history"]=function(){return!!(window.history&&history.pushState)};tests["rgba"]=function(){setCss("background-color:rgba(150,255,150,.5)");return contains(mStyle.backgroundColor,"rgba")};tests["csstransforms"]=function(){return!!testPropsAll("transform")};tests["fontface"]=function(){var bool;injectElementWithStyles('@font-face {font-family:"font";src:url("https://")}',function(node,rule){var style=document.getElementById("smodernizr"),sheet=style.sheet||style.styleSheet,cssText=sheet?sheet.cssRules&&sheet.cssRules[0]?sheet.cssRules[0].cssText:sheet.cssText||"":"";bool=/src/i.test(cssText)&&cssText.indexOf(rule.split(" ")[0])===0});return bool};tests["video"]=function(){var elem=document.createElement("video"),bool=false;try{if(bool=!!elem.canPlayType){bool=new Boolean(bool);bool.ogg=elem.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,"");bool.h264=elem.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,"");bool.webm=elem.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}}catch(e){}return bool};tests["audio"]=function(){var elem=document.createElement("audio"),bool=false;try{if(bool=!!elem.canPlayType){bool=new Boolean(bool);bool.ogg=elem.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,"");bool.mp3=elem.canPlayType("audio/mpeg;").replace(/^no$/,"");bool.wav=elem.canPlayType('audio/wav; codecs="1"').replace(/^no$/,"");bool.m4a=(elem.canPlayType("audio/x-m4a;")||elem.canPlayType("audio/aac;")).replace(/^no$/,"")}}catch(e){}return bool};tests["localstorage"]=function(){try{localStorage.setItem(mod,mod);localStorage.removeItem(mod);return true}catch(e){return false}};function webforms(){Modernizr["input"]=function(props){for(var i=0,len=props.length;i<len;i++){attrs[props[i]]=!!(props[i]in inputElem)}if(attrs.list){attrs.list=!!(document.createElement("datalist")&&window.HTMLDataListElement)}return attrs}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" "));Modernizr["inputtypes"]=function(props){for(var i=0,bool,inputElemType,defaultView,len=props.length;i<len;i++){inputElem.setAttribute("type",inputElemType=props[i]);bool=inputElem.type!=="text";if(bool){inputElem.value=smile;inputElem.style.cssText="position:absolute;visibility:hidden;";if(/^range$/.test(inputElemType)&&inputElem.style.WebkitAppearance!==undefined){docElement.appendChild(inputElem);defaultView=document.defaultView;bool=defaultView.getComputedStyle&&defaultView.getComputedStyle(inputElem,null).WebkitAppearance!=="textfield"&&inputElem.offsetHeight!==0;docElement.removeChild(inputElem)}else if(/^(search|tel)$/.test(inputElemType)){}else if(/^(url|email)$/.test(inputElemType)){bool=inputElem.checkValidity&&inputElem.checkValidity()===false}else{bool=inputElem.value!=smile}}inputs[props[i]]=!!bool}return inputs}("search tel url email datetime date month week time datetime-local number range color".split(" "))}for(var feature in tests){if(hasOwnProp(tests,feature)){featureName=feature.toLowerCase();Modernizr[featureName]=tests[feature]();classes.push((Modernizr[featureName]?"":"no-")+featureName)}}Modernizr.input||webforms();Modernizr.addTest=function(feature,test){if(typeof feature=="object"){for(var key in feature){if(hasOwnProp(feature,key)){Modernizr.addTest(key,feature[key])}}}else{feature=feature.toLowerCase();if(Modernizr[feature]!==undefined){return Modernizr}test=typeof test=="function"?test():test;if(typeof enableClasses!=="undefined"&&enableClasses){docElement.className+=" "+(test?"":"no-")+feature}Modernizr[feature]=test}return Modernizr};setCss("");modElem=inputElem=null;(function(window,document){var options=window.html5||{};var reSkip=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;var saveClones=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;var supportsHtml5Styles;var expando="_html5shiv";var expanID=0;var expandoData={};var supportsUnknownElements;(function(){try{var a=document.createElement("a");a.innerHTML="<xyz></xyz>";supportsHtml5Styles="hidden"in a;supportsUnknownElements=a.childNodes.length==1||function(){document.createElement("a");var frag=document.createDocumentFragment();return typeof frag.cloneNode=="undefined"||typeof frag.createDocumentFragment=="undefined"||typeof frag.createElement=="undefined"}()}catch(e){supportsHtml5Styles=true;supportsUnknownElements=true}})();function addStyleSheet(ownerDocument,cssText){var p=ownerDocument.createElement("p"),parent=ownerDocument.getElementsByTagName("head")[0]||ownerDocument.documentElement;p.innerHTML="x<style>"+cssText+"</style>";return parent.insertBefore(p.lastChild,parent.firstChild)}function getElements(){var elements=html5.elements;return typeof elements=="string"?elements.split(" "):elements}function getExpandoData(ownerDocument){var data=expandoData[ownerDocument[expando]];if(!data){data={};expanID++;ownerDocument[expando]=expanID;expandoData[expanID]=data}return data}function createElement(nodeName,ownerDocument,data){if(!ownerDocument){ownerDocument=document}if(supportsUnknownElements){return ownerDocument.createElement(nodeName)}if(!data){data=getExpandoData(ownerDocument)}var node;if(data.cache[nodeName]){node=data.cache[nodeName].cloneNode()}else if(saveClones.test(nodeName)){node=(data.cache[nodeName]=data.createElem(nodeName)).cloneNode()}else{node=data.createElem(nodeName)}return node.canHaveChildren&&!reSkip.test(nodeName)?data.frag.appendChild(node):node}function createDocumentFragment(ownerDocument,data){if(!ownerDocument){ownerDocument=document}if(supportsUnknownElements){return ownerDocument.createDocumentFragment()}data=data||getExpandoData(ownerDocument);var clone=data.frag.cloneNode(),i=0,elems=getElements(),l=elems.length;for(;i<l;i++){clone.createElement(elems[i])}return clone}function shivMethods(ownerDocument,data){if(!data.cache){data.cache={};data.createElem=ownerDocument.createElement;data.createFrag=ownerDocument.createDocumentFragment;data.frag=data.createFrag()}ownerDocument.createElement=function(nodeName){if(!html5.shivMethods){return data.createElem(nodeName)}return createElement(nodeName,ownerDocument,data)};ownerDocument.createDocumentFragment=Function("h,f","return function(){"+"var n=f.cloneNode(),c=n.createElement;"+"h.shivMethods&&("+getElements().join().replace(/\w+/g,function(nodeName){data.createElem(nodeName);data.frag.createElement(nodeName);return'c("'+nodeName+'")'})+");return n}")(html5,data.frag)}function shivDocument(ownerDocument){if(!ownerDocument){ownerDocument=document}var data=getExpandoData(ownerDocument);if(html5.shivCSS&&!supportsHtml5Styles&&!data.hasCSS){data.hasCSS=!!addStyleSheet(ownerDocument,"article,aside,figcaption,figure,footer,header,hgroup,nav,section{display:block}"+"mark{background:#FF0;color:#000}")}if(!supportsUnknownElements){shivMethods(ownerDocument,data)}return ownerDocument}var html5={elements:options.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:options.shivCSS!==false,supportsUnknownElements:supportsUnknownElements,shivMethods:options.shivMethods!==false,type:"default",shivDocument:shivDocument,createElement:createElement,createDocumentFragment:createDocumentFragment};window.html5=html5;shivDocument(document)})(this,document);Modernizr._version=version;Modernizr._prefixes=prefixes;Modernizr._domPrefixes=domPrefixes;Modernizr._cssomPrefixes=cssomPrefixes;Modernizr.testProp=function(prop){return testProps([prop])};Modernizr.testAllProps=testPropsAll;Modernizr.testStyles=injectElementWithStyles;docElement.className=docElement.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(enableClasses?" js "+classes.join(" "):"");return Modernizr}(this,this.document);(function(a,b,c){function d(a){return"[object Function]"==o.call(a)}function e(a){return"string"==typeof a}function f(){}function g(a){return!a||"loaded"==a||"complete"==a||"uninitialized"==a}function h(){var a=p.shift();q=1,a?a.t?m(function(){("c"==a.t?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){"img"!=a&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l=b.createElement(a),o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};1===y[c]&&(r=1,y[c]=[]),"object"==a?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),"img"!=a&&(r||2===y[c]?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i("c"==b?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),1==p.length&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&"[object Opera]"==o.call(a.opera),l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return"[object Array]"==o.call(a)},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,h){var i=b(a),j=i.autoCallback;i.url.split(".").pop().split("?").shift(),i.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]),i.instead?i.instead(a,e,f,g,h):(y[i.url]?i.noexec=!0:y[i.url]=1,f.load(i.url,i.forceCSS||!i.forceJS&&"css"==i.url.split(".").pop().split("?").shift()?"c":c,i.noexec,i.attrs,i.timeout),(d(e)||d(j))&&f.load(function(){k(),e&&e(i.origUrl,h,g),j&&j(i.origUrl,h,g),y[i.url]=2})))}function h(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var i,j,l=this.yepnope.loader;if(e(a))g(a,0,l,0);else if(w(a))for(i=0;i<a.length;i++)j=a[i],e(j)?g(j,0,l,0):w(j)?B(j):Object(j)===j&&h(j,l);else Object(a)===a&&h(a,l)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,null==b.readyState&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}})(this,document);Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};Modernizr.addTest("fullscreen",function(){for(var i=0;i<Modernizr._domPrefixes.length;i++){if(document[Modernizr._domPrefixes[i].toLowerCase()+"CancelFullScreen"])return true}return!!document["cancelFullScreen"]||false});

data/app/assets/javascripts/wdl-viewer/wdl-search.js

@@ -0,0 +1,33 @@
+/* functions in the WDL namespace used by WDL-Viewer */
+"undefined" == typeof WDL && (window.WDL = {}), WDL.ajaxRetry = function(e) {
+    "use strict";
+    return e.dataType = e.dataType || "json", e.tries = 0, e.timeout = e.timeout || 15e3, e.retryLimit = e.retryLimit || 3, e.error = function(e, t) {
+        (e.status >= 500 || "timeout" == t) && this.tries++ <= this.retryLimit && jQuery.ajax(this)
+    }, jQuery.ajax(e)
+}, WDL.Search = (function () {
+    'use strict';
+
+    function matchesTerm(haystack, needle) {
+        var key = haystack.toLocaleLowerCase();
+        return key.indexOf(needle.toLocaleLowerCase()) > -1;
+    }
+
+    function inTerms(a, b) {
+        for (var i = 0; i < b.length; i++) {
+            if (matchesTerm(a, b[i])) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    function formatPercentage(i) {
+        // Take a float between 0.0 and 1.0 a string percentage suitable for CSS:
+        return Math.round(100 * i).toString() + '%';
+    }
+
+    return {
+        inTerms: inTerms,
+        formatPercentage: formatPercentage
+    };
+})();

data/app/assets/javascripts/wdl-viewer/wdl-viewer_commonwealth.js

@@ -0,0 +1,1147 @@
+/*global navigator, window, document, Element, Modernizr, jQuery, Image, OpenSeadragon, WDL */
+/* this is a modified version of the wdl-viewer JS */
+/* https://github.com/LibraryOfCongress/wdl-viewer/src/js/wdl-viewer.js */
+/* Thanks to Chris Adams (https://github.com/acdha) for help with adaptation */
+/* all local changes are marked with: *** commonwealth changes *** */
+
+(function ($) {
+    "use strict";
+    var $window = $(window),
+        placeholderImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';
+
+    var gettext = window.gettext;
+    if (typeof(gettext) == "undefined") {
+        // intentionally does nothing but avoids breaking if JS I18N dict fails to load
+        gettext = function (i) { return i; };
+    }
+
+    function isFullScreen() {
+        return ((document.fullScreenElement && document.fullScreenElement !== null) ||
+            (!document.mozFullScreen && !document.webkitIsFullScreen));
+    }
+
+    function enterFullscreen() {
+        var doc = document.documentElement;
+        if (doc.requestFullscreen) {
+            doc.requestFullscreen();
+        } else if (doc.webkitRequestFullscreen) {
+            doc.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+        } else if (doc.mozRequestFullScreen) {
+            doc.mozRequestFullScreen();
+        }
+    }
+
+    function leaveFullscreen() {
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.cancelFullscreen) {
+            document.cancelFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        } else if (document.webkitCancelFullScreen) {
+            document.webkitCancelFullScreen();
+        }
+    }
+
+    function toggleFullscreen() {
+        if (isFullScreen()) {
+            enterFullscreen();
+        } else {
+            leaveFullscreen();
+        }
+    }
+
+    $window.on("fullscreenchange mozfullscreenchange webkitfullscreenchange msfullscreenchange", function () {
+        $window.trigger("resize");
+    });
+
+    // TODO: Finish refactoring this out of being a jQuery plugin
+    $.fn.wdlViewer = function (config) {
+        return this.each(function View(idx, elm) {
+            return new ViewController(elm, config);
+        });
+    };
+
+    function ViewController(elm, config) {
+        var controller = this, // Convenience alias for event handlers…
+            $viewer = $(elm),
+            $header = $viewer.find("header"),
+            $footer = $viewer.find("footer"),
+            $help = $("#help"),
+            $pages = $("#pages"),
+            $grid = $('<div id="grid"></div>').hide().insertAfter($pages),
+            $seadragon = $('<div id="seadragon"></div>').hide().insertAfter($pages),
+            $groupControl = $("#group"),
+            $indexControl = $("#index");
+
+        // We still want to allow custom events and some jQuery convenience, so we'll expose these to views:
+        this.viewer = $viewer;
+        this.footer = $footer;
+        this.header = $header;
+
+        this.config = config;
+        this.rotation = config.viewportRotation || 0;
+        this.searchText = null; // *** commonwealth changes ***
+
+        config.placeholderSrc = config.placeholderSrc || placeholderImage;
+        // TODO: Adjust image max size based on the viewport
+        config.maxPageEdge = 1024;
+        config.maxThumbnailEdge = 256;
+
+        // These control the state of the overall View (pagination, search, etc.) but not the individual
+        // page displays:
+        this.currentGroup = parseInt($groupControl.val(), 10) || 1;
+        this.currentIndex = parseInt($indexControl.val(), 10) || 1;
+        this.maxIndex = config.pageGroups[this.currentGroup] || 1;
+
+        // Hide the group selection button if we only have one item:
+        if ($groupControl.children().length < 2) {
+            $groupControl.parent().hide();
+        }
+
+        if ($.isFunction(config.imageUrlTemplate)) {
+            this.generateImageUrl = config.imageUrlTemplate;
+        }
+
+        if ($.isFunction(config.pageUrlTemplate)) {
+            this.generatePageUrl = config.pageUrlTemplate;
+        }
+
+        if ($.isFunction(config.dziUrlTemplate)) {
+            this.generateDziUrl = config.dziUrlTemplate;
+        }
+
+        /* *** commonwealth changes *** */
+        if ($.isFunction(config.thumbUrlTemplate)) {
+            this.generateThumbUrl = config.thumbUrlTemplate;
+        }
+        if ($.isFunction(config.wordCoordinatesUrlTemplate)) {
+            this.generateWordCoordinatesUrl = config.wordCoordinatesUrlTemplate;
+        }
+
+        this.pageView = new PageView(this, $pages, config);
+
+        if (config.dziUrlTemplate) {
+            this.seadragonView = new SeadragonView(this, $seadragon, config);
+        }
+
+        this.gridView = new GridView(this, $grid, config);
+        this.activeView = this.pageView;
+
+        /* *** commonwealth changes *** */
+        /* add classes for bootstrap and font-awesome */
+        // Add toolbar features which only work with JavaScript:
+        if (this.seadragonView) {
+            $('<button id="toggle-seadragon" class="btn btn-link" type="button"><i class="fa fa-plus"></i></button>')
+                .attr("title","Zoom")
+                .appendTo("footer .toolbar .controls")
+                .on("click", $.proxy(function () {
+                    if ((this.activeView == this.seadragonView) || (this.activeView == this.gridView)) {
+                        this.openPageView();
+                    } else {
+                        this.openSeadragonView();
+                    }
+                }, this));
+        }
+
+        if (Modernizr.canvas || Modernizr.csstransforms) {
+            $('<button id="rotate-left" class="requires-rotation btn btn-link" type="button"><i class="fa fa-undo"></i></button>')
+                // .text(gettext("Rotate Left"))
+                .attr("title","Rotate Left")
+                .appendTo("footer .toolbar .controls")
+                .on("click", $.proxy(function () {
+                    this.rotate(true);
+                }, this));
+
+            $('<button id="rotate-right" class="requires-rotation btn btn-link" type="button"><i class="fa fa-repeat"></i></button>')
+                //.text(gettext("Rotate Right"))
+                .attr("title","Rotate Right")
+                .appendTo("footer .toolbar .controls")
+                .on("click", $.proxy(function () {
+                    this.rotate();
+                }, this));
+        }
+
+        $('<button id="toggle-grid" class="btn btn-link" type="button"><i class="fa fa-th-large"></i></button>')
+            .attr("title","Page List")
+            .appendTo("footer .toolbar .controls")
+            .on("click", $.proxy(function () {
+                if (this.activeView == this.gridView) {
+                    this.openPageView();
+                } else {
+                    this.openGridView();
+                }
+            }, this));
+
+        if ($("html").hasClass("fullscreen")) {
+            $('<button id="toggle-fullscreen" class="btn btn-link" type="button"><i class="fa fa-expand"></i></button>')
+                .attr("title","Full Screen")
+                .appendTo("footer .toolbar .controls")
+                .on("click", function () {
+                    toggleFullscreen();
+                });
+        }
+
+        $('<button id="toggle-help" class="btn btn-link" type="button"><i class="fa fa-question"></i></button>')
+            .attr("title","Help")
+            .appendTo("footer .toolbar .controls")
+            .on("click", function () {
+                $("#help").toggle();
+            });
+
+        /* ***commonwealth changes (search add)*** */
+        if (config.fts) {
+            // IE8 doesn't support some methods used in jquery-deparam
+            var q = decodeURIComponent(document.location.search.split('ocr_q=')[1]); // $.deparam(document.location.search)['?ocr_q']
+
+            if (q && (q != 'undefined')) {
+                controller.searchText = this.setSearchText(q);
+            }
+
+            var $searchToggle = $('<a id="toggle-search" data-ajax-modal="trigger" class="btn btn-link"><i class="fa fa-search"></i></a>')
+                .attr("href", this.setSearchToggleHref())
+                .attr("title", "Search this work")
+                //.data("ajax_modal", "trigger") // not working!
+                .prependTo("footer .toolbar .controls");
+        }
+
+        $groupControl.on("change", function() {
+            controller.setGroup(parseInt($groupControl.val(), 10));
+        });
+
+        $indexControl.on("change", function() {
+            controller.setIndex(parseInt($indexControl.val(), 10));
+        });
+
+        $viewer.find("input.current-index").on("change", function() {
+            // This is actually less painful than trying to get <input type=number> to work cross-browser…
+            var val = parseInt(this.value, 10);
+            if (val == controller.currentIndex || isNaN(val) || val < 0 || val > controller.maxIndex) {
+                this.value = controller.currentIndex;
+                return false;
+            }
+
+            controller.setIndex(val);
+        });
+
+        $(document).on("keydown", $.proxy(function (evt) {
+            if ($help.is(':visible')) {
+                $help.hide();
+                return false;
+            }
+
+            // Allow views to override:
+            if (this.activeView.onKeydown) {
+                var res = this.activeView.onKeydown(evt);
+                if (typeof(res) != "undefined") {
+                    return res;
+                }
+            }
+
+            if (evt.metaKey || evt.altKey) {
+                if (evt.which == 37 || evt.which == 39) {
+                    this.rotate(evt.which == 37);
+                    return false;
+                } else {
+                    // Allow normal handling to avoid interfering with normal browser controls:
+                    return true;
+                }
+            }
+
+            // Global state changes:
+            switch (evt.which) {
+                case 80: // p
+                    $("#toggle-grid").trigger("click");
+                    return false;
+                case 81: // q
+                    $searchToggle.trigger("click");
+                    return false;
+                case 191: // ?
+                    $help.show();
+                    return false;
+                case 90: // z
+                    $("#toggle-seadragon").trigger("click");
+                    return false;
+                case 70: // f
+                    $("#toggle-fullscreen").trigger("click");
+                    return false;
+                case 27: // esc
+                    leaveFullscreen();
+                    return false;
+                case 32: // Space bar
+                    if (evt.shiftKey) {
+                        this.goToPreviousPage();
+                    } else {
+                        this.goToNextPage();
+                    }
+                    return false;
+
+                case 74: // j
+                case 34: // Page Down
+                    this.goToNextPage();
+                    return false;
+
+                case 75: // k
+                case 33: // Page Up
+                    this.goToPreviousPage();
+                    return false;
+
+                case 37: // left arrow
+                    this.goToPreviousPage();
+                    return false;
+
+                case 39: // right arrow
+                    this.goToNextPage();
+                    return false;
+            }
+
+            // Fall through to normal browser default handling:
+            return true;
+        }, this));
+
+        $help.on("click", function () {
+            $help.hide();
+        });
+
+        $viewer.on("goto-next-page", $.proxy(this.goToNextPage, this));
+        $viewer.on("goto-previous-page", $.proxy(this.goToPreviousPage, this));
+
+        $viewer.on("goto-page", function (evt, newGroup, newIndex) {
+            controller.setGroup(parseInt(newGroup, 10), parseInt(newIndex, 10));
+        });
+
+        /* *** commonwealth addition *** */
+        $viewer.on("goto-page-search", function (evt, newGroup, newIndex, query) {
+            controller.searchText = controller.setSearchText(query);
+            $searchToggle.attr("href", controller.setSearchToggleHref());
+            controller.setGroup(parseInt(newGroup, 10), parseInt(newIndex, 10));
+        });
+
+        /*
+         We offer two convenience functions for event handlers which increment the current rotation as
+         well as a way to set the current rotation directly:
+         */
+        $viewer.on("rotate-left", function () {
+            controller.rotate(true);
+        });
+        $viewer.on("rotate-right", function () {
+            controller.rotate();
+        });
+        $viewer.on("set-rotation", function (evt, degrees) {
+            controller.setRotation(degrees);
+        });
+
+        $viewer.on("page-changed", $.proxy(function () {
+            $groupControl.val(this.currentGroup);
+            $indexControl.val(this.currentIndex);
+            $viewer.find('input.current-index').attr('max', this.maxIndex).val(this.currentIndex);
+            $viewer.find(".max-index").text(this.maxIndex);
+            $indexControl.attr("max", this.maxIndex);
+        }, this));
+
+        $viewer.on("prefetch-adjacent-pages", $.proxy(function () {
+            this.activeView.prefetch();
+        }, this));
+
+        $window.on("resize", $.proxy(function () {
+            this.activeView.onResize();
+        }, this));
+
+        $viewer.on("open-seadragon", $.proxy(function () { this.openSeadragonView(); }, this));
+
+        // For efficiency we'll expose a variable which event handlers can use to decide whether to make an
+        // expensive jQuery call:
+
+        var headerHidden = false;
+        $viewer.on("hide-header", function () {
+            if (!headerHidden) {
+                headerHidden = true;
+                $header.stop(true, true).slideUp();
+            }
+        });
+        $viewer.on("show-header", function () {
+            if (headerHidden) {
+                headerHidden = false;
+                $header.stop(true, true).slideDown();
+            }
+        });
+
+        var footerHidden = false;
+        $viewer.on("hide-footer", $.proxy(function () {
+            // Don't hide the footer when the seadragon view is active as there's no way to restore it
+            // without using keyboard shortcuts:
+            if (!footerHidden && (this.activeView != this.seadragonView)) {
+                footerHidden = true;
+                $footer.stop(true, true).slideUp();
+            }
+        }, this));
+
+        $viewer.on("show-footer", function () {
+            if (footerHidden) {
+                footerHidden = false;
+                $footer.stop(true, true).slideDown();
+            }
+        });
+
+        var headerHeight = $header.height();
+
+        $viewer.on("mousemove", function (evt) {
+            if (evt.pageY < headerHeight * 2) {
+                $viewer.trigger("show-header");
+            } else if (evt.pageY > headerHeight * 3) {
+                $viewer.trigger("hide-header");
+            }
+        });
+
+        $viewer.on("hide-chrome", function () {
+            $viewer.trigger("hide-header");
+            $viewer.trigger("hide-footer");
+        });
+
+        $viewer.on("show-chrome", function () {
+            $viewer.trigger("show-header");
+            $viewer.trigger("show-footer");
+        });
+
+        $viewer.on("toggle-chrome", function () {
+            if (headerHidden || footerHidden) {
+                $viewer.trigger("show-chrome");
+            } else {
+                $viewer.trigger("hide-chrome");
+            }
+        });
+
+        $viewer.on("page-changed", function () {
+            $viewer.trigger("hide-header");
+        });
+
+        if (config.initialView == "grid") {
+            this.openGridView();
+        } else if (config.initialView == "seadragon") {
+            this.openSeadragonView();
+        } else {
+            this.openPageView();
+        }
+
+        this.updateViewer();
+    }
+
+    ViewController.prototype = {
+        generatePageUrl: function (group, index) {
+            // commonwealth changes (search add)
+            var url = this.config.pageUrlTemplate.replace('{group}', group).replace('{index}', index);
+
+            if (this.searchText) {
+                return "?ocr_q=" + encodeURIComponent(this.searchText) + url
+            } else {
+                return url;
+            }
+        },
+        generateWordCoordinatesUrl: function (group, index) {
+            return this.config.wordCoordinatesUrlTemplate.replace('{group}', group).replace('{index}', index);
+        },
+        generateImageUrl: function (group, index, maxEdge) {
+            return this.config.imageUrlTemplate.replace(/\{([^}]+)\}/g, function(match, name) {
+                switch (name) {
+                    case "group":
+                        return group;
+                    case "index":
+                        return index;
+                    case "height":
+                    case "width":
+                        return maxEdge;
+                }
+            });
+        },
+        generateDziUrl: function (group, index) {
+            return this.config.dziUrlTemplate.replace("{group}", group).replace("{index}", index);
+        },
+        setIndex: function (newIndex) {
+            if (newIndex < 1) {
+                newIndex = 1;
+            } else if (newIndex > this.maxIndex) {
+                newIndex = this.maxIndex;
+            }
+
+            if (newIndex == this.currentIndex) {
+                return;
+            }
+
+            this.currentIndex = newIndex;
+
+            this.updateViewer();
+        },
+        /* ***commonwealth changes*** */
+        generateThumbUrl: function (group, index) {
+            return this.config.thumbUrlTemplate.replace('{group}', group).replace('{index}', index);
+        },
+        setGroup: function (newGroup, newIndex) {
+            if (newGroup == this.currentGroup && (!newIndex || newIndex == this.currentIndex)) {
+                return;
+            }
+
+            this.currentGroup = newGroup;
+            this.currentIndex = !!newIndex ? newIndex : 1;
+            this.maxIndex = this.config.pageGroups[newGroup];
+
+            this.updateViewer();
+        },
+        updateViewer: function () {
+            // Update next / previous links:
+            if (this.currentIndex < this.maxIndex) {
+                $(".toolbar .page.next")
+                    .removeClass("disabled")
+                    .attr("href", this.generatePageUrl(this.currentGroup, this.currentIndex + 1));
+            } else {
+                $(".toolbar .page.next")
+                    .addClass("disabled")
+                    .removeAttr("href");
+            }
+
+            if (this.currentIndex > 1) {
+                $(".toolbar .page.previous")
+                    .removeClass("disabled")
+                    .attr("href", this.generatePageUrl(this.currentGroup, this.currentIndex - 1));
+            } else {
+                $(".toolbar .page.previous")
+                    .addClass("disabled")
+                    .removeAttr("href");
+            }
+
+            this.viewer.data({group: this.currentGroup, index: this.currentIndex});
+
+            window.history.replaceState(
+                {
+                    group: this.currentGroup,
+                    index: this.currentIndex
+                },
+                "Page " + this.currentIndex,
+                this.generatePageUrl(this.currentGroup, this.currentIndex)
+            );
+            this.activeView.update();
+            this.viewer.trigger("page-changed");
+            this.activeView.prefetch();
+        },
+        goToNextPage: function () {
+            var step = this.activeView.getPageCount(),
+                delta = this.maxIndex - this.currentIndex;
+
+            if (delta > 0) {
+                this.setIndex(this.currentIndex + step);
+            } else {
+                // In case chrome is hidden, display the nav so the user can see they're on the last page:
+                this.viewer.trigger("show-chrome");
+            }
+        },
+        goToPreviousPage: function () {
+            var step = this.activeView.getPageCount();
+
+            if (this.currentIndex > 1) {
+                this.setIndex(this.currentIndex - step);
+            } else {
+                // In case chrome is hidden, display the nav so the user can see they're on the first page:
+                this.viewer.trigger("show-chrome");
+            }
+        },
+        openPageView: function () {
+            if (this.activeView == this.pageView) {
+                return;
+            } else if (this.activeView) {
+                this.activeView.hide();
+            }
+
+            this.activeView = this.pageView;
+            this.pageView.show();
+            this.viewer.attr("data-active-view", "page").trigger("show-footer");
+        },
+        openGridView: function () {
+            if (this.activeView == this.gridView) {
+                return;
+            } else if (this.activeView) {
+                this.activeView.hide();
+            }
+            this.activeView = this.gridView;
+            this.activeView.show();
+            this.viewer.attr("data-active-view", "grid"); // *** commonwealth changes *** .trigger("hide-footer")
+        },
+        openSeadragonView: function () {
+            if (!this.seadragonView || this.activeView == this.seadragonView) {
+                return;
+            } else if (this.activeView) {
+                this.activeView.hide();
+            }
+
+            this.activeView = this.seadragonView;
+            this.activeView.show();
+            this.viewer.attr("data-active-view", "seadragon").trigger("show-footer");
+        },
+        rotate: function (reverse) {
+            this.setRotation(this.rotation + (reverse ? -90 : 90));
+        },
+        setRotation: function (degrees) {
+            this.rotation = degrees;
+            if (this.activeView && this.activeView.setRotation) {
+                this.activeView.setRotation(this.rotation);
+            }
+        },
+        /* *** commonwealth changes (search add) -- setSearchText preps ocr_q params for search *** */
+        setSearchText: function (text) {
+            return decodeURIComponent($.trim(text));
+        },
+        /* *** commonwealth changes (search add) -- setSearchToggleHref sets target of search control link *** */
+        setSearchToggleHref: function () {
+            return this.searchText ? this.config.ocrSearchPath + '?ocr_q=' + this.searchText : this.config.ocrSearchPath;
+        }
+    };
+
+    function PageView(controller, $container, config) {
+        this.controller = controller;
+        this.config = config;
+
+        var $pages = $("#pages"),
+            $currentPage = $pages.find(".current img").first(),
+            $nextPage = $('<img>'),
+            previousImages = [new Image(), new Image(), new Image()],
+            nextImages = [new Image(), new Image(), new Image()];
+
+        $currentPage.parent().clone().empty().removeClass("current").addClass("next")
+            .appendTo($pages)
+            .append($nextPage);
+
+        this.hide = function () {
+            $container.hide();
+        };
+
+        /* *** commonwealth changes *** */
+        this.show = function () {
+            var seadragon_toggle = $("#toggle-seadragon");
+            seadragon_toggle.attr("title","Zoom");
+            seadragon_toggle.find("i").attr("class", "fa fa-plus");
+            
+            $container.show();
+            this.update();
+        };
+
+        this.setRotation = function (degrees) {
+            // We set this explicitly here rather
+            $pages.css({
+                '-webkit-transform': 'rotate(' + degrees + 'deg)',
+                '-ms-transform':     'rotate(' + degrees + 'deg)',
+                'transform':         'rotate(' + degrees + 'deg)'
+            });
+
+            this.checkViewportConstraints();
+        };
+
+        this.getPageCount = function () {
+            return $pages.find("img:visible").length;
+        };
+
+        this.update = function() {
+            // Cycle the sources to avoid issues with the load event not firing on cache hits:
+            var newSrc = controller.generateImageUrl(controller.currentGroup, controller.currentIndex,
+                config.maxPageEdge);
+            if (newSrc != $currentPage.attr("src")) {
+                $pages.find("img").fadeTo(200, 0.3);
+                $currentPage.attr("src", newSrc);
+            }
+
+            /*
+             We'll set our own dirty flag because we can't rely on the HTML5 img.complete property
+             when an error occurs while loading an image:
+
+             https://bugs.webkit.org/show_bug.cgi?id=28832
+             https://bugzilla.mozilla.org/show_bug.cgi?id=513541
+             */
+            $nextPage.hide()
+                .attr("src", this.config.placeholderSrc)
+                .data("dirty", true);
+
+            if ((controller.maxIndex - controller.currentIndex) > 0) {
+                $nextPage.attr("src", controller.generateImageUrl(controller.currentGroup,
+                    controller.currentIndex + 1,
+                    config.maxPageEdge));
+            } else {
+                $nextPage.hide();
+            }
+
+            this.setRotation(this.controller.rotation);
+            this.updateSearch();
+        };
+
+        this.checkViewportConstraints = function() {
+            if ($nextPage.data("dirty")) {
+                return;
+            }
+
+            var lastPage = ((this.controller.maxIndex - this.controller.currentIndex) < 1);
+
+            /* ***commonwealth changes*** */
+            var firstPage = (this.controller.currentIndex == 1);
+
+            var overflow = false;
+
+            // CSS transforms rotate display but not the DOM element's height/width:
+            if (this.controller.rotation % 180 === 0) {
+                overflow = ($nextPage.outerWidth() + $currentPage.outerWidth() + 20 >= $window.width());
+            } else {
+                overflow = ($nextPage.outerHeight() + $currentPage.outerHeight() + 20 >= $window.height());
+            }
+
+            /* ***commonwealth changes*** */
+            /* don't show $nextPage if viewing the first page */
+            /* (which is usually the jacket/cover, so this keeps gutter aligned properly) */
+            if (firstPage || lastPage || overflow) {
+                $nextPage.hide();
+            } else {
+                $nextPage.show()
+                    .stop(true, false)
+                    .fadeTo(200, 1.0);
+            }
+        };
+
+        this.onResize = function () {
+            return this.checkViewportConstraints();
+        };
+
+        this.prefetch = function () {
+            for (var i = 0; i < 3; i++) {
+                nextImages[i].src = controller.generateImageUrl(
+                    controller.currentGroup,
+                    Math.min(controller.maxIndex, controller.currentIndex + 1 + i),
+                    config.maxPageEdge
+                );
+            }
+
+            for (i = 0; i < 3; i++) {
+                previousImages[i].src = controller.generateImageUrl(
+                    controller.currentGroup,
+                    Math.max(1, controller.currentIndex - (1 + 1)),
+                    config.maxPageEdge
+                );
+            }
+        };
+
+        /* commonwealth changes (search add) */
+        this.updateSearch = function () {
+            if (!config.fts || !controller.searchText) { // !controller.search || !controller.search.query) {
+                return;
+            }
+
+            $pages.find(".highlighted").remove();
+
+            var terms = this.processTerms(controller.searchText); // controller.search.terms;
+
+            this.applySearchHighlighting(controller.currentGroup, controller.currentIndex, terms);
+            if (controller.currentIndex < controller.maxIndex) {
+                this.applySearchHighlighting(controller.currentGroup, controller.currentIndex + 1, terms);
+            }
+        };
+
+        this.applySearchHighlighting = function (group, index, terms) {
+            WDL.ajaxRetry({
+                url: controller.generateWordCoordinatesUrl(group, index, terms),
+                success: function (data) {
+                    if (group != controller.currentGroup ||
+                        (index != controller.currentIndex && index != controller.currentIndex + 1)) {
+                        return;
+                    }
+
+                    var $page = index == controller.currentIndex ? $currentPage : $nextPage;
+
+                    var master_height = data.height,
+                        master_width = data.width;
+
+                    $.each(data.words, function (k, v) {
+                        if (!WDL.Search.inTerms(k, terms)) {
+                            return;
+                        }
+
+                        // Response format is x1, y1, x2, y2
+                        for (var i=0; i < v.length; i++) {
+                            var coords = v[i];
+
+                            $('<div class="highlighted">').css({
+                                "left":     WDL.Search.formatPercentage(coords[0] / master_width),
+                                "top":      WDL.Search.formatPercentage(Math.max(0, (coords[3] / master_height) - 0.01)),
+                                "right":    WDL.Search.formatPercentage(1.0 - coords[2] / master_width),
+                                "bottom":   WDL.Search.formatPercentage(1.0 - Math.min(1.0, (coords[1] / master_height) + 0.01))
+                            }).insertAfter($page);
+                        }
+                    });
+                }
+            });
+        };
+
+        /* commonwealth changes (search add) - taken from WDL.Search */
+        this.processTerms = function (text) {
+            var terms = [text];
+            var mergeterms = $.merge(terms, $.map(terms[0].split(/\s/), function (i) {
+                return $.merge(i, $.map(i.split(/b/), $.trim));
+            }));
+
+            var terms_output = $.grep(mergeterms, function (i) {
+                return $.trim(i).length > 0;
+            });
+            return terms_output;
+        };
+
+        $currentPage.on("load", $.proxy(function () {
+            $currentPage.stop(true, false).fadeTo(100, 1.0);
+            $window.scrollTop(0);
+            this.checkViewportConstraints();
+        }, this));
+
+        $nextPage
+            .on("load", $.proxy(function () {
+                $nextPage.data("dirty", false);
+                this.checkViewportConstraints();
+            }, this))
+            .on("error", function () {
+                // TODO: Consider trying a reload?
+                $nextPage.data("dirty", false);
+            });
+    }
+
+    function SeadragonView(controller, $container) {
+        this.controller = controller;
+        this.seadragon = null;
+
+        this.getPageCount = function () {
+            return 1;
+        };
+
+        this.onResize = function () {
+            $container.css({
+                height: $window.height()
+            });
+        };
+
+        /* ***commonwealth changes** */
+        this.hide = function () {
+            // $("#toggle-seadragon").text(gettext("Zoom"));
+            var toggle = $("#toggle-seadragon");
+            toggle.attr("title","Zoom");
+            toggle.find("i").attr("class", "fa fa-plus");
+
+            if (this.seadragon) {
+                this.seadragon.close();
+                this.seadragon.destroy();
+                this.seadragon = null;
+            }
+
+            $container.hide();
+            $window.off("resize", this.onResize);
+        };
+
+        /* ***commonwealth changes** */
+        this.show = function () {
+            // $("#toggle-seadragon").text(gettext("Read"));
+            var toggle = $("#toggle-seadragon");
+            toggle.attr("title","Read");
+            toggle.find("i").attr("class", "fa fa-book");
+
+            if (this.seadragon) {
+                this.seadragon.close();
+                this.seadragon.destroy();
+                this.seadragon = null;
+            }
+
+            // We'll work around Internet Explorer < 11's broken height:100% calculation
+            // by displaying now to force the height to match the window:
+            $container.show();
+            this.onResize();
+            $window.on("resize", this.onResize);
+            this.update();
+        };
+
+        this.update = function () {
+            var dziUrl = this.controller.generateDziUrl(this.controller.currentGroup,
+                this.controller.currentIndex);
+
+            if (!this.seadragon) {
+                this.initializeSeadragon(dziUrl);
+            } else {
+                this.seadragon.open(dziUrl);
+            }
+        };
+
+        // TODO: find a better way to consolidate this with the page-turner implementation:
+
+        this.zoomIn = $.proxy(function () {
+            if (!this.seadragon.viewport) {
+                return; // IE8
+            }
+            this.seadragon.viewport.zoomBy(this.seadragon.zoomPerClick / 1.0);
+        }, this);
+
+        this.zoomOut = $.proxy(function () {
+            if (!this.seadragon.viewport) {
+                return; // IE8
+            }
+            this.seadragon.viewport.zoomBy(1.0 / this.seadragon.zoomPerClick);
+        }, this);
+
+        this.goHome = $.proxy(function () {
+            if (!this.seadragon.viewport) {
+                return; // IE8
+            }
+            this.seadragon.viewport.goHome();
+        }, this);
+
+        this.panViewport = $.proxy(function (direction) {
+            if (!this.seadragon.viewport) {
+                return; // IE8
+            }
+
+            var bounds = this.seadragon.viewport.getBounds();
+            var delta = new OpenSeadragon.Point();
+
+            switch (direction) {
+                case "down":
+                    delta.y = bounds.height * 0.2;
+                    break;
+                case "up":
+                    delta.y = bounds.height * -0.2;
+                    break;
+                case "left":
+                    delta.x = bounds.width * -0.2;
+                    break;
+                case "right":
+                    delta.x = bounds.width * 0.2;
+                    break;
+            }
+
+            this.seadragon.viewport.panBy(delta);
+        }, this);
+
+        this.setRotation = $.proxy(function (degrees) {
+            if (!this.seadragon || !this.seadragon.viewport) {
+                return;
+            }
+
+            // Until https://github.com/openseadragon/openseadragon/issues/194 lands we can't support
+            // arbitrary rotation:
+            this.seadragon.viewport.setRotation(degrees - (degrees % 90));
+        });
+
+        /* ***commonwealth changes*** */
+        this.initializeSeadragon = function (dziUrl) {
+            var seadragon = new OpenSeadragon({
+                id: $container.attr("id"),
+                prefixUrl: this.controller.config.seadragonPrefixUrl,
+                navImages: this.controller.config.seadragonNavImages,
+                tileSources: dziUrl,
+                autoHideControls: false,
+                immediateRender: navigator.userAgent.match(/mobile/i),
+                showNavigator: true,
+                navigatorPosition: 'TOP_RIGHT',
+                showNavigationControl: true,
+                navigationControlAnchor: OpenSeadragon.ControlAnchor.BOTTOM_RIGHT,
+                showFullPageControl: false
+            });
+
+            this.seadragon = seadragon;
+
+            /* ***commonwealth changes*** prefer to use OpenSeadragon options to set controls */
+            /*
+             var controlAnchor,
+             controls = [
+             $("<a>").text(gettext("Zoom In")).addClass("control zoom-in").click(this.zoomIn),
+             $("<a>").text(gettext("Zoom Out")).addClass("control zoom-out").click(this.zoomOut),
+             $("<a>").text(gettext("Go Home")).addClass("control home").click(this.goHome)
+             ];
+
+             try {
+             controlAnchor = this.controller.config.openSeadragon.controlAnchor;
+             } catch (e) {
+             controlAnchor = OpenSeadragon.ControlAnchor.BOTTOM_RIGHT;
+             }
+
+             for (var i=0; i < controls.length; i++) {
+             seadragon.addControl(controls[i].get(0), {anchor: controlAnchor});
+             }
+             */
+            // Make UI transitions more obvious by zooming in when the viewer first loads:
+            var initialZoom = $.proxy(function () {
+                seadragon.removeHandler("open", initialZoom);
+                this.zoomIn();
+            }, this);
+            seadragon.addHandler("open", initialZoom);
+
+            seadragon.addHandler("open", $.proxy(function () {
+                this.setRotation(this.controller.rotation);
+            }, this));
+        };
+
+        this.onKeydown = function (evt) {
+            switch (evt.which) {
+                case 187: //
+                case 61: // for firefox
+                    this.zoomIn();
+                    return false;
+                case 189: // -
+                case 173: // - on Firefox
+                    this.zoomOut();
+                    return false;
+                case 72: // h
+                case 220: // \
+                    this.goHome();
+                    return false;
+                case 37: // Left Arrow: pan Left
+                    this.panViewport('left');
+                    return false;
+                case 39: // Right Arrow: pan Right
+                    this.panViewport('right');
+                    return false;
+                case 38: // Up Arrow: pan Up
+                    this.panViewport('up');
+                    return false;
+                case 40: // Down Arrow: pan Down
+                    this.panViewport('down');
+                    return false;
+            }
+        };
+
+        this.prefetch = function () {};
+    }
+
+    function GridView(controller, $container, config) {
+        var thumbnailUrls = [],
+        // Cache for performance in scroll handler:
+            container = $container.get(0);
+
+        var gridScrollHandler = $.throttle(50, function () {
+            var scrollTop = container.scrollTop,
+                scrollBottom = scrollTop + container.offsetHeight,
+                thumbnails;
+
+            if (container.querySelectorAll) {
+                thumbnails = container.querySelectorAll(".placeholder");
+            } else {
+                thumbnails = container.children;
+            }
+
+            for (var i = thumbnails.length - 1; i >= 0; i--){
+                var thumb = thumbnails[i];
+
+                if ((thumb.offsetTop + thumb.offsetHeight) >= scrollTop && thumb.offsetTop <= scrollBottom) {
+                    var idx = thumb.id.replace(/^index-/, '');
+                    thumb.style.backgroundImage = "url(" + thumbnailUrls[idx] + ")";
+                    thumb.className = thumb.className.replace('placeholder', '');
+                }
+            }
+        });
+
+        /* *** commonwealth changes *** */
+        this.show = function () {
+            var seadragon_toggle = $("#toggle-seadragon");
+            seadragon_toggle.attr("title","Read");
+            seadragon_toggle.find("i").attr("class", "fa fa-book");
+
+            var container = $container.empty().get(0);
+
+            for (var i=1; i <= controller.maxIndex; i++) {
+                var div = document.createElement("div");
+                div.id = "index-" + i;
+                div.className = "placeholder";
+                div.appendChild(document.createTextNode(i));
+                thumbnailUrls[i] = controller.generateThumbUrl(controller.currentGroup,
+                    i);
+                div.style.backgroundImage = "url(" + config.placeholderSrc + ")";
+                container.appendChild(div);
+            }
+
+            $container.show();
+            this.update();
+        };
+
+        this.update = function () {
+            var $pages = $container.scrollTop(0).children("div"),
+            // Note switch from page number to zero-based index:
+                $currentPage = $pages.eq(controller.currentIndex - 1);
+
+            /* jshint -W101 */
+            $container.scrollTop($currentPage.offset().top - ($window.height() / 2) + ($currentPage.height() / 2));
+            /* jshint +W101 */
+
+            $pages.not($currentPage).filter(".current").removeClass("current");
+            $currentPage.addClass("current");
+
+            $container.on("scroll", gridScrollHandler);
+
+            $container.trigger("scroll");
+
+            // this.updateSearch(); // not showing search results in grid view for now
+        };
+
+        // not showing search results in grid view for now
+        /*
+        this.updateSearch = function () {
+            if (!config.fts || !controller.search || !controller.search.query) {
+                return;
+            }
+
+            var $pages = $container.children();
+
+            $pages.filter(".hit").removeClass("hit");
+
+            var results = controller.search.results;
+            for (var i = 0; i < results.length; i++) {
+                var result = results[i];
+                if (result[0] == controller.currentGroup) {
+                    // Note conversion from page numbers to zero-based index:
+                    $pages.eq(result[1] - 1).addClass("hit");
+                }
+            }
+        };
+        */
+
+        this.hide = function () {
+            $container.off("scroll", gridScrollHandler);
+            $container.hide().empty();
+        };
+
+        this.onResize = function () {
+            gridScrollHandler();
+        };
+
+        function scrollDown() {
+            $container.scrollTop($container.scrollTop() + $window.height() / 2);
+        }
+
+        function scrollUp() {
+            $container.scrollTop($container.scrollTop() - $window.height() / 2);
+        }
+
+        this.onKeydown = function (evt) {
+            switch (evt.which) {
+                case 32: // Space bar
+                    if (evt.shiftKey) {
+                        scrollUp();
+                    } else {
+                        scrollDown();
+                    }
+                    return false;
+                case 74: // j
+                case 34: // Page Down
+                    scrollDown();
+                    return false;
+                case 75: // k
+                case 33: // Page Up
+                    scrollUp();
+                    return false;
+            }
+        };
+
+        this.prefetch = function () {};
+
+        $container.on("click", "div", function () {
+            var newPage = this.id.match(/^index-(\d+)/);
+            if (newPage) {
+                controller.openPageView();
+                controller.setIndex(parseInt(newPage[1], 10));
+            }
+        });
+    }
+}(jQuery));