views/index.ejs

<!DOCTYPE html>
<html xmlns:fb="http://ogp.me/ns/fb#" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />

    <title>If I Die Today</title>
    <!--<link rel="stylesheet" href="stylesheets/screen.css" media="Screen" type="text/css" />-->
    <link rel="stylesheet" href="stylesheets/mobile.css" media="handheld, only screen and (max-width: 480px), only screen and (max-device-width: 480px)" type="text/css" />
    <!--<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">-->
    <link rel="stylesheet" href="stylesheets/style.css" />

    <script type="text/javascript" src="http://use.typekit.com/kih0iop.js"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

    <script type="text/javascript" src="scripts/Datejs-all/date.js"></script>

    <!--[if IEMobile]>
    <link rel="stylesheet" href="mobile.css" media="screen" type="text/css"  />
    <![endif]-->

    <!-- These are Open Graph tags.  They add meta data to your  -->
    <!-- site that facebook uses when your content is shared     -->
    <!-- over facebook.  You should fill these tags in with      -->
    <!-- your data.  To learn more about Open Graph, visit       -->
    <!-- 'https://developers.facebook.com/docs/opengraph/'       -->
    <meta property="og:title" content="<%= app.name %>" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="<%= url() %>" />
    <meta property="og:image" content="<%= url('/logo.png') %>" />
    <meta property="og:site_name" content="If I Die Today" />
    <meta property="og:description" content="A Project inspired by Post Mortem, a collaborative initiative by FRONTLINE, ProPublica and NPR on Death Investigation in America." />
    <meta property="fb:app_id" content="<%= app.id %>" />

    <script type="text/javascript" src="/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="/scripts/underscore-min.js"></script>
    <script type="text/javascript" src="/scripts/d3.v2.min.js"></script>

    <script type="text/javascript">

    var states = ['Alabama',
    'Alaska',
    'Arizona',
    'Arkansas',
    'California',
    'Colorado',
    'Connecticut',
    'Delaware',
    'District of Columbia',
    'Florida',
    'Georgia',
    'Hawaii',
    'Idaho',
    'Illinois',
    'Indiana',
    'Iowa',
    'Kansas',
    'Kentucky',
    'Louisiana',
    'Maine',
    'Maryland',
    'Massachusetts',
    'Michigan',
    'Minnesota',
    'Mississippi',
    'Missouri',
    'Montana',
    'Nebraska',
    'Nevada',
    'New Hampshire',
    'New Jersey',
    'New Mexico',
    'New York',
    'North Carolina',
    'North Dakota',
    'Ohio',
    'Oklahoma',
    'Oregon',
    'Pennsylvania',
    'Rhode Island',
    'South Carolina',
    'South Dakota',
    'Tennesee',
    'Texas',
    'Utah',
    'Vermont',
    'Virginia',
    'Washington',
    'West Virginia',
    'Wisconsin',
    'Wyoming'];

    var stateCodes = ['al',
    'ak',
    'az',
    'ar',
    'ca',
    'co',
    'ct',
    'de',
    'dc',
    'fl',
    'ga',
    'hi',
    'id',
    'il',
    'in',
    'ia',
    'ks',
    'ky',
    'la',
    'me',
    'md',
    'ma',
    'mi',
    'mn',
    'ms',
    'mo',
    'mt',
    'ne',
    'nv',
    'nh',
    'nj',
    'nm',
    'ny',
    'nc',
    'nd',
    'oh',
    'ok',
    'or',
    'pa',
    'ri',
    'sc',
    'sd',
    'tn',
    'tx',
    'ut',
    'vt',
    'va',
    'wa',
    'wv',
    'wi',
    'wy'];

    var stateFace = ['B',
    'A',
    'D',
    'C',
    'E',
    'F',
    'G',
    'H',
    'y',
    'I',
    'J',
    'K',
    'M',
    'N',
    'O',
    'L',
    'P',
    'Q',
    'R',
    'U',
    'T',
    'S',
    'V',
    'W',
    'Y',
    'X',
    'Z',
    'c',
    'g',
    'd',
    'e',
    'f',
    'h',
    'a',
    'b',
    'i',
    'j',
    'k',
    'm',
    'n',
    'o',
    'p',
    'p',
    'q',
    'r',
    't',
    's',
    'u',
    'w',
    'v',
    'x'];

    </script>

    <script type="text/javascript">
      function logResponse(response) {
        if (console && console.log) {
          console.log('The response was', response);
        }
      }

      $(function(){
        // Set up so we handle click on the buttons
        $('#postToWall').click(function() {
          FB.ui(
            {
              method : 'feed',
              link   : $(this).attr('data-url')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });

        $('#sendToFriends').click(function() {
          FB.ui(
            {
              method : 'send',
              link   : $(this).attr('data-url')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });

        $('#sendRequest').click(function() {
          FB.ui(
            {
              method  : 'apprequests',
              message : $(this).attr('data-message')
            },
            function (response) {
              // If response is null the user canceled the dialog
              if (response != null) {
                logResponse(response);
              }
            }
          );
        });
      });
    </script>

    <!--[if IE]>
      <script type="text/javascript">
        var tags = ['header', 'section'];
        while(tags.length)
          document.createElement(tags.pop());
      </script>
    <![endif]-->
  </head>
  <body>
    <div id="fb-root"></div>
    <script type="text/javascript">
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '<%= app.id %>', // App ID
          channelUrl : '<%= url_no_scheme('/channel.html') %>', // Channel File
          status     : true, // check login status
          cookie     : true, // enable cookies to allow the server to access the session
          xfbml      : true // parse XFBML
        });

        // Listen to the auth.login which will be called when the user logs in
        // using the Login button
        FB.Event.subscribe('auth.login', function(response) {
          // We want to reload the page now so PHP can read the cookie that the
          // Javascript SDK sat. But we don't want to use
          // window.location.reload() because if this is in a canvas there was a
          // post made to this page and a reload will trigger a message to the
          // user asking if they want to send data again.
          window.location = window.location;
        });

        FB.Canvas.setAutoGrow();
      };

      // Load the SDK Asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/all.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>


    <header class="clearfix">
      <p id="codTemp"></p>
      <% if (user) { %>


    <script type="text/javascript">
      var birthYear = parseInt("<%= user.birthday %>".split('/')[2]);
      var year = (new Date()).getFullYear();
      var age = year - birthYear;

      $(function() {
        /*$('#codTemp').append('Leading COD for age: ' + age + '<br>');*/
      });

      $.getJSON('/data/deaths.json', function(data) {
        var causesOfDeathForAge = [];

        $.each(data, function(i, cause) {
          var low = parseInt(cause['Low age'], 10);
          var high = parseInt(cause['High age'], 10);

          if (age >= low && age < high) {
            causesOfDeathForAge.push(cause);
          }
        });

        causesOfDeathForAge.sort(function(a, b) {
          return parseFloat(b['Total deaths']) - parseFloat(a['Total deaths']);
        });

        $.each(causesOfDeathForAge, function(i, v) {
          /*$('#codTemp').append(v['Cause of death'] + ' deaths:' + v['Total deaths'] +'<br>');*/
        });

        $('#cod2').append(causesOfDeathForAge[0]['Cause of death']);
      });
    </script>

    <script type="text/javascript">
      var loc = "<%= user.location.name %>"
      var city = loc.split(', ')[0];
      var state = loc.split(', ')[1];
      var _i = states.indexOf(state);
      var postal = stateCodes[_i];
      var curryear = parseInt(Date.today().getYear()) + 1900;
      var dod = Date.today().getMonthName() + " " + Date.today().getDate() + ", " + curryear;

      $(function() {
        $('#city').append(city);
        $('#state').append(state);
        $('#city2').append(city);
        $('#state2').append(state);
        $('#dod').append(dod);
        $('#age').append(age);
        $('#postal').append(postal);
      });
    </script>

    <script type="text/javascript">
    var hasCoroner = false;
    var hasExaminer = false;
    var hasBoth = false;
    $.getJSON('http://projects.propublica.org/forensics/geos/'+postal+'.json?callback=?', function(data) {

      var _both = "In "+state+", many places have coroners, who decide your cause of death, even though they have no medical training.";
      var _me = state+" has Medical Examiners.  But there no national standards for competence that Medical Examiners have to meet.";
      var _cor = state+" has coroners who decide your cause of death, even though they have no medical training.";


      if (data.geo['system_types']['medical_examiner_system'] != "none") {
        hasExaminer = true;
        $('#systemForState').append(_me);
      }

      if (data.geo['system_types']['coroner_system'] != "none") {
        hasCoroner = true;
        $('#systemForState').append(_cor);
      }

      if (hasCoroner && hasExaminer) {
        hasBoth = true;
        $('#systemForState').append(_both);
      }
    });
    </script>

    <script type="text/javascript">
      $(function() {
        var statefaceKey = stateFace[_i];
        $('#stateface').append(statefaceKey);
      });
    </script>


      <p id="picture" style="background-image: url(https://graph.facebook.com/<%= user.id %>/picture?type=normal)"></p>

  
      <% } else { %>
      <div style="width: 720px; height: 405px; margin: 0 auto; position: relative;">
        <div style="width: 720px; height: 405px; margin: 0 auto;">
          <img src="/images/toetag-splash-withalltext.jpg">
        </div>

        <div style="position: absolute; top: 270px; right: 50px;"> 
          <div class="fb-login-button" data-scope="user_likes,user_photos,user_photo_video_tags,user_birthday,user_location"></div>
        </div>
      </div>
        
      <% } %>
    </header>

    <% if (user) { %>

    <div id="container">
      <div id="top-outline">
  <div id="inner-outline">
      <h1>Certified Copy of Record of Death</h1>
      <% if(user) { %>
      <h4>City of <font id="city2"></font>, State of <font id="state2"></font></h4>
      <div class="img-thumbnail"><img src="https://graph.facebook.com/<%= user.id %>/picture?type=normal" id="profilepic" /></div>
      <div id="profile">
    <h2 id="name"><%= user.name %></h2>
    <span class="left">
      <b>City: </b><font id="city"></font><br />
      <b>State: </b><font id="state"></font><br />
    </span>
    <span class="right">
      <b>Date of Death: </b><font id="dod"></font><br />
      <b>Age of Death: </b><font id="age"></font></br>
    </span>
    <% } else{%>
    <div class="img-thumbnail"><img src="#" /></div>
    <div id="profile">
    <h2 id="name"></h2>
    <span class="left">
            <b>City: </b><font id="city"></font><br />
      <b>State: </b><font id="state"></font><br />
    </span>
    <span class="right">
      <b>Date of Death: </b><font id="dod"></font><br />
      <b>Age of Death: </b><font id="age"></font><br />
    </span>
    <% } %>
      </div>

      <div id="cod">
  <b>Cause of Death: </b><font id="cod2"></font><br />
  <i style="color:#666;">(Based on likeliest cause of death for someone your age)</i><br />
  <img src="/images/sig.gif" style="height:100px;"/>
  <p id="coronerME">Coroner/Medical Examiner</p>
  <script type="text/javascript">
    if (hasCoroner && hasExaminer) {
    $("#coronerME").text("Coroner/Medical Examiner")
    }
    else if (hasCoroner){
    $("#coronerME").text("Coroner")
    } else {
    $("#coronerME").text("Medical Examiner")
    }
  </script>

      </div>
    </div> <!-- end inner-outline -->

    <div style="padding: 13px 0;">
      <b>Share on Facebook: </b>
      <div class="fb-send" data-href="http://ifidietoday.org" data-font="lucida grande"></div>
    </div>
      <h3>Other probable deaths</h3>
    <svg id="pie"></svg>
    <script type="text/javascript"
            src="/scripts/pie.js"></script>

    <div id="whodecides">
      <h3>But who will figure out why you really died?</h3>
      <table>
      <tr>
  <td><p style="font-family: 'StateFaceRegular'; font-size: 100px;" id="stateface">R</p></td>
  <td><p id="systemForState"></p></td>
      </tr>
      </table>

    <video width="512" height="288" controls="controls">
      <source src="/videos/teaser.web.webm" type="video/webm" />
      <source src="/videos/teaser.web.m4v" type="video/mp4" />
      Your browser does not support the video tag.
    </video>

    </div> <!-- end whodecides -->
  </div> <!-- end container -->


    <% } %>
  </body>
</html>