diff --git a/app/assets/javascripts/capture.js b/app/assets/javascripts/capture.js
index eb5632bce..9f17ec950 100644
--- a/app/assets/javascripts/capture.js
+++ b/app/assets/javascripts/capture.js
@@ -1,5 +1,15 @@
 //= require graph.js
-// window.webcam.getCameraList()
+flotoptions = {"crosshair":{"mode":"x"},"series":{"lines":{"show":true,"lineWidth":1}},"yaxis":{"show":true,"max":100,"min":0},"xaxis":{"show":false},"shadowSize":0,"threshold":{"below":0,"color":"#a00"},"grid":{"clickable":true,"hoverable":true,"borderWidth":0,"color":"#ccc","backgroundColor":"#111"},"colors":["#ffffff","rgba(255,0,0,0.3)","rgba(0,255,0,0.3)","rgba(0,0,255,0.3)","#ffff00"]}
+
+  flotoptions.grid = {
+    clickable: true,
+    hoverable:true,
+    borderWidth: 0,
+    color: "#ccc",
+    backgroundColor: "#111"
+  }
+  flotoptions.colors = [ "#ccc", "#E02130", "#FAB243", "#429867", "#2B5166" ]//, "#482344" ]
+
 $W = {
   data: null,
   baseline: null,
@@ -18,6 +28,38 @@ $W = {
   // width: 1280,
   // height: 720,
   frame: 0,
+  defaultConstraints: {
+    audio: false,
+    video: {
+      facingMode: "environment"
+    }
+  },
+
+  getUserMedia: function(options) {
+    AdapterJS.webRTCReady(() => {
+      // The WebRTC API is ready.
+      const container = document.getElementById('webcam'),
+            video = document.createElement('video');
+      
+      container.appendChild(video);
+      video.autoplay = true;
+      video.id = 'webcam-video'
+      
+      const successCallback = stream => {
+        $('#heightIndicator').show()
+        $('#webcam-msg').hide()
+        attachMediaStream(video, stream)
+        if ($W.flipped == true) {
+          $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
+          $W.flip_horizontal();
+        }
+      };
+  
+      const errorCallback = () => console.warn(error);
+  
+      getUserMedia($W.defaultConstraints, successCallback, errorCallback);
+    });
+  },
 
   initialize: function(args) {
     this.mobile = args['mobile'] || false
@@ -41,9 +83,8 @@ $W = {
     }
     this.setSampleRow(this.sample_start_row)
 
-    getUserMedia(this.options, this.success, this.deviceError)
+    this.getUserMedia(this.options, this.success, this.deviceError)
 
-    window.webcam = this.options
     this.canvas = document.getElementById("canvas")
     $('canvas').width = this.width+"px"
     this.canvas.width = this.width
@@ -80,99 +121,9 @@ $W = {
     }
   },
 
-  success: function (stream) {
-    //console.log('success')
-    if ($W.options.context === 'webrtc') {
-      $('#heightIndicator').show()
-      $('#webcam-msg').hide()
-      var video = $W.options.videoEl, vendorURL = window.URL || window.webkitURL;
-      window.stream = stream
-      window.video = video
-      if (navigator.mozGetUserMedia) video.mozSrcObject = stream;
-      else video.srcObject = stream;
-      video.onerror = function (e) {
-        stream.stop();
-      };
-      //video.play()
-      // flip image horiz. based on init terms
-      if ($W.flipped == true) {
-        $W.flipped = false; // <= turn it false because f_h() will toggle it. messy.
-        $W.flip_horizontal();
-      }
-    } else {
-      //flash context
-      console.log('flash or something else')
-    }
-  },
   deviceError: function (error) {
     //console.log(error)
   },
-  // options contains the configuration information for the shim
-  // it allows us to specify the width and height of the video
-  // output we're working with, the location of the fallback swf,
-  // events that are triggered onCapture and onSave (for the fallback)
-  // and so on.
-  options: {
-
-    "audio": false,
-    "video": true,
-
-    // the element (by id) you wish to apply
-    el: "webcam",
-
-    extern: null,
-    append: true,
-
-    // the recommended mode to be used is 'callback '
-    // where a callback is executed once data
-    // is available
-    mode: "callback",
-
-    // the flash fallback Url
-    swffile: "/javascripts/webcam-fallback/jscam_canvas_only.swf",
-
-    // quality of the fallback stream
-    quality: 100,
-    context: "",
-
-    debug: function () {},
-
-    // callback for capturing the fallback stream
-    onCapture: function () {
-      window.webcam.save();
-    },
-    onTick: function () {},
-
-    // callback for saving the stream, useful for
-    // relaying data further.
-    onSave: function (data) {
-      // in progress for Flash now
-      // seems to execute 240 times... once for each column?
-      var col = data.split(";"),
-        img = $W.canvas.getContext('2d').getImageData(0, 0, this.width, this.height);
-        tmp = null,
-        w = this.width,
-        h = this.height;
-
-      for (var i = 0; i < w; i++) {
-        tmp = parseInt(col[i], 10);
-        img.data[$W.pos + 0] = (tmp >> 16) & 0xff;
-        img.data[$W.pos + 1] = (tmp >> 8) & 0xff;
-        img.data[$W.pos + 2] = tmp & 0xff;
-        img.data[$W.pos + 3] = 0xff;
-        $W.pos += 4;
-      }
-
-      if ($W.pos >= 4 * w * $W.sample_height) {
-        $W.canvas.getContext('2d').putImageData(img, 0, 0);
-        $W.ctx.drawImage(img, 0, 0);
-        $W.pos = 0;
-      }
-
-    },
-    onLoad: function () {}
-  },
-
   // Draws the appropriate pixels onto the top row of the waterfall.
   // Override this if you want a non-linear cross section or somethine
   // else special! <video> is the video element
@@ -208,151 +159,261 @@ $W = {
     }
   },
 
-  getRow: function(y) {
-    $W.frame += 1
-    if ($W.options.context === 'webrtc') {
-      var video = $('video')[0];
-      // Grab the existing canvas:
-      var saved = $W.excerptCanvas(0,0,$W.width,$W.height,$W.ctx).getImageData(0,0,$W.width,$W.height)
+  geolocate: function() {
+    if (navigator.geolocation) {
+      navigator.geolocation.getCurrentPosition($W.setGeolocation)
+      return true
+    }
+  },
+  setGeolocation: function(loc) {
+    if (loc.coords) {
+      $('#lat').val(loc.coords.latitude)
+      $('#lon').val(loc.coords.longitude)
+    }
+    else {
+      $('#lat').val(loc.latitude)
+      $('#lon').val(loc.longitude)
+    }
+  },
+
+  auto_detect_sample_row: function() {
+        
+    // We need a separate canvas to draw the snapshot, whenever we try to auto detect the sample row.
+    if ($('#autoDetectCanvas').length == 0) {
+      $('body').append("<canvas style='display:none;' id='autoDetectCanvas'></canvas>")
+    }
+
+    var video = document.getElementsByTagName('video')[0]
+    var canvas = document.getElementById('autoDetectCanvas')
+    canvas.height = $W.height
+    canvas.width = $W.width
+    var context = canvas.getContext('2d')
 
-      // manipulate the canvas to get the image to copy onto the canvas in the right orientation
-      $W.ctx.save()
-      $W.getCrossSection(video)
-      $W.ctx.restore()
+    context.drawImage(video, 0, 0)
 
-      // draw old data 1px below new row of data:
-      $W.ctx.putImageData(saved,0,1)
-    } else if($W.options.context === 'flash'){
-      window.webcam.capture();
-    } else {
-      console.log('No context was supplied to getSnapshot()');
+    img = context.getImageData(0,0,$W.width,$W.height)
+
+    var detected = []
+    var max_avg_intensity = 0
+    var selected_row = -1
+
+    for (var row = 0; row < $W.height; row++) {
+
+      var red_vals = {"low":10000, "high": -10000}
+      var green_vals = {"low":10000, "high": -10000}
+      var blue_vals = {"low":10000, "high": -10000}
+      var intensity_vals = {"low":10000, "high": -10000}
+
+      var vals = [red_vals, green_vals, blue_vals, intensity_vals]
+      var sum_intensity = 0
+      var count_intensity = 0
+
+      for (var col = 0; col < $W.width; col++) { 
+        var red = img.data[((row*(img.width*4)) + (col*4)) + 0]
+        var green = img.data[((row*(img.width*4)) + (col*4)) + 1]
+        var blue = img.data[((row*(img.width*4)) + (col*4)) + 2]
+        var intensity = (red+green+blue)/3
+
+        var bands = [red, green, blue, intensity]
+
+        $.each(vals, function(index, val){
+          if (val["low"] > bands[index]) val["low"] = bands[index]
+          if (val["high"] < bands[index]) val["high"] = bands[index]
+        })
+        
+        sum_intensity += intensity
+        count_intensity++
+      }
+
+      // If we need intensity diffs, 
+      // diff = intensity_vals["high"] - intensity_vals["low"]
+      
+      diff = red_vals["high"] - red_vals["low"]
+      
+      //console.log(diff)
+      if (diff > 20) {
+        detected.push(row)
+        var avg_intensity = parseInt(sum_intensity / count_intensity)
+        if (avg_intensity < 255 && max_avg_intensity < avg_intensity) {
+            selected_row = row
+            max_avg_intensity = avg_intensity
+        }        
+      }
     }
 
-    // populate the sidebar preview if there's a "preview" element:
-    if ($('#preview').length > 0) {
+    if (selected_row > -1) $W.setSampleRows(selected_row, selected_row+1);
+    else console.log('AutoDetectSampleRow: Increase light intensity and try again!')
+  },
+
+  toggle_rotation: function() {
+    
+  $W.rotated = !$W.rotated
+  if ($W.rotated == true) $('.btn-rotate').addClass('active');
+  else                    $('.btn-rotate').removeClass('active');
+  var style = $('#heightIndicator')[0].style
+  var stylePrev = $('#heightIndicatorPrev')[0].style
+  if ($W.rotated) {
+    style.marginTop = '0px';
+    style.borderBottomWidth = "0px"
+    style.borderRightWidth = "2px"
+    style.height = "240px"
+    style.width = "0px"
+    stylePrev.marginTop = '0px';
+    stylePrev.borderBottomWidth = "0px"
+    stylePrev.borderRightWidth = "2px"
+    stylePrev.height = "100px"
+    stylePrev.width = "0px"
+    $('#heightIndicator .vertical').show();
+    $('#heightIndicator .horizontal').hide();
+    $('.spectrum-example-horizontal').hide();
+    $('.spectrum-example-vertical').show();
+  } else {
+    style.marginLeft = '0px';
+    style.borderBottomWidth = "2px"
+    style.borderRightWidth = "0px"
+    style.width = "320px"
+    style.height = "0px"
+    stylePrev.marginLeft = '0px';
+    stylePrev.borderBottomWidth = "2px"
+    stylePrev.borderRightWidth = "0px"
+    stylePrev.width = "100%"
+    stylePrev.height = "0px"
+    $('#heightIndicator .vertical').hide();
+    $('#heightIndicator .horizontal').show();
+    $('.spectrum-example-horizontal').show();
+    $('.spectrum-example-vertical').hide();
+  }
+  // reset the indicator to the correct sample row:
+  $W.setSampleRows($W.sample_start_row,$W.sample_start_row)
+  },
+
+  getRow: function() {
+  $W.frame += 1
+  var video = $('video')[0];
+  // Grab the existing canvas:
+  var saved =  $W.excerptCanvas(0,0, $W.width, $W.height, $W.ctx).getImageData(0,0, $W.width, $W.height)
+
+  // manipulate the canvas to get the image to copy onto the canvas in the right orientation
+  $W.ctx.save()
+  $W.getCrossSection(video)
+  $W.ctx.restore()
+
+  // draw old data 1px below new row of data:
+  $W.ctx.putImageData(saved,0,1)
+
+
+  // populate the sidebar preview if there's a "preview" element:
+  if ($('#preview').length > 0) {
       $W.preview_ctx.canvas.width = $('#preview').width()
       $W.preview_ctx.canvas.height = $('#preview').width()*0.75
-      $('#preview').height($('#preview').width()*0.75)
-      if ($W.flipped) {
+    $('#preview').height($('#preview').width()*0.75)
+    if ( $W.flipped) {
         $W.preview_ctx.translate($('#preview').width(),0)
         $W.preview_ctx.scale(-1,1)
-      }
+    }
       $W.preview_ctx.drawImage($('video')[0],0,0,$('#preview').width(),$('#preview').width()*0.75)
-      if ($W.rotated != true) $("#heightIndicatorPrev").width($('#sidebar').width())
+    if ( $W.rotated != true) $("#heightIndicatorPrev").width($('#sidebar').width())
       $W.resetHeightIndicators(false)
-    }
+  }
 
-    // get the slice of data
-    img = $W.ctx.getImageData(0,0,$W.canvas.width,$W.sample_height)
+  // get the slice of data
+  img =  $W.ctx.getImageData(0,0, $W.canvas.width, $W.sample_height)
 
-    // use it to generate a graph
-    if ($W.mode == "average") {
+  // use it to generate a graph
+  if ( $W.mode == "average") {
       $W.data[0] = {label: "Webcam",data:[]}
-    } else if ($W.mode == "rgb") {
+  } else if ( $W.mode == "rgb") {
       $W.data[0] = {label: "R",data:[]}
       $W.data[1] = {label: "G",data:[]}
       $W.data[2] = {label: "B",data:[]}
-    } else if ($W.mode == "combined") {
+  } else if ( $W.mode == "combined") {
       $W.data[0] = {label: "Combined",data:[]}
       $W.data[1] = {label: "R",data:[]}
       $W.data[2] = {label: "G",data:[]}
       $W.data[3] = {label: "B",data:[]}
       $W.data[4] = {label: "Overexposed",data:[]}
-    }
+  }
 
-    // store it in the "raw" data store too
+  // store it in the "raw" data store too
     $W.full_data = []
-    for (var col = 0; col < $W.canvas.width; col++) {
-      var red = 0
-      for (row=0;row<$W.sample_height;row++) {
-         red += img.data[((row*(img.width*4)) + (col*4)) + 0]
-      }
-      red /= $W.sample_height
-      var green = 0
-      for (row=0;row<$W.sample_height;row++) {
-         green += img.data[((row*(img.width*4)) + (col*4)) + 1]
-      }
-      green /= $W.sample_height
-      var blue = 0
-      for (row=0;row<$W.sample_height;row++) {
-         blue += img.data[((row*(img.width*4)) + (col*4)) + 2]
-      }
-      blue /= $W.sample_height
-      var intensity = (red+blue+green)/3
+  for (var col = 0; col <  $W.canvas.width; col++) {
+    var red = 0
+    for (row=0;row< $W.sample_height;row++) {
+        red += img.data[((row*(img.width*4)) + (col*4)) + 0]
+    }
+    red /=  $W.sample_height
+    var green = 0
+    for (row=0;row< $W.sample_height;row++) {
+        green += img.data[((row*(img.width*4)) + (col*4)) + 1]
+    }
+    green /=  $W.sample_height
+    var blue = 0
+    for (row=0;row< $W.sample_height;row++) {
+        blue += img.data[((row*(img.width*4)) + (col*4)) + 2]
+    }
+    blue /=  $W.sample_height
+    var intensity = (red+blue+green)/3
       $W.full_data.push([red,green,blue,intensity])
-      if (!$W.calibrated) {
-        if ($W.mode == "average") {
+    if (! $W.calibrated) {
+      if ( $W.mode == "average") {
           $W.data[0].data.push([col,intensity/2.55])
-        } else if ($W.mode == "rgb") {
+      } else if ( $W.mode == "rgb") {
           $W.data[0].data.push([col,red/2.55])
           $W.data[1].data.push([col,green/2.55])
           $W.data[2].data.push([col,blue/2.55])
-        } else if ($W.mode == "combined") {
+      } else if ( $W.mode == "combined") {
           $W.data[0].data.push([col,intensity/2.55])
           $W.data[1].data.push([col,red/2.55])
           $W.data[2].data.push([col,green/2.55])
           $W.data[3].data.push([col,blue/2.55])
-          if (red == 255) $W.data[4].data.push([col,100])
-          if (green == 255) $W.data[4].data.push([col,100])
-          if (blue == 255) $W.data[4].data.push([col,100])
+        if (red == 255 || green == 255 || blue == 255){
+            $W.data[4].data.push([col,100])
+            $W.data[4].data.push([col,100])
+            $W.data[4].data.push([col,100])
         }
-      } else {
-        if ($W.mode == "average") {
-          if ($W.baseline != null) {
-            var wavelength = parseInt($W.getWavelength(col))
-            $W.data[0].data.push([wavelength,$W.baseline[wavelength]-intensity/2.55])
-          } else $W.data[0].data.push([parseInt($W.getWavelength(col)),intensity/2.55])
-        } else if ($W.mode == "rgb") {
-          var w = $W.getWavelength(col)
+      }
+    } else {
+      if ( $W.mode == "average") {
+        if ( $W.baseline != null) {
+          var wavelength = parseInt( $W.getWavelength(col))
+            $W.data[0].data.push([wavelength, $W.baseline[wavelength]-intensity/2.55])
+        } else  $W.data[0].data.push([parseInt( $W.getWavelength(col)),intensity/2.55])
+      } else if ( $W.mode == "rgb") {
+        var w =  $W.getWavelength(col)
           $W.data[0].data.push([w,red/2.55])
           $W.data[1].data.push([w,green/2.55])
           $W.data[2].data.push([w,blue/2.55])
-        } else if ($W.mode == "combined") {
-          if ($W.baseline != null) {
-            var wavelength = parseInt($W.getWavelength(col))
-            $W.data[0].data.push([wavelength,$W.baseline[wavelength]-intensity/2.55])
-          } else $W.data[0].data.push([parseInt($W.getWavelength(col)),intensity/2.55])
-          var w = $W.getWavelength(col)
+      } else if ( $W.mode == "combined") {
+        if ( $W.baseline != null) {
+          var wavelength = parseInt( $W.getWavelength(col))
+            $W.data[0].data.push([wavelength, $W.baseline[wavelength]-intensity/2.55])
+        } else  $W.data[0].data.push([parseInt( $W.getWavelength(col)),intensity/2.55])
+        var w =  $W.getWavelength(col)
           $W.data[1].data.push([w,red/2.55])
           $W.data[2].data.push([w,green/2.55])
           $W.data[3].data.push([w,blue/2.55])
-          if (red == 255) $W.data[4].data.push([w,100])
-          if (green == 255) $W.data[4].data.push([w,100])
-          if (blue == 255) $W.data[4].data.push([w,100])
+        if (red == 255 || green == 255 || blue == 255){ 
+            $W.data[4].data.push([w,100])
         }
+        
       }
     }
-    $W.plot = $.plot($("#graph"),$W.data,flotoptions);
-    $.each($W.markers,function(i,m) {
-      $('#graph').append('<div style="position:absolute;left:' + (m[2] + 4) + 'px;top:10px;color:#aaa;font-size:smaller">'+m[0]+': '+parseInt($W.getIntensity($W.data[0].data,m[1]))+'%</div>');
+  }
+    $W.plot = $.plot($("#graph"), $W.data,flotoptions);
+    $.each( $W.markers,function(i,m) {
+      $('#graph').append('<div style="position:absolute;left:' + (m[2] + 4) + 'px;top:10px;color:#aaa;font-size:smaller">'+m[0]+': '+parseInt( $W.getIntensity( $W.data[0].data,m[1]))+'%</div>');
     })
-    $W.unflipped_data = $W.full_data
-    if ($W.flipped) $W.unflipped_data = $W.unflipped_data.reverse()
-    if ($W.macro && $W.macro.draw) {
+      $W.unflipped_data =  $W.full_data
+    if ( $W.flipped)  $W.unflipped_data =  $W.unflipped_data.reverse()
+    if ( $W.macro &&  $W.macro.draw) {
       try {
-        $W.macro.draw()
+          $W.macro.draw()
       } catch(e) {
         console.log(e)
       }
     }
   },
 
-  geolocate: function() {
-    if (navigator.geolocation) {
-      navigator.geolocation.getCurrentPosition($W.setGeolocation)
-      return true
-    }
-  },
-  setGeolocation: function(loc) {
-    if (loc.coords) {
-      $('#lat').val(loc.coords.latitude)
-      $('#lon').val(loc.coords.longitude)
-    }
-    else {
-      $('#lat').val(loc.latitude)
-      $('#lon').val(loc.longitude)
-    }
-  },
   saveSpectrum: function() {
     var this_ = this;
     $('#dataurl').val($W.canvas.toDataURL())
@@ -390,86 +451,11 @@ $W = {
     $('#lat').val('')
   },
 
-  auto_detect_sample_row: function() {
-        
-    // We need a separate canvas to draw the snapshot, whenever we try to auto detect the sample row.
-    if ($('#autoDetectCanvas').length == 0) {
-      $('body').append("<canvas style='display:none;' id='autoDetectCanvas'></canvas>")
-    }
-
-    var video = document.getElementsByTagName('video')[0]
-    var canvas = document.getElementById('autoDetectCanvas')
-    canvas.height = $W.height
-    canvas.width = $W.width
-    var context = canvas.getContext('2d')
-
-    context.drawImage(video, 0, 0)
-
-    img = context.getImageData(0,0,$W.width,$W.height)
-
-    var detected = []
-    var max_avg_intensity = 0
-    var selected_row = -1
-
-    for (var row = 0; row < $W.height; row++) {
-
-      var red_vals = {"low":10000, "high": -10000}
-      var green_vals = {"low":10000, "high": -10000}
-      var blue_vals = {"low":10000, "high": -10000}
-      var intensity_vals = {"low":10000, "high": -10000}
-
-      var vals = [red_vals, green_vals, blue_vals, intensity_vals]
-      var sum_intensity = 0
-      var count_intensity = 0
-
-      for (var col = 0; col < $W.width; col++) { 
-        var red = img.data[((row*(img.width*4)) + (col*4)) + 0]
-        var green = img.data[((row*(img.width*4)) + (col*4)) + 1]
-        var blue = img.data[((row*(img.width*4)) + (col*4)) + 2]
-        var intensity = (red+green+blue)/3
-
-        var bands = [red, green, blue, intensity]
-
-        $.each(vals, function(index, val){
-          if (val["low"] > bands[index]) val["low"] = bands[index]
-          if (val["high"] < bands[index]) val["high"] = bands[index]
-        })
-        
-        sum_intensity += intensity
-        count_intensity++
-      }
-
-      // If we need intensity diffs, 
-      // diff = intensity_vals["high"] - intensity_vals["low"]
-      
-      diff = red_vals["high"] - red_vals["low"]
-      
-      //console.log(diff)
-      if (diff > 20) {
-        detected.push(row)
-        var avg_intensity = parseInt(sum_intensity / count_intensity)
-        if (avg_intensity < 255 && max_avg_intensity < avg_intensity){
-            selected_row = row
-            max_avg_intensity = avg_intensity
-        }        
-      }
-    }
-    
-    // console.log(selected_row)
-    
-    //alert(detected)
-    //if (detected.length > 0) {
-    //    $W.setSampleRows(selected_row, selected_row+1);
-    //}
-
-    if (selected_row > -1) $W.setSampleRows(selected_row, selected_row+1);
-    else console.log('AutoDetectSampleRow: Increase light intensity and try again!')
-  },
-
   // deprecate in favor of setSampleRows, or wrap it with a +1
   setSampleRow: function(row) {
     $W.setSampleRows(parseInt(row),parseInt(row)+1,false)
   },
+  
   setSampleRows: function(start,end,legacy) {
     $W.sample_start_row = start
     $W.sample_end_row = end
@@ -480,6 +466,7 @@ $W = {
     $W.resetHeightIndicators(legacy)
     $('#video_row').val($W.sample_start_row);
   },
+
   resetHeightIndicators: function(legacy) {
     if ($W.rotated) {
       if (legacy != true) $('#heightIndicator')[0].style.marginLeft = parseInt($W.width_percent*320)+'px';
@@ -564,47 +551,6 @@ $W = {
     }
   },
 
-  toggle_rotation: function() {
-    $W.rotated = !$W.rotated
-    if ($W.rotated == true) $('.btn-rotate').addClass('active');
-    else                    $('.btn-rotate').removeClass('active');
-    var style = $('#heightIndicator')[0].style
-    var stylePrev = $('#heightIndicatorPrev')[0].style
-    if ($W.rotated) {
-      style.marginTop = '0px';
-      style.borderBottomWidth = "0px"
-      style.borderRightWidth = "2px"
-      style.height = "240px"
-      style.width = "0px"
-      stylePrev.marginTop = '0px';
-      stylePrev.borderBottomWidth = "0px"
-      stylePrev.borderRightWidth = "2px"
-      stylePrev.height = "100px"
-      stylePrev.width = "0px"
-      $('#heightIndicator .vertical').show();
-      $('#heightIndicator .horizontal').hide();
-      $('.spectrum-example-horizontal').hide();
-      $('.spectrum-example-vertical').show();
-    } else {
-      style.marginLeft = '0px';
-      style.borderBottomWidth = "2px"
-      style.borderRightWidth = "0px"
-      style.width = "320px"
-      style.height = "0px"
-      stylePrev.marginLeft = '0px';
-      stylePrev.borderBottomWidth = "2px"
-      stylePrev.borderRightWidth = "0px"
-      stylePrev.width = "100%"
-      stylePrev.height = "0px"
-      $('#heightIndicator .vertical').hide();
-      $('#heightIndicator .horizontal').show();
-      $('.spectrum-example-horizontal').show();
-      $('.spectrum-example-vertical').hide();
-    }
-    // reset the indicator to the correct sample row:
-    $W.setSampleRows($W.sample_start_row,$W.sample_start_row)
-  },
-
   is_data_ascending_in_nm: function() {
     var left_redness = 0, right_redness = 0
     // sum redness and unblueness for each half