Clean Up the display code a bit

Gruntfile.js

@@ -24,10 +24,8 @@ module.exports = function(grunt) {
       dist: {
         //src: ['src/<%= pkg.name %>.js'],
         src: [
-          'src/intro.js',
-          'src/jquery.embedly.js',
-          'src/display.js',
-          'src/outro.js'],
+          'src/jquery.embedly.js'
+        ],
         dest: 'dist/<%= pkg.name %>.js'
       }
     },
@@ -61,7 +59,7 @@ module.exports = function(grunt) {
       globals: {
         jQuery: true
       },
-      all: ['Gruntfile.js', 'src/jquery.embedly.js', 'src/display.js', 'test/**/*.js']
+      all: ['Gruntfile.js', 'src/jquery.embedly.js', 'test/**/*.js']
     }
   });
 

src/jquery.embedly.js

@@ -22,11 +22,11 @@
 
   var urlRe = /(http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
 
-  function none(obj){
+  var none = function(obj){
     return obj === null || obj === undefined;
-  }
+  };
   // Split a list into a bunch of batchs.
-  function batch(list, split){
+  var batch = function(list, split){
     var batches = [], current = [];
     $.each(list, function(i, obj){
       current.push(obj);
@@ -39,23 +39,23 @@
       batches.push(current);
     }
     return batches;
-  }
+  };
   // Make an argument a list
-  function listify(obj){
+  var listify = function(obj){
     if (none(obj)){
       return [];
     } else if (!$.isArray(obj)){
       return [obj];
     }
     return obj;
-  }
+  };
 
   // From: http://bit.ly/T9SjVv
-  function zip(arrays) {
+  var zip = function(arrays) {
     return $.map(arrays[0], function(_,i){
       return [$.map(arrays, function(array){return array[i];})];
     });
-  }
+  };
 
   /* Keeper
    *
@@ -237,6 +237,48 @@
     }
   };
 
+  // direct API dealing directly with Embedly's Display API.
+  var ImageAPI = function () {};
+  ImageAPI.prototype = {
+
+    // Based on the method and options, build the image url,
+    build: function(method, url, options){
+      options = none(options) ? {}: options;
+
+      var secure = options.secure;
+      if (none(secure)){
+        // If the secure param was not see, use the protocol instead.
+        secure = window.location.protocol === 'https:'? true:false;
+      }
+
+      var base = (secure ? 'https': 'http') +
+        '://i.embed.ly/' + (method === 'display' ? '1/' : '1/display/') + method;
+
+      // Base Query
+      var query = none(options.query) ? {} : options.query;
+      query.key = options.key;
+      base += '?'+$.param(query);
+
+      // Add the image url
+      base += '&url='+ encodeURIComponent(url);
+
+      return base;
+    },
+    // Wrappers around build image url function.
+    display: function(url, options){
+      return this.build('display', url, options);
+    },
+    resize: function(url, options){
+      return this.build('resize', url, options);
+    },
+    fill: function(url, options){
+      return this.build('fill', url, options);
+    },
+    crop: function(url, options){
+      return this.build('crop', url, options);
+    }
+  };
+
   var Embedly = function (element, url, options) {
     this.init(element, url, options);
   };
@@ -336,6 +378,9 @@
   // Sets up a generic API for use.
   $.embedly = new API();
 
+  // Add display to it.
+  $.embedly.display = new ImageAPI();
+
   $.fn.embedly = function ( options ) {
     if (options === undefined || typeof options === 'object') {
 
@@ -405,4 +450,69 @@
     return ! none($(elem).data('embedly'));
   };
 
-}(jQuery));
+  // Use with selector to find img tags with data-src attribute
+  // e.g. <img data-src="http://embed.ly/static/images/logo.png"></img>
+  $.fn.display = function (endpoint, options ) {
+    if (options === undefined || typeof options === 'object') {
+
+      // Use the defaults
+      options = $.extend({}, defaults, $.embedly.defaults, typeof options === 'object' && options);
+
+      // Key Check.
+      if (none(options.key)){
+        $.embedlyDisplay.log('error', 'Embedly jQuery requires an API Key. Please sign up for one at http://embed.ly/display');
+        return this.each($.noop);
+      }
+
+      // Create the node for all elements
+      var create = function (elem){
+        var $elem = $(elem);
+        if (!$elem.data('display')) {
+          var url = $elem.data('src') || $elem.attr('href');
+
+          var data = {
+            original_url : url,
+            url : $.embedly.display.build(endpoint, url, options)
+          };
+
+          $elem.data('display', data);
+          $elem.trigger('initialized', [elem]);
+
+          var html = "<img src='" + data.url + "' />";
+          if ($elem.is('a')){
+            $elem.append(html);
+          }else {
+            $elem.replaceWith(html);
+          }
+        }
+      };
+      var doCreate = function(elem){
+        if (none($(elem).data('src')) && none($(elem).attr('href'))){
+          return false;
+        }
+        return true;
+      };
+
+      // Find every image tag with a data-src attribute
+      var elems = this.each(function () {
+        if ( doCreate(this) ){
+          create(this);
+        } else {
+          $(this).find('img,a').each(function(){
+            if ( doCreate(this) ){
+              create(this);
+            }
+          });
+        }
+      });
+
+      return elems;
+    }
+  };
+
+  // Custom selector.
+  $.expr[':'].display = function(elem) {
+    return ! none($(elem).data('display'));
+  };
+
+}(jQuery, window));

test/embedly-jquery.html

@@ -9,7 +9,7 @@
   <link rel="stylesheet" href="../libs/qunit/qunit.css" media="screen">
   <script src="../libs/qunit/qunit.js"></script>
   <!-- Load local lib and tests. -->
-  <script src="../dist/jquery.embedly.js"></script>
+  <script src="../src/jquery.embedly.js"></script>
   <script src="embedly-jquery_test.js"></script>
   <!-- Removing access to jQuery and $. But it'll still be available as _$, if
        you REALLY want to mess around with jQuery in the console. REMEMBER WE