var themeName, forumName;

function onDoneLoadingJS() {
  document.getElementById("loading").style.display = "block";
  document.getElementById("noJS").style.display = "none";
}

function resize() {
  document.getElementById("tree").style.height = (document.body.offsetHeight - 34) + "px";
  document.getElementById("innerTree").style.height = (document.body.offsetHeight - 36) +
    "px";
  document.getElementById("div-vert").style.height = (document.body.offsetHeight - 30) + "px";
  document.getElementById("start").style.height = (document.body.offsetHeight - 34) + "px";
  document.getElementById("start").style.width = (document.body.offsetWidth -
    document.getElementById("tree").offsetWidth - 11) + "px";
  document.getElementById("threads").style.width = (document.body.offsetWidth -
    document.getElementById("tree").offsetWidth - 11) + "px";
  document.getElementById("div-horiz").style.width = (document.body.offsetWidth -
    document.getElementById("tree").offsetWidth - 5) + "px";
  document.getElementById("posts").style.width = (document.body.offsetWidth -
    document.getElementById("tree").offsetWidth - 11) + "px";
  document.getElementById("posts").style.height = (document.body.offsetHeight -
    document.getElementById("threads").offsetHeight - 41) + "px";
}

var divdrag = null;

function body_onMouseMove(e) {
  if (divdrag == "vert") {
    if (e) {
      var mouseX = e.pageX;
    } else {
      var mouseX = event.x;
    }
    document.getElementById("tree").style.width = (mouseX - 7) + "px";    
    document.getElementById("div-vert").style.left = (mouseX - 3) + "px";    
    document.getElementById("start").style.left = (mouseX + 3) + "px";    
    document.getElementById("start").style.width = (document.body.offsetWidth -
      document.getElementById("tree").offsetWidth - 11) + "px";
    document.getElementById("threads").style.left = (mouseX + 3) + "px";    
    document.getElementById("threads").style.width = (document.body.offsetWidth -
      document.getElementById("tree").offsetWidth - 11) + "px";
    document.getElementById("div-horiz").style.left = (mouseX + 2) + "px";    
    document.getElementById("div-horiz").style.width = (document.body.offsetWidth -
      document.getElementById("tree").offsetWidth - 5) + "px";
    document.getElementById("posts").style.left = (mouseX + 3) + "px";    
    document.getElementById("posts").style.width = (document.body.offsetWidth -
      document.getElementById("tree").offsetWidth - 11) + "px";
  } else if (divdrag == "horiz") {
    if (e) {
      var mouseY = e.pageY;
    } else {
      var mouseY = event.y;
    }
    document.getElementById("threads").style.height = (mouseY - 37) + "px";
    document.getElementById("div-intersect").style.top = (mouseY - 33) + "px";
    document.getElementById("div-horiz").style.top = (mouseY - 3) + "px";
    document.getElementById("posts").style.top = (mouseY + 3) + "px";    
    document.getElementById("posts").style.height = (document.body.offsetHeight -
      document.getElementById("threads").offsetHeight - 41) + "px";
  }
}

function div_vert_onMouseDown() {
  divdrag = "vert";

  document.getElementById("body").onmousemove = body_onMouseMove;
  document.getElementById("body").style.cursor = "w-resize";
}

function div_horiz_onMouseDown() {
  divdrag = "horiz";

  document.getElementById("body").onmousemove = body_onMouseMove;
  document.getElementById("body").style.cursor = "n-resize";
}

function cookie(name, value) {
  var expire = new Date();
  expire.setFullYear(expire.getFullYear() + 10);

  document.cookie = name + "=" + value + "; expires=" + expire.toGMTString();
}

function body_onMouseUp() {
  if (divdrag != null) {
    document.getElementById("body").onmousemove = null;  
    document.getElementById("body").style.cursor = "auto";

    var expire = new Date();
    expire.setFullYear(expire.getFullYear() + 10);

    cookie("treesize", document.getElementById("tree").offsetWidth - 2);
    cookie("listsize", document.getElementById("threads").offsetHeight - 2);
  }
  divdrag = null;
}

var logon;
function logon_onClick() {
  if (!logon || logon.closed) {
    logon = window.open("?sub=logon", "", "width=225,height=101,location=no,menubar=no," +
      "toolbar=no,status=no,resizable=no,scollbars=no,dependant=yes");
  } else {
    logon.focus();
  }
}

var toolbarNodes = new Array();

var TB_TYPE = 0;
var TB_DIV = 1;
var TB_INNER = 2;
var TB_FUNC = 3;

var TB_BUTTON = 0;
var TB_SEP = 1;

