$(function () {

    var cls = {
            itemIco: 'focus-item-ico',
            hoverImg: 'hover-img',
            hoverImgContainer: 'hover-img-container'
        }, currentEl;

    $(window).on('load', function () {
        initStyle();
    });

    var focusImages = $('#focusImages').on('mouseover', JQS(cls.itemIco), function () {
        over(this);
    }).on('mouseout', JQS(cls.itemIco), function () {
        out(this);
    }).on('click', '.event-el, .hover-img-click', function (e) {
        var el = $(this), data, isFocus = true;

        if (el.hasClass('hover-img-click')) {
            el = currentEl;
            isFocus = false;
            el.data('active', true);
        } else {
            currentEl = el;
        }

        data = el.data() || {};

        if (el.hasClass(cls.itemIco)) {
            over(el[0], true);
            if (data.target && isFocus) activeCarousel(el, focusImages);
        } else if (el.hasClass('focus-item-button')) {
            if (data.link == 0) { // 点击事件
                if (data.isToggle) {
                    data.isToggle = false;
                    if (data.hover) hideImg(el);
                    if (data.switch) el.text(data.text)
                } else {
                    data.isToggle = true;
                    if (data.hover) showImg(el, data.hover);
                    if (!data.text) data.text = el.text();
                    if (data.switch) el.text(data.switch);
                }
                el.toggleClass('active');
            } else if (data.link == 1 && isFocus) { // 内部链接
                e.preventDefault();
                if (data.target) activeCarousel(el, focusImages);
            }

        }
    });

    $('.flickity-box .focus-item').hover(
        function () {
            $(this).parents('.flickity-viewport').addClass('overflow-visible');
            $('.flickity-box').find('.item.is-selected').show().siblings().hide();
        },
        function () {
            $(this).parents('.flickity-viewport').removeClass('overflow-visible');
            $('.flickity-box').find('.item').show();
        }
    );

    function initStyle() {
        var styleElems = document.getElementsByTagName("style");

        if (styleElems.length == 0) {
            var tempStyle = document.createElement("style");
            tempStyle.setAttribute("type", "text/css");
            document.getElementsByTagName("head")[0].appendChild(tempStyle);
        }

        var styleElem = styleElems[0],
            carouselHeight = $(".carousel-inner").height(),
            style = JQS(cls.hoverImgContainer) + '{position:absolute;left:0;top:0;width:100%;overflow:hidden;height:' + carouselHeight + 'px}';

        if (styleElem.styleSheet) {
            styleElem.styleSheet.cssText += style;
        } else {
            styleElem.appendChild(document.createTextNode(style));
        }
    }

    function activeCarousel(el, carousel) {
        var target = el.data('target'),
            index = 0;

        carousel.find('.focus-element').each(function (i, item) {
            if (target == $(item).data('id')) {
                index = $(item).data('index');
                return false;
            }
        });

        carousel.carousel(index);
    }

    function over(element, click) {
        var el = $(element), hover = el.data('hover'), event = el.data('event');
        if (hover && (!event || (click && event))) {
            if (click && event && el.data('active')) {
                return out(el, true);
            }
            el.data('active', true);
            showImg(el, hover);
        }
    }

    function out(el, click) {
        el = $(el).data('active', false);
        var hover = el.data('hover'), event = el.data('event');
        if (hover && (!event || (click && event))) {
            hideImg(el);
        }
    }

    function showImg(el, src) {
        var p = el.closest('.focus-element'), img = p.find(JQS(cls.hoverImgContainer));
        if (!img.length) img = $('<div class="' + cls.hoverImgContainer + '"><img class="hover-img-click ' + cls.hoverImg + '" src="' + src + '"></div>').appendTo(p);
        img.find(JQS(cls.hoverImg)).attr('src', src);
        img.stop().fadeIn();
    }

    function hideImg(el) {
        el.closest('.focus-element').find(JQS(cls.hoverImgContainer)).stop().fadeOut();
    }

});