/**
 * Created by CS medien- & kommunikationssysteme.
 * @author Christian Steinle
 * @date 24.12.2016
 *
 * @copyright CS medien- & kommunikationssysteme (http://www.steinle-computer.de)
 */

$(document).ready(function () {
    carColor.init();
    slider.init();
    kenBurns.init();
    thumbPage.init();
});

$(window).resize(function () {
    slider.initVariables();
    kenBurns.initVariables();
    thumbPage.init();
});

var slider = {
    interval: null,
    displayTime: 4000,
    animationTime: 400,

    actualImageID: -1,
    actualImage: null,
    nextImageID: 0,
    nextImage: null,
    countImages: 0,

    animationWidth: 0,
    animationHeight: 0,

    sliderElement: null,
    sliderImages: null,

    availableAnimations: [
        'left',
        'top',
        'width',
        'height',
        'opacity'
    ],
    animation: {},


    init: function () {
        slider.initElements();
        slider.initVariables();
        slider.interval = window.setInterval(slider.doAnimation, slider.displayTime);
    },


    initElements: function () {
        slider.sliderElement = $('.slider');
        slider.sliderImages = $('img', slider.sliderElement);
    },


    initVariables: function () {
        slider.countImages = slider.sliderImages.length;
        if (slider.countImages === 0) {
            return false;
        }
        slider.animationWidth = slider.sliderElement.width();
        slider.animationHeight = keyVisualData.height * slider.animationWidth / keyVisualData.width;
        slider.sliderElement.css('height', slider.animationHeight);
        slider.setNextImages();
    },


    setNextImages: function () {
        ++slider.actualImageID;
        ++slider.nextImageID;

        if (slider.actualImageID === slider.countImages) {
            slider.actualImageID = 0;
        }

        if (slider.nextImageID === slider.countImages) {
            slider.nextImageID = 0;
        }

        slider.actualImage = $(slider.sliderImages[slider.actualImageID]);
        slider.nextImage = $(slider.sliderImages[slider.nextImageID]);
    },


    doAnimation: function () {
        if (slider.countImages < 2) {
            return false;
        }

        var animationKey = Math.floor(Math.random() * slider.availableAnimations.length);
        var animationName = slider.availableAnimations[animationKey];

        slider.resetUnusedImages();

        switch (animationName) {
            case 'left':
                slider.getShiftLeft();
                break;
            case 'top':
                slider.getShiftTop();
                break;
            case 'width':
                slider.getWidth();
                break;
            case 'height':
                slider.getHeight();
                break;
            case 'opacity':
                slider.getOpacity();
                break;
            default:
                slider.getShiftLeft();
                break;
        }

        slider.actualImage.show().animate(slider.animation.actual, slider.animationTime);
        slider.nextImage.show().animate(slider.animation.next, slider.animationTime);

        slider.setNextImages();
    },

    resetUnusedImages: function () {
        slider.sliderImages.each(function (imageID, imageElement) {
            var image = $(imageElement);

            if (imageID !== slider.actualImageID && imageID !== slider.nextImageID) {
                image.hide();
            }

            image.css({
                left: 0,
                top: 0,
                width: slider.animationWidth,
                height: slider.animationHeight,
                opacity: 1
            });

        });
    },


    getShiftLeft: function () {
        slider.nextImage.css({left: slider.animationWidth});
        slider.animation.next = {left: 0};
        slider.animation.actual = {left: -1 * slider.animationWidth, opacity: 0};
    },


    getShiftTop: function () {
        slider.nextImage.css({top: slider.animationHeight});
        slider.animation.next = {top: 0};
        slider.animation.actual = {top: -1 * slider.animationHeight, opacity: 0};
    },


    getWidth: function () {
        slider.nextImage.css({width: 0, left: slider.animationWidth / 2, opacity: 0});
        slider.animation.next = {width: slider.animationWidth, left: 0, opacity: 1};
        slider.animation.actual = {width: 0, left: slider.animationWidth / 2, opacity: 0};
    },


    getHeight: function () {
        slider.nextImage.css({height: 0, top: slider.animationHeight / 2, opacity: 0});
        slider.animation.next = {height: slider.animationHeight, top: 0, opacity: 1};
        slider.animation.actual = {height: 0, top: slider.animationHeight / 2, opacity: 0};
    },


    getOpacity: function () {
        slider.nextImage.css({opacity: 0});
        slider.animation.next = {opacity: 1};
        slider.animation.actual = {opacity: 0};
    }
};


