<!DOCTYPE html>
<html ng-app="openshot-timeline" ng-controller="TimelineCtrl">
<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/clip.js"></script>
	    <script type="text/javascript" src="js/directives/track.js"></script>
        <script type="text/javascript" src="js/directives/transition.js"></script>
        <script type="text/javascript" src="js/directives/keyframe.js"></script>
        <script type="text/javascript" src="js/directives/misc.js"></script>
        <script type="text/javascript" src="media/js/ui-bootstrap-tpls-1.3.3.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">

        <!-- Inject dynamic theme CSS here -->
        <style ng-bind="ThemeCSS"></style>
</head>
<body tl-body ng-cloak onload="forceDrawRuler()">
		
		<!-- RULER NAME (left of screen) -->
		<div tl-rulertime id="ruler_label">
			<div id="ruler_time" ng-click="rulerTimeClick()">{{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>
			<!-- Ruler is width of the timeline -->
			<div tl-ruler id="ruler" style="width:{{getTimelineWidth(0)}}px;"></div>

			<!-- MARKERS --> 
			<span class="ruler_marker" id="marker_for_{{marker.id}}">
				<span ng-repeat="marker in project.markers track by (marker.id || $index)" id="marker_{{marker.id}}_{{$index}}" ng-click="selectMarker(marker)" ng-right-click="showMarkerMenu(marker.id)" ng-style="{'left': marker.position * pixelsPerSecond + 'px'}" class="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() track by (layer.id || layer.number || $index)" id="track_static_{{layer.number}}" ng-right-click="showTrackMenu(layer.id)" class="track_name" ng-class="getTrackNameStyle(layer.lock)">
				<div class="track_top">
					<div tl-clip-menu class="menu track_menu" ng-mousedown="showTrackMenu(layer.id)"></div>
					 <span class="track_label">{{getTrackName(layer.label, project.layers.length - $index)}}</span>
					 <span ng-if="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)}}px; padding-bottom: 2px;">
				<!-- TRACKS -->
				<div ng-repeat="layer in project.layers.slice().reverse() track by (layer.id || layer.number || $index)" id="track_{{layer.number}}" ng-right-click="showTimelineMenu($event, layer.number)"  class="{{getTrackStyle(layer.lock)}}" style="width:{{getTimelineWidth(0)}}px;">
					<div class="banding-overlay"></div>
					<div class="track-resize-handle"></div>
				</div>
				
				<!-- CLIPS -->
				<div ng-hide tl-clip ng-repeat="clip in project.clips track by (clip.id || $index)" id="clip_{{clip.id}}" ng-click="selectClip(clip.id, true, $event)" ng-dblclick="showProperties()" 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:{{getZindex(clip, 1000, $index)}};">
					<div class="clip_top">
						<div tl-clip-menu class="menu clip_menu" ng-if="!enable_razor" ng-mousedown="showClipMenu(clip.id, $event)" tooltip-enable="!enable_razor" uib-tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400"></div>

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

						<!-- CLIP LABEL -->
						<div class="clip_label" ng-class="getClipLabelStyle(clip)" tooltip-enable="!enable_razor" uib-tooltip="{{clip.title}}" tooltip-placement="bottom" tooltip-popup-delay="400">{{clip.title}}</div>
                        <br class="cleared">
					</div>
					<br class="cleared">

					<div ng-if="!clip.ui.audio_data || (clip.ui.audio_data && clip.ui.audio_data.length <= 1)" class="thumb-container">
						<img class="thumb thumb-start" ng-if="getThumbPath(clip)" ng-src="{{ getThumbPath(clip) }}"/>
					</div>
					<div ng-if="clip.ui.audio_data && clip.ui.audio_data.length > 1" class="audio-container">
						<canvas id="audio_clip_{{clip.id}}" tl-audio height="46px" width="{{canvasMaxWidth((clip.end - clip.start) * pixelsPerSecond)}}px" class="audio"></canvas>
					</div>

                    <!-- CLIP KEYFRAME POINTS -->
                    <div class="point_region" ng-if="clip.selected || hasSelectedEffect(clip)">
                        <img ng-repeat="(point, value) in getKeyframes(clip)"
                             tl-keyframe
                             data-object-type="clip"
                             data-object-id="{{clip.id}}"
                             data-point="{{point}}"
                             ng-click="clickKeyframe(value, clip, point, $event)"
                             id="point_{{clip.id}}_{{point}}_{{$index}}"
                             class="point point_{{ value.interpolation }}"
                             ng-src="{{ value.icon || keyframeIconPaths[value.interpolation] }}"
                             style="left: {{(((point - 1) / (project.fps.num / project.fps.den) - clip.start) * pixelsPerSecond)}}px; opacity: {{value.selected ? 1 : 0.5}};" />
                    </div>
				</div>

				<!-- TRANSITIONS -->
				<div ng-hide tl-transition ng-repeat="transition in project.effects track by (transition.id || $index)" id="transition_{{transition.id}}" ng-click="selectTransition(transition.id, true, $event)" ng-dblclick="showProperties()" 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:{{getZindex(transition, 5000, $index)}};">
					<div class="transition_top">
						<div tl-clip-menu class="transition_menu" ng-if="!enable_razor" ng-mousedown="showTransitionMenu(transition.id, $event)"></div>

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

                    <!-- TRANSITION KEYFRAME POINTS -->
                    <div class="point_region" ng-if="transition.selected">
                        <img ng-repeat="(point, value) in getKeyframes(transition)"
                             tl-keyframe
                             data-object-type="transition"
                             data-object-id="{{transition.id}}"
                             data-point="{{point}}"
                             ng-click="clickKeyframe(value, transition, point, $event)"
                             id="point_{{transition.id}}_{{point}}_{{$index}}"
                             class="point point_{{ value.interpolation }}"
                             ng-src="{{ keyframeIconPaths[value.interpolation] }}"
                             style="left: {{(((point - 1) / (project.fps.num / project.fps.den) - transition.start) * pixelsPerSecond)}}px; opacity: 1;" />
                    </div>
				</div>

			</div>

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

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

		</div>
		
		
		<!-- HIDDEN DEBUG SECTION -->
		<script language="javascript">
			
		</script>
		
		<div ng-if="!Qt" class="gear" ng-click="toggleDebug()">
			<img src="media/images/gear.png" width="40">
		</div>
		
		<div ng-if="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>
