masonry-rails 0.1.0

data/vendor/assets/javascripts/masonry/jquery.infinitescroll.min.js

@@ -0,0 +1,47 @@
+/*
+	--------------------------------
+	Infinite Scroll
+	--------------------------------
+	+ https://github.com/paulirish/infinitescroll
+	+ version 2.0b2.110713
+	+ Copyright 2011 Paul Irish & Luke Shumard
+	+ Licensed under the MIT license
+	
+	+ Documentation: http://infinite-scroll.com/
+	
+*/
+
+(function(window,$,undefined){$.infinitescroll=function infscr(options,callback,element){this.element=$(element);this._create(options,callback);};$.infinitescroll.defaults={loading:{finished:undefined,finishedMsg:"<em>Congratulations, you've reached the end of the internet.</em>",img:"http://www.infinite-scroll.com/loading.gif",msg:null,msgText:"<em>Loading the next set of posts...</em>",selector:null,speed:'fast',start:undefined},state:{isDuringAjax:false,isInvalidPage:false,isDestroyed:false,isDone:false,isPaused:false,currPage:1},callback:undefined,debug:false,behavior:undefined,binder:$(window),nextSelector:"div.navigation a:first",navSelector:"div.navigation",contentSelector:null,extraScrollPx:150,itemSelector:"div.post",animate:false,pathParse:undefined,dataType:'html',appendCallback:true,bufferPx:40,errorCallback:function(){},infid:0,pixelsFromNavToBottom:undefined,path:undefined};$.infinitescroll.prototype={_binding:function infscr_binding(binding){var instance=this,opts=instance.options;if(!!opts.behavior&&this['_binding_'+opts.behavior]!==undefined){this['_binding_'+opts.behavior].call(this);return;}
+if(binding!=='bind'&&binding!=='unbind'){this._debug('Binding value  '+binding+' not valid')
+return false;}
+if(binding=='unbind'){(this.options.binder).unbind('smartscroll.infscr.'+instance.options.infid);}else{(this.options.binder)[binding]('smartscroll.infscr.'+instance.options.infid,function(){instance.scroll();});};this._debug('Binding',binding);},_create:function infscr_create(options,callback){if(!this._validate(options)){return false;}
+var opts=this.options=$.extend(true,{},$.infinitescroll.defaults,options),relurl=/(.*?\/\/).*?(\/.*)/,path=$(opts.nextSelector).attr('href');opts.contentSelector=opts.contentSelector||this.element;opts.loading.selector=opts.loading.selector||opts.contentSelector;if(!path){this._debug('Navigation selector not found');return;}
+opts.path=this._determinepath(path);opts.loading.msg=$('<div id="infscr-loading"><img alt="Loading..." src="'+opts.loading.img+'" /><div>'+opts.loading.msgText+'</div></div>');(new Image()).src=opts.loading.img;opts.pixelsFromNavToBottom=$(document).height()-$(opts.navSelector).offset().top;opts.loading.start=opts.loading.start||function(){$(opts.navSelector).hide();opts.loading.msg.appendTo(opts.loading.selector).show(opts.loading.speed,function(){beginAjax(opts);});};opts.loading.finished=opts.loading.finished||function(){opts.loading.msg.fadeOut('normal');};opts.callback=function(instance,data){if(!!opts.behavior&&instance['_callback_'+opts.behavior]!==undefined){instance['_callback_'+opts.behavior].call($(opts.contentSelector)[0],data);}
+if(callback){callback.call($(opts.contentSelector)[0],data);}};this._setup();},_debug:function infscr_debug(){if(this.options.debug){return window.console&&console.log.call(console,arguments);}},_determinepath:function infscr_determinepath(path){var opts=this.options;if(!!opts.behavior&&this['_determinepath_'+opts.behavior]!==undefined){this['_determinepath_'+opts.behavior].call(this,path);return;}
+if(!!opts.pathParse){this._debug('pathParse manual');return opts.pathParse;}else if(path.match(/^(.*?)\b2\b(.*?$)/)){path=path.match(/^(.*?)\b2\b(.*?$)/).slice(1);}else if(path.match(/^(.*?)2(.*?$)/)){if(path.match(/^(.*?page=)2(\/.*|$)/)){path=path.match(/^(.*?page=)2(\/.*|$)/).slice(1);return path;}
+path=path.match(/^(.*?)2(.*?$)/).slice(1);}else{if(path.match(/^(.*?page=)1(\/.*|$)/)){path=path.match(/^(.*?page=)1(\/.*|$)/).slice(1);return path;}else{this._debug('Sorry, we couldn\'t parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.');opts.state.isInvalidPage=true;}}
+this._debug('determinePath',path);return path;},_error:function infscr_error(xhr){var opts=this.options;if(!!opts.behavior&&this['_error_'+opts.behavior]!==undefined){this['_error_'+opts.behavior].call(this,xhr);return;}
+if(xhr!=='destroy'&&xhr!=='end'){xhr='unknown';}
+this._debug('Error',xhr);if(xhr=='end'){this._showdonemsg();}
+opts.state.isDone=true;opts.state.currPage=1;opts.state.isPaused=false;this._binding('unbind');},_loadcallback:function infscr_loadcallback(box,data){var opts=this.options,callback=this.options.callback,result=(opts.state.isDone)?'done':(!opts.appendCallback)?'no-append':'append',frag;if(!!opts.behavior&&this['_loadcallback_'+opts.behavior]!==undefined){this['_loadcallback_'+opts.behavior].call(this,box,data);return;}
+switch(result){case'done':this._showdonemsg();return false;break;case'no-append':if(opts.dataType=='html'){data='<div>'+data+'</div>';data=$(data).find(opts.itemSelector);};break;case'append':var children=box.children();if(children.length==0){return this._error('end');}
+frag=document.createDocumentFragment();while(box[0].firstChild){frag.appendChild(box[0].firstChild);}
+this._debug('contentSelector',$(opts.contentSelector)[0])
+$(opts.contentSelector)[0].appendChild(frag);data=children.get();break;}
+opts.loading.finished.call($(opts.contentSelector)[0],opts)
+if(opts.animate){var scrollTo=$(window).scrollTop()+$('#infscr-loading').height()+opts.extraScrollPx+'px';$('html,body').animate({scrollTop:scrollTo},800,function(){opts.state.isDuringAjax=false;});}
+if(!opts.animate)opts.state.isDuringAjax=false;callback(this,data);},_nearbottom:function infscr_nearbottom(){var opts=this.options,pixelsFromWindowBottomToBottom=0+$(document).height()-(opts.binder.scrollTop())-$(window).height();if(!!opts.behavior&&this['_nearbottom_'+opts.behavior]!==undefined){this['_nearbottom_'+opts.behavior].call(this);return;}
+this._debug('math:',pixelsFromWindowBottomToBottom,opts.pixelsFromNavToBottom);return(pixelsFromWindowBottomToBottom-opts.bufferPx<opts.pixelsFromNavToBottom);},_pausing:function infscr_pausing(pause){var opts=this.options;if(!!opts.behavior&&this['_pausing_'+opts.behavior]!==undefined){this['_pausing_'+opts.behavior].call(this,pause);return;}
+if(pause!=='pause'&&pause!=='resume'&&pause!==null){this._debug('Invalid argument. Toggling pause value instead');};pause=(pause&&(pause=='pause'||pause=='resume'))?pause:'toggle';switch(pause){case'pause':opts.state.isPaused=true;break;case'resume':opts.state.isPaused=false;break;case'toggle':opts.state.isPaused=!opts.state.isPaused;break;}
+this._debug('Paused',opts.state.isPaused);return false;},_setup:function infscr_setup(){var opts=this.options;if(!!opts.behavior&&this['_setup_'+opts.behavior]!==undefined){this['_setup_'+opts.behavior].call(this);return;}
+this._binding('bind');return false;},_showdonemsg:function infscr_showdonemsg(){var opts=this.options;if(!!opts.behavior&&this['_showdonemsg_'+opts.behavior]!==undefined){this['_showdonemsg_'+opts.behavior].call(this);return;}
+opts.loading.msg.find('img').hide().parent().find('div').html(opts.loading.finishedMsg).animate({opacity:1},2000,function(){$(this).parent().fadeOut('normal');});opts.errorCallback.call($(opts.contentSelector)[0],'done');},_validate:function infscr_validate(opts){for(var key in opts){if(key.indexOf&&key.indexOf('Selector')>-1&&$(opts[key]).length===0){this._debug('Your '+key+' found no elements.');return false;}
+return true;}},bind:function infscr_bind(){this._binding('bind');},destroy:function infscr_destroy(){this.options.state.isDestroyed=true;return this._error('destroy');},pause:function infscr_pause(){this._pausing('pause');},resume:function infscr_resume(){this._pausing('resume');},retrieve:function infscr_retrieve(pageNum){var instance=this,opts=instance.options,path=opts.path,box,frag,desturl,method,condition,pageNum=pageNum||null,getPage=(!!pageNum)?pageNum:opts.state.currPage;beginAjax=function infscr_ajax(opts){opts.state.currPage++;instance._debug('heading into ajax',path);box=$(opts.contentSelector).is('table')?$('<tbody/>'):$('<div/>');desturl=path.join(opts.state.currPage);method=(opts.dataType=='html'||opts.dataType=='json')?opts.dataType:'html+callback';if(opts.appendCallback&&opts.dataType=='html')method+='+callback'
+switch(method){case'html+callback':instance._debug('Using HTML via .load() method');box.load(desturl+' '+opts.itemSelector,null,function infscr_ajax_callback(responseText){instance._loadcallback(box,responseText);});break;case'html':case'json':instance._debug('Using '+(method.toUpperCase())+' via $.ajax() method');$.ajax({url:desturl,dataType:opts.dataType,complete:function infscr_ajax_callback(jqXHR,textStatus){condition=(typeof(jqXHR.isResolved)!=='undefined')?(jqXHR.isResolved()):(textStatus==="success"||textStatus==="notmodified");(condition)?instance._loadcallback(box,jqXHR.responseText):instance._error('end');}});break;}};if(!!opts.behavior&&this['retrieve_'+opts.behavior]!==undefined){this['retrieve_'+opts.behavior].call(this,pageNum);return;}
+if(opts.state.isDestroyed){this._debug('Instance is destroyed');return false;};opts.state.isDuringAjax=true;opts.loading.start.call($(opts.contentSelector)[0],opts);},scroll:function infscr_scroll(){var opts=this.options,state=opts.state;if(!!opts.behavior&&this['scroll_'+opts.behavior]!==undefined){this['scroll_'+opts.behavior].call(this);return;}
+if(state.isDuringAjax||state.isInvalidPage||state.isDone||state.isDestroyed||state.isPaused)return;if(!this._nearbottom())return;this.retrieve();},toggle:function infscr_toggle(){this._pausing();},unbind:function infscr_unbind(){this._binding('unbind');},update:function infscr_options(key){if($.isPlainObject(key)){this.options=$.extend(true,this.options,key);}}}
+$.fn.infinitescroll=function infscr_init(options,callback){var thisCall=typeof options;switch(thisCall){case'string':var args=Array.prototype.slice.call(arguments,1);this.each(function(){var instance=$.data(this,'infinitescroll');if(!instance){return false;}
+if(!$.isFunction(instance[options])||options.charAt(0)==="_"){return false;}
+instance[options].apply(instance,args);});break;case'object':this.each(function(){var instance=$.data(this,'infinitescroll');if(instance){instance.update(options);}else{$.data(this,'infinitescroll',new $.infinitescroll(options,callback,this));}});break;}
+return this;};var event=$.event,scrollTimeout;event.special.smartscroll={setup:function(){$(this).bind("scroll",event.special.smartscroll.handler);},teardown:function(){$(this).unbind("scroll",event.special.smartscroll.handler);},handler:function(event,execAsap){var context=this,args=arguments;event.type="smartscroll";if(scrollTimeout){clearTimeout(scrollTimeout);}
+scrollTimeout=setTimeout(function(){$.event.handle.apply(context,args);},execAsap==="execAsap"?0:100);}};$.fn.smartscroll=function(fn){return fn?this.bind("smartscroll",fn):this.trigger("smartscroll",["execAsap"]);};})(window,jQuery);

