var Marionette = require('backbone.marionette');

module.exports = app.Behaviors.ObjectFitPolyfill = Marionette.Behavior.extend({

    onRender: function() {
        this.selector = this.getOption('selector');
        this.parentSelector = this.getOption('parentSelector');
        this.ignoreBreakpoint = this.getOption('ignoreBreakpoint');

        this.objectFit();

        $(window).on('resize.objectFit', _.debounce(_.bind(this.objectFitToParent, this), 10));
    },

    objectFit: function() {
        if ($(window).width > this.ignoreBreakpoint) {
            if (!this.hasObjectFit()) {
                var self = this;
                $(this.selector, this.view.$el).each(function(i) {
                    $(this)
                        .on('load', _.bind(self.objectFitOnLoad, self))
                        .addClass('invisible')
                        .css({
                            'position': 'absolute',
                            'max-width': 'none'
                        });
                });
            }
        }
    },

    objectFitOnLoad: function(e) {
        var $img = $(e.target);
        var $container = $img.parents(this.parentSelector);
        this.objectFitGetNaturalSize(e.target, _.bind(function(naturalSize) {
            var containerSize = {
                width: $container.width(),
                height: this.getContainerHeight($container)
            };

            console.log(containerSize.height);
            var horScale = containerSize.width / naturalSize.width;
            var verScale = containerSize.height / naturalSize.height;
            var scale = (horScale > verScale) ? horScale : verScale;
            var css = {};
            css.width = scale * naturalSize.width;
            css.height = scale * naturalSize.height;
            css.left = (containerSize.width - css.width) / 2;
            css.top = (containerSize.height - css.height) / 2;
            $img.css(css).removeClass('invisible');
        }, this));
    },

    objectFitGetNaturalSize: function(img, callback) {

        if (img.naturalWidth && img.naturalHeight) {
            callback({
                width: img.naturalWidth,
                height: img.naturalHeight
            });
        } else {
            var image = new Image();
            image.src = $(img).attr("src");
            image.onload = function() {
                callback({
                    width: this.width,
                    height: this.height
                });
            };
        }
    },

    getContainerHeight: function($container) {
        var height = $container.height();

        if (height <= 50) {
            if (document.documentElement.currentStyle) {
                height = $container.get(0).currentStyle.height;
            } else {
                height = window.getComputedStyle($container.get(0)).height;
            }
        }

        return height;
    },

    objectFitToParent: function() {
        if ($(window).width > this.ignoreBreakpoint) {
            var self = this;
            var naturalSize = {};

            $(this.selector, this.view.$el).each(function() {
                var $container = $(this).parents(self.parentSelector);
                naturalSize.width = this.naturalWidth;
                naturalSize.height = this.naturalHeight;
                var containerSize = {
                    width: $container.width(),
                    height: self.getContainerHeight($container)
                };
                var horScale = containerSize.width / naturalSize.width;
                var verScale = containerSize.height / naturalSize.height;
                var scale = (horScale > verScale) ? horScale : verScale;
                var css = {};
                css.width = scale * naturalSize.width;
                css.height = scale * naturalSize.height;
                css.left = (containerSize.width - css.width) / 2;
                css.top = (containerSize.height - css.height) / 2;
                $(this).css(css).removeClass('invisible');
            });
        } else {
            $(this.selector, this.view.$el).each(function() {
                $(this).attr('style', '');
            });
        }
    },

    hasObjectFit: function() {
        return 'objectFit' in document.documentElement.style;
    },

});