/*
*   Section Navigation
*   Generates a section navigation with toggle classes on hover
*
*   Requires: Trapeze jQuery distribution
*
*   Marcos Abreu - April 18, 2009
*/

$.namespace("trapeze.SectionNavigation");

trapeze.SectionNavigation = $.Class.extend({
    jNavigation : null,
    settings : null,
    active_item : null,

    set_active_item : function(evt) {
        //TODO: it can receive an event or an html list
        if (this.active_item && (evt.currentTarget != this.active_item.get(0))) {
            this.active_item.removeClass(this.settings.active_item_class);
        }
        this.active_item = $(evt.currentTarget);
        this.settings.click_callback(evt);
    },

    remove_active_item : function() {
        this.active_item.removeClass(this.settings.active_item_class);
        this.active_item = null;
    },

    over_item : function(evt) {
        if (this.active_item) {
            if ((evt.currentTarget == this.active_item.get(0)) && (!this.active_item.hasClass(this.settings.active_item_class))) {
                this.remove_active_item();
            }
        }
        $(evt.currentTarget).addClass(this.settings.active_item_class);
    },
    
    out_item : function(evt) {
        if ((this.active_item == null) || (evt.currentTarget != this.active_item.get(0))) {
            $(evt.currentTarget).removeClass(this.settings.active_item_class);
        }
    },

    init : function (params) {
        var default_params = { 
            active_item_class : 'active',
            click_callback : function() {},
            increase_width : 0,
            //item_padding   : 0,
            selector : null 
        };
        this.settings = $.extend({}, default_params, params);
        this.jNavigation = $(this.settings.selector);
        this.active_item = $(this.settings.selector+ ' li.' + this.settings.active_item_class) || null;

        //this.jNavigation.children('li').each(this.set_behaviour.bind(this));
        this.jNavigation.children('li')
        .bind('click', this.set_active_item.bind(this))
        .bind('mouseover', this.over_item.bind(this))
        .bind('mouseout', this.out_item.bind(this));

        if (this.jNavigation.css('width') == 'auto') {
            var width = this.jNavigation.innerWidth() + this.settings.increase_width;
            var padding = 2 * parseInt(this.jNavigation.find('li:first').css('padding-left').replace('px', ''));
            //this.jNavigation.width(width + 'px').find('li').css('width', (width - this.settings.item_padding) + 'px');
            this.jNavigation.width(width + 'px').find('li').css('width', (width - padding) + 'px');
        }
    }
});