$(document).ready(function(){
  $('span.paginate_block').hover(function(){
    $(this).addClass('hover');
  }, 
  function(){
    $(this).removeClass('hover');
  });
  jQuery("div.dropshadow").wrap("<div class='shT'><div class='shTL'><div class='shTR'><div class='shB'><div class='shBL'><div class='shBR'><div class='shL'><div class='shR'>" +
     "</div></div></div></div></div></div></div></div>");
     
  var prevT = '';
    var t = 0;
    var j = 0;
    $("span.paginator").show();
    $("span.paginator a").each(
      function(i) {
        var t = $(this).parent('span.paginator').attr('id').replace(/paginator-/, '');
        if (t != prevT) j=0;
        $(this).attr('rel', j);
        $(this).bind('click', function () {
          var t = $(this).parent('span.paginator').attr('id').replace(/paginator-/, '');
          if($("div.viewport").find("div.calendaritem").length > 3) {
            goto_page(t, $(this).attr('rel'));
          }
        } );
        if (j == 0) {
          $(this).addClass('active');
        }
        j = j + 1;
        prevT = t;
      }
    );

  
  
});

function goto_page(block, i) {
  var itemheight = 58;
  
  $("span#paginator-" + block + " a").each(
    function (j) {
      $(this).removeClass('active');
      if (j == i) $(this).addClass('active');
    }
  );
  
  // calculating new offset.
  // page 0 = show element 0 on top, aka; top = 0;
  // page 1 = show elements 3, 4, 5. however; if theres only 0 1 2 3 4 show 2 3 4!!
  var vph = itemheight * $("div.viewport").find("div.calendaritem").length; // viewportheight
  var compensate = 4; // is this fixed or related to the nr of elements ?!
  
  var top = i * itemheight * 3 ; // page 2 : i=1 ; top = 231
  if (top > vph-(itemheight*3) ) {// vph : 385
    top = vph-(itemheight*3);
  }
  top = top * -1;
  $("div.viewport").animate({ top: top+"px"});
}