// JavaScript Document
$(document).ready(function(){
	$(".free .tagList li.btn").click(function(){
		$(".free").css("display","none");
		$(".template").css("display","block");
		getTemlateList();
	}).hover(
		function(){
			$(this).addClass("hoverOn");
		},
		function(){
			$(this).removeClass("hoverOn");
		}
	)
	$(".template .tagList li.btn").click(function(){
		$(".template").css("display","none");
		$(".free").css("display","block");
	}).hover(
		function(){
			$(this).addClass("hoverOn");
		},
		function(){
			$(this).removeClass("hoverOn");
		}
	)
	
	$(".template .contents .goods-list li").click(function(){
		if(clickFlg){
			if(!$(this).is(".select")){
				$(".template .contents .goods-list li.select").each(function(){
					$(this).find("img").addClass("hover");
					sSrc = $(this).find("img").attr("src");
					aSrc = sSrc.split("_s");
					sHoverSrc = "";
					for(i=0;i<aSrc.length;i++){
						if(i==0){
							sHoverSrc += aSrc[i];
						}else{
							if(i==aSrc.length-1){
								sHoverSrc += aSrc[i];
							}else{
								sHoverSrc += "_o"+aSrc[i];
							}
						}
					}
					$(this).find("img").attr("src",sHoverSrc);
					$(this).removeClass("select");
				});
				$(this).find("img").removeClass("hover");
				
				sSrc = $(this).find("img").attr("src");
				sHoverSrc = sSrc.replace("_o","_s");
				
				$(this).find("img").attr("src",sHoverSrc);
				
				$(this).addClass("select");
				
				type_id = $(this).find(".type_id").val();
				getTemlateList();
			}
		}
	})
	
	
	//ログイン
	$("form[name=topMenu] .index_menu .login").live("click",function(){
		$("form[name=topMenu]").submit();											 
	}).find("img").css("cursor","pointer");

	
	
	//テンプレート一覧
	$(".template-list li.tmp img").live("click",function(){
		template_id = $(this).parent().parent().parent().find(".template_id").val();
		document.location = "?action_customer_TemplateVariationNew=1&template_id="+template_id;
	})
	
	$(".template-list li.btn img").live("click",function(){
		$("form[name=templateSelect] input[name=type_id]").val(type_id);
		$("form[name=templateSelect]").submit();
	})
	
	//後ろのイメージのホバー時の動き
	$(".s2 img").live("mouseover",function(){
		$(this).parent().parent().css("z-index","2");
		$(this).parent().parent().prev(".s1").css("z-index","1");
	})
	$(".s2 img").live("mouseout",function(){
		$(this).parent().parent().css("z-index","1");
		$(this).parent().parent().prev(".s1").css("z-index","2");
	})
	
	
	
})

var type_id = 0;
var clickFlg = false;
function getTemlateList(){
	$(".loading").css("visibility","visible");

	$(".template-list li").remove();
	clickFlg = false;
	$.get(
		"?action_customer_templateBackend=1&type_id="+type_id,
		function(data) {
			$(".loading").css("visibility","hidden");
			$(".template-list li").remove();
			for(i=0;i<data.length;i++){	
				targetData = data[i];
				listHtml  = '<li class="tmp">';
				if(targetData["img2"] != null){
					listHtml += '<div class="s1"><p><img src="'+targetData["img1"]+'"></p></div>';
					listHtml += '<div class="s2"><p><img src="'+targetData["img2"]+'"></p></div>';
				}else{
					listHtml += '<div class="s"><p><img src="'+targetData["img1"]+'"></p></div>';
				}
				listHtml += '<input type="hidden" class="template_id" value="'+targetData["template_id"]+'" />';
				listHtml += '</li>';
				$(".template-list").append(listHtml);
				$(".template-list li:last img").each(function(){
					/*
					$(this).load(function() {			  
						top  = (85-$(this).parent().height())/2;
						left = (85-$(this).parent().width())/2;
						$(this).css("margin",top+"px 0px 0px "+left+"px");
						$(this).css("visibility","visible");
					 });
					*/
					
					$(this).css("visibility","visible");
				});
				clickFlg = true;
			}
			$(".template-list").append('<li class="btn"><p><img height="63" width="129" src="commonNew/images/cloud_make_template_btn_gallery.gif" alt=""></p></li>');
		},
		'json'
	)
}

//ログアウト
function logout()
{
 	location.href = "./?action_customer_Logout=1";
}