Events manager with jQuery

Events manager in jQuery by Sébastien Chopin. Each clic on a new event of the same catagory will prevent the previous if it was not finished.

by Atinux

HTML

<a href="#" class="link1">✣ Link 1 - 1s</a> <i>(category 1)</i>
<div class="loading1"><div class="load"></div></div>
<a href="#" class="link2">✣ Link 2 - 2s</a> <i>(category 1)</i>
<div class="loading2"><div class="load"></div></div>
<a href="#" class="link3">✣ Link 3 - 1s</a> <i>(category 2)</i>
<div class="loading3"><div class="load"></div></div>
<a href="#" class="link4">✣ Link 4 - 2s</a> <i>(category 2)</i>
<div class="loading4"><div class="load"></div></div>
<div class="result">
    <h1><b>Result :</b></h1>
    <div id="resultCat1">Please click on a link on category 1</div>
    <div id="resultCat2">Please click on a link on category 2</div>
</div>

CSS

body {
    padding: 10px;
    font-family: 'Trebuchet MS', Verdana, sans-serif;
    font-size: 13px;
}
a {
    color: rgb(80,80,80);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
.loading1, .loading2, .loading3, .loading4 {
    width: 350px;
    height: 15px;
    border: 1px rgb(220,220,220) solid;
    margin: 5px 0 10px 0;
}
.load {
    height: 100%;
    width: 1%;
}
.loading1 .load {
    background: -webkit-linear-gradient(rgb(200,240,240), rgb(200,230,230));
    background: linear-gradient(rgb(200,240,240), rgb(200,230,230));
    background: -moz-linear-gradient(rgb(200,240,240), rgb(200,230,230));
}
.loading2 .load {
    background: -webkit-linear-gradient(rgb(240,240,200), rgb(230,230,200));
    background: linear-gradient(rgb(240,240,200), rgb(230,230,200));
    background: -moz-linear-gradient(rgb(240,240,200), rgb(230,230,200)); 
}
.loading3 .load {
    background: -webkit-linear-gradient(rgb(200,240,200), rgb(200,230,200));
    background: linear-gradient(rgb(200,240,200), rgb(200,230,200));
    background: -moz-linear-gradient(rgb(200,240,200), rgb(200,230,200));  
}
.loading4 .load {
    background: -webkit-linear-gradient(rgb(240,200,200), rgb(230,200,200));
    background: linear-gradient(rgb(240,200,200), rgb(240,200,200));
    background: -moz-linear-gradient(rgb(240,200,200), rgb(240,200,200));  
}
.result {
    background-color:rgb(245,245,250);
    width: 330px;
    border-radius: 5px;
    padding:10px;
    border: 1px rgb(210,210,220) solid;
}
#result {
    color: rgb(80,80,80);
}

i {
    color: rgb(150,150,150);
}

JavaScript

var eventManager = {
    events: {},
    init: function (e, cat) {
        if (cat) {
            e.eventCategory = cat;
            this.events[cat] = e.timeStamp;
        }
    },
    verif: function (e, callback) {
        if (e.eventCategory && e.timeStamp === this.events[e.eventCategory]) {
            callback();
        }
        else if (!e.eventCategory) {
            callback();
        }
    }
};

$('a.link1').click(function (e) {
    $('#resultCat1').text('Waiting...');
    eventManager.init(e, 'category1');
    $('.loading1 .load').css('width', '1%').stop().animate({ 'width':'100%' }, 1000);
    setTimeout(function () {
        eventManager.verif(e, function () {
            $('#resultCat1').text('Link 1 charged !');
        });
    }, 1000);
});

$('a.link2').click(function (e) {
    $('#resultCat1').text('Waiting...');
    eventManager.init(e, 'category1');
    $('.loading2 .load').css('width', '1%').stop().animate({ 'width':'100%' }, 2000);
    setTimeout(function () {
        eventManager.verif(e, function () {
            $('#resultCat1').text('Link 2 charged !');
        });
    }, 2000);
});

$('a.link3').click(function (e) {
    $('#resultCat2').text('Waiting...');
    eventManager.init(e, 'category2');
    $('.loading3 .load').css('width', '1%').stop().animate({ 'width':'100%' }, 1000);
    setTimeout(function () {
        eventManager.verif(e, function () {
            $('#resultCat2').text('Link 3 charged !');
        });
    }, 1000);
});
$('a.link4').click(function (e) {
    $('#resultCat2').text('Waiting...');
    eventManager.init(e, 'category2');
    $('.loading4 .load').css('width', '1%').stop().animate({ 'width':'100%' }, 2000);
    setTimeout(function () {
        eventManager.verif(e, function () {
            $('#resultCat2').text('Link 4 charged !');
        });
    }, 2000);
});