/* Необходимо сделать предварительную загрузку изображений
 * Эти переменные будут использоваться в функции switch_display для смены изображений
 */

var opened_img = new Image, closed_img = new Image;
opened_img.src = 'img/opened.gif';
closed_img.src = 'img/closed.gif';

/* attach_handler - функция, предназначенная для регистрации обработчиков событий
 * Если браузер не поддерживает методы регистрации, то скрипт просто не будет загружен
 */

function attach_handler(o, e, f) { 
  return((o.attachEvent) ? o.attachEvent(e, f) : ((o.addEventListener) ? 
    o.addEventListener(e.substr(2), f, false) : false));
}

/* init_list - функция инициализации списка
 * Получает в качестве параметров id списка и тэг, который будет обрабатывать 
 * событие onclick для открытия допольнительных пунктов списка
 * (в данном примере используются тэги <a>&<img>)
 *
 * Основная задача этой функции - "пробежаться" по всем пунктам списка и 
 * найти среди них те, в которые вложены дополнительные списки
 * В случае (условие if inner_list), если у пункта есть вложенный список, 
 * на один из вложенных элементов (list_opener - тэги <a>&<img>) будет 
 * "повешен" обработчик события onclick (функция switch_display) при помощи функции attach_handler
 */
 
function init_list(id, tag) {
  var list_items = document.getElementById(id).getElementsByTagName('li');
  for(var i = 0, l = list_items.length, inner_list, list_opener; i < l; i++) {
    inner_list = list_items[i].getElementsByTagName('ul')[0];
    if(inner_list) {
      (list_opener = list_items[i].getElementsByTagName(tag)[0]).inner_list = inner_list;
      attach_handler(list_opener, 'onclick', switch_display);
    }
  }
}

/* switch_display - функция, вызываемая в момент наступления события onclick
 * В случае, если в качестве "открывашек" были выбраны изображения, эта функция 
 * укажет для них новый адрес (используются предварительно загруженные изображения)
 * Основная задача - менять поочередно значение свойства display вложенного списка
 * Функция также осуществляет отмену действия, происходящего по умолчанию для события onclick - 
 * это имеет смысл в случае, если "открывашками" выбраны тэги <a>
 */

function switch_display(e) {
  var el = e.target || e.srcElement;
  if(el.tagName.toLowerCase() == 'img') 
    el.src = (el.src == closed_img.src) ? opened_img.src : closed_img.src;
  el.inner_list.style.display = (el.opened = !el.opened) ? 'block' : 'none';
  return((e.preventDefault) ? e.preventDefault() : (e.returnValue = false));
}

/* on_load - функция, вызываемая в момент загрузки документа и позволяющая 
 * вызывать функции init_list для инициализации списков, передавая им необходимые параметры
 * Эта функция необходима лишь в том случае, если требуется обрабатывать несколько списков
 * Если сценарий работает с одним списком, id и тэг можно указать непосредственно в теле функции
 * init_list, не прибегая к использованию аргументов
 * Загрузка тогда будет выглядеть так: attach_handler(window, 'onload', init_list)
 */

function on_load() {
 init_list('list', 'img');
 init_list('list2', 'img');
} 

attach_handler(window, 'onload', on_load);