// ---------------------------------------------------------------
// system_108.js
// beatmaniaIIDX music score publish system
// ---------------------------------------------------------------
// COPYRIGHT (C) 2006 T108-FACTORY(HYU-GA) HTTP://PARK1.WAKWAK.COM/~bm2dx/
// KAISEKI SINAIDE- (^^; TAISITA PROGRAM JA NAI KARA ...

// Version 2 (server side processing version)

var dataMenu;

function initialize()
{
	// DJ DATA 表示
	var idx = djData.length - 1;
	$("pt_sp").innerHTML = djData[idx].djpsp;
	$("pt_dp").innerHTML = djData[idx].djpdp;
	$("pt_total").innerHTML = djData[idx].djpsp + djData[idx].djpdp;
	$("ct_sp").innerHTML = djData[idx].countsp;
	$("ct_dp").innerHTML = djData[idx].countdp;
	$("ct_total").innerHTML = djData[idx].countsp + djData[idx].countdp;
	
	// メニュー機能生成
	dataMenu = new DataSelectMenu();
	dataMenu.add("sp", "sp_tr", "sp_normal", "sp_active", "iidx13sp");
	dataMenu.add("dp", "dp_tr", "dp_normal", "dp_active", "iidx13dp");
	
	$("historyIcon").onclick = toggleGraph;
	
	// データロード
	$("sp").onclick();
}

function toggleAllComments()
{
	var comms = document.getElementsByName("comment");
	var newStyle = (comms[0].style.display == "" ? "none" : "");
	
	for (var i = 0; i < comms.length; i++)
	{
		comms[i].style.display = newStyle;
	}
}

var GRAPH_PLOTTED = false;
function toggleGraph()
{
	if (!GRAPH_PLOTTED)
	{
		GRAPH_PLOTTED = true;
		drawGraph();
	}
	
	var elem = $("iidxCanvas");
	elem.style.display = (elem.style.display == "" ? "none" : "");
}

function GetData(sortKey, direction)
{
	setToggleAllCommentsIcon(false);
	
	// Loading Message 表示
	showMessage("Now Loading...");
	
	// データ取得
	var param = "data=" + dataMenu.getCurrentData() + "&key=" + sortKey + "&direction=" + direction;
	var myAjax = new Ajax.Request(
		"../../cgi-bin/iidxScore/iidxScore.cgi", 
		{
			parameters: param, 
			onComplete: GetData_CallBack
		}
	);
}

function GetData_CallBack(r)
{
	$("scoreTableArea").innerHTML = r.responseText;
	
	dataMenu.dataRefreshedProc();
	
	setToggleAllCommentsIcon(true);
	showMessage("");
}

// コメント表示アイコンの設定（マウスカーソル・クリックイベント）
function setToggleAllCommentsIcon(isSet)
{
	if (isSet)
	{
		$("msgIcon").style.cursor = "pointer";
		$("msgIcon").onclick = toggleAllComments;
	}
	else
	{
		$("msgIcon").style.cursor = "";
		$("msgIcon").onclick = null;
	}

}

function showMessage(msg)
{
	var msgBox = $("divLoadingMessage");
	if (msg != "")
	{
		$("loadingMessage").innerHTML = msg;
		msgBox.style.display = "";
		msgBox.style.left = parseInt(document.body.clientWidth / 2 - msgBox.offsetWidth / 2);
		msgBox.style.top = parseInt(document.body.clientHeight / 2 - msgBox.offsetHeight / 2);
	}
	else
	{
		msgBox.style.display = "none";
	}
}

// データ選択メニュー（コンテナ）
function DataSelectMenu()
{
	this.currentMenuIndex = 0;
	this.menuList = new Array();
	
	this.add = function (elemID, elemIDTR, cssNormal, cssActive, dataURL)
	{
		var idx = this.menuList.length;
		this.menuList[idx] = new DataSelectMenuItem(idx, elemID, elemIDTR, cssNormal, cssActive, dataURL, DataSelectMenuItem_OnClick.bind(this));
		this.menuList[idx].setEvent();
	};
	
	function DataSelectMenuItem_OnClick(idx)
	{
		for (var i = 0; i < this.menuList.length; i++)
		{
			this.menuList[i].clearEvent();
			this.menuList[i].activate(false);
		}
		this.menuList[idx].activate(true);
		this.currentMenuIndex = idx;
		
		// データ取得
		GetData("date", "descend");
	}
	
	this.getCurrentData = function ()
	{
		return this.menuList[this.currentMenuIndex].dataURL
	}
	
	this.dataRefreshedProc = function ()
	{
		for (var i = 0; i < this.menuList.length; i++)
		{
			if (i == this.currentMenuIndex)
			{
				continue;
			}
			this.menuList[i].setEvent();
		}
	}
}

