var supportsES6 = function() {
  // https://gist.github.com/bendc/d7f3dbc83d0f65ca0433caf90378cd95
  try {
    new Function("(a = 0) => a");
    return true;
  }
  catch (err) {
    return false;
  }
}();


// Add a full-screen toggle button where supported.
// Version 2.5 07/10/2019
// - Adding cross-browser support using prefixes.


function launchFullWindow(config) {

  "use strict";
  if (!supportsES6) return false;

  // Exit if unsupported
  if (!(
    document.fullscreenEnabled || 
	  document.webkitFullscreenEnabled || 
	  document.mozFullScreenEnabled ||
	  document.msFullscreenEnabled)) return false;

  let cfg = {
    launchObjSelect : '[data-fullScreen]',
    launchBtnClass : 'fullScreen_btn',
    svgClass : 'fullScreen_svg',
    open : {
      icon : 'icon-fullScreen-open',
      extension : '-open',
      label : 'Launch into full screen',
      title : 'Full screen [f, f11]'
    },
    exit : {
      icon : 'icon-fullScreen-exit',
      extension : '-exit',
      label : 'Exit full screen',
      title : 'Exit full screen [f, f11, esc]'
    }
  };

  // Blend the parameter config into the default cfg
  Object.assign(cfg, config);

  const svgData = {
    open : {},
    exit : {}   
  }


  // Get symbols from the SVG definitions in the HTML
  const setSvgData = (_ => {

    const getData = param => {
      const symbol = document.getElementById(cfg[param].icon);
      if (!symbol) return false;
      svgData[param].class = cfg.svgClass;
      svgData[param].icon = cfg[param].icon;
      svgData[param].symbol = symbol.innerHTML;
      svgData[param].viewBox = symbol.getAttribute('viewBox');
    };

    getData('open');
    getData('exit');
  })();


  const _openFullScreen = obj => {
    if (obj.requestFullscreen) {
      obj.requestFullscreen();
    } else if (obj.webkitRequestFullscreen) {
      obj.webkitRequestFullscreen();
    } else if (obj.mozRequestFullScreen) {
      obj.mozRequestFullScreen();
    } else if (obj.msRequestFullscreen) {
      obj.msRequestFullscreen();
    }
  };


  const _exitFullScreen = _ => {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitExitFullscreen) {
      document.webkitExitFullscreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
  };


  const _hasFullScreenElement = _ =>
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement;


  const _instantiateLaunchObj = launchObj => {

    const _getCfg = (param, toOpen) => cfg[toOpen ? 'open' : 'exit'][param];

    const _getSvgString = toOpen => {
      const param = _getCfg('extension', toOpen).substr(1);
      return `<svg class="${svgData[param].class}" aria-hidden="true" viewbox="${svgData[param].viewBox}">${svgData[param].symbol}</svg>`;
    }

    const _setBtnAttr = toOpen => {
      btn.className = cfg.launchBtnClass + _getCfg('extension', toOpen);
      btn.title = _getCfg('title', toOpen);
      btn.setAttribute('aria-label', _getCfg('label', toOpen));
      btn.innerHTML = _getSvgString(toOpen);
    }

    // Check to see if a button already exists in the html
    let btn = launchObj.querySelector('.' + cfg.launchBtnClass);
    if (!btn) {

      // If not, create one
      btn = document.createElement('button');
      launchObj.prepend(btn);
    }
    _setBtnAttr(true);


    const _toggleFullScreen = _ => {
      if (!_hasFullScreenElement()) {
        _openFullScreen(launchObj);
      } else {
        _exitFullScreen();
      }
      btn.focus();
    };


    const _onFullscreenChange = _ => 
      _setBtnAttr(!_hasFullScreenElement());


    {
      btn.addEventListener('click', _toggleFullScreen);

      // Toggle attr this way because esc key is not detected but change is!
    document.addEventListener('fullscreenchange', _onFullscreenChange);
    document.addEventListener('mozfullscreenchange', _onFullscreenChange);
    document.addEventListener('webkitfullscreenchange', _onFullscreenChange);
    document.addEventListener("MSFullscreenChange", _onFullscreenChange);

      // Toggle if the f, or f11, key is pressed
      document.addEventListener('keydown', event => {
        if (event.keyCode === 70 || event.keyCode === 112) {
          _toggleFullScreen();
        }
      });
    }
    
  }

  // Multiple objects to launch
  const objs = document.querySelectorAll(cfg.launchObjSelect);
  for (const obj of objs) {
    _instantiateLaunchObj(obj);
  }

}

