jQuery(document).ready(function() {

var itemsCount = $("#mycarousel li").length;
//var pagesCount = Math.round(itemsCount / 5);
var pagesCount = Math.ceil(itemsCount / 5);
var currentPage = 1;
var newPage = 1;
var sbhandleHeight;
var startIndex = ((Math.floor(startCarousel/5)*5) + 1);

$("#" + startCarousel + "").addClass("active");

for(i=0; i < 5-(itemsCount%5); i++) {
  $("#mycarousel").append('<li><a href="javascript:;" class="disabled"></a></li>');
}

// setup carousel
$("#mycarousel").jcarousel({
    vertical: true,
    scroll: 5,
    start: startIndex,
    easing: 'linear',
    initCallback: initCallbackFunction,
    itemFirstInCallback: {onAfterAnimation: itemFirstInCallbackFunction},
    buttonNextCallback: buttonNextCallbackFunction,
    buttonPrevCallback: buttonNextCallbackFunction
});

function initCallbackFunction(carousel, state)
{
  sbhandleHeight = Math.floor($("#mycarousel").parent().height() / pagesCount);

  $("#mycarousel li a").click(function () {
    $("#mycarousel li a").each(function (i) { $(this).removeClass("active"); });
    $(this).addClass("active");
  });

  $('#portfolioList .jcarousel-next').bind('click', function() {
    pos = Math.floor((carousel.first + 5) / 5) * sbhandleHeight;
    if(pos > 410-sbhandleHeight) pos = 410 - sbhandleHeight;
    $("#mycarouselscrollbarhandle").animate({top: pos + "px"}, 100);
  });

  $('#portfolioList .jcarousel-prev').bind('click', function() {
    pos = Math.floor((carousel.first - 5) / 5) * sbhandleHeight;
    if(pos < 0) pos = 0;
    $("#mycarouselscrollbarhandle").animate({top: pos + "px"}, 100);
  });

  $("#mycarousel").parent().parent().prepend('<div id="mycarouselpager"></div>');
  $("#mycarousel").parent().parent().prepend('<div id="mycarouselscrollbarhandle"><span></span></div>');

  // timer
  var mytimer = setInterval(function() {
    if(!carousel.animating && (currentPage != newPage)) {
      carousel.scroll(newPage, true);
      currentPage = newPage;
    }
  }, 300);

  // scrollbarhandle
  $("#mycarouselscrollbarhandle").height(sbhandleHeight).draggable({
    zIndex: 100,
    axis: 'y',
    containment: 'parent',
    grid: [0, sbhandleHeight],
    drag: function(event, ui) {
      var position = $(this).position();
      newPage = (Math.floor((position.top)/sbhandleHeight) * 5) + 1;
    },
    stop: function(event, ui) {
      var position = $(this).position();
      newPage = (Math.floor((position.top)/sbhandleHeight) * 5) + 1;
    }
  });

}


function itemFirstInCallbackFunction(carousel, htm, index, state)
{
	var refFrom = carousel.first;
	var refTo = (carousel.last > itemsCount) ? itemsCount : carousel.last;
	$("#mycarouselpager").html( refFrom + " - " + refTo + " / " + itemsCount);
}

function buttonNextCallbackFunction(carousel, element, enabled)
{
    pos = Math.floor(carousel.first / 5) * sbhandleHeight;
    $("#mycarouselscrollbarhandle").animate({top: pos + "px"}, 150);

}

});