// データ選択メニュー（項目）
function DataSelectMenuItem(idx, elemID, elemIDTR, cssNormal, cssActive, dataURL, eventHandler)
{
	this.idx = idx;
	this.itemElement = $(elemID);
	this.itemElementTR = $(elemIDTR);
	this.cssNormal = cssNormal;
	this.cssActive = cssActive;
	this.dataURL = dataURL;
	
	this.fireEvent = eventHandler;
	
	this.setEvent = function ()
	{
		this.itemElement.onclick = DataSelectMenuItem_OnClick.bind(this);
		this.itemElement.style.cursor = "pointer";
		this.itemElement.style.textDecoration = "underline";
		
		this.itemElement.onmouseover = DataSelectMenuItem_OnMouseOver.bind(this);
		this.itemElement.onmouseout = DataSelectMenuItem_OnMouseOut.bind(this);
	};
	
	this.clearEvent = function ()
	{
		this.itemElement.onclick = null;
		this.itemElement.style.cursor = "";
		this.itemElement.style.textDecoration = "";
		
		this.itemElement.onmouseover = null;
		this.itemElement.onmouseout = null;
	}
	
	this.activate = function (isActive)
	{
		if (isActive)
		{
			this.itemElement.className = this.cssActive;
			this.itemElementTR.className = this.cssActive;
		}
		else
		{
			this.itemElement.className = this.cssNormal;
			this.itemElementTR.className = "";
		}
	}
	
	function DataSelectMenuItem_OnClick()
	{
		this.fireEvent(this.idx);
	}
	
	function DataSelectMenuItem_OnMouseOver()
	{
		this.activate(true);
	}
	
	function DataSelectMenuItem_OnMouseOut()
	{
		this.activate(false);
	}

}

function drawGraph()
{
	showMessage("History Data Loading...");
	setTimeout(drawGraph2, 10);
}

