/*-----------------------------------------------------------
 Original
 http://archiva.jp/web/javascript/tab-menu.html

 Customized by WWW WATCH
 http://hyper-text.org/archives/2007/09/javascript_tab.shtml
------------------------------------------------------------*/

/*--setup--*/
window.onload=function() {
tab.setup = {
   tabs: document.getElementById('navlist').getElementsByTagName('li'),
   
   pages: [
      document.getElementById('tab01'),
      document.getElementById('tab02'),
      document.getElementById('tab03'),
      document.getElementById('tab04')
   ]
}

tab.init();
}
/*--setup end--*/

var tab = {
	init: function(){
		var tabs = this.setup.tabs;
		var pages = this.setup.pages;
		var aImages = document.getElementsByTagName('img');
		var aCarImgs = new Array();
		var iImg = 0;

		for (var i = 0; i < aImages.length; i++) {
			if (aImages[i].className == 'imgover') {
				aCarImgs[iImg] = aImages[i];
				iImg++;
			}
		}

		var num;
		for(num=0; num<tabs.length; num++) {
		   if(tabs[num] === this) break;
		}

		for(i=0; i<pages.length; i++) {
//			if(i !== 0) 
			pages[i].style.display = 'none';
			tabs[i].onclick = function(){ tab.showpage(this); return false; };

			var src = aCarImgs[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);
			hsrc = hsrc.replace('_o_o', '_o');
			src = src.replace('_o'+ftype, ftype);

			aCarImgs[i].setAttribute('hsrc', hsrc);
			aCarImgs[i].onmouseover = function() {
				this.setAttribute('src', this.getAttribute('hsrc'));
			}
//			if(i == 0) {
//				aCarImgs[i].onmouseout = function() {
//					this.setAttribute('src', this.getAttribute('hsrc'));
//				}
//			}
//			else {
				aCarImgs[i].onmouseout = function() {
					this.setAttribute('src', this.getAttribute('src').replace('_o'+ftype, ftype));
				}
//			}
		}
	},
   
	showpage: function(obj){
		var tabs = this.setup.tabs;
		var pages = this.setup.pages;
		var aImages = document.getElementsByTagName('img');
		var aCarImgs = new Array();
		var num;
		var iImg = 0;

		for (var i = 0; i < aImages.length; i++) {
			if (aImages[i].className == 'imgover') {
				aCarImgs[iImg] = aImages[i];
				iImg++;
			}
		}

		for(num=0; num<tabs.length; num++) {
			if(tabs[num] === obj) break;
		}
		for(var i=0; i<pages.length; i++) {
			var src = aCarImgs[i].getAttribute('src');
			var ftype = src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);
			hsrc = hsrc.replace('_o_o', '_o');
			src = src.replace('_o'+ftype, ftype);

			aCarImgs[i].setAttribute('hsrc', hsrc);

			if(i == num) {
				pages[num].style.display = 'block';
				tabs[num].className = 'selected';
				aCarImgs[i].setAttribute('src', hsrc);
				aCarImgs[i].onmouseover = function() {
					this.setAttribute('src', this.getAttribute('hsrc'));
				}	
				
				aCarImgs[i].onmouseout = function() {
					this.setAttribute('src', this.getAttribute('hsrc'));
				}
			}
			else{
				pages[i].style.display = 'none';
				tabs[i].className = null;
				aCarImgs[i].setAttribute('src', src);
				aCarImgs[i].onmouseover = function() {
					this.setAttribute('src', this.getAttribute('hsrc'));
				}	
				
				aCarImgs[i].onmouseout = function() {
					this.setAttribute('src', this.getAttribute('src').replace('_o'+ftype, ftype));
				}
			}

		}
	}
}