/*_____________Event Handling_______________*/

canvas.on('object:selected', function(event) {
     changeSelectedObjectColorOpacity(event.target);
});
canvas.on('mouse:over', function(event) {
     changeSelectedObjectColorOpacity(event.target);
});
canvas.on('mouse:out', function(event) {
     revertObjectColorOpacity(event.target);
});
canvas.on('selection:cleared', function(event) {
     revertObjectColorOpacity(event.target);
});

/*_________Change Color function_____________*/

var selected_fill_color     = 'grey';
var selected_object_opacity = 0.5;

function changeSelectedObjectColorOpacity(object) {
    if (object == null) { return;}
  original_fill_color = object.fill;
  original_opacity    = object.opacity;

object.set({fill: selected_fill_color, opacity: selected_object_opacity});
canvas.renderAll();
}

function revertObjectColorOpacity(object) {
    if (object == null) { return;}
    object.set({fill: original_fill_color, opacity: original_opacity});
  canvas.renderAll();
}

var canvas = new fabric.Canvas('c');
var selectedObjs = [];
var mouseIn = null;
/*_____________Adding shapes_______________*/

var pol = new fabric.Polygon([
  { x: 100, y: 0 },
  { x: 150, y: 50 },
  { x: 150, y: 100 },
  { x: 50, y: 100 },
  { x: 50, y: 50 }], {
      left: 50,
      top: 150,
      angle: 0,
      fill: 'green'
  }
);

var pol2 = new fabric.Polygon([
  { x: 300, y: 50 },
  { x: 300, y: 100 },
  { x: 200, y: 100 },
  { x: 200, y: 50 }], {
      left: 300,
      top: 200,
      angle: 0,
      fill: 'blue'
  }
);
canvas.add(pol, pol2);

/*_____________Event Handling_______________*/

canvas.on('object:selected', function (event) {
    selectedObjs = [];
    if (event.target._objects !== undefined) {
        selectedObjs = event.target._objects;
    } else {
        selectedObjs.push(event.target);
    }
    for (i = 0; i < selectedObjs.length; i++) {
        if (selectedObjs[i] != mouseIn) {
            changeSelectedObjectColorOpacity(event.target);
        }
    }
});

canvas.on('mouse:over', function (event) {
    mouseIn = event.target;
    var alreadySelected = false;
    for (i = 0; i < selectedObjs.length; i++) {
        if (event.target == selectedObjs[i]) {
            alreadySelected = true;
        }
    }

    if (!alreadySelected) {
        changeSelectedObjectColorOpacity(event.target);
    }
});

canvas.on('mouse:out', function (event) {
    var alreadySelected = false;
    for (i = 0; i < selectedObjs.length; i++) {
        if (event.target == selectedObjs[i]) {
            alreadySelected = true;
        }
    }
    if (!alreadySelected) {
        revertObjectColorOpacity(event.target);
    }
    mouseIn = null;
});

canvas.on('selection:cleared', function (event) {
    console.log('clear');
    selectedObjs = [];
    revertObjectColorOpacity(event.target);
});

/*_________Change Color function_____________*/

var selected_fill_color = 'grey';
var selected_object_opacity = 0.5;

function changeSelectedObjectColorOpacity(object) {
    if (object == null) { return; }
    original_fill_color = object.fill;
    original_opacity = object.opacity;
    object.set('fill', selected_fill_color);
    object.set('opacity', selected_object_opacity);
    canvas.renderAll();
}

function revertObjectColorOpacity(object) {
    if (object == null) { return; }
    object.set('fill', original_fill_color);
    object.set('opacity', original_opacity);
    canvas.renderAll();
}