{{include "controllers/GTM/plans_hat"}}
<style>
	#pdfviewer,#fpdfviewer {
		
		overflow:scroll;
	}
</style>

<div id="main">
	<div id="left" class="flL bR grayB padHsm smlF rel">
		<div class="padF">			
		</div>
	</div>
	<div id="right" class="flR scrollH oh rel">
		<div class="padF">
			<div class="lock">
				
				<div class="marH">
					<div>Рамка</div>
					<canvas id="c2" class="bs"></canvas>
				</div>
				
				<div>Чертеж</div>
				<canvas id="c1" class="bs"></canvas>
				
				<div class="marH">
					<div>Объекты</div>
					<div class="lock">
						<div id="items" class="bs flL">
							<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
								<ellipse stroke="#000000" ry="21.66667" rx="21.66667" id="svg_1" cy="136.66666" cx="286.66667" stroke-width="5" fill="#FF0000"></ellipse>
								<ellipse stroke="#000000" id="svg_2" ry="26.33333" rx="6.33333" cy="140.66667" cx="175.99999" stroke-width="5" fill="#FF0000"></ellipse>
								<ellipse id="svg_3" stroke="#000000" ry="21.66667" rx="21.66667" cy="310.66667" cx="196.6667" stroke-width="5" fill="#FF0000"></ellipse>
							</svg>
						</div>
					</div>
				</div>
				
				<br>			
				<div><a href="/plans/results/А4_В_res.pdf">Результат</a></div>
				<canvas id="c3" class="bs"></canvas>
				
			</div>
		</div>
	</div>
</div>

<script>
	
	var has_svg;
	
	PDFJS.workerSrc = '/3rdparty/pdf/pdf.worker.js';
	
	var PDF = function(doc,tag){
		this.size = 1;
		this.canvas = $('#' + tag)[0];
		this.context = this.canvas.getContext('2d');
		this.doc = PDFJS.getDocument(doc);
		this.init();
	}
	
	PDF.all = function(method,params){
		pdfs.forEach(function(el){ el[method](params); });
	}
	
	PDF.prototype.init = function(){
		var t = this;
		this.doc.promise.then(function(pdf){
			t.pdf = pdf;
			pdf.getPage(1).then(function(page) {
				t.page = page;
				t.update();
			});				
		});
		
	}
	
	PDF.prototype.update = function(){
		
		var viewport = this.page.getViewport(this.size);
			
		this.canvas.height = viewport.height;
		this.canvas.width = viewport.width;
		
		$('#items').css({
			width:	viewport.width,
			height:	viewport.height
		});
		
		if(!has_svg){

		}
		
		var renderContext = {
			canvasContext: this.context,
			viewport: viewport
		};
		
		this.page.render(renderContext);
	}
	
	
	PDF.prototype.inc_size = function(v){
		this.size+=v;
		this.update();
	}
	
	var pdfs = [
		new PDF('/plans/examples/А4_В.pdf','c1'),
		new PDF('/plans/formats/А4_В.pdf','c2'),
		new PDF('/plans/results/А4_В_res.pdf','c3'),
	];

  
    
	
	

	
	
	
</script>