diff --git a/dist/image-sequencer-ui.js b/dist/image-sequencer-ui.js
index 045d4e07..0e2a660f 100644
--- a/dist/image-sequencer-ui.js
+++ b/dist/image-sequencer-ui.js
@@ -1,6 +1,7 @@
 (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i<t.length;i++)o(t[i]);return o}return r})()({1:[function(require,module,exports){
 var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
     setupCache = require('./lib/cache.js'),
+    intermediateHtmlStepUi = require('./lib/intermediateHtmlStepUi.js'),
     DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
     urlHash = require('./lib/urlHash.js'),
     insertPreview = require('./lib/insertPreview.js');
@@ -187,7 +188,7 @@ window.onload = function() {
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.images.image1.steps[0];
-      var util=IntermediateHtmlStepUi(sequencer);
+      var util= intermediateHtmlStepUi(sequencer);
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
@@ -210,7 +211,7 @@ window.onload = function() {
     insertPreview.updatePreviews("images/tulips.png",'addStep');
   }
 };
-},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/urlHash.js":7}],2:[function(require,module,exports){
+},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/intermediateHtmlStepUi.js":6,"./lib/urlHash.js":7}],2:[function(require,module,exports){
 var setupCache = function() {
   if ('serviceWorker' in navigator) {
     navigator.serviceWorker.register('sw.js', { scope: '/examples/' })
@@ -716,7 +717,9 @@ module.exports = {
   updatePreviews : updatePreviews
 }
 },{}],6:[function(require,module,exports){
-var urlHash = require('./urlHash.js');
+var urlHash = require('./urlHash.js'),
+    insertPreview = require('./insertPreview.js');
+
 function IntermediateHtmlStepUi(_sequencer, step, options) {
   function stepUI() {
     return '<div class="row insertDiv">\
@@ -786,7 +789,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
       .insertAdjacentElement('afterend',
         addStepUI
       );
-      updatePreviews(step.output,'insertStep');
+    insertPreview.updatePreviews(step.output,'insertStep');
     var insertStepSelect = $("#insertStep select");
     insertStepSelect.html("");
     // Add modules to the insertStep dropdown
@@ -842,7 +845,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
 module.exports = IntermediateHtmlStepUi;
 
 
-},{"./urlHash.js":7}],7:[function(require,module,exports){
+},{"./insertPreview.js":5,"./urlHash.js":7}],7:[function(require,module,exports){
 function getUrlHashParameter(param) {
 
   var params = getUrlHashParameters();
diff --git a/dist/image-sequencer-ui.min.js b/dist/image-sequencer-ui.min.js
index a178a5ec..2f5cc42e 100644
--- a/dist/image-sequencer-ui.min.js
+++ b/dist/image-sequencer-ui.min.js
@@ -1,5 +1 @@
-<<<<<<< Updated upstream
-var setupCache=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})};function DefaultHtmlSequencerUi(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";t.selectStepSel=t.selectStepSel||"#selectStep";function s(){var t=getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),setUrlHashParameter("steps",sequencer.toString())}function i(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),i()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(a).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),setUrlHashParameter("steps",sequencer.toString()),i()},addStepUi:function(){if("none"!=$(n+" select").val()){var a=$(n+" select").val(),s=1;sequencer.sequences[a]?s=sequencer.sequences[a].length:sequencer.modules[a][1].length&&(s=sequencer.modules[a][1].length),e.addSteps(a,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),i(),setUrlHashParameter("steps",e.toString())}}}}function stepRemovedNotify(){if(0==$("#stepRemovedNotification").length){var e=document.createElement("span");e.innerHTML=' <i class="fa fa-info-circle" aria-hidden="true"></i> Step Removed ',e.id="stepRemovedNotification",$("body").append(e)}$("#stepRemovedNotification").fadeIn(500).delay(200).fadeOut(500)}function DefaultHtmlStepUi(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";return{getPreview:function(){return step.imgElement},onSetup:function(t,a){t.options&&t.options.description&&(t.description=t.options.description),t.ui='      <div class="container">    <div class="row step">    <form class="input-form">    <div class="col-md-4 details">    <h3>'+t.name+' <span class="toggle"><i class="fa fa-caret-up" aria-hidden="true"></i></span></h3><div class="collapse"><p><i>"'+(t.description||"")+'</i></p></div>    </div>    </form>    <div class="col-md-8 collapse">    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>    </div>    </div>    </div>    </div>';var s=IntermediateHtmlStepUi(e,t),i=new DOMParser;if(t.ui=i.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var o=e.modulesInfo(t.name).inputs,r=e.modulesInfo(t.name).outputs,l=Object.assign(o,r);for(var c in l){var d=o.hasOwnProperty(c),u="",p=d?o[c]:{};if(d)if("select"==p.type.toLowerCase()){for(var m in u+='<select class="form-control target" name="'+c+'">',p.values)u+="<option>"+p.values[m]+"</option>";u+="</select>"}else{let e=t.options[c]||p.default;u='<input class="form-control target" type="'+p.type+'" name="'+c+'" value="'+e+'" placeholder ="'+(p.placeholder||""),"range"==p.type.toLowerCase()?u+='"min="'+p.min+'"max="'+p.max+'"step="'+p.step+'"><span>'+e+"</span>":u+='">'}else u+='<span class="output"></span>';var f=document.createElement("div");f.className="row",f.setAttribute("name",c);var v=o[c].desc||c;f.innerHTML="<div class='det collapse'>                           <label for='"+c+"'>"+v+"</label>                           "+u+"                         </div>",t.ui.querySelector("div.details").appendChild(f)}$(t.ui.querySelector("div.details")).append('<div class="collapse"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(i.parseFromString('<div class="collapse"><div class="tools btn-group">       <button confirm="Are you sure?" onclick="stepRemovedNotify()" class="remove btn btn btn-default">         <i class="fa fa-trash"></i>       </button>       <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >         <i class="fa fa-plus"></i> Add       </button>       </div>       </div>',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){s.insertStep(t.ID)}),a.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[a.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",e=>{var n=e.target.className;console.log("ele "+element),"fa fa-caret-up"==n?($(t.ui.querySelectorAll(".collapse")).show(),e.target.className="fa fa-caret-down"):($(t.ui.querySelectorAll(".collapse")).hide(),e.target.className="fa fa-caret-up")});var h=0,g=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),g&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),g=!1,h=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,s;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),s=!(isNaN(n)||isNaN(e)?e===n:e-n==0),g=(h+=a?s?0:-1:s?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!g),s))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].contains(n)&&(t.linkElements[e].href=t.output);for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].download=t.name+"."+t.output.split("/")[1].split(";")[0],t.linkElements[e].target="_blank";if(e.modulesInfo().hasOwnProperty(t.name)){var a=e.modulesInfo(t.name).inputs,s=e.modulesInfo(t.name).outputs;for(var i in a)void 0!==t.options[i]&&("input"===a[i].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+i+'"] input')).val(t.options[i]).data("initValue",t.options[i]),"select"===a[i].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+i+'"] select')).val(t.options[i]).data("initValue",t.options[i]));for(var i in s)void 0!==t[i]&&$(t.ui.querySelector('div[name="'+i+'"] input')).val(t[i])}},onRemove:function(e){e.ui.remove(),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("div[class^=imgareaselect-]").remove()},onDraw:function(e){$(e.ui.querySelector(".load")).show(),$(e.ui.querySelector("img")).hide()}}}function IntermediateHtmlStepUi(e,t,n){function a(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function s(t){n=n||{};var a=$("#insertStep select");if("none"!=a.val()){var s=a.val();$("div .insertDiv").remove();sequencer.sequences[s]?sequencer.sequences[s].length:sequencer.modules[s][1].length&&sequencer.modules[s][1].length,e.insertSteps(t+1,s).run({index:t}),setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var i=e.modulesInfo(),o='<div class="row insertDiv">        <div class="col-md-6" style="margin-top:5%">        <section id="insertStep" class="panel panel-primary">          <div class="form-inline">            <div class="panel-body">              <p class="info">Select a new module to add to your sequence.</p>              <div class="row center-align radio-group">                <div>                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="brightness">                    <i class="fa fa-sun-o fa-4x"></i>                  </button>                  <p>Brightness</p>                </div>                <div>                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="contrast">                    <i class="fa fa-adjust fa-4x"></i>                  </button>                  <p>Contrast</p>                </div>                <div>                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="saturation">                    <i class="fa fa-tint fa-4x"></i>                  </button>                  <p>Saturation</p>                </div>                <div>                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="rotate">                    <i class="fa fa-rotate-right fa-4x"></i>                  </button>                  <p>Rotate</p>                </div>                <div>                  <button type="button" class="btn btn-default btn-circle btn-xl radio" data-value="crop">                    <i class="fa fa-crop fa-4x"></i>                  </button>                  <p>Crop</p>                </div>              </div>              <div class="center-align">                <select class="form-control input-lg" id="selectStep">                  \x3c!-- The default null selection has been appended manually in demo.js                  This is because the options in select are overritten when options are appended.--\x3e                </select>                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>              </div>            </div>          </div>        </section>        </div>';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o);var r=$("#insertStep select");for(var l in r.html(""),i)void 0!==i[l]&&r.append('<option value="'+l+'">'+i[l].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),r.append('<option value="none" disabled selected>More modules...</option>'),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),r.val(newStep),a(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",a),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}$(document).ready(function(e){e(function(){e(window).scroll(function(){e(this).scrollTop()>100?e(".move-up").fadeIn():e(".move-up").fadeOut()}),e(".move-up button").click(function(){return e("body,html").animate({scrollTop:0},800),!1})})});const staticCacheName="image-sequencer-static-v3";function getUrlHashParameter(e){return getUrlHashParameters()[e]}function getUrlHashParameters(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function setUrlHashParameters(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,s){""!=e&&a.push(t[s]+"="+n[s])});var s=a.join("&");window.location.hash=s}function setUrlHashParameter(e,t){var n=getUrlHashParameters();n[e]=t,setUrlHashParameters(n)}self.addEventListener("install",e=>{console.log("Attempting to install service worker")}),self.addEventListener("activate",function(e){console.log("[ServiceWorker] Activate"),e.waitUntil(caches.keys().then(function(e){return Promise.all(e.filter(function(e){return e.startsWith("image-sequencer-")&&e!=staticCacheName}).map(function(e){return caches.delete(e)}))}))}),self.addEventListener("fetch",function(e){e.respondWith(caches.open(staticCacheName).then(function(t){return t.match(e.request).then(function(n){return n||fetch(e.request).then(function(n){return"GET"==e.request.method&&t.put(e.request,n.clone()),n})})}))}),window.onload=function(){function e(){var e=sequencer.modulesInfo();console.log(e);var t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('<option value="'+n+'">'+e[n].name+"</option>");t.append('<option value="none" disabled selected>More modules...</option>')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(DefaultHtmlStepUi(sequencer));var t=DefaultHtmlSequencerUi(sequencer);getUrlHashParameter("src")?sequencer.loadImage(getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),console.log(newStep),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;function a(e){$("#addStep img").remove();var t={brightness:"175",saturation:"0.5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(t).forEach(function(n,a){!function(e,t,n){var a=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)"),$("#addStep .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}a.loadImage(n,function(){a=a.addSteps("resize",{resize:"40%"}),"crop"===e?(console.log(t),a.addSteps(e,t).run(s)):a.addSteps(e,{[e]:t}).run(s)})}(n,Object.values(t)[a],e)})}$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),s=[],i=0;i<a.length;i++)s.push(a[i].src);var o={gifWidth:a[0].width,gifHeight:a[0].height,images:s,frameDuration:7};gifshot.createGIF(o,function(e){if(!e.error){var a=e.image,s=document.createElement("img");s.id="gif_element",s.src=a;var i=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(a,"index.gif","image/gif"),i.modal("hide")});var o=document.getElementById("js-download-modal-gif-container");o.innerHTML="",o.appendChild(s),i.modal(),t.disabled=!1,n=!1}})}catch(e){console.error(e),t.disabled=!1,n=!1}}}),sequencer.setInputStep({dropZoneSelector:"#dropzone",fileInputSelector:"#fileInput",takePhotoSelector:"#take-photo",onLoad:function(e){var t=e.target,n=sequencer.images.image1.steps[0];n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,a(t.result)},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),setupCache(),getUrlHashParameter("src")?a(getUrlHashParameter("src")):a("images/tulips.png")};
-=======
-!function(){return function e(t,n,a){function i(o,r){if(!n[o]){if(!t[o]){var l="function"==typeof require&&require;if(!r&&l)return l(o,!0);if(s)return s(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){return i(t[o][1][e]||e)},d,d.exports,e,t,n,a)}return n[o].exports}for(var s="function"==typeof require&&require,o=0;o<a.length;o++)i(a[o]);return i}}()({1:[function(e,t,n){var a=e("./lib/defaultHtmlSequencerUi.js"),i=e("./lib/cache.js"),s=e("./lib/defaultHtmlStepUi.js"),o=e("./lib/urlHash.js"),r=e("./lib/insertPreview.js");window.onload=function(){function e(){var e=sequencer.modulesInfo(),t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('<option value="'+n+'">'+e[n].name+"</option>");t.append('<option value="none" disabled selected>More modules...</option>')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(s(sequencer));var t=a(sequencer);o.getUrlHashParameter("src")?sequencer.loadImage(o.getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var a=document.getElementsByClassName("step-thumbnail"),i=[],s=0;s<a.length;s++)i.push(a[s].src);var o={gifWidth:a[0].width,gifHeight:a[0].height,images:i,frameDuration:7};gifshot.createGIF(o,function(e){if(!e.error){var a=e.image,i=document.createElement("img");i.id="gif_element",i.src=a;var s=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(a,"index.gif","image/gif"),s.modal("hide")});var o=document.getElementById("js-download-modal-gif-container");o.innerHTML="",o.appendChild(i),s.modal(),t.disabled=!1,n=!1}})}catch(e){console.error(e),t.disabled=!1,n=!1}}}),sequencer.setInputStep({dropZoneSelector:"#dropzone",fileInputSelector:"#fileInput",takePhotoSelector:"#take-photo",onLoad:function(e){var t=e.target,n=sequencer.images.image1.steps[0];IntermediateHtmlStepUi(sequencer);n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,r.updatePreviews(t.result,"addStep"),r.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,"insertStep")},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),i(),o.getUrlHashParameter("src")?r.updatePreviews(o.getUrlHashParameter("src"),"addStep"):r.updatePreviews("images/tulips.png","addStep")}},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/urlHash.js":7}],2:[function(e,t,n){t.exports=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})}},{}],3:[function(e,t,n){var a=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",i=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=a.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),a.setUrlHashParameter("steps",sequencer.toString())}function o(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return t.selectStepSel=t.selectStepSel||"#selectStep",{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),o()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(i).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),a.setUrlHashParameter("steps",sequencer.toString()),o()},addStepUi:function(){if("none"!=$(n+" select").val()){var i=$(n+" select").val(),s=1;sequencer.sequences[i]?s=sequencer.sequences[i].length:sequencer.modules[i][1].length&&(s=sequencer.modules[i][1].length),e.addSteps(i,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),$(n+" select").val("none"),o(),a.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var a=e("./intermediateHtmlStepUi.js"),i=e("./urlHash.js");function s(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function s(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' <i class="fa fa-info-circle" aria-hidden="true"></i> '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,o){t.options&&t.options.description&&(t.description=t.options.description),t.ui='      <div class="container">    <div class="row step">    <form class="input-form">    <div class="col-md-4 details">    <h3>    <span class = "toggle">'+t.name+' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span><span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></h3><div class="cal"><p><i>"'+(t.description||"")+'</i></p></div>    </div>    </form>    <div class="col-md-8 cal">    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>    </div>    </div>    </div>    </div>';var r=a(e,t),l=new DOMParser;if(t.ui=l.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var c=e.modulesInfo(t.name).inputs,d=e.modulesInfo(t.name).outputs,u=Object.assign(c,d);for(var p in u){var v=c.hasOwnProperty(p),m="",f=v?c[p]:{};if(v)if("select"==f.type.toLowerCase()){for(var h in m+='<select class="form-control target" name="'+p+'">',f.values)m+="<option>"+f.values[h]+"</option>";m+="</select>"}else{let e=t.options[p]||f.default;m='<input class="form-control target" type="'+f.type+'" name="'+p+'" value="'+e+'" placeholder ="'+(f.placeholder||""),"range"==f.type.toLowerCase()?m+='"min="'+f.min+'"max="'+f.max+'"step="'+f.step+'"><span>'+e+"</span>":m+='">'}else m+='<span class="output"></span>';var g=document.createElement("div");g.className="row",g.setAttribute("name",p);var S=c[p].desc||p;g.innerHTML="<div class='det cal'>                           <label for='"+p+"'>"+S+"</label>                           "+m+"                         </div>",t.ui.querySelector("div.details").appendChild(g)}$(t.ui.querySelector("div.details")).append('<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(l.parseFromString('<div class="cal"><div class="tools btn-group">    <button confirm="Are you sure?" class="remove btn btn btn-default">      <i class="fa fa-trash"></i>    </button>    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >      <i class="fa fa-plus"></i> Add    </button>    </div>    </div>',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){s("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){r.insertStep(t.ID)}),o.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[o.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var b=0,q=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),q&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),i.setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),q=!1,b=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,a,i;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),a=$(this).data("hasChangedBefore"),i=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=a?i?0:-1:i?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),i))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),$(t.ui.querySelector(".load-spin")).hide(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].contains(n)&&(t.linkElements[e].href=t.output);for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].download=t.name+"."+t.output.split("/")[1].split(";")[0],t.linkElements[e].target="_blank";if(e.modulesInfo().hasOwnProperty(t.name)){var a=e.modulesInfo(t.name).inputs,i=e.modulesInfo(t.name).outputs;for(var s in a)void 0!==t.options[s]&&("input"===a[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t.options[s]).data("initValue",t.options[s]),"select"===a[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] select')).val(t.options[s]).data("initValue",t.options[s]));for(var s in i)void 0!==t[s]&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t[s])}},onRemove:function(e){e.ui.remove(),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("div[class^=imgareaselect-]").remove()},onDraw:function(e){$(e.ui.querySelector(".load")).show(),$(e.ui.querySelector("img")).hide(),$(e.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down")&&$(e.ui.querySelector(".load-spin")).show()},notify:s}}"undefined"==typeof window&&(t.exports={DefaultHtmlStepUi:s}),t.exports=s},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(e,t,n){function a(e,t,n,a){var i=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)");$("#"+a+" .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}i.loadImage(n,function(){i=i.addSteps("resize",{resize:"40%"}),"crop"===e?i.addSteps(e,t).run(s):i.addSteps(e,{[e]:t}).run(s)})}t.exports={generatePreview:a,updatePreviews:function(e,t){$("#"+t+" img").remove();var n={brightness:"20",saturation:"5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(n).forEach(function(i,s){a(i,Object.values(n)[s],e,t)})}}},{}],6:[function(e,t,n){var a=e("./urlHash.js");t.exports=function(e,t,n){function i(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function s(t){n=n||{};var i=$("#insertStep select");if("none"!=i.val()){var s=i.val();$("div .insertDiv").remove(),sequencer.sequences[s]?sequencer.sequences[s].length:sequencer.modules[s][1].length&&sequencer.modules[s][1].length,e.insertSteps(t+1,s).run({index:t}),a.setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var a=e.modulesInfo(),o='<div class="row insertDiv">        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">        <section id="insertStep" class="panel panel-primary">          <div class="form-inline">            <div class="panel-body">              <p class="info">Select a new module to add to your sequence.</p>              <div class="row center-align radio-group">                <div>                <div class="radio" data-value="brightness">                <i class="fa fa-sun-o fa-4x i-over"></i>              </div>                  <p>Brightness</p>                </div>                <div>                <div class="radio" data-value="contrast">                <i class="fa fa-adjust fa-4x i-over"></i>              </div>                  <p>Contrast</p>                </div>                <div>                <div class="radio" data-value="saturation">                <i class="fa fa-tint fa-4x i-over i-small"></i>              </div>                  <p>Saturation</p>                </div>                <div>                <div class="radio" data-value="rotate">                <i class="fa fa-rotate-right fa-4x i-over"></i>              </div>                  <p>Rotate</p>                </div>                <div>                <div class="radio" data-value="crop">                <i class="fa fa-crop fa-4x i-over"></i>              </div>                  <p>Crop</p>                </div>              </div>              <div class="center-align">                <select class="form-control input-lg" id="selectStep">                  \x3c!-- The default null selection has been appended manually in demo.js                  This is because the options in select are overritten when options are appended.--\x3e                </select>                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>              </div>            </div>          </div>        </section>        </div>';o=(new DOMParser).parseFromString(o,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",o),updatePreviews(t.output,"insertStep");var r=$("#insertStep select");for(var l in r.html(""),a)void 0!==a[l]&&r.append('<option value="'+l+'">'+a[l].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),r.append('<option value="none" disabled selected>More modules...</option>'),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),r.val(newStep),i(),s(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",i),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){s(n)})},{insertStep:insertStep}}},{"./urlHash.js":7}],7:[function(e,t,n){function a(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function i(e){var t=Object.keys(e),n=Object.values(e),a=[];t.forEach(function(e,i){""!=e&&a.push(t[i]+"="+n[i])});var i=a.join("&");window.location.hash=i}t.exports={getUrlHashParameter:function(e){return a()[e]},setUrlHashParameter:function(e,t){var n=a();n[e]=t,i(n)},getUrlHashParameters:a,setUrlHashParameters:i}},{}]},{},[1]);
->>>>>>> Stashed changes
+!function(){return function e(t,n,i){function a(o,r){if(!n[o]){if(!t[o]){var l="function"==typeof require&&require;if(!r&&l)return l(o,!0);if(s)return s(o,!0);var c=new Error("Cannot find module '"+o+"'");throw c.code="MODULE_NOT_FOUND",c}var d=n[o]={exports:{}};t[o][0].call(d.exports,function(e){return a(t[o][1][e]||e)},d,d.exports,e,t,n,i)}return n[o].exports}for(var s="function"==typeof require&&require,o=0;o<i.length;o++)a(i[o]);return a}}()({1:[function(e,t,n){var i=e("./lib/defaultHtmlSequencerUi.js"),a=e("./lib/cache.js"),s=e("./lib/intermediateHtmlStepUi.js"),o=e("./lib/defaultHtmlStepUi.js"),r=e("./lib/urlHash.js"),l=e("./lib/insertPreview.js");window.onload=function(){function e(){var e=sequencer.modulesInfo(),t=$("#addStep select");for(var n in t.html(""),e)e[n]&&e[n].name&&t.append('<option value="'+n+'">'+e[n].name+"</option>");t.append('<option value="none" disabled selected>More modules...</option>')}sequencer=ImageSequencer(),e(),$(window).on("scroll",function(){var e=$("body").scrollTop()>20||$(":root").scrollTop()>20;$("#move-up").css({display:e?"block":"none"})}),$("#move-up").on("click",function(){$("body").animate({scrollTop:0}),$(":root").animate({scrollTop:0})}),sequencer.setUI(o(sequencer));var t=i(sequencer);r.getUrlHashParameter("src")?sequencer.loadImage(r.getUrlHashParameter("src"),t.onLoad):sequencer.loadImage("images/tulips.png",t.onLoad);$("#addStep select").on("change",t.selectNewStepUi),$("#addStep #add-step-btn").on("click",t.addStepUi),$("#resetButton").on("click",function(){confirm("Do you want to reset the sequence?")&&(window.location="/")}),$(".radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),$("#addStep select").val(newStep),t.selectNewStepUi(),t.addStepUi(),$(this).removeClass("selected")}),$("#download-btn").click(function(){return $(".step-thumbnail:last()").trigger("click"),!1}),$("body").on("click","button.remove",t.removeStepUi),$("#save-seq").click(()=>{var t=window.prompt("Please give a name to your sequence... (Saved sequence will only be available in this browser).");t&&(t+=" (local)",sequencer.saveSequence(t,sequencer.toString()),sequencer.loadModules(),$(".savesequencemsg").fadeIn(),setTimeout(function(){$(".savesequencemsg").fadeOut()},1e3),e())});var n=!1;$(".js-view-as-gif").on("click",function(e){if(!n){n=!0;var t=e.target;t.disabled=!0;try{for(var i=document.getElementsByClassName("step-thumbnail"),a=[],s=0;s<i.length;s++)a.push(i[s].src);var o={gifWidth:i[0].width,gifHeight:i[0].height,images:a,frameDuration:7};gifshot.createGIF(o,function(e){if(!e.error){var i=e.image,a=document.createElement("img");a.id="gif_element",a.src=i;var s=$("#js-download-gif-modal");$("#js-download-as-gif-button").one("click",function(){download(i,"index.gif","image/gif"),s.modal("hide")});var o=document.getElementById("js-download-modal-gif-container");o.innerHTML="",o.appendChild(a),s.modal(),t.disabled=!1,n=!1}})}catch(e){console.error(e),t.disabled=!1,n=!1}}}),sequencer.setInputStep({dropZoneSelector:"#dropzone",fileInputSelector:"#fileInput",takePhotoSelector:"#take-photo",onLoad:function(e){var t=e.target,n=sequencer.images.image1.steps[0];s(sequencer);n.output.src=t.result,sequencer.run({index:0}),n.options.step.imgElement.src=t.result,l.updatePreviews(t.result,"addStep"),l.updatePreviews(sequencer.images.image1.steps[0].options.step.imgElement.src,"insertStep")},onTakePhoto:function(e){var t=sequencer.images.image1.steps[0];t.output.src=e,sequencer.run({index:0}),t.options.step.imgElement.src=e}}),a(),r.getUrlHashParameter("src")?l.updatePreviews(r.getUrlHashParameter("src"),"addStep"):l.updatePreviews("images/tulips.png","addStep")}},{"./lib/cache.js":2,"./lib/defaultHtmlSequencerUi.js":3,"./lib/defaultHtmlStepUi.js":4,"./lib/insertPreview.js":5,"./lib/intermediateHtmlStepUi.js":6,"./lib/urlHash.js":7}],2:[function(e,t,n){t.exports=function(){"serviceWorker"in navigator&&navigator.serviceWorker.register("sw.js",{scope:"/examples/"}).then(function(e){const t=e.installing;t.onstatechange=(()=>{console.log(t),"installed"===t.state&&location.reload()}),console.log("Registration successful, scope is:",e.scope)}).catch(function(e){console.log("Service worker registration failed, error:",e)}),"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){$("#clear-cache").append(" "+e)})}),$("#clear-cache").click(function(){"serviceWorker"in navigator&&caches.keys().then(function(e){e.forEach(function(e){caches.delete(e)})}),location.reload()})}},{}],3:[function(e,t,n){var i=e("./urlHash.js");t.exports=function(e,t){var n=(t=t||{}).addStepSel=t.addStepSel||"#addStep",a=t.removeStepSel=t.removeStepSel||"button.remove";function s(){var t=i.getUrlHashParameter("steps");t&&(e.importString(t),e.run({index:0})),i.setUrlHashParameter("steps",sequencer.toString())}function o(){sequencer.images.image1.steps.length<2?$(" #save-seq").prop("disabled",!0):$(" #save-seq").prop("disabled",!1)}return t.selectStepSel=t.selectStepSel||"#selectStep",{onLoad:function(){s(),$("#selectStep").val()||$(n+" #add-step-btn").prop("disabled",!0),o()},importStepsFromUrlHash:s,selectNewStepUi:function(){var t=$(n+" select").val();$(n+" .info").html(e.modulesInfo(t).description),$(n+" #add-step-btn").prop("disabled",!1)},removeStepUi:function(){var e=$(a).index(this)+1;sequencer.removeSteps(e).run({index:e-1}),i.setUrlHashParameter("steps",sequencer.toString()),o()},addStepUi:function(){if("none"!=$(n+" select").val()){var a=$(n+" select").val(),s=1;sequencer.sequences[a]?s=sequencer.sequences[a].length:sequencer.modules[a][1].length&&(s=sequencer.modules[a][1].length),e.addSteps(a,t).run({index:e.images.image1.steps.length-s-1}),$(n+" .info").html("Select a new module to add to your sequence."),$(n+" select").val("none"),o(),i.setUrlHashParameter("steps",e.toString())}}}}},{"./urlHash.js":7}],4:[function(e,t,n){var i=e("./intermediateHtmlStepUi.js"),a=e("./urlHash.js");function s(e,t){var n=(t=t||{}).stepsEl||document.querySelector("#steps");t.selectStepSel=t.selectStepSel||"#selectStep";function s(e,t){if(0==$("#"+t).length){var n=document.createElement("span");n.innerHTML=' <i class="fa fa-info-circle" aria-hidden="true"></i> '+e,n.id=t,n.classList.add("notification"),$("body").append(n)}$("#"+t).fadeIn(500).delay(200).fadeOut(500)}return{getPreview:function(){return step.imgElement},onSetup:function(t,o){t.options&&t.options.description&&(t.description=t.options.description),t.ui='      <div class="container">    <div class="row step">    <form class="input-form">    <div class="col-md-4 details">    <h3>    <span class = "toggle">'+t.name+' <i class="fa fa-caret-up toggleIcon" aria-hidden="true"></i></span><span class="load-spin" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></span></h3><div class="cal"><p><i>"'+(t.description||"")+'</i></p></div>    </div>    </form>    <div class="col-md-8 cal">    <div class="load" style="display:none;"><i class="fa fa-circle-o-notch fa-spin"></i></div>    <a><img alt="" style="max-width=100%" class="img-thumbnail step-thumbnail"/></a>    </div>    </div>    </div>    </div>';var r=i(e,t),l=new DOMParser;if(t.ui=l.parseFromString(t.ui,"text/html"),t.ui=t.ui.querySelector("div.container"),t.linkElements=t.ui.querySelectorAll("a"),t.imgElement=t.ui.querySelector("a img"),e.modulesInfo().hasOwnProperty(t.name)){var c=e.modulesInfo(t.name).inputs,d=e.modulesInfo(t.name).outputs,u=Object.assign(c,d);for(var p in u){var v=c.hasOwnProperty(p),m="",f=v?c[p]:{};if(v)if("select"==f.type.toLowerCase()){for(var h in m+='<select class="form-control target" name="'+p+'">',f.values)m+="<option>"+f.values[h]+"</option>";m+="</select>"}else{let e=t.options[p]||f.default;m='<input class="form-control target" type="'+f.type+'" name="'+p+'" value="'+e+'" placeholder ="'+(f.placeholder||""),"range"==f.type.toLowerCase()?m+='"min="'+f.min+'"max="'+f.max+'"step="'+f.step+'"><span>'+e+"</span>":m+='">'}else m+='<span class="output"></span>';var g=document.createElement("div");g.className="row",g.setAttribute("name",p);var S=c[p].desc||p;g.innerHTML="<div class='det cal'>                           <label for='"+p+"'>"+S+"</label>                           "+m+"                         </div>",t.ui.querySelector("div.details").appendChild(g)}$(t.ui.querySelector("div.details")).append('<div class="cal"><p><button type="submit" class="btn btn-default btn-save" disabled = "true" >Apply</button><span> Press apply to see changes</span></p></div>')}"load-image"!=t.name?(t.ui.querySelector("div.details").appendChild(l.parseFromString('<div class="cal"><div class="tools btn-group">    <button confirm="Are you sure?" class="remove btn btn btn-default">      <i class="fa fa-trash"></i>    </button>    <button class="btn  insert-step" style="margin-left:10px;border-radius:6px;background-color:#fff;border:solid #bababa 1.1px;" >      <i class="fa fa-plus"></i> Add    </button>    </div>    </div>',"text/html").querySelector("div")),$(t.ui.querySelectorAll(".remove")).on("click",function(){s("Step Removed","remove-notification")}),$(t.ui.querySelectorAll(".insert-step")).on("click",function(){r.insertStep(t.ID)}),o.index==e.images.image1.steps.length?(n.appendChild(t.ui),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("#steps .container:nth-last-child(2)")&&$("#steps .container:nth-last-child(2) .insert-step").prop("disabled",!1)):n.insertBefore(t.ui,$(n).children()[o.index])):$("#load-image").append(t.ui),$(t.ui.querySelector(".toggle")).on("click",()=>{$(t.ui.querySelector(".toggleIcon")).toggleClass("fa-caret-up").toggleClass("fa-caret-down"),$(t.ui.querySelectorAll(".cal")).toggleClass("collapse")});var b=0,q=!1;$(t.ui.querySelector(".input-form")).on("submit",function(n){n.preventDefault(),q&&($(t.ui.querySelector("div.details")).find("input,select").each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1),t.options[$(n).attr("name")]=$(n).val()}),e.run({index:t.index-1}),a.setUrlHashParameter("steps",e.toString()),$(t.ui.querySelector(".btn-save")).prop("disabled",!0),q=!1,b=0)}),$(t.ui.querySelectorAll(".target")).each(function(e,n){$(n).data("initValue",$(n).val()).data("hasChangedBefore",!1).on("input",function(){var e,n,i,a;$(this).focus().data("hasChangedBefore",(e=$(this).val(),n=$(this).data("initValue"),i=$(this).data("hasChangedBefore"),a=!(isNaN(n)||isNaN(e)?e===n:e-n==0),q=(b+=i?a?0:-1:a?1:0)>0,$(t.ui.querySelector(".btn-save")).prop("disabled",!q),a))})}),$('input[type="range"]').on("input",function(){$(this).next().html($(this).val())})},onComplete:function(t){$(t.ui.querySelector(".load")).hide(),$(t.ui.querySelector("img")).show(),$(t.ui.querySelector(".load-spin")).hide(),t.imgElement.src=t.output;var n=t.ui.querySelector(".img-thumbnail");for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].contains(n)&&(t.linkElements[e].href=t.output);for(let e=0;e<t.linkElements.length;e++)t.linkElements[e].download=t.name+"."+t.output.split("/")[1].split(";")[0],t.linkElements[e].target="_blank";if(e.modulesInfo().hasOwnProperty(t.name)){var i=e.modulesInfo(t.name).inputs,a=e.modulesInfo(t.name).outputs;for(var s in i)void 0!==t.options[s]&&("input"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t.options[s]).data("initValue",t.options[s]),"select"===i[s].type.toLowerCase()&&$(t.ui.querySelector('div[name="'+s+'"] select')).val(t.options[s]).data("initValue",t.options[s]));for(var s in a)void 0!==t[s]&&$(t.ui.querySelector('div[name="'+s+'"] input')).val(t[s])}},onRemove:function(e){e.ui.remove(),$("#steps .container:nth-last-child(1) .insert-step").prop("disabled",!0),$("div[class^=imgareaselect-]").remove()},onDraw:function(e){$(e.ui.querySelector(".load")).show(),$(e.ui.querySelector("img")).hide(),$(e.ui.querySelector(".toggleIcon")).hasClass("fa-caret-down")&&$(e.ui.querySelector(".load-spin")).show()},notify:s}}"undefined"==typeof window&&(t.exports={DefaultHtmlStepUi:s}),t.exports=s},{"./intermediateHtmlStepUi.js":6,"./urlHash.js":7}],5:[function(e,t,n){function i(e,t,n,i){var a=ImageSequencer();function s(t){var n=document.createElement("img");n.classList.add("img-thumbnail"),n.classList.add("no-border"),n.src=t,$(n).css("max-width","200%"),$(n).css("transform","translateX(-20%)");$("#"+i+" .row").find("div").each(function(){$(this).find("div").attr("data-value")===e&&$(this).find("div").append(n)})}a.loadImage(n,function(){a=a.addSteps("resize",{resize:"40%"}),"crop"===e?a.addSteps(e,t).run(s):a.addSteps(e,{[e]:t}).run(s)})}t.exports={generatePreview:i,updatePreviews:function(e,t){$("#"+t+" img").remove();var n={brightness:"20",saturation:"5",rotate:90,contrast:90,crop:{x:0,y:0,w:"(50%)",h:"(50%)",noUI:!0}};Object.keys(n).forEach(function(a,s){i(a,Object.values(n)[s],e,t)})}}},{}],6:[function(e,t,n){var i=e("./urlHash.js"),a=e("./insertPreview.js");t.exports=function(e,t,n){function s(){var t=$("#insertStep select").val();$("#insertStep .info").html(e.modulesInfo(t).description),$("#insertStep #add-step-btn").prop("disabled",!1)}function o(t){n=n||{};var a=$("#insertStep select");if("none"!=a.val()){var s=a.val();$("div .insertDiv").remove(),sequencer.sequences[s]?sequencer.sequences[s].length:sequencer.modules[s][1].length&&sequencer.modules[s][1].length,e.insertSteps(t+1,s).run({index:t}),i.setUrlHashParameter("steps",e.toString())}}return insertStep=function(n){var i=e.modulesInfo(),r='<div class="row insertDiv">        <div class="col-md-6 col-md-offset-2" style="margin-top:5%">        <section id="insertStep" class="panel panel-primary">          <div class="form-inline">            <div class="panel-body">              <p class="info">Select a new module to add to your sequence.</p>              <div class="row center-align radio-group">                <div>                <div class="radio" data-value="brightness">                <i class="fa fa-sun-o fa-4x i-over"></i>              </div>                  <p>Brightness</p>                </div>                <div>                <div class="radio" data-value="contrast">                <i class="fa fa-adjust fa-4x i-over"></i>              </div>                  <p>Contrast</p>                </div>                <div>                <div class="radio" data-value="saturation">                <i class="fa fa-tint fa-4x i-over i-small"></i>              </div>                  <p>Saturation</p>                </div>                <div>                <div class="radio" data-value="rotate">                <i class="fa fa-rotate-right fa-4x i-over"></i>              </div>                  <p>Rotate</p>                </div>                <div>                <div class="radio" data-value="crop">                <i class="fa fa-crop fa-4x i-over"></i>              </div>                  <p>Crop</p>                </div>              </div>              <div class="center-align">                <select class="form-control input-lg" id="selectStep">                  \x3c!-- The default null selection has been appended manually in demo.js                  This is because the options in select are overritten when options are appended.--\x3e                </select>                <button class="btn btn-success btn-lg" name="add" id="add-step-btn">Add Step</button>              </div>            </div>          </div>        </section>        </div>';r=(new DOMParser).parseFromString(r,"text/html").querySelector("div"),t.ui.querySelector("div.step").insertAdjacentElement("afterend",r),a.updatePreviews(t.output,"insertStep");var l=$("#insertStep select");for(var c in l.html(""),i)void 0!==i[c]&&l.append('<option value="'+c+'">'+i[c].name+"</option>");$("#insertStep #add-step-btn").prop("disabled",!0),l.append('<option value="none" disabled selected>More modules...</option>'),$("#insertStep .radio-group .radio").on("click",function(){$(this).parent().find(".radio").removeClass("selected"),$(this).addClass("selected"),newStep=$(this).attr("data-value"),l.val(newStep),s(),o(n),$(this).removeClass("selected")}),$(t.ui.querySelector("#insertStep select")).on("change",s),$(t.ui.querySelector("#insertStep #add-step-btn")).on("click",function(){o(n)})},{insertStep:insertStep}}},{"./insertPreview.js":5,"./urlHash.js":7}],7:[function(e,t,n){function i(){var e=window.location.hash;e&&(e=e.split("#")[1]);var t={};return e.split("&").forEach(function(e,n){""!=(e=e.split("="))[0]&&(t[e[0]]=e[1])}),t}function a(e){var t=Object.keys(e),n=Object.values(e),i=[];t.forEach(function(e,a){""!=e&&i.push(t[a]+"="+n[a])});var a=i.join("&");window.location.hash=a}t.exports={getUrlHashParameter:function(e){return i()[e]},setUrlHashParameter:function(e,t){var n=i();n[e]=t,a(n)},getUrlHashParameters:i,setUrlHashParameters:a}},{}]},{},[1]);
\ No newline at end of file
diff --git a/examples/demo.js b/examples/demo.js
index 287c84fc..d2b200c1 100644
--- a/examples/demo.js
+++ b/examples/demo.js
@@ -1,5 +1,6 @@
 var defaultHtmlSequencerUi = require('./lib/defaultHtmlSequencerUi.js'),
     setupCache = require('./lib/cache.js'),
+    intermediateHtmlStepUi = require('./lib/intermediateHtmlStepUi.js'),
     DefaultHtmlStepUi = require('./lib/defaultHtmlStepUi.js'),
     urlHash = require('./lib/urlHash.js'),
     insertPreview = require('./lib/insertPreview.js');
@@ -186,7 +187,7 @@ window.onload = function() {
     onLoad: function onFileReaderLoad(progress) {
       var reader = progress.target;
       var step = sequencer.images.image1.steps[0];
-      var util=IntermediateHtmlStepUi(sequencer);
+      var util= intermediateHtmlStepUi(sequencer);
       step.output.src = reader.result;
       sequencer.run({ index: 0 });
       step.options.step.imgElement.src = reader.result;
diff --git a/examples/lib/intermediateHtmlStepUi.js b/examples/lib/intermediateHtmlStepUi.js
index 6222c506..591c0b4c 100644
--- a/examples/lib/intermediateHtmlStepUi.js
+++ b/examples/lib/intermediateHtmlStepUi.js
@@ -1,4 +1,6 @@
-var urlHash = require('./urlHash.js');
+var urlHash = require('./urlHash.js'),
+    insertPreview = require('./insertPreview.js');
+
 function IntermediateHtmlStepUi(_sequencer, step, options) {
   function stepUI() {
     return '<div class="row insertDiv">\
@@ -68,7 +70,7 @@ function IntermediateHtmlStepUi(_sequencer, step, options) {
       .insertAdjacentElement('afterend',
         addStepUI
       );
-      updatePreviews(step.output,'insertStep');
+    insertPreview.updatePreviews(step.output,'insertStep');
     var insertStepSelect = $("#insertStep select");
     insertStepSelect.html("");
     // Add modules to the insertStep dropdown