<html>

<head>
  <link rel="stylesheet" type="text/css" href="/static/css/colorbox.css/" />
  <script type="text/javascript" src="/static/js/jquery.js"></script>
  <script type="text/javascript" src="/static/js/jquery.colorbox-min.js"></script>
  <script type="text/javascript" src="/static/js/jquery.Srt.js"></script>
  <script type="text/javascript">


$(document).ready(function() {
  var padmaId = 'Vsmpvstz';
  var player = document.getElementById("player"); 
  $('.playBtn').colorbox({width: '700px', height: '500px', inline: true, href: '#playerWrap'});
  $().bind('cbox_closed', function() {
    alert("closed");
    });
  $('#showDesc').click(function() {
    $('#transcript').fadeOut();
    $('#description').fadeIn();
    });
  $('#showTrans').click(function() {
    $('#description').fadeOut();
    $('#transcript').fadeIn();
    });
  $('.srt').srt();
  });


  </script>

<style type="text/css">
#hidden {
  display: none;
  }


#playerWrap {
  position: relative;
  }

#player {
  width: 400px;
  height: 300px;
  position: relative;
  top: 0px;
  left: 170px;
  margin-top: -20px;
  }

#cboxContent {

  }

#description {
  display: none;
  }
</style>
</head>


<body>
  <div id="wrapper">
    <a class="playBtn" href="#">
      Show player
    </a>
   
    <div id="hidden">
      <div id="playerWrap">
        <video id="player" src="http://pad.ma/v/320/Vdy5qr4j.ogv" controls="true">
        </video>

        <div id="transcript">
          <div id="srtTranscript" class="srt" data-video="player" data-srt="/static/images/TestTranscript.srt/">

          </div>
          <button id="showDesc">Show Description</button>
        </div>

        <div id="description">
          <div id="srtDescription" class="srt" data-video="player" data-srt="/static/images/TestDescription.srt/">

          </div>
          <button id="showTrans">Show Transcript</button>
        </div>

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

</body>

</html>
