(function($) {
$.fn.xcomPagination = function(opts){
  opts = $.extend({
    item_selector : '#item',
    content_selector : '#pagination_content',
    buttons_selector : '#pagination_buttons',
    button_prev_text:"Föregående",
    button_next_text:"Nästa",
    button_type : 'h3',
    source : $([]),
    scrollDuration : 500,
    init_with_cookie : false,
    page_changed : function() {},
    layout_elements : function() {},
    layout_buttons : function() {},
    callback:function(){return false;}
  },opts||{});

  _getBox = function($this, opts)
  {
    var box = { height : $(opts.content_selector, $this).outerHeight(), width : $this.parent().width(), top : $(opts.content_selector, $this).offset().top };
    return box;
  }
  _goToPage = function($this, opts, skipAnimation)
  {
    var box = _getBox($this, opts);
    $(opts.content_selector, $this).scrollTo({ left : ((opts.current_page-1) * (box.width)) + 'px', top : '0px' }, skipAnimation ? 0 : opts.scrollDuration);
    $.cookie('xcomPagination_' + $this.attr('id'), "" + opts.current_page);
    opts.page_changed.call($this, opts.current_page);
  }
  _updateButtons = function($this, opts)
  {
    $(opts.buttons_selector, $this).empty();

    var button_next = null, button_prev = null;
    if (opts.current_page == 1)
      $(opts.buttons_selector, $this).append($('<span class="prev"><' + opts.button_type + '>' + opts.button_prev_text + '</' + opts.button_type + '></span>'))
    else
    {
      button_prev = $('<a href="#" class="prev"><' + opts.button_type + '>' + opts.button_prev_text + '</' + opts.button_type + '></a>')
      $(opts.buttons_selector, $this).append(button_prev);
    }

    if (opts.current_page == opts.page_count)
      $(opts.buttons_selector, $this).append($('<span class="next"><' + opts.button_type + '>' + opts.button_next_text + '</' + opts.button_type + '></span>'));
    else
    {
      button_next = $('<a href="#" class="next"><' + opts.button_type + '>' + opts.button_next_text + '</' + opts.button_type + '></a>');
      $(opts.buttons_selector, $this).append(button_next);
    }

    opts.layout_buttons($(opts.buttons_selector, $this));

    if (button_next)
      button_next.click(function()
      {
        opts.current_page++;
        _goToPage($this, opts);
        _updateButtons($this, opts);
      });

    if (button_prev)
      button_prev.click(function()
      {
        opts.current_page--;
        _goToPage($this, opts);
        _updateButtons($this, opts);
      });
  }
  
  return this.each(function() 
  {
    var $this = $(this);
    opts.page_count = 0;

    //if (!opts.init_with_cookie)
    //  $.cookie('xcomPagination_' + $this.attr('id'), null, { path : '/' });

    var cookie_pages = $.cookie('xcomPagination_' + $this.attr('id'));
    opts.current_page = !opts.init_with_cookie || cookie_pages == null ? 1 : parseInt(cookie_pages);

    var box = _getBox($this, opts);

    var content_container = $(opts.content_selector, $this);
    content_container.css({
      overflow: 'hidden',
      width: box.width + 'px'
    });

    var temp_page_container = $("<div/>").attr('id', 'page_container');
    content_container
      .append(temp_page_container);

    temp_page_container
      .append($(opts.item_selector, opts.source).clone());
    
    opts.layout_elements(temp_page_container);

    var page_container = $("<div/>").attr('id', 'page_container');
    var prev_item = null;
    var height = 0;
    var items = [];
    var pages = [];
    var createPage = function()
    {
      var page = $('<div/>').attr('id', 'page');
      page.css({
        width : box.width + 'px',
        height : box.height + 'px',
        float : 'left'
      });
      page_container.append(page);
        
      for (var i = 0; i < items.length; i++)
        page.append($(items[i]));

      opts.page_count++;
    }

    $(opts.item_selector, temp_page_container).each(function(i)
    {
      var item = $(this);
      height += item.outerHeight() + 10;
      if (prev_item != null && height > box.height)
      {
        //prev_item.css({
        //  marginBottom : (box.height - ((prev_item.offset().top + prev_item.height()) - box.top)) + 'px'
           //});
        
        height = 0;
        prev_item = null;

        createPage();
        items = [$(opts.item_selector + ':nth-child(' + (i+1) + ')', opts.source).clone()];
        //alert('i: ' + i + ' sortOrder: ' + $('#sortOrder', $(opts.item_selector + ':nth-child(' + (i+1) + ')', opts.source)).html());
      }
      else
      {
        //alert('i: ' + i + ' sortOrder: ' + $('#sortOrder', $(opts.item_selector + ':nth-child(' + (i+1) + ')', opts.source)).html());
        items.push($(opts.item_selector + ':nth-child(' + (i+1) + ')', opts.source).clone());
        prev_item = item;
      }
    });
      
    createPage();
  
    page_container.css({
      width : (opts.page_count * box.width) + 'px'
    });
        
    temp_page_container.remove();
    content_container.append(page_container);
    opts.layout_elements(page_container);

    page_container.append($('<div style="clear:both;"></div>'));
    content_container.append($('<div style="clear:both;"></div>'));

    _updateButtons($this, opts);
    _goToPage($this, opts, true);
  });
};
})(jQuery);