var tkFragmentMainMenuImagesPath = 'image/menu'
if (tkSite == 'internet.mtkl') {
  tkFragmentMainMenuImagesPath += '-' + tkSite;
}
tkFragmentMainMenuImagesPath += '/';

var tkFragmentMainMenuImages = {
  'About Us': { name: 'aboutUs', width: '47' },
  'Branches': { name: 'branches', width: '47' },
  'Careers': { name: 'careers', width: '40' },
  'Company': { name: 'company', width: '48' },
  'Continuous Improvement': { name: 'continuousImprovement', width: '126'},
  'Corporate Design': { name: 'corporateDesign', width: '87' },
  'Customer Service': { name: 'customerService', width: '89' },
  'Departments': { name: 'departments', width: '64' },
  'Distribution': { name: 'distribution', width: '59' },
  'Drivers Services': { name: 'driversServices', width: '82' },
  'Employment': { name: 'employment', width: '64' },
  'Financial Highlights': { name: 'financialHighlights', width: '97' },
  'Getting Ready': { name: 'gettingReady', width: '70' },
  'Global Organization': { name: 'globalOrganization', width: '97' },
  'Global Organizations': { name: 'globalOrganizations', width: '104' },
  'Global Services': { name: 'globalServices', width: '78' },
  'Health Safety and Environment': { name: 'healthSafetyEnvironment', width: '144' },
  'Home': { name: 'home', width: '31' },
  'Industry Facts': { name: 'industryFacts', width: '71' },
  'Initiatives': { name: 'initiatives', width: '49' },
  'Literatura': { name: 'literatura' , width: '49' },
  'Locations': { name: 'locations', width: '50' },
  'Materials': { name: 'materials', width: '46' }, 
  'Material Supply': { name: 'materialSupply', width: '80' }, 
  'Media Center': { name: 'mediaCenter', width: '67' }, 
  'Metrics': { name: 'metrics', width: '36' },
  'News': { name: 'news', width: '29' },
  'News and Notes': { name: 'notesNews', width: '72' },
  'Our People': { name: 'ourPeople', width: '56' },
  'Overview': { name: 'overview', width: '48' },
  'Partnerships': { name: 'partnerships', width: '65' },
  'Policies': { name: 'policies', width: '38' },
  'Products': { name: 'products', width: '45' },
  'Quality': { name: 'quality', width: '37' },
  'Quality Documents': { name: 'qualityDocuments', width: '97' },
  'Questions': { name: 'questions', width: '134' },
  'Resources': { name: 'resources', width: '54' },
  'Requests': { name: 'requests', width: '46' },
  'Safety': { name: 'safety', width: '36' },
  'Safety Services': { name: 'safetyServices', width: '79' },
  'Service Solutions': { name: 'serviceSolutions', width: '90' },
  'Services': { name: 'services', width: '44' },
  'Solutions': { name: 'solutions', width: '47' },
  'Suppliers': { name: 'suppliers', width: '48' },
  'Surveys/Feedback': { name: 'surveysFeedback', width: '99' },
  'Technology': { name: 'technology', width: '58' },
  'TKIS Business Update': { name: 'tkisBusinessUpdate', width: '111' },
  'Transportation': { name: 'transportation', width: '74' },
  'Warehousing': { name: 'warehousing', width: '68' }
};

$H(tkFragmentMainMenuImages).each(function(e) {
  e.value.img = tkFragmentMainMenuImagesPath + e.value.name + '.gif';
  e.value.imgOver = tkFragmentMainMenuImagesPath + e.value.name + 'Over.gif';
});

