//-------------------------------------------
// File Name	: plan_design.js
// Contents		: デザイン
//
// Copyright (c) 1998-2011 studio e-space Inc.
//-------------------------------------------
var windowW = $(window).width();
var windowWhalf = windowW/2;
var plan_pen_x = 400;
var plan_pen_y;
var plan_cup_x = 650;
var plan_cup_y;
var plan_set_flag =0;

$(function(){
	//コップとペンの位置調整
	$('#plan_pen').css({ backgroundPosition : windowWhalf +plan_pen_x+100+'px 550px', 'background-image' : 'url(./images/plan/pen.png)', 'background-repeat':'no-repeat'});
	$('#plan_cup').css({ backgroundPosition : windowWhalf - plan_cup_x-100 +'px 500px', 'background-image' : 'url(./images/plan/cup.png)', 'background-repeat':'no-repeat'});
	
//パーツフェードイン


//ふよふよ開始
	planFloarMove();
	
// END
});



//アバターアニメーション
function plan_avator(i){
	
	switch(i){
		case 0:
			$("#plan_avator").css("background-position","-2px -451px");
			break;

		case 1:

			$("#plan_avator").css("background-position","-318px -451px");
			break;

		case 2:
			$("#plan_avator").css("background-position","-397px -451px");
			break;
	}
}

function planRound1(){
	var Paths = {"arc":[]}
	var type='arc';
	var path = arc(); 

	function arc() {
	return new $.path.arc({
		center: [40,10],	
		radius: 15,    
		start: -180,
		end: 180
	})
	}
	Paths[type].push(path)
	$('#arc .arcset1').animate({path: Paths[type][0] },  { duration: 10000, easing: "linear" });
}
function planRound2(){
	var Paths = {"arc":[]}
	var type='arc';
	var path = arc(); 
	
	function arc() {
	return new $.path.arc({
		center: [50,20],	
		radius: 10,    
		start: -90,
		end: 270
	})
	}
	Paths[type].push(path)
	$('#arc .arcset2').animate({path: Paths[type][0] },  { duration: 10000, easing: "linear" });
}
	
function planRound3(){
	var Paths = {"arc":[]}
	var type='arc';
	var path = arc(); 
	
	function arc() {
	return new $.path.arc({
		center: [40,40],	
		radius: 25,    
		start: 0,
		end: 360
	})
	}
	Paths[type].push(path)
	$('#arc .arcset3').animate({path: Paths[type][0] },  { duration: 10000, easing: "linear" });
}
	
function planRound4(){
	var Paths = {"arc":[]}
	var type='arc';
	var path = arc(); 
	
	function arc() {
	return new $.path.arc({
		center: [50,-10],	
		radius: 20,    
		start: -30,
		end: 330
	})
	}
	Paths[type].push(path)
	$('#arc .arcset4').animate({path: Paths[type][0] },  { duration: 10000, easing: "linear" });
}
	
// 画像リサイズしたら
$(window).resize(function(){
		var windowW = $(window).width();
		var windowWhalf = windowW/2;
		if(plan_set_flag==1){
			$('#plan_pen').css({'backgroundPosition': windowWhalf + plan_pen_x +'px 425px', 'background-image' : 'url(./images/plan/pen.png)', 'background-repeat':'no-repeat'});
			$('#plan_cup').css({'backgroundPosition': windowWhalf - plan_cup_x +'px  285px', 'background-image' : 'url(./images/plan/cup.png)', 'background-repeat':'no-repeat'});
		}
});		

// スクロール用
function planSet(){
	//画像切り替え
	$('#plan_pen').animate({ backgroundPosition : windowWhalf +plan_pen_x+'px 425px'}, { duration: 500 });
	$('#plan_cup').animate({ backgroundPosition : windowWhalf - plan_cup_x +'px 285px'}, { duration: 500 });
	plan_set_flag =1;
}

