var WRAP_W; /*親ボックス幅*/
var MIN_WRAP_H; /*親ボックス最小高*/
var COLS_MAX; /*横に並べられる数*/
var COLS_MIN = 3; /*横に並べられる最小数*/
var GRID0_X; /*0番目のポジション*/
var MRG = 4; /*余白*/
var BOX_W = 244; /*各グリッド幅*/
var BOX_H = {}; /*各グリッド高*/
var IDX_ARRAY=[]; /*各グリッド高*/
var GAP =false;
var IE='\v'=='v';
var OBJ_H;
var N;

$(function()
{
	$("#vgrid").remove();
	$("#grid-content").css("position","relative");
	//各グリッドの登録
	$("#grid-content > * ").each(function(idx){
		BOX_H[idx] = parseInt($(this).height());
		IDX_ARRAY.push(idx);
		$(this).find(".thm").click(
			function(){
				var url = $(this).attr("href")
				movieStart($(this).parent().parent(),url);
				return false;
			}
		);
		$(this).find(".fin").click(function()
		{
			movieFin($(this).parent().parent().parent());
		});
		$(this).find(".full").click(function()
		{
			full();
		});
	});
	
	//スタート
	variable(true,null);
	//リサイズイベントの登録
	$(window).resize(function(){
		if(!GAP) {
			if(!IE) {
				variable(true,null);
		   }else{
				setTimeout("variable()",600);
		   }
		}
	});
});

function variable(r,obj)
{
	WRAP_W = $("#grid-content").width();
	//親ボックスの高さ算出用に各グリッドの高さを入れておくための配列
	var h_array = []; 
	//グリッドの列数を算出
	COLS_MAX = Math.floor(WRAP_W / ( BOX_W + MRG )); 
	//0番目のグリッドのX位置を算出
	GRID0_X = 0 /* (WRAP_W - ((BOX_W + MRG) * COLS_MAX ) ) / 2*/;
	
	if(COLS_MAX < COLS_MIN)
	{   // 最小に設定した列数よりも少ないとき
		COLS_MAX = COLS_MIN;
		GRID0_X=0;
	}else if(COLS_MAX > COLS_MIN)
	{   // 最小に設定した列数よりも多いとき
		if(r){
			// 引数rがTRUEだったら IDX_ARRAYをランダムにシャッフル
			var ii = IDX_ARRAY.length;
			while (--ii) {
				var j = Math.floor(Math.random() * (ii + 1));
				if (ii == j) continue;
				var k = IDX_ARRAY[ii];
				IDX_ARRAY[ii] = IDX_ARRAY[j];
				IDX_ARRAY[j] = k;
			}
		}
	}
	
	//各グリッドのモーション
	$("#grid-content > div").each(
		function(idx)
		{
			var index = IDX_ARRAY[idx]; //移動先の位置番号を取得
			var posCol = index % COLS_MAX; //何列目かを算出
			var topTo = 0 + parseInt($("#grid-content").css("padding-top")); //Top値の初期値
			var leftTo = GRID0_X + parseInt($("#grid-content").css("padding-left")); //Left値の初期値
			if(GAP && (index % COLS_MAX == 1))
			{
				topTo = topTo + OBJ_H+ MRG;
			}
			
			if(index >= COLS_MAX-1 )
			{   //グリッドの移動先が2行目以降のとき
				for(i=1; i<=Math.floor(index / COLS_MAX); i++)
				{   //自分より上の行のobjを取得して自信のTop位置を算出ｇ
					var n = index - COLS_MAX * i;
					for(m=0; m<IDX_ARRAY.length; m++)
					{
						if(IDX_ARRAY[m] == n){
							topTo = topTo + BOX_H[m] + MRG +8;
							break;
						}
					}
				}
			}
			
			if(posCol > 0)
			{   //2列目以降であれば自分の列にあわせてLeft値を算出
				leftTo = leftTo + (BOX_W + MRG) * posCol
			}
			//グリッドの動作設定
			if(!GAP && obj == null) {$(this).css({position: "absolute"}).stop();}
			$(this)
				.animate(
					 {left: leftTo, top: topTo},
					 {duration: 500, easing: "easeOutQuart",
					  complete: function()
					  { //Top位置 ＋ 自信の高さをh_arrayに登録
						h_array.push($(this).height()+topTo);
						if(idx == IDX_ARRAY.length-1)
						{   //最終のグリッドだったら
							//親ボックスの高さ = h_arrayから最大の値を取得
							var max_h = Math.max.apply(null,h_array);
							$("#grid-content").height(max_h);
							/*
							if(!GAP && obj == null)
							$("#start").html(IDX_ARRAY.toString());
							*/
							if(GAP && obj != null)
							{
								$('html,body').animate({ scrollTop: 0 }, 500);
								$("#grid-content").height(max_h + 200);
								movieHeight(obj);
							}
						}
					  }
					 }
				);
		}
	);
}