var TkFragmentMainMenu = Class.create();
TkFragmentMainMenu.prototype = {
  initialize: function(assetPath, options) {
    this.assetPath = tkRootCMS + assetPath;
    this.imageRightArrow = this.assetPath + 'image/arrowRight.gif';
    this.imageRightArrowOver = this.assetPath + 'image/arrowRightOver.gif';
    this.options = {
      className: 'tkFragmentMainMenu',
      dropdown: true,
      instance: 'tkFragmentMainMenu',
      overview: false,
      showhome: true
    };
    Object.extend(this.options, options || {});

    this.m_HeaderTableId = this.options.instance + '_HeaderTable';

    this.m_ds = new Array();
    this.m_di = 0;
  },

  write: function() {
    var siteClassName = this.options.className + '_' + tkSite.replace(/\./, '_');

    if (this.options.dropdown == true) {
      this.m_ds[this.m_di++] =
        '<div id="tkmmid" class="' + this.options.className + ' ' + siteClassName + '" style="float: left;">';
    } else {
      var img = (g_ssSourceSiteId == 'internet.mtkl') ? '' : ('<img class="tk" src="' + this.assetPath + 'image/thyssenKrupp.gif' + '" />');
      this.m_ds[this.m_di++] =
        '<div id="tkmmid" class="' + this.options.className + ' ' + siteClassName + '">' +
          img;
    }

    this.m_ds[this.m_di++] =
        '<div class="table">' +
          '<table id="' + this.m_HeaderTableId + '" class="main" cellpadding="0" cellspacing="0">' +
          '<tbody>' +
            '<tr>' +
              '<td class="ddm_HeaderMenuCell">' +
                '<table cellpadding="0" cellspacing="0">' +
                  '<tbody>' +
                    '<tr>';
  
    this.processNode(g_navNode_Root);
  
    this.m_ds[this.m_di++] =
                    '</tr>' +
                  '</tbody>' +
                '</table>' +
              '</td>' +
            '</tr>' +
          '</tbody>' +
          '</table>' +
        '</div>' +
      '</div>';

    if (this.options.dropdown == true) {
      var img = (g_ssSourceSiteId == 'internet.mtkl') ? '' : ('<img id="tkmmidtk" class="tkFragmentMainMenu" src="' + this.assetPath + 'image/thyssenKrupp.gif' + '" />');
      this.m_ds[this.m_di++] =
        '<div class="' + this.options.className + ' ' + siteClassName + '" style="text-align: right;">' +
          img +
        '</div>';
    }
  
    document.write(this.m_ds.join(''));

  if (this.options.dropdown == true) {
    Event.observe(window, 'load', function() {
//      if (img != '') {
//        var tkmmidtk = $('tkmmidtk');
//        Position.relativize(tkmmidtk);
//      }
      var tkmmid = $('tkmmid');
      Position.absolutize(tkmmid);
      document.getElementsByTagName("body")[0].appendChild(tkmmid);
//      Element.hide(tkmmid);
    }, false);
  }
  },
 
  processNode: function(parentElement) {
    this.openNode(parentElement);

    if (parentElement.m_level == 0 && this.options.showhome) {
      this.writeNode(parentElement);
    }
  
    var childList = parentElement.m_subNodes;
    for (var i = 0; i < childList.length; i++) {
      var childNode = childList[i];
      this.writeNode(childNode);
      if (childNode.m_subNodes.length > 0 && this.options.dropdown) {
        this.processNode(childNode);
      }
    }
  
    this.closeNode(parentElement);
  },

  openNode: function(parentElement) {
    var level = parentElement.m_level;
    if (level == 0) {
    } else if (level == 1) {
      this.m_ds[this.m_di++] =
        '<div class="ddm_TopChildCollectionContainer" style="display: none;">' +
          '<table class="ddm_TopChildListTable" cellpadding="0" cellspacing="0">';
    } else {
      this.m_ds[this.m_di++] =
        '<div class="ddm_SubChildCollectionContainer" style="display: none;">' +
          '<table class="ddm_SubChildListTable" cellpadding="0" cellspacing="0">';
    }
  },

  closeNode: function(parentElement) {
    var level = parentElement.m_level;
    if (level == 0) {
    } else if (level == 1) {
      this.m_ds[this.m_di++] =
            '</table>' +
          '</div>' +
        '</td>';
    } else {
      this.m_ds[this.m_di++] =
              '</table>' +
            '</div>' +
          '</td>' +
        '</tr>';
    }
  },

  writeNode: function(childElement) {
    var label = childElement.m_label;

    var level = childElement.m_level;
    if (level == 0 && this.options.showhome) {
      level = 1;
    }

    var url = childElement.m_href.replace(/'/g, "\\'");
  
    if (level == 0) {
    } else if (level == 1) {
      var imageString = label.replace(/ /g, "&#160;");
      var imageOutString = null;
      var imageOverString = null;
      var imd = tkFragmentMainMenuImages[label];
      if (imd) {
        if (g_navNode_Path.length >= 1 && g_navNode_Path[1] == childElement.m_id) {
          imageString = '<img class="item on" src="' + this.assetPath + imd.imgOver + '" style="width: ' + imd.width + 'px;" />';
          imageOutString = this.assetPath + imd.imgOver;
          imageOverString = this.assetPath + imd.imgOver;
        } else {
          imageString = '<img class="item" src="' + this.assetPath + imd.img + '" style="width: ' + imd.width + 'px;" />';
          imageOutString = this.assetPath + imd.img;
          imageOverString = this.assetPath + imd.imgOver;
        }
        imd.pimgOut = new Image();
        imd.pimgOut.src = imageOutString;
        imd.pimgOver = new Image();
        imd.pimgOver.src = imageOverString;
      }
  
      if (childElement.m_subNodes.length == 0 || childElement.m_level == 0) { // No Children
        this.m_ds[this.m_di++] =
          '<td class="ddm_TopLinkItem"' +
             ' onclick="' + this.options.instance + '.onClick(event, this, \'' + url + '\')"' +
             ' onmouseover="' + this.options.instance + '.parentMouseOver(this,  \'' + imageOverString + '\')"' +
             ' onmouseout="' + this.options.instance + '.parentMouseOut(this,  \'' +  imageOutString + '\')">' +
            imageString +
          '</td>';
      } else if (!this.options.dropdown || this.options.overview) { // Hide Children
        this.m_ds[this.m_di++] =
          '<td' +
             ' onclick="' + this.options.instance + '.onClick(event, this, \'' + url + '\')"' +
             ' onmouseover="' + this.options.instance + '.collectionParentMouseOver(event, this,\'' +imageOverString+ '\')"' +
             ' onmouseout="' + this.options.instance + '.collectionParentMouseOut(event, this,\'' +imageOutString+ '\')">' +
            '<table class="ddm_TopCollectionItemTable" cellpadding="0" cellspacing="0">' +
              '<tr>' +
                '<td class="ddm_TopCollectionItemArrowCell">' +
                  imageString +
                '</td>' +
              '</tr>' +
            '</table>';      
      } else { // Show Children
        this.m_ds[this.m_di++] =
          '<td style="cursor: default;"' +
             ' onmouseover="' + this.options.instance + '.collectionParentMouseOver(event, this,\'' +imageOverString+ '\')"' +
             ' onmouseout="' + this.options.instance + '.collectionParentMouseOut(event, this,\'' +imageOutString+ '\')">' +
            '<table class="ddm_TopCollectionItemTable" cellpadding="0" cellspacing="0">' +
              '<tr>' +
                '<td class="ddm_TopCollectionItemArrowCell">' +
                  imageString +
                '</td>' +
              '</tr>' +
            '</table>';      
      }
    } else {
      if (childElement.m_subNodes.length == 0) { // No Children
        this.m_ds[this.m_di++] =
          '<tr>' +
            '<td class="ddm_ChildLinkItem"' +
               ' onclick="' + this.options.instance + '.onClick(event, this, \'' + url + '\')"' +
               ' onmouseover="' + this.options.instance + '.childMouseOver(this)"' +
               ' onmouseout="' + this.options.instance + '.childMouseOut(this)">' +
              '<img src="' + this.imageRightArrow + '" style="height: 5px; width: 5px; margin-right: 4px;">' +
              label +
            '</td>' +
          '</tr>';
      } else {  // Has Children
        this.m_ds[this.m_di++] =
          '<tr>' +
            '<td' +
               ' onclick="' + this.options.instance + '.onClick(event, this, \'' + url + '\')"' +
               ' onmouseover="' + this.options.instance + '.collectionChildMouseOver(event, this)"' +
               ' onmouseout="' + this.options.instance + '.collectionChildMouseOut(event, this)">' +
              '<table class="ddm_ChildCollectionItemTable" cellpadding="0" cellspacing="0">' +
                '<tr>' +
                  '<td align="left" class="ddm_ChildCollectionItem">' +
                    '<img src="' + this.imageRightArrow + '" style="height: 5px; width: 5px; margin-right: 4px;">' +
                    label +
                    '<img src="' + this.imageRightArrowOver + '" style="height: 5px; width: 5px; margin-left: 4px;">' +
                  '</td>' +
                '</tr>' +
              '</table>';
      }
    }
  },

  parentMouseOver: function(element, imageOver) {
    element.className = "ddm_TopLinkItem_over";
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = imageOver;
      Element.addClassName(img[0], 'over');
    }
  },

  parentMouseOut: function(element, imageOver) {
    element.className = "ddm_TopLinkItem";
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = imageOver;
      Element.removeClassName(img[0], 'over');
    }
  },

  childMouseOver: function(element) {
    element.className = "ddm_ChildLinkItem_over";
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = this.imageRightArrowOver;
    }
  },
  
  
  childMouseOut: function(element) {
    element.className = "ddm_ChildLinkItem";
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = this.imageRightArrow;
    }
  },

  collectionParentMouseOver: function(e, element, imageOver) {
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = imageOver;
      Element.addClassName(img[0], 'over');
    }

    this.highlightItem(element);

    var left = element.offsetLeft;
    var top = element.offsetHeight;
    var container = $(this.m_HeaderTableId);
    while (container) {
//      left += container.offsetLeft;
//      top += container.offsetTop;
      container = container.offsetParent;
    }

    if (element.getElementsByTagName("div").length > 0) {
      var childMenu = element.getElementsByTagName("div")[0];
      childMenu.style.left = left;
      childMenu.style.top = top;
      childMenu.style.display = "block";
    }
  },
  
  collectionParentMouseOut: function(e, element, imageOut) {
    var img = element.getElementsByTagName("img");
    if (img != null) {
      img[0].src = imageOut;
      Element.removeClassName(img[0], 'over');
    }

    this.unhighlightItem(element);

    var div = element.getElementsByTagName("div");
    if (div.length > 0) {
      var childMenu = div[0];
      childMenu.style.display = "none";
    }
  },

  collectionChildMouseOver: function(event, element) {
    this.highlightItem(element);

    var parent = element; // Patch for browsers that have a different event order
    while (parent && !Element.hasClassName(this.options.className)) {
      if (parent.style && parent.style.display == 'none') parent.style.display = 'block';
      parent = parent.parentNode;
    }

    var div = element.getElementsByTagName("div");
    if (div.length > 0) {
      var childMenu = div[0];
      childMenu.style.top = element.offsetTop;
      childMenu.style.display = "block";
    }
  },

  collectionChildMouseOut: function(e, element) {
    this.unhighlightItem(element);
    var div = element.getElementsByTagName("div");
    if (div.length > 0) {
       var childMenu = div[0];
       childMenu.style.display = "none";
    }
  },

  onClick: function(event, element, url) {
    window.open(url, '_self');
    Event.stop(event);
  },

  highlightItem: function(element) {
    var itemDisplayTable = element.getElementsByTagName("table")[0];
    // Set style for item's display table element.
    if (itemDisplayTable.className == "ddm_TopCollectionItemTable") {
    } else if (itemDisplayTable.className == "ddm_ChildCollectionItemTable") {
      itemDisplayTable.className = "ddm_ChildCollectionItemTable_over";
    }
    var tableCells = itemDisplayTable.getElementsByTagName("td");
    for (var i = 0; i < tableCells.length; i++) {
      // Set style for item's label cell element.
      if (tableCells[i].className == "ddm_TopCollectionItem") {
      } else if (tableCells[i].className == "ddm_ChildCollectionItem") {
        tableCells[i].className = "ddm_ChildCollectionItem_over";
        tableCells[i].getElementsByTagName("img")[0].src = this.imageRightArrowOver;
      }
      // Change arrow image to mouseover version.
      if (tableCells[i].className == "ddm_TopCollectionItemArrowCell") {
      } else if (tableCells[i].className == "ddm_ChildCollectionItemArrowCell") {
        tableCells[i].getElementsByTagName("img")[0].src = this.imageRightArrowOver;
      }
    }
  },

  unhighlightItem: function(element) {
    var itemDisplayTable = element.getElementsByTagName("table")[0];
    // Set style for item's display table element.
    if (itemDisplayTable.className == "ddm_TopCollectionItemTable_over") {
    } else if (itemDisplayTable.className == "ddm_ChildCollectionItemTable_over") {
      itemDisplayTable.className = "ddm_ChildCollectionItemTable";
    }
    var tableCells = itemDisplayTable.getElementsByTagName("td");
    for (var i = 0; i < tableCells.length; i++) {
      // Set style for item's label cell element.
      if (tableCells[i].className == "ddm_TopCollectionItem_over") {
      } else if (tableCells[i].className == "ddm_ChildCollectionItem_over") {
        tableCells[i].className = "ddm_ChildCollectionItem";
        tableCells[i].getElementsByTagName("img")[0].src = this.imageRightArrow;
      }
      // Change arrow image to mouseover version.
      if (tableCells[i].className == "ddm_TopCollectionItemArrowCell") {
      } else if (tableCells[i].className == "ddm_ChildCollectionItemArrowCell") {
        tableCells[i].getElementsByTagName("img")[0].src = this.imageRightArrow;
      }
    }
  }
}