/** 
 * Необходимо сделать предварительную загрузку изображений, 
 * которые будут использоваться в качестве "открывашек"
 * (как правило, это бывают изображения плюс и минус).
 * Эти переменные будут использоваться в функции switchDisplay 
 * для смены изображений.
 */

var openedImg = new Image,
    closedImg = new Image;
    
openedImg.src = '/templates/compasstour/images/opened.gif';
closedImg.src = '/templates/compasstour/images/closed.gif';

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

function attachHandler(aObj, aEvent, aFunc) { 
    aObj.attachEvent
    ? aObj.attachEvent(('on' + aEvent), aFunc)
    : (aObj.addEventListener
      ? aObj.addEventListener(aEvent, aFunc, false)
      : '');
}

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

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

function switchDisplay(aEvent) {
    var el = aEvent.target || aEvent.srcElement;
    if (el.tagName.toLowerCase() == 'img') {
        el.src = (el.src == closedImg.src)
                 ? openedImg.src
                 : closedImg.src;
    }
    el.list.style.display = (el.opened = !el.opened)
                            ? 'block'
                            : 'none';
    return (aEvent.preventDefault
           ? aEvent.preventDefault()
           : (aEvent.returnValue = false));
}

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

function onLoad() {
    initList('list2', 'a');
    initList('list', 'img');
} 

attachHandler(window, 'load', onLoad);