var boSliderSetupComplete	=false;
var zoomFactor				=1.25;

jQuery(document).ready(function()
{
	if($('#ProductSlideShow') && document.getElementById('SlideShow'))
	{
		document.getElementById('SlideShow').style.display='block';

		$('#ProductSlideShow').jcarousel({
			wrap: 'circular',
			scroll:1,
			auto: 5,
			animation: 1100,
			setupCallback: SliderSetupComplete,
			itemVisibleInCallback: {
					onBeforeAnimation: SlideShowBeforeAnim,
					onAfterAnimation: SlideShowOriginalSize
				}
		});
	}
});

function SliderSetupComplete(carousel )
{
	growBigger(carousel.get(2));

}



function SlideShowOriginalSize(carousel, liobject,position,state)
{
	/*
	if(state!='init')
	{
		if (state=='next')
		{
			returnToNormal(carousel.get(position-2));
		}
		else
		{
			returnToNormal(carousel.get(position+2));	
		}
	}
	*/
}

function SlideShowBeforeAnim(carousel, liobject,position,state)
{
	if(state!='init')
	{
		if (state=='next')
		{
			returnToNormal(carousel.get(position-2));
			growBigger(carousel.get(position-1));
		}
		else
		{
			returnToNormal(carousel.get(position+2));	
			growBigger(carousel.get(position+1));	
		}
	}

}


function returnToNormal(element) {
	var iNewWidth;
	var iNewHeight;
	var iMarginCorrection;
	var iMargin;

	iNewWidth	=parseInt($(element).find("img").css('width'))/zoomFactor;
	iNewHeight	=parseInt($(element).find("img").css('height'))/zoomFactor;		

	iMarginCorrection=(iNewWidth * zoomFactor - iNewWidth ) /2;

	iMargin=parseInt($(element).find("img").css('margin-left')) + iMarginCorrection;

	//$(element).find("img").css('margin-left', iMargin+"px");
	
	$(element)
		.find("img")
		.animate({height: iNewHeight ,width: iNewWidth} )
		.end()
};

function growBigger(element) {

	var iNewWidth;
	var iNewHeight;
	var iMarginCorrection;
	var iMargin;


	iNewWidth	=parseInt($(element).find("img").css('width')) *zoomFactor;
	iNewHeight	=parseInt($(element).find("img").css('height')) *zoomFactor;

	iMarginCorrection=(iNewWidth - iNewWidth / zoomFactor) /2;
	iMargin=parseInt($(element).find("img").css('margin-left')) - iMarginCorrection;

	//alert($(element).find("img").css('margin-left'));
	//$(element).find("img").css('margin-left', iMargin+"px");
	$(element)
		.find("img")
		.animate({height: iNewHeight,width: iNewWidth } )
		.end();

}