Code cleanup with hints from JSHint.

src/js/libpannellum.js

@@ -34,7 +34,7 @@ function Renderer(container, image, imageType) {
 
     // Default argument for image type
     this.imageType = 'equirectangular';
-    if(typeof imageType != 'undefined'){
+    if (typeof imageType != 'undefined'){
         this.imageType = imageType;
     }
 
@@ -74,7 +74,7 @@ function Renderer(container, image, imageType) {
         // Create vertex shader
         var vs = gl.createShader(gl.VERTEX_SHADER);
         var vertexSrc = v;
-        if(this.imageType == 'multires') {
+        if (this.imageType == 'multires') {
             vertexSrc = vMulti;
         }
         gl.shaderSource(vs, vertexSrc);
@@ -83,7 +83,7 @@ function Renderer(container, image, imageType) {
         // Create fragment shader
         var fs = gl.createShader(gl.FRAGMENT_SHADER);
         var fragmentSrc = fragEquirectangular;
-        if(this.imageType == 'cubemap') {
+        if (this.imageType == 'cubemap') {
             glBindType = gl.TEXTURE_CUBE_MAP;
             fragmentSrc = fragCube;
         } else if (this.imageType == 'multires') {
@@ -113,7 +113,7 @@ function Renderer(container, image, imageType) {
         program.texCoordLocation = gl.getAttribLocation(program, 'a_texCoord');
         gl.enableVertexAttribArray(program.texCoordLocation);
         
-        if(this.imageType != 'multires') {
+        if (this.imageType != 'multires') {
             // Provide texture coordinates for rectangle
             program.texCoordBuffer = gl.createBuffer();
             gl.bindBuffer(gl.ARRAY_BUFFER, program.texCoordBuffer);
@@ -142,7 +142,7 @@ function Renderer(container, image, imageType) {
             gl.bindTexture(glBindType, program.texture);
             
             // Upload images to texture depending on type
-            if(this.imageType == "cubemap") {
+            if (this.imageType == 'cubemap') {
                 // Load all six sides of the cube map
                 gl.texImage2D(gl.TEXTURE_CUBE_MAP_POSITIVE_X, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.image[1]);
                 gl.texImage2D(gl.TEXTURE_CUBE_MAP_NEGATIVE_X, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, this.image[3]);
@@ -163,7 +163,7 @@ function Renderer(container, image, imageType) {
             
         } else {
             // Look up vertex coordinates location
-            program.vertPosLocation = gl.getAttribLocation(program, "a_vertCoord");
+            program.vertPosLocation = gl.getAttribLocation(program, 'a_vertCoord');
             gl.enableVertexAttribArray(program.vertPosLocation);
             
             // Create buffers
@@ -180,9 +180,9 @@ function Renderer(container, image, imageType) {
             gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array([0,1,2,0,2,3]), gl.STATIC_DRAW);
             
             // Find uniforms
-            program.perspUniform = gl.getUniformLocation(program, "u_perspMatrix");
-            program.cubeUniform = gl.getUniformLocation(program, "u_cubeMatrix");
-            //program.colorUniform = gl.getUniformLocation(program, "u_color");
+            program.perspUniform = gl.getUniformLocation(program, 'u_perspMatrix');
+            program.cubeUniform = gl.getUniformLocation(program, 'u_cubeMatrix');
+            //program.colorUniform = gl.getUniformLocation(program, 'u_color');
             
             program.level = -1;
             
@@ -192,11 +192,11 @@ function Renderer(container, image, imageType) {
         }
         
         // Check if there was an error
-        if (gl.getError() != 0) {
+        if (gl.getError() !== 0) {
             console.log('Error: something went wrong with WebGL!');
             throw 'webgl error';
         }
-    }
+    };
 
     this.render = function(pitch, yaw, hfov) {
         // If no WebGL
@@ -211,7 +211,7 @@ function Renderer(container, image, imageType) {
             return;
         }
         
-        if(this.imageType != 'multires') {
+        if (this.imageType != 'multires') {
             // Calculate focal length from vertical field of view
             var vfov = 2 * Math.atan(Math.tan(hfov/2) / (this.canvas.width / this.canvas.height));
             var focal = 1 / Math.tan(vfov / 2);
@@ -253,7 +253,7 @@ function Renderer(container, image, imageType) {
             var vertices = this.createCube();
             var sides = ['f', 'b', 'u', 'd', 'l', 'r'];
             for ( var s = 0; s < 6; s++ ) {
-                var vtmp = vertices.slice(s * 12, s * 12 + 12)
+                var vtmp = vertices.slice(s * 12, s * 12 + 12);
                 var ntmp = new MultiresNode(vtmp, sides[s], 1, 0, 0, this.image.fullpath);
                 this.testMultiresNode(rotPersp, ntmp, pitch, yaw, hfov);
             }
@@ -261,15 +261,15 @@ function Renderer(container, image, imageType) {
             // Only process one tile per frame to improve responsiveness
             for ( var i = 0; i < program.currentNodes.length; i++ ) {
                 if (!program.currentNodes[i].texture) {
-                    setTimeout(this.processNextTile(program.currentNodes[i], pitch, yaw, hfov), 0);
+                    setTimeout(this.processNextTile(program.currentNodes[i]), 0);
                     break;
                 }
             }
             
             // Draw tiles
-            this.multiresDraw()
+            this.multiresDraw();
         }
-    }
+    };
     
     this.isLoading = function() {
         if (gl && this.imageType == 'multires') {
@@ -280,7 +280,7 @@ function Renderer(container, image, imageType) {
             }
         }
         return false;
-    }
+    };
     
     this.multiresNodeSort = function(a, b) {
         // Base tiles are always first
@@ -293,7 +293,7 @@ function Renderer(container, image, imageType) {
         
         // Higher timestamp first
         return b.timestamp - a.timestamp;
-    }
+    };
     
     this.multiresNodeRenderSort = function(a, b) {
         // Lower zoom levels first
@@ -303,7 +303,7 @@ function Renderer(container, image, imageType) {
         
         // Lower distance from center first
         return a.diff - b.diff;
-    }
+    };
     
     this.multiresDraw = function() {
         if (!program.drawInProgress) {
@@ -329,7 +329,7 @@ function Renderer(container, image, imageType) {
             }
         }
         program.drawInProgress = false;
-    }
+    };
 
     function MultiresNode(vertices, side, level, x, y, path) {
         this.vertices = vertices;
@@ -378,12 +378,12 @@ function Renderer(container, image, imageType) {
             if (node.level < program.level) {
                 var cubeSize = this.image.cubeResolution / Math.pow(2, this.image.maxLevel - node.level);
                 var numTiles = Math.ceil(cubeSize / this.image.tileResolution) - 1;
-                doubleTileSize = cubeSize % this.image.tileResolution * 2;
+                var doubleTileSize = cubeSize % this.image.tileResolution * 2;
                 var lastTileSize = (cubeSize * 2) % this.image.tileResolution;
-                if (lastTileSize == 0) {
+                if (lastTileSize === 0) {
                     lastTileSize = this.image.tileResolution;
                 }
-                if (doubleTileSize == 0) {
+                if (doubleTileSize === 0) {
                     doubleTileSize = this.image.tileResolution * 2;
                 }
                 var f = 0.5;
@@ -392,7 +392,6 @@ function Renderer(container, image, imageType) {
                 }
                 var i = 1.0 - f;
                 var children = [];
-                var v = node.vertices;
                 var vtmp, ntmp;
                 var f1 = f, f2 = f, f3 = f, i1 = i, i2 = i, i3 = i;
                 // Handle non-symmetric tiles
@@ -473,17 +472,17 @@ function Renderer(container, image, imageType) {
                 }
             }
         }
-    }
+    };
 
     this.setImage = function(image) {
         this.image = image;
         this.init();
-    }
+    };
     
     this.setCanvas = function(canvas) {
         this.canvas = canvas;
         this.init();
-    }
+    };
     
     this.createCube = function() {
         return [-1,  1, -1,  1,  1, -1,  1, -1, -1, -1, -1, -1, // Front face
@@ -493,7 +492,7 @@ function Renderer(container, image, imageType) {
                 -1,  1,  1, -1,  1, -1, -1, -1, -1, -1, -1,  1, // Left face
                  1,  1, -1,  1,  1,  1,  1, -1,  1,  1, -1, -1  // Right face
         ];
-    }
+    };
     
     this.identityMatrix3 = function() {
         return [
@@ -501,7 +500,7 @@ function Renderer(container, image, imageType) {
             0, 1, 0,
             0, 0, 1
         ];
-    }
+    };
     
     // angle in radians
     this.rotateMatrix = function(m, angle, axis) {
@@ -521,7 +520,7 @@ function Renderer(container, image, imageType) {
                 c*m[6] - s*m[8], m[7], c*m[8] + s*m[6]
             ];
         }
-    }
+    };
     
     this.makeMatrix4 = function(m) {
         return [
@@ -530,7 +529,7 @@ function Renderer(container, image, imageType) {
             m[6], m[7], m[8],    0,
                0,    0,    0,    1
         ];
-    }
+    };
     
     this.transposeMatrix4 = function(m) {
         return [
@@ -538,8 +537,8 @@ function Renderer(container, image, imageType) {
             m[ 1], m[ 5], m[ 9], m[13],
             m[ 2], m[ 6], m[10], m[14],
             m[ 3], m[ 7], m[11], m[15]
-        ]
-    }
+        ];
+    };
     
     this.makePersp = function(hfov, aspect, znear, zfar) {
         var fovy = 2 * Math.atan(Math.tan(hfov/2) * this.canvas.height / this.canvas.width);
@@ -550,7 +549,7 @@ function Renderer(container, image, imageType) {
                    0,   0,  (zfar+znear)/(znear-zfar), (2*zfar*znear)/(znear-zfar),
                    0,   0, -1,  0
         ];
-    }
+    };
     
     this.processLoadedTexture = function(img, tex) {
         gl.bindTexture(gl.TEXTURE_2D, tex);
@@ -560,9 +559,9 @@ function Renderer(container, image, imageType) {
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
         gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
         gl.bindTexture(gl.TEXTURE_2D, null);
-    }
+    };
     
-    this.processNextTile = function(node, pitch, yaw, hfov) {
+    this.processNextTile = function(node) {
         if (!node.texture) {
         node.texture = gl.createTexture();
         node.image = new Image();
@@ -571,10 +570,10 @@ function Renderer(container, image, imageType) {
         node.image.onload = function() {
             self.processLoadedTexture(node.image, node.texture);
             node.textureLoaded = true;
-        }
+        };
         node.image.src = node.path + '.' + this.image.extension;
         }
-    }
+    };
     
     this.checkZoom = function(hfov) {
         // Focal length
@@ -594,7 +593,7 @@ function Renderer(container, image, imageType) {
         
         // Apply change
         program.level = newLevel;
-    }
+    };
     
     // perspective matrix, rotation matrix
     this.rotatePersp = function(p, r) {
@@ -604,7 +603,7 @@ function Renderer(container, image, imageType) {
             p[10]*r[8], p[10]*r[9], p[10]*r[10], p[11],
                  -r[8],      -r[9],      -r[10],     0
         ];
-    }
+    };
     
     // rotated perspective matrix, vec3
     this.applyRotPerspToVec = function(m, v) {
@@ -614,7 +613,7 @@ function Renderer(container, image, imageType) {
             m[11] + m[ 8]*v[0] + m[ 9]*v[1] + m[10]*v[2],
                     m[12]*v[0] + m[13]*v[1] + m[14]*v[2]
         ];
-    }
+    };
     
     this.checkInView = function(m, v) {
         var vpp = this.applyRotPerspToVec(m, v);
@@ -634,7 +633,7 @@ function Renderer(container, image, imageType) {
         if ( winZ < 0 || winZ > 1 )
             ret[2] = 1;
         return ret;
-    }
+    };
     
     this.checkSquareInView = function(m, v) {
         var check1 = this.checkInView(m, v.slice(0, 3));
@@ -648,7 +647,7 @@ function Renderer(container, image, imageType) {
             return false;
         
         return true;
-    }
+    };
 }
 
 // Vertex shader for equirectangular and cube
@@ -795,6 +794,6 @@ return {
     renderer: function(canvas, image, imagetype) {
         return new Renderer(canvas, image, imagetype);
     }
-}
+};
 
 })(window, document);

src/js/pannellum.js

@@ -25,18 +25,36 @@
 document.addEventListener('contextmenu', onRightClick, false);
 
 // Declare variables
-var config, tourConfig = {}, configFromURL, popoutMode = false, renderer,
-    isUserInteracting = false, onMouseDownMouseX = 0, onMouseDownMouseY = 0,
-    onMouseDownYaw = 0, onMouseDownPitch = 0, phi = 0, theta = 0,
-    keysDown = new Array(10), fullWindowActive = false, loaded = false,
-    error = false, isTimedOut = false, listenersAdded = false,
-    about_box = document.getElementById('about_box'),
-    canvas = document.getElementById('canvas'), panoImage, prevTime,
+var config,
+    tourConfig = {},
+    configFromURL,
+    popoutMode = false,
+    renderer,
+    isUserInteracting = false,
+    onPointerDownPointerX = 0,
+    onPointerDownPointerY = 0,
+    onPointerDownYaw = 0,
+    onPointerDownPitch = 0,
+    keysDown = new Array(10),
+    fullWindowActive = false,
+    loaded = false,
+    error = false,
+    isTimedOut = false,
+    listenersAdded = false,
+    canvas = document.getElementById('canvas'),
+    panoImage,
+    prevTime,
     hotspotsCreated = false;
 
 var defaultConfig = {
-    hfov: 100, pitch: 0, yaw: 0, haov: 360, vaov: 180, voffset: 0,
-    autoRotate: false, type: 'equirectangular'
+    hfov: 100,
+    pitch: 0,
+    yaw: 0,
+    haov: 360,
+    vaov: 180,
+    voffset: 0,
+    autoRotate: false,
+    type: 'equirectangular'
 };
 
 // Process options
@@ -45,13 +63,13 @@ processOptions();
 
 // Initialize viewer
 function init() {
-    if(config.type == 'cubemap') {
-        panoImage = new Array();
-        for(var i = 0; i < 6; i++) {
+    if (config.type == 'cubemap') {
+        panoImage = [];
+        for (var i = 0; i < 6; i++) {
             panoImage.push(new Image());
-            panoImage[i].crossOrigin = "anonymous";
+            panoImage[i].crossOrigin = 'anonymous';
         }
-    } else if(config.type == 'multires') {
+    } else if (config.type == 'multires') {
         var c = JSON.parse(JSON.stringify(config.multiRes));    // Deep copy
         if (config.basePath) {
             c.basePath = config.basePath + config.multiRes.basePath;
@@ -61,14 +79,14 @@ function init() {
         panoImage = c;
     } else {
         panoImage = new Image();
-        panoImage.crossOrigin = "anonymous";
+        panoImage.crossOrigin = 'anonymous';
     }
     
     function onImageLoad() {
         renderer = new libpannellum.renderer(document.getElementById('container'), panoImage, config.type);
         
         // Only add event listeners once
-        if(!listenersAdded) {
+        if (!listenersAdded) {
             listenersAdded = true;
             document.addEventListener('mousedown', onDocumentMouseDown, false);
             document.addEventListener('mousemove', onDocumentMouseMove, false);
@@ -95,22 +113,21 @@ function init() {
         }
         
         renderInit();
-        var t = setTimeout('isTimedOut = true', 500);
+        setTimeout(function(){isTimedOut = true;}, 500);
     }
     
     // Configure image loading
-    if(config.type == "cubemap") {
+    if (config.type == 'cubemap') {
         // Quick loading counter for synchronous loading
         var itemsToLoad = 6;
-        function loadCounter() {
-            itemsToLoad--;
-            if(itemsToLoad == 0) {
-                onImageLoad();
-            }
-        }
         
-        for(var i = 0; i < panoImage.length; i++) {
-            panoImage[i].onload = loadCounter;
+        for (var i = 0; i < panoImage.length; i++) {
+            panoImage[i].onload = function() {
+                itemsToLoad--;
+                if (itemsToLoad === 0) {
+                    onImageLoad();
+                }
+            };
             var p = config.cubeMap[i];
             if (config.basePath) {
                 p = config.basePath + p;
@@ -119,7 +136,7 @@ function init() {
             }
             panoImage[i].src = p;
         }
-    } else if(config.type == "multires") {
+    } else if (config.type == 'multires') {
         onImageLoad();
     } else {
         panoImage.onload = onImageLoad;
@@ -180,12 +197,12 @@ function onDocumentMouseMove(event) {
     if (isUserInteracting) {
         //TODO: This still isn't quite right
         config.yaw = ((Math.atan(onPointerDownPointerX / canvas.width * 2 - 1) - Math.atan(event.clientX / canvas.width * 2 - 1)) * 180 / Math.PI * config.hfov / 90) + onPointerDownYaw;
-        vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
+        var vfov = 2 * Math.atan(Math.tan(config.hfov/360*Math.PI) * canvas.height / canvas.width) * 180 / Math.PI;
         config.pitch = ((Math.atan(event.clientY / canvas.height * 2 - 1) - Math.atan(onPointerDownPointerY / canvas.height * 2 - 1)) * 180 / Math.PI * vfov / 90) + onPointerDownPitch;
     }
 }
 
-function onDocumentMouseUp(event) {
+function onDocumentMouseUp() {
     isUserInteracting = false;
     document.getElementById('page').className = 'grab';
 }
@@ -207,7 +224,7 @@ function onDocumentTouchMove(event) {
     animate();
 }
 
-function onDocumentTouchEnd(event) {
+function onDocumentTouchEnd() {
     // Do nothing for now
 }
 
@@ -236,15 +253,15 @@ function onDocumentKeyPress(event) {
     config.autoRotate = false;
     
     // Record key pressed
-    keynumber = event.keycode;
-    if(event.which) {
+    var keynumber = event.keycode;
+    if (event.which) {
         keynumber = event.which;
     }
     
     // If escape key is pressed
-    if(keynumber == 27) {
+    if (keynumber == 27) {
         // If in full window / popout mode
-        if(fullWindowActive || popoutMode) {
+        if (fullWindowActive || popoutMode) {
             toggleFullWindow();
         }
     } else {
@@ -254,7 +271,7 @@ function onDocumentKeyPress(event) {
 }
 
 function clearKeys() {
-    for(i = 0; i < 10; i++) {
+    for (var i = 0; i < 10; i++) {
         keysDown[i] = false;
     }
 }
@@ -264,8 +281,8 @@ function onDocumentKeyUp(event) {
     event.preventDefault();
     
     // Record key released
-    keynumber = event.keycode;
-    if(event.which) {
+    var keynumber = event.keycode;
+    if (event.which) {
         keynumber = event.which;
     }
     
@@ -278,56 +295,56 @@ function changeKey(keynumber, value) {
     switch(keynumber) {
         // If minus key is released
         case 109: case 189: case 17:
-            if(keysDown[0] != value) { keyChanged = true; }
+            if (keysDown[0] != value) { keyChanged = true; }
             keysDown[0] = value; break;
         
         // If plus key is released
         case 107: case 187: case 16:
-            if(keysDown[1] != value) { keyChanged = true; }
+            if (keysDown[1] != value) { keyChanged = true; }
             keysDown[1] = value; break;
         
         // If up arrow is released
         case 38:
-            if(keysDown[2] != value) { keyChanged = true; }
+            if (keysDown[2] != value) { keyChanged = true; }
             keysDown[2] = value; break;
         
         // If "w" is released
         case 87:
-            if(keysDown[6] != value) { keyChanged = true; }
+            if (keysDown[6] != value) { keyChanged = true; }
             keysDown[6] = value; break;
         
         // If down arrow is released
         case 40:
-            if(keysDown[3] != value) { keyChanged = true; }
+            if (keysDown[3] != value) { keyChanged = true; }
             keysDown[3] = value; break;
         
         // If "s" is released
         case 83:
-            if(keysDown[7] != value) { keyChanged = true; }
+            if (keysDown[7] != value) { keyChanged = true; }
             keysDown[7] = value; break;
         
         // If left arrow is released
         case 37:
-            if(keysDown[4] != value) { keyChanged = true; }
+            if (keysDown[4] != value) { keyChanged = true; }
             keysDown[4] = value; break;
         
         // If "a" is released
         case 65:
-            if(keysDown[8] != value) { keyChanged = true; }
+            if (keysDown[8] != value) { keyChanged = true; }
             keysDown[8] = value; break;
         
         // If right arrow is released
         case 39:
-            if(keysDown[5] != value) { keyChanged = true; }
+            if (keysDown[5] != value) { keyChanged = true; }
             keysDown[5] = value; break;
         
         // If "d" is released
         case 68:
-            if(keysDown[9] != value) { keyChanged = true; }
+            if (keysDown[9] != value) { keyChanged = true; }
             keysDown[9] = value;
     }
     
-    if(keyChanged && value) {
+    if (keyChanged && value) {
         if (performance.now()) {
             prevTime = performance.now();
         } else {
@@ -347,43 +364,43 @@ function keyRepeat() {
     var diff = (newTime - prevTime) * config.hfov / 1700;
     
     // If minus key is down
-    if(keysDown[0]) {
+    if (keysDown[0]) {
         zoomOut(diff);
     }
     
     // If plus key is down
-    if(keysDown[1]) {
+    if (keysDown[1]) {
         zoomIn(diff);
     }
     
     // If up arrow or "w" is down
-    if(keysDown[2] || keysDown[6]) {
+    if (keysDown[2] || keysDown[6]) {
         // Pan up
         config.pitch += diff;
     }
     
     // If down arrow or "s" is down
-    if(keysDown[3] || keysDown[7]) {
+    if (keysDown[3] || keysDown[7]) {
         // Pan down
         config.pitch -= diff;
     }
     
     // If left arrow or "a" is down
-    if(keysDown[4] || keysDown[8]) {
+    if (keysDown[4] || keysDown[8]) {
         // Pan left
         config.yaw -= diff;
     }
     
     // If right arrow or "d" is down
-    if(keysDown[5] || keysDown[9]) {
+    if (keysDown[5] || keysDown[9]) {
         // Pan right
         config.yaw += diff;
     }
     
     // If auto-rotate
-    if(config.autoRotate) {
+    if (config.autoRotate) {
         // Pan
-        if(diff > 0.000001) {
+        if (diff > 0.000001) {
             config.yaw -= config.autoRotate / 60 * diff;
         }
     }
@@ -401,23 +418,23 @@ function onDocumentResize() {
 
 function animate() {
     render();
-    if(isUserInteracting) {
+    if (isUserInteracting) {
         requestAnimationFrame(animate);
-    } else if(keysDown[0] || keysDown[1] || keysDown[2] || keysDown[3]
+    } else if (keysDown[0] || keysDown[1] || keysDown[2] || keysDown[3]
       || keysDown[4] || keysDown[5] || keysDown[6] || keysDown[7]
       || keysDown[8] || keysDown[9] || config.autoRotate) {
         keyRepeat();
         requestAnimationFrame(animate);
-    } else if(renderer && renderer.isLoading()) {
+    } else if (renderer && renderer.isLoading()) {
         requestAnimationFrame(animate);
     }
 }
 
 function render() {
     try {
-        if(config.yaw > 180) {
+        if (config.yaw > 180) {
             config.yaw -= 360;
-        } else if(config.yaw < -180) {
+        } else if (config.yaw < -180) {
             config.yaw += 360;
         }
         
@@ -468,7 +485,7 @@ function renderInit() {
 function createHotSpots() {
     if (hotspotsCreated) return;
     
-    if(!config.hotSpots) {
+    if (!config.hotSpots) {
         config.hotSpots = [];
     } else {
         config.hotSpots.forEach(function(hs) {
@@ -478,7 +495,7 @@ function createHotSpots() {
             var span = document.createElement('span');
             span.innerHTML = hs.text;
             
-            if(hs.URL) {
+            if (hs.URL) {
                 var a = document.createElement('a');
                 a.setAttribute('href', hs.URL);
                 a.setAttribute('target', '_blank');
@@ -505,7 +522,7 @@ function createHotSpots() {
                 a.appendChild(image);
                 
             } else {
-                if(hs.sceneId) {
+                if (hs.sceneId) {
                     div.onclick = function() {
                         loadScene(hs.sceneId);
                         return false;
@@ -528,7 +545,7 @@ function createHotSpots() {
 }
 
 function destroyHotSpots() {
-    if(config.hotSpots) {
+    if (config.hotSpots) {
         config.hotSpots.forEach(function(hs) {
             var current = hs.div;
             while(current.parentNode.id != 'page') {
@@ -545,7 +562,7 @@ function renderHotSpots() {
         var z = Math.sin(hs.pitch * Math.PI / 180) * Math.sin(config.pitch * Math.PI /
             180) + Math.cos(hs.pitch * Math.PI / 180) * Math.cos((hs.yaw + config.yaw) *
             Math.PI / 180) * Math.cos(config.pitch * Math.PI / 180);
-        if((hs.yaw <= 90 && hs.yaw > -90 && z <= 0) ||
+        if ((hs.yaw <= 90 && hs.yaw > -90 && z <= 0) ||
           ((hs.yaw > 90 || hs.yaw <= -90) && z <= 0)) {
             hs.div.style.visibility = 'hidden';
         } else {
@@ -563,11 +580,11 @@ function renderHotSpots() {
 }
 
 function parseURLParameters() {
-    var URL = unescape(window.location.href).split('?');
+    var URL = decodeURI(window.location.href).split('?');
     URL.shift();
     URL = URL[0].split('&');
     var json = '{';
-    for(var i = 0; i < URL.length; i++) {
+    for (var i = 0; i < URL.length; i++) {
         var option = URL[i].split('=')[0];
         var value = URL[i].split('=')[1];
         json += '"' + option + '":';
@@ -579,7 +596,7 @@ function parseURLParameters() {
             default:
                 json += '"' + value + '"';
         }
-        if(i < URL.length - 1) {
+        if (i < URL.length - 1) {
             json += ',';
         }
     }
@@ -587,7 +604,7 @@ function parseURLParameters() {
     configFromURL = JSON.parse(json);
     
     // Check for JSON configuration file
-    if(configFromURL.config) {
+    if (configFromURL.config) {
         // Get JSON configuration file
         var request = new XMLHttpRequest();
         request.open('GET', configFromURL.config, false);
@@ -598,8 +615,8 @@ function parseURLParameters() {
         c.basePath = configFromURL.config.substring(0,configFromURL.config.lastIndexOf('/')+1);
         
         // Merge options
-        for(var k in c) {
-            if(!configFromURL[k]) {
+        for (var k in c) {
+            if (!configFromURL[k]) {
                 configFromURL[k] = c[k];
             }
         }
@@ -607,7 +624,7 @@ function parseURLParameters() {
     
     // Check for virtual tour JSON configuration file
     var firstScene = null;
-    if(configFromURL.tour) {
+    if (configFromURL.tour) {
         // Get JSON configuration file
         var request = new XMLHttpRequest();
         request.open('GET', configFromURL.tour, false);
@@ -618,10 +635,10 @@ function parseURLParameters() {
         tourConfig.basePath = configFromURL.tour.substring(0,configFromURL.tour.lastIndexOf('/')+1);
         
         // Activate first scene if specified
-        if(tourConfig.default.firstScene) {
+        if (tourConfig.default.firstScene) {
             firstScene = tourConfig.default.firstScene;
         }
-        if(configFromURL.firstScene) {
+        if (configFromURL.firstScene) {
             firstScene = configFromURL.firstScene;
         }
     }
@@ -633,32 +650,32 @@ function mergeConfig(sceneId) {
     config = {};
     
     // Merge default config
-    for(var k in defaultConfig) {
+    for (var k in defaultConfig) {
         config[k] = defaultConfig[k];
     }
     
     // Merge default scene config
-    for(var k in tourConfig.default) {
+    for (var k in tourConfig.default) {
         config[k] = tourConfig.default[k];
     }
     
     // Merge current scene config
-    if((sceneId != null) && (sceneId != '') && (tourConfig.scenes) && (tourConfig.scenes[sceneId])) {
+    if ((sceneId !== null) && (sceneId !== '') && (tourConfig.scenes) && (tourConfig.scenes[sceneId])) {
         var scene = tourConfig.scenes[sceneId];
-        for(var k in scene) {
+        for (var k in scene) {
             config[k] = scene[k];
         }
         config.activeScene = sceneId;
     }
     
     // Merge URL and config file
-    for(var k in configFromURL) {
+    for (var k in configFromURL) {
         config[k] = configFromURL[k];
     }
 }
 
 function processOptions() {
-    for(var key in config) {
+    for (var key in config) {
         switch(key) {
             case 'title':
                 document.getElementById('title_box').innerHTML = config[key];
@@ -671,7 +688,7 @@ function processOptions() {
                 break;
                 
             case 'popout':
-                if(config[key] == 'yes') {
+                if (config[key] == 'yes') {
                     document.getElementById('fullwindowtoggle_button').classList.add('fullwindowtoggle_button_active');
                     popoutMode = true;
                 }
@@ -689,7 +706,7 @@ function processOptions() {
                     p = tourConfig.basePath + p;
                 }
                 document.body.style.backgroundImage = "url('" + p + "')";
-                document.body.style.backgroundSize = "auto";
+                document.body.style.backgroundSize = 'auto';
                 break;
             
             case 'hfov':
@@ -698,15 +715,15 @@ function processOptions() {
             
             case 'pitch':
                 // Keep pitch within bounds
-                if(config.pitch < -85) {
+                if (config.pitch < -85) {
                     config.pitch = -85;
-                } else if(config.pitch > 85) {
+                } else if (config.pitch > 85) {
                     config.pitch = 85;
                 }
                 break;
             
             case 'autoload':
-                if(config[key] == 'yes') {
+                if (config[key] == 'yes') {
                     // Show loading box
                     document.getElementById('load_box').style.display = 'inline';
                 }
@@ -731,8 +748,8 @@ function processOptions() {
 }
 
 function toggleFullWindow() {
-    if(loaded && !error) {
-        if(!fullWindowActive && !popoutMode) {
+    if (loaded && !error) {
+        if (!fullWindowActive && !popoutMode) {
             try {
                 var page = document.getElementById('page');
                 if (page.requestFullscreen) {
@@ -758,7 +775,7 @@ function toggleFullWindow() {
                 document.msExitFullscreen();
             }
 
-            if(popoutMode) {
+            if (popoutMode) {
                 window.close();
             }
         }
@@ -766,7 +783,7 @@ function toggleFullWindow() {
 }
 
 function onFullScreenChange() {
-    if(document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) {
+    if (document.fullscreen || document.mozFullScreen || document.webkitIsFullScreen || document.msFullscreenElement) {
         document.getElementById('fullwindowtoggle_button').classList.add('fullwindowtoggle_button_active');
         fullWindowActive = true;
     } else {
@@ -776,37 +793,37 @@ function onFullScreenChange() {
 }
 
 function fullScreenError() {
-    if(!popoutMode) {
+    if (!popoutMode) {
         // Open new window instead
         var windowspecs = 'width=' + screen.width + ',height=' + screen.height + ',left=0,top=0';
         var windowlocation = window.location.href + '&popout=yes';
         windowlocation += '&popoutautoload';
-        window.open(windowlocation,null,windowspecs)
+        window.open(windowlocation, null, windowspecs);
     } else {
         window.close();
     }
 }
 
 function zoomIn(amount) {
-    if(loaded) {
+    if (loaded) {
         setHfov(config.hfov -= amount);
     }
 }
 
 function zoomOut(amount) {
-    if(loaded) {
+    if (loaded) {
         setHfov(config.hfov += amount);
     }
 }
 
 function setHfov(i) {
     // Keep field of view within bounds
-    if(i < 50 && config.type != 'multires') {
+    if (i < 50 && config.type != 'multires') {
         config.hfov = 50;
-    } else if(config.type == 'multires' && i < canvas.width
+    } else if (config.type == 'multires' && i < canvas.width
         / (config.multiRes.cubeResolution / 90 * 0.9)) {
         config.hfov = canvas.width / (config.multiRes.cubeResolution / 90 * 0.9);
-    } else if(i > 120) {
+    } else if (i > 120) {
         config.hfov = 120;
     } else {
         config.hfov = i;