/**
 * タブ
 * 
 * Copyright 2011 Hitachi Systems, Ltd.
 */

function Tab(arg) {

	if((!document.getElementById)||(!document.createElement)||(!document.getElementsByTagName)) {
		return;
	}

	var sections;
	var buttonArea;
	var BUTTON_AREA_TAG = "p";
	var SECTION_TAG = "div";
	var normalImages = new Array();

	initialize();


	/**
	 * 初期化
	 */
	function initialize(){
		makeButtons();
		preloadCurrentImages();
		setContentsHeight();
		changeTab(0);
	}


	/**
	 * タブのボタン（クリックする部分）を作る
	 */
	function makeButtons() {

		var area = document.getElementById(arg.areaID);
		var contentsArea = document.getElementById(arg.contentsAreaID);

		sections = getElementsByTagAndClass(area, SECTION_TAG, arg.sectionClass);

		buttonArea = document.createElement(BUTTON_AREA_TAG);
		buttonArea.id = arg.buttonAreaID;

		var sectionTitle;
		var button;
		var tmp;

		for(var i=0; i<sections.length; i++) {
			sectionTitle = sections[i].getElementsByTagName(arg.sectionTitleTag)[0];

			//sectionTitleの子要素が、aではない
			if((sectionTitle.childNodes[0].tagName == null)
			 ||(sectionTitle.childNodes[0].tagName.toLowerCase() != "a")){
				button = document.createElement("a");
				button.innerHTML = sectionTitle.innerHTML;
			} else {
				button = sectionTitle.childNodes[0].cloneNode(true);
			}

			//Firefoxでは、name属性を設定しておかないと
			//マウスオーバー時に下線が表示される。
			if((document.hasAttribute) && (!button.hasAttribute("name"))) {
				button.setAttribute("name", "name" + i);
			}

			buttonArea.appendChild(button);

			if(arg.trigger == "over") {
				addListener(button, "mouseover", button_eventHandler, false);
			} else {
				addListener(button, "click", button_eventHandler, false);
			}

			if(sectionTitle.getElementsByTagName("img").length > 0) {
				normalImages.push(sectionTitle.getElementsByTagName("img")[0].getAttribute("src"));
			}
			sectionTitle.style.display = "none";
		}
		area.insertBefore(buttonArea, contentsArea);
	}


	/**
	 * 選択状態用の画像を先にロードしておく
	 */
	function preloadCurrentImages() {
		var images = arg.currentImages;
		for(var i=0; i<images.length; i++) {
			var image = new Image();
			image.setAttribute("src", images[i]);
		}
	}


	/**
	 * コンテンツエリアの高さを設定する
	 */
	function setContentsHeight() {
		if((!arg.contentsAreaHeight) || (arg.contentsAreaHeight == "")) {
			return;
		}
		var contentsArea = document.getElementById(arg.contentsAreaID);
		contentsArea.style.height = arg.contentsAreaHeight;

		if((!arg.contentsAreaOverflow) || (arg.contentsAreaOverflow == "")) {
			return;
		}
		contentsArea.style.overflow = arg.contentsAreaOverflow;
	}


	/**
	 * タブをクリック or マウスオーバー
	 * @param event MouseEvent
	 */
	function button_eventHandler(event) {
		var button = (event.target || event.srcElement);
		while((button.tagName.toLowerCase() != "a")&&(button.tagName.toLowerCase() != "body")) {
			button = button.parentNode;
		}
		if(button.tagName.toLowerCase() == "a") {
			changeTab(getCurrentIndex(button));
		}
	}


	/**
	 * タブを切り替え
	 * @param tabIndex タブの番号
	 */
	function changeTab(tabIndex) {

		var buttons = buttonArea.getElementsByTagName("a");
		var buttonImage;

		for(var i=0; i<sections.length; i++) {
			buttonImage = buttons[i].getElementsByTagName("img")[0];
			if(i == tabIndex) {
				if(i == 0) {
					buttons[i].className = "Current FirstItem";
				} else {
					buttons[i].className = "Current";
				}
				sections[i].style.display = "block";
				if(buttonImage) {
					buttonImage.setAttribute("src", arg.currentImages[i]);
				}
			} else {
				if(i == 0) {
					buttons[i].className = "Normal FirstItem";
				} else {
					buttons[i].className = "Normal";
				}
				sections[i].style.display = "none";
				if(buttonImage) {
					buttonImage.setAttribute("src", normalImages[i]);
				}
			}
		}
	}


	/**
	 * 現在選択しているタブの番号を取得
	 * @param currentButton ボタン(a要素)
	 * @return 選択しているタブの番号
	 */
	function getCurrentIndex(currentButton) {

		var buttons = buttonArea.getElementsByTagName("a");
		for(var i=0; i<buttons.length; i++) {
			if(buttons[i] == currentButton) {
				return i;
			}
		}
		return;
	}


	/**
	 * 特定のタグ/classに一致した要素を取得
	 * @param parentNode 検索範囲の親となる要素
	 * @param tagName 検索するタグ
	 * @param classValue 検索するclass属性
	 * @return 一致した要素の配列
	 */
	function getElementsByTagAndClass(parentNode, tagName, classValue){

		var elementsByTag = parentNode.getElementsByTagName(tagName);

		var elementsByTagAndClass = new Array();

		//タグ名が一致した子がいる
		if(elementsByTag.length > 0){

			//引数のclassが省略されている
			if((classValue == null)||(classValue == "")){

				return elementsByTag;

			}else{

				for(var i=0;i<elementsByTag.length;i++){
					//引数と同じclassが指定されている
					if(hasClass(elementsByTag[i],classValue)){
						elementsByTagAndClass[elementsByTagAndClass.length] = elementsByTag[i];
					}
				}
				return elementsByTagAndClass;
			}
		}
		return elementsByTagAndClass;
	}



	/**
	 * 特定のclassが指定されているか
	 * @param theNode 対象の要素
	 * @param classValue チェックするclass名
	 * @return 指定されているかどうか(true/false)
	 */
	function hasClass(theNode,classValue){

		if(theNode.className != ""){

			var classText = theNode.className;

			//classが一つ
			if(classText.indexOf(" ") == -1){
				if(classText == classValue){
					return true;
				}else{
					return false;
				}

			//classが複数
			}else{
				var classes = classText.split(" ");
				for(var i=0;i<classes.length;i++){
					if(classes[i] == classValue){
						return true;
					}
				}
				return false;
			}
		}
		return false;
	}



	/**
	 * リスナの設定
	 */
	function addListener(elem,eventType,func,cap) {
		if(elem.addEventListener) {
			elem.addEventListener(eventType,func,cap);
		} else if(elem.attachEvent) {
			elem.attachEvent('on' + eventType,func);
		} else {
			return false;
		}
	}
}