// JavaScript Document
//////////////////////////////ループする横スライド画像・divビューア サムネイル・カテゴリ分け対応
//////ねじまきデザイン製作所 MIT Licen
/*
 * Copyright (c) 2011 Nezimaki Design Lab
 * Licensed under the MIT:
*/


$(function() {
	
	//***********************************************************************●スマフォ判定関数
	function is_mobile () {
	  var useragents = [
		'iPhone',         // Apple iPhone
		'iPod',           // Apple iPod touch
		'iPad',           // Apple iPad
		'Android',        // 1.5+ Android
		'dream',          // Pre 1.5 Android
		'CUPCAKE',        // 1.5+ Android
		'blackberry9500', // Storm
		'blackberry9530', // Storm
		'blackberry9520', // Storm v2
		'blackberry9550', // Storm v2
		'blackberry9800', // Torch
		'webOS',          // Palm Pre Experimental
		'incognito',      // Other iPhone browser
		'webmate'         // Other iPhone browser
	  ];
	  var pattern = new RegExp(useragents.join('|'), 'i');
	  return pattern.test(navigator.userAgent);
	}
	
	
	//***********************************************************************●変数
	var slideTime = 700; //スライドする時間（ミリ秒）
	var pNum = 0;  //ブロック番号
	var pNumA = 0;
	var pW = 0;    //全ブロックの幅（継ぎ足し含まない）
	var pBW = 0;    //後方分 複製ブロックの幅
	var ispB = true;    //後方分継ぎ足したか
	var marginR = 6;    //画像間隔
	var sW = screen.width;    //スクリーン幅
	var wW = $(window).width();    //ウィンドウ幅
	var pL = $("#pList ul li").length;
	var pXA = [0];    //移動するx座標の配列 -方向への数値は後方
	var isMoving = true;   //移動中か
	var divW = 700;  //divの幅（仮）
	var tWH = 50; //サムネイルの一辺の長さ
	var tMarginR = 7; //サムネイルの間隔
	var tAL = 13; //サムネイルの表示数
	var tPN = 0; 
	var tPL = Math.floor(pL/13); 
	var tPW = (tWH+tMarginR)*tAL; 
	var isL = false; //矢印が左向きか
	var cNum = -1;    //カテゴリ数
	var cAry = [0];   //pNum毎にcNumもしくは-1を格納
	var cTAry = [0];   //カテゴリ毎にトップのpNumを格納
	var isText = false;   //テキストにのっているか
	var isMSIE = false; if($.browser.msie){isMSIE=true}//////////////////////////IEの時
	var urlHref = $(location).attr('href');/////////URL
	var isSF = false; if(is_mobile()){isSF = true;}/////////スマートフォンか
	var startX = 0;/////////スマートフォン用基準点
	if(isSF){sW=2200;}/////////スマートフォン用sW()継ぎ足し用
	
	/////////画像を非表示に
	$("#pBox").css({visibility:"hidden"});
	
	
//***********************************************************************●カスタムカール方向変更
	if(!isSF){////スマフォ判定

		$("#pBox").mousemove(function(e){
			if(e.pageX<wW/2 && isL==true){
				var curSt = String($("#pBox").css('cursor'));
				if(isMSIE){//////////////////////////IEの時
					curSt+=",pointer";
				}else{
					curSt = curSt.split("),").join(')0 64,');
				}
				isL = false;
				$("#pBox").css({cursor:curSt.split("_R").join("_L")});
			}else if(e.pageX>=wW/2 && isL==false){
				var curSt = String($("#pBox").css('cursor'));
				if(isMSIE){//////////////////////////IEの時
					curSt+=",pointer";
				}else{
					curSt = curSt.split("),").join(')105 64,');
				}
				isL = true;
				$("#pBox").css({cursor:curSt.split("_L").join("_R")});
			}
		});
	
	}

	
	
//***********************************************************************●初期設定//スライド
	
  // プリロード
	$.preLoadImages = function() {
		for(var i = 0; i<arguments.length; i++){
			$("<img>").attr("src", arguments[i]);
		}
	}
	
	$("#pList ul li").each(function(i){
		
		//スクリーン幅まで最後尾に複製追加
		if(pW<sW){
			$(this).clone().appendTo("#pList ul");
		}else{
			ispB = false;
		}
		
		var liW = 0;
		//DIVか画像か判定して横幅を抽出
		if($(".cTop div",this).length){
			cNum++;
			cTAry[cNum] = i;
			liW= Number($("div",this).css("width").replace("px",""));
			$("img",this).each(function(ii){
				$.preLoadImages($(this).attr('src'));
			});
		}else if($("div",this).length){
			liW= Number($("div",this).css("width").replace("px",""));
		}
		else{liW = $("img",this).attr("width")}
		pW+= Number(liW)+marginR;
		if(ispB){pBW+= Number(liW)+marginR;}
		
		pXA[i+1]=pW;
		cAry[i] = cNum;
		
		//サムネイル設置
		var thisTW = $("img",this).attr("width");
		var thisTS = 1;
		var thisTH = $("img",this).attr("height");
		var thisTX = 0;
		var thisTY = 0;
		if(thisTW>thisTH){
			thisTS = tWH/thisTH;
			thisTH = tWH;
			thisTW = Math.round(thisTW*thisTS);
			thisTX = (tWH-thisTW)/2;
		}else{
			thisTS = tWH/thisTW;
			thisTW = tWH;
			thisTH = Math.round(thisTH*thisTS);
			thisTY = (tWH-thisTH)/2;
		}
		$("#tList").append("<li><a href='#'></a></li>");
		$("img",this).clone().attr({width:thisTW ,height:thisTH}).css({marginTop:thisTY ,marginLeft:thisTX}).appendTo($("#tList li a")[i]);
	});
	
	
	if(isSF){////スマフォ判定(true)
		//////////////////////////////////スマフォ用 前部分継ぎ足し
		for(var pWSN=pL-1;pWSN>=0;pWSN--){
			var liW = 0;
			var tarLi=$("#pList ul li").eq(pWSN);
			if(startX<sW){
				$(tarLi).clone().prependTo("#pList ul");
			}else{
				break;
			}
			//DIVか画像か判定して横幅を抽出
			if($(".cTop div",tarLi).length){
				liW= Number($("div",tarLi).css("width").replace("px",""));
				$("img",tarLi).each(function(ii){
					$.preLoadImages($(tarLi).attr('src'));
				});
			}else if($("div",tarLi).length){
				liW= Number($("div",tarLi).css("width").replace("px",""));
			}
			else{liW = $("img",tarLi).attr("width")}
			startX+= Number(liW)+marginR;
		}
		
		//////////////////////////////////フリック適用
		$('#pBox').flickSimple( {
			snap:0,
			lock:true,
			ratio: 3,
			duration: 300,
			//onChange: onChangH,
			onAnimationEnd: onMovedH
		});
	}
	if(isMSIE){//////////////////////////IEの時（この処理が必要なのはIE6のみ）
		$("#pList").css("width",pW+pBW);
		$("#tList").css("width",(tWH+tMarginR)*pL);
	}
	cNum=-1;
	if(urlHref.indexOf("#c")!=-1){
		var jumpC = Number(urlHref.slice(urlHref.indexOf("#c")+2,urlHref.length))
		pMove(cTAry[jumpC],0);
	}else{
		if(isSF){////スマフォ判定
			$('#pBox').flickSimple( 'move', -startX,0);
		}
		tChange(0);
		tMove(0); 
		cBtnChange(0);
	}
	
	$("#pBox").delay(500).css({visibility:"visible"});
	


//***********************************************************************●ボタン機能
	if(!isSF){////スマフォ判定
		$("#pBox").click(function(e){
			if(isMoving && isText==false){
				isMoving=false;
				//左右分岐
				if(e.pageX>=wW/2){  
					pNum++;
					if(pNum>pL){
						pNumA = pNum-pL;
					}else{
						pMove(pNum);
					}
				}else{
					pNum--;
					if(pNum<0){
						$("#pList").css({left:-pXA[pL]});
						pNum=pL-1;
					}
					pMove(pNum);
				}
			}
			return false;
		});
	}
	
	$("#tList li a").each(function(i){
		$(this).click(function(){
			pNum = i;
			pMove(i);
			return false;
		});
	});
	
	$(".tL_side a").each(function(i){
		$(this).click(function(){
			tPN += (i*2)-1;
			if(tPN < 0){
				tPN=0;
			}else if(tPN > tPL){
				tPN=tPL;
			}else{
				tMove(tPN);
			}
			return false;
		});
	});

	$("#c_navi a").each(function(i){
		$(this).click(function(){
			pMove(cTAry[i]);
			return false;
		});
	});
	
	$("#pBox p").mouseover(function(){
		isText=true;
	}).mouseout(function(){
		isText=false;
	});
	$("#pBox h2").mouseover(function(){
		isText=true;
	}).mouseout(function(){
		isText=false;
	});
	$("#pBox h3").mouseover(function(){
		isText=true;
	}).mouseout(function(){
		isText=false;
	});

	
//***********************************************************************●スライド移動
	function pMove(n,speed){
		if(!isSF){////スマフォ判定//PC時
			if(speed==undefined){speed=slideTime}
			pNum=n;
			$("#pList").animate({left:-pXA[n]},{easing:'easeOutQuart',duration:speed,complete: function(){
					if(n==pL){
						$("#pList").css({left:0});
						pNum = 0;
					}
					isMoving=true;
					cBtnChange(n);
					tChange(n,speed);
			}});
		}else{
			$('#pBox').flickSimple( 'move', -pXA[n]-startX , speed);
			isMoving=true;
			cBtnChange(n);
			tChange(n,0);
		}
	}
		
//***********************************************************************●サムネイル変更
	function tChange(n,speed){ 
		if(speed==undefined){speed=slideTime}
		if(n >= pL){n-=pL};
		if(speed==undefined){
			speed=slideTime
			$("#hilight").animate({left:n*(tWH+tMarginR)},{easing:'easeOutQuart',duration:speed});
		}else if(speed==0){
			$("#hilight").css({left:n*(tWH+tMarginR)});
		}else{
			$("#hilight").animate({left:n*(tWH+tMarginR)},{easing:'easeOutQuart',duration:speed});
		}
		if(Math.floor(n/tAL)!=tPN){tMove(Math.floor(n/tAL),speed);};
	}
	
	function tMove(n,speed){ 
		tPN=n;
		if(speed==undefined){speed=200;}
		if(speed==0){
			$("#tListBox").css({left:-(n*tPW)});
			if(tPN <= 0){$(".tL_side:eq(0) .outImg").css("display","block");}else{$(".tL_side:eq(0) .outImg").css("display","none");};
			if(tPN >= tPL){$(".tL_side:eq(1) .outImg").css("display","block");}else{$(".tL_side:eq(1) .outImg").css("display","none");};
		}else{
			$("#tListBox").animate({left:-(n*tPW)},{easing:'easeOutQuart',duration:speed,complete: function(){
				if(tPN <= 0){$(".tL_side:eq(0) .outImg").fadeIn(speed);}else{$(".tL_side:eq(0) .outImg").fadeOut(speed);};
				if(tPN >= tPL){$(".tL_side:eq(1) .outImg").fadeIn(speed);}else{$(".tL_side:eq(1) .outImg").fadeOut(speed);};
			}});
		}
	}
	
//***********************************************************************●カテゴリボタン変更
	function cBtnChange(n){ 
		if(cAry[n] != cNum){
			if(n >= pL){n-=pL};
			cNum = cAry[n];
			$("#c_navi img").each(function(i){
				if(cNum==i){
					$(this).attr('src', $(this).attr('src').replace("_normal", "_on"));
				}else{
					$(this).attr('src', $(this).attr('src').replace("_on", "_normal"));
				}
			});
		};
	}
	
//***********************************************************************●リサイズ
	$(window).bind('resize', function() {
		wW = $(window).width();
	});
	
	
//***********************************************************************●スマフォ用関数
	
	function onChangH(){
	}
	
	/////////////////////////////////////////////////////////////////フリック後関数
	function onMovedH(){
		var currX= $('#pBox').flickSimple( 'currentX' );
		
		////////////////////継ぎ足し部分に居るとき
		if(currX > -startX){
			$('#pBox').flickSimple( 'move', currX-pW,0);
		}else if(currX < -pW-startX){
			$('#pBox').flickSimple( 'move', currX+pW,0);
		}
		////////////////////継ぎ足し部分に居るとき
		for(var i=0;i<pL;i++){
			if(-pXA[i]-startX<=currX){
				cBtnChange(i);
				tChange(i,0);
				break;
			}else if(i==pL-1){
				cBtnChange(0);
				tChange(0,0);
			}
		}
	}
	
});