$(function() {
	//all the menu items
	var $items 		= $('#cc_menu .cc_item');
	//number of menu items
	var cnt_items	= $items.length;
	//if menu is expanded then folded is true
	var folded		= false;
	//timeout to trigger the mouseenter event on the menu items
	var menu_time;
	
	
	/**
	bind the mouseenter, mouseleave to each item:
	- shows / hides image and submenu
	bind the click event to the list elements (submenu):
	- hides all items except the clicked one, 
	and shows the content for that item
	*/
	$items.unbind('mouseenter')
		  .bind('mouseenter',m_enter)
		  .unbind('mouseleave')
		  .bind('mouseleave',m_leave)
		  .find('.cc_submenu > ul > li')
		  .bind('click',function(){
								
		var $li_e = $(this);
			  //if the menu is already folded,
			  //just replace the content
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
			  else //fold and show the content
			fold($li_e);
	});
	
	
	/*add by gxq */
	var $imgListItems= $('#imgList  > ul > li');
	$imgListItems.bind('click',function(){
		var $li_e = $(this);
			  //if the menu is already folded,
			  //just replace the content
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
			  else //fold and show the content
			fold($li_e);								
	});
	var $imgListItems= $('#techimgList  > ul > li');
	$imgListItems.bind('click',function(){
		var $li_e = $(this);
			  //if the menu is already folded,
			  //just replace the content
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
			  else //fold and show the content
			fold($li_e);								
	});
	
	var $insideLeftContentA= $('.insideLeftContent  > a');
	$insideLeftContentA.bind('click',function(){
		//alert($(this).parent().parent().attr('class'));
		var $li_e =$(this).parent().parent();
			  //if the menu is already folded,
			  //just replace the content
		if(folded){
			hideContent();
			showContent($li_e.attr('class'));
		}	
			  else //fold and show the content
			fold($li_e);								
	});
	/*var $scrollListItems=$('#speaker >ul >li');
	$scrollListItems.bind('click',function(){
										   
		var imgPath=$(this).find('img').attr('src').replace('.jpg','b.jpg');
		$('#displayBox').html('<img src='+imgPath+' width=400px height=400px />');				 
		$.blockUI({ 
            message: $('#displayBox'), 
            css: { 
                top:  ($(window).height() - 400) /2 + 'px', 
                left: ($(window).width() - 400) /2 + 'px', 
                width: '400px' 
            } 
        }); 
 		$('.blockOverlay').attr('title','单击关闭').click($.unblockUI);   
        //setTimeout($.unblockUI, 2000); 

	});*/
	
	/**
	mouseenter function for the items
	the timeout is used to prevent this event 
	to trigger if the user moves the mouse with 
	a considerable speed through the menu items
	*/
	function m_enter(){
		var $this 	= $(this);
		clearTimeout(menu_time);
		menu_time 	= setTimeout(function(){
		//img
		$this.find('img').stop().animate({'top':'0px'},400);
		$this.find('.cc_title').stop().animate({'top':'457px'},400);
		//cc_submenu ul
		$this.find('.cc_submenu > ul').stop().animate({'height':'83px'},400);
		},200);
	
	}
	
	//mouseleave function for the items
	function m_leave(){
		var $this = $(this);
		clearTimeout(menu_time);
		//img
		$this.find('img').stop().animate({'top':'-600px'},400);
		$this.find('.cc_title').stop().animate({'top':'270px'},400);
		//cc_submenu ul
		$this.find('.cc_submenu > ul').stop().animate({'height':'0px'},400);
		
	}
	
	//back to menu button - unfolds the menu
	//$('#cc_back').bind('click',unfold);
	
	
	/**
	hides all the menu items except the clicked one
	after that, the content is shown
	*/
	function fold($li_e){
		var $item		= $li_e.closest('.cc_item');
		
		var d = 100;
		var step = 0;
		$items.unbind('mouseenter mouseleave');
		$items.not($item).each(function(){
			var $item = $(this);
			$item.stop().animate({
				'marginLeft':'-231px'
			},d += 200,function(){
				++step;
				if(step == cnt_items-1){
					folded = true;
					showContent($li_e.attr('class'));
					
		
				}	
			});
		});
	}
	
	/**
	shows all the menu items 
	also hides any item's image / submenu 
	that might be displayed
	*/
	function unfold(){
		$('.cc_submenu a').removeClass('current');
		Cufon.refresh();
		$('#cc_content').stop().animate({'left':'-693px'},600,function(){
			var d = 100;
			var step = 0;
		$items.each(function(){
				var $item = $(this);
			
				
				$item.find('img')
					 .stop()
					 .animate({'top':'-600px'},200)
					 .andSelf()
					 .find('.cc_submenu > ul')
					 .stop()
					 .animate({'height':'0px'},200)
					 .andSelf()
					 .find('.cc_title')
					 .stop()
					 .animate({'top':'270px'},200);								 
					 
				$item.stop().animate({
				'marginLeft':'0px'
				},d += 200,function(){
					++step;
					if(step == cnt_items-1){
						folded = false;
						
						$items.unbind('mouseenter')
							  .bind('mouseenter',m_enter)
							  .unbind('mouseleave')
							  .bind('mouseleave',m_leave);
						
						hideContent();
					}		  
				});
			});
		});
	}
	
	//function to show the content
	function showContent(idx){
		//alert(idx);
		$('#cc_content').stop().animate({'left':'231px'},200,function(){
			$(this).find('.'+idx).fadeIn();
		});
		
		 if(idx.replace('cc_content_','').split('_').length>2&&!(idx.replace('cc_content_','')=='1_4_1'||idx.replace('cc_content_','')=='1_4_2'||idx.replace('cc_content_','')=='1_4_3'))
		{
			//alert('GO');
			$('#cc_back').find('a').eq(0).attr('href','#');
			$('#cc_back').unbind('click');
			$('#cc_back').bind('click',function(){goBack(idx);});
		}
		else if(idx.replace('cc_content_','')=='1_4_1'||idx.replace('cc_content_','')=='1_4_2'||idx.replace('cc_content_','')=='1_4_3')
		{
			$('#cc_back').find('a').eq(0).attr('href','cables.html');
		}
		else if(idx.replace('cc_content_','')=='1_3')
		{
			$('#cc_back').find('a').eq(0).attr('href','others.html');
			
		}
		else
		{
			$('#cc_back').unbind('click');
			$('#cc_back').bind('click',unfold);

		}
	}
	
	//function to hide the content
	function hideContent(){
		$('#cc_content').find('div.block').hide();
	
	}
	function goBack(idx)
	{
		//alert('Go');
		idx=idx.substring(0,idx.lastIndexOf('_'));
		
		hideContent();
		showContent(idx);
		
		
	}
	
});