diff --git a/src/app/annotationLibrary/_annotationItem.scss b/src/app/annotationLibrary/_annotationItem.scss
deleted file mode 100644
index ac1eb6df..00000000
--- a/src/app/annotationLibrary/_annotationItem.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-$loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
-
-.annoSingleItem {
-  padding: 10px 0 0 40px;
-  position: relative;
-  margin: 0 auto 0 auto;
-
-  & .annoSingleSpectrogram {
-    user-select: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
-    -moz-user-select: none;
-    -o-user-select: none;
-    display: inline-block;
-    position: relative;
-    line-height: 0;
-    padding: 0 !important;
-    margin: 0;
-    border: 1px dotted #8c8c8c;
-
-    & img {
-
-    }
-
-    & .annoSingleGrid {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      background: url(#{$loadGifPath}) center center no-repeat;
-    }
-
-    & .annoSingleBounds {
-      position: absolute;
-      border: 1px solid red;
-    }
-  }
-
-  & audio {
-    margin-top: 30px;
-  }
-}
-
-.annoSingleItemInfo {
-  margin: 0 auto 0 auto;
-}
diff --git a/src/app/annotationLibrary/_annotationLibrary.scss b/src/app/annotationLibrary/_annotationLibrary.scss
index 1ed68418..43b45ccb 100644
--- a/src/app/annotationLibrary/_annotationLibrary.scss
+++ b/src/app/annotationLibrary/_annotationLibrary.scss
@@ -1,53 +1,22 @@
 $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
 
-.annoLibPaging {
+/* Library list */
+.annotation-paging {
   margin: 0 !important;
 }
 
-.annoLib {
+.annotation-library {
   margin-top: 30px;
 
-  & .annoLibItem {
+  & .library-item {
     padding: 10px 10px 0 40px;
     margin: 5px;
     position: relative;
     max-height:500px;
     height:385px;
+    min-width: 180px;
 
-    & .annoLibSpectrogram {
-      user-select: none;
-      -webkit-user-select: none;
-      -ms-user-select: none;
-      -moz-user-select: none;
-      -o-user-select: none;
-      display: inline-block;
-      position: relative;
-      line-height: 0;
-      padding: 0 !important;
-      margin: 0;
-      border: 1px dotted #8c8c8c;
-
-      & img {
-
-      }
-
-      & .annoLibGrid {
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        background: url(#{$loadGifPath}) center center no-repeat;
-      }
-
-      & .annoLibBounds {
-        position: absolute;
-        border: 1px solid red;
-      }
-    }
-
-    & .annoLibInfo {
+    & .library-item-info {
       display: block;
       clear: both;
       margin-top: 20px;
@@ -61,7 +30,7 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
         /*@include vendor-prefix(transform, scale(0.8));*/
       }
 
-      & .annoLibInfoItem {
+      & .info-entry {
         font-size: small;
 
         margin: 5px 10px;
@@ -70,4 +39,52 @@ $loadGifPath: $IMAGE_ASSET_PATH + 'assets/img/load.gif';
   }
 }
 
+/* Library single item */
+.library-single {
+  padding: 10px 0 0 40px;
+  position: relative;
+  margin: 0 auto 0 auto;
+
 
+  & audio {
+    margin-top: 30px;
+  }
+}
+
+.library-single-info {
+  margin: 0 auto 0 auto;
+}
+
+/* Shared spectrogram and grid  */
+.library-spectrogram {
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  -o-user-select: none;
+  display: inline-block;
+  position: relative;
+  line-height: 0;
+  padding: 0 !important;
+  margin: 0;
+  border: 1px dotted #8c8c8c;
+
+  & img {
+
+  }
+
+  & .library-spectrogram-grid {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+    background: url(#{$loadGifPath}) center center no-repeat;
+  }
+
+  & .library-spectrogram-bounds {
+    position: absolute;
+    border: 1px solid red;
+  }
+}
\ No newline at end of file
diff --git a/src/app/annotationLibrary/annotationItem.tpl.html b/src/app/annotationLibrary/annotationItem.tpl.html
index 5fddff10..fcaf18f3 100644
--- a/src/app/annotationLibrary/annotationItem.tpl.html
+++ b/src/app/annotationLibrary/annotationItem.tpl.html
@@ -3,14 +3,14 @@ <h3>Annotation {{model.audioEventId}}</h3>
 
     <div class="row">
         <div class="col-md-12">
-            <div class="annoSingleItem"
+            <div class="library-single"
                  data-ng-style="{width:model.converters.conversions.enforcedImageWidth + 100}">
-                <div class="annoSingleSpectrogram">
+                <div class="library-spectrogram">
                     <img data-ng-src=""
                          data-ng-style="{width: model.converters.conversions.enforcedImageWidth, height: model.converters.conversions.enforcedImageHeight}">
                     <!-- {{item.media.availableImageFormats.png.url}} -->
-                    <grid-lines configuration="model.gridConfig" class="annoSingleGrid"></grid-lines>
-                    <div class="annoSingleBounds"
+                    <grid-lines configuration="model.gridConfig" class="library-spectrogram-grid"></grid-lines>
+                    <div class="library-spectrogram-bounds"
                          data-ng-style="{top: model.bounds.top, left: model.bounds.left, width: model.bounds.width, height: model.bounds.height}"></div>
                 </div>
                 <audio id="annoSingleAudio{{$index}}" controls
@@ -39,7 +39,7 @@ <h3>Annotation {{model.audioEventId}}</h3>
 
     <div class="row">
         <div class="col-md-6">
-            <div class="annoSingleItemInfo panel panel-default">
+            <div class="library-single-info panel panel-default">
                 <div class="panel-heading clearfix">
                     <h3 class="panel-title pull-left">Details</h3>
                 </div>
@@ -84,7 +84,7 @@ <h3 class="panel-title pull-left">Details</h3>
             </div>
         </div>
         <div class="col-md-6">
-            <div class="annoSingleItemInfo panel panel-default">
+            <div class="library-single-info panel panel-default">
                 <div class="panel-heading clearfix">
                     <h3 class="panel-title pull-left">Comments</h3>
                 </div>
diff --git a/src/app/annotationLibrary/annotationLibrary.js b/src/app/annotationLibrary/annotationLibrary.js
index 999992b7..550740f5 100644
--- a/src/app/annotationLibrary/annotationLibrary.js
+++ b/src/app/annotationLibrary/annotationLibrary.js
@@ -4,15 +4,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.status = 'idle';
 
-            $scope.filterSettings = {
-                tagsPartial: null,
-                reference: '', // set to empty string to match value of radio button
-                annotationDuration: null,
-                freqMin: null,
-                freqMax: null,
-                page: null,
-                items: null
-            };
+            $scope.filterSettings = getEmptyFilterSettings();
 
             loadFilter();
 
@@ -22,15 +14,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.clearFilter = function clearFilter() {
 
-                $scope.filterSettings = {
-                    tagsPartial: null,
-                    reference: '', // set to empty string to match value of radio button
-                    annotationDuration: null,
-                    freqMin: null,
-                    freqMax: null,
-                    page: null,
-                    items: null
-                };
+                $scope.filterSettings = getEmptyFilterSettings();
 
                 $scope.setFilter();
             };
@@ -45,31 +29,45 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                 return '/library/?' + baw.angularCopies.toKeyValue(paramObj);
             };
 
+            function getEmptyFilterSettings(){
+                return {
+                    tagsPartial: null,
+                    reference: '', // set to empty string to match value of radio button
+                    annotationDuration: null,
+                    freqMin: null,
+                    freqMax: null,
+                    page: null,
+                    items: null
+                };
+            }
+
             function loadFilter() {
                 $scope.status = 'loading';
                 $scope.filterSettings = angular.extend({}, $scope.filterSettings, $routeParams);
 
+                // ensure properties that need to be numeric are actually numbers
                 [
                     'annotationDuration',
                     'freqMin',
                     'freqMax',
                     'page',
                     'items'
-                ].forEach(function (currentvalue, index, array) {
+                ].forEach(
+                    function (currentvalue, index, array) {
                         var stringValue = $scope.filterSettings[currentvalue];
                         $scope.filterSettings[currentvalue] = stringValue === null ? null : Number(stringValue);
-                    });
-
-                //$scope.filterSettings = $scope.createQuery($routeParams);
+                    }
+                );
 
                 $scope.library = AudioEvent.library($scope.filterSettings, null, function librarySuccess(value, responseHeaders) {
                     value.entries.map(Media.getMediaItem);
+                    value.audioElement = null;
                     $scope.paging = getPagingSettings($scope.library.page, $scope.library.items, $scope.library.total);
                     $scope.status = 'loaded';
                     $scope.responseDetails = responseHeaders;
                 }, function libraryError(httpResponse){
                     $scope.status = 'error';
-                    //$scope.errorDetails = httpResponse;
+                    console.error('Failed to load library response.', $scope.filterSettings, httpResponse);
                 });
             }
 
@@ -87,6 +85,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                 paging.minCount = Math.max(paging.page - paging.surroundingCurrentLinks, paging.minPageNumber);
                 paging.maxCount = Math.min(paging.page + paging.surroundingCurrentLinks, paging.maxPageNumber);
 
+                // make accessing links easy via properties, rather than having to use array indexing
                 paging.links = {};
 
                 paging.links.first =
@@ -147,8 +146,8 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
 
             $scope.model = AudioEvent.get(parameters,
                 function annotationShowSuccess(value, responseHeaders) {
-                    //$scope.response = JSON.stringify(value, null, "  ");
                     Media.getMediaItem(value);
+                    value.audioElement = null;
                     $scope.model = value;
 
                     if ($scope.model.paging.nextEvent.hasOwnProperty('audioEventId')) {
@@ -166,7 +165,7 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
                     $scope.model.audioEventDuration = Math.round10(value.endTimeSeconds - value.startTimeSeconds, -3);
 
                 }, function annotationShowError(httpResponse) {
-                    console.error(httpResponse);
+                    console.error('Failed to load library single item response.', parameters, httpResponse);
                 });
 
             $scope.createFilterUrl = function createFilterUrl(paramObj) {
diff --git a/src/app/annotationLibrary/annotationLibrary.tpl.html b/src/app/annotationLibrary/annotationLibrary.tpl.html
index 11e199a8..521ca9f7 100644
--- a/src/app/annotationLibrary/annotationLibrary.tpl.html
+++ b/src/app/annotationLibrary/annotationLibrary.tpl.html
@@ -84,7 +84,7 @@ <h3>Annotation Library</h3>
                         <span data-ng-show="status == 'error'">Results could not be loaded.</span>
                     </div>
                     <div class="col-sm-7">
-                        <ul class="pagination annoLibPaging" data-ng-show="status == 'loaded' && paging.total > paging.items">
+                        <ul class="pagination annotation-paging" data-ng-show="status == 'loaded' && paging.total > paging.items">
                             <li data-ng-show="paging.page != paging.minPageNumber">
                                 <a data-ng-href="{{paging.links.prev}}">&laquo;</a>
                             </li>
@@ -119,18 +119,18 @@ <h3>Annotation Library</h3>
         </div>
     </div>
 
-    <div class="annoLib">
-        <div data-ng-repeat="item in library.entries" class="pull-left annoLibItem thumbnail">
-            <div class="annoLibSpectrogram">
+    <div class="annotation-library">
+        <div data-ng-repeat="item in library.entries" class="pull-left library-item thumbnail">
+            <div class="library-spectrogram">
                 <img data-ng-src=""
                      data-ng-style="{width: item.converters.conversions.enforcedImageWidth, height: item.converters.conversions.enforcedImageHeight}">
                 <!-- {{item.media.availableImageFormats.png.url}} -->
-                <grid-lines configuration="item.gridConfig" class="annoLibGrid"></grid-lines>
-                <div class="annoLibBounds"
+                <grid-lines configuration="item.gridConfig" class="library-spectrogram-grid"></grid-lines>
+                <div class="library-spectrogram-bounds"
                      data-ng-style="{top: item.bounds.top, left: item.bounds.left, width: item.bounds.width, height: item.bounds.height}"></div>
             </div>
 
-            <div class="annoLibInfo"
+            <div class="library-item-info"
                  data-ng-style="{'min-width':150, width:item.converters.conversions.enforcedImageWidth}">
                 <audio id="annotationLibraryItemInfoAudio{{$index}}" controls
                        data-ng-style="{width:item.converters.conversions.enforcedImageWidth}">
@@ -139,26 +139,26 @@ <h3>Annotation Library</h3>
                     <!--Your browser does not support the audio element. -->
                 </audio>
             <span data-ng-show="item.tags.length > 0">
-                <span class="annoLibInfoItem">
+                <span class="info-entry">
                     <span class="glyphicon glyphicon-tags"></span>
                     <a data-ng-href="{{item.tagSearchUrl}}">
                         {{item.priorityTag.text}}
                     </a>
                 </span>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-map-marker"></span>
                 <a data-ng-href="{{item.siteUrl}}">
                     {{item.siteName}}
                 </a>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-music"></span>
                 <a data-ng-href="{{item.listenUrl}}">
                     {{item.audioEventStartDate | date: 'MMM d, yyyy HH:mm'}}
                 </a>
             </span>
-            <span class="annoLibInfoItem">
+            <span class="info-entry">
                 <span class="glyphicon glyphicon-info-sign"></span>
                 <a data-ng-href="{{item.singleItemUrl}}" style="cursor: pointer;">
                     More info
diff --git a/src/common/functions.js b/src/common/functions.js
index 37f5faf6..705b80b7 100644
--- a/src/common/functions.js
+++ b/src/common/functions.js
@@ -361,7 +361,11 @@ if (!Array.prototype.filter) {
         this.toKeyValue = function toKeyValue(obj) {
             var parts = [];
             angular.forEach(obj, function (value, key) {
-                if(value !== undefined && value !== null && (typeof(value) === "string" ? value.length > 0 : true)){
+                // only add key value pair if value is not undefined, not null, and is not an empty string
+                var valueIsUndefined = value == undefined;
+                var valueIsNull = value == null;
+                var valueIsEmptyString = typeof(value) === "string" && value.length < 1;
+                if(!valueIsUndefined && !valueIsNull && !valueIsEmptyString){
                     parts.push(encodeUriQuery(key, true) + (value === true ? '' : '=' + encodeUriQuery(value, true)));
                 }
             });
diff --git a/src/components/services/services.js b/src/components/services/services.js
index cbb16e2a..4b777bb2 100644
--- a/src/components/services/services.js
+++ b/src/components/services/services.js
@@ -90,14 +90,6 @@
         );
         resource.csvLink = makeCsvLink;
 
-        resource.calcOffsetStart = function calcOffsetStart(startOffset) {
-            return Math.floor(startOffset / 30) * 30;
-        };
-
-        resource.calcOffsetEnd = function calcOffsetEnd(startOffset) {
-            return  (Math.floor(startOffset / 30) * 30) + 30;
-        };
-
         return resource;
     }]);
 
@@ -247,6 +239,7 @@
         delete  mediaResource["delete"];
         //delete  mediaResource.update;
 
+            // TODO: should be in AnnotationLibrary service
         function getMediaParameters(value) {
             return {
                 start_offset: Math.floor(value.startTimeSeconds - constants.annotationLibrary.paddingSeconds),
@@ -283,9 +276,6 @@
                 mediaResource.formatPaths(mediaValue);
                 value.media = mediaValue;
 
-                value.audioElement = null;
-                value.moreInfoDisplayed = true;
-
                 value.media.sampleRate = value.media.availableAudioFormats.mp3.sampleRate;
 
                 var audioRecordingIdValue = value.audioRecordingId;
@@ -311,57 +301,9 @@
 
                 value.annotationDuration = value.endTimeSeconds - value.startTimeSeconds;
 
-                // urls
-                value.listenUrl = '/listen/' + audioRecordingIdValue +
-                    '?start=' + calcOffsetStartValue +
-                    '&end=' + calcOffsetEndValue;
-                value.siteUrl = '/projects/' + value.projects[0].id +
-                    '/sites/' + value.siteId;
-                value.userUrl = '/user_accounts/' + value.ownerId;
 
-                // updateFilter({tagsPartial:item.priorityTag.text})
-                value.tagSearchUrl = '/library?tagsPartial=' +
-                    baw.angularCopies.fixedEncodeURI(value.priorityTag.text);
 
-                // updateFilter({annotationDuration:Math.round10(value.annotationDuration, -3), ...})
-                value.similarUrl = '/library?annotationDuration=' + Math.round10(value.annotationDuration, -3) +
-                    '&freqMin=' + Math.round(value.lowFrequencyHertz) +
-                    '&freqMax=' + Math.round(value.highFrequencyHertz);
 
-                value.singleItemUrl = '/library/' +
-                    value.audioRecordingId + '/audio_events/' +
-                    value.audioEventId;
-
-                // set common/sensible defaults, but hide the elements
-                value.gridConfig = {
-                    y: {
-                        showGrid: true,
-                        showScale: true,
-                        max: value.converters.conversions.nyquistFrequency,
-                        min: 0,
-                        step: 1000,
-                        height: value.converters.conversions.enforcedImageHeight,
-                        labelFormatter: function (value, index, min, max) {
-                            return (value / 1000).toFixed(1);
-                        },
-                        title: "Frequency (KHz)"
-                    },
-                    x: {
-                        showGrid: true,
-                        showScale: true,
-                        max: value.media.endOffset,
-                        min: value.media.startOffset,
-                        step: 1,
-                        width: value.converters.conversions.enforcedImageWidth,
-                        labelFormatter: function (value, index, min, max) {
-                            // show 'absolute' time.... i.e. seconds of the minute
-                            var offset = (value % 60);
-
-                            return (offset).toFixed(0);
-                        },
-                        title: "Time offset (seconds)"
-                    }
-                };
 
                 //console.debug(value.media);
             });
@@ -404,6 +346,82 @@
         return birdWalkService;
     }]);
 
+    bawss.factory('AnnotationLibrary', [ '$resource', 'conf.paths', 'conf.constants', 'bawApp.unitConverter', 'AudioEvent', 'Tag',
+        function ($resource, paths, constants, unitConverter, AudioEvent, Tag) {
+
+            var libraryService = {};
+
+            libraryService.getItem = function GetItem(){
+
+            };
+
+            function getGridConfig(){
+                // set common/sensible defaults, but hide the elements
+                return {
+                    y: {
+                        showGrid: true,
+                        showScale: true,
+                        max: value.converters.conversions.nyquistFrequency,
+                        min: 0,
+                        step: 1000,
+                        height: value.converters.conversions.enforcedImageHeight,
+                        labelFormatter: function (value, index, min, max) {
+                            return (value / 1000).toFixed(1);
+                        },
+                        title: "Frequency (KHz)"
+                    },
+                    x: {
+                        showGrid: true,
+                        showScale: true,
+                        max: value.media.endOffset,
+                        min: value.media.startOffset,
+                        step: 1,
+                        width: value.converters.conversions.enforcedImageWidth,
+                        labelFormatter: function (value, index, min, max) {
+                            // show 'absolute' time.... i.e. seconds of the minute
+                            var offset = (value % 60);
+
+                            return (offset).toFixed(0);
+                        },
+                        title: "Time offset (seconds)"
+                    }
+                };
+            }
+
+            function calcOffsetStart(startOffset) {
+                return Math.floor(startOffset / 30) * 30;
+            }
+
+            function calcOffsetEnd(startOffset) {
+                return  (Math.floor(startOffset / 30) * 30) + 30;
+            }
+
+            function getUrls(){
+                // urls
+                value.listenUrl = '/listen/' + audioRecordingIdValue +
+                    '?start=' + calcOffsetStartValue +
+                    '&end=' + calcOffsetEndValue;
+                value.siteUrl = '/projects/' + value.projects[0].id +
+                    '/sites/' + value.siteId;
+                value.userUrl = '/user_accounts/' + value.ownerId;
+
+                // updateFilter({tagsPartial:item.priorityTag.text})
+                value.tagSearchUrl = '/library?tagsPartial=' +
+                    baw.angularCopies.fixedEncodeURI(value.priorityTag.text);
+
+                // updateFilter({annotationDuration:Math.round10(value.annotationDuration, -3), ...})
+                value.similarUrl = '/library?annotationDuration=' + Math.round10(value.annotationDuration, -3) +
+                    '&freqMin=' + Math.round(value.lowFrequencyHertz) +
+                    '&freqMax=' + Math.round(value.highFrequencyHertz);
+
+                value.singleItemUrl = '/library/' +
+                    value.audioRecordingId + '/audio_events/' +
+                    value.audioEventId;
+            }
+
+            return libraryService;
+        }]);
+
     // breadcrumbs - from https://github.com/angular-app/angular-app/blob/master/client/src/common/services/breadcrumbs.js
     bawss.factory('breadcrumbs', ['$rootScope', '$location', '$route', '$routeParams',  'conf.paths', function ($rootScope, $location, $route, $routeParams, paths) {
 
diff --git a/src/sass/application.tpl.scss b/src/sass/application.tpl.scss
index 0bbb8b7c..b4ae275e 100644
--- a/src/sass/application.tpl.scss
+++ b/src/sass/application.tpl.scss
@@ -33,7 +33,6 @@ $IMAGE_ASSET_PATH: '<%= build_configs.current.siteDir %>';
 @import "../app/annotationViewer/gridLines/gridLines";
 @import "../app/audioEvents/audio_events";
 @import "../app/annotationLibrary/annotationLibrary";
-@import "../app/annotationLibrary/annotationItem";
 @import "../app/bookmarks/bookmarks";
 @import "../app/home/home";
 @import "../app/listen/listen";