/*
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

(function () {
    var init = function() {
            var menuBar = document.getElementById("menu_bar");
            if (menuBar) {

                var rightMargin = Position.cumulativeOffset(menuBar)[0] + Element.getDimensions(menuBar).width;

                var menuBarBottom = Position.cumulativeOffset(menuBar)[1] + Element.getDimensions(menuBar).height;


                var getTopAndSub = function(element) {
                        var top = null, sub = null;
                        for (var n = element; n; n = n.parentNode) {
                            if (n.className && Element.hasClassName(n, 'topCategory')) {
                                sub = n._submenuContainer;
                                top = n;
                                break;
                            } else {
                                if (n.className && Element.hasClassName(n, 'subCategoryColumns')) {
                                    sub = n;
                                    top = n._topItem;
                                }
                            }
                        }
                        return {sub: sub, top: top};
                }

                var overHandler = function(event) {
                    var e = Event.element(event);
                    var ts = getTopAndSub(e);
                    if (ts.top || ts.sub) {
                        ts.sub.style.display = "block";
                        Element.addClassName(ts.top, "hover");
                        Event.stop(event);
                    }
                }

                var outHandler = function(event) {
                    var e = Event.element(event);
                    var ts = getTopAndSub(e);
                    var rel = event.relatedTarget || event.toElement;
                    if (ts.top || ts.sub) {
                        if (!(rel == ts.top || rel == ts.sub || Element.descendantOf(rel, ts.top) || Element.descendantOf(rel, ts.sub))) {
                            ts.sub.style.display = "none";
                            Element.removeClassName(ts.top, "hover");
                            Event.stop(event);
                        }
                    }
                }

                
                var topItems = document.getElementsByClassName("topCategory", menuBar);
                $A(topItems).each(function(topItem) {
                    var submenuContainer = document.getElementsByClassName("subCategoryColumns", topItem)[0];
                    var topItemPos = Position.cumulativeOffset(topItem);
                    var subColumns = document.getElementsByClassName("subCategoryColumn", submenuContainer);
                    var requiredSubmenuWidth = 0;
                    $A(subColumns).each(function(sc) {requiredSubmenuWidth += Element.getDimensions(sc).width;});
                    submenuContainer.style.width = requiredSubmenuWidth + "px";
                    submenuContainer._hoverTop = menuBarBottom + "px";
                    var left = topItemPos[0];
                    if (left + requiredSubmenuWidth > rightMargin) left = rightMargin - requiredSubmenuWidth;
                    document.body.appendChild(topItem.removeChild(submenuContainer));
                    //Position.absolutize(submenuContainer);
                    //Element.makePositioned(subme)
                    submenuContainer.style.display = "none";
                    submenuContainer._hoverLeft = left + "px";
                    submenuContainer.style.top = submenuContainer._hoverTop;
                    submenuContainer.style.left = submenuContainer._hoverLeft;

                    topItem._submenuContainer = submenuContainer;
                    submenuContainer._topItem = topItem;

                    Event.observe(topItem, 'mouseover', overHandler);
                    Event.observe(submenuContainer, 'mouseover', overHandler);

                    Event.observe(topItem, 'mouseout', outHandler);
                    Event.observe(submenuContainer, 'mouseout', outHandler);
                });

            } else {
            }
    };
    Event.observe(window, 'load', init);
    //if (document.getElementById("menu_bar")) init();
        //else Event.observe(window, 'load', init);

}) ();