{% extends "demos/base.html" %}

{% block body_attributes %}id="demostudio"{% endblock %}

{% block bodyclass %}section-demos landing{% endblock %}

{% block extrahead %}
    <link rel="alternate" type="application/atom+xml" title="{{_('Recent demos')}}"
        href="{{ url('demos_feed_recent', format='atom') }}" />
    <link rel="alternate" type="application/atom+xml" title="{{_('Featured demos')}}"
        href="{{ url('demos_feed_featured', format='atom') }}" />
{% endblock %}

{% block title %}{{ page_title(_('Demo Studio')) }}{% endblock %}

{% block content %}
<section id="content">
<div class="wrap">

  <header id="demos-head">
    <h1>{{_("Mozilla Demo Studio")}}</h1>
    <ul class="demo-buttons">
      <li class="submit"><a href="{{ url('demos_submit') }}" class="button positive"><b></b>{{_("Submit a Demo")}}</a></li>
      <li class="learnmore menu"><a href="#learn-pop" class="button">{{ _('Learn More') }}</a>
        <div id="learn-pop" aria-hidden="true">
          {% trans %}
          <p>Welcome to the Mozilla Demo Studio, where developers like you can develop, share, demonstrate, and learn all about Web technologies. See what's possible by exploring Demo Studio:</p>
          <ul>
            <li>View demos that showcase what HTML, CSS, and JavaScript can do.</li>
            <li>Inspect the source code for those demos so you can see how they work.</li>
            <li>Read documentation to learn about the open standards and technologies that power the Web.</li>
          </ul>
          {% endtrans %}
        </div>
      </li>
    </ul>
  </header>

  {% if featured_submission_list | length >= 3 %}
  <section id="featured-demos">
    <header>
      <h2>{{_("Featured Demos")}}</h2>
    </header>

    <ul class="nav-slide">
      <li class="nav-prev"><a href="#demo-prev" class="prev" title="{{_("See the previous demo")}}">{{_("Previous")}}</a></li>
  		<li class="nav-next"><a href="#demo-next" class="next" title="{{_("See the next demo")}}">{{_("Next")}}</a></li>
    </ul>

    {% set submission = featured_submission_list[1] %}
    <div id="demo-main">
      {# <strong class="flag">{{_("Derby Winner")}}</strong> #}
      <div class="preview">
        <a href="{{ url('demos_detail', slug=submission.slug) }}">
          <img src="{{ submission.screenshot_1.url }}" alt="" width="435" height="326">
        </a>
        <div class="demo-details">
          <h2 class="demo-title">
              <a href="{{ url('demos_detail', slug=submission.slug) }}">{{ submission.title }}</a>
          </h2>
          <p class="byline vcard">
            {{ profile_link(submission.creator, show_gravatar=True) }}
          </p>
          <p class="desc">
            <span class="descText">{{ submission.summary }}</span>
            <a href="{{ url('demos_detail', slug=submission.slug) }}" class="descLink">{{_("Details")}}</a>
          </p>
          <p class="launch">
            <a href="{{ url('demos_launch', slug=submission.slug) }}" class="button">{{_("Launch")}}</a>
          </p>
        </div>
      </div>
    </div>

    {% set submission = featured_submission_list[0] %}
    <div id="demo-prev" class="side">
      <div class="preview">
        <h2 class="demo-title">
          <a href="{{ url('demos_detail', slug=submission.slug) }}">
            <img class="preview" src="{{ submission.screenshot_1.url }}" alt="" width="261" height="195">
            <b>{{ submission.title }}</b>
          </a>
        </h2>
      </div>
    </div>

    {% set submission = featured_submission_list[2] %}
    <div id="demo-next" class="side">
      <div class="preview">
        <h2 class="demo-title">
          <a href="{{ url('demos_detail', slug=submission.slug) }}">
            <img class="preview" src="{{ submission.screenshot_1.url }}" alt="" width="261" height="195">
            <b>{{ submission.title }}</b>
          </a>
        </h2>
      </div>
    </div>
  </section>
  {% endif %}

  <section id="content-main" class="full" role="main">

    <div id="search-browse">
      <form class="demo-search" method="GET" action="{{ url('demos_search') }}">
        <p>
          <input type="search" id="search-demos" name="q" placeholder="{{_("Search")}}" />
          <noscript><button type="submit">{{_("Search")}}</button></noscript>
        </p>
      </form>

      {% trans %}<b>or</b>{% endtrans %}

      <div id="demo-tags" class="menu">
        <a href="#tags-list" class="button neutral">{{_("Browse by Technology")}}</a>
        <ul id="tags-list">
            {% for tag in tags_used_for_submissions() %}
                {% if tag.name.startswith('tech:') %}
                    <li><a href="{{ url('demos_tag', tag=tag.name) }}">{{ tag_title(tag) }}</a></li>
                {% endif %}
            {% endfor %}
        </ul>
      </div>
    </div>

    {{ submission_listing(request, submission_list,  is_paginated, paginator, page_obj,
        _('Subscribe to a feed of {tag_title} demos') | f(tag_title=_('recent')),
        url('demos_feed_recent', format='rss'), cols_per_row=4,
        pagination_base_url=url('demos_all') ) }}

  </section><!-- /#content-main -->

</div>
</section>
{% endblock %}

{% block js %}
{{ super() }}

<script type="text/javascript">
// <![CDATA[
/* Featured demos */

  $(document).ready(function() {

    var $featuredDemos = $("#featured-demos"),
        $details = $("#demo-main .demo-details"),
        $demoPrev = $('#demo-prev'),
        $demoNext = $('#demo-next');

    $featuredDemos.addClass("js");

    $("#demo-main .demo-details, #featured-demos .side .demo-title b").hide().attr("aria-hidden", "true");

    $("#demo-main .preview").hoverIntent({
      interval: 150,
      over: function(){
        $details.fadeIn().removeAttr("aria-hidden");
      },
      out: function(){
        $details.fadeOut("fast").attr("aria-hidden", "true");
      }
    });

    $("#featured-demos .side .preview").hoverIntent({
      interval: 250,
      over: function(){
        $(this).find("img").animate({ opacity: "1" }, 150);
        $(this).find(".demo-title b").fadeIn(150).removeAttr("aria-hidden");
      },
      out: function(){
        $(this).find("img").animate({ opacity: ".6" }, 250);
        $(this).find(".demo-title b").fadeOut(250).attr("aria-hidden", "true");
      }
    });


    /**
     * Set up featured demos rotation - loads up the JSON feed for featured demos
     * and does DOM juggling to page through the items.
     */
    var featured_demos_feed_url =
        '{{ url('demos_feed_featured', format='json') }}';

    // Hide buttons until feed loaded.
    $(".nav-slide .next, .nav-slide .prev").hide();

    // Load the feed, wire everything up once the data's been received.
    $.getJSON(featured_demos_feed_url, function (demos) {

        // Refrain from wiring up nav, if no items fetched from feed.
        if (!demos || demos.length == 0) {
            return;
        }

        // Start the current index at 1, since 0 and 2 should already be in prev
        // and next positions.
        var curr_idx = 1;

        // Store node queries that don't need to be made more than once
        var $demoNextPreview = $("#demo-next .preview"),
            $demoMainPreview = $("#demo-main .preview"),
            $demoPrevPreview = $("#demo-prev .preview");

        // Create demo update function vars here
        var updatePrevFeaturedDemo, updateNextFeaturedDemo;

        // Create next / prev button vars here
        var $next_btn = $(".nav-slide .next"),
            $prev_btn = $(".nav-slide .prev");

        // Update the main demo from the current index demo.
        function updateMainFeaturedDemo () {
            var demo = demos[curr_idx];
            $("#demo-main")
                .find(".preview img").attr("src", demo.screenshot).end()
                .find(".preview a").attr("href", demo.link).end()
                .find(".demo-title a")
                    .attr("href", demo.link)
                    .text(demo.title)
                .end()
                .find(".byline a")
                    .attr("href", demo.author_link)
                    .find("span").text(demo.author_name).end()
                    .find("img").attr("src", demo.author_avatar).end()
                .end()
                .find(".descText").text(demo.summary).end()
                .find(".descLink")
                  .attr("href", demo.link)
                .end()
                .find(".launch a").attr("href", demo.link + "/launch").end()
                ;
        }

        // Create functions for next and previous movement
        function createDemoUpdates(offset, $element) {
          return function() {
            var demo = demos[curr_idx + offset];
            $element
                .find(".preview img").attr("src", demo ? demo.screenshot : "").end()
                .find(".demo-title a").attr("href", demo ? demo.link : "#").end()
                .find(".demo-title b").text(demo ? demo.title : "").end()
                ;
          };
        }
        updatePrevFeaturedDemo = createDemoUpdates(-1, $demoPrev);
        updateNextFeaturedDemo = createDemoUpdates(1, $demoNext);

        // Show the next button and wire up click handler.
        $next_btn.show().click(function() {

            if (curr_idx == demos.length-1) {
                // If we're already at the end of the list, do nothing.
                return;
            }
            curr_idx++;

            // Fade out from right-to-left, update on fade out, fade back in if
            // there's a demo to show
            $demoNextPreview.fadeOut(200, updateNextFeaturedDemo);
            $demoMainPreview.delay(100).fadeOut(200, updateMainFeaturedDemo);
            if (curr_idx < demos.length-2) {
                // We have a next demo, so fade both it and the control in.
                $demoNextPreview.delay(200).fadeIn(200);
                $next_btn.fadeIn();
            } else {
                // No next demo, so fade out the control.
                $next_btn.fadeOut();
            }
            $demoPrevPreview.delay(300).fadeOut(200, updatePrevFeaturedDemo);
            $demoMainPreview.delay(400).fadeIn(200);
            if (curr_idx > 0) {
                // We have a prev demo, so fade both it and the control in.
                $demoPrevPreview.delay(500).fadeIn(200);
                $prev_btn.fadeIn();
            } else {
                // No prev demo, so fade out the control.
                $prev_btn.fadeOut();
            }

            return false;
        });

        // Show the previous button and wire up click handler.
        $prev_btn.show().click(function() {

            if (curr_idx == 0) {
                // If we're already at the start of the list, do nothing.
                return;
            }
            curr_idx--;

            // Fade out from left-to-right, update on fade out, fade back in if
            // there's a demo to show
            $demoPrevPreview.fadeOut(200, updatePrevFeaturedDemo);
            $demoMainPreview.delay(100).fadeOut(200, updateMainFeaturedDemo);
            if (curr_idx > 0) {
                // We have a prev demo, so fade both it and the control in.
                $demoPrevPreview.delay(200).fadeIn(200);
                $prev_btn.fadeIn();
            } else {
                // No prev demo, so fade out the control.
                $prev_btn.fadeOut();
            }
            $demoNextPreview.delay(300).fadeOut(200, updateNextFeaturedDemo);
            $demoMainPreview.delay(400).fadeIn(200);
            if (curr_idx < demos.length-2) {
                // We have a next demo, so fade both it and the control in.
                $demoNextPreview.delay(500).fadeIn(200);
                $next_btn.fadeIn();
            } else {
                // No next demo, so fade out the control.
                $next_btn.fadeOut();
            }

            return false;
        });

    });

  });

// ]]>
</script>

{% endblock %}