<!--   Created at: RPI RCOS 2015: Contact information: raghua@rpi.edu, martij@rpi.edu, metrom@rpi.edu, metroa@rpi.edu -->
<!DOCTYPE html>
<html>
<head> 
<title>Weird Side of YouTube</title>
  <link rel="stylesheet" type="text/css" href="./css/newstyle.css">
  <link href="https://fonts.googleapis.com/css?family=Barrio" rel="stylesheet">
  <style>
  #title {
    text-align: center; 
    font-family: 'Barrio', cursive;
    font-size: 32px;
    font-style: normal;
    font-variant: small-caps;
    font-weight: 100px;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
    color: rgb(240, 240, 240);
  }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
  <script type='text/javascript' src='./js/jQuery.tubeplayer.min.js'></script>
</head>

<body>
 
<div id='navbar'>
  <ul>
    <li class='active'><a href='/'><span>Home</span></a></li>
    <li><a href='/about'><span>About Us</span></a></li>
    <%if (user) { %>
      <%if (user.admin) { %>
        <li><a href='/admin'><span>Admin Panel</span></a></li>
      <% } %>
      <li><a href='/history'><span>View History</span></a></li>
      <li><a href="/logout"> Logout </a></li>
      <li><p> Username: <%= user.username %> </p></li>
    <% } %>
    <%if (!user) { %>
      <li><a href='/login'><span>Log In</span></a></li>
      <li><a href='/register'><span>Register</span></a></li>
    <% } %>
   </ul>
</div>

<div id='title'>
   <h1>Weird Side of YouTube</h1>
</div>
   
<div id='youtube-player-container'>
  <a href="#" onClick='jQuery("#youtube-player-container").tubeplayer("play", document.getElementById("videoID").value)'> 
  </a> 
</div>

<div id="playDiv">
  <a class="playerbutton" onclick="playNextVid();">
        <span>Next</span>
  </a>
</div>

<script type="text/javascript">
        function playNextVid() {
          $.getJSON("./api/getrandomvid", function(vid) {
            console.log(vid);
            jQuery("#youtube-player-container").tubeplayer("play", vid.vidID);
          });
        }

        jQuery("#youtube-player-container").tubeplayer({
  autoPlay: true,
  width: "80%", // the width of the player
  height: 550, // the height of the player
  allowFullScreen: "true", // true by default, allow user to go full screen
  initialVideo: "<%= videoID %>", // the video that is loaded into the player
  preferredQuality: "default",// preferred quality: default, small, medium, large, hd720
  onPlay: function(id){}, // after the play method is called
  onPause: function(){}, // after the pause method is called
  onStop: function(){}, // after the player is stopped
  onSeek: function(time){}, // after the video has been seeked to a defined point
  onMute: function(){},
  onPlayerEnded: function(){
    playNextVid();
        },
  onPlayerPlaying: function(){
    var theatrebox = document.querySelector("#theatre-box");
    var title = document.querySelector("#title");
    title.style.visibility = "visible";
  }, // after the player is muted
  onUnMute: function(){}, // after the player is unmuted
        // Error State Specific Functionality
  onErrorNotFound: function(){playNextVid();}, // if a video cant be found
  onErrorNotEmbeddable: function(){playNextVid();}, // if a video isnt embeddable
  onErrorInvalidParameter: function(){playNextVid();} // if we've got an invalid param
});</script>

</body>


</html>
