var heights = [];
var delays = [];
var opened = [];

function show_menu(ev)
{
    var menu = $(ev.target).getParent('.menu_group');
    var sub = $(menu).getElement('.menu_subgroup');
    var main = $('tpl_main');
    if (!sub) return;

    // Create an id according to the link name
    var id = menu.getFirst().get('html');
    delays[id] = $clear(delays[id]);

    // Already opening this menuitem, don't do anything
    if (opened[id]) return;

    // Register height initially, so it won't be disturbed when the fx doesn't finish
    if (!heights[id]) {
        heights[id] = sub.getSize().y;
    }

    // Move all menus offscreen
    $$('.menu_subgroup').each(function(elt) {
        if (elt == menu) return;
        elt.setStyle('left', -10000);
    });

    // Ignore other opened menu, open this one
    opened = [];
    opened[id] = true;

    // Start animations
    var fx = new Fx.Morph(sub, {
        duration:'short',
        transition:Fx.Transitions.Sine.easeOut,
        link:'cancel'
    });

    var height = heights[id];
    var coords = menu.getCoordinates();

    sub.setStyles({
        'overflow':'visible',
        'left':menu.getCoordinates().left - main.getCoordinates().left,
        'top':menu.getCoordinates().bottom - main.getCoordinates().top,
        'height':0
    });

    fx.start({
        'height': height
    });

}

function hide_menu(ev)
{
    var menu = $(ev.target).getParent('.menu_group');
    if (!menu) return;
    var sub = menu.getElement('.menu_subgroup');
    if (!sub) return;
    var id = menu.getFirst().get('html');

    // Do a delayed hide, keep track of it so we can cancel
    delays[id] = hide_elt.delay(600, menu);
}

function hide_elt()
{
    // Hide, and set opened to false
    var sub = this.getElement('.menu_subgroup');
    var id = this.getFirst().get('html');
    sub.setStyle('left', -10000);
    opened[id] = false;
}

function enable_menus()
{
    var menus = $$('div.menu_group');
    heights = new Hash();
    menus.each(enable_menu);
}

function enable_menu(menu)
{
        menu.addEvent('mouseenter', show_menu);
        menu.addEvent('mouseleave', hide_menu);
}

window.addEvent('domready', function() {
    enable_menus();
});


function is_touch_device() {  
  try {  
    document.createEvent("TouchEvent");  
    return true;  
  } catch (e) {  
    return false;  
  }  
}