$Package = {};
$T = $Package;



$( document ).ready( function()  {
	
	$T.U = new $T.myUtil();//ユーティリティ	
	$T.IF = new $T.myIF();//IF
	$T.DB = new $T.myDB();
	$T.T = new TopAnime();
	
} );


/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
	トップアニメクラス 
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
function TopAnime()
{
	var me = this;
	//me.paper = Raphael("canvasAreaHolder");
	
	me.isJP = $T.DB.isJP(document.URL);
	me.mekeItems_html();
	
	
	
	//$("#canvasAreaHolder").fadeIn("slow");
	$("#canvasAreaHolder").css("visibility", "visible");
	
	
	me.startAnime();
	
	
	
	
}
TopAnime.prototype = {
	
	isJP : false,
	timerID : 0,
	itemNodeAry_ALL : [],
	itemNodeAry_ALL_clone : [],
	itemNodeAry : [],
	paper : null,
	viewMax : 7,
	
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	cloneItemNodeAry_ALL : function(){
		return this.itemNodeAry_ALL.concat().shuffle();
		//return this.itemNodeAry_ALL.concat().reverse();
	},
		
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	mekeItems_html : function(){
		
		var me = this;
		//プロジェクトIDのあるアイテムの配列番号を保持した配列を初期化
		me.itemNodeAry_ALL = $T.DB.getIndexAryWithProjectID();
		
		var holder = $("#canvasAreaHolder");
		//クローンを作成
		if(me.itemNodeAry_ALL_clone.length == 0) me.itemNodeAry_ALL_clone = me.cloneItemNodeAry_ALL();
		
		var ary = me.itemNodeAry_ALL_clone.splice(0, me.viewMax);
		for(var i=0; i<ary.length; i++) {
			var index = ary[i];
			var data = jsDB.itemAry[index];
			
			var node = me.getITEMNode(index, data);
			holder.append(node);
		}
		
		$(".topItem").each(function(){
			var me2 = $(this);
			
			
			var index = me2.attr("num");
			me.itemNodeAry.push({obj:me2, index:index});
			
			me.initITEM(me2, true);
			me2.setMyPos(0,0);
		});
		
		var firstObj = me.itemNodeAry[0].obj;
		//var x = holder.widthNum()-firstObj.widthNum();
		var x = 800;
		console.log("初期X "+x+"  holder num "+holder.css("width")+"   firstObj "+firstObj.find("img:first").width());
		
		firstObj.setMyPos(x, 0);
		
	},
	
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		アニメ開始
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	startAnime : function(){
		var me = this;
		
		var intervalTime = 30;
		//intervalTime = 10;
		if($.isDebug) intervalTime = 5;
		
		
		//タイマー開始
		me.timerID = setInterval(function(){
			me.enterFrame();
			
		}, intervalTime);
	},
	
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		アニメ停止
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	stopAnime : function(){
		clearInterval(this.timerID);
	},
	
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	testX : 0,
	enterFrame : function(){
		var me = this;
		
		if(me.itemNodeAry.length == 0){
			console.log("タイマークリア");
			clearInterval(me.timerID);
		}
		
		var topY = 180;
		//topY = me.getWaveY();
		
		var topData =me.itemNodeAry[0];
		var topItem = topData.obj;
		if(topItem.css("visibility") == "hidden") topItem.css("visibility", "visible");
		
		var topX = topItem.getMyPos().x;
		console.log("topX "+topX);
		//if(!topItem.getMyPos().x) topItem.setMyPos(topX,topY);
				
		topX = topItem.getMyPos().x+1;
		topItem.setMyPos(topX,topY);
		
		
		
		//配列更新
		if(topX > $("#canvasAreaHolder").width()){
			console.log("me.updateAry");
			me.updateAry();
		}
		
		var x = topX;
		var ary = me.itemNodeAry;
		for(var i=1; i<ary.length; i++) {
			var item = ary[i].obj;
			var myTarget = ary[i-1].obj;
			
			if(!item.getMyPos().x) item.setMyPos(0,0);
			
			x = myTarget.getMyPos().x - 150;
			console.log("x "+x+"    myTarget "+myTarget.attr("num")+"    "+myTarget.getMyPos().x);
			item.setMyPos(x,topY);
			
			if(item.css("visibility") == "hidden") item.css("visibility", "visible");
		}
	},
		
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		今表示しているイメージの配列を更新します
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	updateAry : function(){
		var me = this;
		
		if(me.itemNodeAry_ALL_clone.length == 0)me.itemNodeAry_ALL_clone = me.cloneItemNodeAry_ALL();
		
		var holder = $("#canvasAreaHolder");
		var topitem = me.itemNodeAry.shift();
		topitem.obj.remove();
		topitem = null;
		
		var newIndex = me.itemNodeAry_ALL_clone.shift();
		var newItem = jsDB.itemAry[newIndex];
		
		//console.log("newIndex "+newIndex+"   newItem "+newItem);
		
		
		var node = me.getITEMNode(newIndex, newItem);
		holder.append(node);
		var newObj = holder.find(".topItem:last");
		me.itemNodeAry.push({obj:newObj, index:newIndex});
		
		
			
		me.initITEM(newObj, false);
		
	},
		
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		initTH
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	initITEM : function(item, fadeIn){
		var me = this;
		var topItem_img_hover = item.find(".topItem_img_hover").hide();
		var topItem_img = item.find(".topItem_img").css("visibility", "visible").hide();
		
		
		item.unbind("click").bind("click",function(e){
			e.stopPropagation();
			me.stopAnime();
			
			var me2 = $(this);
			var num = me2.attr("num");
			var data = jsDB.itemAry[num];
			var lang = "en";
			if(me.isJP) lang = "../jp";
			var debug = "";
			if($.isDebug) debug = "&debug=true";
			location.href = lang+"/projects.html?category="+data.category+"&projectID="+data.projectID+debug;
			return false;
		});
		
		item.hover(function(e){
		//over
			e.stopPropagation();
			var me2 = $(this);
			me2.stop();
			var a = me2.find("a");
			topItem_img_hover.css("visibility", "visible").fadeIn("fast");
			return false;
		},function(e){
		//out
			e.stopPropagation();
			var me2 = $(this);
			me2.stop();
			
			topItem_img_hover.css("visibility", "visible").fadeOut("fast");
			return false;
		});
		
		
		
		
		if(fadeIn){
			var t = Math.round(100+Math.random()*1000);
			topItem_img.delay(t).fadeIn(2000);
		} else {
			topItem_img.show();
		}
		
		
	},
		
	/* ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
		getITEMNode
	ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
	getITEMNode : function(index, data){
		var me = this;
		var url = "images/top/idx_"+data.projectID+"_mono.jpg";
		if(me.isJP) url = "../"+url;
		
		var url_over = url.replace("_mono", "");
		
		//かいはつ
		var debug = "";
		if($.isDebug) debug = "<p class='debugNum'>"+data.id+"</p>"+"<p class='debugData'>"+data.category+"："+data.projectID+"-"+data.name+"</p>";
		
		var node = "<div class='topItem' num='"+index+"'><a href='javascript:void(0);'><img src='"+url+"' class='topItem_img' width='140' height='140' title='"+data.category+"'><img src='"+url_over+"' class='topItem_img_hover' width='140' height='140'>"+debug+"</a></div>";
		return node;
	}
}