var MediaUpload = View.extend({
	el: ".fileUpload",

	createAction: "/api/media/url",
	uploadAction: "/api/media/upload",
	
	events: {
		"keydown .url": "enterSubmit",
		"change .file": "handleFileSelect",
	},
	
	initialize: function(opt){
		this.parent = opt.parent
		this.$url = this.$(".url")
		this.$file = this.$(".file")
		this.$upload = this.$(".upload-icon")
	},

	show: function(){
		this.$el.addClass("active")
		this.$url.val("")
	},
	
	hide: function(){
		this.$el.removeClass("active")
	},
	
	enterSubmit: function(e){
		if (e.keyCode == 13) {
			e.preventDefault()
			this.parse()
		}
	},

	parse: function(){
		var url = this.$url.val()
		this.$url.val("")
		
		Parser.parse(url, $.proxy(function(media){
			if (! media) {
				alert("Not a valid image/video link")
				return
			}
			
			console.log(media)
			
			$.ajax({
				type: "post",
				url: this.createAction,
				data: rec,
				success: $.proxy(this.add, this)
			})
		}, this))
	},
	
	handleFileSelect: function(e) {
		e.stopPropagation();
		e.preventDefault();

		var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;

		for (var i = 0, f; f = files[i]; i++) {
			if ( ! f.type.match('image.*')) {
				continue;
			}

			this.$upload.addClass('uploading')

			var xhr = new XMLHttpRequest(),
			fd = new FormData();

			fd.append( 'file', f );

			xhr.addEventListener("error", $.proxy(function(){
				console.log("error uploading file..")
				this.$upload.removeClass('uploading')
			}, this), false);
			
			xhr.onreadystatechange = $.proxy(function() {
				if (xhr.readyState == 4 && xhr.status == 200) {
					this.$upload.removeClass('uploading')
				}
			}, this)
			
			xhr.open("POST", '/api/media/upload', true);
			xhr.send( fd );
		}
	},
	
	add: function(media){
	}

})