var widthInc = 10;
var widthDelay = 20;

var openWidth = 208;
var closedWidth = 31;

var currTab = null;
var nextTab = null;

var sTimer = null;
var tabToggling = false;
var tabExpanded = false;

function toggleTab(tabRef) {
    if (!tabToggling) {
        if (tabExpanded) {
            if (currTab == tabRef) {
                tabToggling = true;
                setOverflowScroll(tabRef,false);
                sTimer = setInterval("closeTab()",widthDelay);
            }
            else {
                switchTab(tabRef);
                setOverflowScroll(tabRef,true);
            }
        }
        else {
            tabToggling = true;
            switchTab(tabRef);
            sTimer = setInterval("openTab()",widthDelay);
        }
    }
    return false; // Cancel link click
}

function closeTab() {
    var sWidth = parseInt(tabsDiv.style.width);
    if (sWidth > closedWidth) {
        sWidth -= widthInc;
        if (sWidth < closedWidth) {
            sWidth = closedWidth;
        }
        tabsDiv.style.width = sWidth+"px";
    }
    else {
        clearInterval(sTimer);
        contactDiv.style.visibility = "visible";
        tabExpanded = false;
        tabToggling = false;
    }
}

function openTab() {
    var sWidth = parseInt(tabsDiv.style.width);
    contactDiv.style.visibility = "hidden";
    if (sWidth < openWidth) {
        sWidth += widthInc;
        if (sWidth > openWidth) {
            sWidth = openWidth;
        }
        tabsDiv.style.width = sWidth+"px";
    }
    else {
        tabExpanded = true;
        tabToggling = false;
        setOverflowScroll(currTab,true);
        clearInterval(sTimer);
    }
}

function switchTab(tabRef) {
    if (currTab) {
        currTab.style.display = "none";
        setOverflowScroll(currTab,false);
    }
    tabRef.style.display = "";
    currTab = tabRef;
}

function setOverflowScroll(tabRef, enabled) {
    var tabContent = tabRef.getElementsByTagName("div")[0];
    tabContent.style.overflow = enabled ? "auto" : "hidden";
}

function clearDefaultText() {
  var textField = document.getElementById("shoutText");
  if (textField.value == "Enter Text") {
    textField.value = "";
  }
}

function clearDefaultAuthor() {
  var authorField = document.getElementById("shoutAuthor");
  if (authorField.value == "Your Name") {
    authorField.value = "";
  }
}

function submitShoutbox(form) {
    // Post the data
    var url = "/system/ajax.php?shoutbox=3";
    var data = "shoutText=" + encodeURIComponent(form['shoutText'].value) + "&shoutAuthor=" + encodeURIComponent(form['shoutAuthor'].value);
    var shoutboxHttp = HttpObj();
    shoutboxHttp.open("POST",url,true);
    shoutboxHttp.setRequestHeader('Content-Type','application/x-www-form-urlencoded') 
    shoutboxHttp.send(data);
    // Update the current form
    shoutboxHttp.onreadystatechange = function () {
        if (this.readyState == 4) {
            var parentElement = shoutBox.parentNode;
            var dummyNode = document.createElement("div");
            dummyNode.innerHTML += this.responseText;
            parentElement.replaceChild(dummyNode.firstChild, shoutBox);
            getShoutboxReferences();
            // Set the shoutbox as the current tab
            currTab = shoutBox;
        }
    }
    return false;
}

function getShoutboxReferences() {
    shoutBox = document.getElementById('shoutBox3');
    shoutBox.getElementsByTagName('form')[0].onsubmit = function () { return submitShoutbox(this); };
}

function initVals() {
    // Get the shoutBox element
    getShoutboxReferences();
    // Get showsTab element
    showsTab = document.getElementById('shows');
    // Add action listener to the toggle button for the shoutBox
    document.getElementById('shoutboxToggle').onclick = function () { this.blur(); return toggleTab(shoutBox); };
    // Add action listener to the toggle button for the shoutBox
    document.getElementById('showsTabToggle').onclick = function () { this.blur(); return toggleTab(showsTab); };
}

initVals();
// Get the contactDiv
var contactDiv = document.getElementById('contactDiv');
// Get the tabsDiv
var tabsDiv = document.getElementById("tabsDiv");
// Close tabs by default
tabsDiv.style.width = closedWidth + "px";
// Hide showsTab by default
showsTab.style.display = "none";
setOverflowScroll(showsTab,false);
// Hide the shoutBox by default
shoutBox.style.display = "none";
setOverflowScroll(shoutBox,false);

// Set default values for shoutbox inputs
document.getElementById("shoutText").value = "Enter Text";
document.getElementById("shoutAuthor").value = "Your Name"