/**********
 トップページ
**********/












	$(function() {




		//sortの中にある要素の並び順を読み込む
		function loadSort(key_) {
			var cookieKey = key_.replace(/[^a-zA-Z0-9]/g, "");
		
			if(!$.cookie(cookieKey)) {
				return;
			}

			var ary = $.cookie(cookieKey).split(",");
			
			var parent = $(key_);
			for(var i=0;i<ary.length;i++) {
				parent.append($("#"+ary[i]));
			}
		}








		//sortの中にある要素の並び順を保存
		function saveSort(key_) {
			var cookieKey = key_.replace(/[^a-zA-Z0-9]/g, "");
		
			var childs = $(key_ + " > *");
			var str = '';
			childs.each(function(idx_){
				var child = $(this);
				if(idx_ != 0) {
					str += ',';
				}
				str += child.attr("id");
				
			});
			$.cookie(cookieKey, str, {path:'/',expires: 30});
		}




		//動的にCSS追加
		function addStyle(ary_) {
			$("body").append('<style type="text/css">' + ary_.join("\n") + '</style>');
		}


		//トピックスのタブ実装
		var tabSelect = 0;
		if($.cookie("topTab")) {
			tabSelect = $.cookie("topTab");
		}
		
		$( "#tab" ).tabs({ selected: tabSelect });
		

		$( "#tab" ).bind( "tabsselect", function(event, ui) {
			$.cookie("topTab", ui.index, { path:'/',expires: 30 });
		});


		//sortの並び順を読み込む
		loadSort("#sort");
		
		//一番上はマージン空けない
		if($("#mainNav > *:first").attr("id") == "sort") {
			//一番上はマージン空けない(#sortの中だけ)
			$("#sort > *:first").css("margin-top", "0px");
		}

		
		
		
		
		
		//sort2の並び順を読み込む
		loadSort("#sort2 .L");
		loadSort("#sort2 .R");


		//sort3の並び順を読み込む
		loadSort("#sort3");




/*

		//上のメニュー並び替え
		$( "#sort" ).sortable({
			connectWith: "#sort",
			containment: '#sort',
			tolerance: "pointer",
			forcePlaceholderSize: true,
			handle:$("#sort .sortHandle"),
			start: function(event, ui) {
			},
			stop: function(event, ui) {
				//mouseupが念のためうまく動かなかったときのため
				$("#sort").css({
					"height": "auto"
				});
			}
		});
		
			
		//移動のマウスカーソル
		$("#sort .sortHandle").css({
			"cursor": "move"
		});
		
		//下に移動させるときの余裕を持たせる
		$( "#sort .sortHandle" ).mousedown(function(){
			$("#sort").css({
				"height": $("#sort").height() + 400 + "px"
			});
		});
		$( "#sort .sortHandle" ).mouseup(function(){
			$("#sort").css({
				"height": "auto"
			});
		});

		//移動先の点線ボックス
		addStyle([
			'#sort .ui-sortable-placeholder { width:526px;  background-image: none;  background-color: #EEEEEE;    border: 2px dashed #666666;    margin-top: 10px;visibility: visible !important;	}',
			'#sort .ui-sortable-placeholder * { visibility: hidden;	}'
		]);

*/





























		//要素をアニメーションで一つ上に
		function targetAnimationUpDown(target_ ,$type_) {
			//子の位置が座標になったときのために親要素を設定
			var parent = target_.parent();
			parent.css({
				position: 'relative',
				height: parent.outerHeight()
			});
			
			//位置が座標になったときの位置を保存
			var childs = parent.find("> *");
			childs.each(function(){
				var child = $(this);
				child.data("left",child.position().left);
				child.data("top",child.position().top);
				
			});
			
			//位置を座標で配置
			childs.css({
				position: 'absolute'
			});
			childs.each(function(){
				var child = $(this);
				child.css({
					left: child.data("left"),
					top: child.data("top")
				});
			});
			
			
			//要素を実際入れ替え、その後の配列を得る
			if($type_ == 'up') {
				var prev = target_.prev();
				prev.before(target_);
			}
			else {
				var next = target_.next();
				next.after(target_);
			}
			childs = parent.find("> *");
			
			//アニメーション移動開始
			var top = 0;
			var complete = 0;
			childs.each(function(){
				var child = $(this);
				
				child.animate({
					top: top
				}, 500, function(){
					complete++;
					if(complete == childs.size()) {
						//left,topのスタイルを削除（IEで見たとき""だとうまく消えてくれないためblock指定）
						childs.attr("style", "display:block;");
						parent.attr("style", "display:block;");
						
						if($("#mainNav > *:first").attr("id") == "sort") {
							//一番上はマージン空けない(#sortの中だけ)
							$("#sort > *:first").css("margin-top", "0px");
						}
					}
				});
				
				top += child.outerHeight({margin: true});
				
			});
			
		}


		$("#sort .cat2Mod .sortHandle").append('<a href="#" class="item5"><img src="/material/template/img_top/cat2_mod_up.gif" width="18" height="18" alt="メニューを上に移動させる" /></a><a href="#" class="item6"><img src="/material/template/img_top/cat2_mod_down.gif" width="18" height="18" alt="メニューを下に移動させる" /></a>');



		addStyle([
			'#sort .cat2Mod .sortHandle { position: relative;	}',
			'#sort .cat2Mod .sortHandle .item5, #sort .cat2Mod .sortHandle .item6 { top:12px; position: absolute;	}',
			'#sort .cat2Mod .sortHandle .item5 { right:29px;  }',
			'#sort .cat2Mod .sortHandle .item6 { right:7px;  }'
		]);


		addStyle([
			'#sort .cat2Mod ul.sortHandle .item5, #sort .cat2Mod ul.sortHandle .item6 { top:15px; position: absolute;	}'
		]);


		$("#sort .cat2Mod .sortHandle .item5").click(function(){
			targetAnimationUpDown($(this).closest(".cat2Mod") ,'up');
			saveSort("#sort");
			return false;
		});
		$("#sort .cat2Mod .sortHandle .item6").click(function(){
			targetAnimationUpDown($(this).closest(".cat2Mod") ,'down');
			saveSort("#sort");
			return false;
		});



































		
		//下のメニュー並び替え
		$( "#sort2 .JSsort" ).sortable({
			connectWith: "#sort2 .JSsort",
			containment: '#sort2',
			tolerance: "pointer",
			forcePlaceholderSize: true,
			handle:$("#sort2 .sortHandle"),
			start: function(event, ui) {
				//ここでpaddingをつけたかったが開始してから広がるのでNG
			},
			stop: function(event, ui) {
				//mouseupが念のためうまく動かなかったときのため
				$("#sort2 .JSsort").css({
					"height": "auto"
				});
				
				saveSort("#sort2 .L");
				saveSort("#sort2 .R");
			}
		});
		
		//移動のマウスカーソル
		$("#sort2 .sortHandle").css({
			"cursor": "move"
		});
		
		//下に移動させるときの余裕を持たせる※行き来する入れ物に高さが予めなければ移動できなくなるため
		$( "#sort2 .sortHandle" ).mousedown(function(){
			$("#sort2 .JSsort").css({
				"height": $("#sort2").height() + 400 + "px"
			});
		});
		$( "#sort2 .sortHandle" ).mouseup(function(){
			$("#sort2 .JSsort").css({
				"height": "auto"
			});
		});


		//移動先の点線ボックス
		addStyle([
			'#sort2 .ui-sortable-placeholder { width:255px;  background-image: none;  background-color: #EEEEEE;    border: 2px dashed #666666;    margin-top: 10px;visibility: visible !important;	}',
			'#sort2 .ui-sortable-placeholder * { visibility: hidden;	}'
		]);


























/*
		//右のメニュー並び替え
		$( "#sort3" ).sortable({
			connectWith: "#sort3",
			containment: '#sort3',
			tolerance: "pointer",
			forcePlaceholderSize: true,
			handle:$("#sort3 .sortHandle"),
			start: function(event, ui) {
			},
			stop: function(event, ui) {
				//mouseupが念のためうまく動かなかったときのため
				$("#sort3").css({
					"height": "auto"
				});
			}
		});
		
			
		//移動のマウスカーソル
		$("#sort3 .sortHandle").css({
			"cursor": "move"
		});
		
		//下に移動させるときの余裕を持たせる
		$( "#sort3 .sortHandle" ).mousedown(function(){
			$("#sort3").css({
				"height": $("#sort3").height() + 400 + "px"
			});
		});
		$( "#sort3 .sortHandle" ).mouseup(function(){
			$("#sort3").css({
				"height": "auto"
			});
		});

		//移動先の点線ボックス
		addStyle([
			'#sort3 .ui-sortable-placeholder { width:166px; background-image: none;  background-color: #EEEEEE;    border: 2px dashed #666666;    margin-top: 10px;visibility: visible !important;	}',
			'#sort3 .ui-sortable-placeholder * { visibility: hidden;	}'
		]);
*/






		$("#sort3 .catMod .sortHandle").append('<a href="#" class="item5"><img src="/material/template/img_top/cat_mod_up.gif" width="18" height="18" alt="メニューを上に移動させる" /></a><a href="#" class="item6"><img src="/material/template/img_top/cat_mod_down.gif" width="18" height="18" alt="メニューを下に移動させる" /></a>');


		addStyle([
			'#sort3 .catMod .sortHandle { position: relative;	}',
			'#sort3 .catMod .sortHandle .item5, #sort3 .catMod .sortHandle .item6 { top:6px; position: absolute;	}',
			'#sort3 .catMod .sortHandle .item5 { right:27px;  }',
			'#sort3 .catMod .sortHandle .item6 { right:5px;  }'
		]);



		$("#sort3 .catMod .sortHandle .item5").click(function(){
			targetAnimationUpDown($(this).closest(".catMod") ,'up');
			saveSort("#sort3");
			return false;
		});
		$("#sort3 .catMod .sortHandle .item6").click(function(){
			targetAnimationUpDown($(this).closest(".catMod") ,'down');
			saveSort("#sort3");
			return false;
		});















		
	});