$(document).ready(function () {
    
});

var cnt = 0; // ループカウント用

var positionY = new Array();	// ナビのマージン
var positionNow = new Array(); //
var positionParam = -75;
var tid = 0;
var i=0;

var anim_arr = new Array;

function xmlParser(xml) {
    $('#load').fadeOut();
    $(xml).find("MainImg").each(function () {
		$(".main").append('<li id="' + $(this).find("Id").text() + '" class="photo"><a href="' + $(this).find("Link").text() + '"><img src="' + $(this).find("Photo").text() + '" /></a></li>');
    });

    $(xml).find("NaviList").each(function () {
		if(cnt == 0){
			$(".naviList").append('<li><a class="' + $(this).find("Class").text() + ' selected" href="' + $(this).find("ImgLink").text() + '" onclick="return false;"><img src="' + $(this).find("Bt").text() + '" /></a></li>');
		}else{
			$(".naviList").append('<li><a class="' + $(this).find("Class").text() + '" href="' + $(this).find("ImgLink").text() + '" onclick="return false;"><img src="' + $(this).find("Bt").text() + '" /></a></li>');
		}
		cnt++;
    });
	$(".main li.photo:not(.main li.photo:first)").hide();
	$(".naviList li:first img").css("visibility", "hidden");
	
	
	for(i = 0; i <= cnt; i++) {
		positionY[i] = positionParam;
		positionNow[i] = i + 1;
		positionParam += 75;
	}
	
	i = 0;
	$(".naviList li").each(function() {
		$(this).css("top", positionY[positionNow[i]] + "px");
		i++;
	});
	
	if(cnt > 3) {	
		$(".next").click(function(){
			i = 0;
			clearInterval(tid+1);
			$(".naviList li").each(function() {
				if(positionNow[i] != cnt) {
					positionNow[i] = positionNow[i] + 1;
				} else {
					positionNow[i] = 1;
					$(this).css("top","-75px");
				}
				$(this).queue([]).animate({
					top:positionY[positionNow[i]] + "px"
				}, "fast");
				i++;
			});
			
			return false;
		});
		$(".prev").click(function(){
			clearInterval(tid+1);
			i = 0;
			$(".naviList li").each(function() {
				if(positionNow[i] != 0) {
					positionNow[i] = positionNow[i] - 1;
					
				} else {
					positionNow[i] = cnt - 1;
					$(this).css("top", 75 * (cnt - 1) + "px");
				}
				$(this).queue([]).animate({
					top:positionY[positionNow[i]] + "px"
				}, "fast");
				i++;
			});
			return false;
		});
		
		// 自動ループ
		
		
	}
	// メイン画像
	$("ul.naviList li a:not(.selected)").live("click",function(){
		clearInterval(tid);
		newIdName = $(this).attr("class");
		console.log(newIdName);
		newIdName = "#" + newIdName;
		
		$("ul.naviList li a").removeClass("selected");
		$("ul.naviList li a").find("img").css("visibility", "visible");

		$(this).addClass("selected");
		$(this).find("img").css("visibility", "hidden");
		
		$(".main li:visible").fadeOut("normal");
		$(".main " + newIdName).css("opacity","1");
		$(".main " + newIdName).fadeIn("normal");
		return false;
	});
	
	
}

function completeEvent() {
	var cntNavi = 0;
	var old_main = 0;
	tid = setInterval(function(){
		// ナビ
		i = 0;
		$(".naviList li").each(function() {
			if(positionNow[i] != 0) {
				positionNow[i] = positionNow[i] - 1;
				clearInterval(tid+1);
				if(positionNow[i]==0) {
					old_main = cntNavi;
					cntNavi=(i+1)%3;
				}
			} else {
				positionNow[i] = cnt - 1;
				$(this).css("top", 75 * (cnt - 1) + "px");
			}
			$(this).queue([]).animate({
				top:positionY[positionNow[i]] + "px"
			}, "fast");
			
			if(positionY[positionNow[i]] == 0) {
				$(this).find("img").css("visibility", "hidden");
			} else {
				$(this).find("img").css("visibility", "visible");
			}
			i++;
		});
		$(".main #no"+old_main).queue([]).animate({
			opacity:"0"
		}, "normal");
		$(".main #no"+old_main).css("opacity","0");
		$(".main #no"+old_main).css("display","none");
		$(".main #no"+cntNavi).queue([]).animate({
			opacity:"1"
		}, "normal");
		$(".main #no"+cntNavi).css("opacity","1");
		$(".main #no"+cntNavi).css("display","list-item");
	}, 5000);
	
}
function exampleTabSelected(event) {
  var browser = gBrowser.selectedBrowser;
  // browser はその時に選択された browser の XUL 要素
}