<!-- @import "/kitparts/head.html" -->


    <!-- @import "/app/nav/components/nav.html" -->
    <div class="container-fluid">
      <!-- @import "/app/settings/components/settings.html" -->
      <div class="row">
          <!-- @import "/app/breadcrumb/components/breadcrumb.html" -->
          <!-- @import "/app/portfolio/components/portfolio.html" -->
      </div>
      <div class="row">
          <div class="col-12">

              <div class="scadacard level1" id="monitorwrapper">
              <!-- @import "/app/backlink/components/back.html" -->
                              <!-- @import "/app/filterindicator/components/filterindicator.html" -->

                  <!-- @import "/app/monitor/components/drillcontainer_park.kit" -->
              </div>
          </div>
      </div>
  </div>


<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <i class="icon-close" data-dismiss="modal" aria-label="Close"></i>
        <span class="is-active"></span>
        <span></span>
        <span></span>
      </div>
      <div class="modal-bodies">
        <div class="modal-body modal-body-step-3 is-showing">
          <div class="text-center">
            <div class="title">
              <h3>Welcome to the OneView Guide</h3>
              A step by step guide to help you get started with OneView 4
            </div><img src="guide.jpg" style="width:100%">
            <div class="modal-btn-next">Next</div>
          </div>
        </div>
        <div class="modal-body modal-body-step-1 ">
          <div class="title">
            <h3>Event & Alert overview</h3>
            Learn how to view and acknowledge events and alerts.
          </div>
          <img src="play.png" class="playbutton" onclick="playPause()" />

          <video id="video1" style="width:100%;" controls>
            <source src="Comp1.mp4" type="video/mp4">
          </video>
          <div class="text-center">
              <div class="modal-btn-prev">Previous</div>
            <div class="modal-btn-next">Next</div>
          </div>
        </div>
        <div class="modal-body modal-body-step-2">
          <div class="title">
            <h3>Live Data</h3>
            Learn how to view live data through tags and tag groups.
          </div>
          <img src="play.png" class="playbutton" onclick="playPause()" />
          <video id="video2" style="width:100%;" controls>
            <source src="Guide_live_data.mp4" type="video/mp4">
          </video>
          <div class="text-center">
              <div class="modal-btn-prev">Previous</div>

            <div class="modal-btn-next" data-dismiss="modal" aria-label="Close">Close</div>
          </div>

        </div>

      </div>
    </div>
  </div>
</div>
</div>

<!-- partial -->
<link rel="stylesheet" href="./style.css">
<!--
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>-->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>
<script src="./script.js"></script>
<script type="text/javascript">
  $(window).on('load', function () {
    $('#myModal').modal('show');
  });

  var myVideo = document.getElementById($("body").find("video").attr("id"));
  console.log(myVideo);

  $(".modal-btn-next").click(function () {
    myVideo = document.getElementById($(".is-showing").find("video").attr("id"));
    console.log(myVideo);
  });


  function playPause() {
    myVideo.play();
    if (myVideo.requestFullscreen) {
      myVideo.requestFullscreen();
    } else if (myVideo.mozRequestFullScreen) {
      myVideo.mozRequestFullScreen();
    } else if (myVideo.webkitRequestFullscreen) {
      myVideo.webkitRequestFullscreen();
    } else if (myVideo.msRequestFullscreen) {
      myVideo.msRequestFullscreen();
    }
  }

  myVideo.onplay = function () {
    //playPause();
    console.log("play clicked");
    if (myVideo.requestFullscreen) {
      myVideo.requestFullscreen();
    } else if (myVideo.mozRequestFullScreen) { /* Firefox */
      myVideo.mozRequestFullScreen();
    } else if (myVideo.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
      myVideo.webkitRequestFullscreen();
    } else if (myVideo.msRequestFullscreen) { /* IE/Edge */
      myVideo.msRequestFullscreen();
    }
  };

  if (document.addEventListener) {
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', exitHandler, false);
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
  }

  function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
      console.log("exited")
      myVideo.pause();
    }
  }

</script>



<!-- @import "/kitparts/end.html" -->