function Navbar(id, lang, colour, displayType) {
  if (id == null || lang == null || colour == null) { alert('Missing Arguments'); return; }
  var container = (typeof(id) == "string") ? document.getElementById(id) : id;
  var protocol = window.location.protocol + '//';
  var host = 'dev.mytelus.com';
  if (window.location.host != host) host = 'www.mytelus.com';

  var tabTextOn, boxOutline, pipe;
  if (colour == 'grey') {
    tabTextOn = '#333333';
    boxOutline = '#333333';
    pipe = '#666666';
  } else if (colour == 'green') {
    tabTextOn = '#215800';
    boxOutline = '#215800';
    pipe = '#c5e9a3';
  } else if (colour == 'purple') {
    tabTextOn = '#49166d';
    boxOutline = '#49166d';
    pipe = '#b88cc0';
  }

  var tabs = new Array();
  var links = new Array();
  var activeTab, activeSubTab, activeLink;

  this.addTab = function(name, url, active) {
    var tab = new Object();
    tab.name = name;
    tab.url = url;
    tab.active = active || false;
    tab.subTabs = new Array();
    tab.addSubTab = function(name, url, active) {
      var subTab = new Object();
      subTab.name = name;
      subTab.url = url;
      subTab.active = active || false;
      this.subTabs.push(subTab);
    }
    tabs.push(tab);
    return tab;
  }
  this.addLink = function(name, url, active) {
    var link = new Object();
    link.name = name;
    link.url = url;
    link.active = active || false;
    links.push(link);
  }	
  this.setActiveTab = function(name) {
    activeTab = name;
  }
  this.setActiveSubTab = function(name) {
    activeSubTab = name;
  }
  this.setActiveLink = function(name) {
    activeLink = name;
  }
  function setActive() {
    for (var i = 0; i < tabs.length; i++) {
      if (tabs[i].name == activeTab || tabs[i].active) {
        tabs[i].active = true;
        for (var j = 0; j < tabs[i].subTabs.length; j++) {
          if (tabs[i].subTabs[j].name == activeSubTab) {
            tabs[i].subTabs[j].active = true; break;
          }
        }
        break;
      }
    }   
    for (var i = 0; i < links.length; i++) {
      if (links[i].name == activeLink) {
        links[i].active = true;
        break;
      }
    }   
  }

  this.display = function(title) {
    setActive();

    container.style.fontFamily = 'arial,helvetica,sans-serif';
    container.style.fontSize = '11px';
    container.style.width = (displayType == 'narrow') ? '760px' : '975px';
    container.style.textAlign = 'left';
    container.style.margin = '0px auto';

    var bgImg = document.createElement('img');
    bgImg.style.display = 'block';

    var hdrDiv = document.createElement('div'); 
    hdrDiv.style.paddingLeft = '20px';
    if (displayType == 'narrow') {
      bgImg.src = protocol + host + '/global/images/navbar/' + colour + '/txtBg760_top.gif';
      hdrDiv.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/txtBg.gif) 0px 0px repeat-x';
    } else {
      bgImg.src = protocol + host + '/global/images/navbar/' + colour + '/txtBg_top.gif';
      hdrDiv.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/txtBg.gif) 0px 0px repeat-x';
    }
    container.appendChild(bgImg);
    container.appendChild(hdrDiv);

    var hdrTextDiv = document.createElement('div');
    if (tabs.length == 0) {
      hdrTextDiv.style.padding = '2px 0px 5px 0px';
    } else {
      hdrTextDiv.style.padding = '4px 0px 3px 0px';
    }
    hdrDiv.appendChild(hdrTextDiv);   
    var hdrText = document.createElement('div');
    hdrText.innerHTML = title;    
    hdrText.className = 'navbarTitle';
    hdrText.style.color = '#ffffff';
    hdrText.style.fontFamily = 'arial,helvetica,sans-serif';
    hdrText.style.fontSize = '20px';
    hdrText.style.lineHeight = '22px';
    hdrText.style.height = '24px';
    hdrText.style.overflow = 'hidden';
    hdrTextDiv.appendChild(hdrText);

    
    if (tabs.length > 0) {
      var tabDiv = document.createElement('div')
      tabDiv.style.height = '24px';
      hdrDiv.appendChild(tabDiv);

      var ul = document.createElement('ul');
      ul.style.padding = '0px';
      ul.style.margin = '0px';
      ul.style.listStyle = 'none';
      tabDiv.appendChild(ul);

      for (var i = 0; i < tabs.length; i++) {
        var tab = tabs[i];
        var li = document.createElement('li');
        li.style.marginRight = '8px';
        li.style.cssFloat = 'left'; li.style.styleFloat = 'left';
        li.style.listStyle = 'none';
        ul.appendChild(li);

        var img = document.createElement('img');
        img.src = (tab.active) ? protocol + host + '/global/images/navbar/' + colour + '/tabLeftBg_on.gif' : protocol + host + '/global/images/navbar/' + colour + '/tabLeftBg.gif';
        img.style.cssFloat = 'left'; img.style.styleFloat = 'left';
        li.appendChild(img);

        var a = document.createElement('a');
        a.href = tab.url;
        a.target = '_top';
        a.innerHTML = tab.name;
        a.style.cssFloat = 'left'; a.style.styleFloat = 'left';
        a.style.fontSize = '13px';
        a.style.textDecoration = 'none';
        a.style.padding = '5px 6px 1px 6px';
        if (tab.active) {
          li.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/tabItemBg_on.gif) 0px 0px repeat-x';
          a.style.fontWeight = 'bold';
          a.style.color = tabTextOn;
        } else {
          li.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/tabItemBg.gif) 0px 0px repeat-x';
          a.style.color = '#ffffff';
        }	
        li.appendChild(a);

        if (tab.subTabs.length > 0) {
            var subTabs = tab.subTabs;
            
           
            var spanll = document.createElement('span');
            spanll.style.padding = '0px';
            spanll.style.margin = '0px';
            spanll.style.listStyle = 'none';

            for (var j = 0; j < subTabs.length; j++) {
                var li1 = document.createElement('span');
                li1.style.cssFloat = 'left'; li1.style.styleFloat = 'left';
                li1.style.paddingTop = '5px';
                var a1 = document.createElement('a');
                a1.innerHTML = subTabs[j].name;
                a1.href = subTabs[j].url;
                a1.style.display = 'block';
                a1.style.color = '#ffffff';
                a1.style.textDecoration = 'none';
                a1.style.fontSize = '11px';
                a1.style.padding = '3px 6px 2px 6px';
                if (subTabs[j].active) {
                    a1.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_on.gif) 0px 0px no-repeat';
                } else {
                    a1.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_off.gif) 0px 0px no-repeat';
                }
                li1.appendChild(a1);
                spanll.appendChild(li1);   
            }
            var li1 = document.createElement('li');
            li1.style.width = '1px';
            li1.style.height = '24px';
            li1.style.cssFloat = 'left'; li1.style.styleFloat = 'left';
            li1.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_off.gif) 0px 5px no-repeat';
            spanll.appendChild(li1);
            li.appendChild(spanll);


            
            
            /*table.appendChild(row);*/
            
            for (var j = 0; j < subTabs.length; j++)
            {
                var cell = document.createElement('td');
                var span = document.createElement('span');
                var link = document.createElement('a');
                
                /*cell.appendChild(span);
                span.appendChild(link);*/
                
                span.style.cssFloat = 'left'; span.style.styleFloat = 'left';
                span.style.paddingTop = '5px';
                
                link.innerHTML = subTabs[j].name;
                link.href = subTabs[j].url;
                link.style.display = 'block';
                link.style.color = '#ffffff';
                link.style.textDecoration = 'none';
                link.style.fontSize = '11px';
                link.style.padding = '3px 6px 2px 6px';
                
                if (subTabs[j].active)
                    link.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_on.gif) 0px 0px no-repeat';
                else
                    link.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_off.gif) 0px 0px no-repeat';
                
                /*row.appendChild(cell);*/
            }
            
            var cell = document.createElement('td');
            
            cell.style.width = '1px';
            cell.style.height = '24px';
            cell.style.cssFloat = 'left'; cell.style.styleFloat = 'left';
            cell.style.background = 'transparent url(' + protocol + host + '/global/images/navbar/' + colour + '/filter/bg_subtab_off.gif) 0px 5px no-repeat';

            /*row.appendChild(cell);
            li.appendChild(table);     */   
        }

        var img = document.createElement('img');
        img.src = (tab.active) ? protocol + host + '/global/images/navbar/' + colour + '/tabRgtBg_on.gif' : protocol + host + '/global/images/navbar/' + colour + '/tabRgtBg.gif';
        img.style.cssFloat = 'left'; img.style.styleFloat = 'left';
        li.appendChild(img);
      }

      var subNav = document.createElement('div');
      subNav.style.marginTop = '-1px'
      subNav.style.position = 'relative'
      if (links.length > 0) {
        subNav.style.height = '30px'
      } else {
        subNav.style.fontSize = '1px';
        subNav.style.height = '10px'
      }
      subNav.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/tabSubNavBg.gif) 0 0 repeat-x';
      container.appendChild(subNav);

      if (links.length > 0) {
        var ul = document.createElement('ul');
        ul.style.listStyle = 'none';
        ul.style.margin = '0px';
        ul.style.padding = '8px 0px 0px 40px';
        subNav.appendChild(ul);

        for (var i = 0; i < links.length; i++) {
          var link = links[i];
          var li = document.createElement('li');
          if (link.active) {
            li.style.background = 'url(' + protocol + host + '/global/images/navbar/' + colour + '/tabSubNavSelBg.gif) 0 0 repeat-x';
            li.style.border= '1px solid ' + boxOutline;
          }	else {
            if (i > 0 && !links[i-1].active) li.style.borderLeft = '1px solid ' + pipe;
          }
          li.style.padding = '2px 8px';
          li.style.display = 'inline';
          ul.appendChild(li);
          var a = document.createElement('a');
          a.href = link.url;
          a.target = '_top';
          a.innerHTML = link.name;
          a.style.color = '#ffffff';
          a.style.textDecoration = 'none';
          a.onmouseover = function() { this.style.textDecoration = 'underline'; }
          a.onmouseout = function() { this.style.textDecoration = 'none'; }
          li.appendChild(a);
        }
      }
    }
  }
}