var position = new Array();
var idToNum = new Object();
var _WIDTH_ = 8000;
var _HEIGHT_ = 6000;
var els;
var past = "welcome";
var tc;
var pe;
var preLogo = '<a href="#" onClick="reset();return false;">';
var afterLogo = '</a>';
var logoText;
var count = 0;
var effectTime = 0.8;
var opacity = 0.7;

window.onload = function(){
	els = $$('.contents');
	logoText = $('logo').innerHTML;
	
	new Insertion.Bottom('ground',
		'<div id="underConstruction" style="font-size : 48px; color : #ffffff; position : absolute;">Under Construction...</div>'
	);
	var ucObj = Element.getDimensions('underConstruction');
	$('underConstruction').style.zIndex = 1000;
	$('underConstruction').style.left = (document.width - ucObj.width) / 2 + "px";
	$('underConstruction').style.top = (600  - ucObj.height) / 2 + "px";
	new Effect.Fade('underConstruction', {from : 1.0, to : 0.0 , duration : 10.0, transition : Effect.Transitions.flicker});
	
	new Effect.Opacity('flowMenu', { from:opacity, to:opacity, duration : 0});
	new Effect.Opacity('logo', { from:opacity, to:opacity, duration : 0});
	
	els.each(function(name, i){
		idToNum[name.id] = i;
		position[name.id] = new Object();
		position[name.id]['x'] = _WIDTH_ * Math.random();
		position[name.id]['y'] = _HEIGHT_ * Math.random(); 
		name.style.position = 'absolute';
		name.style.left = position[name.id]['x'] + 'px';
		name.style.top = position[name.id]['y'] + 'px';
		name.style.zIndex = i;
		new Effect.MoveBy(name, -position[past]['y'] + 100, -position[past]['x'] + 150, {duration : 0});
		new Effect.Opacity(name, { from:opacity, to:opacity, duration : 0});
	});
	$(past).style.zIndex = 997;
	$('logo').innerHTML = preLogo + logoText  + afterLogo;
	
	/*pe = new PeriodicalExecuter(topPageEffect, effectTime);*/
	
	return false;
}

function goId(id){
	if(id == past) return false;
	$(past).style.zIndex = idToNum[past];
	$(id).style.zIndex = 997;
	new Effect.Fade('flowMenu', {from : 1.0, to : 0.0, duration : 0.2, afterFinish : function(){
		$('flowMenu').hide();
	}});
	
	els.each(function(name, no){
		new Effect.MoveBy(name, position[past]['y'] - position[id]['y'], position[past]['x'] - position[id]['x'],
			{duration : 2, afterFinish : function(){
				$('flowMenu').show();
				new Effect.Opacity('flowMenu', { from:opacity, to:opacity, duration : 0});
			}
		});
	});
	
	past = id;
	return false;
}

function reset(){
	$('logo').innerHTML = logoText;
	
	new Effect.Fade('flowMenu', {from : 1.0, to : 0.0, duration : 0.2, afterFinish : function(){
		$('flowMenu').hide();
	}});
	
	var nowX = position[past]['x'];
	var nowY = position[past]['y'];
	var oldX = new Object();
	var oldY = new Object();
	
	els.each(function(name, no){
		oldX[name.id] = position[name.id]['x'];
		oldY[name.id] = position[name.id]['y'];
		position[name.id]['x'] = _WIDTH_ * Math.random();
		position[name.id]['y'] = _HEIGHT_ * Math.random();
	});
	
	els.each(function(name, no){
		new Effect.MoveBy(name,
			-oldY[name.id] + position[name.id]['y'] - position[past]['y'] + nowY,
			-oldX[name.id] + position[name.id]['x'] - position[past]['x'] + nowX,
			{duration : 2, afterFinish : function(){
				$('flowMenu').show();
				$('logo').innerHTML = preLogo + logoText + afterLogo;
			}}
		);
	});
	return false;
}

var chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ_0123456789:][-";

function topPageEffect(){
	var _char = chars.charAt(Math.floor(chars.length * Math.random()));
	var _id = "id" + count;
	new Insertion.Bottom('ground', '<div id="' + _id + '" style="font-size : ' + 12 + Math.floor(Math.random() * 12) + 'px; position : absolute;">' + _char + '</div>');
	$(_id).style.left = 800 * Math.random() + "px";
	$(_id).style.top = 600 * Math.random() + "px";
	$(_id).style.zIndex = 1000 + count;
	new Effect.Fade(_id, {
		from : 1.0, to : 0.0, duration : (1.5 + 2.5 * Math.random()), afterFinish : function(){
			new Element.remove(_id);
		}
	});
	count++;
	
	return false;
}