"use strict";

/**
 * contented_SupportsDrop returns whether drag-and-drop is supported by this
 * browser.
 *
 * @return bool
 */
function contented_SupportsDrop() {
	return ('ondrop' in window && 'FormData' in window && 'FileReader' in window);
}

/**
 * contented_EnableDrop enables drag-and-drop upload on a DOM element.
 * The class "is-dragover" will be toggled on the target element.
 *
 * @param DOMElement element       Drop target
 * @param string     baseURL       Base URL of the contented server
 * @param Function   onUploaded    Called with a property object for every uploaded file
 */
function contented_EnableDrop(element, baseURL, onUploaded) {
    
    // <input type="hidden" name="MAX_FILE_SIZE" value="` + ret.MaxUploadBytes + `" /> 

    // Create a new div for ourselves on top of the existing area
    $.get(baseURL + "/about", function(ret) {
        $("title").text( ret.AppTitle );

        var extraText = "";
        if (ret.MaxUploadBytes > 0) {
            extraText = " (max " + Math.floor(ret.MaxUploadBytes / (1024*1024)) + " MiB)";
        }

        $.get(baseURL + "/widget.html", function(widgetHtml) {

            var $f = $("<div>").html(widgetHtml);
            $f.find(".contented-extratext").text(extraText);

            $f.find(".contented-upload-type").click(function() {
                $f.find(".contented-upload-type").removeClass("contented-upload-type-active");
                $(this).addClass("contented-upload-type-active");

                $f.find(".contented-upload-if").removeClass("contented-active");
                $f.find(".contented-if-" + $(this).attr('data-upload-type')).addClass("contented-active");
            });

            var $element = $(element);
            var offset = $element.offset();
    
            $f.css({
                'position': 'absolute',
                'left':     offset.left + "px",
                'top':      offset.top + "px",
                'width':    $element.width() + "px",
                'min-width':    $element.width() + "px",
                'max-width':    $element.width() + "px",
                'height':   $element.height() + "px",
                'min-height':   $element.height() + "px",
                'max-height':   $element.height() + "px"
            });
    
            $("body").append($f);

        });


    });

    
}

var onLoad = function() {
	var form  = document.getElementById("form");
	var input = document.getElementById("form-upload");
	var label = document.getElementById("form-label");
	
	var makeCaptionText = function( files ) {
        return files.length > 1 ? ( input.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', files.length ) : files[ 0 ].name;
	};
	
	var refreshCaption = function() {		
		onStateChange( makeCaptionText( input.files ) );
	};	
	input.addEventListener('change', refreshCaption);
	
	//
	document.getElementById("classic-uploader").addEventListener("click", function() {
		form.classList.remove("supports-drag");
	});
	
	if (contented_SupportsDrop()) {
		
		// Handle CSS
		
		form.classList.add('supports-drag');
	
		var handleDragState = function(event_name, classEnabled) {
			form.addEventListener(event_name, function(e) {
				e.preventDefault();
				e.stopPropagation();
				if (classEnabled) {
					form.classList.add( 'is-dragover' );
				} else {
					form.classList.remove( 'is-dragover' );
				}
			});
		}
		
		handleDragState('dragover',  true);
		handleDragState('dragenter', true);
		handleDragState('dragleave', false);
		handleDragState('dragend',   false);
		handleDragState('drop',      false);
		
		// Handle uploads
		
		form.addEventListener('drop', function(e) {
			input.files = e.dataTransfer.files; // the files that were dropped
			refreshCaption();
			form.submit();
		});
	}
		
};