<!DOCTYPE html>
<html ng-app="openshot-timeline">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <META name="author" content="OpenShot Studios, LLC">
        <META name="copyright" content="Copyright (c) 2008-2018 OpenShot Studios, LLC">
        <META name="license" content="GPLv3">
        <link rel="icon" type="image/png" href="../images/openshot.png" />
        <title>OpenShot Timeline</title>
        
        <!-- JQuery & Angular -->
        <link type="text/css" rel="stylesheet" href="media/css/jquery-ui.css" />
        <link type="text/css" rel="stylesheet" href="media/css/ui-darkness/jquery-ui.theme.css" />
        <script type="text/javascript" src="media/js/jquery.js"></script>
        <script type="text/javascript" src="media/js/jquery-ui.js"></script>
        <script type="text/javascript" src="media/js/angular.min.js"></script>
        <script type="text/javascript" src="media/js/angular-animate.min.js"></script>

        <!-- Qt WebChannel support for two-way data bindings -->
        <script type="text/javascript" src="qrc:/qtwebchannel/qwebchannel.js"></script>

        <!-- OpenShot JavaScript Sources -->
        <!--MIXIN_JS_INCLUDE-->
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="js/functions.js"></script>
    	<script type="text/javascript" src="js/controllers.js"></script>
    	<script type="text/javascript" src="js/directives/ruler.js"></script>
    	<script type="text/javascript" src="js/directives/playhead.js"></script>
    	<script type="text/javascript" src="js/directives/track.js"></script>
    	<script type="text/javascript" src="js/directives/clip.js"></script>
    	<script type="text/javascript" src="js/directives/transition.js"></script>
    	<script type="text/javascript" src="js/directives/misc.js"></script> 	
        <script type="text/javascript" src="media/js/ui-bootstrap-tpls-0.7.0.min.js"></script>

        <!-- OpenShot StyleSheets -->
        <link type="text/css" rel="stylesheet" href="media/css/main.css" />
        <link type="text/css" rel="stylesheet" href="media/css/debug.css" />		
        <!-- JQuery & Bootstrap StyleSheets -->
        <link type="text/css" rel="stylesheet" href="media/css/bootstrap.min.css">
