<html>
<head>
<title>tokyo/resonance</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<style type="text/css">
	body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#BFBFBF; left:0; top:0; width:100%; height:100%;}
	.menuSpan {position:absolute;background:#BFBFBF;overflow:hidden;}
	.labSpan {position:absolute;color:#FFF;font-family:tahoma;margin:4%;}
	.textSpan {position:absolute;color:#FFF;font-family:tahoma;font-size:.8em;background:#BFBFBF;text-align:center;overflow:auto;}
	.textPath {position:absolute;color:#FFF;font-family:tahoma;font-size:.8em;text-align:center;}
	.img {position:relative;width:100%;height:100%;z-index:0}
	.link {color:#FFF; text-decoration:none}
	.jap {color:#666666}
</style>

<script type="text/javascript"><!--

// ============================================================
//      ========== Hierarchical SPAN Menu =============
// SCRIPT by Gerard Ferrandez - Ge-1-doot - APRIL 2005
// http://www.dhteumeuleu.com
// ============================================================
window.onerror = new Function("return true");

// ===== global var ======
var m,menuSpan,textSpan,textPath,W,H;
var dxm = [2,1,2,1,0,0,-1];
var dym = [2,2,1,1,2,1,-1];
var cancelBub = false;
var zB = 0;
var xB = -.5;
var yB = -.5;
var zP = 0;
var xP = 0;
var yP = 0;

// ===== reset this.spa =====
function resetSpa(o){
	if(o.spa){
		o.spa="";
		for(i in o.m)resetSpa(o.m[i]);
	}
}


// ===== insert HTML elements =====
function createHTML(o){
	o.spa                  = document.createElement("span");
	o.spa.style.position   = "absolute";
	o.spa.style.background = o.bkg;
	o.spa.style.cursor     = o.parent==""?"default":"pointer";
	o.spa.onmousedown      = new Function("return false;");
	o.spa.onselectstart    = new Function("return false");
	o.lab                  = document.createElement("span");
	o.lab.className        = "labSpan";
	o.lab.innerHTML        = o.label;
	parentSPAN             = o.parent==""?menuSpan:o.parent.spa;
	o.spa.obj              = o;
	o.spa.onclick          = o.click;
	o.spa.appendChild(o.lab);
	parentSPAN.appendChild(o.spa);
}


function animHTML(o,x,y,w,h){
	// ==== create HTML tags
	if(!o.spa)createHTML(o);
	// ==== SPAN position & size
	if(w<3*W){
		// ==== span size
		o.spa.style.width  = Math.floor(w);
		o.spa.style.height = Math.floor(h);
		// ==== font size
		fs = w/8;
		if(fs>4 && fs<128){
			o.lab.style.visibility = "visible";
			o.lab.style.fontSize   = Math.round(fs)+"px";
		} else o.lab.style.visibility = "hidden";
	}
	// ==== span position
	x += o.oX;
	if(x<-W){
		for(i in o.m)o.m[i].oX=x+W;
		x=-W;
	} else for(i in o.m)o.m[i].oX=0;
	y += o.oY;
	if(y<-W){
		for(i in o.m)o.m[i].oY=y+W;
		y=-W;
	} else for(i in o.m)o.m[i].oY=0;
	o.spa.style.left = Math.round(x);
	o.spa.style.top  = Math.round(y);
}


// ==== recursive call
function animateChildren(o,w,h){
	if(w<W/28 || (-W*xB)+(o.px*W*zB)>W-2 || (-W*xB)+(o.px*W*zB)+w<W/6 || (-H*yB)+(o.py*H*zB)>H-2 || (-H*yB)+(o.py*H*zB)+h<H/6){
		// ===== remove invisible spans
		if(o.spa){
			o.parent.spa.removeChild(o.spa);
			resetSpa(o);
		}
	} else {
		// ===== anim visible objects
		animHTML(o,o.dx*w,o.dy*h,w,h);
		for(i in o.m) animateChildren(o.m[i],w/3,h/3);
	}
}

function doZoom(x, y, z){
	// ==== increment
	zB += zP;
	xB += xP;
	yB += yP;
	// ==== end zoom
	if(Math.round(z * 1000) == Math.round(zB * 1000)){
		zB = z;
		yB = y;
		xB = x;
		cancelBub = false;
	}
	// ==== loop
	else setTimeout("doZoom("+x+","+y+","+z+");",16);
	// ==== animHTML
	animHTML(m, -W*xB, -H*yB, W*3*zB, H*3*zB);
	for(i in m.m) animateChildren(m.m[i], W*zB, H*zB);
}

// ===== create menu element =====
function createMenu(label, bkg, parent, hlink) {
	// ==== attributes
	this.dx      = parent==""?0:dxm[parent.m.length];
	this.dy      = parent==""?0:dym[parent.m.length];
	this.px      = 0;
	this.py      = 0;
	this.lev     = 0;
	this.parent  = parent;
	this.m       = new Array();
	this.label   = label;
	this.hlink   = hlink;
	this.path    = "";
	this.zoomed  = false;
	this.spa     = "";
	this.lab     = "";
	this.spa.obj = "";
	this.bkg     = bkg;
	this.oX      = 0;
	this.oY      = 0;

	// ===== create nodes - calculate position ====
	this.createNode = function(c,b,h) {
		this.m[this.m.length] = newItem = new createMenu(c, b, this, h);
		newItem.lev = this.lev + 1;
		p = newItem;
		do {
			n = Math.pow(3,p.lev-1);
			newItem.px += p.dx/n;
			newItem.py += p.dy/n;
			newItem.path = p.label.replace(/ /,"")+" / "+newItem.path;
			p = p.parent;
		}
		while(p!="");
		return newItem;
	}

	// ===== node onclick event =====
	this.click = function() {
		if(!cancelBub){
			if(this.obj.zoomed && this.obj.lev>0){
				// ===== zoom out
				this.obj.zoomed = false;
				this.obj.parent.zoomed = false;
				this.obj.parent.spa.onclick();
			} else {
				// ===== zoom in
				cancelBub = true;
				this.obj.zoomed = true;
				// ===== insert right panel HTML, display path
				if(document.getElementById(this.obj.label)!=null){
					textSpan.innerHTML = "<div style='margin:5px'>"+document.getElementById(this.obj.label).innerHTML+"</div>";
				} else textSpan.innerHTML = document.getElementById("default").innerHTML;
				textPath.innerHTML = this.obj.path;
				// ===== run zoom
				z  = Math.pow(3, this.obj.lev-1);
				zP = (z-zB)/10;
				xP = ((z*this.obj.px)-xB)/10;
				yP = ((z*this.obj.py)-yB)/10;
				doZoom(z*this.obj.px, z*this.obj.py, z);
				if(this.obj.hlink){
					// ==== open hyperlink window
					window.open(this.obj.hlink,"_blank");
				}
			}
		}
		return false;
	}
}

// ===== resize window ====
function resize(){
	nx = document.body.offsetWidth;
	ny = document.body.offsetHeight;
	W  = Math.round(nx * .4);
	H  = Math.round(ny * .8);
	if (H > W) H = W;
	if (W > H) W = H;
	with(textSpan.style){
		width    = W;
		height   = H;
		left     = 0;
		top      = -H/2;
		fontSize = W/24+"px";
	}
	with(menuSpan.style){
		width    = W;
		height   = H;
		left     = -W;
		top      = -H/2;
	}
	with(textPath.style){
		width    = W*2;
		height   = 18;
		left     = -W;
		top      = H/2;
		fontSize = W/24+"px";
	}
	animHTML(m, -W*xB, -H*yB, W*3*zB, H*3*zB);
	for(var i in m.m) animateChildren(m.m[i], W*zB, H*zB);
}
onresize = resize;


// ===== yo! zyva ! =====
onload = function() {

	menuSpan = document.getElementById("menu");
	textSpan = document.getElementById("text");
	textPath = document.getElementById("path");

	// ===== create menu ======
	m = new createMenu("tokyo:resonance","#BFBFBF","");


	// =====
	resize();
	m.spa.onclick();
}

//-->
</script>
</head>
<body>


<span style="position:absolute;left:50%;top:50%">
	<span id="menu" class="menuSpan"></span>
	<span id="text" class="textSpan"></span>
	<span id="path" class="textPath"></span>
</span>


<!-- ==== HTML NODES CONTENT ==== -->
<div style="visibility:hidden">

<div id="default">
<a href="http://www.tokyo-resonance.net"><img src="/users/pierremanea/desktop/rangement/tr 4/button-back.jpg"; align="right"; class="imag"></a>
</div>
<div id="tokyo:resonance"; style="300px;height:100px;overflow:auto">
<p align="justify"><font size="2">
<br><br>2.0
<br><br>Soon / prochainement
<br><font class="jap">準備中</font>
</font>
</p>
</div>

</div>

</body>
</html>