// JavaScript Document
//トップページ　事業、実績イメージ切替用スクリプト


//変数の定義
//var conts = new Array("#worksDesign", "#worksMovie", "#worksMusic", "#worksRestaurant");

//divコンテナを配列に格納するので配列の宣言
var imgs = new Array();

//画像切り替えのdivのclass名
var imgContainer;
var mainImgContainer;
//画像切り替えのdivの個数を取得
var imgContNum = new Array();
//不要var mainImgContNum = new Array();

var container;

//実際に使用するボタンのidもしくはclass名
var prev = ".prevBtn";
var next = ".nextBtn";
var detail = ".detailBtn";
var topDetail = ".topDetail";

//現在表示中のdivに付与するクラス名を定義
var current = "current";

//タイマーID
var timerID = new Array();
//画像切り替えインターバル
var changeIntervalTime = 7000;
//切り替え動作の速さ
var firstContact = 3000;
var changingSpeed = 2000;

//画像切り替えターゲットのID
var targetID;

//トップコンテンツのナンバー画像の変数
var numImgs = new Array("icon_number_01.jpg", "icon_number_02.jpg", "icon_number_03.jpg", "icon_number_04.jpg", "icon_number_05.jpg");
var topImgPass = "images/top/";
var numImg = ".topContentsNavi .topContentsNum img";
var indis = "#topNaviDots ul li";
var indisID = new Array("tc1", "tc2", "tc3", "tc4", "tc5");
var indisClicked;

var ua = navigator.userAgent;

///////////////////////////
//ページがロードされたら
///////////////////////////
$(function() {

	//画像切り替えのdivのclass名
	imgContainer = ".worksBox";
	mainImgContainer = ".mainWorksBox";
	//画像切り替えのdivの個数を取得
	for(var i = 0; i < conts.length; i++) {
		if(i == 0) {
			//トップコンテンツの場合
			imgContNum[i] = $(conts[i] + " " + mainImgContainer).length;
		} else {
			//それ以外
			imgContNum[i] = $(conts[i] + " " + imgContainer).length;
		}
	}
	
	//初期化
	init();
	
	//画像切り替えのボタンの設定
	$(prev).click(function(e) {
		targetID = "#" + $(e.target).closest("ul").prev().attr("id");
		changeImg(targetID, "prev");
	});
	
	$(next).click(function(e) {
		targetID = "#" + $(e.target).closest("ul").prev().attr("id");
		changeImg(targetID, "next");
	});
	
	$(indis).click(function(e) {
		indisClicked = $(indis).index(this);
		changeTopImg(indisClicked);
	});
	
	for(var h=0; h<conts.length; h++) {
		timerID[h] = setTimeout("changeImg('" + conts[h] + "', 'timer')", changeIntervalTime);
	}
});


/////////////
//初期設定
/////////////
function init() {
	for(var h=0; h<conts.length; h++) {
		imgs[h] = new Array();
		//切り替えるdivを順番に配列に格納する
		for(var i=0; i<imgContNum[h]; i++) {
			var pairent = conts[h];
			if(h == 0) {
				container = conts[h] + " " + mainImgContainer + ":nth-child(" + (i+1) + ")";
			} else {
				container = conts[h] + " " + imgContainer + ":nth-child(" + (i+1) + ")";
			}
			imgs[h][i] = $(container);
			//alert(imgs[h][i].attr("class"));
		}
	}
	
	for(var j=0; j<$(indis).length; j++) {
		indisID[j] = $(indis + ":nth-child(" + (j + 1) + ")").attr("id");
	}
	
	//最初に表示されるdivを決める関数の呼び出し
	currentSet();
}


