タブコントロール作成

/**
 * タブコントロール作成
 *
 * <div class="tabControl" alt="タブ文字1">
 *		...
 * </div>
 * <div class="tabControl" alt="タブ文字2">
 *		...
 * </div>
 * <div class="tabControl" alt="タブ文字3">
 *		...
 * </div>
 *
 * @author ao-system
 */
(function(window,document){
	var tabControlArea = [];
	var tabControlButton = [];
	window.addEventListener('load',function(){init();},false);
	function init() {
		tabControlArea = document.getElementsByClassName('tabControl');
		initTabButton();
		initTabArea();
		for (var i = 0; i < tabControlArea.length; i++) {
			(function(i){
				tabControlButton[i].addEventListener('click',function(){tabClick(i);},false);
				tabControlButton[i].addEventListener('mouseover',function(){tabMouseover(i);},false);
				tabControlButton[i].addEventListener('mouseout',function(){tabMouseout(i);},false);
			})(i);
		}
		tabClick(0);
	}
	function initTabButton() {
		for (var i = 0; i < tabControlArea.length; i++) {
			var altElm = document.createTextNode(tabControlArea[i].getAttribute('alt'));
			tabControlButton[i] = document.createElement('div');
			tabControlButton[i].id = 'tabControlButton' + i;
			tabControlButton[i].style.width = '100px';
			tabControlButton[i].style.height = '24px';
			tabControlButton[i].style.fontSize = '13px';
			tabControlButton[i].style.lineHeight = '1em';
			tabControlButton[i].style.color = 'white';
			tabControlButton[i].style.textShadow = '-1px -1px 0 #3f3779';
			tabControlButton[i].style.borderRadius = '8px 8px 0 0';
			tabControlButton[i].style.borderStyle = 'solid';
			tabControlButton[i].style.borderWidth = '1px';
			tabControlButton[i].style.borderColor = '#a1a3b2';
			tabControlButton[i].style.paddingTop = '8px';
			tabControlButton[i].style.textAlign = 'center';
			tabControlButton[i].style.float = 'left';
			tabControlButton[i].style.cursor = 'pointer';
			tabControlButton[i].style.transition = '0.2s';
			tabControlButton[i].appendChild(altElm);
			tabControlArea[0].parentNode.insertBefore(tabControlButton[i],tabControlArea[0]);
		}
		var divClear = document.createElement('div');
		divClear.style.clear = 'both';
		tabControlArea[0].parentNode.insertBefore(divClear,tabControlArea[0]);
	}
	function initTabArea() {
		for (var i = 0; i < tabControlArea.length; i++) {
			tabControlArea[i].id = 'tabControlArea' + i;
			tabControlArea[i].style.borderStyle = 'solid';
			tabControlArea[i].style.borderWidth = '1px';
			tabControlArea[i].style.borderColor = '#a1a3b2';
			tabControlArea[i].style.padding = '0 10px 10px 10px';
		}
	}
	function tabClick(i) {
		tabAreaDisplayNone();
		tabControlArea[i].style.display = 'block';
		tabControlButton[i].style.background = 'linear-gradient(#939eff,#626ccc)';
	}
	function tabAreaDisplayNone() {
		for (var i = 0; i < tabControlArea.length; i++) {
			tabControlArea[i].style.display = 'none';
			tabControlButton[i].style.background = 'linear-gradient(#b3b6c7,#6f7189)';
		}
	}
	function tabMouseover(i) {
		tabControlButton[i].style.opacity = 0.8;
	}
	function tabMouseout(i) {
		tabControlButton[i].style.opacity = 1;
	}
})(window,document);