// JavaScript Document

jQuery(function() {
	Cufon.replace('a, span').CSS.ready(function() {
		var $menu 		= jQuery("#slidingMenu");
		
		/**
		* the first item in the menu, 
		* which is selected by default
		*/
		var $selected	= $menu.find('li:first');
		
		/**
		* this is the absolute element,
		* that is going to move across the menu items
		* it has the width of the selected item
		* and the top is the distance from the item to the top
		*/
		if( $selected[0] ) {
			var $moving		= jQuery('<li />',{
				className	: 'move',
				top			: $selected[0].offsetTop + 20 + 'px',
				width		: $selected[0].offsetWidth + 'px'
				//width		: '0px'
			});
		}
		/**
		* each sliding div (descriptions) will have the same top
		* as the corresponding item in the menu
		*/
		jQuery('#slidingMenuDesc > div').each(function(i){
			var $this = jQuery(this);
			$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 22 + 'px');
		});
		/**
		* append the absolute div to the menu;
		* when we mouse out from the menu 
		* the absolute div moves to the top (like innitially);
		* when hovering the items of the menu, we move it to its position 
		*/
		
		$menu.bind('mouseleave',function(){
				moveTo($selected,400);
			  })
			 .append($moving)
			 .find('li')
			 .not('.move')
			 .bind('mouseenter',function(){
				var $this = jQuery(this);

				var id_now = parseInt($this.index());
				//alert(id_now);
				
				var offsetLeft = $this.offset().left;
				
				//slide in the description
				//jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width': 958 - offsetLeft+'px'},400, 'easeOutExpo');

				
				jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':850 +'px'},400, 'easeOutExpo');
				
				//move the absolute div to this item
				moveTo($this,400);
			  })
			  .bind('mouseleave',function(){
				var $this = jQuery(this);
				var id = parseInt($this.index());
				var offsetLeft = $this.offset().left - 20;

				jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
				
				// 右の方のリンクに入った時のイベント追加
				jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').hover(
					function(){
						jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':850 +'px'},400, 'easeOutExpo');
				
						//move the absolute div to this item
						moveTo($this,400);
					},
					function () {
						jQuery('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
					}
				);
			});;
		/**
		* moves the absolute div, 
		* with a certain speed, 
		* to the position of $elem
		*/
		function moveTo($elem,speed,no){
			if ( $elem[0].offsetWidth == 0 ){
				$moving.stop(true).animate({
					top		: $elem[0].offsetTop + 20 + 'px',
					//width	: 1000 - $elem[0].offsetWidth + 'px'
					width : $elem[0].offsetWidth + 'px'
					//padding : '0 26px 0 0'
				}, speed, 'easeOutExpo'/*,function(){
					jQuery('#blockHeader #slidingMenu').css("background","url('./img/top/bg/default.jpg') no-repeat");
				});
				*/);
			}
			else {
				$moving.stop(true).animate({
					top		: $elem[0].offsetTop + 20 + 'px',
					//width	: 1000 - $elem[0].offsetWidth + 'px'
					//width : 150 + 'px'
					width: '100%'
					//padding : '0 26px 0 0'
				}, speed, 'easeOutExpo'/*,function(){
					//jQuery('#blockHeader #slidingMenu').css("background","url('./img/top/bg/Header" + no + ".jpg') no-repeat");
				});
				*/);
			}
		}
		
	});
});