//updated to  hardcoded widths of 2 pane or 3 pane only

var TimeToSlide = 200.0;
var openAccordion = '';
var openPanel = '';
var expand = 0;
var myCnt = 0;
var totalNoPanes = 0;
function tabArea(myCnt) {
    state = false;
    md(myCnt);
}

function md(myCnt, myHeight, totalNoPanes) {

    if (totalNoPanes == '2') {
        document.getElementById(myCnt + "panel1").style.width = "447px";
        document.getElementById(myCnt + "tab1").style.width = "447px";
        document.getElementById(myCnt + "panel1").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel1Top").style.width = "447px";
        document.getElementById(myCnt + "Accordion1Content").style.width = '0px';

        document.getElementById(myCnt + "panel2").style.width = "447px";
        document.getElementById(myCnt + "tab2").style.width = "447px";
        document.getElementById(myCnt + "panel2").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel2Top").style.width = "447px";
        document.getElementById(myCnt + "Accordion2Content").style.width = '0px';
    }
    if (totalNoPanes == '3') {
        document.getElementById(myCnt + "panel1").style.width = "297px";
        document.getElementById(myCnt + "tab1").style.width = "297px";
        document.getElementById(myCnt + "panel1").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel1Top").style.width = "297px";
        document.getElementById(myCnt + "Accordion1Content").style.width = '0px';

        document.getElementById(myCnt + "panel2").style.width = "297px";
        document.getElementById(myCnt + "tab2").style.width = "297px";
        document.getElementById(myCnt + "panel2").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel2Top").style.width = "297px";
        document.getElementById(myCnt + "Accordion2Content").style.width = '0px';
        document.getElementById(myCnt + "panel3").style.width = "297px";
        document.getElementById(myCnt + "tab3").style.width = "297px";
        document.getElementById(myCnt + "panel3").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel3Top").style.width = "297px";
        document.getElementById(myCnt + "Accordion3Content").style.width = '0px';
    }
	 if (totalNoPanes == '4') {
        document.getElementById(myCnt + "panel1").style.width = "217px";
        document.getElementById(myCnt + "tab1").style.width = "217px";
        document.getElementById(myCnt + "panel1").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel1Top").style.width = "217px";
        document.getElementById(myCnt + "Accordion1Content").style.width = '0px';

        document.getElementById(myCnt + "panel2").style.width = "217px";
        document.getElementById(myCnt + "tab2").style.width = "217px";
        document.getElementById(myCnt + "panel2").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel2Top").style.width = "217px";
        document.getElementById(myCnt + "Accordion2Content").style.width = '0px';
		
        document.getElementById(myCnt + "panel3").style.width = "217px";
        document.getElementById(myCnt + "tab3").style.width = "217px";
        document.getElementById(myCnt + "panel3").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel3Top").style.width = "217px";
        document.getElementById(myCnt + "Accordion3Content").style.width = '0px';
		
		 document.getElementById(myCnt + "panel4").style.width = "217px";
        document.getElementById(myCnt + "tab4").style.width = "217px";
        document.getElementById(myCnt + "panel4").style.height = myHeight + "px";
        document.getElementById(myCnt + "panel4Top").style.width = "217px";
        document.getElementById(myCnt + "Accordion4Content").style.width = '0px';
    }


}

