$(document).ready(function () {
    var numOfBlocks = 4; // 0 to 9 max 10
    function hideBlock(index) {
        $('#blkdetail' + index).animate({
            opacity: '0',
            marginRight: '-100%'
        }, 500);
    };

    function stopAll() {
        for (var i = 0; i < numOfBlocks; i++) {
            $('#blkdetail' + i + ', #block' + i).stop(true, false);
        };
    };

    function getIndex(str) {
        return str.substring(str.length - 1, str.length);
    };

    // initially hide all
    for (var i = 0; i < numOfBlocks; i++) {
        hideBlock(i);
    };

    $('.blockitem').hover(function () { //mouse enter
        var index = getIndex(this.id);
        //stopAll();
        $('#block' + index).animate({ backgroundColor: '#54A9DF' }, 500);
        $('#blkdetail' + index).animate({
            opacity: '1',
            marginRight: '0%'
        }, 500);
    }, (function () {  // mouse leave
        var index = getIndex(this.id);
        stopAll();
        $('#block' + index).animate({ backgroundColor: '#0072bb' }, 500);
        hideBlock(index);
    }));

    $('.allblocks').mouseleave(function () { //mouse leave 
        stopAll();
        for (var i = 0; i < numOfBlocks; i++) {
            hideBlock(i);
            $('#block' + i).animate({ backgroundColor: '#0072bb' }, 500);
        };
    });

});