//accordion,可折疊的
//用createElement生成的table不能顯示。它媽的，悶。
//作者：xling (1fairy1)
//信箱：1fairy1@163.com
//更新日期：2005/12/8　更新：加入self,修改了upBtnImg,downBtnImg
//請保留作者信息。
function JAccordion(width,height,parentObj){
	//控件要在哪裡顯示。
	var self=this;
	
	if(parentObj!=null)
		this.body=document.getElementById(parentObj);
	else 
		this.body=document.body;
		
	if(width!=null)
		this.width=width;//控件的寬度
	else
		this.width=216;
	
	this.speed=20;
	
	this.upBtnImg="../img/dot_12.jpg";
	this.downBtnImg="../img/dot_13.jpg";
	
	var maxHeight; 
	if(height!=null)
		maxHeight=height;//每個面板的最大高板，注，不是整體的高度，整體的高度根據有多少面板動態調整。
	else
		maxHeight=258;

	var lastUpAndDownPic;//最後一次變換src的圖片。
	var lastOpenPanel;//最後一次開啟的面板
	var willOpenPanel;//將要打開的面板。
	var willChangepicBtn;//將要改變的圖片。
	this.oPanels=new Array();//哪些是該控件的面板。
	var timeOver=true;//上一次的setTimeout是否完畢。
	
	this.outLine;//在載入完畢後，要動態調整它的高度。
	this.panelTable;//所有的面板都要放入這裡。	
	this.index=0;
	
	//createOutLine:生成一個框架。
	this.createOutLine=function(){
		var oOutDiv=document.createElement("DIV");
		oOutDiv.style.width=this.width + "px";
		oOutDiv.className="accordionBorder";
		this.body.appendChild(oOutDiv);
		this.outLine=oOutDiv;
	};
	this.createOutLine();
	
	//生成panel
	this.appendPanel=function(caption,objID){
		var height,btnPic;
		if(this.index>0){
			height=0;
			btnPic=self.upBtnImg;
		}
		else{
			height=maxHeight;
			btnPic=self.upBtnImg;
		}
		
		var oTitleDiv=document.createElement("DIV");
		//oTitleDiv.className="accordionBar";
		oTitleDiv.style.height="27px"
		oTitleDiv.style.background="url(../img/nav_2.jpg) repeat-x"
		oTitleDiv.style.border="#bbbbbb 1px solid"
		
		var oPanelDiv=document.createElement("DIV");
		oPanelDiv.style.overflow="auto";
		oPanelDiv.style.height=height + "px";
		oPanelDiv.style.width="100%"

		oPanelDiv.setAttribute("maxHeight",maxHeight);
		//注：uniqueID只有IE支持。要兼容，就不能用它。
		//var oPanelUniqueID=oPanelDiv.uniqueID;
		//alert(oPanelUniqueID);
		oPanelDiv.id="JAccordionPanel"+this.index;
		var oPanelUniqueID=oPanelDiv.id;
		
		var tmpStr=" <table class='accordionBar' width='100%' border='0' cellspacing='0' cellpadding='0'>";
		tmpStr+="	<tr panel='"+oPanelUniqueID+"' btn='JAccordionPic"+this.index+"'>";
		tmpStr+="	  <td panel='"+oPanelUniqueID+"' btn='JAccordionPic"+this.index+"' width='120' align='center' class='accordionBarTd'>"+caption+"</td>";
		tmpStr+="	  <td panel='"+oPanelUniqueID+"' btn='JAccordionPic"+this.index+"' width='14'><img panel='"+oPanelUniqueID+"' btn='JAccordionPic"+this.index+"' id='JAccordionPic"+this.index+"' src='"+btnPic+"' width='14' height='14' style='cursor:hand;'></td>";
		tmpStr+="	</tr>";
		tmpStr+="  </table>";

		oTitleDiv.setAttribute("panel",oPanelUniqueID);
		oTitleDiv.setAttribute("btn","JAccordionPic"+this.index);
		oTitleDiv.innerHTML=tmpStr;
			
		if (document.addEventListener)
			oTitleDiv.addEventListener("mouseover", openAndClose, true);//注：該函數默認的參數就是event  也可以把mouseover改为click 即单击事件，下同
		if (document.attachEvent)
		  	oTitleDiv.attachEvent("onmouseover",openAndClose);

		
		this.outLine.appendChild(oTitleDiv);
		this.outLine.appendChild(oPanelDiv);


		if(this.index==0){
			lastOpenPanel=document.getElementById(oPanelUniqueID);
			lastUpAndDownPic=document.getElementById("JAccordionPic"+this.index);
		}
		
		var oTmpObj=document.getElementById(objID)
		oTmpObj!=null?oPanelDiv.appendChild(oTmpObj):null;
		
		this.oPanels.push(oPanelDiv);
		this.index+=1;
	};
	
	var openAndClose=function(evt){
		var oTmpClickObj;
		//if(event.srcElement)
		if(window.all || window.event)
			oTmpClickObj=event.srcElement;
		else
			oTmpClickObj=evt.target;
		
		var tWillOpenPanel=oTmpClickObj.getAttribute("panel");
		var tWillChangepicBtn=oTmpClickObj.getAttribute("btn");
		
		willOpenPanel=document.getElementById(tWillOpenPanel);
		willChangepicBtn=document.getElementById(tWillChangepicBtn);
		
		if(!timeOver) return false;
		if(lastOpenPanel!=willOpenPanel){
			willChangepicBtn.src=self.upBtnImg;
			lastUpAndDownPic.src=self.downBtnImg;
			lastUpAndDownPic=willChangepicBtn;
		}

		displayPanel(willOpenPanel.id);
	};
	
	var tmpObj=new Object();//一個全局變量。在setTimeout裡要用到。	
	//var displayPanel=function(o){//真它媽的BT，想不通，這樣就不對，無意把var 去掉就行了！真他奶奶的邪。
	var speed=this.speed;
	displayPanel=function(o){
		o=document.getElementById(o);
		var tMaxHeight=o.getAttribute("maxHeight");
		tmpObj=o.id;
		if(parseInt(o.style.height)<parseInt(tMaxHeight)){
			o.style.height=(parseInt(o.style.height)+speed)+"px";
			(parseInt(lastOpenPanel.style.height)-speed<0)?lastOpenPanel.style.height="0px":lastOpenPanel.style.height=((parseInt(lastOpenPanel.style.height)-speed)+"px");
			timeOver=false;
			setTimeout("this.displayPanel('"+tmpObj+"')",1);
		}else{
			timeOver=true;
			lastOpenPanel=o;
		}		
	};
}