// Lineup
// ----------------------------------------------------------------------- //

$(function(){

	(jQuery.support.opacity) ? noIE = 1 : noIE = 0;

	if(noIE){
		$("#lineupBox").animate({"opacity":0}, {duration:0});
		$("#iNav").hide();
	}
	$("#lineupArea").css("background","url(../image/loading.gif) center center no-repeat");
	$('#lineupBox').css("display","none");

		jQuery.data($("#header").get(0), "modal", 0);

});


window.onload = function(){
//jQuery.event.add(window, "load", function(){
//$(function(){

	$("#lineupArea").css("background-image","none");
	$('#lineupBox').css("display","block");

	$('#lineupArea span').pngfix( );

	(jQuery.support.opacity) ? noIE = 1 : noIE = 0;

	var all_line = new Number(0);
	var current_line = new Number(0);

	var flagLR;

	var all_item = $("#lineupMain li").length;	// 全アイテム数
	if (all_item > 3) {

		var all_item_total = all_item * 3;	// 全アイテム数（前後）
		var base_mgn = all_item * -255;	// 前クローンの分だけ左に

		// サムネイルナビ作成
		id_list = new Array();
		$("#lineupMain li").each(function(i,e){
			this_id = $(this).attr("id");
			this_nav_id = "nav" + this_id;
			id_list.push(this_id);
			$("#tnMenu").append('<li rel="' + i + '" id="' + this_id + '"><a href="#" style="background:url(tn/' + this_id + '.png) 0 0 no-repeat" class="pngbg">' + this_id + '</a></li>');
			$("#iNav").css("visibility","visible");
//			$("#iNav").fadeIn(2000);
			if(noIE){
				$("#iNav").fadeIn(2000);
			} else {
//				$("#tnMenu li a").each(function(){
//					$(this).pngfix();
//				});
				$("#iNav").show();
			}
		});

	} else {
		$("#iNav").hide();
		var all_item_total = all_item;
		$("#lineupBox").css("margin-left","255px");
		var base_mgn = -255;	// アイテム数3つ以下のマージン調整
	}


	// 前後にクローン作成
	if (all_item > 3) {
		$("#lineupMain").clone(true).prependTo("#lineupBox");
		$("#lineupMain").clone(true).appendTo("#lineupBox");
	}

	// ラインナップの幅測定
	$("#lineupBox").css("width", all_item_total * 255);

	// サムネイルナビの幅測定
	inWidth = (all_item * 41) + 56;
	$("#iNav").css("width", inWidth);

	// IE6の誤差設定
	if (typeof document.documentElement.style.maxHeight != "undefined") { var ie6mgn = 0; }
		else { var ie6mgn = 58;	}

	// URL取得解析
//	var url = document.URL;
//	urlreq = url.split("#")[1];
//	if (urlreq) {
//		var target = "#" + urlreq;
//		var rand = jQuery.inArray(urlreq, id_list);
//		alert(rand);
//	}
//	else {
	// 初回のアイテム表示
		var rand = Math.floor(Math.random() * (all_item - 1));
//		var rand = 0;
//	}

	if (all_item > 3) {
		now_item = rand;
//		now_item = 0;
//		first_margin = -1 * ((all_item * 130) + (now_item * 255));
		first_margin = ((rand - 1) * -255) + 353 + base_mgn + ie6mgn;
		first_margin += "px";
//		alert(first_margin);
		$("#lineupBox").css("margin-left", first_margin);
	} else {
		now_item = 0;
	}

	if(noIE){
		$("#lineupBox").animate({"opacity":0}, {duration:0});
		$("#lineupBox").animate({"opacity":1}, {queue:false, duration:2500});
	}
	//	$("#lineupBox").css("visibility","visible").animate({"opacity":1}, {queue:false, duration:2000});
		$("#lineupBox").css("visibility","visible");
	firsttime = true;
	moveNum(now_item);

	// 自動
	if (all_item > 3) {
		autoPlay();
	}

	jQuery.easing.def = "easeOutQuad";

	$("a#left").click(function(){
		moveLeft();
		return false;
	});
	$("a#right").click(function(){
		moveRight();
		return false;
	});
	$("#tnMenu a").click(function(){
		var num = $(this).parent().attr("rel");
		if(noIE){ $("#lineupBox").animate({"opacity":1}, {duration:0}).stop(); }
		moveNum(num);
		return false;
		})
		.hover(
			function () {
					$(this).css("cursor","pointer");
			},
			function () {
					$(this).css("cursor","default");
		});

	// キーボード操作
	$(window).keydown(function(e){
		if(e.keyCode == "37"){
			moveLeft();
		}
		if(e.keyCode == "39"){
			moveRight();
		}
		if(e.keyCode == "38"){
			data_id = $("li", ".lineup:eq(1)").eq(now_item).attr("id");
			openData(data_id,now_item);
		}
		if(e.keyCode == "40"){
			closeData();
//			location.href = "../index.html";
		}
		return false;
	});

	function moveLeft(){
		num = eval(now_item) - 1;
		flagLR = true;
		moveNum(num);
	}
	function moveRight(){
		num = eval(now_item) + 1;
		flagLR = true;
		moveNum(num);
	}

	function moveNum(num){
		var mgn = num * -255;
		var mgn = mgn + 353 + base_mgn + ie6mgn;
		dir = Math.abs(now_item - num);
//		drtn = dir ? (dir * 300) + 400 : (firsttime) ? all_item * 200 : 1200;
//		drtn = dir ? (dir * 500) + 400 : (firsttime) ? all_item * 600 : 1200;
//		drtn = dir ? (dir * 400) + 400 : (firsttime) ? all_item * 500 : 1200;
//		drtn = dir ? (dir * 300) + 400 : (firsttime) ? all_item * 600 : 1200;
//		drtn = dir ? (dir * 400) + 400 : (firsttime) ? all_item * 600 : all_item * 110 + 600;
//		drtn = dir ? (dir * 500) + 400 : (firsttime) ? all_item * 600 : all_item * 110 + 600;
//		drtn = dir ? (dir * 1000) + 400 : (firsttime) ? all_item * 600 : all_item * 110 + 600;
		drtn = dir ? (dir * 1000) + 400 : (firsttime) ? 3 * 600 : all_item * 110 + 600;

			now_mgn = $("#lineupBox").offset();
			now_mgn = now_mgn.left;
			move_mgn = Math.abs(now_mgn - mgn);
			move_speed = move_mgn / drtn;
//			console.log(" all_item: " + all_item + " dir:" + dir + " now_mgn:" + now_mgn + " mgn:" + mgn + " move_mgn:" + move_mgn + " drtn:" + drtn + " move_speed:" + move_speed);

		firsttime = false;
		var mgn = mgn + "px";
//		$("#lineupBox").animate({"marginLeft":mgn}, {duration:drtn});
//		$("#lineupBox").animate({"marginLeft":mgn}, {duration:drtn, easing: "easeOutQuad"});
		$("#lineupBox").animate({"marginLeft":mgn}, {duration:drtn, easing: "easeOutCubic"});
		if (num < 0) { num = all_item - 1; reset(num); }
			else if (num >= all_item) { num = 0; reset(num); }
		now_item = num;
		$("#tnMenu li").removeClass("current");
		$("#tnMenu li").css("background-position","0 0 !important");
		$("#tnMenu li").eq(now_item).addClass("current");
		flagLR = false;
		return now_item;
	}


	// 本体メニューにリセット
	function reset(num){
		if (num == undefined) { num = 0; }
		var mgn = num * -255;
		var mgn = mgn + 353 + base_mgn + ie6mgn;
		var mgn = mgn + "px";
		$("#lineupBox").animate({"marginLeft":mgn}, {duration:0});
		now_item = num;
		return now_item;
	}


	// 自動
	function autoMove(){
		modal = jQuery.data($("#header").get(0), "modal");
//		console.log(modal);
		if (!modal) {
			now_item = eval(now_item);
			now_item += 1;
			if (now_item >= all_item){
					now_item = 0;
					var mgn = 592 + base_mgn + ie6mgn;
					var mgn = mgn + "px";
					$("#lineupBox").css({"margin-left":mgn});
				}
			moveNum(now_item);
		}
	}

	function autoPlay(str){
		$.timer(10000, function (timer){
			$("a#left").click(function(){
				timer.reset(10000);
			});
			$("a#right").click(function(){
				timer.reset(10000);
			});
			$("#tnMenu li a").click(function(){
				timer.reset(10000);
			});
			$("#lineupMain li").click(function () {
				timer.reset(10000);
			});
			autoMove();
		});
	}



	// modal
	// ----------------------------------------------------------------------- //

	imgpre = new Image();
	imgpre.src = "image/bg_databox.png";


	// アイテムにイベント設定
	$("#lineupMain li span").each(function(i,e){
		$(e).click(function () {
			data_id = $(e).parent().attr("id");
			openData(data_id,i);
			}).hover(
				function () {
						$(this).css({"cursor":"pointer"});
				},
				function () {
						$(this).css("cursor","default");
				});
				;
	});


	// モーダル 開
	function openData(data_id,num) {
//		jQuery.data($("#lineupBox").get(0), "modal", "open");
		$("#mainPic").empty();
		$("#itemName").empty();
		$("#shopping").remove();
		$("#dataBody").empty();
		$("#dataSpec").empty();

		$('#btn').hide();

		$("#dataBox")
	    .jqm({
	      trigger: false,
	//     ajax: data_file,
	//     overlay: 1,
	      onShow: function(h) {
			$("#data").removeClass("mark");
			$("#dataBox").css({"top":"7%"});
	        	h.w.fadeIn(600*noIE); 
	        },
	      onHide: function(h) {
	        	h.w.fadeOut(300*noIE).hide(10,function() { if(h.o) h.o.remove(); });
			} 
	      });

		$("#dataBox").jqmShow().animate({"top":"10%"}, {queue:false, duration:800,
			complete:function(){
				loadData(data_id,num);
			}
		});
	}



//});
}





