<div class="content">
  <h1>Pookie the Pug
            <span>at home!</span>
        </h1>

  <nav>
    <ul>
      <li><a aria-pressed="true" class="env home active" data-title="at home!" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/home.jpg" role="button" tabindex="1">Home</a>
      </li>
      <li><a aria-pressed="false" class="env park" data-title="at the park!!" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/park.jpg" role="button">Park</a>
      </li>
      <li><a aria-pressed="false" class="env beach" data-title="at the beach!" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/beach.jpg" role="button">Beach</a>
      </li>
      <li><a aria-pressed="false" class="env ski" data-title="skiing!" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/skiing.jpg" role="button">Skiing</a>
      </li>
      <li><a aria-pressed="false" class="env space" data-title="in space!" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/space.jpg" role="button">Space</a>
      </li>
    </ul>
  </nav>

  <div class="canvas-wrapper">
    <a href="#" class="canvas">
      <div class="woof">
        <div class="row">
          <div class="block blank" data-size="1"></div>

          <div class="block orange" data-size="21"></div>

          <div class="block blank" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="21"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="3"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="3"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="3"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="3"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="2"></div>

          <div class="block woofbg" data-size="4"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="5"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="3"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="3"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="3"></div>

          <div class="block black" data-size="1"></div>

          <div class="block woofbg" data-size="1"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block orange" data-size="1"></div>

          <div class="block woofbg" data-size="21"></div>

          <div class="block orange" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block blank" data-size="1"></div>

          <div class="block orange" data-size="21"></div>

          <div class="block blank" data-size="1"></div>
        </div>

        <div class="row">
          <div class="block blank" data-size="2"></div>

          <div class="block orange" data-size="2"></div>
        </div>

        <div class="row">
          <div class="block blank" data-size="2"></div>

          <div class="block orange" data-size="1"></div>
        </div>
      </div>

      <div class="row" id="row-1">
        <div class="block blank" data-size="12"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="4"></div>

        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="3"></div>

        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="3"></div>
      </div>

      <div class="row" id="row-2">
        <div class="block blank" data-size="11"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="2"></div>
      </div>

      <div class="row" id="row-3">
        <div class="block blank" data-size="10"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-4">
        <div class="block blank" data-size="9"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="7"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>
      </div>

      <div class="row" id="row-5">
        <div class="block blank" data-size="9"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block brown" data-size="9"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>
      </div>

      <div class="row" id="row-6">
        <div class="block blank" data-size="9"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="4"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block white" data-size="2"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>
      </div>

      <div class="row" id="row-7">
        <div class="block blank" data-size="10"></div>

        <div class="block black" data-size="3"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block white" data-size="2"></div>

        <div class="block grey" data-size="4"></div>

        <div class="block black" data-size="4"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="1"></div>
      </div>

      <div class="row" id="row-8">
        <div class="block blank" data-size="9"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="4"></div>

        <div class="block black" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="1"></div>
      </div>

      <div class="row" id="row-9">
        <div class="block blank" data-size="3"></div>

        <div class="block black" data-size="3"></div>

        <div class="block blank" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block white" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block white" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="7"></div>

        <div class="block black" data-size="1"></div>

        <div class="block white" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-10">
        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block white" data-size="2"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="3"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-11">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="1"></div>

        <div class="block black" data-size="4"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="5"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-12">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="1"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="5"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-13">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="8"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="3"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-14">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="13"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block pink" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-15">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="13"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="3"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="1"></div>
      </div>

      <div class="row" id="row-16">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="13"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="2"></div>
      </div>

      <div class="row" id="row-17">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="14"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block grey" data-size="8"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="2"></div>
      </div>

      <div class="row" id="row-18">
        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="15"></div>

        <div class="block black" data-size="2"></div>

        <div class="block grey" data-size="9"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="3"></div>
      </div>

      <div class="row" id="row-19">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="15"></div>

        <div class="block black" data-size="10"></div>

        <div class="block blank" data-size="4"></div>
      </div>

      <div class="row" id="row-20">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="16"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="4"></div>
      </div>

      <div class="row" id="row-21">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="5"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="5"></div>
      </div>

      <div class="row" id="row-22">
        <div class="block blank" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="7"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="5"></div>
      </div>

      <div class="row" id="row-23">
        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="4"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="5"></div>
      </div>

      <div class="row" id="row-24">
        <div class="block blank" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="6"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="4"></div>

        <div class="block black" data-size="1"></div>

        <div class="block blank" data-size="6"></div>
      </div>

      <div class="row" id="row-25">
        <div class="block blank" data-size="3"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="5"></div>

        <div class="block black" data-size="2"></div>

        <div class="block brown" data-size="1"></div>

        <div class="block black" data-size="1"></div>

        <div class="block brown" data-size="3"></div>

        <div class="block black" data-size="5"></div>

        <div class="block brown" data-size="2"></div>

        <div class="block black" data-size="2"></div>

        <div class="block blank" data-size="6"></div>
      </div>
  </div>
  </a>
