function HeaderRotator()
{
    this.intervalId;
    this.visuals = [];
    this.numbers = {};
    this.rotateSpeed = 10000;
    this.fadeSpeed = 500;
    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)
    {
        // hide old visual
        if (this.visuals[oldIndex]) this.visuals[oldIndex].getVisual().css('display', 'none');
        this.currentIndex = newIndex;

        // show new visual
        var visual = this.visuals[this.currentIndex];
        visual.getVisual().css('display', 'block');

        // 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.html(visual.getTitle());

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

//        var slider = $('#numberslide');
        if (oldIndex != -1) {
            var previousNumber = $('#num-' + this.visuals[oldIndex].getNumber());
            previousNumber.removeClass('selected');
        }
        var currentNumber = $('#num-' + this.visuals[this.currentIndex].getNumber());
        currentNumber.addClass('selected');


//        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);
            }
        }
     // autoplay off
//        this.resetInterval();
    }

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

    this.initialize = function()
    {
        var html = '';
        html += '<div id="headervisual">';
        html += '<div class="visuals"></div>';
        html += '<div id="visual-info">';
        html += '<h2 class="title"></h2>';
        html += '<h3 class="payoff subtitle"><p></p></h3>';
        html += '</div>';
//        html += '<a id=\"headerlink\" href="/"></a>';
        html += '<div class="numbers"><ol></ol></div>';
        html += '</div>';

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

        var container = $('#headervisual');
        var visualcontainer = container.find('.visuals');
        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].getNumber() + '</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;

        if (this.visuals.length > 1) {
            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.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());
    }
}