function toolbar_addNode(icon, func) {
  var x = new Array();
  if (icon == "") {
    x.push(TB_SEP);
  } else {
    x.push(TB_BUTTON);
  }

  x.push(document.createElement('div'));

  if (x[TB_TYPE] == TB_SEP) {
    x[TB_DIV].className = 'toolSep';
  } else {
    x[TB_DIV].className = 'toolButton';
//    x[TB_DIV].onclick = 'toolbar_selectNode(' + toolbarNodes.length + ');';
    var oc = document.createAttribute('onclick');
    oc.nodeValue = 'toolbar_selectNode(' + toolbarNodes.length + ');';
    x[TB_DIV].attributes.setNamedItem(oc);
  }

  var offset = 0;
  
  if (toolbarNodes.length > 0) {
    offset = toolbarNodes[toolbarNodes.length - 1][TB_DIV].offsetLeft;

    if (toolbarNodes[toolbarNodes.length - 1][TB_DIV] == TB_SEP) {
      offset += 5;
    } else {
      offset += 28;
    }
  }

  x[TB_DIV].style.left = offset + "px";

  if (x[TB_TYPE] == TB_SEP) {
    x.push(0);
    x.push(0);
  } else {
    x.push(document.createElement('div'));
    x[TB_INNER].className = "innerToolButton";
    x[TB_INNER].style.backgroundImage = 'url("' + icon + '")';
    x[TB_DIV].appendChild(x[TB_INNER]);

    x.push(func);
  }

  document.getElementById('toolbar').appendChild(x[TB_DIV]);

  toolbarNodes.push(x);

  return toolbarNodes.length - 1;
}

function toolbar_selectNode(i) {
  return toolbarNodes[i][TB_FUNC](i);
}

var treeNodes = new Array();

var NODEPARENT = 0;
var NODEINDENT = 1;
var NODEBOX = 2;
var NODE = 3;
var NODELINK = 4;
var NODETEXT = 5;
var NODEISOPEN = 6;
var NODECHILDREN = 7;
var NODEBAR = 8;
var NODEFUNC = 9;

var NODEISROOT = -1;
var NODEISDISPOSED = -2;

function tree_getChildrenNum(index) {
  var num = 0;
  for (var i = 0; i < treeNodes.length; i++) {
    if (treeNodes[i][NODEPARENT] == index) {
      num++;
    }
  }
  return num;
}

function tree_execChildren(index, func) {
  for (var i = 0; i < treeNodes.length; i++) {
    if (treeNodes[i][NODEPARENT] == index) {
      func(i);
    }
  }
}

function tree_getLevel(index) {
  var num = -1;
  var curr = index;
  while (curr > NODEISROOT) {
    curr = treeNodes[curr][NODEPARENT];
    num++;
  }
  return num;
}

function tree_addRootNode() {
  var x = new Array();
  x.push(NODEISROOT);  
  x.push(0);
  x.push(0);
  x.push(0);
  x.push(0);
  x.push(0);
  x.push(1);
  x.push(document.getElementById('innerTree'));
  x.push(0);
  x.push(0);
  treeNodes.push(x);
}

function tree_recurseUp(index, func) {
  var curr = index;
  while (curr > NODEISROOT) {
    func(curr);
    curr = treeNodes[curr][NODEPARENT];
  }
}

function tree_getHeight(index) {
  var num = 1;
  if (treeNodes[index][NODEISOPEN]) {
    tree_execChildren(index, function(i) {
      num += tree_getHeight(i);
    });
  }
  return num;
}

function tree_adjustBars(index, child, childcount) {
  var num = childcount;
  var curr = index;
  while (curr > 0) {
    tree_execChildren(curr, function(i) {
      if (i != child) {
        num += tree_getHeight(i);
      }
    });

    treeNodes[curr][NODEBAR].style.height = (num * 17) + 'px';

    child = curr;
    num += 1;
    curr = treeNodes[curr][NODEPARENT];
  }
}

