{{include "controllers/GTM/plans_hat"}}
<style>
	#guiviewer3d-toolbar,
	.infoButton,
	.homeViewWrapper { display:none }
	</style>
<div id="main">
	<div id="left" class="flL bR grayB padHsm smlF rel">
		<div class="list">
			{{if plans.length}}
				{{foreach plan_type in plans}}
					<div class="padW padHsm bH grayB grayT"><b>{{plan_type.name}}</b></div>
					{{foreach item in plan_type.items}}
						<div class="padW item cp ulh"><a href="/GTM/?mode=plans&plan_id={{item.id}}">{{item.name}}</a></div>
					{{/foreach}}
					<div class="marF"></div>
				{{/foreach}}
			{{else}}
				<div class="padW item">- чертежи не загружены -</div>
			{{/if}}
		</div>
	</div>
	<div id="right" class="flR scrollH oh">
		<div class="padF">
			{{if plan}}
				<div class="marT">Чертеж: <b>{{plan.name}}</b></div>
				<div>Статус: <b>{{plan.status_name}}</b></div>
				<div>Прогресс: <b>{{plan.log}}</b></div>
				
				{{if plan.status_name=="Загружен"}}
					<div class="lock">		
						<div class="flL whiteT blueB padW padHsm marH cp button" onclick="window.location='/GTM/?mode=load_plan&plan_id={{plan.id}}'">Выгрузить</div>
					</div>
				{{/if}}
				
				{{if plan.status_name=="Не зарегистрирован"}}
					<div class="lock">		
						<div class="flL whiteT blueB padW padHsm marH cp button" onclick="window.location='/GTM/?mode=register_plan&plan_id={{plan.id}}'">Регистрировать</div>
					</div>
				{{/if}}
				
				{{if plan.status_name=="Транслируется"}}
					<div class="lock">		
						<div class="flL whiteT blueB padW padHsm marH cp button" onclick="window.location='/GTM/?mode=register_plan&plan_id={{plan.id}}'">Обновить</div>
					</div>
				{{/if}}
				
				{{if plan.status_name=="Транслирован"}}
				
					<div class="marH padT">Выберите необходимый формат, ориентацию - спозиционируйте чертеж и сделайте скриншот - скачанный файл загрузите через форму</div>
					
					<div class="marH">Отображение: <b><select name="list" id="geometry" class="bF padW padHsm"></select></b></div>
				
					<div class="marH">
						Формат:
						<b>
							<select name="list" id="formats" class="bF padW padHsm">
								{{foreach item in formats}}
									<option value="{{item.id}}">{{item.name}} {{item.width}}x{{item.height}}</option>
								{{/foreach}}
							</select>
						</b>
					</div>
					
					<div class="lock">		
						<div class="flL whiteT blueB padW padHsm marH cp button" onclick="get_img()">Сделать скриншот</div>												
					</div>
					
					<a href="" id='screenshot' download></a>
					
					<form action="{{action}}?mode=plans" method="POST" enctype="multipart/form-data" class="marH">
						<input type="hidden" name="mode" value="upload_screenshot"/>
						<input type="hidden" name="plan_id" value="{{plan.id}}"/>
						<input type="hidden" name="format_id" value=""/>
						<input type="hidden" name="list_index" value=""/>
						<input type="hidden" name="camera" value=""/>
						<input type="file" name="screenshot" placeholder="Выберите скриншот"/>
						<br>
						<input class="whiteT blueB padW padHsm marH cp" type="submit" value="Загрузить">
					</form>
					
					<div id="borders">
						<div id="viewer" class="rel bs marH"></div>
					</div>					
					
					<script>
						
						var formats = JSON.parse('{{JSON:formats}}').reduce(function(h,el){ h[el.id]=el; return h; },{});
					
						var geometry = GTM.block('geometry');						
						var format   = GTM.block('formats');
						var screenshot   = GTM.block('screenshot');
						
						var get_size = function(){
							var R = 1;
							var f = formats[format.val()];
							return { width:f.width*R, height:f.height*R, zoom:(1/R).toFixed(2) }
						}
						
						var refresh = function(cb,r){
							var index = geometry.val();
							GTM.block('viewer').css(get_size(r));
							GTM.viewer.refresh('{{plan.urn_encoded}}',index,cb);
						}
						
						var get_img = function(){
							var s = get_size();
							
							$('input[name=format_id]').val(format.val());
							$('input[name=list_index]').val(geometry.val());
							$('input[name=camera]').val(JSON.stringify(GTM.last_camera));
							
							GTM.viewer.get_image(s.width,s.height,function(url){
								screenshot.attr('href',url).html('Скачать скриншот')
							});
						}
						
						GTM.init_viewer('{{plan.urn_encoded}}',0,function(target){
							
							target.geometryItems.forEach(function(el,i){
								$('<option></option>').attr('value',i).html(el.name).appendTo(geometry);
							});
							
							GTM.log('Выберите отображение!');
							GTM.set_loader(0);
							
							geometry.on('change',function(){refresh()});
							format.on('change',function(){refresh()});
							
							refresh();
							
						},1);
						
					</script>					
					
				{{/if}}
				
				{{if plan.status_name=="С изображением"}}
				
					<form action="{{action}}?mode=plans" method="POST" enctype="multipart/form-data" class="marH">
						<input type="hidden" name="mode" value="save_params"/>
						<input type="hidden" name="plan_id" value="{{plan.id}}"/>
						Ширина: <input  class="padW padHsm bF" type="text" name="width" placeholder="Ширина"/><br>
						Высота: <input  class="padW padHsm bF" type="text" name="height" placeholder="Высота"/><br>
						<br>
						<input class="whiteT blueB padW padHsm marH cp" type="submit" value="Сохранить">
					</form>
									
					<div class="lock">
						<div id="coords"></div>
						<div id="pic" class="rel bs marH flL"></div>
					</div>
					
					<script>
						
						$('body').on('keydown',function(e){							
							GTM.block('right')[e.altKey?'addClass':'removeClass']('pointed');
						});
						$('body').on('keyup',function(e){
							GTM.block('right').removeClass('pointed');
						});
						
						var formats = JSON.parse('{{JSON:formats}}').reduce(function(h,el){ h[el.id]=el; return h; },{});
						var format = formats['{{plan.format_id}}'];
						
						var R = format.width/format.height;
						
						var Wpercent = 0.85;
						
						var W = GTM.block('right').width()*Wpercent;
						var H = W/R;
						var sizes = { width:W, height:H }
						
						GTM.block('pic').css(sizes);
						GTM.init_map();
						
						GTM.resizator('set_option','cover',1);
					
						GTM.resizator('init_new','{{plan.image_url}}');
						
						GTM.block('pic').on('mousemove',function(e){
							
							var pos = {
								x:e.offsetX,
								y:e.offsetY
							}
							
							var img = GTM.resizator('get','img');
							
							var pic_coords = GTM.resizator('get_pic_coords',pos);
							
							var wR = $('input[name=width]').val() / img.width;
							var wH = $('input[name=height]').val() / img.height;
							
							GTM.block('coords').html(
								parseInt(pic_coords.x) +'|'+parseInt(pic_coords.y)+'<br>' +
								parseInt(pic_coords.x*wR) +'|'+parseInt(pic_coords.y*wH)
							)
							
						});
						
					</script>
					
				
					
				{{/if}}
				
				<div class="lock">
					<div class="flL whiteT blueB padW padHsm marH cp button" onclick="window.location='/GTM/?mode=delete_plan&plan_id={{plan.id}}'">Удалить</div>
				</div>				
				
				<div class=""><a href="/GTM/?mode=plans" class="blueT">Новый чертеж</a></div>				
					
			{{else}}
				
				<div>Выберите чертеж или загрузите новый</div>
				<form action="{{action}}?mode=plans" method="POST" enctype="multipart/form-data" class="marH">
					<input type="hidden" name="mode" value="upload_plan"/>
					<input  class="padW padHsm bF" type="text" name="name" placeholder="Название чертежа"/>
					<br>
					<input type="file" name="plan" placeholder="Выберите чертеж"/>
					<br>
					<input class="whiteT blueB padW padHsm marH cp" type="submit" value="Загрузить">
				</form>
				
			{{/if}}
		</div>
	</div>
</div>