diff --git a/README.md b/README.md
index 03ec47b05..c3ada712f 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 ## Dicom Image Toolkit for CornestoneJS
 
-### Current version: 0.5.2
+### Current version: 0.5.3
 
 This library provides common dicom functionalities to be used in web-applications. Multiplanar reformat on axial, sagittal and coronal viewports is included as well as custom loader/exporter for nrrd files and orthogonal reslice.
 
diff --git a/docs/image_layers.js.html b/docs/image_layers.js.html
index 0077062e1..10a8b641d 100644
--- a/docs/image_layers.js.html
+++ b/docs/image_layers.js.html
@@ -85,7 +85,7 @@ <h1 class="page-title">image_layers.js</h1>
  * @param {String} mainSeriesName - Tag for mask series
  * @param {String} elementId - target HTML element id
  */
-export const loadImageLayers = function(
+export const loadImageLayers = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -105,7 +105,7 @@ <h1 class="page-title">image_layers.js</h1>
     maskSeriesName
   );
   loadLayers(element, layers);
-  setTimeout(function() {
+  setTimeout(function () {
     updateImageLayer(
       mainSeries,
       maskSeries,
@@ -123,7 +123,7 @@ <h1 class="page-title">image_layers.js</h1>
  * @param {String} layerName - Target layer name
  * @param {Number} opacity - New opacity value [0-1]
  */
-export const changeOpacityLayer = function(elementId, layerName, opacity) {
+export const changeOpacityLayer = function (elementId, layerName, opacity) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -135,7 +135,7 @@ <h1 class="page-title">image_layers.js</h1>
     return;
   }
   let activeLayerId;
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     if (layer.options.name == layerName) {
       layer.options.opacity = opacity;
     } else {
@@ -156,7 +156,7 @@ <h1 class="page-title">image_layers.js</h1>
  * @param {HTMLElement} element - Target html element
  * @param {Number} imageIndex - index of the image to load
  */
-export const updateImageLayer = function(
+export const updateImageLayer = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -168,12 +168,14 @@ <h1 class="page-title">image_layers.js</h1>
     console.error("Invalid layers in active element");
     return;
   }
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     let series = layer.options.name == mainSeriesName ? mainSeries : maskSeries;
-    cornerstone.loadImage(series.imageIds[imageIndex]).then(function(image) {
-      cornerstone.setActiveLayer(element, layer.layerId);
-      cornerstone.displayImage(element, image);
-    });
+    cornerstone
+      .loadImage(series.imageIds[imageIndex - 1])
+      .then(function (image) {
+        cornerstone.setActiveLayer(element, layer.layerId);
+        cornerstone.displayImage(element, image);
+      });
   });
 };
 
@@ -183,7 +185,7 @@ <h1 class="page-title">image_layers.js</h1>
  * @function getMainLayer
  * @returns {String} Name of the main layer
  */
-export const getMainLayer = function() {
+export const getMainLayer = function () {
   return mainLayer;
 };
 
@@ -199,7 +201,7 @@ <h1 class="page-title">image_layers.js</h1>
  * @param {String} maskSeriesName - Name of the mask layer
  * @returns {Object} Cornerstone layers object
  */
-let buildLayers = function(
+let buildLayers = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -236,13 +238,13 @@ <h1 class="page-title">image_layers.js</h1>
  * @param {HTMLElement} element - Target HTML element
  * @param {Object} layers - Cornerstone layers object
  */
-let loadLayers = function(element, layers) {
+let loadLayers = function (element, layers) {
   cornerstone.imageCache.purgeCache();
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     let imageIndex = Math.floor(layer.imageIds.length / 2);
     let currentImageId = layer.imageIds[imageIndex];
-    each(layer.imageIds, function(imageId) {
-      cornerstone.loadAndCacheImage(imageId).then(function(image) {
+    each(layer.imageIds, function (imageId) {
+      cornerstone.loadAndCacheImage(imageId).then(function (image) {
         if (currentImageId == imageId) {
           cornerstone.displayImage(element, image);
           cornerstone.addLayer(element, image, layer.options);
diff --git a/docs/image_rendering.js.html b/docs/image_rendering.js.html
index 6435fbe4f..2643cd473 100644
--- a/docs/image_rendering.js.html
+++ b/docs/image_rendering.js.html
@@ -68,7 +68,7 @@ <h1 class="page-title">image_rendering.js</h1>
 /*
  * This module provides the following functions to be exported:
  * clearImageCache()
- * loadImage(series, elementId)
+ * loadImage(series, elementId, defaultImageIndex)
  * updateImage(series, elementId, imageIndex)
  * resetViewports([elementIds])
  */
@@ -78,7 +78,7 @@ <h1 class="page-title">image_rendering.js</h1>
  * @instance
  * @function clearImageCache
  */
-export const clearImageCache = function() {
+export const clearImageCache = function () {
   cornerstone.imageCache.purgeCache();
 };
 
@@ -89,7 +89,7 @@ <h1 class="page-title">image_rendering.js</h1>
  * @param {Object} series - The original series data object
  * @param {String} elementId - The html div id used for rendering
  */
-export const reloadImage = function(series, elementId) {
+export const reloadImage = function (series, elementId) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -100,8 +100,8 @@ <h1 class="page-title">image_rendering.js</h1>
   let sliceId = store.get(viewer, elementId, "sliceId");
   let currentImageId = series.imageIds[sliceId];
 
-  each(series.imageIds, function(imageId) {
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
+  each(series.imageIds, function (imageId) {
+    cornerstone.loadAndCacheImage(imageId).then(function (image) {
       if (currentImageId == imageId) {
         cornerstone.displayImage(element, image);
         let viewport = cornerstone.getViewport(element);
@@ -135,7 +135,7 @@ <h1 class="page-title">image_rendering.js</h1>
  * @param {Object} series - The original series data object
  * @param {String} elementId - The html div id used for rendering
  */
-export const loadImage = function(series, elementId) {
+export const loadImage = function (series, elementId, defaultImageIndex) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -143,9 +143,12 @@ <h1 class="page-title">image_rendering.js</h1>
   }
   cornerstone.enable(element);
 
-  let imageIndex = Math.floor(series.imageIds.length / 2);
-  let currentImageId = series.imageIds[imageIndex];
-  let numberOfSlices = series.imageIds.length - 1;
+  let numberOfSlices = series.imageIds.length;
+  let imageIndex =
+    defaultImageIndex &amp;&amp; defaultImageIndex &lt;= series.imageIds.length
+      ? defaultImageIndex
+      : Math.floor(series.imageIds.length / 2);
+  let currentImageId = series.imageIds[imageIndex - 1];
   let rows = series.instances[series.imageIds[0]].metadata["x00280010"];
   let cols = series.instances[series.imageIds[0]].metadata["x00280011"];
   let thickness = series.instances[series.imageIds[0]].metadata["x00180050"];
@@ -170,8 +173,8 @@ <h1 class="page-title">image_rendering.js</h1>
     store.set(null, "errorLog", "");
   }
 
-  each(series.imageIds, function(imageId) {
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
+  each(series.imageIds, function (imageId) {
+    cornerstone.loadAndCacheImage(imageId).then(function (image) {
       // HACK to force render re-evaluation (otherwise it remains stuck on GrayScaleRenderer)
       image.render = null;
 
@@ -210,11 +213,11 @@ <h1 class="page-title">image_rendering.js</h1>
  * @param {String} elementId - The html div id used for rendering
  * @param {Number} imageIndex - The index of the image to be rendered
  */
-export const updateImage = function(series, element, imageIndex) {
+export const updateImage = function (series, element, imageIndex) {
   if (!element) {
     return;
   }
-  cornerstone.loadImage(series.imageIds[imageIndex]).then(function(image) {
+  cornerstone.loadImage(series.imageIds[imageIndex - 1]).then(function (image) {
     cornerstone.displayImage(element, image);
   });
 };
@@ -225,8 +228,8 @@ <h1 class="page-title">image_rendering.js</h1>
  * @function resetViewports
  * @param {Array} elementIds - The array of hmtl div ids
  */
-export const resetViewports = function(elementIds) {
-  each(elementIds, function(elementId) {
+export const resetViewports = function (elementIds) {
+  each(elementIds, function (elementId) {
     let element = document.getElementById(elementId);
     if (!element) {
       console.error("invalid html element: " + elementId);
@@ -290,7 +293,7 @@ <h1 class="page-title">image_rendering.js</h1>
  * @function enableMouseHandlers
  * @param {String} elementId - The html div id used for rendering
  */
-export const enableMouseHandlers = function(elementId) {
+export const enableMouseHandlers = function (elementId) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -308,7 +311,7 @@ <h1 class="page-title">image_rendering.js</h1>
       let viewport = cornerstone.getViewport(element);
       let viewportNames = store.get("viewports");
       let viewer = store.get("viewer");
-      each(viewportNames, function(viewportName) {
+      each(viewportNames, function (viewportName) {
         // sync ww and wc values in store
         store.set(viewer, "contrast", [
           viewportName,
@@ -331,20 +334,24 @@ <h1 class="page-title">image_rendering.js</h1>
       document.removeEventListener("mousemove", mouseMoveHandler);
       document.removeEventListener("mouseup", mouseUpHandler);
     }
+    document.removeEventListener("mousemove", mouseMoveHandler);
+    document.removeEventListener("mouseup", mouseUpHandler);
     document.addEventListener("mousemove", mouseMoveHandler);
     document.addEventListener("mouseup", mouseUpHandler);
   }
   element.addEventListener("mousedown", mouseDownHandler);
 
   // cornerstoneTools wheel tool listener (update sliceId)
-  element.addEventListener("cornerstonetoolsmousewheel", evt => {
+  function mouseWheelHandler(evt) {
     let viewer = store.get("viewer");
     let enabledElement = cornerstone.getEnabledElement(element);
     let cix =
       enabledElement.toolStateManager.toolState.stack.data[0]
         .currentImageIdIndex;
     store.set(viewer, "currentSliceNumber", [evt.target.id, cix]);
-  });
+  }
+  element.removeEventListener("cornerstonetoolsmousewheel", mouseWheelHandler);
+  element.addEventListener("cornerstonetoolsmousewheel", mouseWheelHandler);
 };
 
 /**
@@ -362,7 +369,7 @@ <h1 class="page-title">image_rendering.js</h1>
  * @param {Number} thickness - The thickness value between slices
  * @param {String} viewport - The viewport tag name
  */
-export const storeViewportData = function(
+export const storeViewportData = function (
   image,
   elementId,
   imageIndex,
diff --git a/docs/index.html b/docs/index.html
index 9bf3d9748..58490f9be 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -67,7 +67,7 @@ <h3> </h3>
     <section class="readme usertext">
         <article><h1 id="larvitar">Larvitar</h1>
 <h2 id="dicom-image-toolkit-for-cornestonejs">Dicom Image Toolkit for CornestoneJS</h2>
-<h3 id="current-version%3A-0.5.1">Current version: 0.5.1</h3>
+<h3 id="current-version%3A-0.5.3">Current version: 0.5.3</h3>
 <p>This library provides common dicom functionalities to be used in web-applications. Multiplanar reformat on axial, sagittal and coronal viewports is included as well as custom loader/exporter for nrrd files and orthogonal reslice.</p>
 <ul>
 <li><code>index</code> main file</li>
diff --git a/docs/module-imaging_layers.html b/docs/module-imaging_layers.html
index 66d7da754..cf9c6ba41 100644
--- a/docs/module-imaging_layers.html
+++ b/docs/module-imaging_layers.html
@@ -449,7 +449,7 @@ <h4 class="name" id="getMainLayer"><span class="type-signature"></span>getMainLa
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line128">line 128</a>
+        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line130">line 130</a>
     </li></ul></dd>
     
 
@@ -1014,7 +1014,7 @@ <h4 class="name" id="~buildLayers"><span class="type-signature">(inner) </span>b
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line140">line 140</a>
+        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line142">line 142</a>
     </li></ul></dd>
     
 
@@ -1241,7 +1241,7 @@ <h4 class="name" id="~loadLayers"><span class="type-signature">(inner) </span>lo
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line180">line 180</a>
+        <a href="image_layers.js.html">image_layers.js</a>, <a href="image_layers.js.html#line182">line 182</a>
     </li></ul></dd>
     
 
diff --git a/docs/module-imaging_rendering.html b/docs/module-imaging_rendering.html
index ce1b5216f..20d8f5beb 100644
--- a/docs/module-imaging_rendering.html
+++ b/docs/module-imaging_rendering.html
@@ -880,7 +880,7 @@ <h4 class="name" id="enableMouseHandlers"><span class="type-signature"></span>en
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line235">line 235</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line238">line 238</a>
     </li></ul></dd>
     
 
@@ -1602,7 +1602,7 @@ <h4 class="name" id="resetViewports"><span class="type-signature"></span>resetVi
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line170">line 170</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line173">line 173</a>
     </li></ul></dd>
     
 
@@ -1738,7 +1738,7 @@ <h4 class="name" id="storeViewportData"><span class="type-signature"></span>stor
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line298">line 298</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line305">line 305</a>
     </li></ul></dd>
     
 
@@ -2081,7 +2081,7 @@ <h4 class="name" id="updateImage"><span class="type-signature"></span>updateImag
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line153">line 153</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line156">line 156</a>
     </li></ul></dd>
     
 
@@ -3094,7 +3094,7 @@ <h4 class="name" id="enableMouseHandlers"><span class="type-signature"></span>en
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line235">line 235</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line238">line 238</a>
     </li></ul></dd>
     
 
@@ -3816,7 +3816,7 @@ <h4 class="name" id="resetViewports"><span class="type-signature"></span>resetVi
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line170">line 170</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line173">line 173</a>
     </li></ul></dd>
     
 
@@ -3952,7 +3952,7 @@ <h4 class="name" id="storeViewportData"><span class="type-signature"></span>stor
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line298">line 298</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line305">line 305</a>
     </li></ul></dd>
     
 
@@ -4295,7 +4295,7 @@ <h4 class="name" id="updateImage"><span class="type-signature"></span>updateImag
     
     <dt class="tag-source">Source:</dt>
     <dd class="tag-source"><ul class="dummy"><li>
-        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line153">line 153</a>
+        <a href="image_rendering.js.html">image_rendering.js</a>, <a href="image_rendering.js.html#line156">line 156</a>
     </li></ul></dd>
     
 
diff --git a/docs/tools_tools.default.js.html b/docs/tools_tools.default.js.html
index d41d38462..228eea3c9 100644
--- a/docs/tools_tools.default.js.html
+++ b/docs/tools_tools.default.js.html
@@ -119,6 +119,19 @@ <h1 class="page-title">tools/tools.default.js</h1>
     cleanable: false,
     class: "DragProbeTool"
   },
+  Magnify: {
+    name: "Magnify",
+    viewports: "all",
+    configuration: {
+      magnifySize: 200
+    },
+    options: {
+      mouseButtonMask: 1,
+      supportedInteractionTypes: ["Mouse", "Touch"]
+    },
+    cleanable: false,
+    class: "MagnifyTool"
+  },
   Rotate: {
     name: "Rotate",
     viewports: "all",
diff --git a/imaging/image_layers.js b/imaging/image_layers.js
index bd1ffef6a..b4ecc8225 100644
--- a/imaging/image_layers.js
+++ b/imaging/image_layers.js
@@ -33,7 +33,7 @@ var mainLayer;
  * @param {String} mainSeriesName - Tag for mask series
  * @param {String} elementId - target HTML element id
  */
-export const loadImageLayers = function(
+export const loadImageLayers = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -53,7 +53,7 @@ export const loadImageLayers = function(
     maskSeriesName
   );
   loadLayers(element, layers);
-  setTimeout(function() {
+  setTimeout(function () {
     updateImageLayer(
       mainSeries,
       maskSeries,
@@ -71,7 +71,7 @@ export const loadImageLayers = function(
  * @param {String} layerName - Target layer name
  * @param {Number} opacity - New opacity value [0-1]
  */
-export const changeOpacityLayer = function(elementId, layerName, opacity) {
+export const changeOpacityLayer = function (elementId, layerName, opacity) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -83,7 +83,7 @@ export const changeOpacityLayer = function(elementId, layerName, opacity) {
     return;
   }
   let activeLayerId;
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     if (layer.options.name == layerName) {
       layer.options.opacity = opacity;
     } else {
@@ -104,7 +104,7 @@ export const changeOpacityLayer = function(elementId, layerName, opacity) {
  * @param {HTMLElement} element - Target html element
  * @param {Number} imageIndex - index of the image to load
  */
-export const updateImageLayer = function(
+export const updateImageLayer = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -116,12 +116,14 @@ export const updateImageLayer = function(
     console.error("Invalid layers in active element");
     return;
   }
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     let series = layer.options.name == mainSeriesName ? mainSeries : maskSeries;
-    cornerstone.loadImage(series.imageIds[imageIndex]).then(function(image) {
-      cornerstone.setActiveLayer(element, layer.layerId);
-      cornerstone.displayImage(element, image);
-    });
+    cornerstone
+      .loadImage(series.imageIds[imageIndex - 1])
+      .then(function (image) {
+        cornerstone.setActiveLayer(element, layer.layerId);
+        cornerstone.displayImage(element, image);
+      });
   });
 };
 
@@ -131,7 +133,7 @@ export const updateImageLayer = function(
  * @function getMainLayer
  * @returns {String} Name of the main layer
  */
-export const getMainLayer = function() {
+export const getMainLayer = function () {
   return mainLayer;
 };
 
@@ -147,7 +149,7 @@ export const getMainLayer = function() {
  * @param {String} maskSeriesName - Name of the mask layer
  * @returns {Object} Cornerstone layers object
  */
-let buildLayers = function(
+let buildLayers = function (
   mainSeries,
   mainSeriesName,
   maskSeries,
@@ -184,13 +186,13 @@ let buildLayers = function(
  * @param {HTMLElement} element - Target HTML element
  * @param {Object} layers - Cornerstone layers object
  */
-let loadLayers = function(element, layers) {
+let loadLayers = function (element, layers) {
   cornerstone.imageCache.purgeCache();
-  each(layers, function(layer) {
+  each(layers, function (layer) {
     let imageIndex = Math.floor(layer.imageIds.length / 2);
     let currentImageId = layer.imageIds[imageIndex];
-    each(layer.imageIds, function(imageId) {
-      cornerstone.loadAndCacheImage(imageId).then(function(image) {
+    each(layer.imageIds, function (imageId) {
+      cornerstone.loadAndCacheImage(imageId).then(function (image) {
         if (currentImageId == imageId) {
           cornerstone.displayImage(element, image);
           cornerstone.addLayer(element, image, layer.options);
diff --git a/imaging/image_rendering.js b/imaging/image_rendering.js
index 3682c84b3..daab03532 100644
--- a/imaging/image_rendering.js
+++ b/imaging/image_rendering.js
@@ -16,7 +16,7 @@ let store = larvitar_store.state ? larvitar_store : new larvitar_store();
 /*
  * This module provides the following functions to be exported:
  * clearImageCache()
- * loadImage(series, elementId)
+ * loadImage(series, elementId, defaultImageIndex)
  * updateImage(series, elementId, imageIndex)
  * resetViewports([elementIds])
  */
@@ -26,7 +26,7 @@ let store = larvitar_store.state ? larvitar_store : new larvitar_store();
  * @instance
  * @function clearImageCache
  */
-export const clearImageCache = function() {
+export const clearImageCache = function () {
   cornerstone.imageCache.purgeCache();
 };
 
@@ -37,7 +37,7 @@ export const clearImageCache = function() {
  * @param {Object} series - The original series data object
  * @param {String} elementId - The html div id used for rendering
  */
-export const reloadImage = function(series, elementId) {
+export const reloadImage = function (series, elementId) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -48,8 +48,8 @@ export const reloadImage = function(series, elementId) {
   let sliceId = store.get(viewer, elementId, "sliceId");
   let currentImageId = series.imageIds[sliceId];
 
-  each(series.imageIds, function(imageId) {
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
+  each(series.imageIds, function (imageId) {
+    cornerstone.loadAndCacheImage(imageId).then(function (image) {
       if (currentImageId == imageId) {
         cornerstone.displayImage(element, image);
         let viewport = cornerstone.getViewport(element);
@@ -83,7 +83,7 @@ export const reloadImage = function(series, elementId) {
  * @param {Object} series - The original series data object
  * @param {String} elementId - The html div id used for rendering
  */
-export const loadImage = function(series, elementId) {
+export const loadImage = function (series, elementId, defaultImageIndex) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -91,9 +91,12 @@ export const loadImage = function(series, elementId) {
   }
   cornerstone.enable(element);
 
-  let imageIndex = Math.floor(series.imageIds.length / 2);
-  let currentImageId = series.imageIds[imageIndex];
-  let numberOfSlices = series.imageIds.length - 1;
+  let numberOfSlices = series.imageIds.length;
+  let imageIndex =
+    defaultImageIndex && defaultImageIndex <= series.imageIds.length
+      ? defaultImageIndex
+      : Math.floor(series.imageIds.length / 2);
+  let currentImageId = series.imageIds[imageIndex - 1];
   let rows = series.instances[series.imageIds[0]].metadata["x00280010"];
   let cols = series.instances[series.imageIds[0]].metadata["x00280011"];
   let thickness = series.instances[series.imageIds[0]].metadata["x00180050"];
@@ -118,8 +121,8 @@ export const loadImage = function(series, elementId) {
     store.set(null, "errorLog", "");
   }
 
-  each(series.imageIds, function(imageId) {
-    cornerstone.loadAndCacheImage(imageId).then(function(image) {
+  each(series.imageIds, function (imageId) {
+    cornerstone.loadAndCacheImage(imageId).then(function (image) {
       // HACK to force render re-evaluation (otherwise it remains stuck on GrayScaleRenderer)
       image.render = null;
 
@@ -158,11 +161,11 @@ export const loadImage = function(series, elementId) {
  * @param {String} elementId - The html div id used for rendering
  * @param {Number} imageIndex - The index of the image to be rendered
  */
-export const updateImage = function(series, element, imageIndex) {
+export const updateImage = function (series, element, imageIndex) {
   if (!element) {
     return;
   }
-  cornerstone.loadImage(series.imageIds[imageIndex]).then(function(image) {
+  cornerstone.loadImage(series.imageIds[imageIndex - 1]).then(function (image) {
     cornerstone.displayImage(element, image);
   });
 };
@@ -173,8 +176,8 @@ export const updateImage = function(series, element, imageIndex) {
  * @function resetViewports
  * @param {Array} elementIds - The array of hmtl div ids
  */
-export const resetViewports = function(elementIds) {
-  each(elementIds, function(elementId) {
+export const resetViewports = function (elementIds) {
+  each(elementIds, function (elementId) {
     let element = document.getElementById(elementId);
     if (!element) {
       console.error("invalid html element: " + elementId);
@@ -238,7 +241,7 @@ export const resetViewports = function(elementIds) {
  * @function enableMouseHandlers
  * @param {String} elementId - The html div id used for rendering
  */
-export const enableMouseHandlers = function(elementId) {
+export const enableMouseHandlers = function (elementId) {
   let element = document.getElementById(elementId);
   if (!element) {
     console.error("invalid html element: " + elementId);
@@ -256,7 +259,7 @@ export const enableMouseHandlers = function(elementId) {
       let viewport = cornerstone.getViewport(element);
       let viewportNames = store.get("viewports");
       let viewer = store.get("viewer");
-      each(viewportNames, function(viewportName) {
+      each(viewportNames, function (viewportName) {
         // sync ww and wc values in store
         store.set(viewer, "contrast", [
           viewportName,
@@ -279,20 +282,24 @@ export const enableMouseHandlers = function(elementId) {
       document.removeEventListener("mousemove", mouseMoveHandler);
       document.removeEventListener("mouseup", mouseUpHandler);
     }
+    document.removeEventListener("mousemove", mouseMoveHandler);
+    document.removeEventListener("mouseup", mouseUpHandler);
     document.addEventListener("mousemove", mouseMoveHandler);
     document.addEventListener("mouseup", mouseUpHandler);
   }
   element.addEventListener("mousedown", mouseDownHandler);
 
   // cornerstoneTools wheel tool listener (update sliceId)
-  element.addEventListener("cornerstonetoolsmousewheel", evt => {
+  function mouseWheelHandler(evt) {
     let viewer = store.get("viewer");
     let enabledElement = cornerstone.getEnabledElement(element);
     let cix =
       enabledElement.toolStateManager.toolState.stack.data[0]
         .currentImageIdIndex;
     store.set(viewer, "currentSliceNumber", [evt.target.id, cix]);
-  });
+  }
+  element.removeEventListener("cornerstonetoolsmousewheel", mouseWheelHandler);
+  element.addEventListener("cornerstonetoolsmousewheel", mouseWheelHandler);
 };
 
 /**
@@ -310,7 +317,7 @@ export const enableMouseHandlers = function(elementId) {
  * @param {Number} thickness - The thickness value between slices
  * @param {String} viewport - The viewport tag name
  */
-export const storeViewportData = function(
+export const storeViewportData = function (
   image,
   elementId,
   imageIndex,
diff --git a/package.json b/package.json
index 6b780d3b2..124b3492a 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
     "dicom",
     "imaging"
   ],
-  "version": "0.5.2",
+  "version": "0.5.3",
   "description": "javascript library for loading, rendering and interact with DICOM images",
   "main": "index.js",
   "repository": {