{% include base.html %}

<!DOCTYPE html> <html lang=“{{ page.lang | default: site.lang | default: ” en “ }}”>

<head>

{% include head.html %}

<meta property="og:url" content="www.sealiconvalley.com{{ page.url }}" />
<meta property="og:type" content="website" />
<meta property="og:title" content="{{ page.title }}" />
<meta property="og:image" content='{{ page.preview }}' />

<script>
    var winWidth = 520;
    var winHeight = 350;
    var winTop = (screen.height / 2) - (winHeight / 2);
    var winLeft = (screen.width / 2) - (winWidth / 2);

    function sharePost(index) {
      var url = document.URL;
      console.log("url: " + url);
        console.log("index: " + index);
        switch (index) {
            case 1:
                console.log("1111");
                window.open('http://www.facebook.com/sharer.php?s=100&p[title]=' + '{{ page.title }}' + '&p[url]=' + url + '&p[images][0]=' + '{{ page.preview }}', 'sharer', 'top=' +
                    winTop + ',left=' + winLeft + ',toolbar=0,status=0,width=' + winWidth + ',height=' + winHeight);
                break;
            case 2:
                window.open('https://twitter.com/intent/tweet?text='+'{{ page.title }} '+ url + '&hashtags=sealiconvalley');
                break;
            case 3:
                window.open('https://www.snapchat.com/add/sealiconvalley');
                break;
            case 4:
                window.open('http://sealiconvalley.tumblr.com/');
                break;
        }
    }

    $( document ).ready(function() {
      var children = $("#related_post_list").children().length;
      console.log("children: " + children);

      if(children == 0) {
        $(".related_posts").css({
            "display": "none"
        });
      }

});

</script>

</head>

<body>

{% include header.html %}

<div class="post_container">
    <div class="post_info">
        <span class="post_title">
          {{ page.title }}
        </span>
        <span class="post_date">
          {{ page.date | date: "%B %-d, %Y"}}
        </span>

    </div>
    {% if page.tags contains 'comics' %}

    <div class="comic">
      <img src="{{ page.comic | remove: '
      <p>' | remove: '</p>' | replace: 'BASE', base }}" />
    </div>
    {% endif %}

    {{ content | replace: 'BASE', base }}

    <div class="share">
        <div class="share_this">
            Share this:
        </div>

        <div class="post_share_social_container">
            <a href="https://www.instagram.com/sealiconvalley/">
                <div class="social_img ig_grey">

                </div>
            </a>
            <a href="javascript:void(0)" onclick="sharePost(1)">
                <div class="social_img fb_grey">

                </div>
            </a>
            <a href="javascript:void(0)" onclick="sharePost(2)">
            <!--<a href="https://twitter.com/intent/tweet?text="+"{{ page.title }}">-->
            <div class="social_img twitter_grey">
            </div>
          </a>
          <a href="javascript:void(0)" onclick="sharePost(3)">
            <div class="social_img snap_grey">
            </div>
          </a>
          <a href="javascript:void(0)" onclick="sharePost(4)">
            <div class="social_img tumblr_grey">
            </div>
          </a>
        </div>

        <div class="prev_next_container">
            {% if page.previous.url %}

            <a href='{{base}}{{page.previous.url}}'>

                <div class="prev_post">
                    previous
                </div>
            </a>
            {% endif %} {% if page.next.url %}
            <a href='{{base}}{{page.next.url}}'>
                <div class="next_post">
                    next
                </div>
            </a>
            {% endif %}
        </div>
    </div>

    {% if page.related %} {% assign maxRelated = 3 %} {% assign maxRelatedCounter = 0 %}

    <div class="related_posts">
        <div class="related_posts_prompt">
            you might also like
        </div>

        <div class="masonry" id="related_posts_masonry">
            <ul class="post-list" id="related_post_list">
                {% for post in site.posts %} {% if page.related contains post.title and page.categories == post.categories %}
                <li>
                    <div class="item">
                        <a class="post-link" href="{{base}}{{ post.url }}">
                            <div class="related_post_excerpt_container">

                                <img src="{{ post.preview | remove: '
                                <p>' | remove: '</p>' | replace: 'BASE', base }}" />

                            </div>
                            <div class="related_post_title">
                                {{ post.title }}
                            </div>
                        </a>
                    </div>
                </li>
                {% assign maxRelatedCounter = maxRelatedCounter | plus: 1 %} {% if maxRelatedCounter >= maxRelated %} {% break %} {% endif %} {% endif %} {% endfor %}
            </ul>
        </div>

        <div class="related_posts_container">

            {% for post in site.posts %} {% if page.related contains post.title %}

            <div class="related_post_preview">

            </div>
            {% endif %} {% endfor %}

        </div>

    </div>

    {% endif %}

</div>
{% include footer.html %}

</body>

</html>