<% my $miss = $misses->{$id} || &subs::random_string_creator(25,"Aa"); %>
<% my $app = $c->param('app_name'); %>
<% my $timestamp = &subs::rightNow(); %>
<div id="neighbour_media"></div>
<style>
	#<%= $miss %>_speed {
		position:absolute;
		appearance: none;
		height: 30px;
		width: 130px;
		bottom: 1px;
		left: 65px;
		border: solid;
		border-radius: 5px;
		border-width: 3px;
		background-color:transparent;
		color: black;
		outline: none;
	  vertical-align: middle;
		background-image: url('/images/studio/ruler.png');
	}
	#<%= $miss %>_position {
		position:absolute;
		bottom:95px;
		left: 0px;
		width:98%;
		height:20px;
	}
	#<%= $miss %>_loop_start {
		position:absolute;
		bottom:1px;
		left: 220px;
	}
	#<%= $miss %>_loop_end {
		position:absolute;
		bottom:1px;
		left: 270px;
	}
	#<%= $miss %>_snapshot {
		position:absolute;
		bottom: 1px;
		left: 1px;
	}
	#<%= $miss %>_back {
		position: absolute;
		left: 220px;
		bottom: 55px;
	}
	#<%= $miss %>_forward {
		position: absolute;
		left: 270px;
		bottom: 55px;
	}
	#<%= $miss %>_full_screen {
		position:absolute;
		left: 60px;
		bottom: 55px;
	}
	#music_list_view {
		position:absolute;
		left: 95px;
		bottom: 55px;
	}
	#music_shuffle {
		bottom:  1px;
		left: 320px;
		position:absolute;
	}
	#music_repeat {
		left: 320px;
		bottom:55px;
		position:absolute;
	}
	#<%= $miss %>_add {
		position:absolute;
		left: 1px;
		bottom: 55px;
	}
	#<%= $miss %>_jog_wheel_frame {
		position:absolute;
		right: 10px;
		bottom: 0px;
		height: 90px;
		width: 90px;
	}
	#<%= $miss %>_jog_wheel {
		width: 100%;
		height: 100%;
	}
	#<%= $id %>_full_title {
		right: 130px;
		bottom: 1px;
		font-size: 16px;
		position:absolute;
		color: yellow;
		width: 20%;
		height: 100px;
		vertical-align:center;
	}
	#<%= $id %>_time_display {
		position:absolute;
		left: 145px;
		bottom:70px;
		font-size: 24px;
		color: yellow;
	}
	#<%= $id %>_media_information {
		position:absolute;
		left: 155px;
		bottom: 52px;
		font-size: 14px;
		color: yellow;
	}
	#<%= $id %>_mark_information {
		position:absolute;
		left: 150px;
		bottom: 30px;
		font-size: 20px;
		color:yellow;
	}
</style>

