function template(text, data) {
    var render;
    var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
    var settings = {
        evaluate    : /<%([\s\S]+?)%>/g,
        interpolate : /<%=([\s\S]+?)%>/g
    };

    // Combine delimiters into one regular expression via alternation.
    var matcher = new RegExp([
            (settings.interpolate || noMatch).source,
            (settings.evaluate || noMatch).source
            ].join('|') + '|$', 'g');

    // Compile the template source, escaping string literals appropriately.
    var index = 0;
    var source = "__p+='";
    text.replace(matcher, function(match, interpolate, evaluate, offset) {
        source += text.slice(index, offset)
        .replace(escaper, function(match) { return '\\' + escapes[match]; });

    if (interpolate) {
        source += "'+\n((__t=(" + interpolate + "))==null?'':__t)+\n'";
    }
    if (evaluate) {
        source += "';\n" + evaluate + "\n__p+='";
    }
    index = offset + match.length;
    return match;
    });
    source += "';\n";

    source = "var __t,__p='',__j=Array.prototype.join," +
        "print=function(){__p+=__j.call(arguments,'');};\n" +
        source + "return __p;\n";

    try {
        render = new Function('obj', source);
    } catch (e) {
        e.source = source;
        throw e;
    }

    if (data) return render(data);
    var template = function(data) {
        return render.call(this, data);
    };

    // Provide the compiled function source as a convenience for precompilation.
    template.source = 'function(obj){\n' + source + '}';

    return template;
}

var tests = {
    filereader: typeof FileReader != 'undefined',
    dnd: 'draggable' in document.createElement('span'),
    formdata: !!window.FormData,
    progress: "upload" in new XMLHttpRequest
};

var UploadTemplate = template(
'<div>' +
    '<label class="dnd-overwrite">Overwrite files ' +
        '<input type="checkbox" name="overwrite" id="overwrite-check" checked />' +
    '</label>' +
    '<div id="dnd-upload"></div>' +
'</div>'
);

var oldOnReady = document.onreadystatechange;
document.onreadystatechange = function() {
    if (document.readyState !== "complete") {
        return;
    }

    if (typeof oldOnReady === "function") {
        oldOnReady();
    }

    if (document.title.indexOf("Attachments for ") == -1) {
        return;
    }

    for (key in tests) {
        if (tests[key] !== true) {
            return;
        }
    }

    document.getElementsByTagName("h2")[0].insertAdjacentHTML('afterend', UploadTemplate());
    var holder = document.getElementById('dnd-upload');

    holder.ondragover = function () {
        this.className = 'hover';
        return false;
    };

    holder.ondragend = function () {
        this.className = '';
        return false;
    };

    holder.ondrop = function (e) {
        this.className = '';
        e.preventDefault();
        readfiles(e.dataTransfer.files);
    }
};

function createElement(tag, attributes, innerHTML) {
    var element = document.createElement(tag);

    for (key in attributes) {
        element.setAttribute(key, attributes[key]);
    }

    if (typeof innerHTML !== "undefined") {
        element.innerHTML = innerHTML;
    }

    return element;
};

function postFile(file) {
    var size = file.size;
    var units = ['G', 'M', 'K', 'B'];
    var xhr = new XMLHttpRequest();
    var formData = new FormData();

    formData.append('ticket', document.getElementsByName("ticket")[0].value);
    formData.append('action', 'AttachFile');
    formData.append('do', 'upload');
    formData.append('file', file);

    if (document.getElementById("overwrite-check").checked) {
        formData.append('overwrite', '1');
    }

    while (size >= 1024) {
        size = size / 1024 | 0;
        units.pop();
    }

    var progress = createElement('progress', { min: 0, max: 100, value: 0 });
    var progContainer = createElement('div', { "class": "progressbar" });
    var sizeSpan = createElement("span", { "class": "size" }, size + units[units.length - 1]);
    var item = createElement('li');

    progContainer.appendChild(progress);
    progContainer.appendChild(sizeSpan);

    item.appendChild(createElement('span', { "class": "filename" }, file.name));
    item.appendChild(progContainer);

    document.getElementById("dnd-upload").appendChild(item);

    xhr.open('POST', window.location.pathname);
    xhr.onload = function() { progress.value = 100; };

    xhr.upload.onprogress = function (event) {
        if (!event.lengthComputable) { return; }
        progress.value = (event.loaded / event.total * 100 | 0);
    }

    xhr.send(formData);
}

function readfiles(files) {
    for (var i = 0; i < files.length; i++) {
        postFile(files[i]);
    }
}