// JavaScript Document

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

//non ajax version
// multi-tab version

var Tabs=Class.create()
Tabs.prototype={
	initialize:function(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="/images/";				//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.fade_to=0.1;					//
		this.zindex=50;						//Base value of tab's z-index
		
		//Properties
		this.current="";
		this.targ="";
		this.titles=[];
		
		this.tab_ids=array;
		if(options){
			for(var prop in options){
				this[prop]=	options[prop];
			}
		}
		
		this.setStyle();
		this.preload();
		Event.observe(window,"load",this.load.bind(this),false);
		
	},
	//Functions
	load:function(){
		if(!$(this.tabtop)) return false;
		var titles=[]
		if(this.titles.length>0) titles=this.titles
		for(i=0,L=this.tab_ids.length;i<L;i++){
			var id=this.tab_ids[i];
			var title=(titles[i])?titles[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)");
			tab.setAttribute("title",title);
			//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]);
	},
	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 {
			new Effect.Fade(this.cont,{to:this.fade_to,duration:this.duration,afterFinish:this.appear.bind(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){}
		
		
	},
	setStyle:function(){
		if (this.image_ext==".png" && typeof document.documentElement.style.maxHeight == "undefined") var pngfix=true;

		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 a=[],c=0;
		for(i=0,L=this.tab_ids.length;i<L;i++){
			var id=this.tab_ids[i];
			
			if(pngfix){
				a[c++]="a.";
				a[c++]=id;
				a[c++]="{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=ext;
				a[c++]="',sizingMethod='crop'); background-image:none;}";
				a[c++]="a.";
				a[c++]=id;
				a[c++]=":hover{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=rollover;
				a[c++]=ext;
				a[c++]="',sizingMethod='crop'); background-image:none;}";
				a[c++]="a.";
				a[c++]=id;
				a[c++]=current;
				a[c++]="{filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=current;
				a[c++]=ext;
				a[c++]="',sizingMethod='crop'); background-image:none;}";
				
			} else {
				a[c++]="a.";
				a[c++]=id;
				a[c++]="{ background-image:url(";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=ext;
				a[c++]="); z-index:";
				a[c++]=(zindex-i);
				a[c++]="}";
				a[c++]="a.";
				a[c++]=id;
				a[c++]=":hover{ background-image:url(";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=rollover;
				a[c++]=ext;
				a[c++]=");}";
				a[c++]="a.";
				a[c++]=id;
				a[c++]=current;
				a[c++]="{ background-image:url(";
				a[c++]=folder;
				a[c++]=id;
				a[c++]=current;
				a[c++]=ext;
				a[c++]="); z-index:";
				a[c++]=(zindex+50);
				a[c++]="}";
			}
			a[c++]="div#";
			a[c++]=this.cont;
			a[c++]="{z-index:";
			a[c++]=(zindex+25);
			a[c++]="}";
			
		}
		
		document.write("<style>"+a.join("")+"<\/style>");

	},
	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;
		}
	}
}