data/vendor/assets/javascripts/masonry/jquery.masonry.js

@@ -0,0 +1,682 @@
+/**
+ * jQuery Masonry v2.1.05
+ * A dynamic layout plugin for jQuery
+ * The flip-side of CSS Floats
+ * http://masonry.desandro.com
+ *
+ * Licensed under the MIT license.
+ * Copyright 2012 David DeSandro
+ */
+
+/*jshint browser: true, curly: true, eqeqeq: true, forin: false, immed: false, newcap: true, noempty: true, strict: true, undef: true */
+/*global jQuery: false */
+
+(function( window, $, undefined ){
+
+  'use strict';
+
+  /*
+   * smartresize: debounced resize event for jQuery
+   *
+   * latest version and complete README available on Github:
+   * https://github.com/louisremi/jquery.smartresize.js
+   *
+   * Copyright 2011 @louis_remi
+   * Licensed under the MIT license.
+   */
+
+  var $event = $.event,
+      resizeTimeout;
+
+  $event.special.smartresize = {
+    setup: function() {
+      $(this).bind( "resize", $event.special.smartresize.handler );
+    },
+    teardown: function() {
+      $(this).unbind( "resize", $event.special.smartresize.handler );
+    },
+    handler: function( event, execAsap ) {
+      // Save the context
+      var context = this,
+          args = arguments;
+
+      // set correct event type
+      event.type = "smartresize";
+
+      if ( resizeTimeout ) { clearTimeout( resizeTimeout ); }
+      resizeTimeout = setTimeout(function() {
+        $.event.handle.apply( context, args );
+      }, execAsap === "execAsap"? 0 : 100 );
+    }
+  };
+
+  $.fn.smartresize = function( fn ) {
+    return fn ? this.bind( "smartresize", fn ) : this.trigger( "smartresize", ["execAsap"] );
+  };
+
+
+
+// ========================= Masonry ===============================
+
+
+  // our "Widget" object constructor
+  $.Mason = function( options, element ){
+    this.element = $( element );
+
+    this._create( options );
+    this._init();
+  };
+
+  $.Mason.settings = {
+    isResizable: true,
+    isDraggable: false,
+    dragHandleSelector: null,
+    dragClass: null,
+    isAnimated: false,
+    animationOptions: {
+      queue: false,
+      duration: 500
+    },
+    gutterWidth: 0,
+    isRTL: false,
+    isFitWidth: false,
+    containerStyle: {
+      position: 'relative'
+    }
+  };
+
+  $.Mason.prototype = {
+
+    _filterFindBricks: function( $elems ) {
+      var selector = this.options.itemSelector;
+      // if there is a selector
+      // filter/find appropriate item elements
+      return !selector ? $elems : $elems.filter( selector ).add( $elems.find( selector ) );
+    },
+
+    _getBricks: function( $elems ) {
+      var $bricks = this._filterFindBricks( $elems )
+        .css({ position: 'absolute' })
+        .addClass('masonry-brick');
+      return $bricks;
+    },
+    
+    // sets up widget
+    _create : function( options ) {
+      
+      this.options = $.extend( true, {}, $.Mason.settings, options );
+      this.styleQueue = [];
+
+      // get original styles in case we re-apply them in .destroy()
+      var elemStyle = this.element[0].style;
+      this.originalStyle = {
+        // get height
+        height: elemStyle.height || ''
+      };
+      // get other styles that will be overwritten
+      var containerStyle = this.options.containerStyle;
+      for ( var prop in containerStyle ) {
+        this.originalStyle[ prop ] = elemStyle[ prop ] || '';
+      }
+
+      this.element.css( containerStyle );
+
+      this.horizontalDirection = this.options.isRTL ? 'right' : 'left';
+
+      this.offset = {
+        x: parseInt( this.element.css( 'padding-' + this.horizontalDirection ), 10 ),
+        y: parseInt( this.element.css( 'padding-top' ), 10 )
+      };
+      
+      this.isFluid = this.options.columnWidth && typeof this.options.columnWidth === 'function';
+
+      // add masonry class first time around
+      var instance = this;
+      setTimeout( function() {
+        instance.element.addClass('masonry');
+      }, 0 );
+      
+      // bind resize method
+      if ( this.options.isResizable ) {
+        $(window).bind( 'smartresize.masonry', function() { 
+          instance.resize();
+        });
+      }
+
+
+      // need to get bricks
+      this.reloadItems();
+
+      // set up dragging
+      if (this.options.isDraggable ){
+        this._initDrag(this.$bricks);
+      }
+
+    },
+
+
+    // _init fires when instance is first created
+    // and when instance is triggered again -> $el.masonry();
+    _init : function( callback ) {
+      this._getColumns();
+      this._reLayout( callback );
+    },
+
+    option: function( key, value ){
+      // set options AFTER initialization:
+      // signature: $('#foo').bar({ cool:false });
+      if ( $.isPlainObject( key ) ){
+        this.options = $.extend(true, this.options, key);
+      } 
+    },
+    
+    // ====================== General Layout ======================
+
+    // used on collection of atoms (should be filtered, and sorted before )
+    // accepts atoms-to-be-laid-out to start with
+    layout : function( $bricks, callback ) {
+
+      // place each brick
+      for (var i=0, len = $bricks.length; i < len; i++) {
+        this._placeBrick( $bricks[i] );
+      }
+      
+      // set the size of the container
+      var containerSize = {};
+      containerSize.height = Math.max.apply( Math, this.colYs );
+      if ( this.options.isFitWidth ) {
+        var unusedCols = 0;
+        i = this.cols;
+        // count unused columns
+        while ( --i ) {
+          if ( this.colYs[i] !== 0 ) {
+            break;
+          }
+          unusedCols++;
+        }
+        // fit container to columns that have been used;
+        containerSize.width = (this.cols - unusedCols) * this.columnWidth - this.options.gutterWidth;
+      }
+      this.styleQueue.push({ $el: this.element, style: containerSize });
+
+      // are we animating the layout arrangement?
+      // use plugin-ish syntax for css or animate
+      var styleFn = !this.isLaidOut ? 'css' : (
+            this.options.isAnimated ? 'animate' : 'css'
+          ),
+          animOpts = this.options.animationOptions;
+
+      // process styleQueue
+      var obj;
+      for (i=0, len = this.styleQueue.length; i < len; i++) {
+        obj = this.styleQueue[i];
+        obj.$el[ styleFn ]( obj.style, animOpts );
+      }
+
+      // clear out queue for next time
+      this.styleQueue = [];
+
+      // provide $elems as context for the callback
+      if ( callback ) {
+        callback.call( $bricks );
+      }
+      
+      this.isLaidOut = true;
+    },
+    
+    // calculates number of columns
+    // i.e. this.columnWidth = 200
+    _getColumns : function() {
+      var container = this.options.isFitWidth ? this.element.parent() : this.element,
+          containerWidth = container.width();
+
+                         // use fluid columnWidth function if there
+      this.columnWidth = this.isFluid ? this.options.columnWidth( containerWidth ) :
+                    // if not, how about the explicitly set option?
+                    this.options.columnWidth ||
+                    // or use the size of the first item
+                    this.$bricks.outerWidth(true) ||
+                    // if there's no items, use size of container
+                    containerWidth;
+
+      this.columnWidth += this.options.gutterWidth;
+
+      this.cols = Math.floor( ( containerWidth + this.options.gutterWidth ) / this.columnWidth );
+      this.cols = Math.max( this.cols, 1 );
+
+    },
+
+    // layout logic
+    _placeBrick: function( brick ) {
+      var $brick = $(brick),
+          colSpan, groupCount, groupY, groupColY, j;
+
+      //how many columns does this brick span
+      colSpan = Math.ceil( $brick.outerWidth(true) / this.columnWidth );
+      colSpan = Math.min( colSpan, this.cols );
+
+      if ( colSpan === 1 ) {
+        // if brick spans only one column, just like singleMode
+        groupY = this.colYs;
+      } else {
+        // brick spans more than one column
+        // how many different places could this brick fit horizontally
+        groupCount = this.cols + 1 - colSpan;
+        groupY = [];
+
+        // for each group potential horizontal position
+        for ( j=0; j < groupCount; j++ ) {
+          // make an array of colY values for that one group
+          groupColY = this.colYs.slice( j, j+colSpan );
+          // and get the max value of the array
+          groupY[j] = Math.max.apply( Math, groupColY );
+        }
+
+      }
+
+      // get the minimum Y value from the columns
+      var minimumY = Math.min.apply( Math, groupY ),
+          shortCol = 0;
+      
+      // Find index of short column, the first from the left
+      for (var i=0, len = groupY.length; i < len; i++) {
+        if ( groupY[i] === minimumY ) {
+          shortCol = i;
+          break;
+        }
+      }
+
+      // position the brick
+      var position = {
+        top: minimumY + this.offset.y
+      };
+      // position.left or position.right
+      position[ this.horizontalDirection ] = this.columnWidth * shortCol + this.offset.x;
+      this.styleQueue.push({ $el: $brick, style: position });
+
+      // apply setHeight to necessary columns
+      var setHeight = minimumY + $brick.outerHeight(true),
+          setSpan = this.cols + 1 - len;
+      for ( i=0; i < setSpan; i++ ) {
+        this.colYs[ shortCol + i ] = setHeight;
+      }
+
+    },
+    
+    
+    resize: function() {
+      var prevColCount = this.cols;
+      // get updated colCount
+      this._getColumns();
+      if ( this.isFluid || this.cols !== prevColCount ) {
+        // if column count has changed, trigger new layout
+        this._reLayout();
+      }
+    },
+    
+    
+    _reLayout : function( callback ) {
+      // reset columns
+      var i = this.cols;
+      this.colYs = [];
+      while (i--) {
+        this.colYs.push( 0 );
+      }
+      // apply layout logic to all bricks
+      this.layout( this.$bricks, callback );
+    },
+    
+    // ====================== Convenience methods ======================
+    
+    // goes through all children again and gets bricks in proper order
+    reloadItems : function() {
+      this.$bricks = this._getBricks( this.element.children() );
+    },
+    
+    
+    reload : function( callback ) {
+      this.reloadItems();
+      this._init( callback );
+    },
+    
+
+    // convienence method for working with Infinite Scroll
+    appended : function( $content, isAnimatedFromBottom, callback ) {
+      if ( isAnimatedFromBottom ) {
+        // set new stuff to the bottom
+        this._filterFindBricks( $content ).css({ top: this.element.height() });
+        var instance = this;
+        setTimeout( function(){
+          instance._appended( $content, callback );
+        }, 1 );
+      } else {
+        this._appended( $content, callback );
+      }
+    },
+    
+    _appended : function( $content, callback ) {
+      var $newBricks = this._getBricks( $content );
+      // add new bricks to brick pool
+      this.$bricks = this.$bricks.add( $newBricks );
+      this.layout( $newBricks, callback );
+    },
+    
+    // removes elements from Masonry widget
+    remove : function( $content ) {
+      this.$bricks = this.$bricks.not( $content );
+      $content.remove();
+    },
+    
+    // destroys widget, returns elements and container back (close) to original style
+    destroy : function() {
+
+      this.$bricks
+        .removeClass('masonry-brick')
+        .each(function(){
+          this.style.position = '';
+          this.style.top = '';
+          this.style.left = '';
+        });
+      
+      // re-apply saved container styles
+      var elemStyle = this.element[0].style;
+      for ( var prop in this.originalStyle ) {
+        elemStyle[ prop ] = this.originalStyle[ prop ];
+      }
+
+      this.element
+        .unbind('.masonry')
+        .removeClass('masonry')
+        .removeData('masonry');
+      
+      $(window).unbind('.masonry');
+
+    },
+
+    _getDistanceBetween : function(point1, point2){
+        var dx = point1.x - point2.x,
+            dy = point1.y - point2.y;
+        return Math.sqrt(dx*dx + dy*dy);
+    },
+
+    _getBrickPoint : function($brick){
+      var offset = $brick.offset();
+      return {
+        $brick: $brick,
+        x  : offset.left + ($brick.outerWidth()/2),
+        y : offset.top + ($brick.outerHeight()/2)
+      };
+    },
+
+    _getClosestBrick : function(brick){
+
+      var $brick = $(brick),
+          _this = this,
+          dPoint = this._getBrickPoint($brick),
+          closest = null,
+          point, dist, $b, last, midpoint;
+
+      // find the index of the closest brick
+      this.$bricks.each(function(i, b){
+
+        $b = $(b);
+        point = _this._getBrickPoint($b);
+
+        // first check the distance from the brick center
+        dist = _this._getDistanceBetween(dPoint, point);
+
+        if(closest === null || dist < closest.dist){
+          closest = {
+            dist: dist,
+            $brick: $b,
+            index: (point.x > dPoint.x) ? i : i+1
+          };
+        }
+
+        // get the distance between the center of the line
+        // connecting the current and last block
+        if(typeof last !== 'undefined'){
+          midpoint = {
+            x : (last.x + point.x) / 2,
+            y : (last.y + point.y) / 2
+          };
+          dist = _this._getDistanceBetween(dPoint, midpoint);
+          if(dist < closest.dist){
+            closest = {
+              dist: dist,
+              $brick: $b,
+              index: (point.x > dPoint.x) ? i : i+1
+            };
+          }
+        }
+
+        last = point;
+
+      });
+
+      return closest;
+    },
+
+    _createGhostBrick : function($brick){
+
+        var closest = this._getClosestBrick($brick),
+            $ghost  = $brick.clone().html('').addClass('drag-ghost'),
+            pos     = $brick.position();
+
+        $ghost.css({
+          width     : $brick.width(),
+          height    : $brick.height()
+        });
+
+        this.$bricks.splice(closest.index, 0, $ghost[0]);
+        this.element.append($ghost);
+        this._reLayout();
+
+        return closest.index;
+    },
+
+    _initDrag : function($bricks){
+
+      var _this = this,
+          dragged = null,
+          pos, closest, 
+          ghostInterval = null, 
+          ghostIndex = -1, 
+          ghostTime, ghostReset;
+
+      $bricks.bind('dragstart', function(e) {
+
+        // make sure we're dragging by the right thing
+        if(_this.options.dragHandleSelector !== null 
+          && !$(e.target).is(_this.options.dragHandleSelector)){
+          return false;
+        }
+
+        pos = $(this).position();
+
+        // add the dragClass
+        if(_this.options.dragClass !== null){
+          $(this).addClass(_this.options.dragClass);
+        }
+
+        // remove the brick being dragged from the array
+        dragged = this;
+        _this.$bricks = _this.$bricks.not(this);
+        _this._reLayout();
+
+        ghostTime = ghostReset = new Date().getTime();
+
+        ghostInterval = setInterval(function(){
+          if(ghostReset !== ghostTime){
+            if(ghostIndex !== -1){
+
+              // this kinda sucks because it doesn't use the original
+              // position of the bricks
+              if(_this._getClosestBrick($(dragged)).index === ghostIndex){
+                return;
+              }
+
+              $(_this.$bricks.splice(ghostIndex,1)).fadeOut(function(){
+                $(this).remove();
+              });
+              ghostIndex = -1;
+              _this._reLayout();
+            }
+            if(new Date().getTime() - ghostReset > 200){
+              ghostIndex = _this._createGhostBrick($(dragged));
+              ghostTime = ghostReset;
+            }
+          }
+        }, 100);
+
+      }).bind('drag', function(e, dd) {
+
+        $(this).css({
+          top  : pos.top  + dd.deltaY,
+          left : pos.left + dd.deltaX
+        });
+
+        ghostReset = new Date().getTime();
+
+      }).bind('dragend', function(e) {
+
+        // clear the ghosting interval
+        clearInterval(ghostInterval);
+      
+        // remove the dragClass
+        if(_this.options.dragClass !== null){
+          $(this).removeClass(_this.options.dragClass);
+        }
+
+        // insert the brick back into the array
+        if(ghostIndex !== -1) {
+          var $ghost = $(_this.$bricks[ghostIndex]);
+          $ghost.fadeOut(function(){
+            $ghost.remove();
+          });
+          _this.$bricks[ghostIndex] = dragged;
+          ghostIndex = -1;
+        } else {
+          closest = _this._getClosestBrick(dragged);
+          _this.$bricks.splice(closest.index , 0, dragged);
+        }
+        dragged = null;
+
+
+        _this._reLayout();
+      });
+    }
+    
+  };
+  
+  
+  // ======================= imagesLoaded Plugin ===============================
+  /*!
+   * jQuery imagesLoaded plugin v1.1.0
+   * http://github.com/desandro/imagesloaded
+   *
+   * MIT License. by Paul Irish et al.
+   */
+
+
+  // $('#my-container').imagesLoaded(myFunction)
+  // or
+  // $('img').imagesLoaded(myFunction)
+
+  // execute a callback when all images have loaded.
+  // needed because .load() doesn't work on cached images
+
+  // callback function gets image collection as argument
+  //  `this` is the container
+
+  $.fn.imagesLoaded = function( callback ) {
+    var $this = this,
+        $images = $this.find('img').add( $this.filter('img') ),
+        len = $images.length,
+        blank = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==',
+        loaded = [];
+
+    function triggerCallback() {
+      callback.call( $this, $images );
+    }
+
+    function imgLoaded( event ) {
+      var img = event.target;
+      if ( img.src !== blank && $.inArray( img, loaded ) === -1 ){
+        loaded.push( img );
+        if ( --len <= 0 ){
+          setTimeout( triggerCallback );
+          $images.unbind( '.imagesLoaded', imgLoaded );
+        }
+      }
+    }
+
+    // if no images, trigger immediately
+    if ( !len ) {
+      triggerCallback();
+    }
+
+    $images.bind( 'load.imagesLoaded error.imagesLoaded',  imgLoaded ).each( function() {
+      // cached images don't fire load sometimes, so we reset src.
+      var src = this.src;
+      // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
+      // data uri bypasses webkit log warning (thx doug jones)
+      this.src = blank;
+      this.src = src;
+    });
+
+    return $this;
+  };
+
+
+  // helper function for logging errors
+  // $.error breaks jQuery chaining
+  var logError = function( message ) {
+    if ( window.console ) {
+      window.console.error( message );
+    }
+  };
+  
+  // =======================  Plugin bridge  ===============================
+  // leverages data method to either create or return $.Mason constructor
+  // A bit from jQuery UI
+  //   https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.widget.js
+  // A bit from jcarousel 
+  //   https://github.com/jsor/jcarousel/blob/master/lib/jquery.jcarousel.js
+
+  $.fn.masonry = function( options ) {
+    if ( typeof options === 'string' ) {
+      // call method
+      var args = Array.prototype.slice.call( arguments, 1 );
+
+      this.each(function(){
+        var instance = $.data( this, 'masonry' );
+        if ( !instance ) {
+          logError( "cannot call methods on masonry prior to initialization; " +
+            "attempted to call method '" + options + "'" );
+          return;
+        }
+        if ( !$.isFunction( instance[options] ) || options.charAt(0) === "_" ) {
+          logError( "no such method '" + options + "' for masonry instance" );
+          return;
+        }
+        // apply method
+        instance[ options ].apply( instance, args );
+      });
+    } else {
+      this.each(function() {
+        var instance = $.data( this, 'masonry' );
+        if ( instance ) {
+          // apply options & init
+          instance.option( options || {} );
+          instance._init();
+        } else {
+          // initialize new instance
+          $.data( this, 'masonry', new $.Mason( options, this ) );
+        }
+      });
+    }
+    return this;
+  };
+
+})( window, jQuery );