//
// NOTE: This code due to be revisited for a number of reasons including magic numbers throughout
//
// REQUIRES:
// String.strip_tags()
//

function startRoll(theDivId) {
    theDiv = document.getElementById(theDivId);
    theDiv.roll_direction = 'left';
    if (theDiv.is_rolling) return;
    theDiv.is_rolling = true;
    var roll_amount = 3;
    var roll_speed = 50;
    doRoll(theDiv.id, roll_amount, roll_speed);
}

function doRoll(theDiv_id, roll_amount, roll_speed) {
  // TODO: is there a better way to do this where we don't need to getElementById every loop?
  var theDiv_obj = document.getElementById(theDiv_id);
  if (!theDiv_obj.is_rolling) return;
  var myLeft = parseInt(theDiv_obj.style.left);
  var newLeft;
  newLeft = (theDiv_obj.roll_direction=='left') ? (myLeft - roll_amount) : (myLeft + Math.floor(roll_amount/2));
  if (theDiv_obj.roll_direction=='right' && newLeft > 4 && newLeft < 10) newLeft = 5;
  //if (newLeft <= parseInt(theDiv_obj.offsetWidth*-1)) return;
  if (newLeft <= -200) return;
  theDiv_obj.style.left = newLeft + 'px';
  if (newLeft == 5) {
    theDiv_obj.is_rolling = false;
    return;
  }
  setTimeout("doRoll('"+theDiv_id+"', "+roll_amount+", "+roll_speed+");", roll_speed);
}

function stopRoll(theDivId) {
  theDiv = document.getElementById(theDivId);
  theDiv.roll_direction = 'right';
}

