var DropUp = (function() {
    
    var target = document.getElementById("target");    

    function startUpload(file, bin, li, desc, progress) {

		console.log("startUpload");

        var xhr    = new XMLHttpRequest(),
            upload = xhr.upload;
       
		startWave(progress);
	    
        upload.addEventListener("progress", function(e) {

			console.log ("'progress' event");

            if (e.lengthComputable) {
				var completeness = e.loaded / e.total,
                	heightValue = Math.round(completeness * 85);

                if (heightValue < 85) {
                    progress.style.height = heightValue + "px";
					desc.innerHTML = Math.round(completeness * 100) + "%";
                }
            }
        }, false);
                
        xhr.onload = function(event) { 
            
            if (xhr.status === 200) { 

                $(li).addClass("loaded");
				window.addEventListener('click', removeBlackout, false);
				window.addEventListener('keydown', removeBlackout, false);
                desc.innerHTML = xhr.responseText;
				stopWave(progress);

            } else { 
                $(li).find(".loading").remove();
                $(desc).addClass("error").text("There was a problem uploading your file");
            }
        };        
      
        xhr.open("POST", "/upload");

        xhr.setRequestHeader('Content-Type', 'multipart/form-data');
        xhr.setRequestHeader('X-File-Name', file.fileName);
        xhr.setRequestHeader('X-File-Size', file.fileSize);
        xhr.setRequestHeader('X-File-Type', file.type); //add additional header
        xhr.send(file);

        //xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
        //xhr.sendAsBinary(bin)
    };

    function fileLoaded(event) { 

		console.log("fileLoaded");

        var $li                 = $(generateLi("")),
            file                = event.target.file,
            getBinaryDataReader = new FileReader(); 

        var li       = $li.get(0), 
            desc     = $li.find(".desc").get(0), 
            progress = $li.find(".progress").get(0);

        $li.find("img").attr("src", event.target.result);

        $("#uploads ul").append($li);

        var f = function(evt) {
            startUpload(file, evt.target.result, li, desc, progress);
        };
        
        if (!hasStupidChromeBug()) {
            getBinaryDataReader.addEventListener("loadend", f, false);
        } else {
            getBinaryDataReader.onload = f;
        }

        getBinaryDataReader.readAsBinaryString(file);

    };
    
    function drop(e) { 

		console.log("drop");

        var i, len, files, file;

        e.stopPropagation();  
        e.preventDefault();  

        files = e.dataTransfer.files;  

        for (i = 0; i < files.length; i++) {
            
            file = files[i];

            reader = new FileReader();
            reader.index = i;
            reader.file = file;
            
            if (!hasStupidChromeBug()) {
                reader.addEventListener("loadend", fileLoaded, false);
            } else {
                reader.onload = fileLoaded;
            }

            reader.readAsDataURL(file);
        }
    };

    function hasStupidChromeBug() { 
        return typeof(FileReader.prototype.addEventListener) !== "function";
    };

    function generateLi(path) {

        var loadText  = path ? path : "Uploading ...",
            loadClass = path ? "loaded" : "",
            imgSrc    = path ? "src=\"/" + path + "\"": "",
            imgHref   = path ? "href=\"/" + path + "\"": "",
            imgHtml   = path ? "href=\"/" + path + ".html\"" : "";

        return '<li class="upload ' + loadClass + '">' + 
            '<div class="progress"></div>' + 
            '<div class="tombstone"></div>' +
			'<div class="done"></div>' +
            '<p class="desc">' + loadText + '</p>' +
			'</li>';
    };

    function doNothing(e) {  
        
		e.stopPropagation();  
        e.preventDefault();  

    };

	function dragState(event) {

		$("#uploads").stop().fadeTo(500, 1);

	};

	function noDragState(event) {
	
		if (event.clientX < 1 || event.clientY < 1) { removeBlackout(event); }
		doNothing(event);

	}

	function removeBlackout (event) {

		$("#uploads").stop().fadeTo(500, 0, function () { $(this).hide();  });
		window.removeEventListener('click', removeBlackout, false);
		window.removeEventListener('keydown', removeBlackout, false);

	}

	function stopWave (element) {

		clearInterval(element.timer);

	}

	function startWave (element) {

		// element.timer = setInterval(function () { $(element).animate({ backgroundPosition: "-19px 0px" }, 0).animate({ backgroundPosition: "19px 0px" }, 1000, "linear"); }, 1000);
		//
	}

    function init() {

        document.addEventListener("dragenter", dragState, false);  
        document.addEventListener("dragover", doNothing, false);  
        document.addEventListener("drop", drop, false);  
		document.addEventListener("dragleave", noDragState, false);
		document.addEventListener("dragend", function () { console.log("Drag end"); }, false) ; 

    };

    return {
        "init":init
    };

})();

Modernizr.filereader = (function () { return typeof window.FileReader === "function"; }());
      
if (Modernizr.localstorage && JSON && Modernizr.filereader && Modernizr.draganddrop) { DropUp.init(); }