var deps = [
    '/Tag/Tag.js', 
    '/Tag/Layout.js',
    '/Skin/Chart.js', 
    '/Skin/Colors.js', 
    '/Skin/Core.js'
];

function onReady(Tag, Layout, Chart, Colors, Core) {

    function alignButton(user) {
        return Core.button({href: '/Me?donateTo=' + user.id, loud: true, text: 'Donate!'});
    }

    function isMember(xs, x) {
        for (var i = 0; i < xs.length; i++) {
            if ( xs[i] === x ) {
                return true;
            }
        }
        return false;
    }

    function fundContents(xs, total, colors) {
        var rows = [Layout.pillow(0, 15)];

        for (var j = 0; j < xs.length; j++) {
            var x = xs[j];
            var pct = Core.h6(Math.round(1000 * x.shares / total) / 10 + '%');


            var cols = Layout.hug([
                Tag.tag('div', {style: {width: '18px', height: '18px', backgroundColor: colors[j % colors.length]}}),
                Layout.pillow(15, 0),
                Tag.tag('div', {style: {width: '55px', height: pct.height}}, [pct]),
                Core.hyperlink({url: 'Charity?id=' + x.cid, text: x.name})
            ]);
            rows.push(cols);
        }
        return Layout.spoon(rows);
    }

    function distributionTable(user) {
        if (user.funds) {
            var rows = [];
            var dist = user.distribution;
            for (var i = 0; i < user.funds.length; i++) {

                var fundId = user.funds[i].labels[0];  // TODO: Anatoly, why is this a list?
                var xs = [];
                var total = 0;

                // filter (nm `elem` dist.labels)
                for (var j = 0; j < dist.length; j++) {
                    if (isMember(dist[j].labels, fundId)) {
                        var d = dist[j];
                        total = total + d.shares;
                        xs.push(d);
                    }
                }

                var colors = Colors.pieColors;

                var row = Layout.spoon([
                    Core.hr({width: 570}),
                    Layout.pillow(0, 20),
                    Tag.tag('div', {style: {width: '100%'}}, [
                        Tag.tag('div', {style: {'float': 'right'}}, [alignButton({id: fundId})]),
                        Core.h4(user.funds[i].name),
                        Layout.hug([
                            Chart.pieSnapshot({distribution: xs, colors: colors}),
                            Layout.pillow(20, 0),
                            fundContents(xs, total, colors)
                        ])
                    ])
                ]);

                rows.push(row);
            }
            return Layout.spoon(rows);
        }
    }

    function profile(as) {
        as = as || {};
        var user = as.user || {};
        var userInfo = Layout.hug([
            Layout.pillow(25, 0), 
            Layout.spoon([
                Core.h3(user.firstName + ' ' + user.lastName),
                Core.h5({
                    color: 'red',
                    text: 'Helps raise $' + Math.round(user.alignedDonated / 100) + ' per month'
                })
            ])
        ]);

        return Layout.spoon([
            Layout.hug([
                Tag.tag('img', {style: {width: '90px', height: '90px'}, src: user.imageUrl, alt: user.firstName + ' ' + user.lastName}),
	        userInfo
            ]),
            Layout.pillow(0, 10),
            distributionTable(user)
        ]);
    }

    function recommendedFunds(as) {

        var width = as.width || 340;

        var listItems = [
            Core.h5({
                color: Colors.greenText,
                text: 'Recommended Funds'
            })
        ];

        for (var i = 0; i < as.funds.length; i += 1) {
            var x = as.funds[i];
            listItems.push( Layout.pillow(0, 10) );
            listItems.push( Core.hr({width: width - 4, marginLeft: -15}) );
            listItems.push( Layout.pillow(0, 10) );

            var e = Layout.hug([
                Tag.tag('img', {src: x.imageUrl, style: {width: '50px', height: '50px'}}),
                Layout.pillow(20, 0),
                Core.hyperlink({url: '/Charity?id=' + x.cid, text: x.name})
            ]);

            listItems.push(e);
        }

        return Core.box({
            width: width,
            contents: Layout.spoon(listItems)
        });
    }

    Yoink.define({
        profile: profile,
        recommendedFunds: recommendedFunds,
        alignButton: alignButton
    });
}

Yoink.require(deps, onReady);


@@ -1408,18 +1408,16 @@
 var fund
-Id
  = user.
@@ -1428,58 +1428,9 @@
 s%5Bi%5D
-.labels%5B0%5D;  // TODO: Anatoly, why is this a list?
+;
 %0A   
@@ -1646,18 +1646,22 @@
 ls, fund
-Id
+.label
 )) %7B%0A   
@@ -2156,10 +2156,14 @@
 fund
-Id
+.label
 %7D)%5D)
@@ -2196,29 +2196,20 @@
 Core.h4(
-user.funds%5Bi%5D
+fund
 .name),%0A

fix for anatoly's last commit