<%#
  # @file
  # The inner HTML of the account box that comes up in the bottom left
  #%>
  <div id="lightbox_overlay">
  <div id="lightbox_main">
    <a id="lightbox_close" href="#"></a>
    <div id="lightbox_content">

      <div class="lightboxContent" id="about">
        <h3>About Metamaps.cc</h3>
            <div id="aboutParms">
              <div id="leftAboutParms">
                <p>STATUS: </p>
                <p>VERSION:</p>
                <p>BUILD:</p>
                <p>LAST UPDATE:</p>
              </div>

              <div id="rightAboutParms">
                <p>PRIVATE BETA</p>
                <p><%= METAMAPS_VERSION %></p>
                <p><%= METAMAPS_BUILD %></p>
                <p><%= METAMAPS_LAST_UPDATED %></p>
              </div>
              <div class="clearfloat"></div>
            </div>

        <p>Metamaps.cc is a free and open source web platform that supports real-time sense-making and distributed collaboration between individuals, communities and organizations.</p>

<p>Using an intuitive graph-based interface, Metamaps.cc helps map out networks of people, ideas, resources, stories, experiences, conversations and much more. The platform is evolving for a range of applications amidst a growing network of designers, developers, facilitators, practitioners, entrepreneurs, and artists.</p>

<p>Metamaps.cc is created and maintained by a distributed community of contributors passionate about the evolution of collaboration, alternative forms of value creation and increase of collective intelligence through the lens of the open culture and the peer-to-peer revolution.</p>

        <ul class="lightbox_links">
          <li>
            <a class="icon_twitter" href="https://twitter.com/metamapps" target="_blank">
              <div class="lightboxAboutIcon"></div>
              @metamapps
            </a>
          </li>
          <li>
            <a class="icon_community" href="https://www.hylo.com/c/metamaps/join/mice-late-hit-two-shown" target="_blank">
              <div class="lightboxAboutIcon"></div>
              community
            </a>
          </li>
          <li>
            <a class="icon_source_code" href="https://github.com/metamaps/metamaps" target="_blank">
              <div class="lightboxAboutIcon"></div>
              source code
            </a>
          </li>
          <li>
            <a class="icon_howtos" href="https://docs.metamaps.cc" target="_blank">
              <div class="lightboxAboutIcon"></div>
              howtos
            </a>
          </li>
          <li>
            <a class="icon_terms" href="https://metamaps.cc/maps/331" target="_blank">
              <div class="lightboxAboutIcon"></div>
              terms
            </a>
          </li>
        </ul>
        <div class="clearfloat"></div>
      </div>

      <div class="lightboxContent" id="noIE">
        <h3>OOPS! <br> YOUR BROWSER IS NOT SUPPORTED.</h3>
        <p id="noIEsubheading">To view this experience, please upgrade to the latest one of these browsers:</p>
        <a id="chromeIcon" href="https://www.google.com/chrome/browser/" target="_blank">Chrome</a>
        <a id="fireFoxIcon" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank">Firefox</a>
        <a id="safariIcon" href="http://support.apple.com/downloads/#safari" target="_blank">Safari</a>
        <p id="noIEbody">While it's downloading, explore our <a href="http://blog.metamaps.cc/">blog</a>,<br> watch the <a href="http://vimeo.com/88334167">tutorials</a>, or visit our <a href="https://docs.metamaps.cc">knowledge base</a>!

      </div>

      <div class="lightboxContent" id="tutorial">
        <h3>Tutorial</h3>
        <iframe src="//player.vimeo.com/video/88334167?title=0&amp;byline=0&amp;portrait=0" width="510" height="319" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
      </div>

      <div class="lightboxContent" id="cheatsheet">
        <%= render :partial => 'shared/cheatsheet' %>
      </div>

      <% if current_user %>
        <div class="lightboxContent" id="invite">
          <h3>SHARE INVITE</h3>

<div class="leaveSpace"></div>
<p>The Metamaps platform is currently in an invite-only beta with the express purpose of creating a high value knowledge ecosystem, a diverse community of contributors and a culture of collaboration and curiosity.</p>
<p>As a valued beta tester, you have the ability to invite your peers, colleagues and collaborators onto the platform.</p>
<p>Below is a personal invite link containing your unique access code, which can be used multiple times.</p>
            <div id="joinCodesBox">
            <p class="joinCodes"><%= invite_link() %>
            <button class="button" onclick="Metamaps.GlobalUI.shareInvite('<%= @invite_link %>');">COPY INVITE LINK!</button>
            </div>

        </div>

        <div class="lightboxContent" id="forkmap">
          <%= render :partial => 'shared/forkmap' %>
        </div>

        <div class="lightboxContent" id="switchMetacodes">
          <%= render :partial => 'shared/switchmetacodes' %>
        </div>
      <% end %>

    </div>
  </div>
  <div id="lightbox_screen" style="height: 100%;"></div>
</div>
