<?php
	require("__include-common.php");
	require("../account/__logincheck.php");
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<?php
	if ($_GET['id'].'' <> '') {
		$id = intval($_GET['id']);
	} else {
		$id = 0;
	}
	if ($id == 0) {
		$psketch = '({version:"1.0", data:{ strokes:[ ], joints:[ ] }})';
		$subject = '';
		$bg_color = '#000000';
	} else {
		$con = my_mysqli_connect(_DB_SCHEMA);
		$sql = "select * from v_psketch where id_psketch = ".$id;
		$rs = my_mysqli_query($sql);
		if (mysqli_num_rows($rs) == 0) {
			rec_not_found('データがありません。');
			return;
		}
		$rec = mysqli_fetch_array($rs);
		$psketch = str_replace("\n",'',$rec['c_json']);
		$subject = $rec['c_subject'];
		$bg_color = $rec['c_background'];
	}
	$mode = $_GET['mode'];	// v: view (not edit) mode
?>
<script>
var record_id = <?= $id ?>;
var subj = '<?= $subject ?>';
var bg_color = '<?= $bg_color ?>';
var mp_list_page = '<?= $_GET['page'] ?>';
var mp_list_move = '<?= $_GET['move'] ?>';
var mp_list_row = '<?= $_GET['row'] ?>';
var canvas_zoom = '<?= $_GET['zoom'] ?>';
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>physicSketch</title>
<link href="style/styles.css" rel="stylesheet">
<link href="style/dialog.css" rel="stylesheet">
<!--[if IE]><script src="lib/excanvas.js"></script><![endif]-->
<script src="js/prototype-1.6.0.2.js"></script>
<script src="js/lightwindow/scriptaculous.js?load=effects"></script>
<script src='js/box2d.js'></script>
<script src='js/draw_world.js'></script>
<?php if ($mode <> 'v') { ?>
<script src='js/physicsketch.js'></script>
<?php } else { ?>
<script src='js/physicsketch-view.js'></script>
<?php } ?>
<script src='js/dialog.js'></script>
<script src='js/menuactions.js'></script>
<script src='js/menuactions.js'></script>
<script src='../scripts/cookie.js'></script>
</head>
<body>
<?php if ($mode <> 'v') { ?>
<script>
function saveExit() {
	subj = window.prompt("タイトルを入れてください。", subj);
	if (subj != null) {	// subj == '' は許可
		if (clocking) {
			json = jsonData;
		} else {
			json = getAppData();
		}
		image = canvas.toDataURL('image/png');
		var a = new Ajax.Request(
			"write.php",
			{
				"method": "post",
				"parameters": { "id" : record_id,
						"subj" : subj,
						"json" : json,
						"image" : image,
						"bg" : bg_color},
				onSuccess: function(request) {
					//alert('読み込み成功しました');
				},
				onComplete: function(request) {
					//alert('読み込みが完了しました');
					top.location.href='view.php?id='+request.responseText+'&page='+mp_list_page+'&move='+mp_list_move+'&row='+mp_list_row;
				},
				onFailure: function(request) {
					//alert('読み込みに失敗しました');
				},
				onException: function (request) {
					//alert('読み込み中にエラーが発生しました');
				}
			}
		);
	}
}
function changeBGC(color) {
	changeBGColor(color);
	bg_color= color;
}
</script>
<?php } ?>
<script>
function repeat() {
	if (!clocking) {
		toggleTimer();
	}
	clearStrokes();
	restoreFromJson(jsonData);
}
function addJson() {
	if (!clocking) {
		toggleTimer();
	}
	restoreFromJson(jsonData);
}
function resetInit() {
	if (clocking) {
		toggleTimer();
	}
	clearStrokes();
	restoreFromJson(initData);
}
function allClear() {
	if (!clocking) {
		jsonData = getAppData();
	}
	clearStrokes();
}
function startInit() {
	if (clocking) {
		clearStrokes();
		restoreFromJson(initData);
	}
	toggleTimer();
}
function startStop() {
	if (!clocking) {
		jsonData = getAppData();
	} else {
		clearStrokes();
		restoreFromJson(jsonData);
	}
	toggleTimer();
}
function clearStrokes() {
	var newStrokes = $A();
	for (var i = 0; i < strokes.length; i++) {
		world.DestroyBody(strokes[i].body);
	}
	strokes = newStrokes;
}
function chgStepTime(t) {
	stepTime = t;
	saveCookie("psketch_step_time", stepTime, 365, '<?= MY_SESSION_PATH ?>');
}
<?php
	if (isset($_COOKIE['psketch_step_time'])) {
		$stepTime = $_COOKIE['psketch_step_time'];
	} else {
		$stepTime = 1;
	}
?>
var stepTime = <?= $stepTime ?>;
var canvas_width = <?= psketch_CANVAS_WIDTH ?>;
var canvas_height = <?= psketch_CANVAS_HEIGHT ?>;
</script>
<canvas id="canvas" width="<?= psketch_CANVAS_WIDTH ?>" height="<?= psketch_CANVAS_HEIGHT ?>" style="position:absolute; top:0; left:0;"></canvas>
<div id="base">
	<div id="step-time">
	<?php for ($t=1; $t<=20; $t++) { ?>
	<a href="javascript:chgStepTime(<?= $t*5 ?>);"><?= $t ?></a>
	<?php } ?>
	</div>
