JQuery: the correct way to bind (); and unbind (); using mouse, mouse and click

I am making an interactive map with jQuery and have some problems that I cannot solve.

• Basically, when I click on the black square, I want it to turn red immediately, now it works the other way around (it turns red from the second click). Is there any way to cancel the function fadeToggle (); ? But I still want to keep the fading animation in mouseover and mouseout .

• The second problem is that after clicking on the black square "one" or clicking on the "link links" on the left, it turns red, but does not remain red when I hover over it. (I want to somehow cancel the mouseover and mouseout events after clicking the square). And it just disappears to 0 when I click on it again.

Demo: http://jsfiddle.net/antondesign/8JHCe/

jQuery script

$('ul.list li a').click(function(e) {
    e.preventDefault();
    var productTitle = $(this).attr("title");
        $('.p-'+ productTitle).siblings().hide();
        $('.p-'+ productTitle).stop(true, true).animate({ opacity: "show" }, "slow");
        $('.p-'+ productTitle).unbind('mouseover mouseout');     
    });

// Check if map exists
if($('#map')) {

    // Loop through each AREA in the imagemap
    $('#map area').each(function() {
        var productIcon = $(this).attr('id').replace('area-', '');   

        // Assigning an action to the click event
        $(this).click(function(e){  
            e.preventDefault();              
            $('#'+productIcon).stop(true, true).fadeToggle('slow', function(e){
            $(this).unbind('mouseover').unbind('mouseout');
            });
        });            

    // Assigning an action to the mouseover event
        $(this).bind("mouseover", function(e) {
            $('#'+productIcon).stop(true, true).fadeTo(500, 1);
            e.preventDefault();
         });

    // Assigning an action to the mouseout event
        $(this).bind("mouseout", function(e) {
            $('#'+productIcon).stop(true, true).fadeOut(500, 0);
            e.preventDefault();
        });

   });

}