/*
   comic.js : コミック機能
 */
function comic() {
	// イメージコンテナ
	var imgContainer = document.getElementById('imgContainer');

	// ボタン
	var btn1 = document.getElementById('comic1');
	var btn2 = document.getElementById('comic2');
	var btn3 = document.getElementById('comic3');
	var btn4 = document.getElementById('comic4');

	// イベントハンドラ
	btn1.onclick = function() {
		// イメージコンテナの src と alt を変更する
		imgContainer.setAttribute("src", "img/comic1.jpg");
		imgContainer.setAttribute("alt", "１コマ目");

		// 背景を変更する
		this.setAttribute("className", "here");
		btn2.setAttribute("className", "off");
		btn3.setAttribute("className", "off");
		btn4.setAttribute("className", "off");

		this.setAttribute("class", "here");
		btn2.setAttribute("class", "off");
		btn3.setAttribute("class", "off");
		btn4.setAttribute("class", "off");

		return false;
	};

	btn2.onclick = function() {
		// イメージコンテナの src と title を変更する
		imgContainer.setAttribute("src", "img/comic2.jpg");
		imgContainer.setAttribute("alt", "２コマ目");

		// 背景を変更する
		this.setAttribute("className", "here");
		btn1.setAttribute("className", "off");
		btn3.setAttribute("className", "off");
		btn4.setAttribute("className", "off");

		this.setAttribute("class", "here");
		btn1.setAttribute("class", "off");
		btn3.setAttribute("class", "off");
		btn4.setAttribute("class", "off");

		return false;
	};

	btn3.onclick = function() {
		// イメージコンテナの src と title を変更する
		imgContainer.setAttribute("src", "img/comic3.jpg");
		imgContainer.setAttribute("alt", "３コマ目");

		// 背景を変更する
		this.setAttribute("className", "here");
		btn1.setAttribute("className", "off");
		btn2.setAttribute("className", "off");
		btn4.setAttribute("className", "off");

		this.setAttribute("class", "here");
		btn1.setAttribute("class", "off");
		btn2.setAttribute("class", "off");
		btn4.setAttribute("class", "off");

		return false;
	};

	btn4.onclick = function() {
		// イメージコンテナの src と title を変更する
		imgContainer.setAttribute("src", "img/comic4.jpg");
		imgContainer.setAttribute("alt", "４コマ目");

		// 背景を変更する
		this.setAttribute("className", "here");
		btn1.setAttribute("className", "off");
		btn2.setAttribute("className", "off");
		btn3.setAttribute("className", "off");

		this.setAttribute("class", "here");
		btn1.setAttribute("class", "off");
		btn2.setAttribute("class", "off");
		btn3.setAttribute("class", "off");

		return false;
	};
}


// イベントローダー
function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		};
	}
}

// メイン ---------------------------------------------------------------
// DOM が有効のブラウザだけこの機能を有効にする
if (document.getElementsByTagName) {
	addLoadEvent(comic);
}