/**
 * @requires jquery-1.2.6
 */
function BannerRotator()
{
    this.intervalId;
    this.visuals = [];
    this.rotateSpeed = 5000;
    this.fadeSpeed = 1500;
    this.selectSpeed = 500;
    this.currentIndex = 0;

    this.addBanner = function(num, uri, visual_src, tab, title, title_bg, subtitle, subtitle_bg)
    {
        this.visuals.push(new BannerRotatorVisual(num, uri, visual_src, tab, title, title_bg, subtitle, subtitle_bg));
    }

    this.playNext = function()
    {
        var oldIndex = this.currentIndex;

        // increase index
        this.currentIndex++;
        if (this.currentIndex >= this.visuals.length) this.currentIndex = 0;

        this.play(oldIndex, this.currentIndex, this.fadeSpeed);
    }

    this.play = function(oldIndex, newIndex, speed)
    {
        // cross-fade
        if (this.visuals[oldIndex]) this.visuals[oldIndex].getVisual().fadeOut(speed);
        this.currentIndex = newIndex;

        var visual = this.visuals[this.currentIndex];
        visual.getVisual().fadeIn(speed);

        $('#banner-rotator .tabs li').removeClass('selected').eq(this.currentIndex).addClass('selected');

        // set url
        $('#banner-rotator .visuals a').attr('href', visual.getUri());

        // set titles
        var title = $('#visual-info .title');
        var subtitle = $('#visual-info .subtitle');

        title.css('background-image', 'url(' + visual.getTitleBg() + ')');
        title.find('span').html(visual.getTitle());

        subtitle.css('background-image', 'url(' + visual.getSubTitleBg() + ')');
        subtitle.find('span').html(visual.getSubTitle());
    }

    this.select = function(visual)
    {
        visual = $(visual);
        for (var i = 0; i < this.visuals.length; i++) {
            if (visual.attr('id') === 'num-' + this.visuals[i].getNumber()) {
                this.play(this.currentIndex, i, this.selectSpeed);
            }
        }

        this.resetInterval();
    }

    this.start = function()
    {
        this.resetInterval();
        this.play(-1, 0);
    }

    this.initialize = function()
    {
        var html = '';
        html += '<div class="tabs"><ul></ul></div>';
        html += '<div class="visuals"><a href="/"></a></div>';
        html += '<div id="visual-info">';
        html += '<p class="title"><span></span></p>';
        html += '<p class="subtitle"><span></span></p>';
        html += '</div>';

        $('#banner-rotator').append(html);

        var container = $('#banner-rotator');
        var visualcontainer = container.find('.visuals a');
        var tabscontainer = container.find('.tabs ul');

        var self = this;

        if ((visualcontainer.size() > 0) && (tabscontainer.size() > 0)) {

            for (var i = 0; i < this.visuals.length; i++) {
                this.visuals[i].create(visualcontainer);

                tabscontainer.append('<li id="num-' + this.visuals[i].getNumber() + '">' + this.visuals[i].getTab() + '</li>');

                // get last child and attach event to it
                var li = tabscontainer.find('li:last');
                li.click(function() { self.select(this); });
            }

            this.start();

        } else {

            throw new Error(';BannerRotator: Could not create bannervisual container.');

        }
    }

    this.resetInterval = function()
    {
        if (this.intervalId) clearInterval(this.intervalId);

        var self = this;
        if (this.visuals.length > 1) {
            this.intervalId = setInterval(function() { self.playNext(); }, this.rotateSpeed);
        }
    }
}

function BannerRotatorVisual(num, uri, visual_src, tab, title, title_bg, subtitle, subtitle_bg)
{
    this.num = num;
    this.uri = uri;
    this.src = visual_src;
    this.tab = tab;
    this.title = title;
    this.titleBg = title_bg;
    this.subtitle = subtitle;
    this.subtitleBg = subtitle_bg;

    this.create = function(container)
    {
        container.append('<img id="' + this.getId() + '" class="nodisplay" src="' + this.src + '" alt="' + this.title + '"/>');
    }

    this.getId = function()
    {
        return 'rotating-visual-' + num;
    }

    this.getUri = function()
    {
        return this.uri;
    }

    this.getTitle = function()
    {
        return this.title;
    }

    this.getTitleBg = function()
    {
        return this.titleBg;
    }

    this.getSubTitle = function()
    {
        return this.subtitle;
    }

    this.getSubTitleBg = function()
    {
        return this.subtitleBg;
    }

    this.getNumber = function()
    {
        return this.num;
    }

    this.getTab = function()
    {
        return this.tab;
    }

    this.getVisual = function()
    {
        return $('#' + this.getId());
    }
}