function switchDisplayAndSize(id){
	swhitchSize(id);
	switchDisplay(id);
}

function switchDisplay(id){
 var element = document.getElementById(id);
 var display = (element.offsetHeight ? false : true);
 element.style.display = '';
 
 for(var i=0; i<10; i++){
  var opacity = (display ? (i+1)*10 : (9-i)*10);
  setTimeout((function(element, opacity){
   return function(){
	element.style.opacity = opacity/100;
	element.style.filter = 'alpha(opacity='+opacity+')';
		if(opacity == 0){
			element.style.display = 'none';
			element.style.opacity = 1;
			element.style.filter = 'alpha(opacity=100)';
		}
   }
  })(element, opacity), i*30);
 }
}

function switchSize(id){
	var element = document.getElementById(id);
	var display = (element.offsetHeight ? false : true);
	
	var save_display = element.style.display;
	element.style.display = '';
	var element_height = element.offsetHeight;
	element.style.display = save_display;

	var height_pro_loop = Math.ceil(element_height/10);

	
	for(var i=0; i<10; i++){
		var current_height = (display ? (i+1)*height_pro_loop : element_height-(i*height_pro_loop));
	
		if(current_height > element_height) current_height = element_height;
		if(current_height <= height_pro_loop) current_height = 0;

		setTimeout((function(element, current_height){
		return function(){
			element.style.height = current_height+'px';
			element.style.display = '';
			if(current_height == 0){
				element.style.display = 'none';
				element.style.height = '';
			}
		}
		})(element, current_height), i*30);
	}
}