function movieStart(obj)
{
	if(!GAP) {
		var n = $("#grid-content > * ").index($(obj));
		$(obj).addClass("large");
		OBJ_H = $(obj).height();
		BOX_H[n] = OBJ_H;
		N = IDX_ARRAY[n];
		for(i=0; i< IDX_ARRAY.length; i++) {
			if(IDX_ARRAY[i] % COLS_MAX <2)
			{
				IDX_ARRAY.splice(i,1,IDX_ARRAY[i]+COLS_MAX);
			}
		}
		IDX_ARRAY[n] = 0;
		GAP = true;
		variable(false,obj);
		/*
		$("#before").html(IDX_ARRAY.toString());
		*/
	}
}

function movieFin(obj)
{
	if(IE) {
		player=document.getElementById("mp");
		player.stop();
	}
	GAP = false;
	movieHeight(obj);
}

function movieHeight(obj)
{
	if(GAP)
	{   //開く時
		var h = $(obj).height();
		$(obj).animate(
			{width: "494px"},
			{duration: 500, easing: "easeOutQuart",
			 complete:function(){
				 $(this).find(".thm").addClass("hidden");
				 $(this).find(".wmp").removeClass("hidden").find(".area").html(wmvWrite(obj));
				 for(i=0; i<IDX_ARRAY.length; i++)
				 {
					 if((IDX_ARRAY[i] % COLS_MAX < 2)&&(IDX_ARRAY[i] != 0)) {
						$("#grid-content > div:eq("+ i +")").animate({top:parseInt($("#grid-content > div:eq("+ i +")").css("top")) + $(obj).height()-h + 8*(IDX_ARRAY[i] % COLS_MAX)},300);
					 }
				 }
			 }
		});
	}else{
		//閉めるとき
		$(obj).stop().removeClass("large")
			.find(".wmp").addClass("hidden").end()
			.find(".area").html("").end()
			.find(".thm").removeClass("hidden").end()
			.animate(
				{width: BOX_W},
				{duration: 500, easing: "easeOutQuart",
				 complete:function(){
					var n = $("#grid-content > * ").index($(obj));
					OBJ_H = $(obj).height();
					BOX_H[n] = OBJ_H;
					for(i=0; i< IDX_ARRAY.length; i++) {
						if((IDX_ARRAY[i] % COLS_MAX <2) && (IDX_ARRAY[i] != 0))
						{
							IDX_ARRAY.splice(i,1,IDX_ARRAY[i]-COLS_MAX);
						}
					}
					IDX_ARRAY[n] = N;
					variable(false,obj);
					/*
					$("#after").html(IDX_ARRAY.toString());
					*/
				 }
		});
	}
}

function wmvWrite(obj)
{
	var url = $(obj).find(".thm").find("a").attr("href");
	var w = 320;
	var h = 285;
	if( $(obj).hasClass("ratio169") ) {
		w = 428; 
	}
	if(IE) {
		h = 309;
	}
	var wmv = '\
	<object width="'+ w +'" height="'+ h +'" \
	type="application/x-oleobject" \
	codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,715" \
	classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95" \
	id="mp">\
	<param value="' + url + '" name="FileName" />\
	<param name="AutoStart" value="true" />\
	<param name="uiMode" value="mini" />\
	<param name="ShowStatusBar" value="true" />\
	<embed width="'+ w +'" height="'+ h +'" src="' + url + '" type="video/x-ms-wvx">\
	</object>';

	return wmv;
	
	
}

function full(){
	player=document.getElementById("mp");
	player.DisplaySize=3;
	if (player.DisplaySize==3){
		player.fullScreen=true;
	}
}