index.html

---
layout: default
subtitle: "Cornish Expo:"
title: "Design 2015"
permalink: /
---

<header role="heading" class="col-5">
  <h3 class="pagesubtitle">{{ page.subtitle }}</h3>
  <h1 class="pagetitle">{{ page.title }}</h1>
</header>
<aside>
  <ul>
    <li class="col-1">
      <h4>8 May 2015</h4>
      <p>Opening Reception 5&nbsp;-&nbsp;8pm</p>
      <p><a href="about/">More About the Show</a></p>
    </li>
    <li class="col-1">
      <h4>9 May&nbsp;-&nbsp;17 May</h4>
      <p>Weekdays 2&nbsp;-&nbsp;7pm</p>
      <p>Weekends 12&nbsp;-&nbsp;5pm</p>
    </li>
    <li class="col-1">
      <p><a href="https://goo.gl/maps/K3SDn" title="Get directions here on Google Maps">Beebe Building<br>2014 9th Avenue<br>Seattle 98121</a></p>
    </li>
  </ul>
</aside>

<article class="col-5 designers">
  <h3>Meet the Designers</h3>
  <ul class="grid">
  </ul>
</article>

<script src="{{ site.baseurl }}js/papaparse.min.js"></script>
<script>
  /* Get grid element for HTML population */
  var grid = document.getElementsByClassName("grid")[0];

  window.onload = function() { init() };
  function init() {
    Papa.parse(
      "{{ site.url }}{{ site.baseurl }}data.csv",
      {
        download: true,
        header: true,
        complete: function(result) {
          renderContent(result.data)
        }
      }
    )

    /* Use the pattern! */
    var patternFills = document.getElementsByClassName("pattern");
    var pattern      = patternDir["The Notebook"]
                     + colorName["#008789"];
    var color        = "#f05b40";

    for (i=0; i<patternFills.length; i++) {
      patternFills[i].setAttribute('style',  'background: url('
                                           + pattern
                                           + '.png) '
                                           + color
                                           + ' fixed;');
    }
  }

  function renderContent(data) {
    var styles = [];

    /* Create and populate the grid element profile names */
    for (i=0; i<data.length; i++) {
      var profile     = data[i],
          patternCode = profile["Pattern"].split(" ")[profile["Pattern"].split(" ").length - 1],
          colorCode   = "x" + profile["Top Color"].substring(1,7),
          image       = '<img src="{{ "assets/portraits/1x1/" | prepend: site.baseurl }}'
                      + profile["Your Name"].escapeSpaces()
                      + '.jpg" width="221" height="221">';
      if (profile["Image"] == "FALSE") image = '<div class="grey"></div>';
      grid.innerHTML += '<li class="col-1 grid-item '
                      + patternCode
                      + ' '
                      + colorCode
                      + '"><a href="{{ site.baseurl }}profile.html?name=' 
                      + encodeURIComponent(profile["Your Name"])
                      + '"><div class="circle">'
                      + image
                      + '</div><h5>'
                      + profile["Your Name"]
                      + '</h5></a></li>';

      /* Check if style already exists then add it if needed */
      if (styles.indexOf(patternCode + colorCode) < 0) {
        styles.push(patternCode + colorCode);
        document.getElementById("styles").innerHTML += '.'
                                                     + patternCode
                                                     + '.'
                                                     + colorCode
                                                     + ' .circle:before{background:url('
                                                     + patternDir[profile["Pattern"]]
                                                     + colorName[profile["Top Color"]]
                                                     + '.png)}';
      }
      if (styles.indexOf(colorCode) < 0) {
        styles.push(colorCode);
        document.getElementById("styles").innerHTML += '.'
                                                     + colorCode
                                                     + ' a:hover,.'
                                                     + colorCode
                                                     + ' a:focus{color:'
                                                     + profile["Top Color"]
                                                     + ' !important}';
      }
    }
  }
</script>