<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <% if @title %>
      <title><%= @title %> - Neocities</title>
    <% else %>
      <title>Neocities</title>
    <% end %>
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <style>
    *, form {
      margin: 0;
      padding: 0;
    }
    html {
      height: 100%; 
    }
    body {
      height: 100%;
      width: 100%;
      font-family: "Lucida Grande", helvetica, verdana, sans-serif;
      font-size: 12px;
      overflow: hidden;
    }
    #logo {
      background: url(/img/topbar-cat.png) no-repeat 1px -1px;
      width: 30px;
      height: 29px;
      position: absolute;
      display: block;
    }
    #website-frame {
      width: 100%;
      height: 100%;
    }
    #top-bar {
      background: #3B3B3B;
      color: #cecece;
      float: left;
      width: 100%;
      padding: 6px 0;
    }
    #top-bar ul {
      list-style: none;
      margin: 0;
    }
    #top-bar li {
      float: left;
      margin-left: 20px;  
      line-height: normal;
    }
    #top-bar a {
      color: #cecece;
      text-decoration: none;
    }
    #top-bar a:hover {
      color: #fff;
    }
    #top-bar input {
      border: 0;
      background: #555;
      color: white;
      width: 13em;
      padding: 1px 5px;
      font-size: inherit;
      margin: 0;
      height: 1.1em;
      line-height: normal;
      border-radius: 3px;
    }
    ::-webkit-input-placeholder { font-style: italic; color: #aaa!important; }
    :-moz-placeholder { font-style: italic; color: #ccc; }
    ::-moz-placeholder { font-style: italic; color: #ccc; }
    :-ms-input-placeholder { font-style: italic; color: #ccc; }
    #top-bar .twitter-typeahead {
      color: #000;
    }
    #top-bar .tt-dropdown-menu {
      background: #FFFFFF;
      cursor: pointer;
      border: 1px solid #ddd;
      top: 106%!important;
      width: 98.5%!important;
    }
    #top-bar .tt-suggestion {
      margin:0;
      padding: 0px 8px 0px 8px;
      height: 2em;
      line-height: 2em;
    }
    #top-bar .tt-cursor {
      background: #DAF3EF;
    }
    #top-bar .browse-actions {
      margin-left: 20px;
    }
    #top-bar .site-actions {
      float: right;
      margin-right: 9px;
    }
    .popover {
      background-color: #555;
    }
    .popover.bottom .arrow:after {
      border-bottom-color: #555;
    }
    .popover a {
      color: #cecece;
    }
    #top-bar .close {
      background: url(/img/topbar-close.png) no-repeat;
      width: 13px;
      height: 13px;
      background-size: 13px;
      margin-top: 1px;
      float: left;
      opacity: 1; /*overriding boostrap*/
    }
    #top-bar .invisible a {
      color: #3B3B3B;
    }
    </style>
  </head>
  <body>
  <script type="text/javascript">
    function getPage(currentPage) {
      document.location.href = '/surf?current_page='+currentPage+'&'+$('#search_criteria').serialize()
    }

    function backToBrowse() {
      document.location.href = '/browse?'+$('#search_criteria').serialize()
    }
  </script>
  <a href="/" id="logo"></a>
  <div id="top-bar">
    <ul class="browse-actions">
      <li>
        <a href="/browse" onclick="backToBrowse(<%= @current_page %>); return false">Neocities</a>
      </li>
      <% if @current_page %>
        <li>
          <form id="search_criteria" onsubmit="getPage(1); return false">
            <input type="hidden" name="sort_by" value="<%= params[:sort_by] %>">
            <input class="typeahead" name="tag" type="text" placeholder="Browse by tag..." value="<%= params[:tag] %>" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" dir="auto" />
          </form>
        </li>
        <li>
          <% if @current_page > 1 %>
            <a href="" onclick="getPage(<%= @current_page - 1 %>); return false">
              <i class="fa fa-caret-left"></i> Prev
            </a>
          <% end %>
        </li>
        <li>
          <% if @current_page != @page_count %>
            <a href="" onclick="getPage(<%= @current_page + 1 %>); return false">Next <i class="fa fa-caret-right"></i></a>
          <% end %>
        </li>
      <% end %>
    </ul>
    <ul class="site-actions">
      <li><a href="/site/<%= @site.username %>"><i class="fa fa-user"></i> <strong><%= @site.username %></strong></a></li>

      <% if current_site && current_site != @site %>
        <li>
          <a id="followLink" href="" onclick="toggleFollow(<%= @site.id %>); return false">
            <% if current_site.is_following? @site %>
              <i class="fa fa-times"></i> Unfollow
            <% else %>
              <i class="fa fa-plus"></i> Follow
            <% end %>
          </a>
        </li>
      <% end %>

      <li>
        <a href="" id="shareButton" data-container="body" data-toggle="popover" data-placement="bottom" data-content='<%== erb :'_share', layout: false, locals: {site: @site} %>' onclick="return false">
          <i class="fa fa-share-alt"></i> Share
        </a>
      </li>
      <li><a class="close" href="//<%= @site.host %>" alt="close" title="close"></a></li>
    </ul>
  
  </div>
  <iframe src="//<%= @site.host %>" frameborder="0" scrolling="yes" marginheight="0" marginwidth="0" id="website-frame" name="website-frame"></iframe>

  <script src="/js/jquery-1.11.0.min.js"></script>
  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/typeahead.bundle.js"></script>
  <script>
    $(function() {
      $('#shareButton').popover({html: true})
    })

    $('.typeahead').typeahead({
      minLength: 2,
      highlight: true
    }, {
      name: 'tags',
      source: function(query, callback) {
        $.get('/tags/autocomplete/'+query+'.json', function(data) {
          var suggestions = JSON.parse(data)
          var suggestionObjects = []
          for(var i=0; i<suggestions.length; i++)
            suggestionObjects.push({value: suggestions[i]})

          callback(suggestionObjects)
        })
      }
    })

    function toggleFollow(id) {
      $.post('/site/'+id+'/toggle_follow', {csrf_token: '<%= csrf_token %>'}, function(res) {
        if(res.result == 'followed')
          $('#followLink').html('<i class="fa fa-times"></i> Unfollow')

        if(res.result == 'unfollowed')
          $('#followLink').html('<i class="fa fa-plus"></i> Follow')
      })
    }
  </script>
  </body>
</html>