<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>World War 2 Posters</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script type="text/javascript" src="../js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../js/d3.3.5.5.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../keshif.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../keshif.css"/ type="text/css">
    <link rel="stylesheet" href="../font-awesome/css/font-awesome.min.css">

    <script type="text/javascript" src="./js/moment.min.js" charset="utf-8"></script>

    <script type="text/javascript" src="./js/demo.js" charset="utf-8"></script>
    <link rel="stylesheet" href="./css/style.css"/ type="text/css">

    <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>

    <script type="text/javascript">
$(document).ready( function(){
  resizeBrowser(170,90);
  $(window).resize(function() {
    resizeBrowser(170,90);
    browser.updateLayout();
  });

	browser = new kshf.Browser({
    domID: "#chart_div",
    itemName: "World War 2 Posters",
    categoryTextWidth: 150,
    source: { 
      dirPath: "https://ca480fa8cd553f048c65766cc0d0f07f93f6fe2f.googledrive.com/host/0By6LdDWgaqgNfmpDajZMdHMtU3FWTEkzZW9LTndWdFg0Qk9MNzd0ZW9mcjA4aUJlV0p1Zk0/",
      fileType: 'json',
      tables: [{name:"world_war_2_posters", id:"arcIdentifier"}]
    },
    summaries: [
      { title: "Date", value: "date" },
      { title: "Collection", value: "from" },
      { title: "Subjects", value: "subjects" },
      { title: "Tags",
        value: function(){
          var contribs = this.publicContributions;
          if(contribs===undefined) return;
          var tags = contribs.tags;
          if(tags===undefined) return;
          var r=[];
          if(tags.tag.length===undefined){
              r.push(tags.tag['$']);
          } else {
              tags.tag.forEach(function(tag){
                  r.push(tag['$']);
              });
          }
          return r;
        } },
      { title: "Tag Contributors",
        value: function(){
          var contribs = this.publicContributions;
          if(contribs===undefined) return;
          var tags = contribs.tags;
          if(tags===undefined) return;
          var r=[];
          if(tags.tag.length===undefined){
              r.push(tags.tag['@user']);
          } else {
              tags.tag.forEach(function(tag){
                  r.push(tag['@user']);
              });
          }
          return r;
        } },
      { title: "Types", value: "typesOfArchivalMaterials" },
      { title: "Use Restrictions", value: "useRestrictions", collapsed: true, },
      { title: "Access Restrictions", value: "accessRestrictions", collapsed: true }
    ],
    itemDisplay: {
      displayType: 'grid',
      textSearch: "title",
      recordView: function(){
        return "<a target='_blank' href='"+this.url+"' class='thumbnail'>"+
            "<img class='thumbImg'></a><span class='title'>"+this.title+"</span>";
      },
      visibleCb: function(d){
        if(this.objects===undefined) return;
        var url;
        if(this.objects.object.length){
          url = this.objects.object[0].file['@url'];
        } else {
          url = this.objects.object.file['@url'];
        }
        d3.select(d.DOM.record).select("img").attr("src",url);
      }
    }
  });
});
</script>
    <style>
.listItem{
  width: 150px;
  overflow: visible !important;
}
.listItem > .itemRow{
  overflow: visible !important;
}
.content{
  padding: 3px;
}
.thumbnail{
  overflow: visible !important;
}
.listItem:hover{
  z-index: 200 !important;
}
.listItem .content img.thumbImg:hover{
  transform: scale(1.5);
}
.content img.thumbImg{
  border: solid;
  border-color: black;
  border-width: 1px;
  border-radius: 0px;
  width: 100%;
  transition: all 150ms ease-in;
  -webkit-transition: all 150ms ease-in;
  -o-transition: all 150ms ease-in;
  -moz-transition: all 150ms ease-in;
}
    </style>
	</head>
  <body>
    <div class="pageTitle" align="center">World War 2 Posters - National Archives</div>
    <div class="contents"><div id="chart_div"></div></div>

    <div id="infobox" align="center">
      <span class="fa fa-info-circle"></span>
      <a href="https://catalog.archives.gov/search?q=*:*&rows=20&offset=0&tabType=all&facet=true&facet.fields=oldScope,level,materialsType,fileFormat,locationIds,dateRangeFacet&highlight=true&f.parentNaId=513498&sort=naIdSort%20asc" target='_blank'>Data</a> is provided by the <b>National Archives</b>.
      <span class="fa fa-info-circle"></span>
      </div>
  </body>
</html>