Function.prototype.createDelegate = function(obj, args, appendArgs)
{
    var method = this;
    return function()
    {
        var callArgs = args || arguments;
        if ( appendArgs === true )
        {
            callArgs = Array.prototype.slice.call(arguments, 0);
            callArgs = callArgs.concat(args);
        }
        else if ( typeof appendArgs == "number" )
        {
            callArgs = Array.prototype.slice.call(arguments, 0);
            var applyArgs = [appendArgs,0].concat(args);
            Array.prototype.splice.apply(callArgs, applyArgs);
        }

        return method.apply(obj || window, callArgs);
    };
};

Function.prototype.defer = function(millis, obj, args, appendArgs)
{
    var fn = this.createDelegate(obj, args, appendArgs);
    if ( millis )
    {return setTimeout(fn, millis);}
    fn();
    return 0;
};


var AnimatedMenu = {
    isOpen : {},
    isMouseOverAnimation : {},
    preventHideSelector:null,

    init: function()
    {
        this.animateDown("#blog", -100, 4000);
        this.animateDown.defer(500, this, ["#about", -335, 4000]);
        this.animateDown.defer(1000, this, ["#twitter", -402, 4000]);
        this.animateDown.defer(1500, this, ["#contact", -190, 4000]);
        this.addClickListener("#blog", 742);
        this.addClickListener("#about", 959);
        this.addClickListener("#twitter", 727);
        this.addClickListener("#contact", 790);
        $('body').click(this.hideContents.createDelegate(this));
    },

    hideContents : function(notHidableSelector)
    {
        var toHide = ['#about', '#blog', '#contact', '#twitter'];
        for (var i = 0; i < toHide.length; i++)
        {
            var sel = toHide[i];
            if ( sel != notHidableSelector && this.preventHideSelector != sel )
            {
                this.hideContent(sel);
            }
        }
    },

    hideContent : function(selector)
    {
        if ( !this.isOpen[selector] ) return true;
        this.isOpen[selector] = false;
        var el = $(selector);
        el.removeClass('focus');

        var content = el.find(".content .inner");
        content.gx({'width': 0, 'color':'#f3f3f3'}, 700, 'Elastic', (function()
        {
            content.css('display', 'none');
            el.animate({
                height: '678px'
            }, 200, 'easeOutQuad');
        }));

        (function()
        {
            var p = content.find('p');
            p.fadeIn(100, function()
            {
                p.css('display', 'none');
            });
        }).defer(100);

    },

    addClickListener : function(selector, liHeight)
    {
        var el = $(selector);
        el.click(this.showContent.createDelegate(this, [liHeight, selector], 0));
        el.find('a.nojs').attr("href", "#");
    },

    showContent : function(liHeight, selector)
    {
        this.preventHideSelector = selector;
        (function()
        {
            this.preventHideSelector = null;
        }).defer(100, this);
        if ( this.isOpen[selector] ) return true;
        this.isOpen[selector] = true;
        var el = $(selector);
        el.addClass('focus');
        el.stop();
        el.animate({
            height: liHeight + 'px'
        }, 200, 'easeOutQuad', (function()
        {
            var content = el.find(".content .inner");
            content.css('display', 'block');
            this.hideContents(selector);
//r|sin|Transitions||GX|Bounce|||sqrt|5625|70158|cos|525|Quint|Cubic|Quart|Quad|Expo|984375|Circ|Sine|Fns|625|Back|Extend|9375|
            content.gx({'width': selector == '#about' ? 342 : 258, 'color':'#7d8b94'}, 500, 'Cubic', (function()
            {
            }).createDelegate(this));

            (function()
            {
                var p = content.find('p');
                p.css('opacity', 0);
                p.css('display', 'block');
                p.fadeIn(100);
            }).defer(500);
        }).createDelegate(this));
        this.hideContents(selector);
    },

    animateDown: function(selector, pos, duration)
    {
        var el = $(selector);
        el.gx({'top': pos}, duration, 'Elastic', (function()
        {
            el.hover((function()
            {
                if ( this.isMouseOverAnimation[selector] ) return;
                this.isMouseOverAnimation[selector] = true;
                el.animate({
                    top: pos - 20
                }, 1500, 'easeOutQuad');
            }).createDelegate(this), (function()
            {
                el.animate({
                    top: pos
                }, 1500, 'easeOutQuad', (function()
                {
                    this.isMouseOverAnimation[selector] = false;
                }).createDelegate(this));
            }).createDelegate(this));
        }).createDelegate(this));
    }
}

$(document).ready(function()
{
    AnimatedMenu.init();

    //    var aboutLink = $('#about a');
    //    aboutLink.attr('href', '#about_content');
    //    $('#about_content').load("about.html");
    //    aboutLink.fancyZoom({closeOnClick: true, width:300, height:150});
});