/* monkey-patch to fix a skipping problem when moving backwards through the carousel */
$.jcarousel.fn.extend({
  add: function(i, s) {
    var e = this.get(i), old = 0, add = 0;
    if (e.length == 0) {
      var c, e = this.create(i), j = $.jcarousel.intval(i);
      while (c = this.get(--j)) {
        if (j <= 0 || c.length) {
          j <= 0 ? this.list.prepend(e) : c.after(e);
          break;
        }
      }
    } else
      old = this.dimension(e);
    e.removeClass(this.className('jcarousel-item-placeholder'));
    typeof s == 'string' ? e.html(s) : e.empty().append(s);
    var di = this.options.visible != null ? Math.ceil(this.clipping() / this.options.visible) : null;
    var wh = this.dimension(e, di) - old;
    if (i == this.first) // this is the line I changed
      this.list.css(this.lt, $.jcarousel.intval(this.list.css(this.lt)) - wh + 'px');
    this.list.css(this.wh, $.jcarousel.intval(this.list.css(this.wh)) + wh + 'px');
    return e;
  }
});

var circular_itemList = [];
var main_carousel = null;
var thumb_carousel = null;

var initCallback = function(itemList, c_select, div_select, carousel) {
  $(c_select).children().each(function() {
      itemList.push(this.innerHTML);
  });
  $(c_select).html('');
  $(div_select).show();
}

var itemVisibleInCallback = function(itemList, carousel, item, i, state, evt) {
    var idx = carousel.index(i, itemList.length);
    return carousel.add(i, itemList[idx - 1]);
};

var circular_itemVisibleOutCallback = function(carousel, item, i, state, evt) {
    carousel.remove(i);
};

$(document).ready(function() {
  var c = $('ul#lp_thumbs');
  if (c.size() > 0) {
    c.jcarousel({
      initCallback: function(carousel) {
        thumb_carousel = carousel;
        $('#prev_photo').click(function() {
          carousel.prev();
        });
        $('#next_photo').click(function() {
          carousel.next();
        });
        $('#pager h3.left a').click(function() {
          var i = $(this).attr('id').replace('direct','');
          main_carousel.scroll(i);
          carousel.scroll(i);
        });
      },
      itemFirstInCallback: {
        onAfterAnimation: function(carousel, item, i, state) {
          $('#photo_num').text(i);
        }
      },
      scroll: 4,
      vertical: true,
      buttonNextHTML: null,
      buttonPrevHTML: null,
      wrap: null
    });
    $('ul#lp_thumbs img').click(function() {
      main_carousel.scroll($(this).attr('id').replace('thumb',''));
    });
  }
  var c = $('ul#lp_carousel');
  if (c.size() > 0) {
    c.jcarousel({
      scroll: 1,
      vertical: false,
      initCallback: function(carousel) {
                      main_carousel = carousel;
                      initCallback(circular_itemList, 'ul#lp_carousel', '#slideshow', carousel);
                    },
      wrap: 'circular',
      itemFirstOutCallback: {
        onBeforeAnimation: function(carousel, item, i, state) {
          var idx = carousel.index(i, circular_itemList.length);
	  $('#slide'+idx).parent().animate( { opacity: "0.2" }, 100, null, function(    ) {
	    $('#slide'+idx).parent().removeClass('selected');
	  });
        }
      },
      itemFirstInCallback: {
        onAfterAnimation: function(carousel, item, i, state) {
          $('#photo_caption').text($(item).find('img').attr('alt'));
          var idx = carousel.index(i, circular_itemList.length);
	  $('#slide'+idx).parent().animate( { opacity: "1.0" }, 100, null, function(    ) {
	    $('#slide'+idx).parent().addClass('selected');
	  });
	  if (thumb_carousel != null) {
	    thumb_carousel.scroll((Math.floor((idx-1) / 4) * 4) + 1);
	  }
        }
      },
      itemVisibleInCallback: {
        onBeforeAnimation: function(carousel, item, i, state, evt) {
                             itemVisibleInCallback(circular_itemList, carousel, item, i, state, evt);
                           }
      },
      itemVisibleOutCallback: {onAfterAnimation: circular_itemVisibleOutCallback}
    });
  }
});