/**
 * 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'));
};

/**
 * 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'));
};

/**
 * This is the callback function which receives notification
 * right after initialisation of the carousel
 */
function mycarousel_initCallback(carousel, state) {
    if (state == 'init')
        display('Carousel initialised');
    else if (state == 'reset')
        display('Carousel reseted');
	
	var images = $('.slideshow-item-image img');
	images.each(function(i) {
		var img = $(this);
		//item_current.effect("size", { to: {width: 135,height: 202} }, 200);
		img.Reflection({height : 0.5, opacity : 0.3});
		carouselResizeToWidth(img,100,1);
	});
	
};

function carouselResizeToWidth(i,width,carouselPos) {
	var itemWidth = 166;
	var itemHeight = 234;
	var imageWidth_big = 158;
	var imageWidth_mid = 120;
	var imageWidth_small = 80;	
	var textSize_big = 14;
	
	var inner = $('#slideshow-item-inner-'+i);
	var img = $('#slideshow-item-inner-'+i+" img");
	var reflection = $('#slideshow-item-inner-'+i+" canvas");
	var texts = $('#slideshow-item-inner-'+i+" .texts");
	
	var ratio = width/img.width();
	var height = Math.round(img.height()*ratio); 
	//obj.effect("size", { to: {width: width,height: height} }, 300);
	//alert(obj.width());
	//obj.width(width);
	//obj.height(height);
	var marginLeftImg = (itemWidth-width)/2;
	var marginTopImg =  (itemHeight-height)/2;
	var marginTopTexts = (-300);
	
	if (inner.position() != undefined) {
	var innerPosition = inner.position();
	var textsTop = innerPosition.top+height+marginTopImg+13;
	var textsLeft = innerPosition.left;
	var textsFontSize = Math.round(textSize_big*width/imageWidth_big);
	var textsLineHeight = textsFontSize;
	
	$(img).animate({ 
	        width: width+"px",
			height: height+"px",
			marginLeft: marginLeftImg+"px",
			marginTop: marginTopImg+"px"
	      }, 300 );
	
	$(reflection).animate({ 
	        width: width+"px",
			height: height+"px",
			marginLeft: marginLeftImg+"px"
	      }, 300 );
	
	if (carouselPos!=1) {
		$(texts).hide();
	} else {
		$(texts).show();
		$(texts).animate({ 
				//marginTop: marginTopTexts+"px",
				top: textsTop+"px",
				left: textsLeft+"px",
				fontSize: textsFontSize+"px",
				lineHeight: textsLineHeight+"px"
		      },300 );
		}
	}
}

/**
 * This is the callback function which receives notification
 * right after reloading of the carousel
 */
function mycarousel_reloadCallback(carousel) {
    //display('Carousel reloaded');
};



/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemFirstInCallback(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now the first item');
};

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

/**
 * This is the callback function which receives notification
 * when an item becomes the first one in the visible range.
 */
function mycarousel_itemLastInCallback(carousel, item, idx, state) {
    //display('Item #' + idx + ' is now the last item');
};

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

/**
 * 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')
        return;

    //jQuery('img', item).fadeIn('slow');
};

/**
 * 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');
};

/**
 * 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) {
    //jQuery('img', item).fadeOut('slow');
};

/**
 * 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');
};

/**
 * Helper function for printing out debug messages.
 * Not needed for jCarousel.
 */
var row = 1;
function display(s) {
	
    // Log to Firebug (getfirebug.com) if available
    //if (window.console != undefined && typeof window.console.log == 'function')
      //  console.log(s);

/**/
    if (row >= 1000)
        var r = row;
    else if (row >= 100)
        var r = ' ' + row;
    else if (row >= 10)
        var r = '  ' + row;
    else
        var r = '   ' + row;

    jQuery('#display').html(jQuery('#display').html() + r + ': ' + s + '<br />').get(0).scrollTop += 10000;

    row++;

};

jQuery(document).ready(function() {
	

	//$('.region-home').height($('#regions-home').height());
	
	$('#slideshow-homepage').show();
    jQuery('#mycarousel').jcarousel({
        scroll: 1,

        initCallback:   mycarousel_initCallback,
        reloadCallback: mycarousel_reloadCallback,

        buttonNextCallback:   mycarousel_buttonNextCallback,
        buttonPrevCallback:   mycarousel_buttonPrevCallback,

        itemFirstInCallback:  mycarousel_itemFirstInCallback,
        itemFirstOutCallback: mycarousel_itemFirstOutCallback,
        itemLastInCallback:   mycarousel_itemLastInCallback,
        itemLastOutCallback:  mycarousel_itemLastOutCallback,
        itemVisibleInCallback: {
            onBeforeAnimation: mycarousel_itemVisibleInCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleInCallbackAfterAnimation
        },
        itemVisibleOutCallback: {
            onBeforeAnimation: mycarousel_itemVisibleOutCallbackBeforeAnimation,
            onAfterAnimation:  mycarousel_itemVisibleOutCallbackAfterAnimation
        }
    });
	
});