<div id="<%= $miss %>_container" class="<%= $id %>_container" style="width:100%;background-color: black;display:block;">
	<% if ($c->param('contents')) { %>
		<%== $c->param('contents') %>
		<script> $('#<%= $id %>').addClass('<%= $miss %>');</script>
	<% } else { %>
		<video autoplay class="media_out <%= $miss %>" id="<%= $id %>" miss="<%= $miss %>" <% if ($source ne 'music') { %> muted <% } %> thumb_style="border:solid;border-radius:7px;border-width:5px;width:30%;right:10px;bottom:120px;position:absolute;" 
			big_style="max-height:100%;height:100%;width:100%;object-fit:contain;<% if ($source eq 'music') { %>top:10px;position:absolute;<% } %>" style="max-height:100%;width:100%;<% if ($source eq 'music') { %>top:103px;position:absolute;<% } %>"></video>
	<% } %>
	<img style="display:none;width:80%;height:80%;top:10%;left:10%;;left:10%;position:absolute;" id="music_album_cover">
	<div class="media_controls" id="<%= $miss %>_controls" style="background-color:black;opacity:1;position:absolute;bottom:0px;height:110px;width:100%;">
		<% if ($source eq 'music') { %>

		<% } %>
		<input id="<%= $miss %>_speed" class="<%= $miss %> speed hover" type="range" step=".1" min="0.1" max="4" value="1" width="100%" height="50">
		<input id="<%= $miss %>_position" class="<%= $miss %> hover" value="0" type="range" step=".1" min="0" max="100" width="100%">
		<img id="<%= $miss %>_snapshot" src="/images/decipherable/gallery.png" class="little_thumb <%= $miss %> hover">
		<img id="<%= $miss %>_full_screen" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb hover" src="/images/studio/green screen.png">
		<img id="<%= $miss %>_back" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb hover last_chapter" src="/images/studio/back.png">
		<img id="<%= $miss %>_forward" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb hover next_chapter" src="/images/studio/forward.png">
		<img id="<%= $miss %>_add" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb hover" src="/images/studio/plus.png">
		<img id="<%= $miss %>_loop_start" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb loop_control hover"  loop_control="start" src="/images/make believe/start.png">
		<img id="<%= $miss %>_loop_end" timestamp="<%= $timestamp %>" class="<%= $miss %> little_thumb loop_control hover" loop_control="end" src="/images/make believe/end.png">
		<img id="<%= $miss %>_position_preview" style="display:none;" class="huge_thumb">
		<span id="<%= $miss %>_position_preview_info" style="display:none;" class=""></span> 
		<span id="<%= $miss %>_jog_wheel_frame" style="" class=" hover">
			<img id="<%= $miss %>_jog_wheel" class="<%= $miss %> jog_wheel" src="/images/studio/jog wheel.png">
			<span id="<%= $miss %>_jog_wheel_centre" style="width:1px; height: 1px;" ></span>
		</span>
		<span id="<%= $id %>_time_display" style="">
			0:00
		</span>
		<span id="<%= $id %>_mark_information">

		</span>
		<span id="<%= $id %>_media_information">

		</span>
		<span id="<%= $id %>_full_title"></span>
		<% if ($source eq 'music') { %>
			<img src="/images/decipherable/list.png" class="little_thumb hover" id="music_list_view">
			<img src="/images/studio/shuffle.png" enabled="<%= $crate->{'settings'}->{'shuffle'} %>" id="music_shuffle" class="little_thumb music_shuffle shuffle hover">
			<img src="/images/studio/repeat.png" enabled="<%= $crate->{'settings'}->{'repeat'} %>" id="music_repeat" class="little_thumb music_repeat repeat hover">
		<% } %>
	</div>
</div>
<script>

