"use strict";
/* global $ */

// TODO stop RETURN posting the web page when a dialog has been opened.
// TODO RETURN should click the 'cancel' (remove) or 'save' (add) button
// TODO escape and 'x' should click the 'cancel' button
// TODO handling failed ajax requests

var metadata = metadata || {};

metadata.init = function(args) {

    var isEditable = $("#" + args.containerId + "-remove").length > 0 && $("#" + args.containerId + "-add").length > 0;
    var container = $("#" + args.containerId);
    if (container) {
        if (args.isUrl) {
            $("#" + args.containerId + "-value").addClass("url");
        }
        if (args.value) {
            if (isEditable) {
                metadata.enableButton($("#" + args.containerId + "-remove"), "removeButton", args.ownerType, args.ownerId, args.valueType, metadata.removeMetadata);
            }
            metadata.renderValue(args.containerId, args.value);
        }
        else {
            if (isEditable) {
                metadata.enableButton($("#" + args.containerId + "-add"), "addButton", args.ownerType, args.ownerId, args.valueType, metadata.addMetadata);
            }
            $("#" + args.containerId + "-empty").removeClass("hidden");

        }
    }
    else {
        console.log("warning - can't find div", args.containerId);
    }

};

metadata.addMetadata = function(event) {

    var valueLabel = metadata.getValueLabel(event.data.containerId);
    var isUrl = $("#" + event.data.containerId + "-value").hasClass("url");
    var isTwitter = $("#" + event.data.containerId + "-value").hasClass("twitter");

    $("#dialog-add-metadata").detach();
    var fields = '';
    var fieldName = event.data.containerId + '-new';
    fields += htmlRenderer.createLabel({'for': fieldName}, valueLabel + ":");
    fields += htmlRenderer.createInput({type: 'text', name: fieldName, id: fieldName, 'class': 'text ui-widget-content', size: 64, maxlength: 256});
    var form = htmlRenderer.createForm({}, htmlRenderer.createFieldset({}, fields));

    var html = htmlRenderer.createDiv({id: 'dialog-add-metadata', title: 'Add ' + valueLabel}, form);
    $("body").prepend(html);

    metadata.disableButton($("#" + event.data.containerId + "-add"));

    $("#dialog-add-metadata").dialog({
                closeOnEscape: false,
                resizable: false,
                height: 150,
                width: 500,
                modal: true,
                buttons: {
                    "Save": function() {
                        var newValue = $("#" + fieldName).val();
                        var isValid = (isUrl && utilities.validateUrlInput(fieldName)) || (isTwitter && newValue.length > 0) || (newValue.length > 0 && !isUrl);
                        if (isValid) {
                            $(this).dialog("close");
                            if (newValue.indexOf('http://') == 0) {
                                newValue = newValue.substr(7);
                            }
                            else if (newValue.indexOf('https://') == 0) {
                                newValue = newValue.substr(8);
                            }
                            metadata.renderValue(event.data.containerId, newValue);
                            metadata.addMetadataToServer(event.data.containerId, event.data.ownerType, event.data.ownerId, event.data.valueType, newValue);
                        }
                        else {

                        }
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                        metadata.enableButton($("#" + event.data.containerId + "-add"), "addButton", event.data.ownerType, event.data.ownerId, event.data.valueType, metadata.addMetadata);
                    }
                }
            });

};

metadata.finishAddMetadata = function(containerId, ownerType, ownerId, valueType) {

    metadata.hideButton($("#" + containerId + "-add"));
    metadata.enableButton($("#" + containerId + "-remove"), "removeButton", ownerType, ownerId, valueType, metadata.removeMetadata);

};

