var MediaViewer = ModalView.extend({
	el: ".mediaDrawer.mediaViewer",
	destroyAction: "/api/media/destroy",
	
	events: {
		'click .foundToggle': "foundToggle",
		'click .yourMedia': "userToggle",
		'click #deleteMedia': "deleteArmed",
		'click .mediaContainer': "pick",
	},
	
	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.$(".yourMedia").addClass("active");
	},

	show: function(){
		if (! this.loaded) {
			this.load()
		}
		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", $.proxy(this.populate, this))
	},

	populate: function(data){
		this.loaded = true
		data && data.forEach($.proxy(this.add, this))
		this.__super__.show.call(this)
	},
	
	add: function(media){
		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
					console.log(image.duration, image.currentTime)
				})
				image.src = media.url
				image.load()
				break
		}
		
		$span.data("media", media)
		$span.append(image)

		this.$(".myMedia").prepend($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()
			return
		}

// 		else {
// 			this.picked = {}
// 			this.picked.media = media
// 			this.picked.image = image
// 		}
// 	},
// 	
// 	drag: function(e){
// 		if (! this.pickedMedia) return
// 		var media = this.picked.media
// 		var image = this.picked.image
// 		this.picked = null

		this.hide()
		
		var $ants = $('.ants');
		var $floatingImg = $('.floatingImg');
		
		Scenery.nextMedia = media
		
		switch (media.type) {
			case "video":
				$floatingImg.attr('src', 'http://www.rawrcast.com/wp-content/uploads/2010/02/BluePlayButton.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'
			});
		}
		$(window).on('mousemove', _followCursor);
		$(window).one('click', function () {
			var $floatingImg = $('.floatingImg')
			$floatingImg.attr('src', '');
			$(window).off('mousemove', _followCursor);
			$floatingImg.parent().removeClass('edit');
		});
		$ants.addClass('edit');
		_followCursor(e);
	},

})