function sliderContent_initCallback(carousel) {

    jQuery('#sliderContent .jcarousel-control a').bind('click', function () {
        var targetScroll = jQuery(this).text();
        carousel.scroll(jQuery.jcarousel.intval(targetScroll));
        jQuery('#sliderContent .jcarousel-control .control-width').removeClass("btn-active").addClass("btn-inactive");

        jQuery(this).find(".control-width").removeClass("btn-inactive").addClass("btn-active");

        return false;
    });
};
function sliderContent_itemVisibleInCallback_Before(carousel, item, i, state, evt)
{
    var idx = carousel.index(i, carousel.options.size);
	var idx1 = carousel.index(i+1, carousel.options.size);
    //alert(idx);
	
	var idN = carousel.index(i+2, carousel.options.size);
	var idP = carousel.index(i+3, carousel.options.size);
	//alert(idN+"|"+idP);
	
	if (state == 'init' || state == 'next'){
		//-------------------------- change red botton --------------------------//
		jQuery('#sliderContent .jcarousel-control .control-width').removeClass("btn-active").addClass("btn-inactive");
		$("#bullet"+idN).removeClass("btn-inactive").addClass("btn-active");
		//-------------------------- change red botton --------------------------//
	}else{
		//-------------------------- change red botton --------------------------//
		jQuery('#sliderContent .jcarousel-control .control-width').removeClass("btn-active").addClass("btn-inactive");
		$("#bullet"+idP).removeClass("btn-inactive").addClass("btn-active");
		//-------------------------- change red botton --------------------------//
	}
	
};
function sliderContent_itemVisibleInCallback_After(carousel, item, i, state, evt) {
    var idx = carousel.index(i, carousel.options.size);
	var idx1 = carousel.index(i+2, carousel.options.size);
    //$("#img"+idx).fadeIn(1000);
	
    if (state == "next")
    {
        $(".img"+idx).animate({
			width: '380px', /* Set new width */
			height: '285px', /* Set new height */
		}, 500); /* this value of "200" is the speed of how fast/slow this hover animates */ 
    }
    else if (state == "prev")
    {
        $(".img"+idx).animate({
			width: '760px', /* Set new width */
			height: '570px', /* Set new height */
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */  
    }
};

function sliderContent_itemVisibleOutCallback_Before(carousel, item, i, state, evt) {
    var idx = carousel.index(i, carousel.options.size);
    //$("#img"+idx).fadeIn(1000);
    if (state == "next")
    {
	    $(".img"+idx).animate({
			width: '380px', /* Set new width */
			height: '285px', /* Set new height */
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
    }
    else if (state == "prev")
    {
        $(".img"+idx).animate({
			width: '380px', /* Set new width */
			height: '285px', /* Set new height */
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
        
    }

};
function sliderContent_itemVisibleOutCallback_After(carousel, item, i, state, evt) {
    var idx = carousel.index(i, carousel.options.size);
    //$("#img"+idx).fadeIn(1000);
    if(state == "prev")
    {	
        $(".img"+idx).animate({
			width: '760px', /* Set new width */
			height: '570px', /* Set new height */
		}, 200); /* this value of "200" is the speed of how fast/slow this hover animates */
        
    }
};

function sliderContent_itemFirstInCallback_Before(carousel, item, i, state, evt) {
    var idx = carousel.index(i, carousel.options.size);
	var idx1 = carousel.index(i+1, carousel.options.size);
	//alert(idx1);
	$(".img"+idx1).attr("src","img/lead-"+idx1+"-sm.png");
	$(".img"+idx1).css("position","absolute");
	
	$(".img"+idx1).animate({
		width: '380px', /* Set new width */
		height: '285px', /* Set new height */
		top: '142px'
	}, 950); /* this value of "200" is the speed of how fast/slow this hover animates */

	$(".img"+idx).attr("src","img/lead-"+idx+"-ov.png");
	$(".img"+idx).css("position","absolute");
	
	$(".img"+idx).animate({
		width: '760px', /* Set new width */
		height: '570px', /* Set new height */
		top: '0px'
	}, 950); /* this value of "200" is the speed of how fast/slow this hover animates */
	
	$('#sliderContent .jcarousel-control .control-width').removeClass("btn-active").addClass("btn-inactive");
	$("#bullet"+idx).removeClass("btn-inactive").addClass("btn-active");

};

function sliderContent_itemFirstOutCallback_Before(carousel, item, i, state, evt) {
    var idx = carousel.index(i, carousel.options.size);
	var idx1 = carousel.index(i+1, carousel.options.size);
	//alert(idx);
	$(".img"+idx).attr("src","img/lead-"+idx+"-sm.png");
	$(".img"+idx).css("position","absolute");
	
	$(".img"+idx).animate({
		width: '380px', /* Set new width */
		height: '285px', /* Set new height */
		top: '142px'
	}, 1000); /* this value of "200" is the speed of how fast/slow this hover animates */
//
//	$(".img"+idx).attr("src","img/lead-"+idx+"-ov.png");
//	$(".img"+idx).css("position","absolute");
//	
//	$(".img"+idx).animate({
//		width: '760px', /* Set new width */
//		height: '570px', /* Set new height */
//		top: '0px'
//	}, 1000); /* this value of "200" is the speed of how fast/slow this hover animates */
//	
//	$('#sliderContent .jcarousel-control .control-width').removeClass("btn-active").addClass("btn-inactive");
//	$("#bullet"+idx).removeClass("btn-inactive").addClass("btn-active");

};

    
jQuery(document).ready(function () {
    jQuery('#sliderContent').jcarousel({
        initCallback: sliderContent_initCallback,
        auto: 5,
        animation: 900,
        scroll: 1,
        wrap: "circular",
        itemFirstInCallback: {
            onBeforeAnimation: sliderContent_itemFirstInCallback_Before
        },
		itemFirstOutCallback:{
			onBeforeAnimation: sliderContent_itemFirstOutCallback_Before
		}

    });
});