diff --git a/app/assets/javascripts/angular/controllers/annotation_viewer.js b/app/assets/javascripts/angular/controllers/annotation_viewer.js
index e7f2f9d9..b7569485 100644
--- a/app/assets/javascripts/angular/controllers/annotation_viewer.js
+++ b/app/assets/javascripts/angular/controllers/annotation_viewer.js
@@ -26,15 +26,20 @@ function AnnotationViewerCtrl($scope, $element, $attrs, $transclude) {
     };
 
 
-
-
     // updated in directive
     $scope.model.converters = $scope.model.converters || {};
 
 
 }
 
-function Annotation(localId, audioRecordingId) {
+function Annotation(localIdOrResource, audioRecordingId) {
+
+    var localId = typeof(localIdOrResource) === "number" ? localIdOrResource : undefined;
+    var resource;
+    if (localIdOrResource instanceof Object && localIdOrResource.constructor.name == "Resource") {
+        resource = localIdOrResource;
+    }
+
     if (!(this instanceof Annotation))
         throw new Error("Constructor called as a function");
 
@@ -43,17 +48,31 @@ function Annotation(localId, audioRecordingId) {
     this.__temporaryId__ = localId || Number.Unique();
     this._selected = false;
 
-    this.audioRecordingId = audioRecordingId;
+    if (localId) {
+        this.audioRecordingId = audioRecordingId;
+
+        this.createdAt = now;
+        this.updatedAt = now;
+
+        this.endTimeSeconds = 0.0;
+        this.highFrequencyHertz = 0.0;
+        this.isReference = false;
+        this.lowFrequencyHertz = 0.0;
+        this.startTimeSeconds = 0.0;
+        this.audioEventTags = [];
+    }
+
+    if (resource) {
+        angular.extend(this, resource);
 
-    this.createdAt = now;
-    this.updatedAt = now;
+        this.createdAt = new Date(this.createdAt);
+        this.updatedAt = new Date(this.updatedAt);
 
-    this.endTimeSeconds = 0.0;
-    this.highFrequencyHertz = 0.0;
-    this.isReference = false;
-    this.lowFrequencyHertz = 0.0;
-    this.startTimeSeconds = 0.0;
-    this.audioEventTags = [];
+        this.endTimeSeconds = parseFloat(this.endTimeSeconds);
+        this.highFrequencyHertz = parseFloat(this.highFrequencyHertz);
+        this.lowFrequencyHertz = parseFloat(this.lowFrequencyHertz);
+        this.startTimeSeconds = parseFloat(this.startTimeSeconds);
+    }
 }
 
 AnnotationViewerCtrl.$inject = ['$scope', '$element', '$attrs', '$transclude'];
\ No newline at end of file
diff --git a/app/assets/javascripts/angular/controllers/listen.js b/app/assets/javascripts/angular/controllers/listen.js
index c1c9f193..fc3fd5b1 100644
--- a/app/assets/javascripts/angular/controllers/listen.js
+++ b/app/assets/javascripts/angular/controllers/listen.js
@@ -82,11 +82,8 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
 
 
                 for (var index = 0; index < $scope.model.audioEvents.length; index++) {
-                    // give local Ids
-                    $scope.model.audioEvents[index].__temporaryId__ = Number.Unique;
-
-                    // give other properties
-                    $scope.model.audioEvents[index]._selected = false;
+                    // transform
+                    $scope.model.audioEvents[index] = new Annotation($scope.model.audioEvents[index]);
                 }
             },
             function audioEventQueryFailure() {
@@ -95,7 +92,9 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
 
 
         // download all the tags and store them in Tag service cache
-        Tag.query({}, {}, function(){}, undefined);
+        Tag.query({}, {}, function(){
+           
+        }, undefined);
 
         $scope.model.limits = {
           timeMin: 0.0,
@@ -105,6 +104,13 @@ function ListenCtrl($scope, $resource, $routeParams, Media, AudioEvent, Tag) {
         };
 
 
+        $scope.startOffset = function() {
+            return moment($scope.media.model.original.recordedDate).add({seconds: $scope.media.model.startOffset});
+        };
+        $scope.endOffset = function() {
+            return moment($scope.media.model.original.recordedDate).add({seconds: $scope.media.model.endOffset});
+        };
+
         $scope.clearSelected = function() {
             //$scope.model.selectedAudioEvents.length = 0;
 
diff --git a/app/assets/javascripts/angular/directives/directives.js b/app/assets/javascripts/angular/directives/directives.js
index c58e408e..7bb2965e 100644
--- a/app/assets/javascripts/angular/directives/directives.js
+++ b/app/assets/javascripts/angular/directives/directives.js
@@ -199,8 +199,9 @@
          * @param scope
          */
         function resizeOrMove(audioEvent, box, scope) {
+            var boxId = parseInt(box.id);
 
-            if (audioEvent.__temporaryId__ === box.id) {
+            if (audioEvent.__temporaryId__ === boxId) {
                 audioEvent.startTimeSeconds = scope.model.converters.pixelsToSeconds(box.left || 0);
                 audioEvent.highFrequencyHertz = scope.model.converters.pixelsToHertz(box.top || 0);
 
@@ -208,7 +209,7 @@
                 audioEvent.lowFrequencyHertz = audioEvent.highFrequencyHertz + scope.model.converters.pixelsToHertz(box.height || 0);
             }
             else {
-                console.error("Box ids do not match on resizing  or move event", audioEvent.__temporaryId__, box.id);
+                console.error("Box ids do not match on resizing  or move event", audioEvent.__temporaryId__, boxId);
             }
         }
 
@@ -226,7 +227,7 @@
 
         function create(simpleBox, audioRecordingId, scope) {
 
-            var audioEvent = new Annotation(simpleBox.id, audioRecordingId);
+            var audioEvent = new Annotation(parseInt(simpleBox.id), audioRecordingId);
 
             resizeOrMove(audioEvent, simpleBox, scope);
             touchUpdatedField(audioEvent);
@@ -503,9 +504,8 @@
 
                 }
 
-
                 element.bind('click', updateModel);
-//               element.bind('change', updateModel);
+                // element.bind('change', updateModel);
 
                 // forward binding (from model to element)
                 ctrl.$render = function () {
@@ -519,6 +519,10 @@
                 };
 
                 attr.$observe('value', ctrl.$render);
+
+
+                // lastly cache any new items
+//                library[attr.name].push([scope, ctrl]);
             }
         }
     });
diff --git a/app/assets/javascripts/angular/filters/filters.js b/app/assets/javascripts/angular/filters/filters.js
index 8ea00777..ced0abb1 100644
--- a/app/assets/javascripts/angular/filters/filters.js
+++ b/app/assets/javascripts/angular/filters/filters.js
@@ -31,4 +31,23 @@
         }
     });
 
