var SlidePics=[{"banner_pic_id":"1","preset_id":"1","odr":"100","title":"\u3053\u3053\u308d\u3001\u7652\u3055\u308c\u308b\u4f11\u65e5\u3078","content1":"\u5185\u5bb9(\u672c\u6587)\u306f\u5909\u66f4\u3067\u304d\u307e\u305b\u3093\u3002\u63a8\u5968\u753b\u50cf\u30b5\u30a4\u30ba\u306f1000x666\u3067\u3059\u3002","pic1":"27","visible":"1","rowversion":"2"},{"banner_pic_id":"2","preset_id":"2","odr":"200","title":"\u9732\u5929\u98a8\u5442","content1":"\u5185\u5bb9(\u672c\u6587)\u306f\u5909\u66f4\u3067\u304d\u307e\u305b\u3093\u3002\u63a8\u5968\u753b\u50cf\u30b5\u30a4\u30ba\u306f1000x666\u3067\u3059\u3002 ","pic1":"28","visible":"1","rowversion":"2"},{"banner_pic_id":"3","preset_id":"3","odr":"300","title":"\u304a\u6599\u7406\u306e\u6570\u3005","content1":"\u5185\u5bb9(\u672c\u6587)\u306f\u5909\u66f4\u3067\u304d\u307e\u305b\u3093\u3002\u63a8\u5968\u753b\u50cf\u30b5\u30a4\u30ba\u306f1000x750\u3067\u3059\u3002 ","pic1":"29","visible":"1","rowversion":"2"},{"banner_pic_id":"4","preset_id":"4","odr":"400","title":"\u3068\u3063\u3066\u304a\u304d\u306e\u4f11\u65e5\u3092\u5fc3\u3086\u304f\u307e\u3067\u304a\u6109\u3057\u307f\u304f\u3060\u3055\u3044","content1":"\u5185\u5bb9(\u672c\u6587)\u306f\u5909\u66f4\u3067\u304d\u307e\u305b\u3093\u3002\u63a8\u5968\u753b\u50cf\u30b5\u30a4\u30ba\u306f1000x666\u3067\u3059\u3002 ","pic1":"30","visible":"1","rowversion":"2"}];

var AniLayer=function(e) {
	this.element = e;
	this.dat=[];
	this.offset=[0,0]
	this.i=0;
}

AniLayer.prototype.push=function(e) {
	this.dat.push(e);
}

AniLayer.prototype.start=function(){
	var me=this;

	for(var i=0;i<this.dat.length;i++){
		if(! ( 'x' in this.dat[i].params)) continue;

		this.dat[i].params.left=this.dat[i].params.x - this.dat[i].params.width/2 ;
		this.dat[i].params.top=this.dat[i].params.y - this.dat[i].params.height/2 ;

		delete this.dat[i]['params']['x'];
		delete this.dat[i]['params']['y'];
	}

	var options={
		duration:0,
		easing: "linear",
		complete:function(){
			me.nextStep();
		}
	};
	this.element.animate(this.dat[0].params,  options);
}

AniLayer.prototype.nextStep=function(){
	if(this.dat.length-1 <= this.i ) return;

	var me=this;
	var options={
		duration:this.dat[this.i+1].time - this.dat[this.i].time ,
		easing: "linear",
		complete:function(){
			me.nextStep();
		}
	};
	this.element.animate(this.dat[this.i+1].params,  options);
	this.i++;
}