metadata.removeMetadata = function(event) {

    var valueLabel = metadata.getValueLabel(event.data.containerId);
    var value = metadata.getCurrentValue(event.data.containerId);

    metadata.disableButton($("#" + event.data.containerId + "-remove"));
    $("#dialog-confirm-remove").detach();
    var span = htmlRenderer.createSpan({'class': 'ui-icon ui-icon-alert', style: 'float:left; margin:0 7px 20px 0;'}, '');
    var paragraph = htmlRenderer.createParagraph({}, span + valueLabel + ' \'' + value + '\' will be deleted. Are you sure?');
    var html = htmlRenderer.createDiv({id: 'dialog-confirm-remove', title: 'Remove ' + valueLabel + '?'}, paragraph);
    $("body").prepend(html);

    $("#dialog-confirm-remove").dialog({
                closeOnEscape: false,
                resizable: false,
                modal: true,
                buttons: {
                    "Delete": function() {
                        $(this).dialog("close");
                        metadata.removeMetadataFromServer(event.data.containerId, event.data.ownerType, event.data.ownerId, event.data.valueType, value);
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                        metadata.enableButton($("#" + event.data.containerId + "-remove"), "removeButton", event.data.ownerType, event.data.ownerId, event.data.valueType, metadata.removeMetadata);
                    }
                }
            });

};

metadata.finishRemoveMetadata = function(containerId, ownerType, ownerId, valueType) {

    metadata.hideButton($("#" + containerId + "-remove"));
    metadata.enableButton($("#" + containerId + "-add"), "addButton", ownerType, ownerId, valueType, metadata.addMetadata);

};

metadata.enableButton = function(button, styleClass, ownerType, ownerId, valueType, handler) {

    button.addClass(styleClass);
    button.removeClass("disabledButton");
    button.removeClass("hidden");
    button.on("click", {containerId: button.parent().attr('id'), ownerType: ownerType, ownerId: ownerId, valueType: valueType}, handler);
    if (styleClass == "addButton") {
        $("#" + button.parent().attr('id') + "-value").addClass("hidden");
        $("#" + button.parent().attr('id') + "-empty").removeClass("hidden");
        $("#" + button.parent().attr('id') + "-value").empty();
    }
    else {
        $("#" + button.parent().attr('id') + "-value").removeClass("hidden");
        $("#" + button.parent().attr('id') + "-empty").addClass("hidden");
    }

};

metadata.disableButton = function(button) {

    button.off("click");
    button.addClass("disabledButton");
    button.removeClass("addButton");
    button.removeClass("removeButton");

};

metadata.hideButton = function(button) {
    button.addClass("hidden");
};

metadata.getValueLabel = function(containerId) {

    var valueTypeDiv = $("#" + containerId + "-prompt");
    var valueType;
    if (valueTypeDiv.length > 0) {
        valueType = valueTypeDiv.text().replace(/:/g, "");
    }
    else {
        valueType = "item";
    }

    return valueType;

};

metadata.getCurrentValue = function(containerId) {

    var valueDiv = $("#" + containerId + "-value");
    var value;
    if (valueDiv.hasClass("url")) {
        value = valueDiv.children().last().text();
    }
    else {
        value = valueDiv.text();
    }

    return value;

};

metadata.renderValue = function(containerId, value) {

    var valueDiv = $("#" + containerId + "-value");
    if (valueDiv.hasClass("url")) {
        var url;
        var text;
        if (valueDiv.hasClass("twitter")) {
            url = "http://www.twitter.com/" + value;
            text = value;
        }
        else {
            url = "http://" + value;
            text = value;
        }
        valueDiv.html(function() {
            return "<a href='" + url + "' target='_blank'>" + text + "</a>";
        });
    }
    else {
        valueDiv.html(value);
    }
    valueDiv.removeClass("hidden");

};

metadata.addMetadataToServer = function(containerId, ownerType, ownerId, valueType, value) {
    var uri = "/metadata/add";
    metadata.asyncPost(uri, containerId, ownerType, ownerId, valueType, value, metadata.finishAddMetadata);
};

metadata.removeMetadataFromServer = function(containerId, ownerType, ownerId, valueType, value) {
    var uri = "/metadata/remove";
    metadata.asyncPost(uri, containerId, ownerType, ownerId, valueType, value, metadata.finishRemoveMetadata);
};

metadata.asyncPost = function(uri, containerId, ownerType, ownerId, valueType, value, callbackHandler) {

    var url = document.URL.split(":")[0] + "://" + document.URL.split("//")[1].split("/")[0] + uri;
    var data = {ownerType: ownerType, ownerId: ownerId, valueType: valueType, value: value, authKey: utilities.authKey()};

    $.ajax({
                url: url,
                context: document.body,
                data: data,
                success: callbackHandler(containerId, ownerType, ownerId, valueType)
            });

};