window.onload = function(){
	//縦スライダー
	var menuHeight = $('.menu_reel').height();
	var imageCount = $('.menu_reel li img').size();
	var imageHeight = $('.menu_reel li img').height();
	var imageReelHeigth = imageHeight * imageCount;
	var showRelNum = menuHeight / imageHeight;
	var mouseOverId = null;
	var relNum;

	//横スライダー
	var sliderWidth = $('#keyVisual').width();
	var sliderMaxCount = $('#keyVisual .window img').size();
	var imageWidth = $('#keyVisual .window img').width();
	var imageReelWidth =  imageWidth * sliderMaxCount;

	$(".window #sliderBox").css('width',imageReelWidth);

	//element変数
	var $active = $('.menu_reel li img:first');
	var $menuUp = $('#menuUp a');
	var $menuDown = $('#menuDown a');

	init = function(){
		relNum = 0;
		$('#menuList').css('height',imageReelHeigth);
		menuClick();
	};

	leftReel = function(rel) {
		var reelSize = (rel - 1) * imageWidth
		$(".window").animate({left : -reelSize},'slow');
	};

	menuClick = function(){
		$active.attr('src','img/top/keymenu'+$active.attr('rel')+'_on.gif');
		$active.addClass('active');
		leftReel($active.attr('rel'));
	};

	init();//menuの先頭にチェックを付ける

	changeClick = function($change){
		$active.removeClass('active');
		$active.attr('src','img/top/keymenu'+$active.attr('rel')+'.gif');

		$active = $change;
		menuClick();

	};

	rotate = function() {
		var reelPoint = relNum * imageHeight;

		$("#menuList").animate({top : -reelPoint},'slow');
	};

	$('#menuList a').click(function(){
		changeClick($(this).children('img'));
		return false;
	});

	$menuDown.click(function(){
		if(relNum == 0){
			return false;
		}
		relNum--;
		rotate();

		if ((showRelNum + relNum) < $active.attr('rel') ){
			changeClick($active.parent().parent('li').prev('li').children('a').children('img'));
		}

		return false;
	});

	$menuUp.click(function(){
		if(showRelNum+relNum >= imageCount){
			return false;
		}
		relNum++;

		rotate();

		if( relNum >= $active.attr('rel')){
			changeClick($active.parent().parent('li').next('li').children('a').children('img'));
		}

		return false;
	});

	$('#naviBox #navi li').mouseover(function(){
		$children = $(this).children('ul').children('li');

		$children.each(function(){
			$(this).show();
		});
	});

	$('#naviBox #navi li').mouseout(function(){
		$children = $(this).children('ul').children('li');

		$children.each(function(){
			$(this).hide();
		});
	});


};