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

//non ajax version

function Tabs(array,options){
	
	//Definition
	this.tabtop="tabtop"; 					//Tab-container's id
	this.cont="tabcontents";					//Contents-container's id
	//this.tab_ids=["c_tab01","c_tab02","c_tab03","c_tab04"];		//List of Tab's filename(without extension)
	this.image_path="http://tokyo.iac.ac.jp/common/image/";				//Path to Tabs
	this.image_rollover="_r";				//Postposition of roll-over 
	this.image_current="_c";					//Postposition of current 
	this.image_ext=".png";					//Extension of images
	this.cont_postfix="_contents";			//postfix of  target area's id 
	this.old_tabname="";
	
	//Customize
	this.skip=true;							//If true,skip effect at first time
	this.duration=0.3; 						//Duration of Fading and Appearing effect 
	this.zindex=50;						//Base value of tab's z-index
	
	//Properties
	this.current="";
	this.targ="";
	
	this.tab_ids=array;
	if(options){
		for(var prop in options){
			this[prop]=	options[prop];
		}
	}
	//Functions
	this.initialize=function(){
		if(!$(this.tabtop)) return false;
		for(i=0,L=this.tab_ids.length;i<L;i++){
			var id=this.tab_ids[i];

			//Put A tag
			var tab=document.createElement("a");
			$(this.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",this.click.bind(this),false);
			
		}

		//Choose default tab
		this.current=this.tab_ids[0];
		this.click(this.tab_ids[0]);
	}
	this.click=function(e){
		id=(typeof e=="string") ? e:Event.element(e).id;//Adapt for both id-name and event
		if(!$(id)) return false;
		
		this.old_tabname=this.current;
		
		//tab change
		$(this.current).className=this.current;
		$(id).className=id+this.image_current;
		this.current=id;
		
		//tab contents change
		this.targ=id;
		if(this.skip){
			this.appear();
		} else {
			var closing=new Effect.Fade(this.cont,{duration:this.duration});
			effectWatcher(closing,this.appear.bind(this));
		}
		
	}
	this.appear=function(){
 	  try{
		$(this.old_tabname+this.cont_postfix).style.display="none";
		$(this.targ+this.cont_postfix).style.display="block";
		this.old_tabname=this.targ;
		
		if(this.skip){
			$(this.cont).style.display="block";
			this.skip=false;
		} else {
			new Effect.Appear(this.cont,{duration:this.duration});
		}
	  }catch(e){}
		
		
	}
	this.setstyle=function(){		//output Stylesheet		
		
		var zindex=this.zindex;
		var folder=this.image_path;
		var ext=this.image_ext;
		var rollover=this.image_rollover;
		var current=this.image_current;

		var css="";
		for(i=0,L=this.tab_ids.length;i<L;i++){
			var id=this.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#"+this.cont+"{z-index:"+(zindex+25)+"}";
			
			if(i==0) {
				css=css+"div#"+id+this.cont_postfix+"{display:block;}";
				
			} else {
				css=css+"div#"+id+this.cont_postfix+"{display:none;}";
			}
			
		}
		return css;
	}
	this.preload=function(){
		//Preload of current and rollover image
		for(i=0,L=this.tab_ids.length;i<L;i++){
			
			(new Image()).src=this.image_path+this.tab_ids[i]+this.image_rollover+this.image_ext;
			(new Image()).src=this.image_path+this.tab_ids[i]+this.image_current+this.image_ext;
		}
	}
}

var tabs={
	start:function(array){
		if(array.length<1) return false;
		
		var tobj=new Tabs(array);
		document.write("<style>"+tobj.setstyle()+"<\/style>");
		tobj.preload();
		
		Event.observe(window,"load",tobj.initialize.bind(tobj),false);
	},
	start2:function(array){
		if(array.length<1) return false;
		
		var tobj=new Tabs(array,{tabtop:"tabtop2",cont:"tabcontents2"});
		document.write("<style>"+tobj.setstyle()+"<\/style>");
		tobj.preload();
		
		Event.observe(window,"load",tobj.initialize.bind(tobj),false);
	}
}
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>");
//Event.observe(window,"load",tabs.initialize,false);