$(window).load(function(){
	var ani=[];
	var time=[0];

	function preset1(time,id,fadeout) {
		var o=time[0];

		var l1=new AniLayer($('#top_banner .s1'));
		l1.push({time:   0   ,params:{left:498-505,top:290-338,opacity:0}});
		l1.push({time:   0+o ,params:{left:498-505,top:290-338,opacity:0}});
		l1.push({time: 400+o ,params:{left:498-505,top:277.8-338,opacity:1}});
		l1.push({time:2400+o ,params:{left:498-505,top:215.3-338,opacity:1}});
		if(fadeout)	l1.push({time:2900+o ,params:{left:498-505,top:200-338,opacity:0}});

		var s8=new AniLayer($('#top_banner .s8'));
		s8.push({time:   0   ,params:{x:-529.60 ,y:137.55,width:1019.25,height:74.05,opacity:0.0}});
		s8.push({time:   0+o ,params:{x:-529.60 ,y:137.55,width:1019.25,height:74.05,opacity:0.0}});
		s8.push({time: 400+o ,params:{x:-529.60 ,y:137.55,width:1019.25,height:74.05,opacity:0.5}});
		s8.push({time: 800+o ,params:{x: 474.65 ,y:137.55,width:1019.25,height:74.05,opacity:0.5}});
		s8.push({time:2400+o ,params:{x: 474.65 ,y:137.55,width:1019.25,height:74.05,opacity:0.5}});
		if(fadeout) s8.push({time:3000+o ,params:{x: 474.65 ,y:137.55,width:1019.25,height:74.05,opacity:0.0}});
		
		var l7=new AniLayer($('#top_banner .s24'));
		l7.push({time:   0   ,params:{x:697.65 ,y:136.00 ,width:433,height:80,opacity:0}});
		l7.push({time: 800+o ,params:{x:697.65 ,y:136.00 ,width:433,height:80,opacity:0}});
		l7.push({time: 900+o ,params:{x:697.65 ,y:136.00 ,width:433,height:80,opacity:1}});
		l7.push({time:2400+o ,params:{x:697.65 ,y:136.00 ,width:433,height:80,opacity:1}});
		if(fadeout) l7.push({time:2900+o ,params:{x:697.65 ,y:136.00 ,width:433,height:80,opacity:0}});

		if(fadeout)
			time[0] = 2900 + o;
		else
			time[0] = 2400 + o;
		return [l1,s8,l7];
	}

	function preset2(time,id,fadeout) {
		var l2=new AniLayer($('#top_banner .s2'));
		var o=-2900+time[0];

		l2.push({time:0     ,params:{left:5,top:5 ,width:585.45,height:389.90,opacity:0}});
		l2.push({time:2900+o,params:{left:5, top:5 ,width:585.45,height:389.90,opacity:0}});
		l2.push({time:3600+o,params:{left:5, top:5 , width:589.80,height:392.80,opacity:1}});
		l2.push({time:6400+o,params:{left:5, top:5 , width:608.80,height:405.45,opacity:1}});
		if(fadeout) l2.push({time:6700+o,params:{left:5, top:5 , width:940.10,height:626.10,opacity:0}});

		var l12=new AniLayer($('#top_banner .s9'));
		l12.push({time:0     ,params:{x:793.20 ,y:-287.10 ,width:132,height:542.15,opacity:1}});
		l12.push({time:3600+o,params:{x:793.20 ,y:-287.10 ,width:132,height:542.15,opacity:1}});
		l12.push({time:3900+o,params:{x:793.20 ,y:171 ,width:132,height:484.15,opacity:1}});
		l12.push({time:6400+o,params:{x:793.20 ,y:171 ,width:132,height:484.15,opacity:1}});
		if(fadeout) l12.push({time:6700+o,params:{x:793.20 ,y:171 ,width:132,height:484.15,opacity:0}});

		var s19=new AniLayer($('#top_banner .s19'));
		s19.push({time:0     ,params:{x:790.65 ,	y:215.60 ,	width:151,	height:398,	opacity:0}});
		s19.push({time:4100+o,params:{x:790.65 ,y:215.60 ,width:151,height:398,	opacity:0}});
		s19.push({time:6400+o,params:{x:790.65 , y:215.60 , width:151, height:398, opacity:1}});
		if(fadeout) s19.push({time:6700+o,params:{x:790.65 , y:215.60 , width:151, height:398, opacity:0}});

		if(fadeout)
			time[0]=6700+o;
		else
			time[0]=6400+o;
		return [l2,l12,s19];
	}

	function preset3(time,id,fadeout) {
		var o=-6700+time[0];

		var l3=new AniLayer($('#top_banner .s3'));
		l3.push({time:    0  ,params:{x:467.9 ,y:107.0 ,width:1018.7,height:764.0,opacity:0}});
		l3.push({time: 6700+o,params:{x:467.9 ,y:107.0 ,width:1018.7,height:764.0,opacity:0}});
		l3.push({time: 7200+o,params:{x:467.9 ,y:123.3 ,width:1018.7,height:763.9,opacity:1}});
		l3.push({time:11400+o,params:{x:467.9 ,y:262.6 ,width:1018.7,height:763.9,opacity:1}});
		if(fadeout) l3.push({time:11900+o,params:{x:467.9 ,y:279.0 ,width:1018.7,height:763.9,opacity:0}});

		var s10=new AniLayer($('#top_banner .s10'));
		s10.push({time:    0  , params:{x:1490.85 , y:364.05 , width:1059.30, height:56.05, opacity:0.5}});
		s10.push({time: 7300+o, params:{x:1490.85 , y:364.05 , width:1059.30, height:56.05, opacity:0.5}});
		s10.push({time: 7500+o, params:{x:503.60  , y:364.05 , width:1059.30, height:56.05, opacity:0.5}});
		s10.push({time:11400+o, params:{x:503.60  , y:364.05 , width:1059.30, height:56.05, opacity:0.5}});
		if(fadeout) s10.push({time:11900+o, params:{x:503.60  , y:364.05 , width:1059.30, height:56.05, opacity:0.0}});

		var s17=new AniLayer($('#top_banner .s17'));
		s17.push({time:    0  , params:{x:672.15 , y:363.55 , width:493, height:73, opacity:0.0}});
		s17.push({time: 7500+o, params:{x:672.15 , y:363.55 , width:493, height:73, opacity:0.0}});
		s17.push({time: 7600+o, params:{x:672.15 , y:363.55 , width:493, height:73, opacity:1.0}});
		s17.push({time:11400+o, params:{x:672.15 , y:363.55 , width:493, height:73, opacity:1.0}});
		if(fadeout) s17.push({time:11900+o, params:{x:672.15 , y:363.55 , width:493, height:73, opacity:0.0}});

		if(fadeout)
			time[0]=11400+o;
		else
			time[0]=11900+o;
		return [l3,s10,s17];
	}
	function preset4(time,id,fadeout) {
		var o=-11900+time[0];

		var s11=new AniLayer($('#top_banner .s11'));
		s11.push({time:    0  , params:{x:488.10 , y:209.05 , width:1098.30, height:22, opacity:0.0}});
		s11.push({time:14600+o, params:{x:488.10 , y:209.05 , width:1098.30, height:22, opacity:0.0}});
		s11.push({time:15100+o, params:{x:488.10 , y:209.05 , width:1098.30, height:22, opacity:0.5}});
		s11.push({time:16200+o, params:{x:488.10 , y:209.05 , width:1098.30, height:22, opacity:0.5}});
		if(fadeout) s11.push({time:16700+o, params:{x:488.10 , y:209.05 , width:1098.30, height:22, opacity:0}});

		var s26=new AniLayer($('#top_banner .s26'));
		s26.push({time:    0  , params:{x:476.10 , y:224.05 , width:711.00, height:34.00, opacity:0.0}});
		s26.push({time:14600+o, params:{x:476.10 , y:224.05 , width:711.00, height:34.00, opacity:0.0}});
		s26.push({time:15100+o, params:{x:476.10 , y:208.05 , width:711.00, height:34.00, opacity:1.0}});
		s26.push({time:16200+o, params:{x:476.10 , y:208.05 , width:711.00, height:34.00, opacity:1.0}});
		if(fadeout) s26.push({time:16700+o, params:{x:476.10 , y:208.05 , width:711.00, height:34.00, opacity:0}});

		var s13=new AniLayer($('#top_banner .s13'));
		s13.push({time:    0  , params:{x:194.05 , y:227.05 , width:316.00, height:383.00, opacity:0.0}});
		s13.push({time:15600+o, params:{x:194.05 , y:227.05 , width:316.00, height:383.00, opacity:0.0}});
		s13.push({time:16200+o, params:{x:194.05 , y:227.05 , width:316.00, height:383.00, opacity:1.0}});
		if(fadeout) s13.push({time:16700+o, params:{x:194.05 , y:227.05 , width:316.00, height:383.00, opacity:0}});

		var l4=new AniLayer($('#top_banner .s4'));
		l4.push({time:0      ,params:{x:476.3 ,y:207.3 ,width:1000,height:666,opacity:0}});
		l4.push({time:11900+o,params:{x:476.3 ,y:207.3 ,width:1000,height:666,opacity:0}});
		l4.push({time:12400+o,params:{x:476.3 ,y:194.3 ,width:1000,height:666,opacity:1}});
		l4.push({time:16200+o,params:{x:476.3 ,y: 97.3 ,width:1000,height:666,opacity:1}});
		if(fadeout) l4.push({time:16700+o,params:{x:476.3 ,y: 97.3 ,width:1000,height:666,opacity:0}});

		if(fadeout) {
			time[0]=16700+o;
		}else{
			time[0]=16200+o;
		}
		return [s11,s26,s13,l4];
	}

	function slide(time,id,fadeout) {
		var o=time[0];

		var s1=new AniLayer($('#slide'+id));
		s1.push({time:   0  , params:{opacity:0.0}});
		s1.push({time:   0+o, params:{opacity:0.0}});
		s1.push({time: 500+o, params:{opacity:1.0}});
		s1.push({time:4500+o, params:{opacity:1.0}});
		if(fadeout) 
			s1.push({time:5000+o, params:{opacity:0.0}});

		var s2=new AniLayer($('#slide'+id+' img'));
		s2.push({time:   0  , params:{x:470 ,y:210 ,width:940    ,height:420}});
		s2.push({time:   0+o, params:{x:470 ,y:210 ,width:940    ,height:420}});
		s2.push({time:5000+o, params:{x:470 ,y:210 ,width:940*1.1,height:420*1.1}});

		if(fadeout) {
			time[0]=5000+o;
		}else{
			time[0]=4500+o;
		}
		return [s1,s2];
	}

	var presets={
		"0":slide ,
		"1":preset1 , "2" : preset2 ,
		"3":preset3 , "4" : preset4
	}

	for(i=0;i<SlidePics.length;i++) {
		var pic_id=SlidePics[i]['banner_pic_id'];
		var pid=SlidePics[i]['preset_id'];
		var proc=presets[pid];
		var is_fade= i<SlidePics.length-1;

		ani=ani.concat(proc(time,pic_id,is_fade));
	}

	for(var i=0;i<ani.length;i++) {
		ani[i].start();
	}
});
function create_banner_iamge() {
	var s='';

	for(i=0;i<SlidePics.length;i++) {
		var pic_id=SlidePics[i]['banner_pic_id'];
		var pid=SlidePics[i]['preset_id'];
		if(pid==3) {
			s+='<img src="image.php?id='+ SlidePics[i]['pic1'] +'&c=1&w=1000&h=750" alt="" class="s' + pid + '" />';
		}else if(pid!=0) {
			s+='<img src="image.php?id='+ SlidePics[i]['pic1'] +'&c=1&w=1000&h=666" alt="" class="s' + pid + '" />';
		}else{
			s+='<div class="slide" id="slide'+pic_id+'">';
			s+=' <img src="image.php?id='+ SlidePics[i]['pic1'] +'&c=1&w=940&h=420" class="picture" alt="">';

		if(SlidePics[i]['content1']!='') {
				s+=' <div class="comment-bg">' + SlidePics[i]['content1'] + '</div>';
				s+=' <div class="comment-text">' + SlidePics[i]['content1'] + '</div>';
		}
			s+='</div>';
		}
	}

	s+='<div class="s8"></div>';
	s+='<div class="s9"></div>';
	s+='<img src="top-banner/s24.png" alt="" class="s24" />';
	s+='<img src="top-banner/s19.png" alt="" class="s19" />';
	s+='<div class="s10"></div>';
	s+='<div class="s11"></div>';
	s+='<img src="top-banner/s17.png" alt="" class="s17" />';
	s+='<img src="top-banner/s13.png" alt="" class="s13" />';
	s+='<img src="top-banner/s26.png" alt="" class="s26" />';

		document.write(s);
}