var Menu = new Class({

    /**
     * Sets up the menu for use with the rollovers. In order for it to work properly we need
     * to change the div structure to use absolutes rather than floats. In order to achieve
     * the best of both worlds, we measure the location and widths of the floats (positioned
     * in ems) and convert to absolutely positioned elements. Hot.
     *
     * @param 
     */
    initialize: function(str_parent_id, str_item_selector, str_link_selector, str_dropdown_selector) {
    
        // retrieve menu items
        var arr_elements = $(str_parent_id).getElements(str_item_selector);
        
        // we need to store coordinates for both the main (wrapping) menu item,
        // as well as the inner link item prior to any changes
        var arr_coords_item = [];
        var arr_coords_a = [];

        for(var i = 0, ilen = arr_elements.length; i < ilen; i++) {
            
            var elm_item = arr_elements[i];

            arr_coords_item.push(elm_item.getCoordinates(str_parent_id));
            arr_coords_a.push(elm_item.getElement(str_link_selector).getCoordinates(str_parent_id));
        }

        // now convert each menu item into an absolutely positioned element at its original position. We 
        // also need 
        for(var i = 0, ilen = arr_elements.length; i < ilen; i++) {
        
             var elm_item = arr_elements[i];
             var elm_dropdown = elm_item.getElement(str_dropdown_selector);
             var elm_item_a = elm_item.getElement(str_link_selector);
             
             // calculate the padding of the a to be sure to remove from the width
             var int_padding_a = elm_item_a.getStyle('padding-left').toInt() + elm_item_a.getStyle('padding-right').toInt();
             
             elm_item_a.setStyles({
                'width': arr_coords_a[i].width - int_padding_a
             });
             
             // if this menu item has a dropdown, we need to remove the bottom border and position
             // the dropdown to the bottom of the main menu item
             if(elm_dropdown) {
                
                elm_item.addClass('has_items');
                
                // dropdown should be 1px up from the main item in order for the overlap to mask
                // the top border. We also need to display: block the item in order to enable
                // the hover rollovers (which merely alter the visibility in order to support
                // non-JS browsers
                elm_dropdown.setStyles({
                    'top': arr_coords_a[i].bottom - 1,
                    'display': 'block'
                });
             }
             
             // move the element to absolutely positioned
             elm_item.setStyles({
                 'position': 'absolute',
                 'top': 0,
                 'left': arr_coords_item[i].left,
                 'float': 'none',
                 'z-index': (ilen * 10) - (i * 10)
             });
             
             if(elm_dropdown && elm_item_a.get('rel') == 'left') {

                // calculate how far to the left the dropdown item should be. In pseudo
                // code, -(dropdownWidth - linkWidth - dropdownBorderLeft - dropwdownBorderRight)
                var int_offset = elm_dropdown.getSize().x - arr_coords_a[i].width;
                
                int_offset -= elm_dropdown.getStyle('border-left-width').toInt();
                int_offset -= elm_dropdown.getStyle('border-right-width').toInt();
                
                int_offset = -(int_offset);
                
                // assign the offset
                elm_dropdown.setStyles({
                    'left': int_offset + 2 // magic number
                });
             }
             
              
        }
    }
});