<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>AIS Edit Tool</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">
	<meta name="viewport" content="height=device-height">


	<link rel="stylesheet" href="./css/drawingboard.css">

	<style>
		.board {
			margin: 0 auto;
		}
	</style>

	<style>
		#ais-edit-tool {
			height: 90vh; /* For 90% screen height */
			width:  90vw; /* For 90% screen width */
		}

	</style>
	<style>
		.drawing-board-canvas-wrapper {
			border: 1px solid gray;
		}
		#overlay{
			position:initial;
			display:block;
			width:100%;
			height:100%;
			z-index:30;
		}
	</style>
</head>
<body>

	<noscript>JavaScript is required :(</noscript>
	<div class="container">
		<div>
			<div class="board" id="ais-edit-tool">
			</div>
		</div>
	</div>
	
	<script src="./js/jquery.min.js"></script>
	<script src="./js/simple-undo.js"></script>
	
	<script src="./js/utils.js"></script>
	<script src="./js/drawingboard.js"></script>
	<script src="./js/controls/control.js"></script>
	<script src="./js/controls/color.js"></script>
	<script src="./js/controls/drawingmode.js"></script>
	<script src="./js/controls/navigation.js"></script>
	<script src="./js/controls/size.js"></script>
	<script src="./js/controls/download.js"></script>

	<script>
		var aisEditTool = new DrawingBoard.Board('ais-edit-tool', {
			controls: [
			'Color',
			{ Size: { type: 'dropdown' } },
			{ DrawingMode: { filler: false } },
			'Download'
			],
			color: '#ff0000',
			background: false,
			size: 3,
			webStorage: 'false',
			controlsPosition: 'center',
			enlargeYourContainer: true
		});

		//Canvasのサイズを写真の横縦割合に合わせて変更
		function resizeCanvasToRatio(ratio, maxHeight){
			aisEditTool.resizeCanvasToRatio(ratio, maxHeight);
		}

		//CanvasのBackgroundをイメージファイルのurlに設定
		function setBackground(url){
			aisEditTool.setBackground(url);
		}

		//Canvasの修正可否を返す。	
		function isCanvasEdited(){
			return aisEditTool.isCanvasEdited();
		}
		
		//パスを取得してoverlayイメージをCanvasの中に入れる。(iOS)
		function createOverlayImageElement(imageSrc) {
			aisEditTool.createOverlayImageElement(imageSrc);
		}

		//接続しているクライアントがPCかmobileかをはんだんする
		function checkPC() {
			var filter = "win16|win32|win64|mac|macintel"; 

			if ( navigator.platform ) { 
				if ( filter.indexOf( navigator.platform.toLowerCase() ) < 0 ) { 
					//mobile  
					return false;
				} else { 
					//pc
					return true;
				} 
			}
		}

		//このペースのロード完了後でイメージをロードする
		document.addEventListener("DOMContentLoaded", function(event) {
			console.log('DOMContentLoaded');
			if(checkPC()){
				parent.loadDlgImage();  //call parent, parent call setBackground
			}
		});
	</script>
</body>
</html>