plan B

UserPanel.js

/* globals define */
define(function (require, exports, module) {
    'use strict';

    var View = require('famous/core/View');
    var Surface = require('famous/core/Surface');
    var Modifier = require('famous/core/Modifier');
    var Transform = require('famous/core/Transform');
    var TTransform = require('famous/transitions/TransitionableTransform');
    var Easing = require('famous/transitions/Easing');
    var RenderNode = require('famous/core/RenderNode');

    var windowWatcher = require('./../windowWatcher');
    var HeaderFooterLayout = require('famous/views/HeaderFooterLayout');
    var FlexibleLayout = require('famous/views/FlexibleLayout');

    function UserPanel(main) {
        this.main = main;

        HeaderFooterLayout.call(this, {headerSize: 50, footerSize: 0, classes: ['panel']});

        this.socialPanel = new FlexibleLayout({direction: 1, size: [true, undefined]});
        this.content.add(this.socialPanel);
        this.header.add(new Surface({size: [undefined, 50], content: '<h1>Sign in to start eating!</h1>'}));

        this.TwitterSurface = new Surface({content: '<section class="inner"><h2>Twitter</h2></section>', classes: ['option-panel']});
        this.FacebookSurface = new Surface({content: '<section class="inner"><h2>Facebook</h2></section>', classes: ['option-panel']});
        this.EYFSurface = new Surface({content: '<section class="inner"><h2>Eat Your Friends</h2></section>', classes: ['option-panel']});

        this.userSubPanels = [this.TwitterSurface, this.FacebookSurface, this.EYFSurface];
        this.socialPanel.sequenceFrom(this.userSubPanels);

        windowWatcher.onResize(this.sizePanels.bind(this));

        for (var i = 0; i < this.userSubPanels.length; ++i) {
            this.userSubPanels[i].on('deploy', this.sizePanels.bind(this));
        }

    }

    UserPanel.prototype = Object.create(HeaderFooterLayout.prototype);

    UserPanel.prototype.sizePanels = function () {
        var ct, panel;
        for (var i = 0; i < this.userSubPanels.length; ++i) {
            panel = this.userSubPanels[i];
            if (ct = panel._currTarget) {
                var height = ct.parentElement.clientHeight / 3 - 30;
                var inner = ct.querySelector('.inner');
                inner.style.height = height + 'px';
            }
        }
    };

    module.exports = UserPanel;

});