////////////////////////////////////
//最初に表示されるdivを決める関数
////////////////////////////////////
function currentSet() {
	for(var h=0; h<conts.length; h++) {
		//現在表示されているものがある場合、いったんclass名からcurrentを削除する
		for(var i=0; i<imgContNum[h]; i++) {
			imgs[h][i].removeClass("current");
			imgs[h][i].fadeOut();
			if(h != 0) {
				var imgContentsWid = imgs[h][i].width();
				imgs[h][i].css({left: imgContentsWid + "px"});
			}
		}
	
		//ランダムに最初の画像を決めるのでランダムな数字を取得
		var rNum = rand(imgContNum[h]);
		//
		if(h == 0) {
			imgs[h][0].addClass("current");
			$("#topCon1 .mainWorksBox:nth-child(1) img").css({width: "1300px", height: "422px", left: "-161px", top: "-72px"});
			$("#topCon1 .mainWorksBox:nth-child(1) img").animate({width: "978px", height: "318px", left: "0px", top: "0px"}, {duration: 3000});
			imgs[h][0].css({left: "0"}).fadeIn(3000);
			$(numImg).attr("src", topImgPass + numImgs[0]);
			$(indis + ":nth-child(1)").addClass("current");
		} else {
			//取得したランダムなインデックスのdivにclass名currentを付与
			imgs[h][rNum].addClass("current");
//			imgs[h][rNum].css({left: "0"}).fadeIn(firstContact);
			imgs[h][rNum].css({left: "0"});
		}
		
		//詳細ボタンにリンク先のURLをセット。
		urlSet(h, rNum);
	}
}


/////////////////////////////////////////////////////////////
//現在のdivからリンク先を取得し、詳細ボタンのリンク先に設定
/////////////////////////////////////////////////////////////
function urlSet(contNum, targetNum) {
	var url = imgs[contNum][targetNum].children("a").attr("href");
	
	if(contNum == 0) {
		$(conts[contNum] + " + .topContentsNavi " + topDetail + " a").attr("href", url);
	} else {
		$(conts[contNum] + " + .controller " + detail + " a").attr("href", url);
	}
}


/////////////////////////
//ランダムな数字の作成
/////////////////////////
function rand(num) {
	return Math.floor(Math.random()*num);
}


