var growing=true;
var dWidthMin=0;
var dWidthMax=60;
var dWidth=0;
var dLeft="20%";
var dRight="auto";
var t;
var inc=2;
var ms=35;

var covered = false;
var cachedJSON = null;

function setWiperAndColour(wiper, article) {
  wiper.style.width = dWidth + "%";
  var col = 100 * dWidth / (dWidthMax - dWidthMin);
  var r = col;
  var g = col;
  var b = col;
  article.style.color = "rgb(" + r + "%, " + g + "%, " + b + "%)";
}

function coverFun (wiper, article, finFun) {
  var fun = function () {
    if (dWidth != dWidthMax) {
      dWidth+=inc;
      setWiperAndColour(wiper, article);
      t = setTimeout(fun,ms);
    } else {
      wiper.style.borderStyle = "none";
      if (finFun != null) {
        finFun();
      }
    }
  };
  return fun;
}

function coverLeftToRight (finFun) {
  dWidth = dWidthMin;
  var wiper = document.getElementById("wiper");
  wiper.style.borderRightStyle = "solid";
  var article = document.getElementById("article");
  wiper.style.right = dRight;
  wiper.style.left = dLeft;
  t = setTimeout(coverFun(wiper, article, finFun), ms);
}

function coverRightToLeft (finFun) {
  dWidth = dWidthMin;
  var wiper = document.getElementById("wiper");
  wiper.style.borderLeftStyle = "solid";
  var article = document.getElementById("article");
  wiper.style.right = dLeft;
  wiper.style.left = dRight;
  t = setTimeout(coverFun(wiper, article, finFun), ms);
}

function revealFun (wiper, article) {
  var fun = function () {
    if (dWidth != dWidthMin) {
      dWidth-=inc;
      setWiperAndColour(wiper, article);
      t = setTimeout(fun,ms);
    } else {
      wiper.style.borderStyle = "none";
    }
  };
  return fun;
}

function revealLeftToRight () {
  dWidth = dWidthMax;
  var wiper = document.getElementById("wiper");
  wiper.style.borderLeftStyle = "solid";
  var article = document.getElementById("article");
  wiper.style.left = dRight;
  wiper.style.right = dLeft;
  t = setTimeout(revealFun(wiper, article), ms);
}

function revealRightToLeft () {
  dWidth = dWidthMax;
  var wiper = document.getElementById("wiper");
  wiper.style.borderRightStyle = "solid";
  var article = document.getElementById("article");
  wiper.style.left = dLeft;
  wiper.style.right = dRight;
  t = setTimeout(revealFun(wiper, article), ms);
}

function load (url, cover, reveal) {
  cachedJSON = null;
  covered = false;
  var client = new XMLHttpRequest();
  var handler = function () {
    if (client.readyState == 4 && client.status == 200) {
      if (client.responseText != null) {
        var jsonStr = new String(client.responseText);
        var jsonObj = jsonStr.parseJSON();
        if (covered) {
          setupArticle(jsonObj);
          covered = false;
          cachedJSON = null;
          reveal();        
        } else {
          cachedJSON = jsonObj;
        }
      } else {
        cachedJSON = null;
      }
    }
  };
  client.onreadystatechange = handler;
  client.open("GET", url, true);
  client.setRequestHeader("Accept", "application/json");
  client.send(null);

  var finFun = function () {
    if (null != cachedJSON) {
      setupArticle(cachedJSON);
      cachedJSON = null;
      covered = false;
      reveal();
    } else {
      covered = true;
    }
  };
  cover(finFun);
}

function setWiperTop () {
  var titleBar = document.getElementById("titleBar");
  var wiper = document.getElementById("wiper");
  var left = document.getElementById("left");
  var article = document.getElementById("article");
  var h = 0;
  if (document.defaultView != null) {
    h = document.defaultView.getComputedStyle(titleBar, "").height;
  } else if (titleBar.scrollHeight != null) {
    h = titleBar.scrollHeight;
  }
  wiper.style.top = h;
  left.style.top = h;
  article.style.marginTop = h;
}

function prevFun (url) {
  load(url, coverLeftToRight, revealLeftToRight);
}

function nextFun (url) {
  load(url, coverRightToLeft, revealRightToLeft);
}

function setupArticle (jsonObj) {
  var content = document.getElementById("content");
  content.innerHTML = jsonObj.content;

  var contentTitle = document.getElementById("contentTitle");
  contentTitle.innerHTML = "<a href='" + jsonObj.here.computer + ".html'>" + jsonObj.here.human + "</a>";

  var prev = document.getElementById("prev");
  if (jsonObj.prev != null) {
    var jsonURL = jsonObj.prev.computer + ".json";
    var htmlURL = jsonObj.prev.computer + ".html";
    prev.innerHTML = "<a onclick='prevFun(" + '"' + jsonURL + '"' + "); return false;' href='" + htmlURL + "'>Prev: " + jsonObj.prev.human + "</a>";
  } else {
    prev.innerHTML = '';
  }

  var next = document.getElementById("next");
  if (jsonObj.next != null) {
    var jsonURL = jsonObj.next.computer + ".json";
    var htmlURL = jsonObj.next.computer + ".html";
    next.innerHTML = "<a onclick='nextFun(" + '"' + jsonURL + '"' + "); return false;' href='" + htmlURL + "'>Next: " + jsonObj.next.human + "</a>";
  } else {
    next.innerHTML = '';
  }

  var date = document.getElementById("date");
  date.innerHTML = jsonObj.date;
}