document.observe('dom:loaded', function() {
	//observers for carous images
	if($('carous')){
	
	/*	$('body_left').observe('mouseover', function(event){
			if($('image_big')){
				if($('image_big').style.display != 'none')
					loadMsg('image_big', 3);
			}
		});
	*/	
		$('carous').select('.slide_img').each(function (el) {
			$(el).observe('click', showContent);
			$(el).setStyle({cursor: 'pointer'});
		//	$(el).observe('mouseover', popupImage);
			
		});
	}
	
	//observers for menu tabs
	if($('tab_5')){
		$('tab_5').observe('mouseover', getHighlight);
		$('tab_5').observe('mouseout', awayHighlight);
	}
	if($('tab_6')){
		$('tab_6').observe('mouseover', getHighlight);
		$('tab_6').observe('mouseout', awayHighlight);
	}
	if($('tab_7')){
		$('tab_7').observe('mouseover', getHighlight);
		$('tab_7').observe('mouseout', awayHighlight);
	}
	if($('tab_8')){
		$('tab_8').observe('mouseover', getHighlight);
		$('tab_8').observe('mouseout', awayHighlight);
	}
	
	 		


})


	
 	function runTest() {
	 	vCarousel = new UI.Carousel("vertical_carousel", {direction: "vertical"});
	}

	/**
	*	dispaly element with different styles
	*/
	function loadMsg (eId, mode){
		switch (mode) {
			case 1:
				new Effect.BlindDown($(eId));
				break;
			case 2:
				new Effect.Appear($(eId));
				break;
			case 3:
				new Effect.Fade($(eId));
				break;
			default:
				break;
		}
		
		
	}
		/**
	*	switch the display value in style
	*/
	function switchView (id, mode){
		
		if($(id)){
			if($(id).style.display =='none')
				loadMsg($(id), mode);
			else {
				loadMsg($(id), 3);
			
			}
		}
	}
	/**
	*	let user confirm his/ her action
	*/
	function confirmOperation (msg){
		
		var answer = confirm(msg);
		if (answer){
			return true;
		}
		else{
			return false;
		}
	}
/*
	function respondToTab_1(event) {
		var element = event.element();
	  	element.addClassName('active');
	}
*/

	function showContent(event){
		var el = event.element();
		var webTag = el.readAttribute('id');
		
		
		new Ajax.Request('/include/rpc.php',
		{
			method:'get',
		    parameters:{mode:'carous', web_name: webTag},
		    
		    onComplete:function(transport){
		    	var re = transport.responseXML;
		      	//get content of body in HTML
		      	var maindiv = re.getElementsByTagName('maindiv')[0].firstChild.nodeValue;
		      	
		      	//add the got HTML into body div
		      	if($('body_left')){
		      		$('body_left').update(maindiv);
		      		
		      	}
		      	else{
		      		alert('can not get container');
		      	}
		    },
	  		onFailure: function(){ alert('Something went wrong...') }
		});
	
	}

//	for testing
 	function siteAjax (tab_id){


 		new Ajax.Request('/include/rpc.php',
		{
		    method:'get',
		    parameters:{mode: 'menu_switch', switchto: tab_id},
		    onSuccess: function(transport){
		    	
		      	var re = transport.responseXML;
		      	//get content of body in HTML
		      	var maindiv = re.getElementsByTagName('maindiv')[0].firstChild.nodeValue;
		      	
		      	//add the got HTML into body div
		      	if($('content')){
		      		$('content').innerHTML = maindiv;
		      		//set special effect to show the body
		      		if($('body_wrapper')){
		      			switchView($('body_wrapper'), 2);
		      		}
		      		
		      		//observers for carous images
					if($('carous')){
						//runTest();
						$('carous').select('.slide_img').each(function (el) {
							$(el).observe('click', showContent);
						});
						
						
					}
				/*	if($('vertical_carousel')){
							alert('find the slide');
							runTest();
							alert('end the slide');
					}
				*/
		      	}
		      	else{
		      		alert('can not get container');
		      	}
		      	
		    },
		    onFailure: function(){ alert('Something went wrong...') }
		  });
 		
 	}
 	
 	function runTest() {
		vCarousel = new UI.Carousel("vertical_carousel", {direction: "vertical"});
	}
 	
 	function getClickedTabId(event){
 		var tab = event.element();
	  	var tab_id = tab.id.split('_');
	  	
	  	siteAjax(tab_id[1]);
	  	
 	}
 	
 	function submitform()
	{
		document.myform.submit();
	}
 
 	function getHighlight(event){
 		
 		var tab = event.element();
 		var tab_id = tab.id.split('_');
 		var id = tab_id[1];
 		var p = Number(id);
 		
 		switch (p){
 			case 5:
 				//alert(tab.src);
 				tab.src = '/image/menu_home_hover.gif';
 				break;
 			case 6:
 				tab.src = '/image/menu_profile_hover.gif';
 				break;
 			case 7:
 				tab.src = '/image/menu_about_hover.gif';
 				break;
 			case 8:
 				tab.src = '/image/menu_blog_hover.gif';
 				break;
 			default:
 				//alert(tab.src);
 				break;
 		} 
 		
 	}
 	
 	function awayHighlight(event){
 		
 		var tab = event.element();
 		var tab_id = tab.id.split('_');
 		var id = tab_id[1];
 		var p = Number(id);
 
 		switch (p){
 			case 5:
 				//alert(tab.src);
 				tab.src = '/image/menu_home.gif';
 				break;
 			case 6:
 				tab.src = '/image/menu_profile.gif';
 				break;
 			case 7:
 				tab.src = '/image/menu_about.gif';
 				break;
 			case 8:
 				tab.src = '/image/menu_blog.gif';
 				break;
 			default:
 				//alert(tab.src);
 				break;
 		} 
 	}
 	
 	function popupImage(event){
 		var img = event.element();
 		var imgIconName = img.readAttribute('id');
 		var imgBigName = imgIconName + '_popup.jpg';
 		
 		
 		if($('image_big')){
 			var img_text = '<img src="/image/' + imgBigName + '" alt="' + imgBigName + '" />';
 			$('image_big').update(img_text);
 				if($('image_big').style.display == 'none')
						loadMsg('image_big', 1);
 		}
 	}