//////////////////////////////////////////////////////////
//画像切り替えボタンがクリックされた時の画像切り替え処理
//////////////////////////////////////////////////////////
function changeImg(tID, vector) {
	
	var containerNumber;
	
	//引数のtIDから切り替えるコンテナの番号を取得
	for(var h=0; h<conts.length; h++) {
		if(conts[h] == tID) {
			containerNumber = h;
		}
	}
	//タイマーがセットされていたらいったん解除する
	if(timerID[containerNumber]) {
		clearTimeout(timerID[containerNumber]);
	}
	
	//変数定義
	var crntClass;
	var crntDivNum;
	var nextDivNum;
	var newNum;
	var direction;
	
	//画像切り替えdivの個数分を全て処理する
	for(var i=0; i<imgContNum[containerNumber]; i++) {
		//現状のclass名を取得
		crntClass = imgs[containerNumber][i].attr("class");
		
		//もしclass名にcurrentが含まれていれば
		if(crntClass.indexOf("current") != -1) {
//			//現在のdivのid名の数字を取得
			crntDivNum = (i + 1);
		}
		//classからcurrentを削除
		imgs[containerNumber][i].toggleClass("current", false);
	}
	
	if(containerNumber != 0) {
		var fadeoutContainerWid = $(tID + " " + imgContainer + ":nth-child(" + crntDivNum + ")").width();
	}
	
	//表示されていたコンテナをフェードアウトする
	if(containerNumber == 0) {
		$(tID + " " + mainImgContainer + ":nth-child(" + crntDivNum + ")").fadeOut(changingSpeed);
		$(indis + ":nth-child(" + (crntDivNum) + ")").toggleClass("current", false);
	} else {
		$(tID + " " + imgContainer + ":nth-child(" + crntDivNum + ")").fadeOut(changingSpeed, function() {$(this).css({left: fadeoutContainerWid + "px", display: "block"})});
	}

	
	//押されたボタンを判断して
	switch(vector) {
		
		//prevボタンなら
		case "prev":
		//現在のcurrentのdivのidの数字から1を引く。（前へ）
		if(crntDivNum != 1) {
			nextDivNum = (crntDivNum - 1);
		}else{
			//もし最少の数字なら、
			//最大の数字にする
			nextDivNum = imgContNum[containerNumber];
		}
		direction = "prev";
		break;
		
		//nextボタンなら
		case "next":
		case "timer":
		//切り替えdivの最大数に達していたら
		if(crntDivNum == imgContNum[containerNumber]) {
			//最小に切り替える
			nextDivNum = 1;
		}else{
			//それ以外は現在の数字に1を足す
			nextDivNum = (crntDivNum + 1);
		}
		direction = "next";
		break;
		
	}
	
	//次に表示するdivのidを生成
	if(containerNumber == 0) {
		newImg = tID + " " + mainImgContainer + ":nth-child(" + nextDivNum + ")";
		$(numImg).attr("src", topImgPass + numImgs[(nextDivNum - 1)]);
		$(indis + ":nth-child(" + (nextDivNum) + ")").addClass("current");
	} else {
		newImg = tID + " " + imgContainer + ":nth-child(" + nextDivNum + ")";
	}
	//divにclass名currentを付与
	$(newImg).addClass("current");
	
	var nextContainerWid = $(newImg).width();
	
	if(direction == "prev") {
		if(containerNumber == 0) {
			$(newImg).fadeIn(changingSpeed);
		} else {
			$(newImg).css({display: "block", left: "-" + nextContainerWid + "px"}).animate({left: "0"}, changingSpeed, "easeInOutCirc");
		}
	} else if(direction == "next") {
		if(containerNumber == 0) {
			$(newImg).fadeIn(changingSpeed);
		} else {
			$(newImg).css({display: "block"}).animate({left: "0"}, changingSpeed, "easeInOutCirc");
		}
	}
	
	//新しいdivのリンク先を取得し、詳細ボタンのリンク先へ設定
	urlSet(containerNumber, (nextDivNum - 1));
	
	//自動切替のタイマーをセット
	timerID[containerNumber] = setTimeout("changeImg('" + conts[containerNumber] + "', 'timer')", changeIntervalTime);
}

//トップのインジケーターがクリックされた時の画像切り替え処理
function changeTopImg(clickedNum) {
	var crntDivNum;
	for(var i=0; i<$(mainImgContainer).length; i++) {
		var crntDivClass = $(mainImgContainer + ":nth-child(" + (i+1) + ")").attr("class");
		if(crntDivClass.indexOf("current") != -1) {
			crntDivNum = i;
			$(mainImgContainer + ":nth-child(" + (i+1) + ")").toggleClass("current", false);
			$(mainImgContainer + ":nth-child(" + (i+1) + ")").fadeOut(changingSpeed);
			$(indis + ":nth-child(" + (i+1) + ")").toggleClass("current", false);
		}
	}
	
	//タイマーがセットされていたらいったん解除する
	if(timerID[0]) {
		clearTimeout(timerID[0]);
	}
	
	$(mainImgContainer + ":nth-child(" + (clickedNum+1) + ")").addClass("current");
	$(mainImgContainer + ":nth-child(" + (clickedNum+1) + ")").fadeIn(changingSpeed);
	$(indis + ":nth-child(" + (clickedNum+1) + ")").addClass("current");
	$(numImg).attr("src", topImgPass + numImgs[clickedNum]);
	
	//新しいdivのリンク先を取得し、詳細ボタンのリンク先へ設定
	urlSet(0, clickedNum);
	
	//自動切替のタイマーをセット
	timerID[0] = setTimeout("changeImg('" + conts[0] + "', 'timer')", changeIntervalTime);
	
}