/**
 * ImageText-Editor
 *     Stellt die Funktionalität für die Bearbeitung des zusammengesetzten Editors Bild + Text zur Verfügung
 *
 * Created by CS medien- & kommunikationssysteme.
 * @author Christian Steinle
 * @date 13.10.2016
 *
 * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
 */

var ImageText = {
    textEditor: null,
    editorImage: null,

    textInput: null,
    nameInput: null,
    extensionInput: null,
    origNameInput: null,
    titleInput: null,
    formatInput: null,
    topInput: null,
    leftInput: null,
    heightInput: null,
    widthInput: null,
    uploadFileInput: null,

    placeHolderElement: null,
    imageElement: null,
    previewElement: null,
    coverElement: null,
    coverTopElement: null,
    coverRightElement: null,
    coverBottomElement: null,
    coverLeftElement: null,

    previewWidth: 0,
    previewHeight: 0,
    imageWidth: 0,
    imageHeight: 0,
    imageFormat: 0,
    coverTop: 0,
    coverLeft: 0,
    coverWidth: 0,
    coverHeight: 0,
    minWidth: 0,
    minHeight: 0,

    uploadFileName: '',
    uploadFileExtension: '',

    init: function () {
        ImageText.initElements();
    },

    initElements: function () {
        ImageText.textInput = $('#text');
        ImageText.nameInput = $('#imageName');
        ImageText.extensionInput = $('#imageExtension');
        ImageText.origNameInput = $('#imageOrigName');
        ImageText.titleInput = $('#imageTitle');
        ImageText.formatInput = $('#imageFormat');
        ImageText.topInput = $('#imageTop');
        ImageText.leftInput = $('#imageLeft');
        ImageText.heightInput = $('#imageHeight');
        ImageText.widthInput = $('#imageWidth');
        ImageText.uploadFileInput = $('#changeUploadFile');

        ImageText.placeHolderElement = $('#csEditorImagePlaceholder');
        ImageText.imageElement = $('#csEditorImage');
        ImageText.previewElement = $('#csEditorImagePreview');
        ImageText.coverElement = $('#csEditorImageCover');
        ImageText.coverTopElement = $('#csEditorCoverTop');
        ImageText.coverRightElement = $('#csEditorCoverRight');
        ImageText.coverBottomElement = $('#csEditorCoverBottom');
        ImageText.coverLeftElement = $('#csEditorCoverLeft');
    },

    fillEditorContent: function () {
        if (CS.editorData === null || CS.editorHtml === '') {
            window.setTimeout('ImageText.fillEditorContent()', 50);
            return true;
        }
        ImageText.init();

        $('#navID').val(csEditorParams.navID);
        CS.editorData.text = '<p>' + CS.editorData.text + '</p>';
        $.each(CS.editorData, function (key, value) {
            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
        });

        ImageText.imageFormat = CS.editorData.imageWidth / CS.editorData.imageHeight;
        ImageText.setFormatInput();

        ImageText.formatInput.on('click', function () {
            $(this).data('current', $(this).val());
        });

        ImageText.formatInput.on('change', function () {
            var selectedFormat = $(this).val();
            ImageText.setImageFormat(selectedFormat);
        });

        ImageText.textEditor = ImageText.textInput.ckeditor({
            enterMode: CKEDITOR.ENTER_BR,
            extraPlugins: 'divarea',
            height: '240px',
            removeButtons: 'Redo,Font,FontSize',
            removePlugins: 'elementspath',
            toolbarGroups: [
                {name: 'clipboard', groups: ['clipboard', 'undo']},
                {name: 'editing', groups: ['find', 'selection', 'spellchecker']},
                {name: 'basicstyles', groups: ['basicstyles', 'cleanup']},
                {name: 'paragraph', groups: ['list']},
                {name: 'links'}
            ]
        }).editor;

        ImageText.uploadFileInput.on('change', function (event) {
            var file = event.currentTarget.files[0];
            if ($.inArray(file.type, csEditorParams.imageTypes) === -1) {
                alert('Wrong file type');
                return false;
            }
            ImageText.imageFormat = 3 / 2;
            ImageText.setFormatInput();

            ImageText.uploadFileExtension = csEditorParams.fileExtensions[file.type];
            var nameParts = file.name.split('.');
            if (nameParts.length > 1) {
                nameParts.pop();
            }
            ImageText.uploadFileName = nameParts.join('.');

            var reader = new FileReader();
            reader.onloadend = function () {
                ImageText.editorImage.src = reader.result;
            };
            reader.readAsDataURL(file);
        });

        ImageText.imageElement.attr('src', csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '.' + CS.editorData.imageExtension);

        ImageText.editorImage = new Image();
        ImageText.editorImage.onload = function () {
            ImageText.imageWidth = ImageText.editorImage.naturalWidth;
            ImageText.imageHeight = ImageText.editorImage.naturalHeight;
            ImageText.previewWidth = csEditorParams.imageDimension.image.width;
            ImageText.previewHeight = ImageText.previewWidth * ImageText.imageHeight / ImageText.imageWidth;
            ImageText.coverLeft = parseFloat(CS.editorData.imageLeft);
            ImageText.coverTop = parseFloat(CS.editorData.imageTop);
            ImageText.coverWidth = parseFloat(CS.editorData.imageWidth);
            ImageText.coverHeight = parseFloat(CS.editorData.imageHeight);
            ImageText.minWidth = ImageText.previewWidth * ImageText.previewWidth / csEditorParams.imageDimension.orig.width;
            ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;

            if (ImageText.previewWidth > ImageText.imageWidth || ImageText.previewWidth / ImageText.imageFormat > ImageText.imageHeight) {
                alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / ImageText.imageFormat));
                ImageText.uploadFileExtension = '';
                ImageText.uploadFileName = '';
                return false;
            }

            if (ImageText.uploadFileName !== '') {
                ImageText.nameInput.val(ImageText.uploadFileName);
                ImageText.extensionInput.val(ImageText.uploadFileExtension);
                ImageText.origNameInput.val(ImageText.uploadFileName);
                ImageText.titleInput.val(ImageText.uploadFileName);
            }

            ImageText.previewElement.attr('src', ImageText.editorImage.src);
            ImageText.setCover();
            ImageText.setResizable();
            ImageText.setDraggable();
        };
        ImageText.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + CS.editorData.imageName + '_orig.' + CS.editorData.imageExtension;

    },

    close: function () {

    },

    setCover: function () {
        if (ImageText.coverHeight > ImageText.previewHeight) {
            ImageText.coverHeight = ImageText.previewHeight;
            ImageText.coverWidth = ImageText.coverHeight * ImageText.imageFormat;
        }

        ImageText.placeHolderElement.css({width: ImageText.previewWidth, height: ImageText.previewHeight});
        ImageText.coverElement.css({
            left: ImageText.coverLeft + 'px',
            top: ImageText.coverTop + 'px',
            width: ImageText.coverWidth,
            height: ImageText.coverHeight
        });
        ImageText.coverTopElement.css({
            left: 0,
            top: 0,
            width: ImageText.previewWidth,
            height: ImageText.coverTop
        });
        ImageText.coverRightElement.css({
            right: 0,
            top: ImageText.coverTop + 'px',
            width: ImageText.previewWidth - ImageText.coverLeft - ImageText.coverWidth,
            height: ImageText.coverHeight
        });
        ImageText.coverBottomElement.css({
            left: 0,
            bottom: 0,
            width: ImageText.previewWidth,
            height: ImageText.previewHeight - ImageText.coverTop - ImageText.coverHeight
        });
        ImageText.coverLeftElement.css({
            left: 0,
            top: ImageText.coverTop + 'px',
            width: ImageText.coverLeft,
            height: ImageText.coverHeight
        });

        ImageText.topInput.val(ImageText.coverTop);
        ImageText.leftInput.val(ImageText.coverLeft);
        ImageText.heightInput.val(ImageText.coverHeight);
        ImageText.widthInput.val(ImageText.coverWidth);
    },

    setFormatInput: function () {
        if (ImageText.imageFormat < 1) {
            ImageText.formatInput.val('portrait');
        }
        else if (ImageText.imageFormat === 1) {
            ImageText.formatInput.val('square');
        }
        else if (ImageText.imageFormat > 1) {
            ImageText.formatInput.val('landscape');
        }
    },

    setResizable: function () {
        ImageText.coverElement.resizable({
            aspectRatio: false,
            containment: ImageText.placeHolderElement,
            handles: 'se',
            minWidth: ImageText.minWidth,
            create: function () {
                if (ImageText.coverWidth < ImageText.minWidth) {
                    ImageText.coverWidth = ImageText.minWidth;
                    ImageText.coverHeight = ImageText.previewHeight * ImageText.previewHeight / ImageText.previewWidth;
                    ImageText.coverLeft = Math.min(ImageText.coverLeft, (ImageText.previewWidth - ImageText.coverWidth));
                    ImageText.coverTop = Math.min(ImageText.coverTop, (ImageText.previewHeight - ImageText.coverHeight));
                }
                ImageText.setCover();
            },
            resize: function (event, ui) {
                ui.size.height = ui.size.width * ImageText.coverHeight / ImageText.coverWidth;
                if (ui.position.top + ui.size.height > ImageText.previewHeight) {
                    ui.size.height = ImageText.previewHeight - ui.position.top;
                    ui.size.width = ui.size.height * ImageText.imageFormat;
                }
                ImageText.coverWidth = ui.size.width;
                ImageText.coverHeight = ui.size.height;
                ImageText.setCover();
            }
        })
    },

    setDraggable: function () {
        ImageText.coverElement.draggable({
            containment: ImageText.placeHolderElement,
            cursor: 'crosshair',
            drag: function (event, ui) {
                ImageText.coverLeft = ui.position.left;
                ImageText.coverTop = ui.position.top;
                ImageText.setCover();
            }
        })
    },

    setImageFormat: function (selectedFormat) {
        var tempFormat;
        switch (selectedFormat) {
            case 'portrait':
                tempFormat = 2 / 3;
                break;
            case 'square':
                tempFormat = 1;
                break;
            case 'landscape':
                tempFormat = 3 / 2;
                break;
        }

        if (ImageText.imageHeight < ImageText.minWidth / tempFormat) {
            alert(csEditorLang.error.wrongImageDimension.replace('%width%', ImageText.previewWidth).replace('%height%', ImageText.previewWidth / tempFormat));
            ImageText.formatInput.val(ImageText.formatInput.data('current'));
            return false;
        }

        ImageText.imageFormat = tempFormat;
        ImageText.minHeight = ImageText.minWidth / ImageText.imageFormat;
        ImageText.coverHeight = ImageText.coverWidth / ImageText.imageFormat;
        ImageText.setCover();
    }

};