<style type="text/css">
.jumbotron { display: none; }
#categories { display: none; }
.thumbnail {
  float: left;
  margin-right: 10px;
}
</style>

<h2>Category overview</h2>
<p>This example shows a list of all categories and their sub-categories, using the webservice API. View the page's source code to see how it's done.</p>

<div id="categories" class="container">
</div>

<script type="text/javascript">
var pwg_api = "/ws.php?format=json";
$.getJSON(pwg_api + '&method=pwg.categories.getList&recursive=true&tree_output=true&thumbnail_size=square', function (json) {
    categories = json.result;
    $.each( categories, function ( i, cat ) {
       $('#categories').append('<div class="row"><div class="thumbnail" id="cat-' + cat.id + '"><img src="' + cat.tn_url + '"><div class="thumbnail-caption"><a href="' + cat.url + '">' + cat.name + '</a></div></div></div>');
       if (cat.sub_categories) {
         sub_cats = cat.sub_categories;
         $.each( sub_cats, function ( y, sub_cat ) {
           $('#cat-' + cat.id).closest('.row').append('<div class="thumbnail" id="cat-' + sub_cat.id + '"><img src="' + sub_cat.tn_url + '"><div class="thumbnail-caption"><a href="' + sub_cat.url + '">' + sub_cat.name + '</a></div></div>');
         });
       }
    });
    $('#categories').fadeIn(1000);
});
</script>