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:   756,
                main_element_width:   126,
                sub_elements_padding: 10
             }

//show the ringtones submenu
function _showSubmenu(menuId,bgColor) {
  active_submenu_id = menuId //we refresh the active_submenu
  _hideSubmenus()
  _centerSubmenu()
  $(menuId).style.visibility = 'visible'

  Element.setStyle($('flycell_menu'),{'backgroundColor':bgColor})

} //showSubmenu

//hides
function _hideSubmenus() {

  if (!document.body){
      return;
  }

  //get the elements of each section
  lis = document.getElementsByClassName('sub_menu',$('flycell_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()