Commit 9b41a30e

@@ -0,0 +1,10 @@
+class window.Masonry
+  constructor: (container) ->
+    @container = container
+
+  load: ->
+    $(@container).imagesLoaded =>
+      console.log("load masonry.")
+      $(@container).masonry
+        itemSelector : '.span4'
+        isResizable: true

@@ -1,14 +1,8 @@
 <% provide(:description, "CakeSide is a free site to share your cake creations and ideas with other cake fanatics like yourself") -%>
 <% content_for :javascript do -%>
 <script type="text/javascript">
-  var loadMasonry = function() {
-    var container = $('#creations-div');
-    container.imagesLoaded(function(){
-      container.masonry({ itemSelector : '.span4', isResizable: true });
-    });
-  };
-  $(function(){ loadMasonry(); });
-  document.addEventListener("page:load", function() { loadMasonry(); });
+  $(function(){ new Masonry('#creations-div').load(); });
+  document.addEventListener("page:load", function() { new Masonry('#creations-div').load(); });
 </script>
 <% end -%>
 <% unless user_signed_in?  -%>

@@ -1,15 +1,8 @@
 <% provide(:description, "The latest tutorials") -%>
 <% content_for :javascript do -%>
 <script type="text/javascript">  
-  $(function(){
-    var container = $('#tutorials-div');
-    container.imagesLoaded(function(){
-      container.masonry({
-        itemSelector : '.span4',
-        isResizable: true
-      }); 
-    });
-  });
+  $(function(){ new Masonry('#tutorials-div').load(); });
+  document.addEventListener("page:load", function() { new Masonry('#tutorials-div').load(); });
 </script>
 <% end -%>
 <div id="tutorials-div" class="row">