image_viewer_rails 0.0.1 → 0.0.2

data/README.md

@@ -0,0 +1,93 @@
+# ImageViewerRails
+
+This project rocks and uses MIT-LICENSE.
+
+A rails engine to serve imageviewer js files easily and ubiquitiously
+
+ImageViewerRails is simply a wrapper for a javascript library that will load an array of images to your screen and offer controls for manipulating those images.  It was designed to be used with forms on pages for quick and efficient data entry.  It provides a nav bar that allows for rotation, zooming, and more.   Most of the allowable manipulations have corrolary key listeners which we'll cover a little more below. 
+
+Once you've run through the installation (see below) you can run something like the following:
+
+```html
+<script type="text/javascript">
+  $(document).ready(function(){
+    $('#ImageViewer').imageViewer(["/assets/test_image_1.jpeg", "/assets/test_image_2.jpeg"]);
+  });
+</script>
+```
+
+Which will render something like:
+
+![example_screenshot_1](https://raw.github.com/rondale-sc/image_viewer_rails/master/public/example_screenshot_1.png)
+
+The current image will by default be loaded to fit the width of the image container (which is not shown in the screenshot above).  If you'd like to over-ride that default you can pass the option `zoomDirection` like so:
+
+```javascript
+settings = {zoomDirection: 'height'}
+$('#ImageViewer').imageViewer(['/images.png'], settings)
+```
+
+Once you have the image viewer initialized you can start using it.  The functions in the nav links area are mapped to the following keys:
+
+![keyboard_screenshot](https://raw.github.com/rondale-sc/image_viewer_rails/master/public/keyboard.png)
+
+Clicking the info link in the nav section will display a modal legend with all of the hotkeys listed.
+
+## Installation
+
+Since this mostly just serves up commonly used js files for internal use all you need to do is add the following lines to your `Gemfile`
+
+```ruby
+gem "image_viewer_rails", "~> 0.0.1"
+```
+
+In your `app/assets/javascripts/application.js` (manifest file) add the following:
+
+```
+//= require image_viewer_rails
+```
+
+In your `app/assets/stylesheets/application.css.scss` (manifest file) add the following:
+
+```
+//= require image_viewer_rails
+```
+
+Doing so will tell rails to load the following files
+
+- image_viewer.js
+- [jquery.rotate.js](https://code.google.com/p/jquery-rotate/)
+- [keymaster.js](https://github.com/madrobby/keymaster)
+- keymaster_filter.js
+- jquery-rails (if it isn't already loaded)
+
+## Contributing
+
+Thanks for your interest in contributing to image_viewer_rails.  ImageViewerRails is tested using jasmine and jasminerice.  Since it's a rails engine there are some interesting testing patterns that we must use to get everything working as we expect.  We have a dummy app that lives inside the `spec` directory.  This enables us to run our tests in the context of an actual rails application.  To that end, our tests are located in `spec/dummy/spec/javascripts` directory.  They've been loosely separated by their function so jumping in shouldn't be too hard.
+
+### Testing 
+
+[jasminerice](https://github.com/bradphelan/jasminerice) is also a rails engine that mounts to our dummy app at `/jasmine`.  To fire up the test suite run `rails s` inside the `spec/dummy` directory and head over to `http://localhost:3000/jasmine`.
+
+[guard-jasmine](https://github.com/netzpirat/guard-jasmine) allows us to leverage phantom.js (headless browser) and create a better environment.  
+
+- Install Phantom Js
+  - Best way on a mac is `brew install phantom`
+- `cd spec/dummy`
+- guard
+
+Tests are written in CoffeeScript
+
+### Tips and Tricks
+
+Guard Jasmine provides a rudimentary console logger.  Most typical way to use it is to call `console.log`.  But you can also use `warn`, `debug`, `info` and a few others.
+
+If that isn't enough you can boot up a `rails s` inside the `spec/dummy` directory and point your browser to the root url at `localhost:3000/` and you'll be able to debug the image viewer on the page.
+
+Once you've gotten the testing underway just follow the standard:
+
+1. Fork it
+2. Create your feature branch (git checkout -b my-new-feature)
+3. Commit your changes (git commit -am 'Added some feature')
+4. Push to the branch (git push origin my-new-feature)
+5. Create new Pull Request 

data/Rakefile

@@ -1,40 +1,21 @@
 #!/usr/bin/env rake
+#
 begin
   require 'bundler/setup'
 rescue LoadError
   puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
 end
-begin
-  require 'rdoc/task'
-rescue LoadError
-  require 'rdoc/rdoc'
-  require 'rake/rdoctask'
-  RDoc::Task = Rake::RDocTask
-end
-
-RDoc::Task.new(:rdoc) do |rdoc|
-  rdoc.rdoc_dir = 'rdoc'
-  rdoc.title    = 'ImageViewerRails'
-  rdoc.options << '--line-numbers'
-  rdoc.rdoc_files.include('README.rdoc')
-  rdoc.rdoc_files.include('lib/**/*.rb')
-end
-
-APP_RAKEFILE = File.expand_path("../test/dummy/Rakefile", __FILE__)
+APP_RAKEFILE = File.expand_path("../spec/dummy/Rakefile", __FILE__)
 load 'rails/tasks/engine.rake'
 
-
-
 Bundler::GemHelper.install_tasks
 
-require 'rake/testtask'
+Dir[File.join(File.dirname(__FILE__), 'tasks/**/*.rake')].each {|f| load f }
 
-Rake::TestTask.new(:test) do |t|
-  t.libs << 'lib'
-  t.libs << 'test'
-  t.pattern = 'test/**/*_test.rb'
-  t.verbose = false
-end
+require 'rspec/core'
+require 'rspec/core/rake_task'
 
+desc "Run all specs in spec directory (excluding plugin specs)"
+RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
 
-task :default => :test
+task :default => :spec

data/app/assets/javascripts/image_viewer_rails.js

@@ -0,0 +1 @@
+//= require_tree ./image_viewer_rails

data/app/assets/javascripts/image_viewer_rails/image_viewer.js

@@ -1,25 +1,58 @@
-(function($) {
-  $.fn.imageViewer = function(method) {
+/**
+ * See (http://jquery.com/).
+ * @name jQuery
+ * @class
+ * See the jQuery Library  (http://jquery.com/) for full details.  This just
+ * documents the function and classes that are added to jQuery by this plug-in.
+ */
+
+/**
+ * See (http://jquery.com/)
+ * @name fn
+ * @class
+ * See the jQuery Library  (http://jquery.com/) for full details.  This just
+ * documents the function and classes that are added to jQuery by this plug-in.
+ * @memberOf jQuery
+ */
+
+/**
+ * imageViewer - This is is a jQuery plugin and as such uses an Immediately Invoked Function Expression (IIFE)
+ * @name imageViewer
+ * @class
+ * @memberOf jQuery.fn
+ */
+
+(function(jQuery) {
+  /** Main imageViewer namespace
+   * imageViewer - This is is a jQuery plugin and as such uses an Immediately Invoked Function Expression (IIFE)
+   * @name imageViewer
+   * @class
+   * @memberOf jQuery.fn
+   * @param {object} method - Usually init options such as the initial array of images
+   */
+  jQuery.fn.imageViewer = function(method) {
     var settings = {
-      'height': '550',
-      'nav_links':true,
-      'zoomLevel': 75,
+      'navLinks':true,
+      'zoomDirection': 'width',
+      'zoomLevel': 100,
       'increment' : 50,
       'images' : null,
-      'mainDivId' : this,
-      'mainDiv' : null,
       'imageOverlay': null,
+      'mainDiv' : this,
       'imageViewerImg': null,
       'imageIndex': null,
       'currentImageDiv': null,
       'keyBindings' : {},
-      'suppressed_keys' : [],
-      'calculate_height_with_header' : true,
-      'calculate_height_with_footer' : false
+      'suppressedKeys' : [],
+      'calculateHeightWithHeader' : true,
+      'calculateHeightWithFooter' : false
     };
-    var self = $.fn.imageViewer;
+    var self = jQuery.fn.imageViewer;
 
-    $.fn.imageViewer.scrollPage = function(increment){
+    /** Method by which the next or previous image is retrieved and set to the current image (from the initial sequence of images)
+     * @param {integer} increment - Usually 1 or -1 for next and previous page, but can be any integer.
+     */
+    jQuery.fn.imageViewer.scrollPage = function(increment){
       if(settings["imageIndex"] === 0 && increment === -1) {
         settings["imageIndex"] = (settings["images"].length - 1);
       } else if(settings["imageIndex"] == (settings["images"].length - 1) && increment == 1){
@@ -29,25 +62,31 @@
       }
       showPage(settings["imageIndex"]);
     };
-
-    $.fn.imageViewer.settings = function(str) {
+    /** Essentially just an public accessor for getting information about the internal settings variable.
+        @param {string} str - String of setting you'd like to view.
+     */
+    jQuery.fn.imageViewer.settings = function(str) {
       if (settings[str] !== undefined) {
         return settings[str];
       }
     };
 
-    $.fn.imageViewer.teardownKeyBindings = function() { teardownKeyBindings(); };
+    /** Public method to remove keybindings.  Especially useful when displaying multiple image_viewers on a single page.
+     */
+    jQuery.fn.imageViewer.teardownKeyBindings = function() { teardownKeyBindings(); };
 
-    $.fn.imageViewer.setupKeyBindings = function() { setupKeyBindings(); };
+    /** Public method to setup keybindings via the setupKeyBindings() method */
+    jQuery.fn.imageViewer.setupKeyBindings = function() { setupKeyBindings(); };
 
-    $.fn.imageViewer.displayLegend =  function() {
+    /** Public method to display the legend modal dialog box as an overlay. */
+    jQuery.fn.imageViewer.displayLegend =  function(disableTransition) {
       var id = $('#dialog');
       var maskHeight = $(document).height();
       var maskWidth = $(window).width();
 
-      $('#mask').css({'width':maskWidth,'height':maskHeight});
-      $('#mask').fadeIn(600);
-      $('#mask').fadeTo("slow",0.8);
+      $('#image-viewer-mask').css({'width':maskWidth,'height':maskHeight});
+      $('#image-viewer-mask').fadeIn(600);
+      $('#image-viewer-mask').fadeTo("slow",0.8);
 
       var winH = $(window).height();
       var winW = $(window).width();
@@ -58,33 +97,66 @@
       $(id).fadeIn(2000);
     };
 
-    $.fn.imageViewer.scroll =  function(left, top){
+    /** Public method to hide the modal dialog box */
+    jQuery.fn.imageViewer.hideLegend =  function() {
+      $('#image-viewer-mask, #dialog').hide();
+    };
+
+    /** Public method for manipulating the top and left dimensions of an image.  This is used to move the image up/left/right/down.  See tests for examples
+     * @param {integer} left - Desired left position of current image.
+     * @param {integer} top - Desired top position of current image.
+     */
+    jQuery.fn.imageViewer.scroll =  function(left, top){
       settings["currentImageDiv"].scrollTop(settings["currentImageDiv"].scrollTop() + top);
       settings["currentImageDiv"].scrollLeft(settings["currentImageDiv"].scrollLeft() + left);
     };
 
-    $.fn.imageViewer.zoom = function(increment){
-      if(increment < 0 && settings["zoomLevel"] <= settings["increment"]) increment = 0;
-      zoomAbsolute(settings["zoomLevel"] + increment);
+    /** Public method for inreasing the width dimension of the current image.
+     * @param {integer} increment - Increment you'd like to increase by.  If specified as an integer will increase current increment
+     * @param {string} increment - if Increment is given as a string suffixed by the percent sign (%) will set that percentage absolutely.
+     * @param {string} zoomDirection - Defaults to 'width' if specified as 'height' will change the height percentage instead of width.
+     */
+    jQuery.fn.imageViewer.zoom = function(increment,zoomDirection){
+      var newZoomLevel = settings['zoomLevel']
+
+      if (typeof increment === 'string' && increment.match(/%$/))
+        newZoomLevel  = parseInt(increment)
+      else
+        newZoomLevel  += increment
+
+      //prevent zooming out past reasonable level
+      if (newZoomLevel < settings['increment'])
+        newZoomLevel = settings['increment']
+
+      if (zoomDirection)
+        settings['zoomDirection'] = zoomDirection
+
+      zoomAbsolute(newZoomLevel);
     };
 
-    $.fn.imageViewer.rotate_all = function(increment){
-      $.each(settings["images"], function(index, image) {
-        showPage(index);
+    /** Rotates all images currently in the images var
+     * @param {integer} increment - Angle to be rotated by.  Given the integer 90 will rotate current image by 90 degrees to the right.
+     */
+    jQuery.fn.imageViewer.rotate_all = function(increment){
+      jQuery.each(settings["images"], function(index, image) {
         rotate(increment, index);
       });
-      showPage(0);
     };
 
-    $.fn.imageViewer.rotate = function(increment){
+    /** Rotates current image by increment to the right
+     * @param {integer} increment - Angle to be rotated by.  Given the integer 90 will rotate current image by 90 degrees to the right.
+     */
+    jQuery.fn.imageViewer.rotate = function(increment){
       rotate(increment);
     };
 
-    $.fn.imageViewer.print = function() {
+    /** Will load all images currently in the images variable and loads them in a new tab.  Once in a new tab will open the print dialog box for printing.  Images will each be printed separated by a page break.  Closes new tab when print dialog is dismissed (by printing or by cancelling)
+     */
+    jQuery.fn.imageViewer.print = function() {
       var myWindow = window.open("", '_newtab');
       var image_tags = "";
 
-      $.each(settings["images"], function(index, image) {
+      jQuery.each(settings["images"], function(index, image) {
         image_tags += '<img style="clear:both;width:100%;page-break-after:always;max-width:none;" src="' + image + '" />';
       });
 
@@ -102,32 +174,36 @@
     };
 
 
+    /** initializes the image viewer's internal state.  Any settings passed to options are merged into the default settings object.  Calls a number of functions to initialize the viewer including setting up containers, listeners, et al
+     * @param {array} image_path_array - Array of image paths.  These paths will be inserted as the src attribute on img tags later, so ensure that these are valid paths.
+     * @param {object} options - options that will be merged into the default settings object.
+     * @private
+     */
     function init(image_path_array, options){
-      main_div_id = (settings["mainDivId"]).attr("id");
       if ( options )
-        $.extend( settings, options );
+        jQuery.extend( settings, options );
 
       this.data("settings", settings);
 
-      if (main_div_id !== undefined)
-        settings["mainDivId"] = main_div_id;
-
       setupContainers();
       setupHeight();
       setupKeyBindings();
-      if (settings['nav_links'] === true) {createNavTable();}
+      if (settings['navLinks'] === true) {createNavTable();}
       setupImages(image_path_array);
       setupLegend();
       setupMaskListener();
       handleWindowResize();
     }
 
+    /** Builds and prepends the the legend dialog box to the #image-viewer-key-bindings.
+     * @private
+     */
     function setupLegend() {
-      var modal_container = "<div id='key-bindings'></div>";
-      var mask_div = "<div id='mask'></div>";
+      var modal_container = "<div id='image-viewer-key-bindings'></div>";
+      var mask_div = "<div id='image-viewer-mask'></div>";
 
       var key_binding_div = "<div class='window' id='dialog'>" +
-      "<a href='#' style='float:right;' class='close'>(X) Close</a>" +
+      "<a href='#' class='image-viewer-close'>" + addGlyphIcon('icon-remove') + "</a>" +
           "<table>" +
           "  <thead>" +
           "    <tr>" +
@@ -140,6 +216,8 @@
           "    <tr><td>'i'</td><td>Zoom In</td></tr>" +
           "    <tr><td>'k', 'o'</td><td>Zoom Out</td></tr>" +
           "    <tr><td>'l', 'n'</td><td>Next</td></tr>" +
+          "    <tr><td>'ctrl+l', 'h'</td><td>Fit Height</td></tr>" +
+          "    <tr><td>'w'</td><td>Fit Width</td></tr>" +
           "    <tr><td>'j', 'p'</td><td>Previous</td></tr>" +
           "    <tr><td>'e', 'up arrow'</td><td>Scroll Up</td></tr>" +
           "    <tr><td>'d', 'down arrow'</td><td>Scroll Down</td></tr>" +
@@ -154,26 +232,29 @@
       "</div>";
 
       $('body').prepend(modal_container);
-      $('#key-bindings').append(key_binding_div);
-      $('#key-bindings').append(mask_div);
+      $('#image-viewer-key-bindings').append(key_binding_div);
+      $('#image-viewer-key-bindings').append(mask_div);
     }
     function setupMaskListener(){
-      $('.window .close').click(function (e) {
+      $('.window .image-viewer-close').click(function (e) {
               //Cancel the link behavior
               e.preventDefault();
-              $('#mask, .window').hide();
+              settings["mainDiv"].imageViewer.hideLegend();
           });
-      $('#mask').click(function () {
+      $('#image-viewer-mask').click(function () {
           $(this).hide();
           $('.window').hide();
       });
     }
+
+    /** resets settings object and reinitializes the image_viewer.
+     * @private
+     */
     function reload(){
       image_array                 = settings["images"];
-      settings["zoomLevel"]       = 75;
+      settings["zoomLevel"]       = 100;
       settings["images"]          = null;
       settings["mainDiv"]         = null;
-      settings["imageOverlay"]    = null;
       settings["imageViewerImg"]  = null;
       settings["imageIndex"]      = null;
       settings["currentImageDiv"] = null;
@@ -181,88 +262,126 @@
       init(image_array);
     }
 
+    /** Builds the navLinks table.  Each call to createNavLink creates an a tag with a contained icon tag.  These link tags contain the onclick events
+     * @private
+     */
     function createNavTable() {
-      table = '<table id="navlinks-for-' + settings['mainDivId'] + '" class="table" style="margin:0px;">' +
+      var id = '#navlinks-for-' + settings['mainDiv'].attr('id')
+
+      table = '<table id="' + id + '" class="image-viewer-nav-links">' +
       '<tr>' +
-      '<td>' + createNavLink('scrollPage(-1)', 'previous') + '</td>' +
-      '<td>' + createNavLink('scrollPage(1)', 'next') + '</td>' +
-      '<td>' + createNavLink('scroll(-1 * ' + settings["increment"] + ",0)", 'left') + '</td>' +
-      '<td>' + createNavLink('scroll(' + settings["increment"] + ",0)", 'right') + '</td>' +
-      '<td>' + createNavLink('scroll(0, -1 * ' + settings["increment"] + ")", 'up') + '</td>' +
-      '<td>' + createNavLink('scroll(0,' + settings["increment"] + ")", 'down') + '</td>' +
-      '<td>' + createNavLink('zoom(' + settings["increment"] + ")", 'zoom in') + '</td>' +
-      '<td>' + createNavLink('zoom(-1 * ' + settings["increment"] + ")", 'zoom out') + '</td>' +
-      '<td>' + createNavLink('rotate(90)', 'rotate') + '</td>' +
-      '<td>' + createNavLink('rotate_all(90)', 'rotate all') + '</td>' +
-      '<td>' + createNavLink('print()', 'print') + '</td>' +
-      '<td>' + createNavLink('displayLegend()', 'legend') + '</td>' +
+      '<td>' + createNavLink('scrollPage(-1)', 'Previous Page', 'icon-backward') + '</td>' +
+      '<td>' + createNavLink('scrollPage(1)', 'Next Page', 'icon-forward') + '</td>' +
+      '<td>' + createNavLink('scroll(-1 * ' + settings["increment"] + ",0)", 'Left', 'icon-arrow-left') + '</td>' +
+      '<td>' + createNavLink('scroll(' + settings["increment"] + ",0)", 'Right', 'icon-arrow-right') + '</td>' +
+      '<td>' + createNavLink('scroll(0, -1 * ' + settings["increment"] + ")", 'Up', 'icon-arrow-up') + '</td>' +
+      '<td>' + createNavLink('scroll(0,' + settings["increment"] + ")", 'Down', 'icon-arrow-down') + '</td>' +
+      '<td id="' +settings["mainDiv"].attr('id') + '-nav-info' + '" class="image-viewer-nav-info"></td>' +
+      '<td>' + createNavLink('zoom(' + settings["increment"] + ")", 'Zoom In', 'icon-plus') + '</td>' +
+      '<td>' + createNavLink('zoom(-1 * ' + settings["increment"] + ")", 'Zoom Out', 'icon-minus') + '</td>' +
+      '<td>' + createNavLink('rotate(90)', 'Rotate Page', 'icon-repeat') + '</td>' +
+      '<td>' + createNavLink('rotate_all(90)', 'Rotate All Pages', 'icon-refresh') + '</td>' +
+      '<td>' + createNavLink('print()', 'Print', 'icon-print') + '</td>' +
+      '<td>' + createNavLink('displayLegend()', 'Display Legend', 'icon-info-sign') + '</td>' +
       '</tr>' +
       '</table>';
 
       settings["mainDiv"].prepend(table);
     }
-    function createNavLink( call, name ) {
-      var div_id = '#' + settings["mainDivId"];
 
-      return '<a href="#" onclick="' +
+    /**  builds an i tag with a class of glyph
+     * @param {string} glyph - name of glyph class from css.  View image_viewer_rails.css.scss to see options.
+     * @private
+     */
+    function addGlyphIcon(glyph) {
+      return '<i class="' + glyph + '"></i>'
+    }
+
+    /** builds link tag with title of name, and the onclick function of call
+     * @param {string} call - the imageViewer call that will be assigned to the onclick even of this link.
+     * @param {string} name - inserted directly into title text of link.
+     * @param {string} glyph - name of css class glyphicon (see addGlyphIcon)
+     * @private
+     */
+    function createNavLink( call, name, glyph) {
+      var div_id = '#' + settings["mainDiv"].attr("id");
+
+      return '<a href="#" title="' + name + '" class="image-viewer-nav-link" onclick="' +
       '$(\'' + div_id + '\')' +
       '.imageViewer.' +  call + ';return false;">' +
-      name +
+      addGlyphIcon(glyph) +
       '</a>';
     }
 
+    /** Clears mainDiv (which is _this_ upon initialization).  Assigns width to mainDiv from settings var
+     * @private
+     */
     function setupContainers(){
-      settings["mainDiv"] = $('#' + settings["mainDivId"]);
       settings["mainDiv"].empty();
       settings["mainDiv"].addClass('image-viewer-container');
       settings["mainDiv"].css("width", settings["width"]);
-      settings["mainDiv"].append('<div id="' + settings["mainDivId"] + '-image-overlay" class="image-overlay"></div>');
-      settings["imageOverlay"] = $('#' + settings["mainDivId"] + '-image-overlay');
     }
 
+    /** Creates the img tags on the page and assigns them unique ids
+     * @param {array} images - This function is called from init() and accepts the array of images passed there.
+     * @private
+     */
     function  setupImages(images){
       settings["images"] = images;
       var style = "";
 
-      $.each(images, function(index, image){
+      jQuery.each(images, function(index, image)  {
         if(index !== 0)
           style += "display: none;";
 
-        settings["mainDiv"].append('<div id="' + settings["mainDivId"] + '-image-viewer-' + index + '" ' +
+        settings["mainDiv"].append('<div id="' + settings["mainDiv"].attr("id") + '-image-viewer-' + index + '" ' +
         'class="image-viewer" ' +
         'style="' + style + '">' +
-        '<img id="' + settings["mainDivId"] + '-full-image-' + index + '" ' +
+        '<img id="' + settings["mainDiv"].attr("id") + '-full-image-' + index + '" ' +
         'src="' + image + '" ' +
         'alt="Full Image" ' +
-        'style="width:100%;max-width:none;" ' +
+        'style="' + settings["zoomDirection"] + ':' + settings["zoomLevel"] + '%;max-width:none;" ' +
         'angle="0"/>' +
         '</div>');
 
       });
 
-      settings["currentImageDiv"] = $('#' + settings["mainDivId"] + '-image-viewer-0');
-      settings["imageViewerImg"] = $('#' + settings["mainDivId"] + '-full-image-0');
+      settings["currentImageDiv"] = $('#' + settings["mainDiv"].attr("id") + '-image-viewer-0');
+      settings["imageViewerImg"] = $('#' + settings["mainDiv"].attr("id") + '-full-image-0');
       settings["imageIndex"] = 0;
       updateOverlay();
     }
 
+    /** Redirects window to root path
+     * @private
+     */
     function delayedRedirect(){
       window.location = "/";
     }
 
+    /** Removes keybindings from keymaster. */
     function teardownKeyBindings(){
       key.deleteScope('imageviewer');
     }
 
+    /** Convenience method for adding keybindings to imageViewer through keymaster.js
+     * @param {string} keyString - String of the key to be bound to func.  Listing of keys can be found: https://github.com/madrobby/keymaster
+     * @param {string} keyScope - Scope for current keybinds.  This scope can be deleted (and is with teardownKeyBindings().
+     * @param {func} func - function to be bound ot the keyString.
+     * @private
+     */
     function addKeyToKeyMaster(keyString, keyScope, func){
       var keys = typeof(keyString) === 'string' ? [keyString] : keyString
-      $.each(keys, function(index, k) {
-        if ($.inArray(k, settings['suppressed_keys']) === -1) {
+      jQuery.each(keys, function(index, k) {
+        if (jQuery.inArray(k, settings['suppressedKeys']) === -1) {
           key(k, keyScope, func);
         }
       });
     }
 
+    /** Assigns the various key combinations to their actual function calls.
+     * @private
+     */
     function  setupKeyBindings(){
       teardownKeyBindings();
 
@@ -270,48 +389,55 @@
 
       keymasterCommandModeCallback = updateOverlay;
 
-      // prevent alt+f4 from closing browser
+      /** prevent alt+f4 from closing browser
       addKeyToKeyMaster('alt+f4', 'imageviewer', function(){ alert('NO WAY JOSE! (Don\'t hit Alt+F4!!!)'); return false; });
-      // zoom out
+      /** zoom out */
       addKeyToKeyMaster(['k','shift+k','o','shift+o'], 'imageviewer', function(){ self.zoom(-1 * settings["increment"]); return false;});
-      // zoom in
+      /** zoom in */
       addKeyToKeyMaster(['i','shift+i'], 'imageviewer', function(){ self.zoom(settings["increment"]); return false;});
-      // scroll up
+      /** scroll up */
       addKeyToKeyMaster(['e','shift+e','up'], 'imageviewer', function(){ self.scroll(0,-1 * settings["increment"]); return false;});
-      // scroll down
+      /** scroll down */
       addKeyToKeyMaster(['d','shift+d','down'], 'imageviewer', function(){ self.scroll(0,settings["increment"]); return false;});
-      // page up
+      /** page up */
       addKeyToKeyMaster(['a','shift+a','pageup'], 'imageviewer', function(){ self.scroll(0,-1 * (settings["increment"] * 5)); return false;});
-      // page down
+      /** page down */
       addKeyToKeyMaster([';','pagedown'], 'imageviewer', function(){ self.scroll(0,(settings["increment"] * 5)); return false;});
-      // scroll right
+      /**  scroll right */
       addKeyToKeyMaster(['f','shift+f','right'], 'imageviewer', function(){ self.scroll(settings["increment"],0); return false;});
-      // scroll left
+      /** scroll left */
       addKeyToKeyMaster(['s','shift+s','left'], 'imageviewer', function(){ self.scroll((-1 * settings["increment"]),0); return false; });
-      // previous page
+      /**  previous page */
       addKeyToKeyMaster(['j','shift+j','p','shift+p'], 'imageviewer', function(){ self.scrollPage(-1); return false; });
-      // next page
+      /** next page */
       addKeyToKeyMaster(['l','shift+l','n','shift+n'], 'imageviewer', function(){ self.scrollPage(1); return false; });
-      // rotate
+      /** rotate */
       addKeyToKeyMaster(['r','shift+r'], 'imageviewer', function(){ self.rotate(90); return false; });
-      // rotate all
+      /** rotate all */
       addKeyToKeyMaster(['t','shift+t'], 'imageviewer', function(){ self.rotate_all(90); return false; });
+      /** zoom to fit width */
+      addKeyToKeyMaster('w', 'imageviewer', function(){ self.zoom('100%','width'); return false; });
+      /** zoom to fit height */
+      addKeyToKeyMaster(['h','ctrl+l','ctrl+shift+l'], 'imageviewer', function(){ self.zoom('100%','height'); return false; });
     }
 
+    /** Calculates the height of the view port and sets the main div to fit.
+     * @private
+     */
     function setupHeight(){
       var window_height = $(window).height();
       var footer        = $('#footer');
-      var navlinks      = $('#navlinks-for-' + settings['mainDivId']);
+      var navlinks      = $('#navlinks-for-' + settings['mainDiv'].attr("id"));
 
       var footer_height, menu_offset;
 
-      if (settings['calculate_height_with_header']) {
+      if (settings['calculateHeightWithHeader']) {
         menu_offset = settings["mainDiv"].offset().top;
       } else {
         menu_offset = 0;
       }
 
-      if(footer && settings['calculate_height_with_footer']){
+      if(footer && settings['calculateHeightWithFooter']){
         footer_height = footer.height() + 7;
       } else {
         footer_height = 0;
@@ -325,17 +451,24 @@
       $('.image-viewer').css('height', (settings["mainDiv"].height() - navlinks.height()) + 'px');
     }
 
+    /** call setupHeight() on resize */
     function handleWindowResize(){
       $(window).bind('resize', setupHeight);
     }
 
+    /** Zooms image's 'height' or 'width' to a given percentage.  Height or Width is decided by setting the zoomDirection setting var.
+     * @param {integer} zoomLevel - Percentage you'd like the image to be sized to.
+     * @private
+     */
     function zoomAbsolute(zoomLevel){
       previous_zoomLevel = settings["zoomLevel"];
       settings["zoomLevel"] = zoomLevel;
+      object_to_zoom = $('#' + settings["mainDiv"].attr("id") + '-full-image-' + settings["imageIndex"]);
 
-      object_to_zoom = $('#' + settings["mainDivId"] + '-full-image-' + settings["imageIndex"]);
+      object_to_zoom.css('width', '')
+      object_to_zoom.css('height','')
 
-      object_to_zoom.css('width', settings["zoomLevel"] + '%');
+      object_to_zoom.css(settings['zoomDirection'], settings["zoomLevel"] + '%');
       self.scroll(0,0);
     }
 
@@ -343,31 +476,43 @@
       settings["imageIndex"] = page;
 
       settings["currentImageDiv"].hide();
-      settings["currentImageDiv"] = $('#' + settings["mainDivId"] + '-image-viewer-' + page);
-      settings["imageViewerImg"] = $('#' + settings["mainDivId"] + '-full-image-' + page);
+      settings["currentImageDiv"] = $('#' + settings["mainDiv"].attr("id") + '-image-viewer-' + page);
+      settings["imageViewerImg"] = $('#' + settings["mainDiv"].attr("id") + '-full-image-' + page);
       settings["currentImageDiv"].show();
       updateOverlay();
     }
 
+    /** Updates the nav-info to display both command mode toggle and "page of pages"
+     * @param {bool} commandMode - Sets comand mode to true or false.
+     * @private
+     */
     function updateOverlay(commandMode){
-      var s = (settings["imageIndex"] + 1) + ' / ' + settings["images"].length;
+      overlay = $('#' + settings["mainDiv"].attr("id") + '-nav-info');
+
+      if (settings['images'].length === 0)
+        return;
+
+      var s = (settings["imageIndex"] + 1) + ' of ' + settings["images"].length;
 
       if(commandMode === undefined)
-        commandMode = settings["imageOverlay"].html().search(/CM/) !== -1;
+        commandMode = overlay.html().search(/CM/) !== -1;
 
       if(commandMode === true)
         s += ' CM';
 
-      settings["imageOverlay"].html(s);
+      overlay.html(s);
     }
 
+    /** Calls jQuery.rotate.js's rotate function.
+     * @param {integer} increment - number of degrees to rotate image.
+     * @param {integer} imageIndex - Set which image to rotate.  Defaults to current image based of settings["imageIndex"]
+     * @private
+     */
     function rotate(increment, imageIndex){
       if (imageIndex === undefined) imageIndex = settings["imageIndex"];
-      var image = $('#' + settings["mainDivId"] + '-full-image-' + imageIndex);
+      var image = $('#' + settings["mainDiv"].attr("id") + '-full-image-' + imageIndex);
       var current_angle = parseInt(image.attr('angle'),10);
 
-      zoomAbsolute(100);
-
       image.rotate(current_angle + increment);
       current_angle = parseInt(image.getRotateAngle(),10) % 360;
 
@@ -383,10 +528,11 @@
       image.attr('angle',current_angle);
     }
 
+    /** if argument passed to IIFE aren't a method defined on imageViewer then pass the arguments to initialize. */
     if ( typeof method === 'object' || ! method )
-      return init.apply( this, arguments);
+      return init.apply(this, arguments);
     else
-      $.error( 'Method ' +  method + ' does not exist on jQuery.imageViewer' );
+      jQuery.error( 'Method ' +  method + ' does not exist on jQuery.imageViewer' );
 
   };
   })(jQuery);