function runAccordion(index, cwidth, myCnt2, myHt, totalNoPanes) {

   //alert(index);
    if (expand == index) {
        return;
    }

    var nID = myCnt2 + "Accordion" + index + "Content";
    var cID = myCnt2 + "Accordion" + expand + "Content";

    //if(openAccordion == nID)
    //nID = '';

    //setTimeout("animate(" 
    //+ new Date().getTime() + "," + TimeToSlide + ",'" 
    // + cID + "','" + nID + "','"+ index +"')", 33);
    animate(new Date().getTime(), TimeToSlide, cID, nID, index, myCnt2, myHt, totalNoPanes,cwidth );

    openAccordion = nID;
    expand = index;
}
function animate(lastTick, timeLeft, closingId, openingId, ind, myCnt, myHeight, totalNoPanes,Content_Width) {
    //if(expand!= ind)
    //{
    //return;
    //}
    //alert("ind"  + ind);
    if (totalNoPanes == '2') {
        var myNameId1 = myCnt + "panel1";
        var myTabId1 = myCnt + "tab1";
        var myTopId1 = myCnt + "panel1Top";
        var myaId1 = myCnt + "a1";
        var mybId1 = myCnt + "b1";
        var mycId1 = myCnt + "c1";

        var myNameId2 = myCnt + "panel2";
        var myTabId2 = myCnt + "tab2";
        var myTopId2 = myCnt + "panel2Top";
        var myaId2 = myCnt + "a2";
        var mybId2 = myCnt + "b2";
        var mycId2 = myCnt + "c2";
		//var myContent = myCnt + "Accordion" + ind + "Content";

    }
    if (totalNoPanes == '3') {
        var myNameId1 = myCnt + "panel1";
        var myTabId1 = myCnt + "tab1";
        var myTopId1 = myCnt + "panel1Top";
        var myaId1 = myCnt + "a1";
        var mybId1 = myCnt + "b1";
        var mycId1 = myCnt + "c1";

        var myNameId2 = myCnt + "panel2";
        var myTabId2 = myCnt + "tab2";
        var myTopId2 = myCnt + "panel2Top";
        var myaId2 = myCnt + "a2";
        var mybId2 = myCnt + "b2";
        var mycId2 = myCnt + "c2";
        var myNameId3 = myCnt + "panel3";
        var myTabId3 = myCnt + "tab3";
        var myTopId3 = myCnt + "panel3Top";
        var myaId3 = myCnt + "a3";
        var mybId3 = myCnt + "b3";
        var mycId3 = myCnt + "c3";
		//var myContent = myCnt + "Accordion" + ind + "Content";
    }
	
	 if (totalNoPanes == '4') {
        var myNameId1 = myCnt + "panel1";
        var myTabId1 = myCnt + "tab1";
        var myTopId1 = myCnt + "panel1Top";
        var myaId1 = myCnt + "a1";
        var mybId1 = myCnt + "b1";
        var mycId1 = myCnt + "c1";
		 var mycId1 = myCnt + "d1";
		
        var myNameId2 = myCnt + "panel2";
        var myTabId2 = myCnt + "tab2";
        var myTopId2 = myCnt + "panel2Top";
        var myaId2 = myCnt + "a2";
        var mybId2 = myCnt + "b2";
        var mycId2 = myCnt + "c2";
		 var mycId2 = myCnt + "d2";
		
        var myNameId3 = myCnt + "panel3";
        var myTabId3 = myCnt + "tab3";
        var myTopId3 = myCnt + "panel3Top";
        var myaId3 = myCnt + "a3";
        var mybId3 = myCnt + "b3";
        var mycId3 = myCnt + "c3";
		var mycId3 = myCnt + "d3"; 
		 
		var myNameId4 = myCnt + "panel4";
        var myTabId4 = myCnt + "tab4";
        var myTopId4 = myCnt + "panel4Top";
      
		
    }

    var myId = myCnt + "panel" + ind;
    var myTop = myCnt + "panel" + ind + "Top";
     var myContent = myCnt + "Accordion" + ind + "Content";

    var curTick = new Date().getTime();
    var elapsedTicks = curTick - lastTick;

    var opening = (openingId == '') ? null: document.getElementById(openingId);
    var closing = (closingId == '') ? null: document.getElementById(closingId);

    if (timeLeft <= elapsedTicks) {
        if (opening != null) opening.style.width = Content_Width + 'px';

        if (closing != null) {
            closing.style.display = 'none';
            closing.style.width = '0px';
        }
        return;
    }

    timeLeft -= elapsedTicks;
    var newClosedWidth = Math.round((timeLeft / TimeToSlide) * Content_Width);
	
	if (totalNoPanes == '4') {
        if (opening != null) {
            if (opening.style.display != 'block') opening.style.display = 'block';

            if (myId != myNameId1) {
                document.getElementById(myNameId1).style.width = "120px";
                document.getElementById(myTabId1).style.width = "120px";
                document.getElementById(myNameId1).style.height = myHeight + "px";
                document.getElementById(myTopId1).style.width = "122px";
                document.getElementById(myaId1).innerHTML = document.getElementById(myCnt + "a2").innerHTML;

                document.getElementById(myCnt + "a3").innerHTML = "";

            }
            if (myId != myNameId2) {
                document.getElementById(myNameId2).style.width = "120px";
                document.getElementById(myTabId2).style.width = "120px";
                document.getElementById(myNameId2).style.height = myHeight + "px";
                document.getElementById(myTopId2).style.width = "122px";
                document.getElementById(mybId1).innerHTML = document.getElementById(myCnt + "b2").innerHTML;
                document.getElementById(myCnt + "b3").innerHTML = "";

            }

            if (myId != myNameId3) {
                document.getElementById(myNameId3).style.width = "120px";
                document.getElementById(myTabId3).style.width = "120px";
                document.getElementById(myNameId3).style.height = myHeight + "px";
                document.getElementById(myTopId3).style.width = "122px";
                document.getElementById(mycId1).innerHTML = document.getElementById(myCnt + "c2").innerHTML;
                document.getElementById(myCnt + "c3").innerHTML = "";

            }
			if (myId != myNameId4) {
                document.getElementById(myNameId4).style.width = "120px";
                document.getElementById(myTabId4).style.width = "120px";
                document.getElementById(myNameId4).style.height = myHeight + "px";
                document.getElementById(myTopId4).style.width = "122px";
                document.getElementById(mycId1).innerHTML = document.getElementById(myCnt + "d2").innerHTML;
                document.getElementById(myCnt + "d3").innerHTML = "";

            }

            document.getElementById(myId).style.width = "0px";
            document.getElementById(myId).style.height = "0px";
            document.getElementById(myTop).style.width = "515px";
            document.getElementById(myContent).style.width = '515px';
            document.getElementById(myTop).style.visibility = "visible";

            opening.style.width = (Content_Width - newClosedWidth) + 'px';
        }
        if (closing != null) closing.style.width = newClosedWidth + 'px';

        //setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
        //+ closingId + "','" + openingId + "','"+ ind + "')", 111);
        animate(curTick, timeLeft, closingId, openingId, ind, myCnt, myHeight, totalNoPanes,Content_Width);
        //expand= ind;
    }
	
	
	
    if (totalNoPanes == '3') {
        if (opening != null) {
            if (opening.style.display != 'block') opening.style.display = 'block';

            if (myId != myNameId1) {
                document.getElementById(myNameId1).style.width = "140px";
                document.getElementById(myTabId1).style.width = "140px";
                document.getElementById(myNameId1).style.height = myHeight + "px";
                document.getElementById(myTopId1).style.width = "142px";
                document.getElementById(myaId1).innerHTML = document.getElementById(myCnt + "a2").innerHTML;

                document.getElementById(myCnt + "a3").innerHTML = "";

            }
            if (myId != myNameId2) {
                document.getElementById(myNameId2).style.width = "140px";
                document.getElementById(myTabId2).style.width = "140px";
                document.getElementById(myNameId2).style.height = myHeight + "px";
                document.getElementById(myTopId2).style.width = "142px";
                document.getElementById(mybId1).innerHTML = document.getElementById(myCnt + "b2").innerHTML;
                document.getElementById(myCnt + "b3").innerHTML = "";

            }

            if (myId != myNameId3) {

                document.getElementById(myNameId3).style.width = "140px";
                document.getElementById(myTabId3).style.width = "140px";
                document.getElementById(myNameId3).style.height = myHeight + "px";
                document.getElementById(myTopId3).style.width = "142px";
                document.getElementById(mycId1).innerHTML = document.getElementById(myCnt + "c2").innerHTML;
                document.getElementById(myCnt + "c3").innerHTML = "";

            }

            document.getElementById(myId).style.width = "0px";
            document.getElementById(myId).style.height = "0px";
            document.getElementById(myTop).style.width = "605px";
            document.getElementById(myContent).style.width = '605px';
            document.getElementById(myTop).style.visibility = "visible";

            opening.style.width = (Content_Width - newClosedWidth) + 'px';
        }
        if (closing != null) closing.style.width = newClosedWidth + 'px';

        //setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
        //+ closingId + "','" + openingId + "','"+ ind + "')", 111);
        animate(curTick, timeLeft, closingId, openingId, ind, myCnt, myHeight, totalNoPanes,Content_Width);
        //expand= ind;
    }
    if (totalNoPanes == '2') {

        if (opening != null) {
            if (opening.style.display != 'block') opening.style.display = 'block';
            if (myId != myNameId1) {
                document.getElementById(myNameId1).style.width = "221px";
                document.getElementById(myTabId1).style.width = "221px";
                document.getElementById(myNameId1).style.height = myHeight + "px";
                document.getElementById(myTopId1).style.width = "221px";
                document.getElementById(myaId1).innerHTML = document.getElementById(myCnt + "a2").innerHTML;

                document.getElementById(myCnt + "a3").innerHTML = "";

            }

            if (myId != myNameId2) {
                document.getElementById(myNameId2).style.width = "221px";
                document.getElementById(myTabId2).style.width = "221px";
                document.getElementById(myNameId2).style.height = myHeight + "px";
                document.getElementById(myTopId2).style.width = "221px";
                document.getElementById(mybId1).innerHTML = document.getElementById(myCnt + "b2").innerHTML;
                document.getElementById(myCnt + "b3").innerHTML = "";

            }

            document.getElementById(myId).style.width = "0px";
            document.getElementById(myId).style.height = "0px";
            document.getElementById(myTop).style.width = "675px";
            document.getElementById(myContent).style.width = '675px';
            document.getElementById(myTop).style.visibility = "visible";

            opening.style.width = (Content_Width - newClosedWidth) + 'px';
        }
        if (closing != null) closing.style.width = newClosedWidth + 'px';

        //setTimeout("animate(" + curTick + "," + timeLeft + ",'" 
        //+ closingId + "','" + openingId + "','"+ ind + "')", 111);
        animate(curTick, timeLeft, closingId, openingId, ind, myCnt, myHeight, totalNoPanes,Content_Width);
        //expand= ind;
    }

}
//runAccordion(1);