window.Scrobbleme = {
    widthToScaleUp: 200,
    methods: ['from-left', 'from-right', 'overlay', 'fade-in', 'side-by-side']
};

Scrobbleme.ImageComparisonSlider = function (element, jQuery) {
    var slide, slider, value;

    if (jQuery == undefined) {
        jQuery = window.jQuery;
    }

    this.domNode = jQuery(element);
    this.domNode.originalWidth = this.domNode[0].style.width;
    if (this.domNode.hasClass('random')) {
        this.domNode.removeClass('random');
        this.domNode.addClass(Scrobbleme.methods[[Math.floor(Math.random() * Scrobbleme.methods.length)]]);
    }
    if (this.domNode.hasClass('from-left')) {
        slide = this.slide_from_left;
    } else if (this.domNode.hasClass('from-right')) {
        slide = this.slide_from_right;
    } else if (this.domNode.hasClass('overlay')) {
        this.domNode.find('.images .left').width(this.domNode.width() / 2);
        this.domNode.find('.images img').width(this.domNode.width());
        slide = this.slide_overlay;
    } else if (this.domNode.hasClass('fade-in')) {
        slide = this.slide_fade_in;
    } else {
        slide = this.slide_side_by_side;
    }
    this.slide = slide;

    value = this.domNode.data('ic-value');
    if (value == undefined || typeof(value) != 'number' || value < 0 || value > 100) {
        value = 50;
    }
    slider = this.domNode.find('.slider')[0];
    noUiSlider.create(slider, {
        start: value,
        animate: false,
        range: {
            'min': 0,
            'max': 100
        }
    });
    slider.noUiSlider.on('slide', function (value) {
        this.domNode.attr('data-ic-slider-value', value[0]);
        this.slide(null, {value: value[0]});
    }.bind(this));

    slider.noUiSlider.set(value);
    this.resize_callback({data: {'slider': slider, 'element': this}});
    jQuery(window).resize({'slider': slider, 'element': this}, this.resize_callback);
    this.domNode.find('.images').click({'slider': slider, 'slide': slide}, this.clickable_callback.bind(this));

    /** Extras */
    if (this.domNode.hasClass('hover') && this.supports_hover()) {
        this.domNode.find('.images').mousemove({
            'slider': slider,
            'slide': slide
        }, this.throttle(this.clickable_callback.bind(this), 15));
    }
};

Scrobbleme.ImageComparisonSlider.prototype = {
    slide_from_right: function (event, ui) {
        this.domNode.find('.images .right').css('left', ui.value + '%');
    },

    slide_from_left: function (event, ui) {
        this.domNode.find('.images .left').css('left', (ui.value - 100) + '%');
    },

    slide_overlay: function (event, ui) {
        this.domNode.find('.images .left').width(ui.value * this.domNode.width() / 100);
    },

    slide_side_by_side: function (event, ui) {
        this.domNode.find('.images .right').css('left', (ui.value) + '%');
        this.domNode.find('.images .left').css('margin-left', (ui.value - 100) + '%');
    },
    slide_fade_in: function (event, ui) {
        this.domNode.find('.images .right').css('opacity', (ui.value) / 100);
        this.domNode.find('.images .left').css('opacity', 100 / (ui.value));
    },

    clickable_callback: function (event) {
        var newValue = (event.pageX - event.currentTarget.getBoundingClientRect().left) / event.currentTarget.clientWidth * 100;
        this.slide(null, {value: newValue});
        event.data.slider.noUiSlider.set(newValue);
    },

    resize_callback: function (options) {
        var data = options.data;
        var domNode = data.element.domNode;
        if (domNode.width() <= Scrobbleme.widthToScaleUp && !domNode.modeChanged) {
            domNode.modeChanged = true;
            domNode[0].style.width = '100%';
            domNode.upperSizeBound = domNode.width();
        } else if (domNode.modeChanged && domNode.width() > domNode.upperSizeBound) {
            domNode[0].style.width = domNode.originalWidth;
            domNode.modeChanged = false;
        }

        domNode.find('.images img').height('auto');
        if (domNode.hasClass('overlay')) {
            domNode.find('.images .left').width(domNode.width() / 2);
            domNode.find('.images img').width(domNode.width());
        }

        var currentValue = data.slider.noUiSlider.get();
        data.element.slide(null, {value: currentValue});
    },

    /**
     * Returns true, if the device supports "hover" in the plugins sense.
     */
    supports_hover: function () {
        return !navigator.userAgent.match(/(iPod|iPhone|iPad|Android|Windows\sPhone|BlackBerry)/i);
    },

    // Thanks: http://sampsonblog.com/749/simple-throttle-function
    throttle: function (callback, threshhold) {
        var wait = false;
        return function (event) {
            if (!wait) {
                callback(event);
                wait = true;
                setTimeout(function () {
                    wait = false;
                }, threshhold);
            }
        }
    }
};

jQuery(function (jQuery) {
    jQuery('.image-comparator').each(function (index, element) {
        element.imageComparisonSlider = new Scrobbleme.ImageComparisonSlider(element, jQuery);
    });

    // Improve Visual Composer integration
    jQuery(document).on("click.vc.tabs.data-api", function () {
        jQuery(window).trigger('resize')
    });
});