The first thing I did was to add an id to your buttons, as we need to know which type we want:
<button id="A">Type А</button>
<button id="B">Type B</button>
<button id="C">Type C</button>
Next I find the id of the button clicked:
// get id of button which was clicked
var type = this.id;
Then I create a temporary set to hold the cottages which are of that type:
// create temporary set
var set = canvas.set();
Then in your loop, I find the cottage type that is equal to the clicked type, and add to temporary set
// loop all cottages and find the type we want
c.forEach(function(el){
// put cottages in the temp set
if(el.data("type") == type){
set.push(el);
}
});
And finally animate this temporary set
// animate this set
set.animate({fill: '#55bfe1', opacity: 1}, speed_anim_in);
I have a fiddle for you - http://jsfiddle.net/5BYK6/1/
EDIT
Ok I have added the following:
// fade any previous set
if(prevSet) {
prevSet.animate({opacity: 0}, speed_anim_out);
}
// store current set to remove later
prevSet = set;
Basically we store the previous set we created, and check if there is one that exists in prevSet, we animate to opacity: 0, using your speed_anim_out variable.
See updated fiddle for this http://jsfiddle.net/5BYK6/2/