</head>
<body tl-body ng-controller="TimelineCtrl" ng-cloak onload="forceDrawRuler()">
		
		<!-- RULER NAME (left of screen) -->
		<div tl-rulertime id="ruler_label">
			<div id="ruler_time">{{playheadTime.hour}}:{{playheadTime.min}}:{{playheadTime.sec}},{{playheadTime.frame}}</div>
		</div>
		<!-- RULER (right of screen) -->
		<div id="scrolling_ruler">
			<!-- PLAYHEAD TOP -->
			<div tl-playhead class="playhead playhead-top" id="playhead" ng-right-click="showPlayheadMenu(project.playhead_position)" style="left:{{project.playhead_position * pixelsPerSecond}}px;">
				<div class="playhead-line-small"></div>
			</div>
			<!-- Ruler is width of the timeline -->
			<div tl-ruler id="ruler" style="width: {{project.duration * pixelsPerSecond}}px;"></div>

			<!-- MARKERS --> 
			<span class="ruler_marker" id="marker_for_{{marker.id}}">
				<img ng-repeat="marker in project.markers" id="marker_{{marker.id}}_{{$index}}" ng-right-click="showMarkerMenu(marker.id)" style="position: absolute; bottom: 0px; left: {{(marker.position * pixelsPerSecond) - 6 }}px;" class="marker_icon" ng-src="media/images/markers/{{ marker.icon }}" draggable="false"/>
			</span>
			<br class="cleared">
			
			<!-- PROGRESS BAR -->
			<canvas id="progress" width="{{canvasMaxWidth(project.duration * pixelsPerSecond)}}px" height="3px"></canvas>
 		</div>
 		<div class="cleared"></div>

		<!-- TRACKS NAMES (left of screen) -->
		<div id="track_controls">
			<div ng-repeat="layer in project.layers.slice().reverse()" id="track_static_{{layer.number}}" ng-right-click="showTrackMenu(layer.id)" class="track_name">
				<div class="track_top">
					<div tl-clip-menu class="track_menu" ng-mousedown="showTrackMenu(layer.id)"></div>
					<span class="track_label">{{getTrackName(layer.label, project.layers.length - $index)}}</span><span ng-show="layer.lock" class="track_lock"></span>
				</div>
			</div>
			<br>
		</div>
		<!-- TRACKS CONTAINER (right of screen) -->
		<div tl-scrollable-tracks id="scrolling_tracks">
			<div id="track-container" tl-track tl-multi-selectable style="width: {{getTimelineWidth(0) - 6}}px; padding-bottom: 2px;">
				<!-- TRACKS -->
				<div ng-repeat="layer in project.layers.slice().reverse()" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0) - 6}}px;">
				</div>
				
				<!-- CLIPS -->
				<div ng-hide tl-clip ng-repeat="clip in project.clips" id="clip_{{clip.id}}" ng-click="selectClip(clip.id, true, $event)" ng-right-click="showClipMenu(clip.id, $event)" class="clip droppable" ng-class="getClipStyle(clip)" style="width:{{(clip.end - clip.start) * pixelsPerSecond}}px; left:{{clip.position * pixelsPerSecond}}px; top:{{getTrackTop(clip.layer)}}px;z-index:{{1000 + $index}};">
					<div class="clip_top">
						<div tl-clip-menu class="clip_menu" ng-show="!enable_razor" ng-mousedown="showClipMenu(clip.id, $event)" tooltip-enable="!enable_razor" tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400"></div>

						<!-- CLIP EFFECTS -->
						<div ng-show="!enable_razor" class="effect-container" id="effects_{{clip.id}}">
							<div class="clip_effects" ng-repeat="effect in clip.effects" id="effect_{{effect.id}}" style="background-color: {{ getEffectColor(effect.type) }};" ng-click="selectEffect(effect.id); $event.stopPropagation();" ng-right-click="showEffectMenu(effect.id); $event.stopPropagation();" tooltip="{{effect.type}} ({{$index+1}}/{{clip.effects.length}})"  tooltip-placement="bottom" tooltip-popup-delay="400">
								{{effect.type[0]}}
							</div>
						</div>

						<!-- CLIP KEYFRAME POINTS -->
						<div ng-repeat="(point, value) in getKeyframes(clip)" id="point_{{clip.id}}_{{point}}_{{$index}}" style="left: {{(((point - 1) / (project.fps.num / project.fps.den) - clip.start) * pixelsPerSecond)}}px;" class="point_region" ng-show="clip.selected "><div class="point_icon"></div></div>

						<!-- CLIP LABEL -->
						<div class="clip_label" ng-class="getClipLabelStyle(clip)" tooltip-enable="!enable_razor" tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400">{{clip.title}}</div>
						<br class="cleared">
					</div>
					<br class="cleared">
					<div ng-show="!clip.show_audio" class="thumb-container">
						<img class="thumb thumb-start" ng-show="getThumbPath(clip)" ng-src="{{ getThumbPath(clip) }}"/>
					</div>
					<div ng-show="clip.show_audio" class="audio-container">
						<canvas tl-audio height="46px" width="{{canvasMaxWidth((clip.end - clip.start) * pixelsPerSecond)}}px" class="audio"></canvas>
					</div>
				</div>

				<!-- TRANSITIONS -->
				<div ng-hide tl-transition ng-repeat="transition in project.effects" id="transition_{{transition.id}}" ng-click="selectTransition(transition.id, true, $event)" ng-right-click="showTransitionMenu(transition.id, $event)" class="transition droppable" ng-class="getClipStyle(transition)" style="width:{{ (transition.end - transition.start) * pixelsPerSecond}}px; left:{{transition.position * pixelsPerSecond}}px; top:{{getTrackTop(transition.layer)}}px;z-index:{{5000 + $index}};">
					<div class="transition_top">
						<div tl-clip-menu class="transition_menu" ng-show="!enable_razor" ng-mousedown="showTransitionMenu(transition.id, $event)"></div>
						<!-- TRANSITION KEYFRAME POINTS -->
						<div ng-repeat="(point, value) in getKeyframes(transition)" id="point_{{transition.id}}_{{point}}_{{$index}}" style="left: {{(((point - 1) / (project.fps.num / project.fps.den) - transition.start) * pixelsPerSecond)}}px;" class="point_region" ng-show="transition.selected "><div class="point_icon"></div></div>

						<!--div class="transition_label">{{transition.title}}</div-->
						<br class="cleared">
					</div>
					<br class="cleared">
				</div>

			</div>

			<!-- FLOATING PLAYHEAD LINE -->
			<div class="playhead playhead-line" style="height: {{ playhead_height }}px; left:{{project.playhead_position * pixelsPerSecond}}px;"></div>

			<!-- SNAPPING HINT LINE -->
			<div ng-show="snapline" class="snapping-line" style="height: {{ playhead_height }}px; left:{{ snapline_position}}px;"></div>

		</div>
		
		
		<!-- HIDDEN DEBUG SECTION -->
		<script language="javascript">
			
		</script>
		
		<div ng-show="!Qt" class="gear" ng-click="toggleDebug()">
			<img src="media/images/gear.png" width="40">
		</div>
		
		<div ng-show="debug" class="debug-window ui-corner-all">
				<div class="debug-text ui-corner-all" style="width: 20%;">PROJECT DATA: <pre>pixels per second: {{pixelsPerSecond}}<br> {{project | json}}</pre></div>
				<div class="debug-text ui-corner-all" style="width: 70%;">ACTIONS:<br><br>
					<div>
						<p>Add Clips:</p>	
						<input type="text" name="numClips" ng-model="numClips" size="5" style="width:100px;" placeholder="# of clips"/>
    					<button ng-click="addClips(numClips)">add clips</button> <br/>
    				
	    				<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
	    				<div>
	    					<p>Scale:</p>	
	    					<input id="scaleVal" ng-model="project.scale" style="width:100px;"><br><br>
	    					<div db-slider></div>
	    				</div>
	    				<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
	    				<div>
							<p>Add Marker:</p>	
							<input type="text" name="markLoc" ng-model="markLoc" size="5" style="width:100px;" placeholder="loc of marker"/>
	    					<button ng-click="addMarker(markLoc)">add marker</button> <br/>
	    				</div>
	    				<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
						<div>
							<p>Add Effect:</p>	
							<input type="text" name="clipNum" ng-model="clipNum" size="5" style="width:100px;" placeholder="clip #"/>
	    					<button ng-click="addEffect(clipNum)">add effect</button> <br/>
	    				</div>
	    				<div style="height:1px;background-color:#cfcfcf;margin:15px;"></div>
						<div>
							<p>Change clip image:</p>	
							<input type="text" name="startImage" ng-model="startImage" size="5" style="width:100px;" placeholder="start clip for #3"/>
	    					<button ng-click="changeImage(startImage)">change img</button> <br/>
	    				</div>
					</div>
					<div class="cleared"></div>
				</div>
		</div>
		<!-- END DEBUG SECTION -->
</body>
</html>
