CKEDITOR.plugins.add('html5video', {
    requires: 'widget',
    lang: 'bg,ca,de,en,eu,es,ru,uk,fr,ko,pt,pt-br,pl,zh,zh-cn',
    icons: 'html5video',
    init: function (editor) {
        editor.widgets.add('html5video', {
            button: editor.lang.html5video.button,
            template: '<div class="ckeditor-html5-video"></div>',
            /*
             * Allowed content rules (http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules):
             *  - div-s with text-align,float,margin-left,margin-right inline style rules and required ckeditor-html5-video class.
             *  - video tags with src, controls, width and height attributes.
             */
            allowedContent: 'div[data-responsive](!ckeditor-html5-video){text-align,float,margin-left,margin-right}; video[src,poster,controls,autoplay,width, height,loop]{max-width,height};',
            requiredContent: 'div(ckeditor-html5-video); video[src];',
            upcast: function (element) {
                return element.name === 'div' && element.hasClass('ckeditor-html5-video');
            },
            dialog: 'html5video',
            init: function () {
                var src = '';
                var autoplay = '';
                var loop = '';
                var controls = '';
                var align = this.element.getStyle('text-align');

                var width = '';
                var height = '';
                var poster = '';

                // If there's a child (the video element)
                if (this.element.getChild(0)) {
                    // get it's attributes.
                    src = this.element.getChild(0).getAttribute('src');
                    width = this.element.getChild(0).getAttribute('width');
                    height = this.element.getChild(0).getAttribute('height');
                    autoplay = this.element.getChild(0).getAttribute('autoplay');
                    allowdownload = !this.element.getChild(0).getAttribute('controlslist');
                    loop = this.element.getChild(0).getAttribute('loop');
                    advisorytitle = this.element.getChild(0).getAttribute('title');
                    controls = this.element.getChild(0).getAttribute('controls');
                    responsive = this.element.getAttribute('data-responsive');
                    poster = this.element.getChild(0).getAttribute('poster');
                }

                if (src) {
                    this.setData('src', src);

                    if (align) {
                        this.setData('align', align);
                    } else {
                        this.setData('align', 'none');
                    }

                    if (width) {
                        this.setData('width', width);
                    }

                    if (height) {
                        this.setData('height', height);
                    }

                    if (autoplay) {
                        this.setData('autoplay', 'yes');
                    }

                    if (allowdownload) {
                        this.setData('allowdownload', 'yes');
                    }

                    if (loop) {
                        this.setData('loop', 'yes');
                    }

                    if (advisorytitle) {
                        this.setData('advisorytitle', advisorytitle);
                    }

                    if (responsive) {
                        this.setData('responsive', responsive);
                    }

                    if (controls) {
                        this.setData('controls', controls);
                    }

                    if (poster) {
                        this.setData('poster', poster);
                    }
                }
            },
            data: function () {
                // If there is an video source
                if (this.data.src) {
                    // and there isn't a child (the video element)
                    if (!this.element.getChild(0)) {
                        // Create a new <video> element.
                        var videoElement = new CKEDITOR.dom.element('video');
                        // Set the controls attribute.
                        if (this.data.controls) {
                            videoElement.setAttribute('controls', 'controls');
                        }
                        // Append it to the container of the plugin.
                        this.element.append(videoElement);
                    }
                    this.element.getChild(0).setAttribute('src', this.data.src);
                    if (this.data.width) this.element.getChild(0).setAttribute('width', this.data.width);
                    if (this.data.height) this.element.getChild(0).setAttribute('height', this.data.height);

                    if (this.data.responsive) {
                        this.element.setAttribute("data-responsive", this.data.responsive);
                        this.element.getChild(0).setStyle('max-width', '100%');
                        this.element.getChild(0).setStyle('height', 'auto');
                    } else {
                        this.element.removeAttribute("data-responsive");
                        this.element.getChild(0).removeStyle('max-width');
                        this.element.getChild(0).removeStyle('height');
                    }

                    if (this.data.poster) this.element.getChild(0).setAttribute('poster', this.data.poster);
                }

                this.element.removeStyle('float');
                this.element.removeStyle('margin-left');
                this.element.removeStyle('margin-right');

                if (this.data.align === 'none') {
                    this.element.removeStyle('text-align');
                } else {
                    this.element.setStyle('text-align', this.data.align);
                }

                if (this.data.align === 'left') {
                    this.element.setStyle('float', this.data.align);
                    this.element.setStyle('margin-right', '10px');
                } else if (this.data.align === 'right') {
                    this.element.setStyle('float', this.data.align);
                    this.element.setStyle('margin-left', '10px');
                }

                if (this.element.getChild(0)) {
                    if (this.data.autoplay === 'yes') {
                        this.element.getChild(0).setAttribute('autoplay', 'autoplay');
                    } else {
                        this.element.getChild(0).removeAttribute('autoplay');
                    }

                    if (this.data.loop === 'yes') {
                        this.element.getChild(0).setAttribute('loop', 'loop');
                    } else {
                        this.element.getChild(0).removeAttribute('loop');
                    }

                    if (this.data.allowdownload === 'yes') {
                        this.element.getChild(0).removeAttribute('controlslist');
                    } else {
                        this.element.getChild(0).setAttribute('controlslist', 'nodownload');
                    }

                    if (this.data.advisorytitle) {
                        this.element.getChild(0).setAttribute('title', this.data.advisorytitle);
                    } else {
                        this.element.getChild(0).removeAttribute('title');
                    }

                    if (this.data.controls) {
                        this.element.getChild(0).setAttribute('controls', 'controls');
                    } else {
                        this.element.getChild(0).removeAttribute('controls');
                    }
                }
            }
        });

        if (editor.contextMenu) {
            editor.addMenuGroup('html5videoGroup');
            editor.addMenuItem('html5videoPropertiesItem', {
                label: editor.lang.html5video.videoProperties,
                icon: 'html5video',
                command: 'html5video',
                group: 'html5videoGroup'
            });

            editor.contextMenu.addListener(function (element) {
                if (element &&
                    element.getChild(0) &&
                    element.getChild(0).hasClass &&
                    element.getChild(0).hasClass('ckeditor-html5-video')) {
                    return { html5videoPropertiesItem: CKEDITOR.TRISTATE_OFF };
                }
            });
        }

        CKEDITOR.dialog.add('html5video', this.path + 'dialogs/html5video.js');
    }
});