function ProjectNav (myWidth, myHeight) {

  // variables
  this.width = 0;
  this.height = 0;
  this.backgroundColor = '#EEEEEE';
  this.borderColor = '#eeeeee';
  this.issueTitle = '(Title)';
  this.issueUrl = '';
  this.issueTitleStyle = {'color': '#000000', 'padding': '0px 1px 0px 3px', 'fontSize': '11px', 'fontFamily': 'Verdana'};
  this.issueTitleWidth = 0;
  this.elements = new Array;
  this.currentElement = null;
  this.elementStyle    = {'color': '#666666', 'padding': '0px 0px 0px 0px', 'fontSize': '11px', 'fontFamily': 'Tahoma', 'borderLeft': 'solid 1px #FFFFFF'};
  this.navPadding = '3';
  this.isIe =(navigator.appName == 'Microsoft Internet Explorer') ? true : false;
  this.isSafari = (navigator.userAgent.indexOf('Safari') != -1) ? true : false;

  // methods
  this.constructor = constructor;
  this.insertInto  = insertInto;
  this.getTable    = getTable;
  this.getDiv      = getDiv;
  this.getDiv      = getDiv;
  this.startRoll   = startRoll;
  this.addElement  = addElement;
  this.titleWidth  = titleWidth;
  this.titleText   = titleText;
  this.titleUrl    = titleUrl;

  this.constructor(myWidth, myHeight);

  function constructor(myWidth, myHeight) {

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

  }

  function insertInto(insertId) {

    if (typeof(insertId) == 'undefined' || insertId.length == 0) {
      return false;
    }

    var insertObj = document.getElementById(insertId);
    if (!insertObj) return false;

    var insertTable = this.getTable();

    insertObj.innerHTML = ''; // clear
    insertObj.appendChild(insertTable);

  }

  function getTable() {

    var myTable = document.createElement("TABLE");
    myTable.cellSpacing = '0';
    myTable.cellPadding = '0';
    myTable.style.width = this.width + 'px';
    myTable.style.height = this.height + 'px';
    myTable.style.border = 'solid 1px '+this.borderColor;
    myTable.style.backgroundColor = this.backgroundColor;
	var myTbody = document.createElement("tbody");
	myTable.appendChild(myTbody);

	var myRow = document.createElement("TR");  // main row

   	// issue title
	var myCell = document.createElement("TD");
	myCell.style.width = this.issueTitleWidth + 'px';
	myCell.style.padding = this.issueTitleStyle['padding'];
	myCell.style.fontSize = this.issueTitleStyle['fontSize'];
	myCell.style.fontFamily = this.issueTitleStyle['fontFamily'];
	myCell.style.color = this.issueTitleStyle['color'];
	var myDiv = document.createElement("DIV");
	myDiv.innerHTML = ((this.issueUrl.length>0) ? '<a style="color:#5d3636;" href="'+this.issueUrl+'">'+this.issueTitle+'</a>':this.issueTitle)+'<span style="color:#888888;">:</span> ';
    myDiv.style.position = 'relative';
    myDiv.style.top = (this.isIe) ? '-1px' : '0px';
    myDiv.style.left = '0px';
    myCell.appendChild(myDiv);
    myRow.appendChild(myCell);

    var numElements = this.elements.length;
    if (this.currentElement != null) numElements--;  // TODO: Wrong way to do this
    var widthPerCell = Math.round((this.width - this.issueTitleWidth) / numElements);  // this can be rough (+/- .5)

    // sort elements
    var element;
    var count = 0;
    for (var a = 0; a < this.elements.length; a++) {
        if (this.currentElement != null && this.currentElement == a) continue;
        var supressLeftBorder = (count==0) ? true : false;
     	element = this.elements[a];
	 	var myCell = document.createElement("TD");
		myCell.appendChild(this.getDiv(element['title'], element['url'], widthPerCell, (this.height-2), supressLeftBorder));
		myCell.style.padding = '0px 0px 0px 0px';
		myCell.style.fontSize = this.elementStyle['fontSize'];
		myCell.style.fontFamily = this.elementStyle['fontFamily'];
		myCell.style.color = this.elementStyle['color'];
	    myRow.appendChild(myCell);
	    count++;
	}

	myTbody.appendChild(myRow);

    return myTable;

  }

  function getDiv(elementTitle, elementUrl, myWidth, myHeight, supressLeftBorder) {

    // container div, set to relative to support absolute position of the next div
    var myDiv1 = document.createElement("DIV");
    myDiv1.innerHTML = 'spacer'; // hack
    myDiv1.style.color = this.backgroundColor; // hide the spacer text
    myDiv1.style.position = 'relative';
    myDiv1.style.left = '0px';
    myDiv1.style.top = '0px';
    myDiv1.style.zIndex = '1';
    //myDiv1.style.height = myHeight + 'px';
    myDiv1.style.margin = '0px 0px 0px 0px;';
    myDiv1.style.padding = '0px 0px 0px 0px;';
    if (!supressLeftBorder) myDiv1.style.borderLeft = 'solid 1px #BBBBBB';

    var myDiv2 = document.createElement("DIV");
    myDiv2.style.position = 'absolute';
    myDiv2.style.left = '0px';
    myDiv2.style.top = ((this.isIe)?'-3':'0') + 'px';  // TODO, this seems strange to have to do
    myDiv2.style.zIndex = '2';
    myDiv2.style.width = '100%';
    myDiv2.style.height = myHeight + 'px';
    myDiv2.style.margin = '0px 0px 0px 0px;';
    myDiv2.style.padding = '0px 0px 0px 0px;';
    myDiv2.style.clip = 'rect(0px '+(myWidth-(this.navPadding*2))+'px '+myHeight+'px '+this.navPadding+'px)';
    myDiv2.style.cursor = 'pointer';
    /*
    myDiv2.onclick = function () {
      document.location.href = elementUrl;
    }
    */

    var myDiv3 = document.createElement("DIV");
    myDiv3.id = 'ProjectNav_'+elementTitle.substr(0, 3);
    myDiv3.innerHTML = '<a style="padding-right:60px;color:#5d3636;" onmouseover="startRoll(\''+myDiv3.id+'\');" onmouseout=" stopRoll(\''+myDiv3.id+'\');" href="'+elementUrl+'" style="color:'+this.elementStyle['color']+';"><nobr>'+elementTitle+'</nobr></a>';
    myDiv3.style.position = 'relative';
    myDiv3.style.left = this.navPadding+'px';
    myDiv3.style.top = '0px';
    myDiv3.style.height = myHeight + 'px';
    myDiv3.style.margin = '0px 0px 0px 0px;';  // this.navPadding should be here but KHTML...
    myDiv3.style.padding = '0px 0px 0px 0px;';
    myDiv3.is_rolling = false; // custom attribute

    myDiv2.appendChild(myDiv3);
    myDiv1.appendChild(myDiv2);

    return myDiv1;

  }

  function addElement(elementTitle, elementUrl) {
    // if (this.isSafari) elementTitle = elementTitle.strip_tags();
    this.elements[this.elements.length] = {'title': elementTitle, 'url': elementUrl};
  }

  function titleWidth(pixels) {
    pixels = parseInt(pixels);
    if (pixels > 0) this.issueTitleWidth = pixels;
  }

  function titleText(theTitle) {
    this.issueTitle = theTitle;
  }

  function titleUrl(theUrl) {
    this.issueUrl = theUrl;
  }

} // ProjectNav