var fullScreenBtn;
var exitFullScreenBtn;

function onFullScreenChange() {
    if (document.fullscreenElement || document.webkitFullscreenElement ||
        document.mozFullScreenElement || document.msFullscreenElement) {

        $(fullScreenBtn).hide();
        $(exitFullScreenBtn).show();
    } else {
        $(fullScreenBtn).show();
        $(exitFullScreenBtn).hide();
    }
}

$(function () {
    if (mw.config.get('wgIsArticle')) {
        var fullScreenIcon = new OO.ui.IconWidget({ icon: 'fullScreen' });
        var exitFullScreenIcon = new OO.ui.IconWidget({ icon: 'exitFullscreen' });

        fullScreenBtn = isekai.bottomNav.addButton({
            id: 'fullscreen',
            label: mw.msg('isekai-function-btn-fullscreen'),
            icon: fullScreenIcon.$element[0],
            priority: 60,
            onClick: function() {
                if (document.documentElement.requestFullscreen) {
                    document.documentElement.requestFullscreen();
                } else if (document.documentElement.webkitRequestFullscreen) {
                    document.documentElement.webkitRequestFullscreen();
                } else if (document.documentElement.mozRequestFullScreen) {
                    document.documentElement.mozRequestFullScreen();
                }
            }
        });

        exitFullScreenBtn = isekai.bottomNav.addButton({
            id: 'exit-fullscreen',
            label: mw.msg('isekai-function-btn-exit-fullscreen'),
            icon: exitFullScreenIcon.$element[0],
            priority: 60,
            onClick: function() {
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitExitFullscreen) {
                    document.webkitExitFullscreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                }
            }
        });
        
        $(exitFullScreenBtn).hide();

        document.addEventListener('fullscreenchange', onFullScreenChange);
    }
});