function planOut(){
	//画像切り替え
	$('#plan_pen').animate({ backgroundPosition : windowWhalf +plan_pen_x+100+'px 550px'}, { duration: 500 });
	$('#plan_cup').animate({ backgroundPosition : windowWhalf - plan_cup_x-100 +'px 500px'}, { duration: 500 });
	plan_set_flag =0;
}

// アニメーション用
function planRoundOpen(){
	//●が大きくなる
}

function planFloarMove(){
		//ふよふよ動く
		var float_x=0;
		var float_y=0;
		var float_mx=10;
		var float_my=10;
		var float_wh=1;
		float_1w = $('#plan_main .parts1').width();
		float_1h = $('#plan_main .parts1').height();
		float_2w = $('#plan_main .parts2').width();
		float_2h = $('#plan_main .parts2').height();
		float_3w = $('#plan_main .parts3').width();
		float_3h = $('#plan_main .parts3').height();
		float_4w = $('#plan_main .parts4').width();
		float_4h = $('#plan_main .parts4').height();
		var move_x = 0;
		var move_y = 0;
		var new_x = 0;
		var new_y = 0;
		var move_x2 = 0;
		var move_y2 = 0;
		var new_x2 = 0;
		var new_y2 = 0;
		var move_x3 = 0;
		var move_y3 = 0;
		var new_x3 = 0;
		var new_y3 = 0;
		var move_x4 = 0;
		var move_y4 = 0;
		var new_x4 = 0;
		var new_y4 = 0;

//Btn
	$('#bezier .parts1set').hover(function () {
		$('#bezier .parts1').stop().animate({width:'253px',height:'92px',opacity: 1},  { duration: 1500, easing: "linear" });
		$('#bezier .parts1blur').stop().animate({width:'253px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#arc .arcset1').stop(true,false);
		clearInterval(jqueryStartTimer);
	},function () {
		$('#bezier .parts1').stop().animate({width:'253px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#bezier .parts1blur').stop().animate({width:'253px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		jqueryStartTimer = setInterval(planStart1,1800);
	});
	
//Btn
	$('#bezier .parts2set').hover(function () {
		$('#bezier .parts2').stop().animate({width:'225px',height:'103px',opacity: 1},  { duration: 1500, easing: "linear" });
		$('#bezier .parts2blur').stop().animate({width:'225px',height:'103px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#arc .arcset2').stop(true,false);
		clearInterval(jqueryStartTimer2);
	},function () {
		$('#bezier .parts2').stop().animate({width:'225px',height:'103px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#bezier .parts2blur').stop().animate({width:'225px',height:'103px',opacity: 0},  { duration: 1500, easing: "linear" });
		jqueryStartTimer2 =setInterval(planStart2,1500);
	});
	
//Btn
	$('#bezier .parts3set').hover(function () {
		$('#bezier .parts3').stop().animate({width:'200px',height:'92px',opacity: 1},  { duration: 1500, easing: "linear" });
		$('#bezier .parts3blur').stop().animate({width:'200px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#arc .arcset3').stop(true,false);
		clearInterval(jqueryStartTimer3);
	},function () {
		$('#bezier .parts3').stop().animate({width:'200px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#bezier .parts3blur').stop().animate({width:'200px',height:'92px',opacity: 0},  { duration: 1500, easing: "linear" });
		jqueryStartTimer3 =setInterval(planStart3,2000);
	});
	
//Btn
	$('#bezier .parts4set').hover(function () {
		$('#bezier .parts4').stop().animate({width:'225px',height:'98px',opacity: 1},  { duration: 1500, easing: "linear" });
		$('#bezier .parts4blur').stop().animate({width:'225px',height:'98px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#arc .arcset4').stop(true,false);
		clearInterval(jqueryStartTimer4);
	},function () {
		$('#bezier .parts4').stop().animate({width:'225px',height:'98px',opacity: 0},  { duration: 1500, easing: "linear" });
		$('#bezier .parts4blur').stop().animate({width:'225px',height:'98px',opacity: 0},  { duration: 1500, easing: "linear" });
		jqueryStartTimer4 =setInterval(planStart4,2200);
	});
	


var jqueryStartTimer;
if(!jqueryStartTimer) jqueryStartTimer = setInterval(planStart1,2000);
var jqueryStartTimer2;
if(!jqueryStartTimer2) jqueryStartTimer2 = setInterval(planStart2,2000);
var jqueryStartTimer3;
if(!jqueryStartTimer3) jqueryStartTimer3 = setInterval(planStart3,2000);
var jqueryStartTimer4;
if(!jqueryStartTimer4) jqueryStartTimer4 = setInterval(planStart4,2000);
	
function planStart1(){
		float_1t =parseInt($('#plan_main .parts1').css('top'));
		float_1l = parseInt($('#plan_main .parts1').css('left'));
		
		move_r = Math.random()*float_wh;
		small_r = Math.random()*1;
		
		if(move_r<0.2){
			move_r = move_r+1
		} else if(move_r<0.4){
			move_r = move_r+0.5
		} else if(move_r<0.8){
			move_r = move_r+0.3
		} 
		
		float_1wr =float_1w*move_r;
		float_1hr = float_1h*move_r;
		
	 if(move_r==1){
		$("#bezier .parts1").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity:1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts1blur").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity: 0},  { duration: 3000, easing: "linear" });
	 }else if(move_r<1){
		$("#bezier .parts1").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity: 0.5 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts1blur").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity: small_r},  { duration: 3000, easing: "linear" });
	 }else if(move_r>1){
		$("#bezier .parts1").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity: 1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts1blur").stop().animate({ width : float_1wr +'px',height : float_1hr+'px' ,opacity: move_r-1},  { duration: 3000, easing: "linear" });
	 }
		move_x = new_x;
		move_y = new_y;
		planRound1();
	}
	
function planStart2(){
		
		float_2t =parseInt($('#plan_main .parts2').css('top'));
		float_2l = parseInt($('#plan_main .parts2').css('left'));
		
		move_r = Math.random()*float_wh;
		small_r = Math.random()*1;
		
		if(move_r<0.2){
			move_r = move_r+1
		} else if(move_r<0.4){
			move_r = move_r+0.5
		} else if(move_r<0.8){
			move_r = move_r+0.3
		} 

		float_2wr =float_2w*move_r;
		float_2hr = float_2h*move_r;
		
	 if(move_r==1){
		$("#bezier .parts2").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity:1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts2blur").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity: 0 },  { duration: 3000, easing: "linear" });
	 }else if(move_r<1){
		$("#bezier .parts2").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity: 0.5 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts2blur").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity: small_r},  { duration: 3000, easing: "linear" });
	 }else if(move_r>1){
		$("#bezier .parts2").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity: 1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts2blur").stop().animate({ width : float_2wr +'px',height : float_2hr+'px' ,opacity: move_r-1},  { duration: 3000, easing: "linear" });
	 }
		move_x2 = new_x2;
		move_y2 = new_y2;
		planRound2();
}
function planStart3(){
		
		float_3t =parseInt($('#plan_main .parts3').css('top'));
		float_3l = parseInt($('#plan_main .parts3').css('left'));
		
		move_r = Math.random()*float_wh;
		small_r = Math.random()*1;
		
		if(move_r<0.2){
			move_r = move_r+1
		} else if(move_r<0.4){
			move_r = move_r+0.5
		} else if(move_r<0.8){
			move_r = move_r+0.3
		} 
		
		float_3wr =float_3w*move_r;
		float_3hr = float_3h*move_r;
		
	 if(move_r==1){
		$("#bezier .parts3").stop().animate({width : float_3wr +'px',height : float_3hr+'px' ,opacity:1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts3blur").stop().animate({ width : float_3wr +'px',height : float_3hr+'px' ,opacity: 0},  { duration: 3000, easing: "linear" });
	 }else if(move_r<1){
		$("#bezier .parts3").stop().animate({width : float_3wr +'px',height : float_3hr+'px' ,opacity: 0.5 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts3blur").stop().animate({width : float_3wr +'px',height : float_3hr+'px' ,opacity: small_r},  { duration: 3000, easing: "linear" });
	 }else if(move_r>1){
		$("#bezier .parts3").stop().animate({width : float_3wr +'px',height : float_3hr+'px' ,opacity: 1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts3blur").stop().animate({width : float_3wr +'px',height : float_3hr+'px' ,opacity: move_r-1},  { duration: 3000, easing: "linear" });
	 }
		move_x3 = new_x3;
		move_y3 = new_y3;
		planRound3();
}
function planStart4(){
		
		float_4t =parseInt($('#plan_main .parts4').css('top'));
		float_4l = parseInt($('#plan_main .parts4').css('left'));
		
		move_r = Math.random()*float_wh;
		small_r = Math.random()*1;
		
		if(move_r<0.2){
			move_r = move_r+1
		} else if(move_r<0.4){
			move_r = move_r+0.5
		} else if(move_r<0.8){
			move_r = move_r+0.3
		} 
		
		float_4wr =float_4w*move_r;
		float_4hr = float_4h*move_r;
		
	 if(move_r==1){
		$("#bezier .parts4").stop().animate({ width : float_4wr +'px',height : float_4hr+'px' ,opacity:1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts4blur").stop().animate({ width : float_4wr +'px',height : float_4hr+'px' ,opacity: 0},  { duration: 3000, easing: "linear" });
	 }else if(move_r<1){
		$("#bezier .parts4").stop().animate({width : float_4wr +'px',height : float_4hr+'px' ,opacity: 0.5 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts4blur").stop().animate({ width : float_4wr +'px',height : float_4hr+'px' ,opacity: small_r},  { duration: 3000, easing: "linear" });
	 }else if(move_r>1){
		$("#bezier .parts4").stop().animate({width : float_4wr +'px',height : float_4hr+'px' ,opacity: 1 },  { duration: 3000, easing: "linear" });
		$("#bezier .parts4blur").stop().animate({ width : float_4wr +'px',height : float_4hr+'px' ,opacity: move_r-1},  { duration: 3000, easing: "linear" });
	 }
		move_x4 = new_x4;
		move_y4 = new_y4;
		planRound4();
}


var planCount =0;
//切り替わり
function planChangeIn(plan_no){
		//ふよふよ消す
		$('.pointer').fadeOut();
		//●出す
		$('#plan_main #plan_lunch').fadeIn();
		$('#plan_main .info p').eq(plan_no).fadeIn();
		planCount =plan_no;
}

function planChangeOut(){
		//ふよふよ出す
		$('.pointer').fadeIn();
		//●消す
		$('#plan_main #plan_lunch').fadeOut();
		$('#plan_main .info p').fadeOut();

}

	$('#bezier .parts1set').click(function () {
		planChangeIn(0);
	});
	
	$('#bezier .parts2set').click(function () {
		planChangeIn(1);
	});
	
	$('#bezier .parts3set').click(function () {
		planChangeIn(2);
	});
	
	$('#bezier .parts4set').click(function () {
		planChangeIn(3);
	});
	

//Btnclose
	$('#plan_main .close').click(function () {
		planChangeOut();
	});
	
	$('#plan_main .next').click(function () {
		if(planCount<3){
			$('#plan_main .info p').eq(planCount).fadeOut();
			$('#plan_main .info p').eq(planCount+1).fadeIn();
			planCount = planCount+1;
		}else if(planCount<=3){
			$('#plan_main .info p').eq(planCount).fadeOut();
			$('#plan_main .info p').eq(0).fadeIn();
			planCount = 0;
		}
	});
	
	
	$('#plan_main .prev').click(function () {
		if(planCount>0){
			$('#plan_main .info p').eq(planCount).fadeOut();
			$('#plan_main .info p').eq(planCount-1).fadeIn();
			planCount = planCount-1;
		}else if(planCount<=0){
			$('#plan_main .info p').eq(planCount).fadeOut();
			$('#plan_main .info p').eq(3).fadeIn();
			planCount = 3;
		}
	});



//END
}