var step = 0;
var step2 = 0;
var guide = new Array();
var guide2 = new Array();
var guide_continue = true;
var post_target;
var post_target_bg;

$(document).ready(function(){
	
	var disp = '';
	if($('body').attr('mode') == 'guide'){
		disp = 'hidden';
	}
	var cont = '<div id="guide_wrap">'
		+ '<div id="guide" ctrl="" date=""><p></p></div>'
		+ '<div id="guide_controll" class="' + disp + '">'
		+ '<button id="button_guide_end">End</button>'
		+ '<button id="button_guide_stop">Stop</button>'
		+ '<button id="button_guide_prev">Prev</button>'
		+ '<button id="button_guide_next">Next</button>'
		+ '<button id="button_guide_reset">Reset</button>'
		//+ '<button id="button_guide_stop">Stop</button>'
		+ '</div>'
		+ '<div id="guide_controll2">'
		+ '<button id="button_next_step">Button</button>'
		+ '<button id="button_lb_close">Button</button>'
		+ '<button id="button_load_content">Button</button>'
		+ '</div>'
		+ '</div>'
		+ '<div id="loader_wrap"></div><div id="loader"><span>Now Loading</span></div>';
		
	$('#header').after(cont);
	
	
	/*
	guide[guide.length] = new Guide({
		target: 'h3:eq(0)',
		message: 'ガイドを開始します。',
	});
	*/
	
	guide[guide.length] = new Guide({
		page: null,
		target: 'h3:eq(0)',
		message: 'このページでは、CO2削減実績を確認できます。',
	});
	
	guide[guide.length] = new Guide({
		page: null,
		target: 'h3:eq(1)',
		message: 'CO2削減実績の内訳も確認できます。',
	});
	
	guide[guide.length] = new Guide({
		page: null,
		target: '.table_1:eq(1)',
		message: '期間毎の内訳も確認できます。',
	});
	
	guide[guide.length] = new Guide({
		page: 'http://www.kurashiki-mechanism.com/co2sys/demo/emissions_detail/',
		date: $('.button_details:eq(0)').attr('date'),
		//date: $('#button_load_content').attr('date'),
		target: '.button_details:eq(0)',
		message: '詳細ページにジャンプします。',
	});
	
	guide[guide.length] = new Guide({
		//target: 'h3:eq(0)',
		target: '.customer_menu_item:eq(0)',
		message: 'このページでは<strong>期間毎</strong>の内訳を確認できます。',
	});
	
	guide[guide.length] = new Guide({
		target: 'h3:eq(0)',
		message: '期間毎の<strong>品目別</strong>の内訳を確認できます。',
	});
	
	guide[guide.length] = new Guide({
		target: 'h3:eq(1)',
		message: '期間毎の<strong>日付別</strong>の内訳を確認できます。',
	});
	
	guide[guide.length] = new Guide({
		page: "http://www.kurashiki-mechanism.com/co2sys/demo/emissions/",
		date: '',
		//target: 'h3:eq(1)',
		target: '.customer_menu_item:eq(0)',
		message: 'お客様トップページに戻ります。',
	});
	
	guide[guide.length] = new Guide({
		target: '.table_1:eq(1)',
		//target: 'h3:eq(1)',
		//target: '.customer_menu_item:eq(0)',
		message: '期間毎の内訳は他の形式でも確認できます。',
	});
	
	guide[guide.length] = new Guide({
		target: '.button_pdf:eq(0)',
		message: '期間毎の内訳はPDFファイルでも確認できます。',
		click: true,
		close: true
	});
	
	
	guide[guide.length] = new Guide({
		target: '#fancybox-close',
		message: '閉じます。',
		click: true
	});
	
	/*
	guide[guide.length] = new Guide({
		target: '.button_graph:eq(0)',
		message: '期間毎の内訳はグラフでも確認できます。',
		click: true,
		close: true
	});
	*/
	/*
	guide[guide.length] = new Guide({
		target: '#fancybox-close',
		message: '閉じます。',
		click: true
	});
	
	
	guide[guide.length] = new Guide({
		target: '.button_graph:eq(0)',
		message: '<b>guide</b>-sub-2',
	});
	*/
	
	
	function init_guide(){
		$('html,body').animate({ scrollTop: 0 }, 'fast');
		//$('#guide_wrap').css('top', '100px');
		//$('#guide_wrap').css('left', '360px');
		$('#guide').html('<p>ガイドを開始します。</p>');
		$('#guide_wrap').slideDown(1000, function(){
			//setTimeout(function(){ guide[0].execute(); }, 2000);
		});
	}
	
	
	
	if($('body').attr('mode') == 'guide' || $('body').attr('mode') == 'guide2'){
		
		init_guide();
		setTimeout(function(){ guide[0].action(); }, 2000);
		//guide[0].action();
		
		
		
		$('#button_next_step').live('click', function(){
			setTimeout(function(){
				step++;
				if(step < guide.length){
					guide[step].action();
				}else{
					
				}
			}, 3000);
		});
		
		
		$('#button_lb_close').live('click', function(){
			setTimeout(function(){ parent.$.fancybox.close(); }, 3000);
		});
		
		
		$('#button_load_content').live('click', function(){
			//setTimeout(function(){ load_content(); }, 5000);
		});
		
		
		
		$('#button_guide_end').live('click', function(){
			/*
			guide_continue = false;
			step = 0;
			$('guide_wrap').hide();
			guide[7].action();
			*/
			location.href = "http://www.kurashiki-mechanism.com/co2sys/demo/emissions/";
		});
		
		$('#button_guide_stop').live('click', function(){
			if(guide_continue){
				guide_continue = false;
				$(this).text('Start');
			}else{
				guide_continue = true;
				$(this).text('Stop');
				guide[step].action();
			}
			//guide_continue = false;
		});
		
		$('#button_guide_prev').live('click', function(){
			guide_continue = true;
			if(step > 0){
				step--;
			}
			var target = guide[step].target;
			var x = $(target).offset().left - 300;
			var y = $(target).offset().top;
			$('html,body').animate({scrollTop: y - 30}, 2000);
			$('#guide_wrap').animate({top: y, left: x}, 1500, "linear");
			
			guide[step].action();
		});
		
		$('#button_guide_next').live('click', function(){
			guide_continue = true;
			
			guide[step].action();
		});
		
		$('#button_guide_reset').live('click', function(){
			guide_continue = true;
			init_guide();
			step = 0;
			setTimeout(function(){ guide[0].action(); }, 2000);
		});
		
		
		
	}
	
	
});






