Images maphilight on button click

Question

Good day!

Live: http://jsfiddle.net/dRz9U/162/

The point is: there is an image (on the floor plan of the premises), each room has two states (occupied / free). Image cut into the area by map area, each area has its own button (to take / release). Use areas should be set red light (busy) or green (free). Found a jQuery plugin maphilight, which allows to highlight areas of the image, but it does not work very well. With the javascript was not previously familiar.

$(function() {
$(".areas").buttonset();
});

$(function() {
$('.map').maphilight();
$('#1room, #2room, #3room, #4room, #5room, #6room, #7room').click(function(e) {
    e.preventDefault();
    var $this = $(this);
    var data = $this.mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $this.data('maphilight', data).trigger('alwaysOn.maphilight');
});
});

$(function() {
var $area = $('area');
$area.click(function(){
    var $checkbox = $('#' + $(this).data("areanum"));
    $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
});
$('label').click(function () {
    $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');
    return false;
}); 
});

Please help me to correct the following:

1) Light areas should only work when you press the corresponding button. How to remove the backlight when you click on the region itself?

2) when you move to the area should be illuminated only by its border

Also have an idea to keep the value areas (occupied / free) to the database. Ie when you click on the button changes the value in the database and reload the page occupied rooms originally highlighted in red, and the free - green. I understand that it needs for each area specified attribute kakoynibud free / busy, then create a label and fields id room and field state rooms. I can not figure out exactly how to implement it, using the already existing solutions.

Please help me find the right solution!