var animationDuration = 200;
var box01ContentStartPos = '184px';
var box02ContentStartPos = '240px';
var box03ContentStartPos = '-152px';
var box04ContentStartPos = '149px';
$(document).ready(function(){
	$('#cycle-boxes').cycle({ 
	    fx:     'scrollHorz', 
	    speed:  'fast', 
	    timeout: 0, 
	    next:   '#next-btn', 
	    prev:   '#prev-btn' 
	});
	/* All boxes */
	$('#home-boxes li div.box-content').css( 'position', 'absolute' );
	$('#home-boxes li').css( 'overflow', 'hidden' );
	$('#home-boxes img.title').css( { 'position' : 'absolute', 'right' : 0, 'top' : 0 } );
	/* Box 01 */
	$('#home-box-01 div.box-content').css( { 'paddingTop' : '56px', 'top' : box01ContentStartPos } );
	$('#home-box-01').hover(
		function () { showSlide( $(this), '37px', '151px' ); }, 
		function () { hideSlide( $(this), box01ContentStartPos, 0 ); }
	);
	/* Box 02 */
	$('#home-box-02 div.box-content').css( { 'paddingTop' : '32px', 'top' : box02ContentStartPos } );
	$('#home-box-02').hover(
		function () { showSlide( $(this), '67px', '8px' ); }, 
		function () { hideSlide( $(this), box02ContentStartPos, 0 ); }
	);	
	/* Box 03 */
	$('#home-box-03 img.title').css( { 'right' : '-8px', 'top' : '150px' } );
	$('#home-box-03 div.box-content').css( { 'paddingTop' : 0, 'top' : box03ContentStartPos } );
	$('#home-box-03').hover(
		function () { showSlide( $(this), 0, '68px' ); }, 
		function () { hideSlide( $(this), box03ContentStartPos, '-8px' ); }
	);
	/* Box 04 */
	$('#home-box-04 div.box-content').css( { 'paddingTop' : '38px', 'top' : box04ContentStartPos } );
	$('#home-box-04').hover(
		function () { showSlide( $(this), '13px', '35px' ); }, 
		function () { hideSlide( $(this), box04ContentStartPos, 0 ); }
	);
});
function showSlide(currentItem, topVal, rightVal) {
	currentItem.find('div.box-content').animate({ top: topVal }, { queue:false, duration:animationDuration });
	currentItem.find('img.title').animate({ right: rightVal }, { queue:false, duration:animationDuration });
}
function hideSlide(currentItem, topVal, rightVal) {
	currentItem.find('div.box-content').animate({ top: topVal }, { queue:false, duration:animationDuration });
	currentItem.find('img.title').animate({ right: rightVal }, { queue:false, duration:animationDuration });
}