/**
	1.圖形tab,非目前有換圖功能(mouseout, mouserover)
	2.tab 群組使用 ul,並設定 class 為  ui-tab.
	3.需 include tab.css
	4.以下為使用方法
		<ul class='ui-tab'>
		<li><a region='#display div id' id='image name' class='ui-selected'><img src="selected  圖檔source"></a>
		<li> ...
		</ul>
		
	3.tab image 必須設置 name 屬性,
	圖形命名原則 tab image name + 'a.gif; ( unselect用圖), tab image name +  'b.gif'(mouseover 用圖及 select用圖)
	
	以下為範例
	
<ul class="ui-tab"><li><a region="#lastestregion<!-- display div id -->" class="ui-selected" id="main-03newsgameicon">
																								<img src="/images/main-03newsgameiconb.gif" width="135" height="24" border="0" name="main-03newsgameicon"></a></li>
																								<li><a href="#specialregion"  id="main-04commendicon"  class="ui-unselect" >
																									<img src="/images/main-04commendicona.gif"  width="135" height="24" border="0" style="vertical-align:middle" name="main-04commendicon">
																								</a></li>
																								<li><a href="#exclusiveregion" id="main-05excicon"  class="ui-unselect" >
																									<img src="/images/main-05excicona.gif"  width="135" height="24" border="0" style="vertical-align:middle" name="main-05excicon">
																								</a></li>
																								<li><a href="#hotregion" id="main-06besticon" class="ui-unselect"  >
																									<img src="/images/main-06besticona.gif"  width="135" height="24" border="0" style="vertical-align:middle" name="main-06besticon">
																								</a></li>
																								</ul>			
**/
$(document).ready(
	function(){
	 var tab_click = function(){
					var href = $(this).attr('region');
					var id = $(this).attr('id');
					$.each($(this).parent().siblings('li').children("[class='ui-selected']"),
						function(){
							var imgid = $(this).attr('id');
							$(this).addClass('ui-unselect');
							$(this).removeClass('ui-selected');
							$(this).click(tab_click);
							$(this).mouseover(function()
							{ 
								MM_swapImage(imgid,'','/images/'+ imgid+ 'b.gif',1);
							});
							
							$(this).mouseout(function (){MM_swapImgRestore();});
							$(this).children().eq(0).attr('src','/images/'+ imgid+ 'a.gif');
							var invisible = $(this).attr('region');
							$(invisible).hide().fadeOut('normal');
//							$(invisible).css('display','none');
							
						});
					
						$(href).show('slow').fadeIn('slow');
					//$(href).css('display','block');
					$(this).removeClass('ui-unselect');
					$(this).addClass('ui-selected');
					$(this).unbind('click',tab_click);
					$(this).unbind('mouseout');
					$(this).unbind('mouseover');
					$(this).children().eq(0).attr('src','/images/'+id+'b.gif');
					//$(this).scrollTo();
					
	};

	$.each($('.ui-tab>li>a'),
		function (){
			if($(this).hasClass('ui-selected')){
				$(this).unbind('click');
				$(this).unbind('mouseout');
				$(this).unbind('mouseover');
				var imgsrc = '/images/' + $(this).attr('id')  +'b.gif';
				$(this).children().eq(0).attr('src',imgsrc);
			}	
			else{	
				var swapimg = '/images/'+ $(this).attr('id')+ 'b.gif';
				$(this).click(tab_click);
				$(this).mouseover(function()
				{ 
					MM_swapImage($(this).attr('id'),'',swapimg,1);
				}).mouseout(function (){MM_swapImgRestore();});
				
			}	
		});
	});