(function(window, mw, $){
var api = new mw.Api();
$.getJSON('/w/index.php?title=Special:MyPage/bookmarks.json&action=raw&ctype=application/json', function (bookmarks) {
console.log(bookmarks);
var bookmarkMenu = $('<nav>');
bookmarkMenu.attr('id', 'p-bookmarks');
bookmarkMenu.addClass('mw-portlet mw-portlet-tb vector-menu vector-menu-portal portal');
bookmarkMenu.attr('aira-labelledby', 'p-bookmarks-label');
bookmarkMenu.attr('role', 'navigation');
var label = $('<label>');
label.attr('id', 'p-bookmarks-label');
label.addClass('vector-menu-heading');
label.attr('aria-label', ''); // not sure if this should be blank, but all the other portlets are blank /shrug
label.append('Bookmarks [<a href="/w/index.php?title=Special:MyPage/bookmarks.json&action=edit">edit</a>]');
bookmarkMenu.append(label);
var listDiv = $('<div>');
listDiv.addClass('body vector-menu-content pBody');
var ul = $('<ul>');
ul.addClass('vector-menu-content-list');
for (var i = 0; i < bookmarks.length; i++) {
var bookmark = bookmarks[i];
var li = $('<li>');
li.attr('id', 'bookmark-'+i);
li.addClass('mw-list-item');
var a = $('<a>');
a.attr('href', mw.util.getUrl(bookmark.url));
var span = $('<span>');
span.text(bookmark.name);
a.append(span);
if (typeof bookmark.accesskey === "string" && bookmark.accesskey.length === 1) {
a.attr('accesskey', bookmark.accesskey)
}
li.append(a);
ul.append(li);
}
listDiv.append(ul);
bookmarkMenu.append(listDiv);
bookmarkMenu.insertAfter('#p-tb');
});
})(window, mw, $);