/*!
   ckin v0.0.1: custom html5 video player skins.
   (c) 2017 
   mit license
   git+https://github.com/hunzaboy/ckin.git
*/
// source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca;
(function () {
    // helpers
    var regexp = function regexp(name) {
        return new regexp('(^| )' + name + '( |$)');
    };
    var foreach = function foreach(list, fn, scope) {
        for (var i = 0; i < list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    // class list object with basic methods
    function classlist(element) {
        this.element = element;
    }

    classlist.prototype = {
        add: function add() {
            foreach(arguments, function (name) {
                if (!this.contains(name)) {
                    this.element.classname += ' ' + name;
                }
            }, this);
        },
        remove: function remove() {
            foreach(arguments, function (name) {
                this.element.classname = this.element.classname.replace(regexp(name), '');
            }, this);
        },
        toggle: function toggle(name) {
            return this.contains(name) ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function contains(name) {
            return regexp(name).test(this.element.classname);
        },
        // bonus..
        replace: function replace(oldname, newname) {
            this.remove(oldname), this.add(newname);
        }
    };

    // ie8/9, safari
    if (!('classlist' in element.prototype)) {
        object.defineproperty(element.prototype, 'classlist', {
            get: function get() {
                return new classlist(this);
            }
        });
    }

    // replace() support for others
    if (window.domtokenlist && domtokenlist.prototype.replace == null) {
        domtokenlist.prototype.replace = classlist.prototype.replace;
    }
})();
(function () {
    if (typeof nodelist.prototype.foreach === "function") return false;
    nodelist.prototype.foreach = array.prototype.foreach;
})();

// unfortunately, due to scattered support, browser sniffing is required
function browsersniff() {
    var nver = navigator.appversion,
        nagt = navigator.useragent,
        browsername = navigator.appname,
        fullversion = '' + parsefloat(navigator.appversion),
        majorversion = parseint(navigator.appversion, 10),
        nameoffset,
        veroffset,
        ix;

    // msie 11
    if (navigator.appversion.indexof("windows nt") !== -1 && navigator.appversion.indexof("rv:11") !== -1) {
        browsername = "ie";
        fullversion = "11;";
    }
    // msie
    else if ((veroffset = nagt.indexof("msie")) !== -1) {
            browsername = "ie";
            fullversion = nagt.substring(veroffset + 5);
        }
        // chrome
        else if ((veroffset = nagt.indexof("chrome")) !== -1) {
                browsername = "chrome";
                fullversion = nagt.substring(veroffset + 7);
            }
            // safari
            else if ((veroffset = nagt.indexof("safari")) !== -1) {
                    browsername = "safari";
                    fullversion = nagt.substring(veroffset + 7);
                    if ((veroffset = nagt.indexof("version")) !== -1) {
                        fullversion = nagt.substring(veroffset + 8);
                    }
                }
                // firefox
                else if ((veroffset = nagt.indexof("firefox")) !== -1) {
                        browsername = "firefox";
                        fullversion = nagt.substring(veroffset + 8);
                    }
                    // in most other browsers, "name/version" is at the end of useragent
                    else if ((nameoffset = nagt.lastindexof(' ') + 1) < (veroffset = nagt.lastindexof('/'))) {
                            browsername = nagt.substring(nameoffset, veroffset);
                            fullversion = nagt.substring(veroffset + 1);
                            if (browsername.tolowercase() == browsername.touppercase()) {
                                browsername = navigator.appname;
                            }
                        }
    // trim the fullversion string at semicolon/space if present
    if ((ix = fullversion.indexof(";")) !== -1) {
        fullversion = fullversion.substring(0, ix);
    }
    if ((ix = fullversion.indexof(" ")) !== -1) {
        fullversion = fullversion.substring(0, ix);
    }
    // get major version
    majorversion = parseint('' + fullversion, 10);
    if (isnan(majorversion)) {
        fullversion = '' + parsefloat(navigator.appversion);
        majorversion = parseint(navigator.appversion, 10);
    }
    // return data
    return [browsername, majorversion];
}

var obj = {};
obj.browserinfo = browsersniff();
obj.browsername = obj.browserinfo[0];
obj.browserversion = obj.browserinfo[1];

wrapplayers();
/* get our elements */
var players = document.queryselectorall('.ckin__player');

var iconplay = '<i class="ckin-play"></i>';
var iconpause = '<i class="ckin-pause"></i>';
var iconvolumemute = '<i class="ckin-volume-mute"></i>';
var iconvolumemedium = '<i class="ckin-volume-medium"></i>';
var iconvolumelow = '<i class="ckin-volume-low"></i>';
var iconexpand = '<i class="ckin-expand"></i>';
var iconcompress = '<i class="ckin-compress"></i>';

players.foreach(function (player) {
    var video = player.queryselector('video');

    var skin = attachskin(video.dataset.ckin);
    player.classlist.add(skin);

    var overlay = video.dataset.overlay;
    addoverlay(player, overlay);

    var title = showtitle(skin, video.dataset.title);
    if (title) {
        player.insertadjacenthtml('beforeend', title);
    }

    var html = buildcontrols(skin);
    player.insertadjacenthtml('beforeend', html);

    var color = video.dataset.color;
    addcolor(player, color);

    var playercontrols = player.queryselector('.' + skin + '__controls');
    var progress = player.queryselector('.progress');;
    var progressbar = player.queryselector('.progress__filled');
    var toggle = player.queryselectorall('.toggle');
    var skipbuttons = player.queryselectorall('[data-skip]');
    var ranges = player.queryselectorall('.' + skin + '__slider');
    var volumebutton = player.queryselector('.volume');
    var fullscreenbutton = player.queryselector('.fullscreen');

    if (obj.browsername === "ie" && (obj.browserversion === 8 || obj.browserversion === 9)) {
        showcontrols(video);
        playercontrols.style.display = "none";
    }

    video.addeventlistener('click', function () {
        toggleplay(this, player);
    });
    video.addeventlistener('play', function () {
        updatebutton(this, toggle);
    });

    video.addeventlistener('pause', function () {
        updatebutton(this, toggle);
    });
    video.addeventlistener('timeupdate', function () {
        handleprogress(this, progressbar);
    });

    toggle.foreach(function (button) {
        return button.addeventlistener('click', function () {
            toggleplay(video, player);
        });
    });
    volumebutton.addeventlistener('click', function () {
        togglevolume(video, volumebutton);
    });

    var mousedown = false;
    progress.addeventlistener('click', function (e) {
        scrub(e, video, progress);
    });
    progress.addeventlistener('mousemove', function (e) {
        return mousedown && scrub(e, video, progress);
    });
    progress.addeventlistener('mousedown', function () {
        return mousedown = true;
    });
    progress.addeventlistener('mouseup', function () {
        return mousedown = false;
    });
    fullscreenbutton.addeventlistener('click', function (e) {
        return togglefullscreen(player, fullscreenbutton);
    });
    addlistenermulti(player, 'webkitfullscreenchange mozfullscreenchange fullscreenchange msfullscreenchange', function (e) {
        return onfullscreen(e, player);
    });
});

function showcontrols(video) {

    video.setattribute("controls", "controls");
}

function toggleplay(video, player) {
    var method = video.paused ? 'play' : 'pause';
    video[method]();
    video.paused ? player.classlist.remove('is-playing') : player.classlist.add('is-playing');
}

function updatebutton(video, toggle) {
    var icon = video.paused ? iconplay : iconpause;
    toggle.foreach(function (button) {
        return button.innerhtml = icon;
    });
}

function skip() {
    video.currenttime += parsefloat(this.dataset.skip);
}

function togglevolume(video, volumebutton) {
    var level = video.volume;
    var icon = iconvolumemedium;
    if (level == 1) {
        level = 0;
        icon = iconvolumemute;
    } else if (level == 0.5) {
        level = 1;
        icon = iconvolumemedium;
    } else {
        level = 0.5;
        icon = iconvolumelow;
    }
    video['volume'] = level;
    volumebutton.innerhtml = icon;
}

function handlerangeupdate() {
    video[this.name] = this.value;
}

function handleprogress(video, progressbar) {
    var percent = video.currenttime / video.duration * 100;
    progressbar.style.flexbasis = percent + '%';
}

function scrub(e, video, progress) {
    var scrubtime = e.offsetx / progress.offsetwidth * video.duration;
    video.currenttime = scrubtime;
}

function wrapplayers() {

    var videos = document.queryselectorall('video');

    videos.foreach(function (video) {

        var wrapper = document.createelement('div');
        wrapper.classlist.add('ckin__player');

        video.parentnode.insertbefore(wrapper, video);

        wrapper.appendchild(video);
    });
}

function buildcontrols(skin) {
    var html = [];
    html.push('<button class="' + skin + '__button--big toggle" title="toggle play">' + iconplay + '</button>');

    html.push('<div class="' + skin + '__controls ckin__controls">');

    html.push('<button class="' + skin + '__button toggle" title="toggle video">' + iconplay + '</button>', '<div class="progress">', '<div class="progress__filled"></div>', '</div>', '<button class="' + skin + '__button volume" title="volume">' + iconvolumemedium + '</button>', '<button class="' + skin + '__button fullscreen" title="full screen">' + iconexpand + '</button>');

    html.push('</div>');

    return html.join('');
}

function attachskin(skin) {
    if (typeof skin != 'undefined' && skin != '') {
        return skin;
    } else {
        return 'default';
    }
}

function showtitle(skin, title) {
    if (typeof title != 'undefined' && title != '') {
        return '<div class="' + skin + '__title">' + title + '</div>';
    } else {
        return false;
    }
}

function addoverlay(player, overlay) {

    if (overlay == 1) {
        player.classlist.add('ckin__overlay');
    } else if (overlay == 2) {
        player.classlist.add('ckin__overlay--2');
    } else {
        return;
    }
}

function addcolor(player, color) {
    if (typeof color != 'undefined' && color != '') {
        var buttons = player.queryselectorall('button');
        var progress = player.queryselector('.progress__filled');
        progress.style.background = color;
        buttons.foreach(function (button) {
            return button.style.color = color;
        });
    }
}

function togglefullscreen(player, fullscreenbutton) {
    // let isfullscreen = false;
    if (!document.fullscreenelement && // alternative standard method
    !document.mozfullscreenelement && !document.webkitfullscreenelement && !document.msfullscreenelement) {
        player.classlist.add('ckin__fullscreen');

        if (player.requestfullscreen) {
            player.requestfullscreen();
        } else if (player.mozrequestfullscreen) {
            player.mozrequestfullscreen(); // firefox
        } else if (player.webkitrequestfullscreen) {
            player.webkitrequestfullscreen(); // chrome and safari
        } else if (player.msrequestfullscreen) {
            player.msrequestfullscreen();
        }
        isfullscreen = true;

        fullscreenbutton.innerhtml = iconcompress;
    } else {
        player.classlist.remove('ckin__fullscreen');

        if (document.cancelfullscreen) {
            document.cancelfullscreen();
        } else if (document.mozcancelfullscreen) {
            document.mozcancelfullscreen();
        } else if (document.webkitcancelfullscreen) {
            document.webkitcancelfullscreen();
        } else if (document.msexitfullscreen) {
            document.msexitfullscreen();
        }
        isfullscreen = false;
        fullscreenbutton.innerhtml = iconexpand;
    }
}

function onfullscreen(e, player) {
    var isfullscreennow = document.webkitfullscreenelement !== null;
    if (!isfullscreennow) {
        player.classlist.remove('ckin__fullscreen');
        player.queryselector('.fullscreen').innerhtml = iconexpand;
    } else {
        // player.queryselector('.fullscreen').innerhtml = iconexpand;

    }
}

function addlistenermulti(element, eventnames, listener) {
    var events = eventnames.split(' ');
    for (var i = 0, ilen = events.length; i < ilen; i++) {
        element.addeventlistener(events[i], listener, false);
    }
}