//Ajax script for Tabbed contents 
// written by Arfaetha Lab

var tabs={
	//Definition
	tabtop:"tabtop", 					//Tab-container's id
	cont:"tabcontents",					//Contents-container's id
	tab_ids:["tab4","tab1","tab2","tab3"],		//List of Tab's filename(without extension)
	image_path:"http://www.iac.ac.jp/tokyo/common/image/",				//Path to Tabs
	image_rollover:"_r",				//Postposition of roll-over 
	image_current:"_c",					//Postposition of current 
	image_ext:".png",					//Extension of images
	//Customize
	skip:true,							//If true,skip effect at first time
	duration:0.2, 						//Duration of Fading and Appearing effect 
	zindex:50,							//Base value of tab's z-index
	
	//Properties
	current:"",
	targ:"",
	
	//Functions
	initialize:function(){
		if(!$(tabs.tabtop)) return false;
		for(i=0,L=tabs.tab_ids.length;i<L;i++){
			var id=tabs.tab_ids[i];

			//Put A tag
			var tab=document.createElement("a");
			$(tabs.tabtop).appendChild(tab);
			//Set Attribute
			tab.className=id;
			tab.setAttribute("id",id);
			tab.setAttribute("href","javascript:void(0)");
			//Set click event observing 
			Event.observe(tab,"click",tabs.click,false);
			//Preload of current and rollover image
			(new Image()).src=tabs.image_path+id+tabs.image_rollover+tabs.image_ext;
			(new Image()).src=tabs.image_path+id+tabs.image_current+tabs.image_ext;
		}

		//Choose default tab
		tabs.current=tabs.tab_ids[0];
		tabs.click(tabs.tab_ids[0]);
	},
	click:function(e){
		id=(typeof e=="string") ? e:Event.element(e).id;//Adapt for both id-name and event
		if(!$(id)) return false;
		
		//tab change
		$(tabs.current).className=tabs.current;
		$(id).className=id+tabs.image_current;
		tabs.current=id;
		
		//tab contents change
		tabs.targ=id;
		if(tabs.skip){
			tabs.appear();
		} else {
			var closing=new Effect.Fade(tabs.cont,{duration:tabs.duration});
			effectWatcher(closing,tabs.appear);
		}
		
	},
	msec:function(){
		return (new Date()).getTime()
	},
	appear:function(){
		new Ajax.Request("assets/"+tabs.targ+".xml", {
			method: "get",
			parameters: "cache="+tabs.msec(),
			onSuccess:function(httpObj){
				$(tabs.cont).innerHTML = "";
				$(tabs.cont).innerHTML = httpObj.responseText;
				if(tabs.skip){
					$(tabs.cont).style.display="block";
					tabs.skip=false;
				} else {
					new Effect.Appear(tabs.cont,{duration:tabs.duration});
				}
			}
		});
	},
	setstyle:function(){		//output Stylesheet		
		if(!tabs.tab_ids) return "";
		
		var zindex=tabs.zindex;
		var folder=tabs.image_path;
		var ext=tabs.image_ext;
		var rollover=tabs.image_rollover;
		var current=tabs.image_current;

		var css="";
		for(i=0,L=tabs.tab_ids.length;i<L;i++){
			var id=tabs.tab_ids[i];
			
			//normal style
			css=css+"a."+id+"{ background-image:url("+folder+id+ext+"); z-index:"+(zindex-i)+"}* html a."+id+"{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+folder+id+ext+"',sizingMethod='crop'); background-image:none;}";
			//rollover style
			css=css+"a."+id+":hover{ background-image:url("+folder+id+rollover+ext+");}* html a."+id+":hover{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+folder+id+rollover+ext+"',sizingMethod='crop'); background-image:none;}";
			
			//current style
			css=css+"a."+id+current+"{ background-image:url("+folder+id+current+ext+"); z-index:"+(zindex+50)+"}* html a."+id+current+"{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+folder+id+current+ext+"',sizingMethod='crop'); background-image:none;}";
			
			css=css+"div#"+tabs.cont+"{z-index:"+(zindex+25)+"}";
			
		}
		return css;
	},
	addLoadEvent:function(func){
		var onloadfunc = window.onload;
		if (typeof window.onloadfunc != 'function'){
			window.onload = func;
		} else {
			window.onload = function(){
				onloadfunc();
				func();
			}
		}	
	}
}
function effectWatcher(obj,afterfunc,frequency){ //Effect-object's status listner
	if(!frequency) frequency=200;
	var intv;
	var func=function(){
		if(obj.state=="finished"){
			afterfunc();
			clearInterval(intv);
		}
	}
	intv=setInterval(func,frequency);
}

document.write("<style>"+tabs.setstyle()+"</style>");
tabs.addLoadEvent(tabs.initialize);