$('.square').each(function(index){
    var num = index;
	$('body').append('<div class="record c'+num+'"></div>');
	$('.c'+num).css('top', $('.s'+num).position().top);
    var onFocusHandler = function(){
        $('.c' + num % $('.record').length).css('background-image', 'url(../img/testimg' + ((num % 3) + 1) + '.gif)');
        $('.c' + num % $('.record').length).animate({
            "left": "+=57px"
        }, "easeInBounce");
    }
    var onBlurHandler = function(){
        $('.c' + num % $('.record').length).animate({
            "left": "-=57px"
        }, "easeInBounce");
    }
    
    $('.s' + index).mouseover(onFocusHandler);
    //$('.s' + index).focus(onFocusHandler);
    $('.s' + index).mouseout(onBlurHandler);
    //$('.s' + index).blur(onBlurHandler);
});
$('.record').css('z-index', -1);
$('.record').css('position', 'absolute');