///* ---------------------------------------------------------------
//
//
//	animation js
//	@author coma2
//
//
//----------------------------------------------------------------*/



// ---------------------------------------------------------
// window controller
// ---------------------------------------------------------

var windowController = {
	timer : null,
	flag : 1,
	interval : 100,
	winWidth : 0,
	minWidth : 960,
	offset : 0,
	obj : {},
	contents : document.getElementById('contents'),
	target : function(){
		var box = [];
		box[0] = document.getElementById('container');
		box[1] = document.getElementById('inspiring-box');
		box[2] = document.getElementById('center-box');
		box[3] = document.getElementById('relaxing-box');
		return box;
	},
	setTimer: function() {
		windowController.timer  = setTimeout(windowController.timerAction, windowController.interval);
	},
	stopTimer: function() {
		if ( typeof windowController.timer == 'number' ) {
			clearTimeout(windowController.timer);
			windowController.timer = null;
		}
	},
	checkTimer : function(){
		var currentWidth = windowController.getWidth();
/*if(currentWidth > windowController.minWidth ){*/		
			windowController.stopTimer();
			windowController.setTimer();
/*
}else{
windowController.stopTimer();
windowController.resizeHnadler = null;
}
*/
	},
	timerAction : function(){
		windowController.setWidth();		
		windowController.setMargin();		
	},
	getWidth : function(){
		winWidth = 0;
		if ( document.documentElement && document.documentElement.clientWidth != 0 ) {
			winWidth = document.documentElement.clientWidth;
		} else if ( document.body ) {
			winWidth = document.body.clientWidth;
		}
		return winWidth;
	},
	checkSize : function(){
		winWidth = windowController.getWidth();
		if(winWidth > 960){
			return 'big';	
		}else{
			return 'small';	
		}
	},
	setWidth : function(){
		obj  = windowController.target();
		winWidth = windowController.getWidth();
		if(winWidth > 960){
			for(var i = 0, length = obj.length; i < length; i++){
				obj[i].style.width = winWidth + 'px';
				windowController.contents.style.width=winWidth  * 3 + 'px';
			}
		}else{
			for(var i = 0, length = obj.length; i < length; i++){
				obj[i].style.width = '960px';
				windowController.contents.style.width='2880px';
			}
		}
	},
	checkMargin : function(obj){
		return obj.offsetLeft;
	},
	setMargin : function(){
		offset = windowController.checkMargin(windowController.contents);
		winWidth = windowController.getWidth();
		//windowController.checkCurrent();
		switch(windowController.flag){
			case 0 : 
				setting('0px');
				break;
			case 1 :
				if(winWidth < 960){
					setting('-960px');
				}else{
					setting('-' + winWidth + 'px');
				}
				break;
			case 2 :
				if(winWidth < 960){
					setting('-1920px');
				}else{
					setting('-' + winWidth * 2 + 'px');
				}
				break;
		
			default:
			break;
		}
		
		function setting(num){
			windowController.contents.style.marginLeft = num;
		}
	},
	checkCurrent : function(){
		alert(windowController.flag);
	},
	listener: function (obj, event, func ) {
		if ( obj.addEventListener ) {
			obj.addEventListener( event, func, false );
		} else if ( obj.attachEvent ) {
			event = 'on' + event;
			obj.attachEvent( event, func );
		}
	},
	resizeHandler : function(){
		windowController.listener(window, 'resize', windowController.checkTimer);
	},
	test : function(msg){
		mes = msg ? msg : 'null'
		alert(mes);
	},
	firstSetting : function(){
		windowController.setWidth();
		winWidth = windowController.getWidth();
		if(winWidth > 960){
			windowController.contents.style.marginLeft='-' + windowController.getWidth() + 'px';
			windowController.contents.style.width=windowController.getWidth()  * 3 + 'px';
		}else{
			windowController.contents.style.marginLeft='-960px';
			windowController.contents.style.width='2880px';
		}
	},
	
	/* 	実行
	-------------------------------------------------- */
	init : function(){
			windowController.checkTimer();
			windowController.resizeHandler();
			windowController.firstSetting();
			$animation.$action();
	}
}
windowController.listener(window, 'load', windowController.init);



