///<reference path="util.js"/>

window.onload = initPage;

function initPage() {
    addEvents("navigation");    
}

function addEvents(parentId) {

    if (document.getElementById(parentId) != null)
    {
        var children = GetChildElements(parentId, 'li');

        for (i = 0; i < children.length; i++) {
            addEventHandler(document.getElementById(children[i].id), 'click', OnClickEvent)
        }
    }    
}

function OnClickEvent(e) {
    var trigger = getActivatedObject(e).id;
    AddHidenClassException(trigger);
}

function AddHidenClassException(triggerId) {
    var imageDisplayIdNbr = triggerId.split('_', 2)[1];
    var imageId = 'product_' + imageDisplayIdNbr;
    var textId = 'subTextProduct_' + imageDisplayIdNbr;

    document.getElementById(imageId).className = 'active';
    document.getElementById(textId).className = 'active';
    document.getElementById('linav_' + imageDisplayIdNbr).className = 'li-active clickable';

    var inactiveElements = GetChildElements('showcase', 'img');
    var inactiveTextElements = GetChildElements('description', 'li');
    var inactiveDescriptions = GetChildElements('navigation', 'li');

    for (i = 0; i < inactiveElements.length; i++) {
        if (imageId != inactiveElements[i].id) {
            document.getElementById(inactiveElements[i].id).className = "hidden";
            document.getElementById(inactiveTextElements[i].id).className = "hidden";
            document.getElementById(inactiveDescriptions[i].id).className = 'li-inactive clickable';
        }
    }
}

function GetChildElements(parentId, elementType) {
    return document.getElementById(parentId).getElementsByTagName(elementType);
}