if (typeof UIEvent == "undefined") UIEvent = {}
UIEvent.PAGE_INITIALISED = "UIPageInitialised";
UIEvent.PAGE_CHANGED     = "UIPageChanged";
UIEvent.CHANGE_PAGE      = "UIChangePage";

Pagination = function(options) {
    var config  = {
        view_container: "#clip_list",
        view_height: 460,
        pagination_target: "#pagination_container",
        pagination_container_id: "paging",
        per_page: 4
    }
    this.config     = $.extend(config, options);
    this.webservice = config.webservice;
    this.channel_name = config.channel_name;
    
    this.per_page = this.config.per_page;
    this._current_page = 0;
    this._item_count = 0;
    this._page_count = 0;
    
    // our setup
    var container = $("<div></div>");
    container.attr("id", this.config.pagination_container_id);
    container.addClass("paging");
    
    $(this.config.pagination_target).append(container);
    
    listen(Event.CLIPS_LOADED,  delegate(this, this.init));
    listen(UIEvent.CHANGE_PAGE, delegate(this, this.changePage));
    // FIXME
    // listem for view/layout change event then switch the view back to page 1.
};
Pagination.prototype = {
    init: function(evt, data) {
        this._item_count = data.contentList.length;
        this._page_count = Math.ceil(this._item_count / this.per_page);
        
        $.log("Pagination: update_pages: "+ this._item_count + " items, "+ this._page_count +" pages");
        this.redisplay();
        
        dispatch(UIEvent.PAGE_INITIALISED, {items: this._item_count, pages: this._page_count});
    },
    /*
    redisplay: function() {
        var list = $("#"+ this.config.pagination_container_id);
        list.html("");
        
        var previous = $("<a></a>").attr("href", "#").addClass("button").addClass("prev");
        previous.click(delegate(this, this.pagePrevious));
        list.append(previous);
        
        for (var i=0; i < this._page_count; i++) {
            var a = $("<a></a>");
            a.attr("href", "#");
            a.attr("rel", i);
            if (i == this._current_page) a.addClass("on")
            a.click(delegate(this, this.switchPage));
            a.html(i+1);
            list.append(a);
        }
        
        var next = $("<a></a>").attr("href", "#").addClass("button").addClass("next");
        next.click(delegate(this, this.pageNext));
        list.append(next);
    },
    */
    // This is bad. Same code as above but the items are inserted backwards as a quick fix for a UI problem.
    redisplay: function() {
        var list = $("#"+ this.config.pagination_container_id);
        list.html("");
        
        var next = $("<a></a>").attr("href", "#").addClass("button").addClass("next");
        next.click(delegate(this, this.pageNext));
        list.append(next);
        
        for (var i=(this._page_count-1); i > -1; i--) {
            var a = $("<a></a>");
            a.attr("href", "#");
            a.attr("rel", i);
            if (i == this._current_page) a.addClass("on")
            a.click(delegate(this, this.switchPage));
            a.html(i+1);
            list.append(a);
        }
        
        var previous = $("<a></a>").attr("href", "#").addClass("button").addClass("prev");
        previous.click(delegate(this, this.pagePrevious));
        list.append(previous);
    },
    changePage: function(evt, target_page) {
        this._current_page = target_page;
        this.redisplay();
        this.moveView();
    },
    switchPage: function(evt) {
        this._current_page = $(evt.target).attr("rel");
        this.redisplay();
        this.moveView();
    },
    moveView: function() {
        $(this.config.view_container).css("margin-top", (this.config.view_height * (this._current_page))*-1);
        
        dispatch(UIEvent.PAGE_CHANGED, {current: this._current_page, pages: this._page_count});
    },
    pageNext: function() {
        if (this._current_page+1 < this._page_count) {
            this._current_page +=1;
            this.redisplay();
            this.moveView();
        }
    },
    pagePrevious: function() {
        if (this._current_page-1 >= 0) {
            this._current_page -=1;
            this.redisplay();
            this.moveView();
        }
    },
    reset: function() {
        $(this.config.view_container).css("margin-top", 0);
    },
    setViewHeight: function(val) {
        this.config.view_height = val;
        this.moveView();
    },
    setPerPage: function(val) {
        this.per_page = val;
        this._page_count = Math.ceil(this._item_count / this.per_page);
        this.reset();
        this.redisplay();
    }
};