$(function() {

jQuery.fn.centerit = function () {
	this.css("position","absolute");
	this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
	this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
	return this;
}

function centerImages(){
	var imgW = 1010;
	var mainW = $('#slideshow-container').width();
	var margL = 0-(imgW-mainW)/2;
	$('.slideshow').css('marginLeft',margL + 'px');
}

centerImages();

$(window).resize( function() {
	centerImages();
});

function mycarousel_initCallback(carousel) {
	$('.slideshow li img').css({height: '435px', marginTop: '12px', opacity: '.5'});

    $('.snext').bind('click', function() {
        carousel.next();
        return false;
    });

    $('.sprev').bind('click', function() {
        carousel.prev();
        return false;
    });

    // construct nav
    for (var i = 1; i <= carousel.options.size; i++) {
      $('.nav').append('<a href="#">' + i + '</a>');
    }

    $('.nav a').bind('click', function() {
      carousel.scroll($.jcarousel.intval($(this).text()));
      return false;
    });
};


function nonext(s) {
	$('.snext').css('display', '' + s + '');
};

function noprev(s) {
	$('.sprev').css('display', '' + s + '');
};

/**
 * This is the callback function which receives notification
 * about the state of the next button.
 */
function mycarousel_buttonNextCallback(carousel, button, enabled) {
    //display('Next button is now ' + (enabled ? 'enabled' : 'disabled'));
	nonext((enabled ? 'block' : 'none'));
};

/**
 * This is the callback function which receives notification
 * about the state of the prev button.
 */
function mycarousel_buttonPrevCallback(carousel, button, enabled) {
    //display('Prev button is now ' + (enabled ? 'enabled' : 'disabled'));
	noprev((enabled ? 'block' : 'none'));
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleInCallbackBeforeAnimation(carousel, item, idx, state) {
    // No animation on first load of the carousel
    if (state == 'init') {
		$('img', item).css({height: '455px', marginTop: '0px', opacity: '1'});
		$($('img', item).attr('rel')).show();
        return;
	} else {

    $('img', item).animate({
		opacity: 1,
		height: '455px',
		marginTop: '0'
		}, 200, function() {
		//anim complete
	});
	}
};

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleInCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now visible');
	$($('img', item).attr('rel')).fadeIn();
	$('.sprev, .snext').fadeIn();

    if (idx > carousel.options.size) {
      idx = idx % carousel.options.size;
    }

    $('.nav a').removeClass('active').eq(idx-1).addClass('active');
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered before animation.
 */
function mycarousel_itemVisibleOutCallbackBeforeAnimation(carousel, item, idx, state) {
	$('.infobox').hide();
	$('.sprev, .snext').hide();
	$('img', item).animate({
		opacity: 0.5,
		height: '430px',
		marginTop: '12px'
		}, 200, function() {
			//anim complete
	});
};

/**
 * This is the callback function which receives notification
 * when an item is no longer the first one in the visible range.
 * Triggered after animation.
 */
function mycarousel_itemVisibleOutCallbackAfterAnimation(carousel, item, idx, state) {
    //display('Item #' + idx + ' is no longer visible');
};

    $(".slideshow").jcarousel({
		wrap: "circular",
        scroll: 1,
		start: 1,
		auto: 6,
		animation: 1000,
		easing: 'easeInOutQuart',
        initCallback: mycarousel_initCallback,
        buttonNextHTML: null,
        buttonPrevHTML: null,
		buttonNextCallback:   mycarousel_buttonNextCallback,
        buttonPrevCallback:   mycarousel_buttonPrevCallback,
		itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },
        itemVisibleOutCallback: {
            onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
        }
    });


});