function drawGraph2()
{
	var padding_top_down = 16;
	var canvas_x = 400;
	var canvas_y = 240 - padding_top_down;
	
	var jg_p = new jsGraphics("canvas_djp");
	var jg_c = new jsGraphics("canvas_count");
	
	var xScale = new Array();
	
	var d0 = new Date(djData[0].date + " 00:00:00");
	var d1 = new Date(djData[djData.length - 1].date + " 00:00:00");
	
	var dd = d0;
	var d0_time = Math.round(d0.getTime() / 1000 / 60 / 60 / 24);
	var d1_time = Math.round(d1.getTime() / 1000 / 60 / 60 / 24);
	var d1_d0_time = d1_time - d0_time;
	
	while (true)
	{
		var y = dd.getFullYear();
		var m = dd.getMonth() + 1 + 1;
		
		if (m > 12)
		{
			y++;
			m = 1;
		}
		dd = new Date(y, m - 1, 1);
		
		dd_time = Math.round(dd.getTime() / 1000 / 60 / 60 / 24);
		if (dd_time >= d1_time)
		{
			break;
		}
		
		var x = Math.round(canvas_x * (dd_time - d0_time) / d1_d0_time);
		
		y -= 2000;
		y = (y < 10 ? "0" + y : y);
		m = (m < 10 ? "0" + m : m);
		
		xScale[xScale.length] = { yymm: "'" + y + "/" + m, x: x };
	}
	
	
	var unitDJP = 2000;
	var unitCount = 300;
	var max_djp = Math.floor((djData[djData.length - 1].djpsp + djData[djData.length - 1].djpdp) / unitDJP) * unitDJP + unitDJP;
	var max_count = Math.floor((djData[djData.length - 1].countsp + djData[djData.length - 1].countdp) / unitCount) * unitCount + unitCount;
	
	// plot base
	drawGraphBase(jg_p, canvas_x, canvas_y, d0, d1, xScale, padding_top_down, { unit: unitDJP, max: max_djp });
	drawGraphBase(jg_c, canvas_x, canvas_y, d0, d1, xScale, padding_top_down, { unit: unitCount, max: max_count });
	
	// make graph data
	var point_x = new Array();
	var point_countsp_y = new Array();
	var point_countdp_y = new Array();
	var point_count_y = new Array();
	var point_djpsp_y = new Array();
	var point_djpdp_y = new Array();
	var point_djp_y = new Array();
	
	for (var i = 0; i < djData.length; i++)
	{
		// plot x
		var d = Math.round(new Date(djData[i].date + " 00:00:00").getTime() / 1000 / 60 / 60 / 24);
		var x = Math.round(canvas_x * (d - d0_time) / d1_d0_time);
		point_x[i] = x;
		
		// plot y
		point_countsp_y[i] = canvas_y - Math.round((canvas_y - 20) * djData[i].countsp / max_count);
		point_countdp_y[i] = canvas_y - Math.round((canvas_y - 20) * djData[i].countdp / max_count);
		point_count_y[i] = canvas_y - Math.round((canvas_y - 20) * (djData[i].countsp + djData[i].countdp) / max_count);
		
		point_djpsp_y[i] = canvas_y - Math.round((canvas_y - 20) * djData[i].djpsp / max_djp);
		point_djpdp_y[i] = canvas_y - Math.round((canvas_y - 20) * djData[i].djpdp / max_djp);
		point_djp_y[i] = canvas_y - Math.round((canvas_y - 20) * (djData[i].djpsp + djData[i].djpdp) / max_djp);
	}
	
	var graph;
	
	graph = new Array();
	graph[graph.length] = { lineName: "COUNT SP", color: "#7777FF", point_x: point_x, point_y: point_countsp_y };
	graph[graph.length] = { lineName: "COUNT DP", color: "#AAAAFF", point_x: point_x, point_y: point_countdp_y };
	graph[graph.length] = { lineName: "COUNT TOTAL", color: "AAFFFF", point_x: point_x, point_y: point_count_y };
	drawGraphMain(jg_c, graph, canvas_y);
	
	graph = new Array();
	graph[graph.length] = { lineName: "DJP SP", color: "#FF7777", point_x: point_x, point_y: point_djpsp_y };
	graph[graph.length] = { lineName: "DJP DP", color: "#FFAAAA", point_x: point_x, point_y: point_djpdp_y };
	graph[graph.length] = { lineName: "DJP TOTAL", color: "FFFFAA", point_x: point_x, point_y: point_djp_y };
	drawGraphMain(jg_p, graph, canvas_y);
	
	jg_c.paint();
	jg_p.paint();
	
	showMessage("");
}

function drawGraphBase(jg, canvas_x, canvas_y, d0, d1, xScale, padding_top, yScale)
{
	// plot base
	jg.setColor("#CCCCCC");
	jg.setStroke(2);
	jg.drawPolyline(new Array(0, 0, canvas_x, canvas_x), new Array(0, canvas_y, canvas_y, 0));
	
	// plot x scale
	jg.setColor("white");
	jg.setFont("Arial, sans-serif", "8pt", Font.PLAIN);
	
	jg.drawString((d0.getMonth() + 1) + "/" + d0.getDate(), 0, canvas_y);
	jg.drawString((d1.getMonth() + 1) + "/" + d1.getDate(), canvas_x, canvas_y);
	
	jg.setStroke(Stroke.DOTTED);
	for (var i = 0; i < xScale.length; i++)
	{
		jg.setColor("#CCCCCC");
		jg.drawLine(xScale[i].x, 0, xScale[i].x, canvas_y);
		
		jg.setColor("white");
		jg.drawString(xScale[i].yymm, xScale[i].x, 0);
	}
	
	// plot y scale
	jg.setColor("#CCCCCC");
	var unit = yScale.unit;
	while (unit < yScale.max)
	{
		var y = canvas_y - Math.round((canvas_y - padding_top) * unit / yScale.max);
		jg.drawLine(0, y, canvas_x, y);
		
		unit += yScale.unit;
	}
	jg.drawLine(0, padding_top, canvas_x, padding_top);
	
	jg.setColor("white");
	jg.drawString(yScale.max, canvas_x + 3, padding_top);
	
}

function drawGraphMain(jg, graph, canvas_y)
{
	jg.setStroke(2);
	jg.setFont("Arial, sans-serif","8pt", Font.ITALIC_BOLD);
	
	for (var i = 0; i < graph.length; i++)
	{
		jg.setColor(graph[i].color);
		jg.drawPolyline(graph[i].point_x, graph[i].point_y);
		jg.drawString(graph[i].lineName, 3, canvas_y - i * 12 - 16);
	}
}