jquery - ボタンクリック時の画像maphilight

Question

良い一日！

ライブ: http://jsfiddle.net/dRz9U/162/

ポイントは、（敷地内の間取り図に）イメージがあり、各部屋には2つの状態（占有/空き）があります。マップ エリアごとに切り取られた画像。各エリアには独自のボタン (取得/リリース) があります。使用エリアは、赤信号 (ビジー) または緑 (フリー) に設定する必要があります。画像の領域を強調表示できる jQuery プラグイン maphilight が見つかりましたが、うまく機能しません。JavaScript は以前はなじみがありませんでした。

$(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;
}); 
});

以下を修正するのを手伝ってください：

1) 明るい領域は、対応するボタンを押したときにのみ機能します。領域自体をクリックしたときにバックライトを削除する方法は?

2) エリアに移動すると、その境界線だけが照らされます

また、値領域 (占有/空き) をデータベースに保持することも考えてください。つまり、ボタンをクリックすると、データベースの値が変更され、ページが占有されている部屋が最初に赤で強調表示され、無料の部屋が緑で強調表示されます。エリアごとに指定された属性 kakoynibud free/busy が必要であることを理解した上で、ラベルとフィールド id の部屋とフィールドの状態の部屋を作成します。既存のソリューションを使用して、それを実装する方法を正確に理解できません。

正しい解決策を見つけるのを手伝ってください！