var kenBurns = {
    interval: null,
    displayTime: 5000,
    animationTime: 400,
    scaleFactor: 1.2,

    actualImageID: -1,
    actualImage: null,
    nextImageID: 0,
    nextImage: null,
    countImages: 0,

    animationWidth: 0,
    animationHeight: 0,

    kenBurnsElement: null,
    kenBurnsImages: null,

    animationParams: {},


    init: function () {
        kenBurns.initElements();
        kenBurns.initVariables();
        kenBurns.resetUnusedImages(true);
        kenBurns.doAnimation();
        kenBurns.interval = window.setInterval(kenBurns.doAnimation, kenBurns.displayTime);
    },


    initElements: function () {
        kenBurns.kenBurnsElement = $('.kenburns');
        kenBurns.kenBurnsImages = $('img', kenBurns.kenBurnsElement);
    },


    initVariables: function () {
        kenBurns.countImages = kenBurns.kenBurnsImages.length;
        if (kenBurns.countImages === 0) {
            return false;
        }
        kenBurns.animationWidth = kenBurns.kenBurnsElement.width();
        kenBurns.animationHeight = keyVisualData.height * kenBurns.animationWidth / keyVisualData.width;
        kenBurns.kenBurnsElement.css('height', kenBurns.animationHeight);
        kenBurns.setNextImages();
    },


    setNextImages: function () {
        ++kenBurns.actualImageID;
        ++kenBurns.nextImageID;

        if (kenBurns.actualImageID === kenBurns.countImages) {
            kenBurns.actualImageID = 0;
        }

        if (kenBurns.nextImageID === kenBurns.countImages) {
            kenBurns.nextImageID = 0;
        }

        kenBurns.actualImage = $(kenBurns.kenBurnsImages[kenBurns.actualImageID]);
        kenBurns.nextImage = $(kenBurns.kenBurnsImages[kenBurns.nextImageID]);
    },


    doAnimation: function () {
        if (kenBurns.countImages < 2) {
            return false;
        }

        kenBurns.resetUnusedImages(false);
        kenBurns.getAnimationParams();

        kenBurns.setNextImages();
    },


    resetUnusedImages: function (doAll) {
        kenBurns.kenBurnsImages.each(function (imageID, imageElement) {
            var image = $(imageElement);

            if ((imageID !== kenBurns.actualImageID && imageID !== kenBurns.nextImageID) || doAll === true) {

                var imageWidth = kenBurns.animationWidth;
                var imageHeight = kenBurns.animationHeight;
                if (image.data('zoom') === 'out') {
                    imageWidth = kenBurns.animationWidth * kenBurns.scaleFactor;
                    imageHeight = kenBurns.animationHeight * kenBurns.scaleFactor;
                }

                switch (image.data('start')) {
                    case 'nw' :
                        image.css({left: 0, top: 0, right: '', bottom: ''});
                        break;

                    case 'n':
                        image.css({left: (kenBurns.animationWidth - imageWidth) / 2, top: 0, right: '', bottom: ''});
                        break;

                    case 'ne':
                        image.css({left: '', top: 0, right: 0, bottom: ''});
                        break;

                    case 'e':
                        image.css({left: '', top: (kenBurns.animationHeight - imageHeight) / 2, right: 0, bottom: ''});
                        break;

                    case 'se':
                        image.css({left: '', top: '', right: 0, bottom: 0});
                        break;

                    case 's' :
                        image.css({left: (kenBurns.animationWidth - imageWidth) / 2, top: '', right: '', bottom: 0});
                        break;

                    case 'sw':
                        image.css({left: 0, top: '', right: '', bottom: 0});
                        break;

                    case 'w':
                        image.css({left: 0, top: (kenBurns.animationHeight - imageHeight) / 2, right: '', bottom: ''});
                        break;

                    case 'c':
                        image.css({
                            left: (kenBurns.animationWidth - imageWidth) / 2,
                            top: (kenBurns.animationHeight - imageHeight) / 2,
                            right: '',
                            bottom: ''
                        });
                        break;
                }

                image.css({width: imageWidth, height: imageHeight, opacity: 0, zIndex: 0});
            }


        });
    },


    getAnimationParams: function () {
        var cssObject = {};
        var image = kenBurns.actualImage;
        image.css('zIndex', 1);
        cssObject.width = kenBurns.animationWidth;
        cssObject.height = kenBurns.animationHeight;
        if (image.data('zoom') === 'in') {
            cssObject.width = kenBurns.animationWidth * kenBurns.scaleFactor;
            cssObject.height = kenBurns.animationHeight * kenBurns.scaleFactor;
        }

        switch (image.data('start')) {
            case 'n':
                cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
                break;

            case 'e':
                cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
                break;

            case 's' :
                cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
                break;

            case 'w':
                cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
                break;

            case 'c':
                cssObject.left = (kenBurns.animationWidth - cssObject.width) / 2;
                cssObject.top = (kenBurns.animationHeight - cssObject.height) / 2;
                break;
        }

        cssObject.opacity = 4;

        image.animate(
            cssObject
            , 7000, 'swing', function () {
                image.animate({
                    opacity: 0
                }, 1000, 'swing')
            })
    }

};


var carColor = {
    activePreview: 0,
    previewElement: null,
    previewImages: null,
    thumbElement: null,
    thumbImages: null,


    init: function () {
        carColor.initVariables();
        carColor.thumbImages.on('mouseenter', function () {
            $(carColor.previewImages.get(carColor.activePreview)).hide();
            carColor.activePreview = parseInt($(this).data('thumb'));
            $(carColor.previewImages.get(carColor.activePreview)).css('display', 'block');
        });
    },


    initVariables: function () {
        carColor.previewElement = $('.car-color');
        carColor.previewImages = $('img', carColor.previewElement);
        carColor.thumbElement = $('.car-color-thumbs');
        carColor.thumbImages = $('img', carColor.thumbElement);
    }
};


var thumbPage = {
    init: function () {
        var thumbElement = $('.thumbPage');
        var thumbImages = $('.thumbnail', '.thumbPage');
        var left = 0;

        if (thumbElement.length === 0) {
            return false;
        }

        $('.clearfix', thumbElement).remove();

        $.each(thumbImages, function (key, image) {
            if ($(image).offset().left <= left) {
                $(image).parent().before('<div class="clearfix"></div>');
            }
            left = $(image).offset().left;
        });
    }
};