<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>
    Pad.ma: Subtitle n more...
  </title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="player.js"></script>
<script type="text/javascript" src="jquery-ui.js"></script>
<script type="text/javascript" src="staticfuncs.js"></script>
<script type="text/javascript" src="classes.js"></script>
<link rel="stylesheet" href="styles.css" />
<script type="text/javascript">
//init globals
var seekBar;
var textArea;
var Video;
var filePath = false;
var spans;
var videoListener;

$(document).ready(function() {
  textArea = new TextArea("txt");
  $('#saveFile').click(saveFile);
  $('#saveSrt').click(saveSrt);
  $('#addTime').click(function() {
    var timeToAdd = npt2ms($.trim($('#timeToAdd').val()));
    var startNo = parseInt($('#startNo').val());
    var r = textArea.addTime(timeToAdd, startNo);
    $('#addTimeResult').val(r);
    });
  $('#showMore').toggle(function() {
    $(this).text("Show Less Features");
    $('#additionalFeatures').show("fast");
    }, function() {
    $(this).text("Show More Features");
    $('#additionalFeatures').hide("fast");
    });
  $('#saveEncore').click(saveEncore);
  $('#selectFile').click(function() {
    var videoFile = selectFile();
    alert(videoFile);
    filePath = getFileNameSansExt(videoFile);
    var srtTxtFilename = filePath + ".srt.txt";
    var srtFilename = filePath + ".srt";
    var metaFilename = filePath + ".txt";
    if (checkFileExists(srtTxtFilename)) {
      loadSrtTxt(srtTxtFilename);
      } else if (checkFileExists(srtFilename)) {
      loadSrt(srtFilename);
      }
    if (checkFileExists(metaFilename)) {
      loadMeta(metaFilename);
      }
    $('#video').attr("src", "file://" + videoFile);
    document.getElementById("video").load();
    $('#video').one("loadedmetadata", function() {
      $('#selectFileDiv').fadeOut();
      Video = new VideoPlayer();
      Video.init("video");  
//        
//      seekBar = new SeekBar("seekBar"); 
      Video.setDuration(Video.player.duration);  
      $('#insertTc').click(textArea.insertTc);
/*      $('#video').click(function() {
        Video.togglePause();
        });
*/
      $('#video').dblclick(function() {
        textArea.insertTc();
        });
      videoListener = setInterval(Video.listener, 250);
      });
    });
 
  $(document).keyup(function(e) {
    //Esc
    if (e.keyCode == 27 && textArea.hasFocus) {
      Video.togglePause();
      }
    //Ins
    if (e.keyCode == 45) {
      if (!textArea.isTc()) {
        textArea.insertTc();
        }
      }
    //Ctrl - Seek Back
    if (e.keyCode == 17) {
      var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000);
      var currTime = Video.get();
      var newTime = currTime - seekTime;
      Video.set(newTime);
      }
    //Alt - Seek Fwd.
    if (e.keyCode == 18) {
      var seekTime = parseInt(parseFloat($('#seekTime').val()) * 1000);
      var currTime = Video.get();
      var newTime = currTime + seekTime;
      Video.set(newTime);
      }

    //Space - togglePause if no focus on TA
    if (e.keyCode == 32 && textArea.hasFocus == false) {
      Video.togglePause();
      }
    });
  $('#fillMeta').click(function() {
    $('#txtWrapper').hide();
    $('#eventMetadata').show();
    });
  $('#doneMetadata').click(function() {
    $('#eventMetadata').hide();
    $('#txtWrapper').show();
    });
  $('.eventMeta').each(function() {
    var defVal = $(this).attr('data-default');
    $(this).val(defVal);
    $(this).focus(function() {
      if ($(this).val() == $(this).attr("data-default")) {
        $(this).val('');
        }
      }).blur(function() {
      if ($(this).val() == '') {
        $(this).val($(this).attr('data-default'));
        }
      });
    });
  });

function saveFile() {
  var savePath = filePath + ".srt.txt";
  var content = $('#txt').val();
  if (mozillaSaveFile(savePath, content)) {
    alert("saved file at " + savePath);
    } else {
    alert("error saving file");
    }
  }

function saveSrt() {
  var srtPath = filePath + ".srt";
  var content = textArea.toSrt();
  if (mozillaSaveFile(srtPath, content)) {
    alert("export .srt file to " + srtPath);
    } else {
    alert("error exporting srt");
    }
  }

function saveEncore() {
  var encPath = filePath + ".enc.txt";
  var content = textArea.toSrt("enc");
  if (mozillaSaveFile(encPath, content)) {
    alert("saved encore compatible subtitle file at " + encPath);
    } else {
    alert("error creating encore compatible subtitle file");
    }
  }
</script>

</head>
<body>
<div id="wrapper">
  <div id="videoWrapper">
    <div id="selectFileDiv">    
      <button id="selectFile">Select File</button>
    </div>
    <video id="video" src="" controls="true">
      Sorry you need <a href="http://www.mozilla.com/en-US/firefox/all-beta.html">Firefox 3.5 Beta</a> for this to work.
    </video>
    <div id="seekBar">
      
    </div>
    <div id="timeCode">0:00:00.000</div>
    <div id="helpWrapper">
      Shortcuts: <br /><br />
      Esc: Pause / Unpause <br />
      Insert: Insert time-code<br />
      Double-click in Textarea: insert time-code <br />
      Double-click on video: insert time-code<br />
      Double-click on time-code in textarea: Seek video to time-code. <br />
      Ctrl / Alt: Seek back / forward <input id="seekTime" value="1" /> seconds.
    </div>

  </div>
  <div id="txtWrapper">
    <textarea id="txt"></textarea><br /> <br />
    <div id="buttonsWrapper">
<!--       <button id="fillMeta" class="button">Enter Metadata</button> -->
      <button id="saveFile" class="button">Save File</button>
      <button id="saveSrt" class="button">Export SRT</button>
      <button id="saveEncore" class="button">Export to Encore</button>
      <button id="showMore" class="button">Show More Features</button>
    </div>
    <div id="additionalFeatures">
      <div id="addTimeWrap">
        Time to add: <input id="timeToAdd" /><br />
        Start no: <input id="startNo" /> <button id="addTime">Add</button><br />
        <textarea id="addTimeResult"></textarea>
      </div>
    </div>
  </div>
  <div id="eventMetadata">
    <input id="title" data-default="Title" class="eventMeta" /><br />
    <input id="director" data-default="Director" class="eventMeta" /><br />
    <input id="collection" data-default="Collection" class="eventMeta" /><br />
    <input id="source" data-default="Source" class="eventMeta" /><br />
    <textarea id="description" data-default="Event Description" class="eventMeta"></textarea><br />
    Date: <input id="dateYear" data-default="YYYY" class="eventMeta" /> <input id="dateMonth" data-default="MM" class="eventMeta" /> <input id="dateDay" data-default="DD" class="eventMeta" /><br />
    Logged by: <input id="loggedBy" data-default="Your name" class="eventMeta" /><br /><br />
    <button id="doneMetadata" class="button">Done Adding Metadata</button>
  </div>
  </div>
</div>
</body>
</html>