/**

* Video Plugin
* @version 2.3.4
* @author Bartosz Wojciechowski
* @author David Deutsch
* @license The MIT License (MIT)
*/

;(function($, window, document, undefined) {

/**
 * Creates the video plugin.
 * @class The Video Plugin
 * @param {Owl} carousel - The Owl Carousel
 */
var Video = function(carousel) {
        /**
         * Reference to the core.
         * @protected
         * @type {Owl}
         */
        this._core = carousel;

        /**
         * Cache all video URLs.
         * @protected
         * @type {Object}
         */
        this._videos = {};

        /**
         * Current playing item.
         * @protected
         * @type {jQuery}
         */
        this._playing = null;

        /**
         * All event handlers.
         * @todo The cloned content removale is too late
         * @protected
         * @type {Object}
         */
        this._handlers = {
                'initialized.owl.carousel': $.proxy(function(e) {
                        if (e.namespace) {
                                this._core.register({ type: 'state', name: 'playing', tags: [ 'interacting' ] });
                        }
                }, this),
                'resize.owl.carousel': $.proxy(function(e) {
                        if (e.namespace && this._core.settings.video && this.isInFullScreen()) {
                                e.preventDefault();
                        }
                }, this),
                'refreshed.owl.carousel': $.proxy(function(e) {
                        if (e.namespace && this._core.is('resizing')) {
                                this._core.$stage.find('.cloned .owl-video-frame').remove();
                        }
                }, this),
                'changed.owl.carousel': $.proxy(function(e) {
                        if (e.namespace && e.property.name === 'position' && this._playing) {
                                this.stop();
                        }
                }, this),
                'prepared.owl.carousel': $.proxy(function(e) {
                        if (!e.namespace) {
                                return;
                        }

                        var $element = $(e.content).find('.owl-video');

                        if ($element.length) {
                                $element.css('display', 'none');
                                this.fetch($element, $(e.content));
                        }
                }, this)
        };

        // set default options
        this._core.options = $.extend({}, Video.Defaults, this._core.options);

        // register event handlers
        this._core.$element.on(this._handlers);

        this._core.$element.on('click.owl.video', '.owl-video-play-icon', $.proxy(function(e) {
                this.play(e);
        }, this));
};

/**
 * Default options.
 * @public
 */
Video.Defaults = {
        video: false,
        videoHeight: false,
        videoWidth: false
};

/**
 * Gets the video ID and the type (YouTube/Vimeo/vzaar only).
 * @protected
 * @param {jQuery} target - The target containing the video data.
 * @param {jQuery} item - The item containing the video.
 */
Video.prototype.fetch = function(target, item) {
                var type = (function() {
                                if (target.attr('data-vimeo-id')) {
                                        return 'vimeo';
                                } else if (target.attr('data-vzaar-id')) {
                                        return 'vzaar'
                                } else {
                                        return 'youtube';
                                }
                        })(),
                        id = target.attr('data-vimeo-id') || target.attr('data-youtube-id') || target.attr('data-vzaar-id'),
                        width = target.attr('data-width') || this._core.settings.videoWidth,
                        height = target.attr('data-height') || this._core.settings.videoHeight,
                        url = target.attr('href');

        if (url) {

                /*
                                Parses the id's out of the following urls (and probably more):
                                https://www.youtube.com/watch?v=:id
                                https://youtu.be/:id
                                https://vimeo.com/:id
                                https://vimeo.com/channels/:channel/:id
                                https://vimeo.com/groups/:group/videos/:id
                                https://app.vzaar.com/videos/:id

                                Visual example: https://regexper.com/#(http%3A%7Chttps%3A%7C)%5C%2F%5C%2F(player.%7Cwww.%7Capp.)%3F(vimeo%5C.com%7Cyoutu(be%5C.com%7C%5C.be%7Cbe%5C.googleapis%5C.com)%7Cvzaar%5C.com)%5C%2F(video%5C%2F%7Cvideos%5C%2F%7Cembed%5C%2F%7Cchannels%5C%2F.%2B%5C%2F%7Cgroups%5C%2F.%2B%5C%2F%7Cwatch%5C%3Fv%3D%7Cv%5C%2F)%3F(%5BA-Za-z0-9._%25-%5D*)(%5C%26%5CS%2B)%3F
                */

                id = url.match(/(http:|https:|)\/\/(player.|www.|app.)?(vimeo\.com|youtu(be\.com|\.be|be\.googleapis\.com|be\-nocookie\.com)|vzaar\.com)\/(video\/|videos\/|embed\/|channels\/.+\/|groups\/.+\/|watch\?v=|v\/)?([A-Za-z0-9._%-]*)(\&\S+)?/);

                if (id[3].indexOf('youtu') > -1) {
                        type = 'youtube';
                } else if (id[3].indexOf('vimeo') > -1) {
                        type = 'vimeo';
                } else if (id[3].indexOf('vzaar') > -1) {
                        type = 'vzaar';
                } else {
                        throw new Error('Video URL not supported.');
                }
                id = id[6];
        } else {
                throw new Error('Missing video URL.');
        }

        this._videos[url] = {
                type: type,
                id: id,
                width: width,
                height: height
        };

        item.attr('data-video', url);

        this.thumbnail(target, this._videos[url]);
};

/**
 * Creates video thumbnail.
 * @protected
 * @param {jQuery} target - The target containing the video data.
 * @param {Object} info - The video info object.
 * @see `fetch`
 */
Video.prototype.thumbnail = function(target, video) {
        var tnLink,
                icon,
                path,
                dimensions = video.width && video.height ? 'width:' + video.width + 'px;height:' + video.height + 'px;' : '',
                customTn = target.find('img'),
                srcType = 'src',
                lazyClass = '',
                settings = this._core.settings,
                create = function(path) {
                        icon = '<div class="owl-video-play-icon"></div>';

                        if (settings.lazyLoad) {
                                tnLink = $('<div/>',{
                                        "class": 'owl-video-tn ' + lazyClass,
                                        "srcType": path
                                });
                        } else {
                                tnLink = $( '<div/>', {
                                        "class": "owl-video-tn",
                                        "style": 'opacity:1;background-image:url(' + path + ')'
                                });
                        }
                        target.after(tnLink);
                        target.after(icon);
                };

        // wrap video content into owl-video-wrapper div
        target.wrap( $( '<div/>', {
                "class": "owl-video-wrapper",
                "style": dimensions
        }));

        if (this._core.settings.lazyLoad) {
                srcType = 'data-src';
                lazyClass = 'owl-lazy';
        }

        // custom thumbnail
        if (customTn.length) {
                create(customTn.attr(srcType));
                customTn.remove();
                return false;
        }

        if (video.type === 'youtube') {
                path = "//img.youtube.com/vi/" + video.id + "/hqdefault.jpg";
                create(path);
        } else if (video.type === 'vimeo') {
                $.ajax({
                        type: 'GET',
                        url: '//vimeo.com/api/v2/video/' + video.id + '.json',
                        jsonp: 'callback',
                        dataType: 'jsonp',
                        success: function(data) {
                                path = data[0].thumbnail_large;
                                create(path);
                        }
                });
        } else if (video.type === 'vzaar') {
                $.ajax({
                        type: 'GET',
                        url: '//vzaar.com/api/videos/' + video.id + '.json',
                        jsonp: 'callback',
                        dataType: 'jsonp',
                        success: function(data) {
                                path = data.framegrab_url;
                                create(path);
                        }
                });
        }
};

/**
 * Stops the current video.
 * @public
 */
Video.prototype.stop = function() {
        this._core.trigger('stop', null, 'video');
        this._playing.find('.owl-video-frame').remove();
        this._playing.removeClass('owl-video-playing');
        this._playing = null;
        this._core.leave('playing');
        this._core.trigger('stopped', null, 'video');
};

/**
 * Starts the current video.
 * @public
 * @param {Event} event - The event arguments.
 */
Video.prototype.play = function(event) {
        var target = $(event.target),
                item = target.closest('.' + this._core.settings.itemClass),
                video = this._videos[item.attr('data-video')],
                width = video.width || '100%',
                height = video.height || this._core.$stage.height(),
                html,
                iframe;

        if (this._playing) {
                return;
        }

        this._core.enter('playing');
        this._core.trigger('play', null, 'video');

        item = this._core.items(this._core.relative(item.index()));

        this._core.reset(item.index());

        html = $( '<iframe frameborder="0" allowfullscreen mozallowfullscreen webkitAllowFullScreen ></iframe>' );
        html.attr( 'height', height );
        html.attr( 'width', width );
        if (video.type === 'youtube') {
                html.attr( 'src', '//www.youtube.com/embed/' + video.id + '?autoplay=1&rel=0&v=' + video.id );
        } else if (video.type === 'vimeo') {
                html.attr( 'src', '//player.vimeo.com/video/' + video.id + '?autoplay=1' );
        } else if (video.type === 'vzaar') {
                html.attr( 'src', '//view.vzaar.com/' + video.id + '/player?autoplay=true' );
        }

        iframe = $(html).wrap( '<div class="owl-video-frame" />' ).insertAfter(item.find('.owl-video'));

        this._playing = item.addClass('owl-video-playing');
};

/**
 * Checks whether an video is currently in full screen mode or not.
 * @todo Bad style because looks like a readonly method but changes members.
 * @protected
 * @returns {Boolean}
 */
Video.prototype.isInFullScreen = function() {
        var element = document.fullscreenElement || document.mozFullScreenElement ||
                        document.webkitFullscreenElement;

        return element && $(element).parent().hasClass('owl-video-frame');
};

/**
 * Destroys the plugin.
 */
Video.prototype.destroy = function() {
        var handler, property;

        this._core.$element.off('click.owl.video');

        for (handler in this._handlers) {
                this._core.$element.off(handler, this._handlers[handler]);
        }
        for (property in Object.getOwnPropertyNames(this)) {
                typeof this[property] != 'function' && (this[property] = null);
        }
};

$.fn.owlCarousel.Constructor.Plugins.Video = Video;

})(window.Zepto || window.jQuery, window, document);