<?php
include "inc/func.php";

##############################
# Change Scene Array Name
##############################
$scene = sceneData();
$data = $scene['scene-two'];
//echo "<pre>" , print_r($data);
##############################
##############################
?>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><?php echo $data['storyName']; ?></title>
    <?php headerScripts(); ?>
  </head>
  <body>

    <?php globalFeatures(); ?>

    <section id="wrapper">
      <?php optionsPanel(); ?>
      <section id="padding">
        <section id="main">

          <?php homeLink(); ?>

          <div class="story-panel">
            <div class="story-panel-inner <?php echo $data['panelClass']; ?>">
              <h2><?php echo $data['storyName']; ?></h2>
              <p><?php echo $data['storyContent']; ?></p>
            </div>

            <div class="story-panel-divide"></div>

            <div class="story-panel-audio <?php echo $data['panelClass']; ?>">
              <span class="audio-label">Audio</span>
              <audio id="myAudio">
                <source src="audio/two.wav" type="audio/wav">
                  Your browser does not support the audio element.
              </audio>
              <span class="audio-button start" onclick="playAudio()"><img class="audioAction" src="images/icons/play.png"/></span>
              <span class="audio-button stop" onclick="pauseAudio()"><img class="audioActionCus" src="images/icons/stop.png"/></span>
            </div>
          </div>

          <div class="scene-panel">
            <div class="scene-panel-inner">

              <div class="correctImage">
                <img src="<?php echo $data['correctImage'];?>" />
              </div>

              <div class="wrongImage">
                <img src="<?php echo $data['wrongImage'];?>" />
              </div>

              <span id="overImage" data-overlay="<?php rootURL(); ?><?php echo $data['overlayImage']; ?>"></span>
              <canvas class="<?php echo $data['canvasClass']; ?>" id="scratch"></canvas>
            </div>
            <div class="navigation">
              <?php choiceScene($data['id']); ?>
              <br/>
              <?php mainNavigation(); ?>
            </div>
          </div>

        </section>
      </section>
    </section>

    <script>
      var x = document.getElementById("myAudio");
      function playAudio() {
        x.play();
      }
      function pauseAudio() {
        x.pause();
      }
    </script>

  </body>
</html>