function tree_addNode(root, icon, text, func) {
  if (treeNodes.length == 0) {
    tree_addRootNode();
  }  

  var level = tree_getLevel(root) + 1;
  var siblings = tree_getChildrenNum(root);

  tree_execChildren(root, function(x) {
    treeNodes[x][NODEINDENT].className = 'nodeBranch';
//    treeNodes[x][NODEBAR].style.visibility = 'visible';
    treeNodes[x][NODEBAR].className = 'nodeBar';
  });

  var x = new Array();
  x.push(root);

  x.push(document.createElement('div'));
  x[NODEINDENT].className = 'nodeLastBranch';

  treeNodes[root][NODECHILDREN].appendChild(x[NODEINDENT]);

  x.push(0);

  x.push(document.createElement('div'));
  x[NODE].className = 'node';
  treeNodes[root][NODECHILDREN].appendChild(x[NODE]);

  x.push(document.createElement('a'));
  x[NODELINK].href = "javascript:;";
//  x[NODELINK].onclick = "tree_selectNode(" + treeNodes.length + ");";
  var oc = document.createAttribute('onclick');
  oc.nodeValue = 'tree_selectNode(' + treeNodes.length + ');';
  x[NODELINK].attributes.setNamedItem(oc);

  x[NODELINK].className = 'nodelink';
  x[NODE].appendChild(x[NODELINK]);

  var i = document.createElement('img');
  i.className = 'nodeIcon';
  i.src = icon;
  i.alt = '';
  i.title = '';
  x[NODELINK].appendChild(i);

  var t = document.createTextNode(' ');
  x[NODELINK].appendChild(t);

  x.push(document.createElement('span'));
  x[NODETEXT].className = 'nodeText';
  x[NODELINK].appendChild(x[NODETEXT]);

  t = document.createTextNode(text);
  x[NODETEXT].appendChild(t);

  x.push(1);
  x.push(document.createElement('div'));
  x[NODECHILDREN].className = 'nodeChildren';
  x[NODECHILDREN].style.display = 'none';

  x.push(document.createElement('div'));
  x[NODEBAR].className = 'nodeBarHidden';
//  x[NODEBAR].className = 'nodeBar';
//  x[NODEBAR].style.visibility = 'hidden';
  x[NODECHILDREN].appendChild(x[NODEBAR]);

  x.push(func);

  treeNodes[root][NODECHILDREN].appendChild(x[NODECHILDREN]);

  tree_recurseUp(root, function(x) {
    treeNodes[x][NODECHILDREN].style.display = 'block';
  });

  treeNodes.push(x);

  tree_adjustBars(root, treeNodes.length - 1, 1);

  return treeNodes.length - 1;
}

function tree_selectNode(node) {
  for (var i = 0; i < treeNodes.length; i++) { 
    if (i == node) {
      treeNodes[i][NODETEXT].className = 'nodeText nodeselect';
      if (treeNodes[i][NODEFUNC]) {
        treeNodes[i][NODEFUNC](i);
      }
    } else {
      treeNodes[i][NODETEXT].className = 'nodeText';
    }
  }
}

// Simple AJAX implementation.  Supports GET and POST methods.  This function is asyncronous,
// with "func" being called when the data is returned.
function ajax(method, url, args, func) {
  var http;
  if (!http && typeof XMLHttpRequest != 'undefined') {
    http = new XMLHttpRequest(); // For non-IE browsers
  }
  if (!http) {
    try {
      http = new ActiveXObject("Msxml2.XMLHTTP"); // Newer IE
    } catch (e) {
      try {
        http = new ActiveXObject("Microsoft.XMLHTTP"); // Older IE
      } catch (E) {
      }
    }
  }
 
  var encodedArgs = "";
  // args is an array of strings" {"key", "value, "key" ... "value"}
  for (var i = 0; i < args.length; i += 2) { 
    for (var j = 0; j <= 1; j++) {
      args[i + j] = args[i + j].replace(/%/g, "%25")
      args[i + j] = args[i + j].replace(/&/g, "%26")
      args[i + j] = args[i + j].replace(/=/g, "%3D")

      // Encode characters so no invalid parameters get passed
    }

    if (i > 0) {
      encodedArgs += "&"
    }
    encodedArgs += args[i] + "=" + args[i + 1];
  }

  if (method == "get" && encodedArgs != "") {
    url += "?" + encodedArgs; // Encode as a query string
  }

  http.open(method, url, true);
  http.onreadystatechange = function() {
    if (http.readyState == 4) { // Connection closed
      func(http.responseText, http.getAllResponseHeaders());
      // Callback with the text and headers.
    }
  }

  if (method == "post") { // If it's a POST
    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-Length", encodedArgs.length);

    http.send(encodedArgs);

    // send in the body
  } else {
    http.send(null);
  }
}

function syncAjax(method, url, args) {
  var http;
  if (!http && typeof XMLHttpRequest != 'undefined') {
    http = new XMLHttpRequest();
  }
  if (!http) {
    try {
      http = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
      try {
        http = new ActiveXObject("Microsoft.XMLHTTP");
      } catch (E) {
      }
    }
  }
 
  var encodedArgs = "";
  for (var i = 0; i < args.length; i += 2) {
    for (var j = 0; j <= 1; j++) {
      args[i + j] = args[i + j].replace(/%/g, "%25")
      args[i + j] = args[i + j].replace(/&/g, "%26")
      args[i + j] = args[i + j].replace(/=/g, "%3D")
    }

    if (i > 0) {
      encodedArgs += "&"
    }
    encodedArgs += args[i] + "=" + args[i + 1];
  }

  if (method == "get" && encodedArgs != "") {
    url += "?" + encodedArgs;
  }

  http.open(method, url, false);

  if (method == "post") {
    http.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    http.setRequestHeader("Content-Length", encodedArgs.length);

    http.send(encodedArgs);
  } else {
    http.send(null);
  }

  return http.responseText;
}

