var AtvTeaserBox = new Class({
    Implements : [ Options, Events ],
    
    min_page: 1,
    max_page: 10,
    
    active_page : 1,
    active_page_element: null,
    type : null,
    url : 'teaserbox',
    
    prev : null,
    next : null,
    
    initialize : function(element, type)
    {
        this.type = type;
        
        var elements = element.getElements('li');
        var count = elements.length;
        
        element.empty();
        
        for(var i = 0; i < count; i++)
        {
            if (this.min_page - 1 == i)
            {
                var li = new Element('li',{
                    'id': 'teaserbox_pager_prev',
                    'class': 'cursor prev',
                    'html': '<span title="eine Seite zurück" class="deactive">eine Seite zurück</span>'
                });
                this.prev = li;
                this.goToPrevPage();
            }
            else if (this.max_page + 1 == i)
            {
                var li = new Element('li',{
                    'id': 'teaserbox_pager_next',
                    'class': 'cursor next',
                    'html': '<span title="eine Seite weiter">eine Seite weiter</span>'
                });
                this.next = li;
                this.goToNextPage();
            }
            else
            {
                var li = new Element('li',{
                    'class': 'cursor',
                    'html': '<span>'+i+'</span>'
                }); 
                
                if (1 == i)
                {
                    this.active_page_element = li;
                }
                
                li.addEvent('click', function(event, index, li_element){
                    event = new Event(event); 
                    event.stop();
                    this.setPage(index, li_element);
                }.bindWithEvent(this, [i, li]));
            }
            
            element.grab(li);
        }
        
        //var url = this.getUrl() + this.active_page;
        //this.updateList(url);
        this.setPage(this.active_page, this.active_page_element)
    },
    
    getUrl : function()
    {
        return this.url + '/' + this.type + '/';
    },
    
    setPage : function(page, li)
    {
        if(this.min_page == page)
        {
            $('teaserbox_pager_prev').getFirst().addClass('deactive');
        }
        else
        {
            $('teaserbox_pager_prev').getFirst().removeClass('deactive');
        }
        
        if(this.max_page == page)
        {
            $('teaserbox_pager_next').getFirst().addClass('deactive');
        }
        else
        {
            $('teaserbox_pager_next').getFirst().removeClass('deactive');
        }
        
        this.active_page = page;
        this.active_page_element.removeClass('active');
        
        this.active_page_element = li;
        this.active_page_element.set('class', 'active');
        this.updateList(this.getUrl() + page);
    },
    
    goToPrevPage: function()
    {
        this.prev.addEvent('click', function(event){
            if(this.min_page < this.active_page)
            {
                this.setPage(this.active_page - this.min_page, this.active_page_element.getPrevious());
            }
        }.bind(this));
    },
    
    goToNextPage: function()
    {
        this.next.addEvent('click', function(event){
            if(this.max_page > this.active_page)
            {
                this.setPage(this.active_page + this.min_page, this.active_page_element.getNext());
            }
        }.bind(this));
    },
    
    updateList: function(url)
    {
        var wrapper = $('teaserbox_inner_wrapper');
        var div = new Element('div', {
            'class': 'loader'
        }).grab(new Element('img', {
            'src': 'images/teaserbox/ajax-loader.gif',
            'width': 32,
            'height': 32,
            'alt': 'Lade Daten'
        }));
        
        wrapper.grab(div);
        
        new Request.HTML({
            url: url, 
            update: wrapper
        }).get();
    }
});

window.addEvent('domready', function()
{
    if (!$('teaserbox_pager')) {
        return ;
    }

    new AtvTeaserBox($('teaserbox_pager'), 'latest');
    $('teaserbox_new').addClass('active');
    
    $('teaserbox_new').addEvent('click', function(){
        new AtvTeaserBox($('teaserbox_pager'), 'latest');
        this.getParent().getChildren().each(function(li){
            li.removeClass('active');
         });
         this.addClass('active');
    });
    
    $('teaserbox_popular').addEvent('click', function(){
        new AtvTeaserBox($('teaserbox_pager'), 'popular');
        this.getParent().getChildren().each(function(li){
           li.removeClass('active');
        });
        this.addClass('active');
    });

    $('teaserbox_comments').addEvent('click', function(){
        new AtvTeaserBox($('teaserbox_pager'), 'comments');
        this.getParent().getChildren().each(function(li){
            li.removeClass('active');
         });
         this.addClass('active');
    });
});