// モーダル 閉
function closeData() {
//	jQuery.data($("#lineupBox").get(0), "modal", "close");
	$("#dataBox").fadeOut(300*noIE).jqmHide();
}


// データ読み込み
function loadData(data_id,num) {
	data_file = "data/" + data_id + ".xml";
	$.ajax({
//		async: false,
		type: "GET",
		url: data_file,
		dataType: "xml",
		error: function(XMLHttpRequest, status, errorThrown){
			$("#dataBody").html('<p>現在、情報が登録されていません。</p>');
		},
		success: function(data,status){
			parseData(data_id,data);
		}
	});
}

// データパース
function parseData(data_id,data) {

	$("#data").addClass("mark");
	picLargeURL = "pics/" + data_id + "_l.png";
	nameURL = "name/" + data_id + ".gif";
	$("#mainPic").append('<img src="../image/pic_dummy.gif" alt="" id="pic_large" />');
	$("#itemName").append('<img src="../image/name_dummy.gif" alt="" id="itemNameimg" />');
	$("#pic_large").attr("src", picLargeURL).hide();
	$("#mainPic").append('<img src="../image/pic_over.png" alt="" id="pic_over" />');
	$("#itemNameimg").attr("src", nameURL).hide();
	$("#dataSpec").show();
	$("#pic_large").load(function () {
		if(noIE){
			$("#pic_large").fadeIn(1500);
			$("#itemNameimg").fadeIn(500);
			$("#shopping").animate({opacity:"1"}, 800, "easeInCubic");
			$('#btn').fadeIn(1500);
		} else {
			$("#pic_large").pngfix();
			$(".jqmWindow .bg").pngfix();
			$("#pic_large").show();
			$("#itemNameimg").show();
			$("#shopping").css("opacity",1);
			$('#btn').fadeIn(1500);
		}
	});

	// XMLパース
	$(data).find("item").each(function(){
		// description
		var description = $(this).find('description').text();
		$("#dataBody").html('<p>' + description + '</p>');
		// spec
		$(this).find('spec').each(function(){
			var atb = $(this).attr("name");
			var lbl = $(this).attr("label");
			$("#dataSpec").append('<dt class="'+ atb + '">' + lbl + '</dt><dd>' + $(this).text() + '</dd>');
		});
		// url
		var url = $(this).find('url').text();
		if (url) {
			$("#dataBody").before('<a href="' + url + '" id="shopping" target="_blank"><img src="../image/btn_shopping.gif" alt="ご購入はこちら" /></a>');
//			$("#shopping").hide();
			$("#shopping").css("opacity",0);
			$("#dataBody").css("margin-top","46px");
			url = "";
		}
		// name
		var itemname = $(this).find('title').text() + " " + $(this).find('titlesub').text();
		$("#itemName").attr("alt", itemname);
		// status
		var status = $(this).find('status').text();
		var description2 = $(this).find('description2').text();
		if(status) {
			if(description2) {
				$("#dataBody").html('<p>' + description2 + '</p>');
			} else {
				$("#dataBody").html('<p>この商品は販売終了いたしました。</p>');
			}
			$("#dataSpec").hide();

			$("#pic_over").css("visibility", "visible");
		}
	});

}