var TOPICS_URL = "/topics.html";

var MAX_OUTPUT = 5;		// 最大出力記事数
// トピックスボタン
var topics_buttons = 
	new Array(
		new Array(
			"images/topics_prev.png",			// 
			"images/topics_prev_down.png",	// 
			"images/topics_prev_over.png",	// 
			"images/topics_prev_disable.png"	// 
		),
		new Array(
			"images/topics_next.png",			// 
			"images/topics_next_down.png",	// 
			"images/topics_next_over.png",	// 
			"images/topics_next_disable.png"	// 
		)
	);

//////////////////
// イベント定義 //
//////////////////
$(document).ready(init);

// 初期処理
function init(){

	// 画像の先読み込み
	for(i=0;i<topics_buttons.length;i++){
		for(j=0;j<topics_buttons[i];j++){
			new Image().src = topics_buttons[i][j];
		}
	}

	// 
	$("#top_left").append("<div id=\"top_left_top\"></div>");
	$("#top_left").append("<div id=\"top_left_bottom\"></div>");

	// 初期記事出力
	loadTopics(0);
}


// 記事読み込み
function loadTopics(page){
	// 既存の内容を削除
	$("#top_left_top").empty();
	// ボタン描画
	$("#top_left_top").append(
		"<img src=\"" + topics_buttons[0][3] + "\" id=\"topics_prev_disable\" width=\"127\" height=\"20\" alt=\"前の5件(無効)\" />"
		+ "<img src=\"" + topics_buttons[1][3] + "\" id=\"topics_next_disable\" width=\"127\" height=\"20\" alt=\"次の5件(無効)\" />\n"
	);
	// ローディングテキスト表示
	outputLoadingText();

	$.ajax({
		type: "GET",
		url: TOPICS_URL,
		dataType: "html",
		cashe: false,
		success: function(data) {
					// 記事毎に分割
					arrTopics = data.split("\n\n");
					// 記事出力
					readTopics(page)
				},
		error: function() {
					$("#topics_loading").remove();
					$("#top_left_bottom").empty();
					$("#top_left_bottom").append(
						"データの取得に失敗しました。<br />\n"
						+ "<input type=\"button\" id=\"reload_topics\" value=\"再取得\" />"
					);
					$("#reload_topics").click(function(){ loadTopics(0); });

				}
	});

}

// ローディングテキスト表示
function outputLoadingText(){
	// テキスト表示
	$("#top_left_top").append("<br />\n<div id=\"topics_loading\">読み込み中</div>\n");
	// 透過設定
	$("#topics_loading").css({opacity: "0.75"});
}

// 記事出力
function readTopics(page){

	// ローディングテキスト表示
	outputLoadingText();

	var top_text	= "";		// 出力文字列
	var bottom_text	= "";	// 

	// 前の記事
	if(page > 0){
		top_text += "<a href=\"javascript:readTopics(" + (page-1) + ")\"><img src=\"" + topics_buttons[0][0] + "\" id=\"topics_prev\" width=\"127\" height=\"20\" alt=\"前の5件\" /></a>";
	}else{
		top_text += "<img src=\"" + topics_buttons[0][3] + "\" id=\"topics_prev_disable\" width=\"127\" height=\"20\" alt=\"前の5件(無効)\" />";
	}
	// 次の記事
	if(arrTopics.length > MAX_OUTPUT*(page+1)){
		top_text += "<a href=\"javascript:readTopics(" + (page+1) + ")\"><img src=\"" + topics_buttons[1][0] + "\" id=\"topics_next\" width=\"127\" height=\"20\" alt=\"次の5件\" /></a>\n";
	}else{
		top_text += "<img src=\"" + topics_buttons[1][3] + "\" id=\"topics_next_disable\" width=\"127\" height=\"20\" alt=\"次の5件(無効)\" />\n";
	}


	// リスト開始
	bottom_text += "<ul>\n";
	// 日付と内容を分ける
	for(i=page*MAX_OUTPUT;i<arrTopics.length && i<MAX_OUTPUT*(page+1);i++){
		// 日付と内容分割
		arrTopic = arrTopics[i].split("\n");
		// リスト要素タグ開始
		bottom_text += "<li>\n";
		// 改行を入れながら出力
		for(j in arrTopic){
			// 日付
			if(j==0){
				bottom_text += "<span>" + arrTopic[j] + "</span><br />\n";
			// 内容
			}else{
				bottom_text += arrTopic[j] + "<br />\n";
			}
		}
		// リスト要素タグ終了
		bottom_text += "</li>\n";
	}
	// リスト終了
	bottom_text += "</ul>\n";


	$("#top_left_top").empty();				// 既存の内容を削除
	$("#top_left_top").append(top_text);	// 出力

	$("#top_left_bottom").empty();			// 既存の内容を削除
	$("#top_left_bottom").append(bottom_text);	// 出力

	// イベント登録
	// 前の記事
	$("#topics_prev").mousedown(function(){ changeImage(this, topics_buttons[0][1]); });
	$("#topics_prev").hover(
		function(){ changeImage(this, topics_buttons[0][2]); },
		function(){ changeImage(this, topics_buttons[0][0]); }
	);
	// 次の記事
	$("#topics_next").mousedown(function(){ changeImage(this, topics_buttons[1][1]); });
	$("#topics_next").hover(
		function(){ changeImage(this, topics_buttons[1][2]); },
		function(){ changeImage(this, topics_buttons[1][0]); }
	);

}

// 画像の変更
function changeImage(elem, img){
		elem.src=img;
}