jQuery Maphilight. Toggle alwaysOn before highlighting new one

Question

Toggling off selected areas when hovering on new areas or selecting a new area.

I am using jQuery Maphilight to hilight selected areas on a map. I have successfully added a click state, so the area of the map remains hilighted when a user clicks it. But when they click a second and third area, the 1st area remains highlited which I don't want.

How can I toggle this alwaysOn attribute for all elements to turn off. I can't seem to figure it out.

Thanks.

.bind('click.maphilight', function(e) {     
    e.preventDefault();
    var data = $(this).mouseout().data('maphilight') || {};
    data.alwaysOn = !data.alwaysOn;
    $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
})

Answer 1

Found a solution that may work for me:

.bind('click.maphilight', function(e) {     
                    $(this).data('maphilight', { 
                          alwaysOn: true 
                    }).trigger('alwaysOn.maphilight');
                    //check if area wasnt already selected - otherwise gets buggy
                    if( !$(this).hasClass('selected') ){ 
                      $('.selected').data('maphilight', {
                          alwaysOn: false
                      }).trigger('alwaysOn.maphilight');
                      $('#map-tag area').removeClass('selected');
                      $(this).addClass('selected');
                    }
                })