function JournalNav (myWidth, myHeight, myDefaultText) {

  this.instance_index = null;
  this.width = 0;
  this.height = 0;
  this.defaultText = '';
  this.options = new Array;
  this.container_div = null;
  this.options_are_on = false;
  this.mouseover_state = false;

  this.constructor   = constructor;
  this.addOption     = addOption;
  this.insertInto    = insertInto;
  this.getHeader     = getHeader;
  this.getOption     = getOption;
  this.drawOptions   = drawOptions;
  this.autoCheckMouseoverState = autoCheckMouseoverState;
  this.removeOptions = removeOptions;

  this.constructor(myWidth, myHeight);

  function constructor(myWidth, myHeight) {

    this.width = parseInt(myWidth);
    this.height = parseInt(myHeight);

    this.instance_index = parseInt(JournalNav.instances.length);
    JournalNav.instances[this.instance_index] = this;

  } // constructor

  function addOption(myText, myUrl) {

    var myOption = new Object;
    myOption.text = myText;
    myOption.url = myUrl;

    this.options[this.options.length] = myOption;

  }

  function insertInto(myDiv) {

    var divObj = document.getElementById(myDiv);
    if (!divObj) return false;

    var myHeader = this.getHeader();

    divObj.appendChild(myHeader);

  }

  function getHeader() {

    // container div

    var headerBgColor = '#eeeeee';
    var headerMoColor = '#e5e5e5';

    var myDiv = document.createElement("DIV");
    myDiv.id = 'JournalNav_'+this.instance_index;
    myDiv.style.backgroundColor = headerBgColor;
    myDiv.style.height = this.height;
    myDiv.style.width = this.width;
    myDiv.style.padding = '0px 0px 0px 0px';
    myDiv.style.position = 'relative';
    myDiv.style.top = '0px';
    myDiv.style.left = '0px';
    myDiv.style.zIndex = '0';
    myDiv.pass_instance_index = this.instance_index;
    myDiv.onmouseover = function() {JournalNav.instances[this.pass_instance_index].drawOptions(); this.style.backgroundColor=headerMoColor; JournalNav.instances[this.pass_instance_index].mouseover_state=true;}
    myDiv.onmouseout = function() {this.style.backgroundColor=headerBgColor; JournalNav.instances[this.pass_instance_index].mouseover_state=false;}
    myDiv.style.cursor = 'pointer';

    // text div (positioned absolutely so that the user increasing font size doesn't break the box)

    var myDiv2 = document.createElement("DIV");
    myDiv2.style.zIndex = '2';
    myDiv2.style.position = 'absolute';
    myDiv2.style.top = '2px';
    myDiv2.style.left = '6px';
    myDiv.style.fontFamily = 'Verdana';
    myDiv2.style.fontSize = '11px';
    myDiv2.innerHTML = 'Explore the Vectors Journal';
    myDiv2.style.letterSpacing = '0';
    myDiv2.pass_instance_index = this.instance_index;
    myDiv2.onmouseover = function() {this.parentNode.style.backgroundColor=headerMoColor;JournalNav.instances[this.pass_instance_index].mouseover_state=true;}
    myDiv2.onmouseout = function() {this.parentNode.style.backgroundColor=headerBgColor;JournalNav.instances[this.pass_instance_index].mouseover_state=true;}
	myDiv.appendChild(myDiv2);

	// vertical line
	myLine = document.createElement("DIV");
	myLine.style.zIndex = '3';
	myLine.style.width = '1px';
	myLine.style.height = this.height;
	myLine.margin = '0px 0px 0px 0px';
	myLine.padding = '0px 0px 0px 0px';
	myLine.overflow = 'hidden';
	myLine.style.backgroundColor = '#cccccc';
	myLine.style.position = 'absolute';
	myLine.style.right = '21px';
	myLine.style.top = '0px';
	myDiv2.onmouseover = function() {this.parentNode.style.backgroundColor=headerMoColor;}
    myDiv2.onmouseout = function() {this.parentNode.style.backgroundColor=headerBgColor;}

	myDiv.appendChild(myLine);

	// down arrow
	myArrow = new Image();
	myArrow.src = '/common/js/JournalNavDownArrow.png';
	myArrow.style.width = '9px';
	myArrow.style.height = '5px';
    myArrow.style.position = 'absolute';
    myArrow.style.top = (this.height / 2) - 2;
    myArrow.style.right = '6px';
    myDiv2.onmouseover = function() {this.parentNode.style.backgroundColor=headerMoColor;}
    myDiv2.onmouseout = function() {this.parentNode.style.backgroundColor=headerBgColor;}

	myDiv.appendChild(myArrow);

    this.container_div = myDiv;

    return myDiv;

  }

  function getOption(optionsIndex) {

    var optionBgColor = '#f3f3f3';
    var optionMoColor = '#e5e5e5';

    var myDiv = document.createElement("DIV");
    myDiv.id = 'JournalNavOption_'+this.instance_index+'_'+optionsIndex;
    myDiv.style.height = this.height;
    myDiv.style.width = this.width - 2;
    myDiv.style.borderWidth = '1px';
    myDiv.style.borderColor = '#dddddd';
    myDiv.style.borderStyle = 'solid';
    myDiv.style.backgroundColor = optionBgColor;
    myDiv.pass_href = this.options[optionsIndex].url;
    myDiv.onmousedown = function() {document.location.href = myDiv.pass_href;}
    myDiv.pass_id = myDiv.id;
    // not sure why this isn't working:
    // myDiv.onmouseover = function() {this.style.fontFamily='Arial';}
    // myDiv.pass_instance_index = this.instance_index;
    myDiv.style.zIndex = '21';
    myDiv.style.position = 'absolute';
    myDiv.style.top = '0px';
    myDiv.style.left = '0px';
    myDiv.style.padding = '0px 0px 0px 0px';
    myDiv.style.textAlign = 'left';

    var myDiv2 = document.createElement("DIV");
    myDiv2.style.margin = '2px 1px 2px 6px';
    myDiv2.style.padding = '0px 0px 0px 0px';
    myDiv2.style.fontFamily = 'Verdana';
    myDiv2.style.fontSize = '11px';
    myDiv2.style.textAlign = 'left';
    myDiv2.style.zIndex = '22';
    myDiv2.innerHTML = this.options[optionsIndex].text;

    myDiv.onmouseover = function() {this.style.backgroundColor=optionMoColor;}
    myDiv.onmouseout  = function() {this.style.backgroundColor=optionBgColor;}

    myDiv.appendChild(myDiv2);

    return myDiv;

  }

  function drawOptions() {

    if (this.options_are_on) return;

    this.options_are_on = true;

    for (var a = 0; a < this.options.length; a++) {
      var myOption = this.getOption(a);
      myOption.style.top = parseInt(this.height) * (a + 1);
      this.container_div.appendChild(myOption);
    }

    setTimeout("JournalNav.instances["+this.instance_index+"].autoCheckMouseoverState();", 1000);

  }

  function autoCheckMouseoverState() {

    if (!this.options_are_on) return;

    if (!this.mouseover_state) {
      this.removeOptions();
    } else {
      setTimeout("JournalNav.instances["+this.instance_index+"].autoCheckMouseoverState();", 1000);
    }

  }

  function removeOptions() {

    if (!this.options_are_on) return;

    this.options_are_on = false;

    for (var a = 0; a < this.options.length; a++) {
		var optionId = 'JournalNavOption_'+this.instance_index+'_'+a;
		var optionObj = document.getElementById(optionId);
		if (optionObj) {
		  optionObj.parentNode.removeChild(optionObj);
		}
    }

  }

} // JournalNav

JournalNav.instances = [];