function populateToolbar() {
  toolbar_addNode("themes/" + themeName + "/images/logon.gif", function(i) {
    logon_onClick();
  });
  toolbar_addNode("", 0);
}

function populateForum(x, f) {
  var forum = tree_addNode(x, "themes/" + themeName + "/images/forum.gif", f[1], function(i) {
    threePane();
    document.title = f[1] + " - " + forumName;
  });

  ajax("get", "?action=forumforums&id=" + f[0], new Array(), function(text) {
    var forums = text.split('\n');

    for (var i = 0; forums.length >= 2 && i < forums.length; i += 2) {
      populateForum(forum, new Array(forums[i], forums[i + 1]));
    }
  });
}

function populateCat(x, c) {
  var cat = tree_addNode(x, "themes/" + themeName + "/images/category.gif", c[1], function(i) {
    twoPane();
    document.title = c[1] + " - " + forumName;
  });

  ajax("get", "?action=catchildren&id=" + c[0], new Array(), function(text) {
    var forums = text.split('\n');
    
    for (var i = 0; forums.length >= 2 && i < forums.length; i += 2) {
      populateForum(cat, new Array(forums[i], forums[i + 1]));
    }
  });
}

function populateGroup(x, g) {
  var group = tree_addNode(x, "themes/" + themeName + "/images/group.gif", g, function(i) {
    threePane();
    document.title = g + " - Members - " + forumName;
  });
}

function populateTree() {
  document.getElementById('innerTree').innerHTML = '';

  var start = tree_addNode(0, "themes/" + themeName + "/images/home.png", "Home", function(i) {
    twoPane();
    ajax("get", "?sub=start", new Array(), function(text) {
      document.getElementById("innerStart").innerHTML = text;
      resize();
    });

    document.title = "Home - " + forumName;
  });
  tree_selectNode(start);

  var x = tree_addNode(0, "themes/" + themeName + "/images/boards.gif", "Boards", function(i) {
    twoPane();
    document.title = "Boards - " + forumName;
  });

  ajax("get", "?action=categories", new Array(), function(text) {
    var cats = text.split('\n');

    for (var i = 0; cats.length >= 2 && i < cats.length; i += 2) {
      populateCat(x, new Array(cats[i], cats[i + 1]));
    }
  });

  var y = tree_addNode(0, "themes/" + themeName + "/images/members.gif", "Members", function(i) {
    threePane();
    document.title = "Members - " + forumName;
  });

  ajax("get", "?action=groups", new Array(), function(text) {
    var groups = text.split('\n');

    for (var i = 0; i < groups.length; i++) {
      populateGroup(y, groups[i]);
    }
  });
}

function onDoneLoadingHTML() {
  document.getElementById("body").onmouseup = body_onMouseUp;
  document.getElementById("div-vert").onmousedown = div_vert_onMouseDown;
  document.getElementById("div-horiz").onmousedown = div_horiz_onMouseDown;

  populateToolbar();
  populateTree();

  window.onresize = resize;
  resize();

  document.getElementById("loading").style.display = "none";
  document.getElementById("body").style.display = "block";
}

function logon_onLogon(u, p, a) {
  alert(u + ", " + p + ", " + a);
}

function logon_ok_onClick() {
  window.opener.logon_onLogon(document.getElementById("username").value,
    document.getElementById("password").value, document.getElementById("autologout").value);
  window.close();
}

function logon_cancel_onClick() {
  window.close();
}

function logon_onLoad() {
  document.getElementById("ok").onclick = logon_ok_onClick;
  document.getElementById("cancel").onclick = logon_cancel_onClick;
}

function twoPane() {
  document.getElementById("div-intersect").style.display = "none";
  document.getElementById("div-horiz").style.display = "none";
  document.getElementById("threads").style.display = "none";
  document.getElementById("posts").style.display = "none";

  document.getElementById("start").style.display = "block";
}

function threePane() {
  document.getElementById("start").style.display = "none";

  document.getElementById("div-intersect").style.display = "block";
  document.getElementById("div-horiz").style.display = "block";
  document.getElementById("threads").style.display = "block";
  document.getElementById("posts").style.display = "block";
}