function buildLayerView() {
    document.body.style.textAlign = 'left';
    var layerView = document.createElement('div');
    layerView.style.position = 'absolute';
    layerView.style.left = '0px';
    layerView.style.top = '0px';
    layerView.style.textAlign = 'left';
    document.body.appendChild(layerView);


    var table = document.createElement('table');
    layerView.appendChild(table);
    table.cellSpacing = '0';
    table.cellPadding = '0';
    table.style.backgroundColor = '#ffffff';
    table.id = 'layerView';
    table.style.position = 'absolute';
    table.style.left = '0px';
    table.style.top = '0px';
    table.style.textAlign = 'left';

    var tbody = document.createElement('tbody');
    table.appendChild(tbody);

    var tr = document.createElement('tr');

    // Top Left corner
    var td = document.createElement('td');
    td.rowSpan = '2';
    td.className = 'titleLeftSide';
    td.width = '3';
    var img = document.createElement('img');
    img.src = IMG_SERVER+'/c.gif';
    img.height = '1';
    img.width  = '3';
    td.appendChild(img);
    tr.appendChild(td);

    td = document.createElement('td');
    td.className = 'channelName';
    var channelName = document.createElement('nobr');
    channelName.id = 'layerView_ChannelTitle';
    channelName.appendChild(document.createTextNode('Home and Garden'));
    td.appendChild(channelName);
    tr.appendChild(td);

    td = document.createElement('td');
    td.className = 'titleRightSide';
    td.width = '150';
    div = document.createElement('div');
    div.style.width = '100%';
    td.appendChild(div);
    tr.appendChild(td);

    td = document.createElement('td');
    td.className = 'rightSide';
    td.rowSpan = '2';
    img = document.createElement('img');
    img.src = IMG_SERVER+'/c.gif';
    img.height = '1';
    img.width  = '8';
    td.appendChild(img);
    tr.appendChild(td);

    tbody.appendChild(tr);

    // CONTENT ROW
    tr = document.createElement('tr');

    td = document.createElement('td');
    td.className = 'browseList';
    td.colSpan = '2';
    td.id = 'layerView_LinkList';
    img = document.createElement('img');
    img.src = IMG_SERVER+'/c.gif';
    td.appendChild(img);
    tr.appendChild(td);

    tbody.appendChild(tr);

    // Footer row
    tr = document.createElement('tr');

    td = document.createElement('td');
    td.colSpan = '3';
    td.className = 'bottomLeft';
    img = img.cloneNode(false);
    img.height = '6';
    img.height = '1';
    td.appendChild(img);

    tr.appendChild(td);

    td = document.createElement('td');
    td.className = 'bottomRight';
    img = img.cloneNode(false);
    td.appendChild(img);

    tr.appendChild(td);

    tbody.appendChild(tr);

    layerView.style.visibility = 'visible';

}


function hideSubCats() {
    var catView = document.getElementById("layerView");
    if (catView) {
        catView = catView.parentNode;
        catView.style.visibility = "hidden";
    }
}



if (!DomUtils.browser.isIE()) window.addEvent(document.body, "click", hideSubCats, window, true);

function browseSubCats(node, channelId) {
    var channel = null;
    for (var i=0; i<channels.length; i++) {
        if (channels[i].id == channelId) {
            channel = channels[i];
            break;
        }
    }
    var catView = document.getElementById("layerView");
    if (!catView) {
        buildLayerView();
    }
    catView = document.getElementById("layerView").parentNode;
    catView.style.visibility = "hidden";
    if (catView.parentNode != document.body) {
        alert("appending to document.body");
        catView.parentNode.removeChild(catView);
        document.body.appendChild(catView);
    }
    var title = document.getElementById("layerView_ChannelTitle");
    title.innerHTML = channel.name;
    window.addEvent(title, "click", function() {  window.top.location = channel.url; }, window, true);
    if (channel.links) {//links.innerHTML = channel.links;
        var links = document.getElementById("layerView_LinkList");
        while (links.hasChildNodes()) links.removeChild(links.firstChild);
        for (var i=0; i<channel.links.length; i++) {
            var link = channel.links[i];
            var a = document.createElement("a");
            a.href = link.url;
            a.innerHTML = link.name;
			a.target = "_top";
            links.appendChild(a); 
            if (i <channel.links.length - 1) links.appendChild(document.createTextNode(", "));
        }
    }
    var cellHeight    = DomUtils.getElementHeight(node);
    var catViewHeight = DomUtils.getElementHeight(catView);
    //var top = parseInt((catViewHeight - cellHeight) / 2);
    catView.style.position   = "absolute";
    catView.style.left       = DomUtils.getElementLeft(node)+"px";
    //catView.style.top        = (DomUtils.getElementTop(node)-top)+"px";
    var top = DomUtils.browser.isIE() ? 0 : 15;
    catView.style.top        = (DomUtils.getElementTop(node)+top)+"px";
    catView.style.width      = parseInt(DomUtils.getElementWidth(node))+"px";
    catView.style.visibility = "visible";
}