{% extends 'base.html' %}

{% block bodyclass %}NB-static NB-static-iphone{% endblock %}

{% block title %}The NewsBlur iPhone App{% endblock %}

{% block content %}

  <div class="NB-static-title">
    The NewsBlur iPhone App
  </div>

  <div class="NB-iphone-mockup">
      <div class="NB-iphone-skeleton"></div>
      <ul class="NB-iphone-features">
        
      </ul>
  </div>
  
  <div class="NB-iphone-main">
    
    <div class="NB-iphone-title">
        <div><a href="/">NewsBlur</a> is a free visual feed reader with intelligence.</div>
        <div class="NB-iphone-subtitle">Built <a href="http://github.com/samuelclay/">in the open</a> by <a href="http://twitter.com/samuelclay/">@samuelclay</a>.</div>
        
    </div>
    
    <div class="NB-iphone-stripe-wrapper">
    <div class="NB-iphone-stripe">
    <a href="http://itunes.apple.com/us/app/newsblur/id463981119"  class="NB-iphone-download">
        <button>
            <img src="{{ MEDIA_URL }}img/reader/download.png" />
          Download the free NewsBlur iPhone app on the<br /><span class="NB-big">iTunes App Store</span>
        </button>
    </a>
    </div>
    </div>
    <br />
    <ul class="NB-iphone-features">
        <li class="NB-iphone-feature" data-screenshot="1">
            <img src="{{ MEDIA_URL }}img/iphone/v1.1 - Screenshot 1.png" />
            <div class="NB-iphone-feature-title">All of your sites</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
        <li class="NB-iphone-feature" data-screenshot="2">
            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 2.png" />
            <div class="NB-iphone-feature-title">River of News</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
        <li class="NB-iphone-feature" data-screenshot="3">
            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 3.png" />
            <div class="NB-iphone-feature-title">Story Navigation</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
    </ul>
    <br />
    <ul class="NB-iphone-features">
        <li class="NB-iphone-feature" data-screenshot="4">
            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 4.png" />
            <div class="NB-iphone-feature-title">Read the original site</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
        <li class="NB-iphone-feature" data-screenshot="5">
            <img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 5.png" />
            <div class="NB-iphone-feature-title">Add &amp; manage sites</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
        <li class="NB-iphone-feature NB-active" data-screenshot="6">
            <img src="{{ MEDIA_URL }}img/iphone/Default.png" />
            <div class="NB-iphone-feature-title">NewsBlur iPhone App</div>
            {# <div class="NB-iphone-feature-subtitle">Read</div> #}
        </li>
    </ul>

  </div>

{% endblock content %}


{% block extra_head_js %}
<script>
$(document).ready(function() {
    var $features = $('.NB-iphone-main .NB-iphone-feature');
    
    var copy_features_to_mockup = function() {
        var $mockup = $('.NB-iphone-mockup .NB-iphone-features');
        $mockup.append($features.clone());
        $mockup.find('.NB-iphone-feature-title, .NB-iphone-feature-subtitle').remove();
        $mockup.children().not(':last').css('left', 320);
    };
    
    var hover_features = function() {
        $features.bind('mouseenter', function() {
            select_feature($(this));
        });
    };
    
    var select_feature = function($feature) {
        var $mockup = $('.NB-iphone-mockup .NB-iphone-feature');
        var $other_features = $features.not($feature);
        var screenshots = $other_features.map(function() { return $(this).data('screenshot'); });
        $features.removeClass('NB-active');
        $feature.addClass('NB-active');
        $mockup.each(function() {
            var $this = $(this);
            var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
            var left = -321;
            if (screenshot_filtered) {  
                if (parseInt($this.css('left'), 10) > 0) left = 320;
                $this.animate({'left': left}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
            } else if (!screenshot_filtered) {
                if (parseInt($this.css('left'), 10) <= -320) {
                    $this.css({
                        'left': 320
                    });
                }
                $this.animate({'left': 0}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
            }
        });
    };
    
    var rotation_interval;
    var user_on_features = false;
    var rotate_features = function() {
        $('.NB-iphone-main .NB-iphone-features').bind('mouseenter', function() {
            user_on_features = true;
        }).bind('mouseleave', function() {
            user_on_features = false;
            clearInterval(rotation_interval);
            start_rotation(1000);
        });
    };
    var start_rotation = function(duration) {
        clearInterval(rotation_interval);
        rotation_interval = setInterval(function() {
            if (!user_on_features) {
                var current_feature = parseInt($features.filter('.NB-active').data('screenshot'), 10);
                var next_feature = ((current_feature) % 6); // Off by 1, so no need to +1
                var $next_feature = $features.eq(next_feature);
                select_feature($next_feature);
            }
            if (duration != 3000) start_rotation(3000);
        }, duration);
    };
    
    copy_features_to_mockup();
    hover_features();
    rotate_features();
    start_rotation(1000);
    
});
</script>
{% endblock %}