//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="images/";				//Path to Tabs
	this.image_rollover="_r";				//Postposition of roll-over 
	this.image_current="_c";					//Postposition of current 
	this.image_ext=".gif";					//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);
			Event.observe(tab,"dom:afterclick",this.click.bind(this),false);
		}

		//Choose default tab
		this.current=this.tab_ids[0];
		this.click(this.tab_ids[0]);
	}
	this.click=function(e){//alert(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));
			var closing=new Effect.Fade(this.cont,{duration:this.duration,afterFinish: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);
		
		return tobj
	}
}
/*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);




Event.observe(document,"dom:loaded",function(){
	if(ifIphone){

		// $A($$("#ch01_contents embed,#ch01_contents object")).each(function(elem){elem.replace('<iframe id="ch01_contents_iframe" width="639" height="349" src="svg/index.html" frameborder="0" allowfullscreen></iframe>');})
		//$$("#ch01_contents xxx").remove();
		
		$("ch02_contents_iframe").setAttribute("src","comic_iphone.html");
		$("ch03_contents_iframe").setAttribute("src","talk_iphone.html");
	}
},false);

Event.observe(window,"load",function(){
	//if($("ch02_contents_iframe")==null) return null;
	setTimeout(function(){
		if(ifIphone){
			new (function (){
				var func =function(){
					location.href="taisou.mp4"
				}.bind(this)
				Event.observe($("ch04"),"click",func,false);
				Event.observe($("ch04"),"dom:afterclick",func,false);
			})()
		}
		new (function (){
			this.defaultSrc=$("ch02_contents_iframe").getAttribute("src");
			var func =function(){
				
					$("ch02_contents_iframe").setAttribute("src",this.defaultSrc);
			}.bind(this)
			Event.observe($("ch02"),"click",func,false);
		})()
		
		new (function (){
			this.defaultSrc=$("ch03_contents_iframe").getAttribute("src");
			var func =function(){
			
					$("ch03_contents_iframe").setAttribute("src",this.defaultSrc);
			}.bind(this)
			Event.observe($("ch03"),"click",func,false);
			Event.observe($("ch03"),"dom:afterclick",func,false);
		})()
		Event.observe($("button_taisou"),"click",function(e){
			e.stop();
			Effect.ScrollTo("head",{duration:0.2,fps:20
				,afterFinish:function(){
					$("ch04").fire("dom:afterclick")
				}
			});
		},false);
		Event.observe($("button_talk"),"click",function(e){
			e.stop();
			Effect.ScrollTo("head",{duration:0.2,fps:20
				,afterFinish:function(){
					$("ch03").fire("dom:afterclick")
				}
			});
		},false);
		
		Event.observe($("button_comic"),"click",function(e){
			e.stop();
			Effect.ScrollTo("head",{duration:0.2,fps:20
				,afterFinish:function(){
					$("ch02").fire("dom:afterclick")
				}
			});
		},false);
	},500);
	
},false)