<?php if ($mode == 'v') { ?>
  <div id="app-menu">
    <a class="gray" href="javascript:startInit();">Start/Reset</a>
    <a class="gray" href="javascript:toggleTimer();">Toggle Timer</a>
    <a class="green" href="javascript:repeat();">Repeat</a>
    <a class="green" href="javascript:addJson();">Add</a>
  </div>
  <div id="stroke-menu">
	<div style="display:none">
	    Left <span id="position-x"></span>px
	    Top <span id="position-y"></span>px
	    Angle <span id="angle"></span>deg
	</div>
  </div>
<?php } else { ?>
  <div id="app-menu">
    <a class="gray" href="javascript:startStop();">Start/Reset</a>
    <a class="red" href="javascript:saveExit();">Save&Exit</a>
<?php if ($id <> 0) { ?>
    <a class="green" href="javascript:resetInit();">Init</a>
<?php } ?>
    <a class="green" href="javascript:allClear();">Clear</a>
    <a class="blue" href="javascript:showDialog('stroke-color-chooser', 240, 350);">Stroke Color</a>
    <a class="blue" href="javascript:showDialog('background-color-chooser', 240, 350);">BG Color</a>
    <a class="blue" href="javascript:toggleBodyVisibility(this);">Show Body</a>
  </div>
  <div id="stroke-menu">
    <a class="blue" href="javascript:showDialog('fill-color-chooser', 240, 350);">Fill Color</a>
    <a class="red" href="javascript:deleteSelectedBody()">Delete</a>
	<div style="display:none">
	    Left <span id="position-x"></span>px
	    Top <span id="position-y"></span>px
	    Angle <span id="angle"></span>deg
	</div>
  </div>
  <div id="system-menu">
    <a class="yellow" href="javascript:showDialog('help-dialog', 400, 350);" style="margin-right:10px;">Help</a>
  </div>
<?php } ?>
</div>
<?php if ($mode == 'v') { ?>
<div id="timer" onclick="javascript:toggleTimer();"></div>
<?php } else { ?>
<div id="timer"></div>
<?php } ?>
<!-- Dialogs -->
<div id="dialog-back" style="display:none;"></div>
<div id="input-dataname-dialog" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Input Dataname</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
    <input id="input-dataname" name="input-dataname" placeholder="Name"></input><br />
    <button onclick="javascript:inputDataname($('input-dataname').value);">Store</button>
  </div>
</div>
<div id="choose-dataname-dialog" class="dialog" style="display:none;" onLoad="initDatanames();">
  <div class="dialog-header">
    <span class="dialog-header-title">Choose Dataname</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
    <div id="datanames"></div>
  </div>
</div>
<div id="upload-dialog" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Upload</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
    <input id="upload-title" name="upload-title" placeholder="Title"></input><br />
    <textarea id="upload-description" name="upload-description" placeholder="Description"></textarea><br />
    <button onclick="javascript:checkUpload();">Upload</button><br /><br />
    <a href="/app/list" target="_blank" style="float:right;">Show uploaded sketches</a>
  </div>
</div>
<div id="stroke-color-chooser" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Choose Stroke Color</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
<?php
	$colors = explode(',', psketch_STROKE_COLOR);
	foreach ($colors as $color) {
?>
    <div class="color-item" style="background-color:<?= $color ?>; color:white;"
      onclick="javascript:changeStrokeColor('<?= $color ?>'); changeSelectedStrokeColor('#FF0000');"><?= $color ?></div>
<?php
	}
?>
  </div>
</div>
<div id="background-color-chooser" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Background Color</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
<?php
	$colors = explode(',', psketch_STROKE_COLOR);
	foreach ($colors as $color) {
?>
    <div class="color-item" style="background-color:<?= $color ?>; color:white;"
      onclick="javascript:changeBGC('<?= $color ?>');"><?= $color ?></div>
<?php
	}
?>
  </div>
</div>
<div id="fill-color-chooser" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Fill Color</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
<?php
	$colors = explode(',', psketch_STROKE_COLOR);
	foreach ($colors as $color) {
?>
    <div class="color-item" style="background-color:<?= $color ?>; color:white;"
      onclick="javascript:changeFillColor('<?= $color ?>');"><?= $color ?></div>
<?php
	}
?>
  </div>
</div>
<div id="help-dialog" class="dialog" style="display:none;">
  <div class="dialog-header">
    <span class="dialog-header-title">Help</span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
<?php
	require("psketch-help.php");
?>
  </div>
</div>
<!--
  <div class="dialog-header">
    <span class="dialog-header-title"></span>
    <a class="dialog-header-close" href="javascript:hideDialog();">Close</a>
  </div>
  <div class="dialog-body">
  </div>
-->
<script>
<?php if ($_GET['start'] <> 'auto') { ?>
clocking = false;
<?php } ?>
var jsonData = '<?= $psketch ?>';
var initData = jsonData;
restoreFromJson(jsonData);
</script>
</body>
</html>
