// Register breadcrumb popups
document.observe('dom:loaded', function() {
    Breadcrumbs.register();
})

// Breadcrumb functionality
var Breadcrumbs = {

    register: function()
    {
        $$('img.showSiblings').invoke('observe', 'click', Breadcrumbs.showSiblings);
        $$('img.showChildren').invoke('observe', 'click', Breadcrumbs.showChildren);
    },
    
    showSiblings: function(objEvent)
    {
        var eleImg   = objEvent.element();
        var elePopup = $('divSitePopup');
        
        // Update content of popup and bring into page
        elePopup.addClassName('divBreadcrumbSiblings').hide().update(eleImg.next('div').innerHTML).setStyle({
            top:    String(eleImg.cumulativeOffset()[1]+16)+'px',
            left:   String(eleImg.cumulativeOffset()[0])+'px'
        });
        //Effect.Appear(elePopup);
        elePopup.show();
    },
    
    showChildren: function(objEvent)
    {
        var eleImg   = objEvent.element();
        var elePopup = $('divSitePopup');
        
        // Update content of popup and bring into page
		if (eleImg.next().select('li').length > 0) {
			var strContent = eleImg.next('div').innerHTML;
			elePopup.addClassName('divBreadcrumbSiblings').hide().update(eleImg.next('div').innerHTML).setStyle({
				top:    String(eleImg.cumulativeOffset()[1]-4)+'px',
				left:   String(eleImg.cumulativeOffset()[0]+16)+'px'
			});
			elePopup.show();
		}
	},

    hide: function(e)
    {
        if (!e) var e = window.event;
        var tg = (window.event) ? e.srcElement : e.target;
        if (tg.nodeName != 'DIV') return;
        var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
        while (reltg != tg && reltg.nodeName != 'BODY')
            reltg= reltg.parentNode
        if (reltg== tg) return;
        // Mouseout took place when mouse actually left layer
        // Handle event
        //Effect.Fade('divSitePopup',{duration:.3});
        $('divSitePopup').hide();
    },
    
    disappear: function(e)
    {
        $('divSitePopup').hide();
    }
}