var brn = new Branchs();
function $get(El) { return document.getElementById(El); }
function Branchs() {
    this.branchs = new Array();
}
Branchs.prototype.Add = function(bname, obj) {
    this.branchs[bname] = obj;
}
function Branch(xml, name, state) {
    this.XML = xml;
    this.Name = name;
    this.IsShow = state;
    this.HasLoad = false;
    this.TableHeight = 0;
}

//Set XML Array Items
brn.Add('Auckland', new Branch(null, 'Auckland', false));
brn.Add('Christchurch', new Branch(null, 'Christchurch', false));
brn.Add('Melbourne', new Branch(null, 'Melbourne', false));
brn.Add('Sydney', new Branch(null, 'Sydney', false));
brn.Add('Brisbane', new Branch(null, 'Brisbane', false));
brn.Add('Perth', new Branch(null, 'Perth', false));
brn.Add('LosAngeles', new Branch(null, 'LosAngeles', false));

function getContacts(iBranch) {
    $get('s' + iBranch).src = 'img/Loading.gif';
    if (brn.branchs[iBranch].HasLoad) {
        if (brn.branchs[iBranch].IsShow) {
            //Hide
            brn.branchs[iBranch].IsShow = false;
            var Tab = $get('t' + iBranch);
            var TabH = Tab.offsetHeight;
            TimerArray[iBranch] = setTimeout(function() { DispContact('Dec', TabH, iBranch); }, 10);
        } else {
            //Show
            brn.branchs[iBranch].IsShow = true;
            var Tab = $get('t' + iBranch);
            var TabH = Tab.offsetHeight;
            TimerArray[iBranch] = setTimeout(function() { DispContact('Inc', TabH, iBranch); }, 10);
        }
    } else {
        var http = (XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
        http.Branch = iBranch;
        var URL = 'c/Details.asp?Branch=' + iBranch;
        http.onreadystatechange = function() { handler(http) };
        http.open("GET", URL, true);
        http.send(null);
    }
}
var TimerArray = Array();
function handler(http) {
    var Branch = http.Branch;
    if (http.readyState == 4) {
        if (http.status == 200) {
            //Set INERHTML
            $get('p' + http.Branch).innerHTML = http.responseText;
            brn.branchs[http.Branch].HasLoad = true;
            //Get Width
            brn.branchs[http.Branch].IsShow = true;
            var Tab = $get('t' + http.Branch);
            var TabH = Tab.offsetHeight;
            //Animate Movement
            var Pan = $get('p' + http.Branch);
            TimerArray[http.Branch] = setTimeout(function() { DispContact('Inc', TabH, http.Branch); }, 10);
        } else {
            // an error occurred
            alert('An error has occoured');
            loading = false;
        }
    }
}

function DispContact(tType, tHeight, tBranch) {
    var Height = 0;
    if (tType == 'Dec') { Height = tHeight }
    var ChangeAmnt = tHeight / 5;
    var Panel = $get('p' + tBranch);
    innerChangeHeight();
    function innerChangeHeight() {
        if (tType == 'Dec') {
            Height -= ChangeAmnt;
            if (Height <= 1) { Height = 1 }
            Panel.style.height = Height + 'px';
           if (Height > 1) {
                TimerArray[tBranch] = setTimeout(innerChangeHeight, 20);
            } else {
                $get('s' + tBranch).src = 'img/E.gif';
                Panel.style.height = 1 + 'px';
            }
        } else {
            Height += ChangeAmnt;
            if (Height >= tHeight) { Height = tHeight }
            Panel.style.height = Height + 'px';
            if (Height < tHeight) {
                TimerArray[tBranch] = setTimeout(innerChangeHeight, 20);
            } else {
                $get('s' + tBranch).src = 'img/C.gif';
                Panel.style.height = tHeight + 'px';
            }
        }
    }
}