// Attaches to any object with data-fullScreen attribute by default.
// Pass in a customised config to overide default settings.
launchFullWindow();

// Specific object(s) by selector
// launchFullWindow( {launchObjSelect : '.fullScreen-3'} );







// (function (window, document) {

//   "use strict";
//   if (!supportsES6) return false;
  
//   // Exit if unsupported
//   if (!(
//     document.fullscreenEnabled || 
// 	  document.webkitFullscreenEnabled || 
// 	  document.mozFullScreenEnabled ||
// 	  document.msFullscreenEnabled)) return false;

//   const cfg = {
//     launchObjId : 'fullScreen',
//     launchBtnClass : 'fullScreen_btn',
//     icon : '#icon-fullScreen',
//     svgClass : 'fullScreen_svg',
//     open : {
//       extension : '-open',
//       label : 'Launch into full screen',
//       title : 'Full screen (f)'
//     },
//     exit : {
//       extension : '-exit',
//       label : 'Exit full screen',
//       title : 'Exit full screen (f)'
//     }
//   };


//   const launchObj = document.getElementById(cfg.launchObjId);
//   if (!launchObj) return false;


//   const _getCfg = (param, toOpen) =>
//     cfg[toOpen ? 'open' : 'exit'][param];


//   const _getSvgString = toOpen => {
//     const ext = _getCfg('extension', toOpen);
//     return `<svg class="${cfg.svgClass + ext}" aria-hidden="true"><use xlink:href="${cfg.icon + ext}" /></svg>`;
//   };

//   const _setBtnAttr = toOpen => {
//     btn.className = cfg.launchBtnClass + _getCfg('extension', toOpen);
//     btn.title = _getCfg('title', toOpen);
//     btn.setAttribute('aria-label', _getCfg('label', toOpen));
//     btn.innerHTML = _getSvgString(toOpen);
//   };


//   let btn;
//   if (!launchObj.querySelector('.' + cfg.launchBtnClass)) {
//     btn = document.createElement('button');
//     _setBtnAttr(true);
//     launchObj.prepend(btn);
//   }



//   const _openFullScreen = obj => {
//     if (obj.requestFullscreen) {
//       obj.requestFullscreen();
//     } else if (obj.webkitRequestFullscreen) {
//       obj.webkitRequestFullscreen();
//     } else if (obj.mozRequestFullScreen) {
//       obj.mozRequestFullScreen();
//     } else if (obj.msRequestFullscreen) {
//       obj.msRequestFullscreen();
//     }
//   };


//   const _exitFullScreen = _ => {
//     if (document.exitFullscreen) {
//       document.exitFullscreen();
//     } else if (document.webkitExitFullscreen) {
//       document.webkitExitFullscreen();
//     } else if (document.mozCancelFullScreen) {
//       document.mozCancelFullScreen();
//     } else if (document.msExitFullscreen) {
//       document.msExitFullscreen();
//     }
//   };


//   const _hasFullScreenElement = _ =>
//     document.fullscreenElement ||
//     document.webkitFullscreenElement ||
//     document.mozFullScreenElement ||
//     document.msFullscreenElement;


//   const _toggleFullScreen = _ => {
//     if (!_hasFullScreenElement()) {
//       _openFullScreen(launchObj);
//     } else {
//       _exitFullScreen();
//     }
//     btn.focus();
//   };


//   const _onFullscreenChange = _ => 
//     _setBtnAttr(!_hasFullScreenElement());



//   {
//     btn.addEventListener('click', _toggleFullScreen);

//     document.addEventListener('fullscreenchange', _onFullscreenChange);
//     document.addEventListener('mozfullscreenchange', _onFullscreenChange);
//     document.addEventListener('webkitfullscreenchange', _onFullscreenChange);
//     document.addEventListener("MSFullscreenChange", _onFullscreenChange);

//     // Also toggle if the f key or f11 is pressed
//     document.addEventListener('keydown', event => {
//       if (event.keyCode === 70 || event.keyCode === 122) {
//         _toggleFullScreen();
//       }
//     });

//   };

// }(window, document));