1 files changed, 65 insertions, 17 deletions

diff --git a/public/assets/javascripts/ui/editor/MediaViewer.js b/public/assets/javascripts/ui/editor/MediaViewer.js
index c18fb49..8cae4a4 100644
--- a/public/assets/javascripts/ui/editor/MediaViewer.js
+++ b/public/assets/javascripts/ui/editor/MediaViewer.js
@@ -4,38 +4,62 @@ var MediaViewer = ModalView.extend({
 	destroyAction: "/api/media/destroy",
 	usesFileUpload: true,
 	loaded: false,
-	
+	perPage: 12,
+	offset: 0,
+	fixedClose: true,
+
 	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.$wallpaperMedia = this.$(".wallpaperMedia")
+		this.$wallpaperMediaContainer = this.$(".wallpaperMedia > .container")
+		this.$wallpaperToggle = this.$(".wallpaperToggle")
+
 		this.$deleteMedia = this.$("#deleteMedia")
+		this.$viewMore = this.$(".viewMore")
 		this.$noMedia = this.$(".noMedia")
   },
 
+	wallpaperToggle: function(){
+    this.$wallpaperMedia.addClass("active")
+    this.$foundMedia.addClass("inactive")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
+	},
+	
 	foundToggle: function(){
-    this.$foundMedia.addClass("active");
-    this.$myMedia.addClass("inactive");
-    this.$("a").removeClass("active");
-    this.$foundToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.addClass("active")
+    this.$myMedia.addClass("inactive")
+    this.$("a").removeClass("active")
+    this.$foundToggle.addClass("active")
 	},
 	
 	userToggle: function(){
-    this.$foundMedia.removeClass("active");
-    this.$myMedia.removeClass("inactive");
-    this.$("a").removeClass("active");
-    this.$userToggle.addClass("active");
+    this.$wallpaperMedia.removeClass("active")
+    this.$foundMedia.removeClass("active")
+    this.$myMedia.removeClass("inactive")
+    this.$("a").removeClass("active")
+    this.$userToggle.addClass("active")
 	},
 
 	show: function(){
@@ -44,6 +68,7 @@ var MediaViewer = ModalView.extend({
 			this.loadTrending()
 		}
 		else {
+		  this.parent.cursor.message("media")
 			this.__super__.show.call(this)
 		}
 	},
@@ -52,10 +77,11 @@ var MediaViewer = ModalView.extend({
 		this.__super__.hide.call(this)
 		this.deleteArmed(false)
 		this.parent.mediaUpload.hide()
+		this.parent.cursor.message('start')
 	},
 
 	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 +111,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 +126,41 @@ var MediaViewer = ModalView.extend({
   },
 
 	populate: function(data){
-		this.loaded = true
+		var scrollTop = this.loaded ? $('.myMedia .container').height() : 0
 		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.__super__.show.call(this)
+		if (this.loaded) {
+			this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
+		}
+		else  {
+			this.loaded = true
+      this.parent.cursor.message("media")
+			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 +187,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,
@@ -187,7 +233,8 @@ var MediaViewer = ModalView.extend({
 		}
 
 		this.hide()
-		
+		this.parent.cursor.message('addmedia')
+
 		var $ants = $('.ants');
 		var $floatingImg = $('.floatingImg');
 		
@@ -222,6 +269,7 @@ var MediaViewer = ModalView.extend({
 			$(window).off('mousedown', _hideCursor)
       app.off('cancel-scenery', _hideCursor)
 			$floatingImg.parent().removeClass('edit')
+			app.controller.cursor.message('resize')
 		}
 		$(window).on('mousemove', _followCursor)
 		$(window).on('mousedown', _hideCursor)