famo.us practice

/*globals define*/
define(function(require, exports, module) {
    'use strict';
    // import dependencies
    var Engine = require('famous/core/Engine');
    var Surface = require('famous/core/Surface');
    var StateModifier = require('famous/modifiers/StateModifier');
    var EventHandler = require('famous/core/EventHandler');
    var Transform = require('famous/core/Transform');
    var Easing = require('famous/transitions/Easing');

    // create the main context
    var mainContext = Engine.createContext();

    // your app here
    var surfaceA;
    var surfaceB;

    var eventHandlerA = new EventHandler();
    var eventHandlerB = new EventHandler();

    eventHandlerB.subscribe(eventHandlerA);

    function createSurfaces() {
      surfaceA = new Surface({
        size: [100, 100],
        content: 'A<br>click me to say hello',
        properties: {
          color: 'white',
          textAlign: 'center',
          backgroundColor: '#FA5C4F'
        }
      });
      surfaceB = new Surface({
        size: [100, 100],
        content: 'B',
        properties: {
          color: 'white',
          textAlign: 'center',
          backgroundColor: '#FA5C4F'
        }
      });
      var modifierB = new StateModifier({
        origin: [1, 1]
        });
      mainContext.add(surfaceA);
      mainContext.add(modifierB).add(surfaceB);
      surfaceA.on('click', function() {
        eventHandlerA.emit('hello');
        surfaceA.setContent('said hello');
      });
      eventHandlerB.on('hello', function() {
        modifierB.setTransform(
          Transform.translate(0, -300, 0),
          { duration : 1000, curve: Easing.inExpo }
          );
        modifierB.setTransform(
            Transform.translate(-850,-400,0),
            { duration : 800, curve: Easing.outElastic },
            function() {
                surfaceB.setContent('heard hello');
                surfaceB.setProperties({
                    height: '450px',
                    width: '600px'
                    });
            }
            );
      });
    }
    createSurfaces();
});