+    /**
+     * moment js adapters
+     *
+     * requires momentjs
+     */
+    bawfs.filter('moment', function() {
+       return function(input, method) {
+
+           if (input) {
+               var restOfArguments = Array.prototype.slice.call(arguments, 2, arguments.length)
+
+               var  m = moment(input);
+               return m[method].apply(m, restOfArguments);
+
+           }
+
+       }
+    });
+
 })();
diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js
index 1ccd6672..99de2a32 100644
--- a/app/assets/javascripts/application.js
+++ b/app/assets/javascripts/application.js
@@ -14,6 +14,7 @@
 //= require jquery_ujs
 // require jquery.ui.all // disabled because slow
 // require jquery.ui.datepicker // disabled because slow
+//= require moment
 //= require angular.js
 //= require angular-resource.js
 //= require angular-ui.js
diff --git a/app/assets/stylesheets/partials/_annotation_viewer.css.scss b/app/assets/stylesheets/partials/_annotation_viewer.css.scss
index 63b15648..d113c4bb 100644
--- a/app/assets/stylesheets/partials/_annotation_viewer.css.scss
+++ b/app/assets/stylesheets/partials/_annotation_viewer.css.scss
@@ -60,6 +60,7 @@ baw-annotation-viewer {
       position: absolute;
       top: 0;
       left: 0;
+      overflow: hidden;
 
       // debug
       @if $DEBUG { background-color: rgba(255,0,0,0.15) ;}
diff --git a/app/assets/templates/listen.html b/app/assets/templates/listen.html
index 8703e088..cbd5b78d 100644
--- a/app/assets/templates/listen.html
+++ b/app/assets/templates/listen.html
@@ -12,7 +12,14 @@ <h1>Listen</h1>
         <p>Listen and annotate.</p>
 
         <h3>Spectrogram</h3>
+        <p>
+           Date: {{model.media.original.recordedDate | moment:"format":"dddd, MMMM Do YYYY, HH:mm:ss ZZ"}}
+        </p>
         <baw-annotation-viewer model="model"></baw-annotation-viewer>
+        <p>
+            <span>Date: {{model.media.original.recordedDate}}</span>
+            <span>Date: {{model.media.original.recordedDate}}</span>
+        </p>
 
         <h3>Audio Controls</h3>
         <audio id="main-player" ng-audio="model.audioElement" controls>
@@ -74,6 +81,7 @@ <h3>Annotations</h3>
                     <thead>
                     <tr>
                         <th>Selected</th>
+                        <th>Jump to</th>
                         <th>Annotation ID</th>
                         <th>Audio Recording</th>
                         <th>Created At</th>
@@ -91,7 +99,11 @@ <h3>Annotations</h3>
                     <tr ng-repeat="ae in model.audioEvents">
                         <td>
                             <!--<input type="radio" ng-checked="ae._selected" ng-model="ae._selected"   name="selectionRadioGroup"  >-->
-                            <input type="radio" baw-checked ng-model="ae._selected"   name="selectionRadioGroup"  >
+                            <input type="radio" baw-checked ng-model="ae._selected"  name="selectionRadioGroup"  >
+                            SELECTED:{{ae._selected}}
+                        </td>
+                        <td>
+                            <!-- TODO -->
                         </td>
                         <td colspan="{{ae.id && 1 || 2}}">
                             {{ae.id}}
diff --git a/lib/assets/javascripts/jquery.drawabox.js b/lib/assets/javascripts/jquery.drawabox.js
index 98f0f3be..0ba38879 100644
--- a/lib/assets/javascripts/jquery.drawabox.js
+++ b/lib/assets/javascripts/jquery.drawabox.js
@@ -173,6 +173,7 @@
                 stop: function (event, ui) { contextData.options.boxResized($newBox); }
             });
             $newBox.draggable({
+                containment: 'parent',
                 drag: function (event, ui) { contextData.options.boxMoving($newBox); },
                 stop: function (event, ui) { contextData.options.boxMoved($newBox); }
             });
diff --git a/vendor/bin/shntool-3.0.10/shntool.exe b/vendor/bin/shntool-3.0.10/shntool.exe
new file mode 100644
index 00000000..4380ad26
Binary files /dev/null and b/vendor/bin/shntool-3.0.10/shntool.exe differ