// Create SVG root
var container = Pablo(demoElement),
    svg = container.svg({height:120}),

    // Array of IDs
    ids = ['rebbie', 'jackie', 'tito', 'jermaine',
        'la-toya', 'marlon', 'michael', 'randy', 'janet'],

    // 9 <circle>'s
    circles = Pablo.circle().duplicate(8),

    // Text label
      label = svg.text({
        y:100,
        'font-size':'30px',
        'font-family':'sans-serif'
    }),

    // <g> group element
    jacksons = svg.g({id:'jacksons'})
        // Change label on interaction
        .on('mouseover touchstart', function(event){
            label.content(event.target.id);
        })

        // Append children and switch to children context
        .append(circles, {
            id: ids,
            r: 30, cy: 30,
            cx: function(el, i){return 40 * i + 30;},
            fill: function(el){
                return el.id === 'michael' ?
                    'gold' : 'rgba(90,30,30,0.5)';
            }
        }),

    // Child nodes
    children = jacksons.children();

// Change label to '9 jacksons'
label.content(children.length + ' ' + jacksons.attr('id'));

// Set background colour
container.css({'background':'white'});

var svg = Pablo(demoElement).svg({height: 60});

svg.append(Pablo.circle({r: 30, cx: 30, cy: 30}))
    .append(Pablo.circle({foo: 'bar', r: 30, cx: 100, cy: 30}));

setTimeout(function () {
  svg.children('circle[foo=bar]').attr('fill', 'red');
}, 1600);

var svg = Pablo(demoElement).svg({height: 60});

svg.append(Pablo.circle({r: 30, cx: 30, cy: 30}))
    .append(Pablo.circle({foo: 'bar', r: 30, cx: 100, cy: 30}));

setTimeout(function () {
  svg.children(function (item) {
    if (Pablo(item).attr('foo')) {
      return item;
    }
  }).attr('fill', 'red')
}, 1600);