// JavaScript Document

var touch;

addEventListenerEx('load', function () {

	var urlName = GetURLName();

	nowName = urlName;
	nowLayer = document.getElementById(nowName);
	nowLayer.style.display = 'block';

	ChangeNavi(nowName);

	setInterval(onEnterFrame, parseInt(1000/30)+1);


	document.getElementById((iPad || iPhone) ? 'ustreamBanner' : 'ustream').style.display = 'block';

	touch = (iPad || iPhone) ? new Touch() : null
	
//	var page = document.getElementById('pageLayer');
//	page.addEventListener('touchstart', evtTouch);
//	page.addEventListener('touchmove', evtTouch);
//	page.addEventListener('touchend', evtTouch);
});

function Touch(_id) {
	this.id = _id;
	this.start = {x:null, y:null};
	this.move = {x:null, y:null};

	var div = document.getElementById(_id);
	var start = this.start;
	var move = this.move;
	div.addEventListener('touchstart', function (_e) {
		var touch = _e.touches[0];
		start.x = move.x = touch.pageX;
		start.y = move.y = touch.pageY;
	});
	div.addEventListener('touchmove', function (_e) {
		var touch = _e.touches[0];
		move.x = touch.pageX;
		move.y = touch.pageY;
	});
	div.addEventListener('touchend', function (_e) {
	});
}

//=============================================================================
//
//		フレーム処理
//
//=============================================================================

var nowName = "";
var nowLayer = null;
var inLayer = null;
var outLayer = null;
var inPos, outPos, inTarget, outTaget;

function onEnterFrame() {

	var content = document.getElementById("content");
	var contentSize = content.style.height;

	// レイヤーの入れ替え処理
	if (inLayer != null) {
		var inH = inLayer.offsetHeight;
		var outH = 0;
		if (outLayer)
			outH = outLayer.offsetHeight;
		contentSize = (inH > outH ? inH : outH) + 'px';

		inPos = LayerMoveCalc(inPos, inTarget, 0.25);
		inLayer.style.left = parseInt(inPos)+'px';

		if (outLayer) {
			outPos = LayerMoveCalc(outPos, outTarget, 0.25);
			outLayer.style.left = parseInt(outPos)+'px';
		}

		if (inPos == 0) {
			nowLayer = inLayer;
			inLayer = null;
			if (outLayer) {
				outLayer.style.display = 'none';
				outLayer = null;
			}
		}
	}
	else {
		// レイヤー変更チェック
		var urlName = GetURLName();

		if (urlName != nowName) {
			outPos = 0;
			if (GetNameId(nowName) < GetNameId(urlName)) {
				inPos = 540;
				outTarget = -540;
			}
			else {
				inPos = -540;
				outTarget = 540;
			}
			inTarget = 0;

			inLayer = document.getElementById(urlName);
			inLayer.style.display = 'block';
			inLayer.style.left = inPos+'px';
			outLayer = nowLayer;
			nowName = urlName;
			
			ChangeNavi(urlName);
		}
		// 平常表示
		else {
			// コンテンツレイヤの大外の縦サイズを修正
			nowLayer = document.getElementById(nowName);
			contentSize = nowLayer.offsetHeight+'px';
		}
	}

//	document.title = contentSize;

	if (content.style.height != contentSize) {
		content.style.height = contentSize;
	}
}

function GetURLName() {
	var url = GetURL();
	var name = "";
	if (url.indexOf('#') >= 0)
		name = url.substr(url.indexOf('#')+1) + "Layer";
	if (!GetNameId(name))
		name = "newsLayer";
	return name;
}

function GetNameId(_name) {
	switch (_name) {
		case "newsLayer":			return 1;	break;
		case "biographyLayer":		return 2;	break;
		case "discographyLayer":	return 3;	break;
		case "eventLayer":			return 4;	break;
		case "linkLayer":			return 5;	break;
	}
	return 0;
}

function LayerMoveCalc(_pos, _target, _speed, _max) {
	
	if (_speed == undefined)
		_speed = 0.25;

	if (_pos != _target) {

		var p = _target-_pos;
		var r = p * _speed;
		if (Math.abs(p) >= Math.abs(1+r))
			r += (r < 0) ? -1 : 1;
		if (_max != undefined) {
			if (Math.abs(r) > _max)
				r = (r < 0) ? -_max : _max;
		}
		if (Math.abs(r) > 1)
			return _pos + r;
	}
	return _target;
}


//=============================================================================
//
//		ナビゲーションの表示・変更
//
//=============================================================================

function ChangeNavi(_name) {

	var html = '<ul>';

	if (_name == 'newsLayer')
		html += '<li id="naviNewsOn"></li>';
	else
		html += '<li id="naviNews"><a href="#news"></a></li>';

	html += '<li class="separator"></li>';

	if (_name == 'biographyLayer')
		html += '<li id="naviBiographyOn"></li>';
	else
		html += '<li id="naviBiography"><a href="#biography"></a></li>';

	html += '<li class="separator"></li>';

	if (_name == 'discographyLayer')
		html += '<li id="naviDiscographyOn"></li>';
	else
		html += '<li id="naviDiscography"><a href="#discography"></a></li>';

	html += '<li class="separator"></li>';

	if (_name == 'eventLayer')
		html += '<li id="naviEventOn"></li>';
	else
		html += '<li id="naviEvent"><a href="#event"></a></li>';

	html += '<li class="separator"></li>';

	if (_name == 'linkLayer')
		html += '<li id="naviLinkOn"></li>';
	else
		html += '<li id="naviLink"><a href="#link"></a></li>';

	html += '</ul>';

	var navi = document.getElementById('navi');
	navi.innerHTML = html;
}