// ---------------------------------------------------------
// animation 
// ---------------------------------------------------------
var $animation = {
	$contents : {},
	$pos : 0,
	$size : 0,
	$flag : false,
	$gif : '',
	$jpg : '',
	$anim : function (pos, del) {
		del = del ? del : 0;
		$contents = $('#contents');
		$contents.css('width', $animation.$width() * 3);
		$contents
		.delay(del)
		.animate({'margin-left':  pos}, 1100, 'easeOutExpo',
			function(){
			
				$('#bg-layer')
				.stop(true, true)
				.css({'background-color' : 'none', 'width' : 0})
				.removeClass('posR')
				.removeClass('posL');
				
			}
		)  ;
	},
	$checkFlag : function(){
		console.log($animation.$flag)
	},
	$bganim : function(pos, color){
		$('#bg-layer')
		.addClass(pos)
		.stop(true, true)
		.css('background-color' , color)
		.animate({'width' : '100%'}, 1200, 'easeOutCubic');
	},
	$width : function(){
		$size = 	windowController.getWidth();
		if($size < 960){ $size = 960 }
		return $size;		
	},
	$targetArr : function(){
		var $objArr = [];
		$objArr[0] = {
			$elm : $('#relaxing-from'),
			$operator : -1,
			$param : [$('#relaxing-box').find('.recipe-box'), 380]
		}
		return $objArr;
	
	},
	$feedback : function($arr){
		var $element = $animation.$targetArr();
		
		for(var j = 0, $jleng = $element.length; j < $jleng; j++){
		
			//	for(prop in $element[j]){
			//		console.log(prop)
			//	}
		
			$element[j].$elm.click(function(){
				if(!$animation.$flag){
					$animation.$flag = true;
					console.log($element[j].$operator)
					$pos = $animation.$width() * parseInt($element[j].$operator);
					$animation.$anim($pos);
					windowController.flag = 1;
					$animation.$change($element[j].$param[0], $element[j].$param[1]);
				}
				return false;
			});
		}	
	},
	$action : function(){
		
		$(".button").dblclick(function(){
			return false;
		});
		$animation.$opening();
		
//		$animation.$feedback();
		
//		var $element = $animation.$targetArr();
		
		$('#relaxing-from').click(function(){
		//console.log('log' + $animation.$flag)
			if(!$animation.$flag){
				$animation.$flag = true;
				$pos = $animation.$width();
				$animation.$anim(-$pos);
				windowController.flag = 1;
				$animation.$change($('#relaxing-box').find('.recipe-box'), 450);
		//$animation.$checkFlag();
			}
			return false;
		});

		$('#inspiring-from').click(function(){
			if(!$animation.$flag){
				$animation.$flag = true;
				$pos = $animation.$width();
				$animation.$anim(-$pos);
				windowController.flag = 1;
				$animation.$change($('#inspiring-box').find('.recipe-box'), -450);
			}	
			return false;
		});
		$('#relaxing-to').click(function(){
		//console.log('log' + $animation.$flag)
			if(!$animation.$flag){
				$animation.$flag = true;
				$animation.$bganim('posR', '#452325');
				$pos = $animation.$width();
				$animation.$anim(-$pos *2, 650);
				$animation.$change($('#relaxing-box').find('.recipe-box'), -440, 350);
				windowController.flag = 2;
			//$animation.$checkFlag();
			}		
			return false;
		});
		$('#inspiring-to').click(function(){
			if(!$animation.$flag){
				$animation.$flag = true;
				$animation.$bganim('posL', '#FFCF2E');
				$pos = $animation.$width();
				$animation.$anim(0, 650);
				$animation.$change($('#inspiring-box').find('.recipe-box'), 450, 350);
				windowController.flag = 0;
			}	
			return false;
		});
	},
	$opening : function(){
	
	//setInterval(function(){$animation.$checkFlag()}, 1000);
	//$animation.$ie();
	    
		$('#center-box').prepend('<div id="bg-layer"></div>');

		$animation.$change($('#relaxing-box').find('.recipe-box'), 450)
		$animation.$change($('#inspiring-box').find('.recipe-box'), -450)
		$kahlua = $('#kahlua-bottle');
		$glass = $('.glass');

		$kahlua
			.css({
				'width' : 90,
				'height' : 308,
				'top' : 25,
				'left' : 10 
			});		
			
		if ($.support.opacity) {
			$kahlua.css('opacity', 0);
			$glass
			.css('opacity',0)
			.delay(550)
			.animate({
				'opacity' : 1,
				'top' : 298
			}, 600, 'easeOutSine');
			
		}else{
			$kahlua.hide();
			$glass
			.hide()
			.delay(550)
			.show()
			.animate({
				'top' : 298
			}, 600, 'easeOutSine');
		}
		
		$('#contents')
		.delay(550)
		.animate({
			opacity: 1
		}, 600, 'easeOutSine',
			function(){
				
				if ($.support.opacity) {
					$kahlua
						.delay(500)
						.animate({
							opacity: 1,
							'width' : 110,
							'height' : 378,
							'top' : 0,
							'left' : 0
						}, 700, 'easeOutBounce');
				}else{
					$kahlua
						.delay(500)
						.show()
						.animate({
							'width' : 110,
							'height' : 378,
							'top' : 0,
							'left' : 0
						}, 1000, 'easeOutBounce');
				}

				$('.op0')
				.delay(1500)
				.fadeIn('easeOutCirc');
				
				$('.btn')
				.delay(2200)
				.slideDown('slow');
				
				$('#inspiring-box')
					.find('img')
					.css({'opacity': 1});
				
			}
		);
	},
	$ie : function(){
	    //if($.browser.msie && !$.browser.version < 6 ) {
		$('.ddpng').each(function() {
			$(this).css({
				'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(src="' 
				+ $(this).attr('src')
				+ '", sizingMethod="scale");'
			});
		});
	   //}
	},
	$memb : function(){
		var $mem = [];
		$mem[0] = $('#r-recipe01');
		$mem[1] = $('#r-recipe02');
		$mem[2] = $('#r-recipe03');
		$mem[3] = $('#i-recipe01');
		$mem[4] = $('#i-recipe02');
		$mem[5] = $('#i-recipe03');
		var $pos = [170, 442, 710, 10, 265, 550]; 
		
		$animation.$reset($mem, $pos);
	},
	$reset : function($arrMem, $arrLen){
		for(var k = 0, leng = $arrMem.length; k < leng; k++){
			$arrMem[k].css('left' , $arrLen[k]);
		}
	},
	$change : function($target, pos, dur){
		dur = dur ? dur : 0;
		for(var i = 0, $tLeng = $target.length; i < $tLeng; i++){
			$target
			.eq(i)
			.delay(dur + i * 100 )
			.animate({'left': parseInt($target.eq(i).css('left')) + pos}, 1200, 'easeOutBack') 
//		$animation.$memb();
		}
		setTimeout(
			function(){ 
				//console.log($animation.$flag);
				$animation.$flag = false;
			}
		,1200);
	},
	$changePass : function($obj, from, to){
		for(var i = 0, $num = $obj.length; i < $num ;i++){
			var thisHref = $obj.eq(i).attr('src');
			var changePath = thisHref.replace(from, to);
			$obj.eq(i).attr('src',changePath);
		}
	},
	$changeInit: function(){
		$gif = $('.toGif');
		$jpg = $('.toJpg');
		$animation.$changePass($gif,'.png', '.gif');
		$animation.$changePass($jpg,'.png', '.jpg');
		
	},
	$changeReturn: function(){
		$gif = $('.toGif');
		$jpg = $('.toJpg');
		setTimeout(
			function(){ 
				$animation.$changePass($gif, '.gif', '.png');	
				$animation.$changePass($jpg, '.jpg', '.png');
			}
		,100);
	},
	$madeClone : function($this, from, to){
		var $new;	
		var $src;
		for(var i = 0, $num = $this.length; i < $num ;i++){
			$src = $this.eq(i).attr('src');
			$new = $this.clone();
			$new.eq(i).fixPng().attr('src', $src.replace(from, to));
			$this.eq(i).parent().append($new.eq(i));
		}
	}
}


// ---------------------------------------------------------
// fadeIn & show switcher
// ---------------------------------------------------------

$.fn.exShow = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).show();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeIn(duration, callback);
  }
  return this;
}
$.fn.exHide = function(duration, callback) {
  if (!$.support.opacity) {
    $(this).hide();
    if (callback && typeof callback == 'function') {
      callback.call(this);
    }
  } else {
    $(this).fadeOut(duration, callback);
  }
  return this;
}