var fi = fi || {};
fi.component = fi.component || {};
fi.component.SectionMenu = function($context) {
    this.$context = $context;
    this.$links = $("li a", this.$context);
    this.$active = $(".active", this.$context);
    this.$tag = $("span", this.$active);
    this.width = parseInt($context.width(), 10);
    this.expanded = $context.hasClass("expanded");
    this.csstransitions = $("html").hasClass("csstransitions");
    this.resizeTimeout = undefined;
    this.autoResize = true;
    this.callback = null;
    this.iPadExpanded = false;
    this._onResize = $.proxy(this.onResize, this);
    this._onMouseEnter = $.proxy(this.onMouseEnter, this);
    this._onMouseLeave = $.proxy(this.onMouseLeave, this);
    this._iPadExpandToggle = $.proxy(this.iPadExpandToggle, this);
    $('a', this.$context).click($.proxy(this.onClickLink, this));
    this.refresh();
};
fi.component.SectionMenu.prototype = {
    init: function() {
        if ($('html.ipad').length > 0) {
            $('.ipad-nav').bind("click", this._iPadExpandToggle);
        }
        if (this.expanded) {
            $(window).bind("resize", this._onResize);
            this.onResize(true);
        }
    },
    iPadExpandToggle: function(event) {
        if (this.iPadExpanded) {
            this.onMouseLeave();
            this.iPadExpanded = false;
        }
        else {
            this.onMouseEnter();
            this.iPadExpanded = true;
        }
    },
    refresh: function() {
        var expandedState = this.$context.hasClass("expanded");
        var hasChangedState = this.expanded !== expandedState;
        if ($('html.ipad').length > 0) {
            if (expandedState) {
                $('.ipad-nav').hide();
            }
            else {
                $('.ipad-nav').show();
            }
        }
        this.$active = $(".active", this.$context);
        this.$tag = $("span", this.$active);
        this.expanded = expandedState;
        if (hasChangedState) {
            if (this.expanded) {
                if (!this.csstransitions) {
                    this.$context.unbind("mouseenter", this._onMouseEnter);
                    this.$context.unbind("mouseleave", this._onMouseLeave);
                }
                $(window).bind("resize", this._onResize);
                this.onResize(true);
            } else {
                if (!this.csstransitions) {
                    this.$context.bind("mouseenter", this._onMouseEnter);
                    this.$context.bind("mouseleave", this._onMouseLeave);
                }
                $(window).unbind("resize", this._onResize);
            }
            this.$context.attr("style", '');
        }
    },
    onMouseEnter: function(event) {
        this.$context.stop().css({
            left: -this.width
        }).animate({
            left: 0
        },
        {
            duration: 250,
            easing: "easeOutQuad"
        });
        this.$tag.stop().css({
            right: -31,
            width: 31
        }).animate({
            right: -13,
            width: 13
        },
        {
            duration: 100,
            easeing: "easeOutQuad"
        });
    },
    onMouseLeave: function(event) {
        this.$context.stop().animate({
            left: -this.width
        },
        {
            duration: 200,
            easing: "easeInOutQuad"
        });
        this.$tag.stop().delay(250).animate({
            right: -31,
            width: 31
        },
        {
            duration: 150,
            easing: "easeOutQuad"
        });
    },
    onResize: function(instant) {
        var self = this;
        clearTimeout(this.resizeTimeout);
        this.resizeTimeout = setTimeout(function() {
            if (this.autoResize) {
                self.$context.css({
                    height: "auto"
                }).hide();
            }
            var h1 = self.$context.outerHeight();
            var h2 = self.$context.parent().outerHeight();
            if (this.autoResize) {
                self.$context.height(Math.max(h1, h2));
            }
            self.$context.show();
            var padding = (($(window).width() - 940) * 0.5) + 300;
            self.$context.width(Math.max(300, padding));
        },
        instant ? 1: 1);
    },
    onClickLink: function(event) {
        var result = true;
        if (this.callback != null) {
            result = this.callback(event);
        }
        return result;
    },
    setCallback: function(callback) {
        this.callback = callback;
    }
};
fi.common.ComponentLoader.register("section-menu", fi.component.SectionMenu);