var MediaViewer = ModalView.extend({
	el: ".mediaDrawer.mediaViewer",
	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.$deleteMedia = this.$("#deleteMedia")
		this.$viewMore = this.$(".viewMore")
		this.$noMedia = this.$(".noMedia")
  },

	foundToggle: function(){
    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");
	},

	show: function(){
		if (! this.loaded) {
			this.load()
			this.loadTrending()
		}
		else {
			this.__super__.show.call(this)
		}
	},
	
	hide: function(){
		this.__super__.hide.call(this)
		this.deleteArmed(false)
		this.parent.mediaUpload.hide()
	},

	load: function(){
		$.get("/api/media/user", { offset: this.offset, limit: this.perPage }, this.populate.bind(this))
	},
	
	loadTrending: function(){
    var trending_imagery = [
      'https://d1ycxz9plii3tb.cloudfront.net/post_images/52ec0e20c9dc24f1d8000067/large.jpg',
      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4e6bf67bc23f490001004579/1/tall.jpg',
      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52dcca28139b2135030002a8/tall.jpg',
      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/52927bb2b202a3669d000704/larger.jpg',
      'https://d1ycxz9plii3tb.cloudfront.net/additional_images/4f9f3a3ce262e60001000fb3/large.jpg',
      'http://2.bp.blogspot.com/-GD6IxUvsdOo/UdrcMFLVYNI/AAAAAAAAF2E/kbRfxMxiUlQ/s1600/okeeffe.jpg',
      'http://www.bobkessel.com/wordpress/wp-content/uploads/2009/10/moma-bob-kessel-410.jpg',
      'http://static1.artsy.net/partner_show_images/52f28f348b3b81f2fc000364/large.jpg',
      'http://static3.artsy.net/partner_show_images/52e83674c9dc24397f0000d8/large.jpg',
      'http://static0.artsy.net/partner_show_images/52d96d484b84801ef0000273/large.jpg',
      'http://static1.artsy.net/partner_show_images/52778616275b24f95c00011d/1/large.jpg',
      'http://static1.artsy.net/partner_show_images/52dc65311a1e86be6b000205/large.jpg',
    ]
		trending_imagery.forEach(function(url){
		  var loaded = false
		  var img = new Image ()
		  img.onload = function(){
		    if (loaded) return
		    loaded = true
        var media = {
          type: 'image',
          url: url,
          width: img.naturalWidth,
          height: img.naturalHeight,
        }
        this.add(media, this.$foundMediaContainer)
		  }.bind(this)
		  img.src = url
		  if (img.complete && ! loaded) { img.onload() }
		}.bind(this))
	},
	
	randomize: function(){
    var media_data = $(".mediaContainer").toArray().map(function(el){
      return $(el).data("media")
    })
    Scenery.randomize( media_data )
  },

	populate: function(data){
		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.$myMediaContainer)
		    this.offset += 1
		  }.bind(this))
		  this.$noMedia.hide()
      this.$deleteMedia.show()
		}
		else {
			this.$viewMore.hide()
		  this.$noMedia.show()
		  this.$deleteMedia.hide()
		}
		if (this.loaded) {
			this.$el.delay(300).animate({ scrollTop: scrollTop }, 200)
		}
		else  {
			this.loaded = true
			this.__super__.show.call(this)
		}
	},
	
	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")
		switch (media.type) {
			case 'image':
				image.src = media.url
				break

			case 'youtube':
			case 'vimeo':
				image.src = media.thumbnail
				break
			
			case 'video':
				image = document.createElement('video')
				image.addEventListener("loadedmetadata", function(){
					image.currentTime = image.duration * 1/3
				})
				image.src = media.url
				image.load()
				break
		}
		
		$span.data("media", media)
		$span.append(image)

		if (prepend) $container.prepend($span)
		else $container.append($span)
	},

	deleteIsArmed: false,
	deleteArmed: function(e, state){
		if (typeof e == "boolean") {
			state = e
		}
		else if (typeof state != "boolean") {
			state = ! this.deleteIsArmed
		}
		this.deleteIsArmed = state
		$("body").toggleClass("deleteArmed", state)
	},

	destroy: function(_id, cb){
		$.ajax({
			type: "delete",
			url: this.destroyAction,
			data: { _id: _id, _csrf: $("[name=_csrf]").val() }
		}).complete(cb || function(){})
	},
	
	picked: null,
	pick: function(e) {
		e.stopPropagation()

		var target = e.currentTarget
		var $target = $(target)
		var media = $target.data('media')
		var image = $target.find('img')

		if (this.deleteIsArmed) {
			this.destroy(media._id)
			$target.remove()

			if ($(".myMedia .mediaContainer").length == 0) {
        this.$deleteMedia.hide()
        this.$noMedia.show()
        this.deleteArmed(false)
			}
			return
		}

		this.hide()
		
		var $ants = $('.ants');
		var $floatingImg = $('.floatingImg');
		
		Scenery.nextMedia = media

		switch (media.type) {
			case "video":
				$floatingImg.attr('src', '/assets/img/playbutton.png')
				break
			
			default:
				$floatingImg.attr('src', image.attr('src'))
				break
		}

		var height = $floatingImg.height()
		var width = $floatingImg.width()

		function _followCursor(e) {
			$floatingImg.parent().css({
				top: (e.pageY - (height / 2)) + 'px',
				left: (e.pageX - (width / 2)) + 'px',
			});
		}
		function _hideCursor (e) {
			if (Scenery.nextMedia) {
				return
			}
			var $floatingImg = $('.floatingImg')
			$floatingImg.attr('src', '')
			$(window).off('mousemove', _followCursor)
			$(window).off('mousedown', _hideCursor)
      app.off('cancel-scenery', _hideCursor)
			$floatingImg.parent().removeClass('edit')
		}
		$(window).on('mousemove', _followCursor)
		$(window).on('mousedown', _hideCursor)
		app.on('cancel-scenery', _hideCursor)
		$ants.addClass('edit')
		_followCursor(e)
	},
})