var imageManagerInput = {
    baseUrl: null, //language
    message: null, //init imageManagerInput
    init: function() {
        //create modal
        imageManagerInput.initModal();
    }, //creat image Manager modal
    initModal: function() {
        //check if modal not jet exists
        if ($("#modal-imagemanager").length === 0) {
            //set html modal in var
            var sModalHtml = '<div tabindex="-1" role="dialog" class="fade modal" id="modal-imagemanager">';
            sModalHtml += '<div class="modal-dialog modal-lg">';
            sModalHtml += '<div class="modal-content">';
            sModalHtml += '<div class="modal-header">';
            sModalHtml += '<button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>';
            sModalHtml += '<h4>Image manager</h4>';
            sModalHtml += '</div>';
            sModalHtml += '<div class="modal-body">';
            sModalHtml += '<iframe src="#"></iframe>';
            sModalHtml += '</div>';
            sModalHtml += '</div>';
            sModalHtml += '</div>';
            sModalHtml += '</div>';
            //prepend data to body
            $('body')
                .prepend(sModalHtml);
        }
    }, //open media manager modal
    openModal: function(inputId, aspectRatio, cropViewMode) {
        //get selected item
        var iImageId = $("#" + inputId)
            .val();
        var srcImageIdQueryString = "";
        if (iImageId !== "") {
            srcImageIdQueryString = "&image-id=" + iImageId;
        }
        //create iframe url
        var queryStringStartCharacter = ((imageManagerInput.baseUrl).indexOf('?') == -1) ? '?' : '&';
        var imageManagerUrl = imageManagerInput.baseUrl + queryStringStartCharacter + "view-mode=iframe&input-id=" + inputId + "&aspect-ratio=" + aspectRatio + "&crop-view-mode=" + cropViewMode + srcImageIdQueryString;
        //set iframe path
        $("#modal-imagemanager iframe")
            .attr("src", imageManagerUrl);
        //set translation title for modal header
        $("#modal-imagemanager .modal-dialog .modal-header h4")
            .text(imageManagerInput.message.imageManager);
        //open modal
        $("#modal-imagemanager")
            .modal("show");
    }, //close media manager modal
    closeModal: function() {
        $("#modal-imagemanager")
            .modal("hide");
    }, //delete picked image
    deletePickedImage: function(inputId) {
        //remove value of the input field
        var sFieldId = inputId;
        var sFieldNameId = sFieldId + "_name";
        var sImagePreviewId = sFieldId + "_image";
        var bShowConfirm = JSON.parse(
            $(".delete-selected-image[data-input-id='" + inputId + "']")
                .data("show-delete-confirm")
        );
        //show warning if bShowConfirm == true
        if (bShowConfirm) {
            if (confirm(imageManagerInput.message.detachWarningMessage) == false) {
                return false;
            }
        }
        //set input data
        $('#' + sFieldId)
            .val("");
        $('#' + sFieldNameId)
            .val("");
        //trigger change
        $('#' + sFieldId)
            .trigger("change");
        //hide image
        $('#' + sImagePreviewId)
            .attr("src", "")
            .parent()
            .addClass("hide");
        //delete hide class
        $(".delete-selected-image[data-input-id='" + inputId + "']")
            .addClass("hide");
    }
};

$(document)
    .ready(
        function() {
            //init Image manage
            imageManagerInput.init();

            //open media manager modal
            $(document)
                .on(
                    "click", ".open-modal-imagemanager", function() {
                        var aspectRatio = $(this)
                            .data("aspect-ratio");
                        var cropViewMode = $(this)
                            .data("crop-view-mode");
                        var inputId = $(this)
                            .data("input-id");
                        //open selector id
                        imageManagerInput.openModal(inputId, aspectRatio, cropViewMode);
                    }
                );

            //delete picked image
            $(document)
                .on(
                    "click", ".delete-selected-image", function() {
                        var inputId = $(this)
                            .data("input-id");
                        //open selector id
                        imageManagerInput.deletePickedImage(inputId);
                    }
                );
        }
    );