// JavaScript Document

	$(document).ready(function(){
		var menu_w = 960;
		
		$('div.head_menu a#channel_'+hm_id).addClass('hm_'+hm_id);
		$('div.head_subMenu').addClass('sub_menu');
		
		menuShow = function(){
			$menuNow.removeClass('menuNow');
			$menuNext.addClass('menuNow');
			$showNow.removeClass('showNow').fadeOut('fast');
			$showNext.addClass('showNow').fadeIn('fast');
			
			var this_w = $menuNext.width();
			var this_x = $menuNext.position().left;
			var sub_w = $showNext.width();
			var sub_x = (this_x + this_w*0.5) - sub_w*0.5;//$sub.position().left;
			if (sub_x < 0) { $showNext.css('left', '0px'); }
			else if ((sub_x + sub_w) > menu_w) { $showNext.css('right', '0px'); } //sub_x = menu_w - sub_w;
			else { $showNext.css('left', sub_x+'px'); }
		}
		
		menuSwitch = function(){      
			menuFlow = setInterval(function(){ //Set timer - this will repeat itself every 3 seconds
				$menuNow = $('div.head_menu a.menuNow');
				$menuNext = $menuNow.next();
				$showNow = $('div.head_subMenuBox div.showNow');
				$showNext = $showNow.next();
				if ($menuNext.length === 0) { //If paging reaches the end...
					$menuNext = $('div.head_menu a:eq(1)');
					$showNext = $('div.head_subMenuBox div:eq(0)'); //go back to first
				}
				menuShow();
				//rotate(); //Trigger the paging and slider function
			}, 6000); //Timer speed in milliseconds (3 seconds)
		};
		
		menuSwitch();
		
		$('div.head_menu a').hover(function(){
			if ($(this).attr('id') == 'channel_'+hm_id) {
				$('div.head_menu a').removeClass('menuNow');
				$('div.head_subMenu').removeClass('showNow').hide();
				return false;
			}
			
			//$menuNow = $('div.head_menu a.menuNow');
			//$showNow = $('div.head_subMenuBox div.showNow');
			$('div.head_menu a').removeClass('menuNow');
			$('div.head_subMenu').removeClass('showNow').hide();
			
			var idStr = $(this).attr('id');
			var idArr = idStr.split('_');
			var $sub = $('div#subParent_'+idArr[1]);
			
			var this_w = $(this).width();
			var this_x = $(this).position().left;
			var sub_w = $sub.width();
			var sub_x = (this_x + this_w*0.5) - sub_w*0.5;//$sub.position().left;
			if (sub_x < 0) { $sub.css('left', '0px'); }
			else if ((sub_x + sub_w) > menu_w) { $sub.css('right', '0px'); } //sub_x = menu_w - sub_w;
			else { $sub.css('left', sub_x+'px'); }
			
			$(this).addClass('menuNow');
			$sub.addClass('showNow').show();
		});
		
		$('div.head_menuBox').hover(function(){
			clearInterval(menuFlow);
		}, function(){
			menuSwitch();
		});
		
	});
