AICMedia.TopMenu = {

	show: function() {
		$('#top-menu').show('drop', { direction: 'up' });
	},

	hide: function() {
		$('#top-menu').hide('drop', { direction: 'up' });
	},

	toggle: function() {
		if ( $('#top-menu:hidden').length ) this.show(); else this.hide();
	}

};

AICMedia.TopMenuButtons = {
    icon: {
        height: 34,
        width: 35
    },
    bg: {
        height: 106,
        width: 700,
        hideTop: 0,
        showTop: -6,
        vSlideTime: 200,
        hSlideTime: 500
    },
    $wrap: null,
    $this: null,
    $like: null,
    $refresh: null,
    isEnabled: false,
    $activeButton: null,

    initialize: function() {
        if (AICMedia.mini) {
            this.bg.showTop = -36;
            this.bg.hideTop = -30;
        }

        this.$this = $('#top-menu table.buttons');
        this.$wrap = this.$this.closest('.wrap-buttons');
        this.$like = this.$this.find('td.like a');
        this.$refresh = this.$this.find('td.refresh a');

        this.$like.add(this.$refresh)
                
            .hover($.proxy(function(event) {
                if (this.isEnabled) {
                    this._slidePointer($(event.target).addClass('hover'));
                }
            }, this), $.proxy(function(event) {
                $(event.target).removeClass('hover active');
            }, this))

            .mousedown($.proxy(function(event) {
                console.debug(this.isEnabled)
                if (this.isEnabled) {
                    $(event.target).addClass('active');
                }
            }, this))

            .mouseup($.proxy(function(event) {
                $(event.target).removeClass('active');
            }, this))

            .click($.proxy(function(event) {
                if (!this.isEnabled) {
                    event.preventDefault();
                }
            }, this));

        this.$this.hide();
    },

    _showPointer: function($button, duration) {
        $button = $button || this.$activeButton || this.$like;
        duration = duration || this.bg.vSlideTime;

        var bgLeft = Math.ceil(-this.bg.width / 2 + ($button.offset().left - this.$wrap.offset().left) + this.icon.width / 2 - 1);

        this.$wrap.css({
            backgroundPosition: bgLeft + 'px ' + this.bg.hideTop + 'px'
        }).stop().animate({
            backgroundPosition: bgLeft + 'px ' + this.bg.showTop + 'px'
        }, duration, $.proxy(function() {
            this.isEnabled = true;
        }, this));

        this.$activeButton = $button;
    },

    _hidePointer: function(duration) {
        this.isEnabled = false;

        this.$wrap.stop();
        duration = duration || this.bg.vSlideTime;

        //var bgLeft = this.$wrap.css('backgroundPosition').replace(/^(-?[0-9]+(\.[0-9]+)?)(px)? (-?[0-9]+(\.[0-9]+)?)(px)?/, '$1');

        this.$wrap.animate({
            backgroundPosition: '0' + 'px ' + this.bg.hideTop + 'px'
        }, duration);
    },

    _slidePointer: function($button) {
        $button = $button || this.$activeButton || this.$like;

        this.$wrap.stop();
        
        var bgLeft = Math.ceil(-this.bg.width / 2 + ($button.offset().left - this.$wrap.offset().left) + this.icon.width / 2 - 1);

        this.$wrap.animate({
            backgroundPosition: bgLeft + 'px ' + this.bg.showTop + 'px'
        }, this.bg.hSlideTime);

        this.$activeButton = $button;
    },

    show: function(duration, callback) {
        this.$this.stop(false, true).fadeIn(duration, $.proxy(function() {
            this._showPointer(null, duration / 5);
            callback && callback();
        }, this));
    },

    hide: function(duration, callback) {
        this._hidePointer(duration / 5);
        this.$like.add(this.$refresh).removeClass('hover active');
        this.$this.stop(false, true).fadeOut(duration, function() {
            callback && callback();
        });
    }
};