function Guide(params){
	this.page = false;
	this.date = '';
	this.target = null;
	this.message = '';
	this.click = false;
	this.close = false;
	
	this.page = params.page;
	this.date = params.date;
	this.target = params.target;
	this.message = params.message;
	this.click = params.click;
	this.close = params.close;
	
	this.action = function(){
		
		if(guide_continue){
			
			$(post_target).css('background', post_target_bg);
			
			action_1(params.target, params.message, params.click);
			
			if(this.page){
				page = this.page;
				date = this.date;
				setTimeout(function(page, date){ 
					$('#loader_wrap').css('height', $('body').height() + 'px');
					$('#loader_wrap').css('top', '0px');
					$('#loader_wrap').show();
					$('#loader').show();
					
					load_content();
					
				}, 4000);
			}else{
				
			}
			//step++;
			
		}
	};
	
	
	function load_content(){
		$.ajax({
		    url: this.page + this.date,
		    data: {
		        "date": this.date
		    },
		    type: 'POST',
		    success: function(data, status, xhr) {
		    	$('#loader_wrap').css('background', '#fff');
		    	$('#loader_wrap').css('opacity', '1.0');
		    	setTimeout(function(){
			    	$('#loader_wrap').hide();
			    	$('#loader').hide();
			    	$('#loader_wrap').css('background', '#ccc');
			    	$('#loader_wrap').css('opacity', '0.5');
			        $('#container').html(data);
			        $('#container').ready(function(){
				        init_lbox();
				        $('html,body').scroll(0, 20);
				    });
			    }, 3000);
		    }
		});
	}
	
}







function action_1(target, message, click){
	
	var x = $(target).offset().left - 300;
	var y = $(target).offset().top;
	
	post_target = target;
	
	$('#guide > p').fadeOut(1500);
	$('#guide > p').hide();
	
	$('html,body').animate({scrollTop: y - 30}, 2000);
	$('#guide_wrap').animate({top: y, left: x}, 1500, "linear", function(){
		
		post_target_bg = $(target).css('background');
		$(target).css('background', 'orange');
		for(var i=0; i<4; i++){
			$(target).animate({opacity: 0.2}, 300, "linear")
				.animate({opacity: 1.0}, 300, "swing");
		}
		
		setTimeout(function(){
			$('#guide > p').html(message);
			$('#guide > p').html('(' + step + ')' + message);
			$('#guide > p').fadeIn(1500);
		}, 500);
		
		setTimeout(function(){
			if(click){
				$(target).click();
			}
			$('#button_next_step').click();
			
		}, 1500);
		
	});
	
}



function guide_text(str){
	$('#guide > p').fadeOut(1500);
	$('#guide > p').hide();
	$('#guide > p').html(str);
	$('#guide > p').fadeIn(1500);
}