var fi = fi || {};
fi.component = fi.component || {};
fi.component.GreyMarquee = function($context) {
    this.$context = $context;
};
fi.component.GreyMarquee.prototype = {
    init: function() {
        this.callback = null;
        this.list = $('ul', this.$context);
        this.buttonLeft = $('.pageLeft', this.$context);
        this.buttonRight = $('.pageRight', this.$context);
        this.itemCount = $('li', this.$context).length;
        this.$context.change($.proxy(this.init, this));
        this.page = 0;
        this.pageCount = Math.ceil(this.itemCount / 6);
        this.buttonLeft.click($.proxy(this.paginateLeft, this));
        this.buttonRight.click($.proxy(this.paginateRight, this));
        $('li', this.list).live('click', $.proxy(this.onClickLink, this));
        this.updateButtons();
    },
    setPage: function(newPage) {
        newPage = Math.max(newPage, 0);
        newPage = Math.min(newPage, this.pageCount - 1);
        if (newPage != this.page) {
            this.page = newPage;
            var position = Math.round( - this.page * 960);
            if (Modernizr.cssanimations) {
                this.list.css('left', position + 'px');
            } else {
                this.list.animate({
                    'left': position + 'px'
                },
                1000);
            }
            this.updateButtons(true);
        }
    },
    paginateLeft: function(event) {
        this.setPage(this.page - 1);
    },
    paginateRight: function(event) {
        this.setPage(this.page + 1);
    },
    updateButtons: function(animate) {
        var timing = 250;
        if (this.page == 0 || this.pageCount == 1) {
            if (animate === true) this.buttonLeft.fadeOut(timing);
            else this.buttonLeft.hide();
        }
        else {
            if (animate === true) this.buttonLeft.fadeIn(timing);
            else this.buttonLeft.show();
        }
        if (this.page == (this.pageCount - 1) || this.pageCount == 1) {
            if (animate === true) this.buttonRight.fadeOut(timing);
            else this.buttonRight.hide();
        } else {
            if (animate === true) this.buttonRight.fadeIn(timing);
            else this.buttonRight.show();
        }
    },
    setSelected: function($link) {
        var item = $link.parent().parent();
        $('li.selected', this.root).removeClass('selected');
        item.addClass('selected');
    },
    onClickLink: function(event) {
        var clicked = $(event.target);
        var link;
        if (clicked.get(0).tagName == "A") {
            link = clicked;
        }
        else if (clicked.get(0).tagName == "IMG") {
            link = $(clicked.get(0).parentNode);
        }
        else {
            link = $('a', clicked);
        }
        var result = true;
        if (this.callback != null) {
            result = this.callback(event);
        }
        var item = link.parent().parent();
        $('li.selected', this.root).removeClass('selected');
        item.addClass('selected');
        if (fi.common.Navigation.historyEnabled) {
            fi.common.Navigation.processLink(link);
            event.preventDefault();
        }
        return result;
    },
    setCallback: function(callback) {
        this.callback = callback;
    }
};
fi.common.ComponentLoader.register("grey-marquee", fi.component.GreyMarquee);