Draggable and flippable

main.js

// Famo.us Flipper example
var Engine     = require("famous/core/Engine");
var Surface    = require("famous/core/Surface");
var Flipper    = require("famous/views/Flipper");
var Modifier   = require("famous/core/Modifier");
var Draggable  = require('famous/modifiers/Draggable');

var mainContext = Engine.createContext();
mainContext.setPerspective(500);

var mouse_down = false;
var was_move = false;
var flipper = new Flipper();

var draggable = new Draggable({
    snapX: 1, 
    snapY: 1, 
    xRange: [-2000, 2000],
    yRange: [-2000, 2000]
});

var frontSurface = new Surface({
    size : [100, 100],
    content : 'front',
    properties : {
        background : 'red',
        lineHeight : '100px',
        textAlign  : 'center'
    }
});

var backSurface = new Surface({
    size : [100, 100],
    content : 'back',
    properties : {
        background : 'blue',
        color      : 'white',
        lineHeight : '100px',
        textAlign  : 'center'
    }
});

draggable.subscribe(frontSurface);
draggable.subscribe(backSurface);

flipper.setFront(frontSurface);
flipper.setBack(backSurface);

var centerModifier = new Modifier({origin : [.5,.5]});

mainContext.add(centerModifier).add(draggable).add(flipper);

var toggle = false;
frontSurface.on('click', function(){
    if (!was_move) {
        var angle = toggle ? 0 : Math.PI;
        flipper.setAngle(angle, {curve : 'easeOutBounce', duration : 500});
        toggle = !toggle;
    }
    was_move = false;
});
backSurface.on('click', function(){
    if (!was_move) {
        var angle = toggle ? 0 : Math.PI;
        flipper.setAngle(angle, {curve : 'easeOutBounce', duration : 500});
        toggle = !toggle;
    }
    was_move = false;
});
frontSurface.on('mousedown', function(){
    mouse_down = true;
});
backSurface.on('mousedown', function(){
    mouse_down = true;
});

frontSurface.on('mousemove', function(){
    if (mouse_down) {
        was_move = true;
    }
});
backSurface.on('mousemove', function(){
    if (mouse_down) {
        was_move = true;
    }
});

frontSurface.on('mouseup', function(){
    mouse_down = false;
});
backSurface.on('mouseup', function(){
    mouse_down = false;
});
// from https://famo.us/examples/0.2.0/views/flipper/example