var ParentsListener = Class.create({

  id_parents_div            : 'parents',
  parent_current_class_name : 'active',
  parent_curent_li          : null,
  
  initialize : function() 
  {
		var lis = $$('#' + this.id_parents_div + ' div');
		for (var i=0; i<lis.length; i++)
		{
		  lis[i].observe('click', this.onLiClick.bindAsEventListener(this));
		  if (lis[i].hasClassName(this.parent_current_class_name))
		  {
		    this.parent_curent_li = lis[i];
		  }
		}
  },
  
  onLiClick : function(event)
  {
    var li = Event.element(event);
    
    if (li.tagName == 'SPAN') {
      li = li.up('div');
    }
    
    if (!li.hasClassName(this.parent_current_class_name))
    {
      this.parent_curent_li.removeClassName(this.parent_current_class_name);
      $('parent_' + this.getParentIdByLi(this.parent_curent_li.id)).hide();
      
      li.addClassName(this.parent_current_class_name);
      $('parent_' + this.getParentIdByLi(li.id)).show();
      
      this.parent_curent_li = li; 
    }
  },
  
  getParentIdByLi : function(id_li)
  {
    return id_li.sub(/^li\_/, '');
  }
});

new ParentsListener();