/**
 * KeyVisual-Editor
 *     Stellt die Funktionalität für die Bearbeitung des KeyVisual-Bereichs zur Verfügung
 *
 * Created by CS medien- & kommunikationssysteme.
 * @author Christian Steinle
 * @date 13.12.2016
 *
 * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
 */

var KeyVisual = {
    type: '',
    editorImages: null,
    editorImage: null,
    imageTypes: null,
    imageParams: null,
    origParams: null,
    thumbParams: null,
    fileExtension: null,
    uploadFileName: '',
    mediaPath: '',
    chosenImageID: 0,

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

    thumbElement: null,
    typeChooser: 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,
    placeHolderWidth: 0,
    editorScale: 1,

    init: function () {
        KeyVisual.initElements();
        KeyVisual.initVariables();
        KeyVisual.initFunctions();
    },

    initElements: function () {
        KeyVisual.thumbElement = $('#csEditorThumb');
        KeyVisual.typeChooser = $('#Type');
        KeyVisual.nameInput = $('#imageName');
        KeyVisual.extensionInput = $('#imageExtension');
        KeyVisual.origNameInput = $('#imageOrigName');
        KeyVisual.titleInput = $('#imageTitle');
        KeyVisual.placeHolderElement = $('#csEditorImagePlaceholder');
        KeyVisual.imageElement = $('#csEditorImage');
        KeyVisual.previewElement = $('#csEditorImagePreview');
        KeyVisual.coverElement = $('#csEditorImageCover');
        KeyVisual.coverTopElement = $('#csEditorCoverTop');
        KeyVisual.coverRightElement = $('#csEditorCoverRight');
        KeyVisual.coverBottomElement = $('#csEditorCoverBottom');
        KeyVisual.coverLeftElement = $('#csEditorCoverLeft');

        KeyVisual.topInput = $('#imageTop');
        KeyVisual.leftInput = $('#imageLeft');
        KeyVisual.heightInput = $('#imageHeight');
        KeyVisual.widthInput = $('#imageWidth');
        KeyVisual.uploadFileInput = $('#changeUploadFile');
        KeyVisual.requestInput = $('#request');
    },

    initVariables: function () {
        KeyVisual.type = CS.editorData.Type;
        KeyVisual.editorImages = CS.editorData.images;
        KeyVisual.imageParams = csEditorParams.imageDimension.keyVisual;
        KeyVisual.origParams = csEditorParams.imageDimension.orig;
        KeyVisual.thumbParams = csEditorParams.imageDimension.thumb;
        KeyVisual.fileExtension = csEditorParams.fileExtensions;
        KeyVisual.mediaPath = csEditorParams.mediaPrefix + csEditorParams.navID + '/';
        KeyVisual.chosenImageID = CS.editorData.IDs[0];
        KeyVisual.imageFormat = KeyVisual.imageParams.width / KeyVisual.imageParams.height;
        KeyVisual.editorImages[0] = {};
        $.each(KeyVisual.editorImages[KeyVisual.chosenImageID], function(key, value) {
            KeyVisual.editorImages[0][key] = '0';
        });
        $('#navID').val(csEditorParams.navID);
    },

    initFunctions: function () {
        KeyVisual.typeChooser.on('change', function () {
            KeyVisual.type = $(this).val();
            KeyVisual.showElementsForType();
        })
    },

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

        KeyVisual.init();
        KeyVisual.fillThumbs();

        $.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);
        });

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

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

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

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

        KeyVisual.editorImage = new Image();
        KeyVisual.editorImage.onload = function () {
            KeyVisual.placeHolderWidth = KeyVisual.placeHolderElement.innerWidth();
            KeyVisual.editorScale = csEditorParams.imageDimension.keyVisual.width / KeyVisual.placeHolderWidth;

            KeyVisual.imageWidth = KeyVisual.editorImage.naturalWidth;
            KeyVisual.imageHeight = KeyVisual.editorImage.naturalHeight;
            KeyVisual.previewWidth = KeyVisual.placeHolderWidth;
            KeyVisual.previewHeight = KeyVisual.placeHolderWidth * KeyVisual.imageHeight / KeyVisual.imageWidth;

            KeyVisual.coverLeft = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageLeft) / KeyVisual.editorScale;
            KeyVisual.coverTop = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageTop) / KeyVisual.editorScale;
            KeyVisual.coverWidth = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageWidth) / KeyVisual.editorScale;
            KeyVisual.coverHeight = parseFloat(KeyVisual.editorImages[KeyVisual.chosenImageID].imageHeight) / KeyVisual.editorScale;
            KeyVisual.minWidth = KeyVisual.previewWidth * csEditorParams.imageDimension.keyVisual.width / csEditorParams.imageDimension.orig.width;
            KeyVisual.minHeight = KeyVisual.minWidth * csEditorParams.imageDimension.keyVisual.height / csEditorParams.imageDimension.keyVisual.width;

            if (KeyVisual.previewWidth > KeyVisual.imageWidth || KeyVisual.previewHeight > KeyVisual.imageHeight) {
                alert(csEditorLang.error.wrongImageDimension.replace('%width%', csEditorParams.imageDimension.keyVisual.width).replace('%height%', csEditorParams.imageDimension.keyVisual.height));
                KeyVisual.uploadFileExtension = '';
                KeyVisual.uploadFileName = '';
                return false;
            }

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

            KeyVisual.previewElement.attr('src', KeyVisual.editorImage.src);
            KeyVisual.setCover();
            KeyVisual.setResizable();
            KeyVisual.setDraggable();
        };
    },

    fillThumbs: function () {
        $.each(KeyVisual.editorImages, function (key, value) {
            if (key === '0') {
                return;
            }
            KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = ' + key + '; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.mediaPath + value.imageName + '_thumb.' + value.imageExtension + '" width="' + KeyVisual.thumbParams.width + '"/>');
        });
        KeyVisual.thumbElement.append('<img onclick="KeyVisual.chosenImageID = 0; KeyVisual.fillImageEditArea();" class="formNext" src="' + KeyVisual.imageParams.standardImage + '" width="' + KeyVisual.thumbParams.width + '"/>');

        KeyVisual.showElementsForType();
    },

    fillImageEditArea: function () {
        if (KeyVisual.chosenImageID > 0) {
            KeyVisual.requestInput.val('updateImage');
        }
        else {
            KeyVisual.requestInput.val('appendKeyVisual');
        }

        var image = KeyVisual.editorImages[KeyVisual.chosenImageID];
        $.each(image, function (key, value) {
            $("input[type='text'][name='" + key + "'], input[type='hidden'][name='" + key + "'], select[name='" + key + "'], textarea[name='" + key + "']", CS.contentElement).val(value);
        });

        KeyVisual.editorImage.src = csEditorParams.mediaPrefix + csEditorParams.navID + '/' + image.imageName + '_orig.' + image.imageExtension;
    },

    showForSingle: function () {
        $('img:not(:first)', KeyVisual.thumbElement).hide();
        $('.kenburns').hide();
        $('select', '.kenburns').prop('disabled', true);
    },

    showForKenburns: function () {
        KeyVisual.showForMultiple();
        $('.kenburns').show();
        $('select', '.kenburns').prop('disabled', false);
    },

    showForSlider: function () {
        KeyVisual.showForMultiple();
        $('.kenburns').hide();
        $('select', '.kenburns').prop('disabled', true);
    },

    showForMultiple: function () {
        $('img', KeyVisual.thumbElement).show();
    },

    showElementsForType: function () {
        switch (KeyVisual.type) {
            case 'Single':
                KeyVisual.showForSingle();
                break;
            case 'Kenburns':
                KeyVisual.showForKenburns();
                break;
            case 'Slider':
                KeyVisual.showForSlider();
                break;
        }
    },

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

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

        KeyVisual.topInput.val(KeyVisual.coverTop * KeyVisual.editorScale);
        KeyVisual.leftInput.val(KeyVisual.coverLeft * KeyVisual.editorScale);
        KeyVisual.heightInput.val(KeyVisual.coverHeight * KeyVisual.editorScale);
        KeyVisual.widthInput.val(KeyVisual.coverWidth * KeyVisual.editorScale);
        console.log(KeyVisual.heightInput);
        console.log(KeyVisual.heightInput.val());
        console.log(KeyVisual.widthInput);
        console.log(KeyVisual.widthInput.val());
    },

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

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

    close: function () {

    }
};