Image/DIV Element Toggle Fullscreen

Question

The code below is a working example when you click the image it opens webpage browser in fullscreen, HOWEVER I don't know how to make the javascript toggle fullscreen mode when clicking image again.

So the script needs to open full screen mode when clicking image the first time, then exit full screen mode when clicking the same image the second time.

HTML:

    <h1>Click image to toogle fullscreen mode</h1>
    <img id="logo" src="http://i.imgur.com/lPZh57Y.png" alt="logo" />

JavaScript:

(function () {
    var viewFullScreen = document.getElementById("logo");
    if (viewFullScreen) {
       viewFullScreen.addEventListener("click", function () {
           var docElm = document.documentElement;
           if (docElm.requestFullscreen) {
               docElm.requestFullscreen();
           }
           else if (docElm.msRequestFullscreen) {
               docElm.msRequestFullscreen();
           }
           else if (docElm.mozRequestFullScreen) {
               docElm.mozRequestFullScreen();
           }
           else if (docElm.webkitRequestFullScreen) {
               docElm.webkitRequestFullScreen();
           }
       }, false);
   }

  var cancelFullScreen = document.getElementById("logoCONFLICT");
  if (cancelFullScreen) {
     cancelFullScreen.addEventListener("click", function () {
        if (document.exitFullscreen) {
            document.exitFullscreen();
        }
        else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        }
        else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        }
        else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
     }, false);
  }   
})();

Answer 1

A simple solution would be to keep track when you request the full screen & exit full screen calls. And run the appropriate code based on this value. You don't need two separate click listeners for this. Just another if else statement.

<script>
(function () {
    var viewFullScreen = document.getElementById("logo");
    var isFullScreen;

    if(viewFullScreen) {
        viewFullScreen.addEventListener("click", function () {

                    if(!isFullScreen) {

                        var docElm = document.documentElement;
                        if(docElm.requestFullscreen) docElm.requestFullscreen();
                        else if(docElm.msRequestFullscreen) docElm.msRequestFullscreen();
                        else if(docElm.mozRequestFullScreen) docElm.mozRequestFullScreen();
                        else if(docElm.webkitRequestFullScreen) docElm.webkitRequestFullScreen();

                        isFullScreen = true;

                    } else {

                        if(document.exitFullscreen) document.exitFullscreen();
                        else if(document.msExitFullscreen) document.msExitFullscreen();
                        else if(document.mozCancelFullScreen) document.mozCancelFullScreen();
                        else if(document.webkitCancelFullScreen) document.webkitCancelFullScreen();

                        isFullScreen = false;
                    }

                }, false);
    }
})();
</script>

Haven't tested it but should work. A better way would be to detect the fullscreen status initially and listen for the changes as described here. Instead of attempting to keep track of the status yourself.

Hope this helps! Good luck!