﻿<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

<head>

<style type="text/css">
body, div, p, table, td, tr {
	border: 0;
	padding: 0;
	margin: 0;
}

body {
    min-width:750px;
}
    
#wrap {
    background:#99c;
    margin:0 auto;
    width:100%;
    }

#display {
    background:#9c9;
    float:left;
    width:75%;
    }
#parameters {
    background:#c9c;
    float:right;
    width:25%;
}
#header {
    background:#ddd;
    }
#footer {
    background:#cc9;
    clear:both;
    }

</style>

<script type="text/javascript" src="js/YAHOO.js" />
<script type="text/javascript" src="js/animation.js" />
<script type="text/javascript" src="js/event.js" />
<script type="text/javascript" src="js/dom.js" />

<script type="text/javascript">
<![CDATA[

var SVG_NS = "http://www.w3.org/2000/svg";
var javaSound;
var arrows;
var title;

YAHOO.namespace('taisabaki');

YAHOO.util.Event.addListener(window, 'load', init);
YAHOO.util.Event.addListener("userStart", 'click', startOrStop);

function init() {

	javaSound = document.getElementById("JavaSound");
	var svg = document.getElementById("svgElement");

	arrows = new Array(8 + 1);
	var i;
	for (i = 1; i <= 8; i++) {
		arrows[i] = new Arrow(svg, i, "sounds/" + i + ".wav");
	}
	arrows[0] = new CenterCircle(svg, "sounds/0.wav");
	title = new TitleScreen(svg, "sounds/title.wav");
	
	displayIntro();
}

function CenterCircle(svg, soundPath) {
	
	this._svgObj = svg.ownerDocument.createElementNS(SVG_NS, "circle");
	this._svgObj.setAttributeNS(null, "cx", "500");
	this._svgObj.setAttributeNS(null, "cy", "500");
	this._svgObj.setAttributeNS(null, "r", "100");
	this._svgObj.setAttributeNS(null, "fill", "red");
	this._svgObj.setAttributeNS(null, "stroke", "black");
	this._svgObj.setAttributeNS(null, "stroke-width", "10");
	this._svgObj.setAttributeNS(null, "opacity", "0");
	svg.appendChild(this._svgObj);	

	this._soundName = soundPath;
	loadSound(this._soundName);

	this._fadeOut = new YAHOO.util.Anim(
		this._svgObj,
		{ opacity: { from: 1, to: 0 },
		  "stroke-width": { from: 10, to: 100 } },
		1, YAHOO.util.Easing.easeIn);
	
	this.clear = function() {
		this._fadeOut.stop();
	}

	this.trigger = function() {
		this._fadeOut.animate();
		playSound(this._soundName);
	}
}

function Arrow(svg, direction, soundPath) {
	
	this._svgObj = svg.ownerDocument.createElementNS(SVG_NS, "polygon");
	this._svgObj.setAttributeNS(null, "fill", "red");
	this._svgObj.setAttributeNS(null, "stroke", "black");
	this._svgObj.setAttributeNS(null, "stroke-width", "10");
	this._svgObj.setAttributeNS(null, "opacity", "0");
	this._svgObj.setAttributeNS(null, "points",
		"500,50  600,150  550,150  550,350 " +
    	"450,350 450,150  400,150  500,50");
	this._svgObj.setAttributeNS(null, "transform",
		"rotate(" + ((direction - 2) * 45) + ", 500, 500)");
	svg.appendChild(this._svgObj);	

	this._soundName = soundPath;
	loadSound(this._soundName);

	this._fadeOut = new YAHOO.util.Anim(
		this._svgObj,
		{ opacity: { from: 1, to: 0 },
		  "stroke-width": { from: 10, to: 100 } },
		1, YAHOO.util.Easing.easeIn);
	
	this.clear = function() {
		this._fadeOut.stop();
	}

	this.trigger = function() {
		this._fadeOut.animate();
		playSound(this._soundName);
	}
}

function TitleScreen(svg, soundPath) {

    this._svgKanji = svg.ownerDocument.createElementNS(SVG_NS, "text");
    this._svgKanji.setAttributeNS(null, "x", "500");
    this._svgKanji.setAttributeNS(null, "y", "500");
    this._svgKanji.setAttributeNS(null, "fill", "blue");
    this._svgKanji.setAttributeNS(null, "text-anchor", "middle");
    this._svgKanji.setAttributeNS(null, "font-family", "'MS PGothic', Osaka");
    this._svgKanji.setAttributeNS(null, "font-size", "250px");
	this._svgKanji.setAttributeNS(null, "fill-opacity", "0");
    var data = svg.ownerDocument.createTextNode("体捌き");
    this._svgKanji.appendChild(data);
    svg.appendChild(this._svgKanji);

    this._svgTitle = svg.ownerDocument.createElementNS(SVG_NS, "text");
    this._svgTitle.setAttributeNS(null, "x", "500");
    this._svgTitle.setAttributeNS(null, "y", "600");
    this._svgTitle.setAttributeNS(null, "fill", "black");
    this._svgTitle.setAttributeNS(null, "text-anchor", "middle");
    this._svgTitle.setAttributeNS(null, "font-size", "50px");
	this._svgTitle.setAttributeNS(null, "fill-opacity", "0");
    data = svg.ownerDocument.createTextNode("Shodokan Aikido Taisabaki Practice");
    this._svgTitle.appendChild(data);
    svg.appendChild(this._svgTitle);

	this._soundName = soundPath;
	loadSound(this._soundName);

	this._fadeInKanji = new YAHOO.util.Anim(
		this._svgKanji,
		{ "font-size": { from: 50, to: 250, unit: "px"},
		  "x": { from: 100, to: 500, unit: ' ' },
		  "y": { from: 250, to: 500, unit: ' ' } },
		2, YAHOO.util.Easing.backOut);

	this._fadeInTitle = new YAHOO.util.Anim(
		this._svgTitle,
		{ "font-size": { from: 10, to: 50, unit: "px"},
		  "x": { from: 900, to: 500, unit: ' ' },
		  "y": { from: 950, to: 600, unit: ' ' } },
		2, YAHOO.util.Easing.backOut);

	this.trigger = function() {
		this._svgKanji.setAttributeNS(null, "fill-opacity", "1");
		this._svgTitle.setAttributeNS(null, "fill-opacity", "1");
		this._fadeInKanji.animate();
		this._fadeInTitle.animate();
		playSound(this._soundName);
	}

	this.clear = function() {
		this._fadeInKanji.stop();
		this._fadeInTitle.stop();
		this._svgKanji.setAttributeNS(null, "fill-opacity", "0");
		this._svgTitle.setAttributeNS(null, "fill-opacity", "0");
	}
}

function displayIntro()
{
	var i;
	for (i = 0; i <= 8; i++) {
		setTimeout("arrows["+i+"].trigger()", (i-1)*100);
	}
	setTimeout("title.trigger()", 1000);
}

function clearAll()
{
	var i;
	for (i = 1; i <= 8; i++) {
		arrows[i].clear();
	}
	title.clear();	
}


var is_on = false;
var prevDirection = 0;

function mainLoop()
{
	var direction, timeout;

	if (!is_on) return;

	if (prevDirection == 0 ||
			!document.getElementById("userCentering").checked) {
		do {
			direction = 1 + Math.round(7 * Math.random());
		}
		while (! document.getElementById("userMove" + direction).checked);
		
	} else {
		direction = 0;
	}
	
	prevDirection = direction;
	
	arrows[direction].trigger();

	if (direction > 0 && document.getElementById("userCentering").checked) {
		timeout = Math.round(getIntValue("userCenteringBase") +
				  (getIntValue("userCenteringRange") * Math.random()));
	} else {
		timeout = Math.round(getIntValue("userTimingBase") +
				  (getIntValue("userTimingRange") * Math.random()));
	}
	setTimeout("mainLoop()", timeout);
}

function startOrStop()
{
	if (is_on) {
		document.getElementById("userStart").value = "Start!";
		is_on = false;
		displayIntro();
	
	} else {
		document.getElementById("userStart").value = "Stop!";
		clearAll();
		is_on = true;
		prevDirection = 0;
		setTimeout("mainLoop()", 2000);
	}
}

function loadSound(path) {
	javaSound.load(path, path)
}

function playSound(name) {
	if (document.getElementById("userSound").checked) {
		javaSound.play(name);
	}
}

function getIntValue(id)
{
	return Math.round(document.getElementById(id).value);
}

]]>
</script>
</head>