</script>
<script>
	var v = document.getElementById('<%= $id %>');
	v.lastPositionPreview = Date.now();
	if (misses['<%= $id %>'] != '<%= $miss %>') {
		console.log(misses);
		misses['<%= $id %>'] = '<%= $miss %>';
		$('#<%= $id %>_script').attr('loaded', 'yes');
		$(document).on('change mousemove touchmove', '#<%= $miss %>_speed', function() {
			var speed = numeral($(this).val()).value();
			var v = document.getElementById('<%= $id %>');
			v.playbackRate = speed;
		});
		$(document).on('dblclick', '#<%= $miss %>_speed', function() {
			$(this).val(1);
			var v = document.getElementById('<%= $id %>');
			v.playbackRate = 1;
		});
		<%= $miss %>VideoInterval();
		function <%= $miss %>VideoInterval() {
			var <%= $id %>_interval;
			var v = document.getElementById('<%= $id %>');
			if (windowPhoneChecker()) {
				$('#<%= $miss %>_jog_wheel_frame').hide();
			}
			clearInterval(vidControls['<%= $id %>_video_interval']);
			v.fps = { average: 0, instances: [], measure: 3, quality: { instant: 0 } };
			clearInterval(vidControls['<%= $id %>_video_interval']);
			vidControls['<%= $id %>_video_interval'] = setInterval(function() {
				if ($('#<%= $id %>').length == 0) { //!$('.<%= $miss %>_container').closest('.wind').is(':visible')) {
					clearInterval(vidControls['<%= $id %>_video_interval']);
					misses['<%= $id %>'] = null;
				}
				var v = document.getElementById('<%= $id %>');
				if (v.state == 1) {
					var speed = numeral($('#<%= $miss %>_speed').val()).value();
					var fps = v.fps.quality;
					v.fps.quality = v.getVideoPlaybackQuality();
					v.fps.quality.instant = Date.now();
					var vid = $('#<%= $id %>');
					if (fps.instant != 0) {
						if (v.fps.quality.totalVideoFrames == 0) {
							<% if ($source eq 'music') { %>
							//	$('#music_theatre').hide();
							<% } else { %>
								$('#<%= $id %>').closest('.wind').hide();
							<% } %>
						}
						else {
							var creation = v.fps.quality.instant - fps.instant;
							var frames = v.fps.quality.totalVideoFrames - fps.totalVideoFrames;
							v.fps.instances.unshift(numeral(frames / creation * 1000 / speed).value());
							var fps_total = 0;

							$.each(v.fps.instances, function(i,v) {
								fps_total = v + fps_total;
							});
							if (v.fps.instances.length > v.fps.measure) {
								v.fps.average = numeral(fps_total / v.fps.instances.length).format('0.00');
								$('#<%= $id %>_media_information').html(v.fps.average);
								
								v.fps.instances.pop();
							}
							$('#<%= $id %>').closest('.wind').show();
						}
					}
					if (vid.length == 0) {
						console.log('clearing');
						clearInterval(vidControls['<%= $id %>_video_interval']);
					}
					if (vidControls['<%= $id %>']) {
						var markPosition = 0;
					//	console.log(vidControls['<%= $id %>']);
						$.each(vidControls['<%= $id %>'], function(i,vr) {
					//		console.log(i + ' ' + v.currentTime + ' ' + vr);
							if (v.currentTime >= vr) {
								markPosition = i + 1;
							}
						});
						$('#<%= $id %>_mark_information').html(markPosition + '/' + vidControls['<%= $id %>'].length);
					}
					if (v.currentTime > vid.attr('loop_end')) {
						v.currentTime = vid.attr('loop_start') || 0;
					}
					$('#<%= $miss %>_position').val(v.currentTime / v.duration * 100);
					$('#<%= $id %>_time_display').text(numeral(v.currentTime).format('00:00:00'));
					if ($('#music').width() > 640) {
						var width = Math.abs(numeral($('#<%= $miss %>_jog_wheel').css('left')).value() - numeral($('#<%= $miss %>_forward').css('left') ).value() + 60);
						console.log(width);
						$('#<%= $id %>_full_title').text($('.playing').find('.full_title').text()).css({ 
							'width': width,
							'font-size': ($('#music').width() / 50),
						//	'left': numeral($('#<%= $miss %>_forward').css('left') + 60).value()
						}).show();
					}
					else {
						$('#<%= $id %>_full_title').hide();
					}
				}
			}, 1000);
		}
		var <%= $miss %>Tools = { toolbarTimeout: 0, lastX: 0, lastY: 0 };
		$(document).on('mousemove, mouseenter', '#<%= $id %>, #music, #music_album_cover, #<%= $miss %>_controls', function() {

			$('#<%= $miss %>_controls').fadeIn();
			<% if ($source eq 'music') { %>
				$('#interface').css({ 'z-index': ($('.wind[app="music"]').css('z-index') + 1) }).fadeIn();
			<% } %>

			$('#<%= $id %>').css({'cursor': 'auto'});
			clearInterval(<%= $miss %>Tools['toolbarTimeout']);
			<%= $miss %>Tools['toolbarTimeout'] =setInterval(function() {
				if ($('#<%= $id %>').attr('theatre_mode') == 'on' || '<%= $id %>' != 'video') {
					var mouse = mouse_position();
					var el = document.elementsFromPoint(mouse.x,mouse.y);	
					var seen = 0;
					$('#<%= $id %>').css({'cursor': 'none'});
					$.each(el, function(i,v) {
						if (<% if ($id eq 'video') { %> $(v).attr('id') == 'interface' || <% } %> $(v).attr('id') == '<%= $miss %>_controls') {
							seen = 1;
						}
						else if ($(v).attr('id') == '<%= $id %>' && seen == 0) {
							if (mouse.lastX == mouse.x && mouse.lastY == mouse.y &&  $(v).attr('id') != '<%= $miss %>_controls') {
								seen = 0;
								$('#<%= $id %>').css({'cursor': 'none'});
							}
							else {
								seen = 1;
							}
						}
					});
					if (seen == 0) {
						$('#<%= $miss %>_controls').fadeOut();
						<% if ($id == 'video') { %>
							$('#interface').fadeOut('slow'); 
						<% } %>
						clearInterval(<%= $miss %>Tools['toolbarTimeout']);
					}
				}
				else {
					clearInterval(<%= $miss %>Tools['toolbarTimeout']);
				}
			},3000);
		});

		$(document).on('click', '#<%= $miss %>_snapshot', function() {
			var timestamp = Date.now();
			var v = document.getElementById('<%= $id %>');
			var canvas = document.createElement('canvas');
			var height = $('#<%= $id %>').height();
			var width = $('#<%= $id %>').width();
			canvas.height = height;
			canvas.width = width;
			canvas.getContext('2d').drawImage(v, 0, 0, width, height);
			var snapshot = canvas.toDataURL('image/png');

			var apper = $('.wind')[$('.wind').length - 1];
			var window_app = topWindow('<%= $app || 'video' %>') || $('#search').val();
			console.log(window_app + ' <%= $app %>');
			var app_name = window_app || <% if ($c->param('app') eq 'video') { %>musicTitleMaker()<% } else { %>"<%= $app %>"<% } %>;

			$.ajax({
				url: '/manager/snapshot_save',
				type: 'POST',
				data: { 
					timestamp: timestamp,
					snapshot: snapshot,
					app: app_name
				},
				success:function(response) {
					console.log(response);
				}
			});
		});
		if (!windowPhoneChecker()) {
			var <%= $miss %>_jw_deg =  0;
			var <%= $miss %>_last = 'out';
			$(document).on('touchmove mousemove', '#<%= $miss %>_jog_wheel', function(e) {
				e.preventDefault();			e.preventDefault();
				var j = $(this);

			//	var jc = $('<%= $miss %>_jog_wheel_centre');
				var jc = j.closest('.jog_wheel_frame').find('.jog_wheel_centre');
				if (e.which === 1 || e.originalEvent.type == 'touchmove') {
					var x = e.originalEvent.clientX;
					var y = e.originalEvent.clientY;
					if (e.originalEvent.targetTouches) {
						x = e.originalEvent.targetTouches[0].clientX;
						y = e.originalEvent.targetTouches[0].clientY;
					}
					var middle_x = numeral(jc.offset().left + (jc.width() / 2)).value();
					var middle_y = numeral(jc.offset().top + (jc.height() / 2)).value();
					var deltaX = middle_x - x;
					var deltaY = middle_y - y;
					var rad = Math.atan2(deltaY, deltaX); 
					var deg = rad * (180 / Math.PI) - 90;
					var diff = 0;
					if (<%= $miss %>_last == 'in') {
						diff = (deg - <%= $miss %>_jw_deg);
						
					}
					<%= $miss %>_jw_deg = (<%= $miss %>_jw_deg + diff);

					$('#<%= $miss %>_jog_wheel').css({'rotate': <%= $miss %>_jw_deg + 'deg' });

					var v = document.getElementById('<%= $id %>');
					v.currentTime = v.currentTime + diff / 10 * $('#<%= $miss %>_speed').val();

				$('<%= $miss %>_time_display').text(numeral(v.currentTime).format('00:00:00.0000'));
					<%= $miss %>_last = 'in';
				}
			});
			$(document).on('mouseout touchend mouseup', '#<%= $miss %>_jog_wheel,#<%= $id %>', function() {
				<%= $miss %>_last = 'out';
			});
			$(document).on('mousewheel', '#<%= $miss %>_jog_wheel,#<%= $id %>', function(e) {
				var j = $('#<%= $miss %>_jog_wheel');
				var mvmt = numeral(e.originalEvent.wheelDelta).value();

				var diff = numeral(mvmt / 30).value() ;
				<%= $miss %>_jw_deg = (<%= $miss %>_jw_deg + diff);

				$('#<%= $miss %>_jog_wheel').css({'rotate': <%= $miss %>_jw_deg + 'deg' });

				var v = document.getElementById('<%= $id %>');
				var currentTime = v.currentTime + diff / 10 * $(this).closest('.wind').find('.speed').val();
				console.log(currentTime);
				v.currentTime = currentTime;
				$('<%= $miss %>_time_display').text(numeral(v.currentTime).format('00:00:00.0000'));
			});
			$(document).on('click', '#<%= $miss %>_jog_wheel, #<%= $id %>', function() {
				var v = document.getElementById('<%= $id %>');
				if (v.state == 0) {
					v.play();
					v.state = 1;
					$('#play_logo').attr('src', '/icons/pause.jpg');
				}
				else {
					v.pause();
					v.state = 0;
					$('#play_logo').attr('src', '/icons/play.jpg');
				}
			});
		}
		$(document).on('dblclick', '#<%= $id %>', function() {
			var v = document.getElementById('<%= $id %>');
			v.requestFullscreen();
		});

		$(document).on('click', '.loop_control', function() {
			var a = $(this);
			var loop_control = a.attr('loop_control');
			var v = document.getElementById('<%= $id %>');
			var vid = $('#' + '<%= $id %>');
			var timestamp = Date.now();
			if (a.attr('timestamp') < timestamp - 100) {
				a.attr('timestamp', timestamp);
				if (a.attr('armed') == 'yes') {
					a.attr('armed','no');
					a.css({'background-color': ''});
					vid.removeAttr('loop_' + loop_control);
				}
				else {
					a.attr('armed', 'yes');
					a.css({'background-color': 'yellow'});
					vid.attr('loop_' + loop_control, v.currentTime);
				}
			}
		});

		$(document).on('click','#<%= $miss %>_add', function() {
			var v = document.getElementById('<%= $id %>');
			if(!vidControls['<%= $id %>']) { vidControls['<%= $id %>'] = [] };
			var seen = 0;
			$.each(vidControls['<%= $id %>'], function(ir,vr) {
				if (v.currentTime == vr) {
					seen = ir;
				}
			})
			if (seen == 0) {
				vidControls['<%= $id %>'].push(v.currentTime);
			}
			else {
				vidControls['<%= $id %>'].splice(seen,1);
			}
			vidControls['<%= $id %>'] = vidControls['<%= $id %>'].sort(function(a,b) {
				return a - b;
			});
		});

		$(document).on('click', '#<%= $miss %>_back, #<%= $id %>_back', function() {
			var a = $('#<%= $miss %>_back');
			console.log(a);
			var v = document.getElementById('<%= $id %>');
			var timestamp = Date.now();
			var bestMatch = 0;
			var bestMark = 0;
			if (a.attr('timestamp') < timestamp - 100) {
				a.attr('timestamp',timestamp);
				console.log(timestamp);
				var seen = 0;
				console.log('<%= $id %>' + ' ' + v.currentTime);
				$.each(vidControls['<%= $id %>'], function(i,vr) {
					vr = numeral(vr).value();
					if (v.currentTime >= (vr + 1.01)) {
						if (vr >= bestMatch) {
							bestMatch = vr;
							bestMark = i;
							seen = 1;
						}

					}
				});
				if (vidControls['<%= $id %>'] && bestMatch >= 0) {
					v.currentTime = bestMatch;
					bestMark = 0;
				}
				else if (seen == 0) {
					v.currentTime = 0;

				}
			}
			console.log(bestMatch + ' ' + bestMark);
			$('#<%= $id %>_mark_information').html(bestMark + '/' + vidControls['<%= $id %>'].length);
		});

		$(document).on('click', '#<%= $miss %>_forward, <%= $id %>_forward', function() {
			var a = $('#<%= $miss %>_forward');
			var v = document.getElementById('<%= $id %>');
			var timestamp = Date.now();
			var seen = 0;
			var bestMatch = v.duration;
			var bestMark = vidControls['<%= $id %>'].length;
			if (a.attr('timestamp') < timestamp - 100) {
				a.attr('timestamp', timestamp);
				console.log('<%= $id %>' + ' ' + v.currentTime);
				$.each(vidControls['<%= $id %>'], function(i,vr) {
					vr = numeral(vr).value();
					if (v.currentTime <= (vr - .01)) {
						if (vr <= bestMatch) {
							bestMatch = vr;
							bestMark = i;
						}
					}
				});
				if (vidControls['<%= $id %>'] && bestMatch < v.duration) {
					v.currentTime = bestMatch;

				}
			}
			$('#<%= $id %>_mark_information').html(bestMark + '/' + vidControls['<%= $id %>'].length);
		});

		$(document).on('click', '#<%= $miss %>_full_screen', function() {
			var a = $(this);
			$('#<%= $id %>').show();
			var v = document.getElementById('<%= $id %>');
			var timestamp = Date.now();
			if (a.attr('timestamp') < timestamp - 100) {
				v.requestFullscreen();
			}
		});

		$(document).on('change mousedown mouseup touchmove click', '#<%= $miss %>_position', function(e) {
			var movable = 1;
			if (e.type == 'mousemove' && e.buttons == 0) {
				movable = 0;
			}
			if (movable == 1) {
				var val = $(this).val();
				var v = document.getElementById('<%= $id %>');
				v.currentTime = (v.duration * (val / 100));
			}
		});
		$(document).on('hover mousemove mouseover touchmove', '#<%= $miss %>_position', function(e) {
			var vid = $('#<%= $id %>');
			console.log(e);
			var width = $(this).width();
			var val = $(this).val();
			var x = e.originalEvent.offsetX;
			var allowedTime = Date.now();
			allowedTime = allowedTime - 200;
			var h = $('#<%= $miss %>_position_preview').height();
			var w = $('#<%= $miss %>_position_preview').width();
			var wl = numeral($(this).closest('.wind').css('left')).value();
			var wr = ($(window).width() - numeral($(this).closest('.wind').css('right')).value());
			var m = mouse_position();
			var left = (m['x'] - (w / 2));
			if ((m['x'] + (w / 2)) > wr) {
				left = (wr - w);
			}
			if ((left) < wl) {
				left = (wl);
			}
			var top = m['y'] - h - 10;
			
			var v = document.getElementById('<%= $id %>');
			clearTimeout(v.positionPreviewHiderTimeout);
			clearTimeout(v.positionPreviewTimeout);
			$('#<%= $miss %>_position_preview').css({ 'position': 'fixed', 'left': left, 'top': top, opacity: 3 });
			$('#<%= $miss %>_position_preview_info').css({ 'position': 'fixed', 'height': '23px', 'background-color':'black', 'color': 'yellow', 'left': left, 'top': (top - 20), opacity: 3 });
			if (vid.attr('type') == 'video') {
				if (v.lastPositionPreview <= allowedTime) {
					v.lastPositionPreview = Date.now();
					var time = (v.duration * (x / width));
					console.log(v.duration);
					var src = v.src + '&thumb=ya&position=' + time;
					$('#<%= $miss %>_position_preview').attr('src', src).show();
					$('#<%= $miss %>_position_preview_info').text(numeral(time).format('00:00:00')).show();
				}
				v.positionPreviewTimeout = setTimeout(function() {
					var time = (v.duration * (x / width));
					var src = v.src + '&thumb=ya&position=' + time;
					$('#<%= $miss %>_position_preview').attr('src', src).show();
					$('#<%= $miss %>_position_preview_info').text(numeral(time).format('00:00:00')).show();
				},100);
			}
		});
		$(document).on('mouseout', '#<%= $miss %>_position', function(e) {
			clearInterval(v.positionPreviewTimeout);
			$('#<%= $miss %>_position_preview').hide();
			$('#<%= $miss %>_position_preview_info').hide();
		});
		<% if ( $id eq 'video' ) { %>
			$(document).on('keydown', function(e) {
				console.log(e);
				if (!$(e.target).is('input') && !$(e.target).is('textarea') && e.ctrlKey == false) {
					e.preventDefault();
					if (topWindow() == 'music') {
						if (e.keyCode == 32) {
							console.log('space bar');
							$('#play').trigger('click');
						}
						if (e.keyCode == 37) {
							$('#prev').trigger('click');
						}
						if (e.keyCode == 38) {
							$('.next_chapter').trigger('click');
						}
						if (e.keyCode == 39) {
							$('#next').trigger('click');
						}
						if (e.keyCode == 40) {
							$('.last_chapter').trigger('click');
						}
						if (e.keyCode == 70) {
							tree.sound.requestFullscreen();
						}
					}
				}
			});
		<% } %>
	}
	else {
		<%= $miss %>VideoInterval();
	}
</script>
















