$(function(){

	var flip = jQuery( '#flip' ).jcoverflip({
		current: 1,
		time: 800,
		beforeCss: function( el, container, offset ){
		    zIndexAnimate(el, this.time, 20);
		    var width = 0;
		    var left = "-2px";
		    var bottom = "173px";
		    if (offset == 0) { // if visible
			width = '370px';
			left = "0px";
			bottom = "68px";
		    }

		    return [
			    $.jcoverflip.animationElement( el, { left: left, bottom: bottom }, { } ),
			    $.jcoverflip.animationElement( el.find( 'img' ), { width: width,'opacity': 0.3  }, {} )
			    ];
		},
		afterCss: function( el, container, offset ){
		    zIndexAnimate(el, this.time, 20);
		    var width = 0;
		    var left = "960px";
		    var bottom = "173px";
		    if (offset == 0) { // if visible
			width = '370px';
			left = "588px";
			bottom = "68px";
		    }
		    return [
			    $.jcoverflip.animationElement( el, { left: left, bottom: bottom }, { } ),
			    $.jcoverflip.animationElement( el.find( 'img' ), { width: width,'opacity': 0.3  }, {} )
			    ];
		},
		currentCss: function( el, container ){
		    zIndexAnimate(el, this.time, 30);
		    return [
			    $.jcoverflip.animationElement( el, { left: '175px', bottom: 0 }, { } ),
			    $.jcoverflip.animationElement( el.find( 'img' ), { width: '608px','opacity': 1  }, { } )
			    ];
		}
	    });
	$('#intro-next').click(function () {
		jQuery( '#flip' ).jcoverflip('next');
		return false;
	    });
	$('#intro-prev').click(function () {
		jQuery( '#flip' ).jcoverflip('previous');
		return false;
	    });
	setInterval("jQuery( '#flip' ).jcoverflip('next')", 5000);
    });

function zIndexAnimate (el, time, value) {
    $({z: ~~el.css('zIndex')
		}).animate({
			z: value
			    }, {
			step: function() {
			    el.css('zIndex', ~~this.z);
			},
			    duration: time
			    });
};