<body>

<object id="JavaSound"
	classid="java:JavaSound.class"
	type="application/x-java-applet;version=1.5">
</object>

<div id="wrap">

<div id="header">
<p>Shodokan Aikido Taisabaki Practice</p>
</div>

<div id="display">
<svg:svg id="svgElement" width="100%" height="95%"
	viewBox="0 0 1000 1000" preserveAspectRatio="none"
     xmlns="http://www.w3.org/2000/svg" version="1.1">

	<svg:rect x="0" y="0" width="1000" height="1000" 
        fill="yellow" stroke="black" stroke-width="10" />

</svg:svg>
</div>

<div id="parameters">

<form>

<table>
<tr><th colspan="2">Timing</th></tr>
<tr>
<td style="text-align:right">Base (ms):</td>
<td><input type="text" value="3000" size="5" id="userTimingBase" /></td>
</tr>
<tr>
<td style="text-align:right">Range (ms):</td>
<td><input type="text" value="5000" size="5" id="userTimingRange" /></td>
</tr>
</table>

<table>
<tr><th colspan="2">Centering</th></tr>
<tr>
<td style="text-align:right">Centering:</td>
<td><input type="radio" name="userCentering" id="userCentering" value="1" checked="checked" />On
<input type="radio" name="userCentering" value="0" />Off</td>
</tr>
<tr>
<td style="text-align:right">Base (ms):</td>
<td><input type="text" value="2000" size="5" id="userCenteringBase" /></td>
</tr>
<tr>
<td style="text-align:right">Range (ms):</td>
<td><input type="text" value="2000" size="5" id="userCenteringRange" /></td>
</tr>
</table>

<table>
<tr><th colspan="3">Directions</th></tr>
<tr>
<td><input type="checkbox" id="userMove1" checked="checked" /></td>
<td><input type="checkbox" id="userMove2"  checked="checked" /></td>
<td><input type="checkbox" id="userMove3" checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" id="userMove8"  checked="checked" /></td>
<td></td>
<td><input type="checkbox" id="userMove4"  checked="checked" /></td>
</tr>
<tr>
<td><input type="checkbox" id="userMove7" checked="checked" /></td>
<td><input type="checkbox" id="userMove6"  checked="checked" /></td>
<td><input type="checkbox" id="userMove5" checked="checked" /></td>
</tr>
</table>

<table>
<tr><th colspan="2">Other</th></tr>
<tr>
<td>Sound:</td>
<td><input type="radio" name="userSound" id="userSound" value="1" checked="checked" />On
<input type="radio" name="userSound" value="0" />Off</td>
</tr>
</table>


<p>
<input type="button" value="Start!" id="userStart" />
</p>
</form>

</div>

<div id="footer">
<p>Copyleft 2006</p>
</div>

</div>

</body>
</html>
