function HeaderRotator()
{
    this.intervalId;
    this.visuals = [];
    this.numbers = {};
    this.rotateSpeed = 5000;
    this.fadeSpeed = 1500;
    this.selectSpeed = 500;
    this.currentIndex = 0;

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

    this.setNumber = function(num, src)
    {
        this.numbers[num] = src;
    }

    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);

        // set url
        $('#headervisual .visuals a').attr('href', visual.getUri());
        $('#headervisual #headerlink').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());

        var slider = $('#numberslide');
        var currentNumber = $('#num-' + this.visuals[this.currentIndex].getNumber());
        var currentOffset = Number(slider.offset().left);
        var liOffset = Number(currentNumber.offset().left);
        slider.dequeue().animate({'left' : '+=' + Number(liOffset - currentOffset) + 'px'}, '100', 'swing');
    }

    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 id="headervisual">';
        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>';
        html += '<a id=\"headerlink\" href="/"></a>';
        html += '<div class="numbers"><div id="numberslide"></div><ol></ol></div>';
        html += '</div>';

        $('#header').append(html);

        var container = $('#headervisual');
        var visualcontainer = container.find('.visuals a');
        var numberscontainer = container.find('.numbers ol');

        var self = this;

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

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

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

                // get last child
                var li = numberscontainer.find('li:last');
                li.click(function() { self.select(this); });
                li.css('background-image', 'url(' + this.numbers[this.visuals[i].getNumber()] + ')');
            }

            this.start();

        } else {

            throw new Error(';HeaderRotator: Could not create headervisual container.');

        }
    }

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

        var self = this;
        this.intervalId = setInterval(function() { self.playNext(); }, this.rotateSpeed);
    }
}

function HeaderRotatorVisual(num, uri, visual_src, title, title_bg, subtitle, subtitle_bg)
{
    this.num = num;
    this.uri = uri;
    this.src = visual_src;
    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.getVisual = function()
    {
        return $('#' + this.getId());
    }
}