var NS4 = (document.layers) ? 1 : 0;
var IE4 = (document.all) ? 1 : 0;
var active = null;

var style = (NS4 || IE4) ? 1 : 0;

var timerID = null;

var padding = 3; // < 4 recommended
var bgcolor = "beige";

var borWid = 1; // for no border, assign null
var borCol = "black";
var borSty = "solid";

var str = "<STYLE TYPE='text/css'>";
str += ".tooltip {";
str += "position: absolute;";
str += "visibility: hidden;";
str += "font-family: arial,helvetica;"
str += "font-size: 9pt;";
str += "left: 0; top: 0;";
if (borWid > 0) { // if a border is specified
  str += "border-width: " + borWid + ";";
  str += "border-color: " + borCol + ";";
  str += "border-style: " + borSty + ";";
}
if (NS4) {
  if (borWid > 0 && padding <= 3) {
    str += "padding: 0;";
    str += "layer-background-color: " + bgcolor + ";";
  } else if (borWid > 0 && padding > 3) {
    str += "padding: " + (padding - 3) + ";";
    str += "background-color: " + bgcolor + ";";
  } else if (borWid == 0) {
    str += "padding: " + padding + ";";
    str += "layer-background-color: " + bgcolor + ";";
  }
} else {
  str += "padding: " + padding + ";";
  str += "background-color: " + bgcolor + ";";
}
str += "}";
str += "</STYLE>";

if (style) {
  document.write(str);
  if (NS4) window.onload = init;
}

function init() {
  setTimeout("window.onresize = redo", 1000);
}

function redo() {
  window.location.reload();
}

function makeEl(id, width, code) {
  if (!style) return;
  var str = "<STYLE TYPE='text/css'>";
  str += "#" + id + " {";
  str += "width: " + width + ";";
  str += "}";
  str += "</STYLE>";
  str += "<DIV CLASS='tooltip' ID='" + id + "'>" + code + "</DIV>";
  document.write(str);
}

function displayEl(left, top) {
  if (active == null) return;
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
  var whichEl = (NS4) ? document[active] : document.all[active].style;
  var whichEl2 = (NS4) ? document[active] : document.all[active];
  var wiw = (NS4) ? window.outerWidth : document.body.scrollWidth;

  var wih = (NS4) ? window.outerHeight : document.body.scrollHeight;

  var elw = (NS4) ? whichEl2.document.width : whichEl2.scrollWidth;

  var elh = (NS4) ? whichEl2.document.height : whichEl2.scrollHeight;

  if (left+elw>wiw-20) left=wiw-elw-20;
  if (left<0) left=0;
  if (IE4 && top+elh>wih-20) top=wih-elh-20;
  if (top<0) top=0;
  if (left<0) left=0;

  whichEl.left = left;
  whichEl.top = top;
  whichEl.visibility = (NS4) ? "show" : "visible";
}

function clearEl() {
  if (!style) return;
  if (active == null) return;
  var whichEl = (NS4) ? document[active] : document.all[active].style;
  whichEl.visibility = (NS4) ? "hide" : "hidden";
  active = null;
  if (timerID) clearTimeout(timerID);
  if (NS4) document.releaseEvents(Event.MOUSEMOVE);
  document.onmousemove = null;
}

function activateEl(id, e) {
  if (!style) return;
  active = id;
  if (NS4) document.captureEvents(Event.MOUSEMOVE);
  document.onmousemove = checkEl;
  checkEl(e);
}

function checkEl(e) {
  if (timerID) clearTimeout(timerID);
  var left = (NS4) ? e.pageX - 20 : event.clientX + document.body.scrollLeft - 20;
  var top = (NS4) ? e.pageY + 20 : event.clientY + document.body.scrollTop + 20;
  timerID = setTimeout("displayEl(" + left + ", " + top + ")", 300);
}

function hyper() {
}

makeEl("step", 200, "<b>Step-through solutions</b><br>VCR buttons allow the user to step through the optimal solution");
makeEl("key", 275, "<b>Comprehensive Networks Components</b><br> The comprehensive set of network components includes: rivers, abstractions, raw-water storage with or without evaporation losses, boreholes, treatment works, service reservoirs, booster stations, transfers etc");
makeEl("runs", 150, "<b>Results Sets</b><br>The user can select to display results from previously saved sets.");
makeEl("graph", 250, "<b>User-configurable results graphs</b><br>Results from different parts of the model can be overlayed, e.g. reservoir volume and works output. Dual Y axes supported and extensive style range available.");
makeEl("summary", 200, "<b>Optimisation summary</b><br>The main features of the optimisation and its results are conveniently displayed.");
makeEl("table", 250, "<b>User-configurable results tables</b><br>Results tables can be customised. Spreadsheet functionality for formulae included.");
makeEl("schematic2", 220, "<b>Drag and drop schematic</b><br>A rich tool set is provided for adding nodes & links and modifying layout.");
makeEl("results", 220, "<b> Results displays on schematic</b><br>The user can select the type of results to be displayed on the schematic");