index.html

---
layout: default
title: The Daily Bread
---

<script>

yepnope({
  load: [
    // 'http://wheredoesmymoneygo.org/wp-content/themes/wdmmg/wdmmg.css',
    'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/themes/ui-lightness/jquery-ui.css',
    'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js',
    '/js/libs/base64.js',
    '/js/libs/underscore.js',
    '/js/libs/raphael-min.js',
    '/js/aggregator.js',
    '/css/dailybread.css',
    '/js/setting.js?20120707',
    '/js/dailybread.js?20120707'
  ],
  complete: function() {

    (function ($) {

      $(function () {

        $('#preloader .txt').html('loading data');

       var db = new OpenSpending.DailyBread($('#dailybread'));
       new OpenSpending.Aggregator({
           apiUrl: 'http://openspending.org/api',
           //localApiCache: 'aggregate.json',
           dataset: OpenSpending.identifier,
           drilldowns: ['Category', 'Subcategory'],
           cuts: ['year:' + OpenSpending.year],
           rootNodeLabel: 'Total',
           breakdown: 'Subcategory',
           callback: function(data) {

            $('#content-wrap').show();
            $('#preloader').remove();

            db.setDataFromAggregator(data, ['unknown']);
            db.setIconLookup(function(name) {
              var style = OpenSpending.Styles.Cofog[name];
              if (style != undefined) {
               return style['icon'];
              }
              return 'icons/unknown.svg';
            });
            db.draw();
           }
        });

        OpenSpending.renderDependentTypes(db);
      });
    })(jQuery)
  }
});


</script>

<div id="dailybread">
  <!--
  <h2 class="page-header">The Daily Bread <small> Costs for the British Taxpayer per Day</small></h2>
  -->
  <div>
    <h2 style="width:240px;display:inline-block;vertical-align:top;">あなたの世帯タイプは？</h2>
    <div id="select-dependents-type" style="width:450px;display:inline-block;">
      <div class="single">単身世帯</div>
      <div class="family">扶養有り</div>
    </div>
    <br style="clear:both;">
  </div>

  <div id="preloader" style="text-align: center; padding: 100px"><img src="img/ajax-loader.gif" style="vertical-align:top" /> &nbsp;<span class="txt">loading javascript libraries</span></div>

  <div id="content-wrap" style="display:none">
    <div id="db-topbar" class="layout-row layout-3col-15-70-15">
     <div id="db-salary" class="layout-col layout-col-1">
      <h2>年収</h2>
      <p>&yen;4,000,000</p>
     </div>

     <div id="db-slider" class="layout-col layout-col-2">
      <h2>あなたの年間収入を選んでください</h2>
      <div class="wdmmg-slider"></div>
     </div>

     <div id="db-tax" class="layout-col layout-col-3">
      <h2>あなたの横浜市税（年間）</h2>
      <p>&yen;31.12</p>
     </div>
    </div><!-- /#db-topbar -->
  </div>
  あなたの市税は、1日当たり、どこで、いくら使われているか？
</div><!-- /#dailybread -->