//var tb_parent = $('#toolbar')
var tb_parent = $('<div id="toolbar"></div>').appendTo($(document.documentElement));

tb_parent.w2toolbar({
	name: 'toolbar',
	items: [
		{ type: 'check',  id: 'item1', caption: 'Check', img: 'icon-page', checked: true },
		{ type: 'break',  id: 'break0' },
		{ type: 'menu',   id: 'item2', caption: 'Drop Down', img: 'icon-folder', items: [
			{ text: 'Item 1', icon: 'icon-page' }, 
			{ text: 'Item 2', icon: 'icon-page' }, 
			{ text: 'Item 3', value: 'Item Three', icon: 'icon-page' }
		]},
		{ type: 'break', id: 'break1' },
		{ type: 'radio',  id: 'item3',  group: '1', caption: 'Radio 1', icon: 'fa-star', checked: true },
		{ type: 'radio',  id: 'item4',  group: '1', caption: 'Radio 2', icon: 'fa-star-empty' },
		{ type: 'spacer' },
		{ type: 'button',  id: 'item5',  caption: 'Item 5', icon: 'fa-home' }
	],
    onClick: function(event) {
        console.log(event.target);
    }
});

var data = [4, 8, 15, 16, 23, 42];

d3.select("#debugging_view")
  .html("Hello World!");

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);
    
d3.select("#debugging_view")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .style("background-color", "steelblue")
    .style("padding", "3px")
    .style("margin", "1px")
    .text(function(d) { return d; });