1 files changed, 26 insertions, 7 deletions
diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..2e76bec 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,23 +4,29 @@ var MediaViewer = ModalView.extend({
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
 	loaded: false,
-	
+	perPage: 12,
+	offset: 0,
+
 	events: {
 	  'mousedown': "stopPropagation",
 		'click .foundToggle': "foundToggle",
 		'click .userToggle': "userToggle",
 		'click #deleteMedia': "deleteArmed",
 		'click .mediaContainer': "pick",
+		'click .viewMore': "load",
 	},
 	
 	initialize: function(opt){
 		this.__super__.initialize.call(this)
 		this.parent = opt.parent
 		this.$myMedia = this.$(".myMedia")
+		this.$myMediaContainer = this.$(".myMedia > .container")
 		this.$userToggle = this.$(".userToggle")
 		this.$foundMedia = this.$(".foundMedia")
+		this.$foundMediaContainer = this.$(".foundMedia > .container")
 		this.$foundToggle = this.$(".foundToggle")
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
@@ -55,7 +61,7 @@ var MediaViewer = ModalView.extend({
 	},
 
 	load: function(){
-		$.get("/api/media/user", this.populate.bind(this))
+		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
 	},
 	
 	loadTrending: function(){
@@ -85,7 +91,7 @@ var MediaViewer = ModalView.extend({
           width: img.naturalWidth,
           height: img.naturalHeight,
         }
-        this.add(media, this.$foundMedia)
+        this.add(media, this.$foundMediaContainer)
 		  }.bind(this)
 		  img.src = url
 		  if (img.complete && ! loaded) { img.onload() }
@@ -100,22 +106,34 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
-		this.loaded = true
 		if (data && data.length) {
+			if (data.length < this.perPage) {
+				this.$viewMore.hide()
+			}
 		  data.forEach(function(media){
-		    this.add(media, this.$myMedia)
+		    this.add(media, this.$myMediaContainer)
+		    this.offset += 1
 		  }.bind(this))
 		  this.$noMedia.hide()
       this.$deleteMedia.show()
 		}
 		else {
+			this.$viewMore.hide()
 		  this.$noMedia.show()
 		  this.$deleteMedia.hide()
 		}
+		this.loaded = true
 		this.__super__.show.call(this)
 	},
 	
-	add: function(media, $container){
+	addUploadedMedia: function(media){
+    this.parent.mediaViewer.$deleteMedia.show()
+    this.parent.mediaViewer.$noMedia.hide()
+    this.add(media, this.$myMedia, true) // prepend
+		this.offset += 1
+	},
+	
+	add: function(media, $container, prepend){
 		var image = new Image ()
 		var $span = $("<span>")
 		$span.addClass("mediaContainer")
@@ -142,7 +160,8 @@ var MediaViewer = ModalView.extend({
 		$span.data("media", media)
 		$span.append(image)
 
-		$container.prepend($span)
+		if (prepend) $container.prepend($span)
+		else $container.append($span)
 	},
 
 	deleteIsArmed: false,