$(function(){  
    $("#pageflip").hover(function() { //On hover...            
        $("#pageflip img , .msg_block").stop()
            .animate({ //Animate and expand the image and the msg_block (Width + height)
                width: '307px',
                height: '319px'
            }, 500);
        } , function() {
        $("#pageflip img").stop() //On hover out, go back to original size 50x52
            .animate({
                width: '50px',
                height: '52px'
            }, 220);
        $(".msg_block").stop() //On hover out, go back to original size 50x50
            .animate({
                width: '50px',
                height: '50px'
            }, 200); //Note this one retracts a bit faster (to prevent glitching in IE)
        flipUp();
    });
    flipDown();
});

function flipDown() {    
    $(window).oneTime(1, function(i) {                                                                                     
        $("#pageflip img").stop()
        .animate({ 
            width: '80px',
            height: '84px'
        }, 500, 'swing', function() {
                    
        });
        $(".msg_block").stop()
        .animate({ 
            width: '80px',
            height: '80px'
        }, 500, 'swing', function() {
            flipUp();
        });
    });    
}

function flipUp() {    
    $(window).oneTime(1, function(i) {                                                                                     
        $("#pageflip img").stop()
        .animate({ 
            width: '70px',
            height: '73px'
        }, 500, 'swing', function() {
        
        });
        
        $(".msg_block").stop()
        .animate({ 
            width: '70px',
            height: '70px'
        }, 500, 'swing', function() {
            flipDown();
        });
    });    
}