/* --------------------- HTML MENU --------------------------- */

/* Build the Segments and Geography menu **/

function makeMenu ()
{
  var menuItems;
	var segment;
	var geography;
	var continent;
	var liIndex;
	var segmentIndex;
	var subSegmentIndex;
	var subGeographyIndex;
	var geographyIndex;

   $.ajax({
   url: 'documentos/xml/segments.xml',
     dataType:(jQuery.browser.msie) ? "text" : "xml",
     success: function(event, xhr, settings){
         if ( jQuery.browser.msie )
         {
           var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");

           xmlDoc.async = "false";
           xmlDoc.loadXML(settings.responseText);
           settings = xmlDoc;

           menuItems = settings.documentElement.childNodes;
         }
         else
         {
           menuItems = settings.responseXML.firstChild.childNodes;
         }

         menuCallbacks = [];

         segment   = "";
         geography = "";
         liIndex = 0;
         segmentIndex = 0;
         geographyIndex = 0;
         subSegmentIndex = 0;
         subGeographyIndex = 0;


         for(i = 0; i < menuItems.length; i++)
         {
           if( menuItems[i].nodeName == "segment")
           {
             segment += "\n\t<li id=\"" + "item" + (++liIndex) + "\"><a href=\"javascript:void(0)\" onclick=\"dropMenu(\'#segment" + (++segmentIndex) + "\')\">" + menuItems[i].getAttribute("title") + "</a>";

             segment += (function (items, index)
             {
               var j;
               var child;
               var result;

               result = ( index ) ? "\n\t<ul class=\"menuDropList subSegment" + (++subSegmentIndex) + "\">" : "\n\t<ul id=\"segment" + segmentIndex + "\" class=\"menuDropList\">";

               for(j = 0; j < items.length; j++)
               {
                 child = items[j];

                 if(child.nodeName.indexOf("#") == -1)
                 {
                   if( child.childNodes.length )
                   {
                     result += "\n\t\t<li class=\"subItem\"><a href=\"javascript:void(0)\" onclick=\"dropSubMenu(this)\">" + child.getAttribute("title") + "</a>";
                     result += arguments.callee( child.childNodes, j + 1);
                   }
                   else
                     result += "\n\t\t<li class=\"subLink\"><a href=\"" + child.getAttribute("link") + "\">" + child.getAttribute("title") + "</a>";
               }
           }

           result += "\n\t\t</ul>";

           return result;
         })(menuItems[i].childNodes);

           segment += "\n\t</li>"
         }

         if( menuItems[i].nodeName == "continent")
         {
           geography += "\n\t<li id=\"" + "item" + (++liIndex) + "\"><a href=\"javascript:void(0)\" onclick=\"dropMenu(\'#geography" + (++geographyIndex) + "\')\">" + menuItems[i].getAttribute("title") + "</a>";

           geography += (function (items, index)
           {
             var j;
             var child;
             var result;

             result = ( index ) ? "\n\t<ul id=\"subSegment" + (++subGeographyIndex) + "\" class=\"menuDropList\">" : "\n\t<ul id=\"geography" + geographyIndex + "\" class=\"menuDropList\">";

             for(j = 0; j < items.length; j++)
             {
               child = items[j];

               if(child.nodeName.indexOf("#") == -1)
               {
                 if( child.childNodes.length )
                 {
                   result += "\n\t\t<li class=\"subItem\"><a href=\"javascript:void(0)\" onclick=\"dropSubMenu(this)\">" + child.getAttribute("title") + "</a>";
                   result += arguments.callee( child.childNodes, j + 1);
                 }
                 else
                   result += "\n\t\t<li class=\"subLink\"><a href=\"" + child.getAttribute("link") + "\">" + child.getAttribute("title") + "</a>";
             }
           }

             result += "\n\t\t</ul>";

             return result;
           })(menuItems[i].childNodes);

           geography += "\n\t</li>"
         }
       }
       $("#by-segment").html(segment);
       $("#by-geography").html(geography);
     }
   });

   bindContextChanger();
   showSegmentContext();
}


function bindContextChanger ()
{
  $("#title-segment").click(function(event){
   showSegmentContext();
  });

  $("#title-geography").click(function(){
    showGeographyContext();
  });
}


function showSegmentContext ()
{
   $("#title-segment").removeClass("segment-close");
   $("#title-geography").removeClass("geography-open")
   $("#by-segment").show();
   $("#by-geography").hide();
}

function showGeographyContext()
{
  $("#title-geography").addClass("geography-open")
  $("#title-segment").addClass("segment-close");
  $("#by-segment").hide();
  $("#by-geography").show();
}



 /* --------------------- HTML MENU --------------------------- */

/* --------------------- HTML MENU METHODS --------------------------- */

var activeMenuItem;
var activeSubMenuItem;

function dropMenu(query)
{
  if( activeSubMenuItem ) $(activeSubMenuItem).css({"visibility":"hidden"});
  $(document).unbind('click');

  if( $(query).css("visibility") == "hidden" && activeMenuItem != query )
  {
    $(activeMenuItem).css({"visibility":"hidden"});
    $(query).css({
      visibility: "visible",
      display: "none"
    }).fadeIn();
    activeMenuItem = query;

    // after selected menu is open, bind click event in document to closes it, if click out of menu
    $('html, body').bind('click', function(event){
      // search click event origin....
      // if origin is outside of menu, close it
      if( $(event.target).parentsUntil("#make-menu").find('body').length )
        closeCurrentMenu();
    });
  }
  else
  {
    closeCurrentMenu();
  }

}

function closeCurrentMenu ()
{
  if( activeSubMenuItem ) $(activeSubMenuItem).css({"visibility":"hidden"});
  if( activeMenuItem ) $(activeMenuItem).css({"visibility":"hidden"});
  activeMenuItem = null;
  activeSubMenuItem = null;
  $(document).unbind('click');
}

function dropSubMenu(query)
{
  var element = $(query).next()[0];

  if( $(element).css("visibility") == "hidden" && activeSubMenuItem != query )
  {
    $(activeSubMenuItem).css({"visibility":"hidden"});
    $(element).css({
      visibility: "visible",
      display: "none"
    }).fadeIn();
    activeSubMenuItem = element;
  }
  else
  {
    $(element).css({"visibility":"hidden"});
    activeSubMenuItem = null;
  }
}

/* --------------------- HTML MENU METHODS --------------------------- */
;