<?php
   if ($_SERVER['QUERY_STRING'] === '') {
      setcookie('x-login', 'my-secret-login-cookie');
   }
?>
<!DOCTYPE html>
<html>
   <head>
      <link rel="stylesheet" href="css/default.css">
      <script src="script/profile.js"></script>
      <script src="script/js_controller.js"></script>
   </head>
   <body>
      <form action="video_main_page.php" method="get">
         <div class="option-container-div">
            <span>Select profile option:</span>
            <select id="profile" name="profile" onchange="onSelectProfile();">
               <option value="range-basic">range basic</option>
               <option value="range-cookie">range cookie</option>
            </select>
         </div>
         <div class="option-container-div">
            <span>Select video file:</span>
            <select id="video" name="video">
               <option value="small_video.mp4">small_video.mp4</option>
               <option value="large_video_01.mp4">large_video_01.mp4</option>
               <option value="large_video_02.mp4">large_video_02.mp4</option>
            </select>
         </div>
         <div class="option-container-div">
            <span>Require cookie?</span>
            <input id="require_cookie" name="require_cookie" type="checkbox">
         </div>
         <fieldset>
            <legend>Custom settings:</legend>
            <div class="option-container-div">
               <span>Enable Range-request support?</span>
               <input id="use_range" name="use_range" type="checkbox">
            </div>
            <div class="option-container-div">
               <span>Chunk size:</span>
               <input id="chunk_size" name="chunk_size" type="number" min="1" value="102400">
               <span>bytes</span>
            </div>
            <div class="option-container-div">
               <span>Use random chunk size?</span>
               <input id="random_chunk_size" name="random_chunk_size" type="checkbox">
            </div>
            <fieldset>
               <legend>Random chunk size settings:</legend>
               <div class="option-container-div">
                  <span>Minimum chunk size:</span>
                  <input id="min_chunk_size" name="min_chunk_size" type="number" min="1" value="1024">
                  <span>bytes</span>
               </div>
               <div class="option-container-div">
                  <span>Maximum chunk size:</span>
                  <input id="max_chunk_size" name="max_chunk_size" type="number" min="1" value="10240">
                  <span>bytes</span>
               </div>
               <div class="option-container-div">
                  <span>Number of steps:</span>
                  <input id="step_number" name="step_number" type="number" min="1" value="5">
               </div>
            </fieldset>
            <div class="option-container-div">
               <span>Target byterate (0 = no-limit):</span>
               <input id="byterate" name="byterate" type="number" min="0" value="0">
               <span>bytes/second</span>
            </div>
         </fieldset>
         <div class="option-container-div">
            <button type="submit">Submit</button>
         </div>
      </form>
      <div id="moved-video-div"></div>
      <?php
         $query_str = $_SERVER['QUERY_STRING'];
         if ($query_str !== '') {
            $timestamp = time();
            $video_request = "get_video.php?{$query_str}&timestamp={$timestamp}";
            $video_path = $_GET['video'];
            echo "<video id=\"php-video\" width=\"400\" height=\"225\" src=\"{$video_request}\" x-curr-video=\"{$video_path}\" controls></video>\r\n";
         }
      ?>
      <div>
         <div class="option-container-div">
            <span>JavaScript video controllers:</span>
            <button class="video-ctrl-btn" onclick="playVideo();">play</button>
            <button class="video-ctrl-btn" onclick="playAndMoveVideo();">play&move</button>
            <button class="video-ctrl-btn" onclick="pauseVideo();">pause</button>
            <button class="video-ctrl-btn" onclick="changeCurrentTime(1);">forward</button>
            <button class="video-ctrl-btn" onclick="changeCurrentTime(-1);">backward</button>
            <button class="video-ctrl-btn" onclick="changeVideo(1);">next</button>
            <button class="video-ctrl-btn" onclick="changeVideo(-1);">prev</button>
         </div>
         <div class="option-container-div">
            <span>Change playback time:</span>
            <input id="skip-time" type="number" min="0" value="10">
            <span>seconds</span>
         </div>
      </div>
   </body>
</html>