var mySlide;
$("document").ready(function(){
	$("#slide_content img").removeAttr("width").removeAttr("height");
	mySlide = $("ul#flip").jcoverflip({
		current: 1,
		beforeCss: fnBeforeCSS,
		afterCss: fnAfterCSS,
		currentCss: fnCurrentCSS
	});
	$("#slide_left").click(function(){
		mySlide.jcoverflip("previous");
	});
	$("#slide_right").click(function(){
		mySlide.jcoverflip("next");
	});
});

function fnBeforeCSS(el, container, offset){
	if(offset>0){
		return [
		        $.jcoverflip.animationElement( el, { opacity: 0, zIndex: 0, left: ( container.width( )/2 - 270)+'px', bottom: '60px' }, { } ),
		        $.jcoverflip.animationElement( el.find( 'img' ), { width: '145px' }, {} )
		        ]
	}
	else{
		return [
		        $.jcoverflip.animationElement( el, { opacity: 0.5, zIndex: 5, left: ( container.width( )/2 - 270)+'px', bottom: '60px' }, { } ),
		        $.jcoverflip.animationElement( el.find( 'img' ), { width: '145px' }, {} )
		        ];
	}
}

function fnAfterCSS(el, container, offset){
	if(offset>0){
		return [
		        $.jcoverflip.animationElement( el, { opacity: 0, zIndex: 0, left: ( container.width( )/2 +125 )+'px', bottom: '60px' }, { } ),
		        $.jcoverflip.animationElement( el.find( 'img' ), { width: '145px' }, {} )
		        ]
	}
	else{
		return [
		        $.jcoverflip.animationElement( el, { opacity: 0.5, zIndex: 5, left: ( container.width( )/2 +125 )+'px', bottom: '60px' }, { } ),
		        $.jcoverflip.animationElement( el.find( 'img' ), { width: '145px' }, {} )
		        ];
	}
}

function fnCurrentCSS(el, container){
    return [
            $.jcoverflip.animationElement( el, { zIndex: 10, opacity: 1, left: ( container.width( )/2 - 145 )+'px', bottom: '16px' }, { } ),
            $.jcoverflip.animationElement( el.find( 'img' ), { width: '290px' }, { } )
          ];	
}