var active_submenu_id

//config object 
//(more like a hash, but used as an object in JS 
//e.g. -> config.prop)
var config = {  
                main_section_width:   942,
                main_element_width:   188,
                sub_elements_padding: 10
             }

//show the ringtones submenu
function _showSubmenu(menuId,bgImage,topMenuId) {
  active_submenu_id = menuId //we refresh the active_submenu
  _hideSubmenus()
  if(topMenuId == 4)
  {
  	_centerSubmenu();
  }
  if ( $('top_element6_link') && topMenuId == 4)
  {
    _centerSubmenu();
  }
  $(menuId).style.visibility = 'visible'

  //Element.setStyle($('topnav_menu'),{'backgroundColor':bgColor})
  //alert(bgImage);
  Element.setStyle($('topnav_menu'),{'backgroundImage':bgImage})
  
  var currMenuName = null;
  var currMenuArrowImg = null;
  var lis = document.getElementsByClassName('sub_menu','topnav_menu');
  if (lis != null && lis.length != null) {
    n = lis.length
    for (i=0; i < n; i++) {
		currMenuName = "top_element"+(i+1)+"_link";
	  	currMenuArrowImg = "top_element"+(i+1)+"_arrow";
  		$(currMenuName).className = "top_element"+(i+1)+"_link";
//  		$(currMenuArrowImg).style.display = "none";
    } //for
  }
  
  var topMenuArrowImg = "top_element"+topMenuId+"_arrow";
  var topMenuName = "top_element"+topMenuId+"_link";
  
  $(topMenuName).className = "top_element"+topMenuId+"_ActiveLink";
  //$(topMenuArrowImg).style.display = "";

} //showSubmenu

//hides
function _hideSubmenus() {
  //get the elements of each section
  lis = document.getElementsByClassName('sub_menu','topnav_menu');

  if (lis != null && lis.length != null) {
    n = lis.length

    for (i=0; i < n; i++) {
      lis[i].style.visibility = 'hidden'
    } //for
  } //if
} //hideAll

/** Returns a list of the LI elements of the active section. */
function _getActiveSubElements() {
 active_section = $(active_submenu_id) //get the current active section

 if (active_section == null)
   return null

 return active_section.getElementsByTagName('li') 
}

/** Sums the widths of all the lis inside the active submenu */
function _getActiveSubmenuWidth() {
  lis = _getActiveSubElements() //get a hold of the elements to sum

  if (lis == null)
    return 0

  totalWidth = 0

  for (i=0; i < lis.length; i++) {
	currentLi = lis.item(i)
	w = Element.getDimensions(currentLi).width + (config.sub_elements_padding*2)
    totalWidth = totalWidth + w 
  }

  return totalWidth
}

/** Resizes the active submenu */
function _setActiveSubmenuWidth(width) {
    curWidth = Element.getDimensions($(active_submenu_id)).width

    Element.setStyle($(active_submenu_id),
        {'width':width+'px',
         'padding-right':'0px',
         'margin':'0 0'})

    curWidth = Element.getDimensions($(active_submenu_id)).width
}

/** This function is responsible for centering the currently visible
    subMenu */
function _centerSubmenu(event) {
  //get the active section Element
  active_section = $(active_submenu_id)

  if (active_section == null)
    return

  //get the active elements of the submenu
  lis = _getActiveSubElements()

  if (lis == null)
    return

  element_count = lis.length

  //sum of width of all the elements inside the section
  submenu_width = _getActiveSubmenuWidth()
  _setActiveSubmenuWidth(submenu_width)

  //if the submenu is bigger than the container we can't center it
  if (submenu_width >= config.main_section_width)
      return //otherwise we don't do anything

  //the x position of the title of the active section
  section_pos_x = active_section.parentNode.offsetLeft

  //If there's only one element, we place it right under
  if (element_count == 1) {
    Element.setStyle(active_section,
                     {'left':section_pos_x+'px'})
    return
  } else {
    //section center
    section_center_pos_x = section_pos_x

    //submenu center should be the same center, so we'll shift it
    //half its size left to the center of the parent.
    submenu_center_pos_x = section_center_pos_x// - (submenu_width/2)

    //now we need to check if the submenu is not falling ouside
    //the range, if so, we fix it.
 
    right_limit = submenu_center_pos_x + (config.main_element_width/2) + submenu_width

    delta = 0
    if ((submenu_center_pos_x + (config.main_element_width/2) + submenu_width) > config.main_section_width) {
      delta = right_limit - config.main_section_width
    }

    submenu_center_pos_x -= delta

    //we move it using css property
    if (submenu_center_pos_x > 0) {
      Element.setStyle(active_section,
          {'left':submenu_center_pos_x+'px'})
    }
  } //else (many elements)

} //_centerSubmenu

_hideSubmenus()