(function(){
  var PER_PAGE = 4;

  var viewport = $('catalog-widget-viewport');
  var widgetList = $('catalog-widget-list');
  if (!(viewport && widgetList)) return;
  
  var pageSize = $('catalog-widget-list').offsetHeight;
  var allWidgets = viewport.select(".catalog-widget");
  var widgetCount = allWidgets.length;
  if (widgetCount == 0) return;

  function widgetPosition(targetWidget) {
    return targetWidget.offsetTop - parseInt(targetWidget.getStyle("margin-top"));
  }

  var lastWidget = allWidgets[widgetCount - 1];
  var lastPageOffset = widgetPosition(lastWidget);

  function getPage() {
    return parseInt(viewport.readAttribute("page"));
  }
  function pageCount() {
    return Math.ceil(widgetCount/PER_PAGE);
  }
  
  function boundPage(page) {
    return Math.min(pageCount()-1, Math.max(0, page))
  }
  
  function pageOffset(page) {
    var targetWidget = viewport.down('.catalog-widget', PER_PAGE*page);
    if (!targetWidget) return;

    return -Math.max(0, Math.min(lastPageOffset, widgetPosition(targetWidget)));
  }
  
  function setPage(page) {
    page = parseInt(page);
    if (isNaN(page)) return;
    
    page = boundPage(page);

    widgetList.setStyle({top: pageOffset(page)+"px"})
    viewport.writeAttribute("page", page);
    $$("a[href='#'][selectspage]").invoke('removeClassName', 'selected')
    $$("a[href='#'][selectspage="+page+"]").invoke('addClassName', 'selected')
  }

  (function(){
    var hashMatch = window.location.hash.match(/page-(\d+)/);
    var initialPage = hashMatch ? boundPage(parseInt(hashMatch[1])) : 0;
    setPage(initialPage);
  })();

  $$("a[href='#'][selectspage]").each(function(e) {
    var page = parseInt(e.readAttribute("selectspage"));
    if (isNaN(page)) return;
    e.observe("click", function(e) { 
      setPage(page); 
      Event.stop(e); 
    });
  });

  $$("a[href='#'][alterspage]").each(function(e) {
    var incr = parseInt(e.readAttribute("alterspage"));
    if (isNaN(incr)) return;
    
    e.observe("click", function(e) { 
      setPage(getPage()+incr); 
      Event.stop(e); 
    });
  });

})();