var d = document;

var news_dt;
var news_dd;

// 追加したい機能
// * javascriptで <dt></dt> の間に <a id="topic_01"></a> - <a id="topic_05"></a> 
//   のように通し番号付のアンカーを埋め込む処理を入れる。
//   タイトルをクリックしたときにその部分に移動できるようにする
//   (ということは今の <span>を<a href="#topic_01">に変更する処理も
//   javascript で埋め込む必要がある?)。
//   でもこれがうまくできれば、IE でホバー時にアンダーラインが表示されない問題も解決される。

// 初期化
window.onload = function() {
	var news = d.getElementById("news");
	news_dt = news.getElementsByTagName("dt");
	news_dd = news.getElementsByTagName("dd");

	for (var i = 0; i < news_dt.length; i++) {
		view_topic(news_dt[i].getElementsByTagName("span")[0], i);

		if (i) {
			news_dt[i].className = "";
			news_dd[i].style.display = "none";
		} else {
			news_dt[i].className = "active";
		}
	}
}

// トピックを表示
// 引数1: elm = クリックされた要素
// 引数2: index = クリックされた要素の通し番号
function view_topic(elm, index) {
	elm.onclick = function() {
		for (var i = 0; i < news_dt.length; i++) {
			news_dt[i].className = "";
			news_dd[i].style.display = "none";
		}

		news_dt[index].className = "active";
		news_dd[index].style.display = "block";
	}
}