</div>

<p>
  <audio>
            <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/bark.mp3" />
        </audio>
</p>

<div aria-hidden="true" class="images">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/park.jpg" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/beach.jpg" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/skiing.jpg" />
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/space.jpg" />
</div>
body {
  transition: all 0.5s ease;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/home.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

h1 {
  position: absolute;
  top: -9999px;
}

.images {
  display: none;
}

nav {
  position: absolute;
  left: -10px;
  top: 20%;
  border: 7px solid #999;
  background: #999;
  border-radius: 3px;
  -moz-box-shadow:    6px 6px 0px 0px #444;
  -webkit-box-shadow: 6px 6px 0px 0px #444;
  box-shadow:         6px 6px 0px 0px #444;
  z-index: 2;
}

.env {
  width: 50px;
  height: 50px;
  display: block;
  text-indent: -99999px;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

.env.home {
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel_house.jpg) no-repeat center center;
}

.env.park {
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel_park.jpg) no-repeat center center;
}

.env.beach {
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel_beach.jpg) no-repeat center center;
}

.env.ski {
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel_snow.jpg) no-repeat center center;
}

.env.space {
  background: #999 url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/244725/pixel_space.jpg) no-repeat center center;
}

.env.active {
  border: 3px solid #ff9120;
}

.canvas-wrapper {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.canvas {
  display: block;
  margin: auto;
  position: relative;
}

.woof {
  transition: all 0.5s ease;
  position: relative;
  z-index: 20;
  left: 65%;
  top: 50%;
  opacity: 0;
}

.woof.barking {
  opacity: 1;
}

.row {
  clear: both;
  position: relative;
}

.block {
  float: left;
}

.black {
  background: #333;
}

.grey {
  background: #666;
}

.brown {
  background: #ACA582;
}

.white {
  background: #eee;
}

.pink {
  background: #CC8099;
}

.woofbg {
  background: #fff;
  background: rgba(255, 255, 255, 0.9);
}

.orange {
  background: #ff9120;
}
(function() {

  var CONST = {
    COLS: 32,
    ROWS: 25
  },

  CLASS = {
    ACTIVE: 'active',
    BLOCK: 'block',
    BARKING: 'barking',
    CANVAS: 'canvas',
    ENV: 'env',
    WOOF: 'woof'
  },

  ATTR = {
    ARIA_PRESSED: 'aria-pressed',
    BG_IMG: 'background-image',
    DATA_TITLE: 'data-title',
    DATA_SIZE: 'data-size',
    HREF: 'href'
  },

  EVT = {
    CLICK: 'click',
    RESIZE: 'resize'
  },

  TAG = {
    A: 'A',
    AUDIO: 'audio',
    BODY: 'body',
    DIV: 'div',
    H1: 'H1',
    NAV: 'nav',
    SPAN: 'span'
  },

  SEL = {
    ENV: '.' + CLASS.ENV,
    BLOCK: '.' + CLASS.BLOCK,
    CANVAS: '.' + CLASS.CANVAS,
    WOOF: '.' + CLASS.WOOF
  },

  WINDOW = window,
  BODY = document.getElementsByTagName(TAG.BODY)[0],
  BLOCKS = document.querySelectorAll(SEL.BLOCK),
  CANVAS = document.querySelector(SEL.CANVAS),

  barking = false,
  blockSize, i;


  function _hasClass(el, c) {
    return (' ' + el.className + ' ').indexOf(' ' + c + ' ') > -1;
  }

  function _addClass(el, c) {
    var classes = el.className;

    if (!el || !c) return;

    if (!classes) {
      el.className = c;
    } else {
      if (classes.indexOf(c) !== '-1') {
        el.className = classes + ' ' + c;
      }
    }
  }

  function _removeClass(el, c) {
    var classes = el.className;

    if (!el || !c || !classes) return;
    classes = classes.replace(' ' + c, '');
    classes = classes.replace(c + ' ', '');
    classes = classes.replace(c, '');

    el.className = classes;
  }

  function _getViewportWidth() {
    return WINDOW.innerWidth;
  }

  function _getViewportHeight() {
    return WINDOW.innerHeight;
  }

  function _getUnitSize() {
    var vw = _getViewportWidth(),
        vh = _getViewportHeight();

    return (vw > vh) ? ((vh / CONST.ROWS) * 0.7) : ((vw / CONST.COLS) * 0.7);
  }

  function _setBlockSize() {
    blockSize = _getUnitSize();
  }

  function _setCanvasSize() {
    CANVAS.style.width = (blockSize * CONST.COLS) + 'px';
    CANVAS.style.height = (blockSize * CONST.ROWS) + 'px';
  }

  function _woof(evt) {
    evt.preventDefault();
    var audio = document.getElementsByTagName(TAG.AUDIO)[0],
        woof = document.querySelector(SEL.WOOF);

    if (!barking) {
      barking = true;
      _addClass(woof, CLASS.BARKING);
      audio.play();
      setTimeout(function(){
        _removeClass(woof, CLASS.BARKING);
        barking = false;
      }, 900); // 2s is the time of the audio clip
    }
  }

  function _toggleEnv(evt) {
    evt.preventDefault();
    var me = evt.target,
        textSpan = document.getElementsByTagName(TAG.SPAN),
        envLinks = document.querySelectorAll(SEL.ENV),
        i, thisLink,
        url, text;

    // Set all the current item to invalid and enable the new one
    for (i = 0; i < envLinks.length; i++) {
      thisLink = envLinks[i];
      _removeClass(thisLink, CLASS.ACTIVE);
      thisLink.setAttribute(ATTR.ARIA_PRESSED, false);
    }
    _addClass(me, CLASS.ACTIVE);
    me.setAttribute(ATTR.ARIA_PRESSED, true);

    // Get the new image and text from the DOM
    url = me.getAttribute(ATTR.HREF);
    text = me.getAttribute(ATTR.DATA_TITLE);

    // Update the background image
    BODY.style.backgroundImage = 'url(' + url + ')';

    // Update text in h1
    for(i = 0; i < textSpan.length; i++) {
      if(textSpan[i].parentNode.tagName === TAG.H1) {
        textSpan[i].innerHTML = text;
        break;
      }
    }
  }

  function _renderBlocks() {
    var i = 0,
        thisBlock,
        size;

    _setBlockSize();
    _setCanvasSize();

    for (i; i < BLOCKS.length; i++) {
      thisBlock = BLOCKS[i];

      size = (thisBlock.getAttribute(ATTR.DATA_SIZE) * blockSize) + "px";
      thisBlock.style.width = size;
      thisBlock.style.height = blockSize + 'px';
    }
  }

  function _eventListeners() {
    WINDOW.addEventListener(EVT.RESIZE, _renderBlocks);

    CANVAS.addEventListener(EVT.CLICK, _woof);

    document.getElementsByTagName(TAG.NAV)[0].addEventListener(EVT.CLICK, function(evt){
      if(_hasClass(evt.target, CLASS.ENV)) {
        _toggleEnv(evt);
      }
    });
  }

  _renderBlocks();
  _eventListeners();
})();
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.