window.onload=function(){
getData();
init();
imgInfor();
}
var speed=0;
var openOrClose=1;
var check=2;
var INIT_HEIGHT="30px";  
var inforOHeight="20px"; 
var inforEHeight="320px";
var k_menuBox=new Array();
var k_originalHeight=new Array();
var k_caption=new Array();
var k_infor=new Array();
function $(ele,tags){
if(tags=="id"){
return document.getElementById(ele);
}
else
return getElementsBytagName(ele);
}
function getData(){
  var k=$("menuList","id").getElementsByTagName("div");
  for(var i=0;i<k.length;i++){
    if(k[i].className=="infor"){
	  k_infor.push(k[i]);
	  k[i].style.height=inforOHeight;
	}
    if(k[i].className=="boxStyle"){
	  k_menuBox.push(k[i]);
	  k_originalHeight.push(k[i].style.height);
	  initHeight();
	  var t=k[i].getElementsByTagName("div");
	  for(var ii=0;ii<t.length;ii++){
	    if(t[ii].className=="caption"){
		  k_caption.push(t[ii]);
		}
	  }
	}
  }
}
function imgInfor(){
  for(var i=0;i<k_infor.length;i++){
    k_infor[i].style.display="none";
	k_infor[i].style.height=inforOHeight;
	k_infor[i].onclick=function(){
	  if(check==0){
	    if(this.style.height==inforOHeight){                   
		  openIt(this,inforEHeight);
        }
	    else{
	      closeBox(this,inforOHeight);
	    }
	  }
	}
  }
}
function initHeight(){
  for(var i=0;i<k_menuBox.length;i++){
    k_menuBox[i].style.height=INIT_HEIGHT;
  }
}
function findIt(){
  for(var i=0;i<k_menuBox.length;i++){
    if(k_menuBox[i].style.height!=INIT_HEIGHT){
    return k_menuBox[i];
    }
  }
  return false;
}
function closeBox(ele,lastHeight){
  check=1;
  openOrClose=0;
  if(ele!=false){
    var h=parseInt(ele.style.height);
    if(h>parseInt(lastHeight)){
       animation(ele,lastHeight,50,8,"close");
	   setTimeout(function(){closeBox(ele,lastHeight)},1);
    } 
	else{
	  ele.style.height=lastHeight;
	  check=0;
	  openOrClose=1;
	}
  }
}
//打开盒子
function openIt(ele,lastHeight){
    check=1;
	openOrClose=0;
    var h=parseInt(ele.style.height);
    if(h<parseInt(lastHeight)){
	   animation(ele,lastHeight,50,8,"open");
	   setTimeout(function(){openIt(ele,lastHeight)},1);
    }
	else{
	  ele.style.height=lastHeight;
	  check=0;
	  openOrClose=1;
	}
}
function animation(ele,lastHeight,ends,speeds,tag){
  if(Math.abs(parseInt(ele.style.height)-parseInt(lastHeight))>ends){
    if(speed<speeds)
	  speed+=1;
  }
  else{
    if(speed!=1)
	  speed--;
  }
  var g=parseInt(ele.style.height); 
  if(tag=="open")
  g+=speed;
  else
  g-=speed;
  ele.style.height=g+"px";
}
function changeCaptionStyle(ele){
   for(var i=0;i<k_caption.length;i++){
     k_caption[i].style.backgroundColor="#FFFFFF";
	 k_caption[i].style.color="#FFFFFF";
	 if(k_caption[i]==ele){
	   k_caption[i].style.color="#FFFFFF"; 
	   ele.style.backgroundColor="#FFFFFF";
	 }
   }
}
function changeCaptionStyle2(ele,bgcolor){
if(ele.parentNode.style.height==INIT_HEIGHT){
  ele.style.backgroundColor=bgcolor;
}
}
function init(){
  for(var i=0;i<k_caption.length;i++){
    k_caption[i].index = i;
	k_caption[i].onmouseover=function(){
	  changeCaptionStyle2(this,"#FFFFFF");
	}
	k_caption[i].onmouseout=function(){
	  changeCaptionStyle2(this,"#FFFFFF");
	}
	k_caption[i].onclick=function(){
	  if(openOrClose==0){
	    return false;
	  }
	  changeCaptionStyle(this);
	  if(this.parentNode.style.height==INIT_HEIGHT){
	    imgInfor();                                
	    k_infor[this.index].style.display="block"; 
	    closeBox(findIt(),INIT_HEIGHT);            
		openIt(this.parentNode,k_originalHeight[this.index]);
      }
	  else{
	    imgInfor();
	  	changeCaptionStyle();
	    closeBox(findIt(),INIT_HEIGHT);
	  }
	}
  }
}