mw.loader.using('oojs-ui').done(function () {
	function MyPage () {
		var fieldsetLayout, dropdownWidget;
		MyPage.parent.apply(this, arguments);
		dropdownWidget = new OO.ui.DropdownWidget({
			$overlay: $('body'),
			menu: {
				items: [
					new OO.ui.MenuOptionWidget({label: 'a'}),
					new OO.ui.MenuOptionWidget({label: 'b'}),
					new OO.ui.MenuOptionWidget({label: 'c'})
				]
			}
		});
    fieldsetLayout = new OO.ui.FieldsetLayout({label: 'Foo'});
    fieldsetLayout.addItems([new OO.ui.FieldLayout(dropdownWidget, {label: 'Bar', align: 'left'})])
		this.$element.append(
			$('<p>').height(300),
			fieldsetLayout.$element,
			$('<p>').height(900)
		);
	}

	OO.inheritClass(MyPage, OO.ui.PageLayout);

	var booklet, panel;
	booklet = new OO.ui.BookletLayout({continuous: true});
	booklet.addPages([new MyPage('x', 'Title')]);
	panel = new OO.ui.PanelLayout({
		content: [booklet],
		expanded: false,
		framed: true
	});

  var $content = $('#bodyContent'), $panel = panel.$element;
  $content.empty().append($panel.height(300));
	function resize () {
		$panel.height(Math.max(
			$(window).height() - $content.offset().top - $panel.offset().top,
			400
		));
	}

	$(window).on('resize', resize);
	resize();
});