// JavaScript Document

//設定ここから
var menuname="menus";//メニューを囲むid名を指定

//オーバーした時のCSS
var overCSS = "menuover"
//アウトした時のCSS
var outCSS = "menuout"

//設定ここまで



  $(document).ready(function(){
	//まず全部消し
	$("#"+menuname+" [menubox]").each(function(){
				 $(this).hide();
				 });
	//全部のボタンのCSSをマウスアウト用のクラスに設定
	$("#"+menuname+" [menuno]").each(function(){
				 $(this).addClass(outCSS);
				 $(this).removeClass(overCSS);
				 });
	//最初の一つのボックスのみ表示
	$("#"+menuname+" [menubox='1']").show();
	$("#"+menuname+" [menuno='1']").addClass(overCSS);
	
    // ここに実際の処理を記述します。
	$("#"+menuname+" [menuno]").each(function(){
    $(this).mouseover(function(){
							   $("#"+menuname+" [menubox]").each(function(){
																		 $(this).hide();
																		 });
							   	$("#"+menuname+" [menuno]").each(function(){
																		 $(this).addClass(outCSS);
																		 $(this).removeClass(overCSS);
																		 });

							   $("#"+menuname+" [menubox='"+$(this).attr("menuno")+"']").show();
							   $(this).addClass(overCSS);
							   });
	});
  });