{embed="embeds/.wrapper" layout="sidebar-layout" nav_active="the-eye" default_title="The Eye" pre_meta="{pre_meta}"}
{!--  default_description="Your look inside the gaming industry - Red Storm presents The Eye." --}

{preload_replace:pre_meta=''}

{preload_replace:pre_title="Stories"}
{preload_replace:pre_channel="featured"}
{preload_replace:pre_categories=""}
{preload_replace:pre_limit="5"}
{preload_replace:pre_prefix="story"}
{preload_replace:pre_more_template="read"}
{preload_replace:pre_no_results="No stories found."}
{preload_replace:pre_excerpt="{if featured_excerpt}{featured_excerpt}{/if}{if news_excerpt}{news_excerpt}{/if}"}
{preload_replace:breadcrumbs='<ul class="breadcrumbs">{exp:crumbly:breadcrumbs root_breadcrumb:include="no"} <li> {if count != total_results}<a href="{breadcrumb_url}">{breadcrumb_title}</a>{/if} {if count == total_results}<span class="inactive">{breadcrumb_title}</span>{/if} </li> {/exp:crumbly:breadcrumbs} </ul>'}

    {exp:stash:set name="content" parse_tags="yes"}

        <div class="row the-eye">
          <section class="mod span12 pepa {segment_2}">
            {exp:switchee variable="{segment_2}" parse="inward" debug="yes"}

              {!-- /the-eye/ --}
              {case value=""}
                <header class="section-heading empty">
                  <h2>The Eye</h2>
                </header>
                <ul class="reset">
                  {exp:channel:categories category_group="11" style="linear" parent_only="yes" disable="pagination|member_data"}
                    {if the_eye_category_status == "open" || "{global:environment}" == "dev"}
                      <li class="listing-background">
                        <a href="/{segment_1}/{category_url_title}" class="highlight section-listing game-listing">
                          <span class="section-title listing-caption">{category_name}</span>
                          <img src="{category_image}" width="424" height="264">
                          <div class="caption">{category_description}</div>
                        </a>
                      </li>
                    {/if}
                  {/exp:channel:categories}
                  <li class="listing-background">
                    <span class="highlight section-listing game-listing disabled">
                      <span class="section-title listing-caption">COMING SOON - Meet the Team</span>
                      <img src="/img/under-construction.png" width="424" height="264">
                      <div class="caption">Meet the staff that make games happen</div>
                    </span>
                  </li>
                  <li class="listing-background">
                    <span class="highlight section-listing game-listing disabled">
                      <span class="section-title listing-caption">COMING SOON - Timeline</span>
                      <img src="/img/under-construction.png" width="424" height="264">
                      <div class="caption">The history of RSE</div>
                    </span>
                  </li>
                </ul>
              {/case}

              {!-- /the-eye/meet-the-team/ --}
              {case value="meet-the-team"}
                {switchee variable="{segment_3}" parse="inward" debug="yes"}

                  {!-- If nothing is in Segment 3, show the listing page... --}
                  {case value=""}
                    <header class="section-heading">
                      <h2>{segment_2_category_name}</h2>
                    </header>

                    {breadcrumbs}

                    <div class="inset">
                      <ul id="filters" class="reset option-set" data-option-key="filter">
                        <li><a href="#" data-filter="*" class="selected">Show All</a></li>
                        <li><a href="#" data-filter=".Animation">Animation</a></li>
                        <li><a href="#" data-filter=".Art">Art</a></li>
                        <li><a href="#" data-filter=".Audio">Audio</a></li>
                        <li><a href="#" data-filter=".Concept">Concept</a></li>
                        <li><a href="#" data-filter=".Design">Design</a></li>
                        <li><a href="#" data-filter=".Engineering">Engineering</a></li>
                        <li><a href="#" data-filter=".Production">Production</a></li>
                        <li><a href="#" data-filter=".Studio">Studio</a></li>
                        <li><a href="#" data-filter=".QA">QA</a></li>
                      </ul>
                      <ul class="thumbnails" id="isotope-team">
                        {exp:channel:entries channel="meet_the_team" dynamic="no" disable="categories|member_data|pagination" orderby="meet_the_team_last_name" sort="asc" limit="300" cache="yes" refresh="40320" status="open{global:show_closed_if_private}"}
                          <li class="item {meet_the_team_department}">
                            {!--<a href="{title_permalink='the-eye/meet-the-team'}">--}
                              <div class="thumbnail highlight">
                                    {exp:ce_img:pair src="{meet_the_team_alternate_headshot}" width="162" height="231" crop="yes|center,top|-12,0" cache="yes" refresh="40320" filter="auto_sharpen"}
                                      <img src="{made}" width="{width}" height="{height}">
                                    {/exp:ce_img:pair}
                                    {if meet_the_team_last_name == "Brock"}
                                      <img src="{meet_the_team_alternate_headshot}" width="162" height="231">
                                    {/if}
                                    {exp:ce_img:pair src="{meet_the_team_headshot}" width="162" height="231" crop="yes|center,top|-12,0" cache="yes" refresh="40320" filter="auto_sharpen"}
                                      <img src="{made}" width="{width}" height="{height}"{if meet_the_team_alternate_headshot} class="transparent-hover"{/if}>
                                    {/exp:ce_img:pair}
                                  {if meet_the_team_headshot == ''}
                                    <img src="http://placehold.it/162x231" width="162" height="231">
                                  {/if}
                                <div class="caption">
                                  <h5>{title}</h5>{!-- Employee Name --}
                                  <p><em>{meet_the_team_job_title}</em></p>
                                </div> {!-- /.caption --}
                              </div> {!-- /.thumbnail --}
                            {!--</a>--}
                          </li>
                        {/exp:channel:entries}
                      </ul>
                    </div>
                  {/case}

                  {!-- Else, show the individual Employee page when Segment 3 is populated --}
                  {case value="#^[a-z]([\w'-])*+$#"}

                    {exp:channel:entries channel="meet_the_team" dynamic="no" disable="categories|member_data|pagination" require_entry="yes" url_title="{segment_3}" cache="yes" refresh="40320" status="open{global:show_closed_if_private}"}

                      {!-- If no matches or if Segment 4 is populated, show 404 page --}
                      {if switchee_no_results}
                        {redirect="404"}
                      {/if}
                      <header class="section-heading">
                        <h2>{exp:ifelse parse="inward"}{if last_segment_category_name}{last_segment_category_name}{if:else}{title}{/if}{/exp:ifelse}</h2>
                        Use the Timespan add-on for dates, anniversaries, etc.
                      </header>

                      {breadcrumbs}

                      <div class="row push-base">
                        <div class="inset2">
                          <div class="span5">
                            <ul class="reset game-metadata pepa">
                              <ul class="reset game-release-date">
                                <h3>First Year of Service:</h3>
                                <li><small><time>{meet_the_team_first_year}</time></small></li>
                              </ul>
                              <ul class="reset">
                                <h3>Favorite Game:</h3>
                                <li><small>{meet_the_team_favorite_game}</small></li>
                              </ul>
                              <ul class="reset">
                                <h3>Quote:</h3>
                                <li><small>"I can't believe I ate the whole thing."</small></li>
                              </ul>
                            </ul>
                            <h4>BIO &amp; QA HERE</h4>
                            {meet_the_team_qa}<br><br>
                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum aliquam convallis mattis. Nunc eget dapibus nisl. Suspendisse malesuada ante vitae nibh aliquam vel consectetur nisl ullamcorper. Donec mattis nunc quis ipsum placerat porttitor. Duis fermentum, purus quis viverra lacinia, nisi mauris egestas enim, nec tempor libero velit id eros. Ut in lacus laoreet sapien aliquet lacinia ac ac urna. Vestibulum vel tellus et augue porta semper. Duis lacinia gravida purus. Duis ut magna est. Sed feugiat erat quis nisl bibendum gravida. Pellentesque a quam a eros tincidunt volutpat eu ut nisl.<br><br>
                            <h4>TITLES PERSON HAS WORKED ON</h4>
                          </div>{!-- /.span5 --}
                          <div class="span3">
                            {exp:ifelse parse="inward"}
                              {if meet_the_team_headshot}
                                {exp:ce_img:pair src="{meet_the_team_headshot}" max_width="218" crop="no" cache="yes" refresh="40320" filter="auto_sharpen"}
                                  <a class="highlight thumb push-base" href="{meet_the_team_headshot}">
                                    <img src="{made}" width="{width}" height="{height}">
                                  </a>
                                {/exp:ce_img:pair}
                              {if:else}
                                <a class="highlight thumb push-base" href="http://placekitten.com/218/308">
                                  <img src="http://placekitten.com/218/308" width="218" height="308">
                                </a>
                              {/if}
                            {/exp:ifelse}
                            <ul class="reset game-metadata pepa">
                              <ul class="reset game-release-date">
                                <h5>First Year of Service:</h5>
                                <li><small><time>{meet_the_team_first_year}</time></small></li>
                              </ul>
                              <ul class="reset">
                                <h5>Quote:</h5>
                                <li><small>"I can't believe I ate the whole thing."</small></li>
                              </ul>
                              <ul class="reset">
                                <h5>Favorite Game:</h5>
                                <li><small>{meet_the_team_favorite_game}</small></li>
                              </ul>
                            </ul>
                          </div>
                        </div>
                      </div> {!-- /.row --}

                    {/exp:channel:entries}

                  {/case}

                {/switchee}
              {/case}

              {!-- /the-eye/red-storm-real-time/ --}
              {case value="red-storm-real-time"}
                <header class="section-heading">
                  <h2>{segment_2_category_name}</h2>
                </header>
                <div class="row">
                  <div class="span3 widget" id="digiclock">
                    <header class="widget-heading">
                      <h6>North Carolina</h6>
                    </header>
                    <div class="widget-text striped time">
                      <span class="x60">{current_time format="%h:%i"}</span><span class="x30">{current_time format="%A"}</span>
                    </div>
                    <div class="widget-text">
                      <div class="x24 muted-darker pull-10">{current_time format="%l"}</div>
                      <div class="x24 muted push-10">{current_time format="%j %M %Y"}</div>
                    </div>
                    <footer class="widget-footer">
                      <span>The Time (EST -05:00)</span>
                    </footer>
                  </div>
                  <div class="span6 widget stretch">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Games - Titles Played, Week of X
                      </h6>
                    </header>
                    <div id="games-top-played">
                    </div>
                  </div>
                </div>
                <div class="row pull-left">
                  <div class="span6 widget stretch">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Games &#8211; Genres Played, Week of X
                      </h6>
                    </header>
                    <div id="games-top-genres">
                    </div>
                  </div>
                </div>
                <div class="row pull-right">
                  <div class="span3 widget music-feed">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Music Feed
                      </h6>
                    </header>
                    <div id="music-stream">
                    </div>
                    <footer class="widget-footer">
                      <span>Source: Last.fm, Pandora</span>
                    </footer>
                  </div>
                </div>
                <div class="row pull-left">
                  <div class="span3 widget">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Games Played (Hours)
                      </h6>
                    </header>
                    <div class="widget-text striped time">
                      <span class="x60">1025</span><span class="x30">HRS</span>
                    </div>
                    <div class="widget-text">
                      <div class="x24 muted-darker pull-10">TOTAL</div>
                      <div class="x24 muted push-10">Play Time</div>
                    </div>
                    <footer class="widget-footer">
                      <span>Since XXX</span>
                    </footer>
                  </div>
                  <div class="span3 widget">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Studio Gamerscore (X360)
                      </h6>
                    </header>
                    <div class="widget-text striped time">
                      <span class="x60">745,688</span>
                    </div>
                    <div class="widget-text">
                      <div class="x24 muted-darker pull-10">COMBINED</div>
                      <div class="x24 muted push-10">Gamerscore</div>
                    </div>
                    <footer class="widget-footer">
                      <span>As of {current_time format="%M %j, %Y"}</span>
                    </footer>
                  </div>
                </div>
                <div class="row pull-left">
                  <div class="span6 widget stretch">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Visitors by Country, Since January 1, 2012
                      </h6>
                    </header>
                    <div id="visitors-by-country">
                    </div>
                  </div>
                  {!--<div class="span3 widget">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Tweets (Total)
                      </h6>
                    </header>
                    <div class="widget-text">
                      Large text of absolute number of Tweets here.
                    </div>
                    <footer class="widget-footer">
                      <span><a href="//twitter.com/redstorm">Source: Twitter.com</a></span>
                    </footer>
                  </div>--}
                </div>
                <div class="row pull-left">
                  <div class="span3 widget">
                    <header class="widget-heading">
                      <h6>
                        <i class="led"></i>
                        Music &#8211; Top Genres, Week of X
                      </h6>
                    </header>
                    <div id="music-top-genres" class="widget-chart">
                    </div>
                  </div>
                </div>
              {/case}

              {!-- /the-eye/events/ or /the-eye/appearances/ --}
              {case value="events|appearances"}
                <header class="section-heading">
                  <h2>{segment_2_category_name}</h2>
                </header>

                {breadcrumbs}

                {switchee variable="{segment_3}" parse="inward"}

                  {case value="#^P(\d+)\/$#|''"}
                    <ul class="reset">
                      {exp:channel:entries channel="news|gallery" category="{segment_2_category_id}" disable="member_data" limit="14" paginate="bottom" status="not closed"}
                        <li class="listing-background">
                          <a href="{path='the-eye/{segment_2}/{url_title}'}" class="highlight section-listing">
                            <h4 class="listing-caption">{title}</h4>
                            {exp:ce_img:pair src="{gallery_cover}" fallback_src="{news_image}" width="424" height="264" crop="yes|center,top|0,0" cache="yes" refresh="86400" filter="auto_sharpen"}
                              <img src="{made}" width="{width}" height="{height}">
                            {/exp:ce_img:pair}
                          </a>
                        </li>
                      {/exp:channel:entries}
                    </ul>
                  {/case}

                  {case default="yes"}
                    <article class="full-post inset text-center">
                      <header>
                        <section class="slider">
                          <div id="slider" class="flexslider">
                            <ul class="slides">
                              {exp:channel:entries channel="news|gallery" category="{segment_2_category_id}" disable="member_data" limit="1" paginate="bottom" url_title="{segment_3}" status="not closed"}
                              {if switchee_no_results}{redirect="404"}{/if}
                              {exp:ce_img:bulk width="894" max_height="483" attributes='width="" height=""' crop="yes|smart_scale" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                {news_photo_gallery}<li><img src="{url}"></li>{/news_photo_gallery}
                                {gallery_images}<li><img src="{url}"></li>{/gallery_images}
                              {/exp:ce_img:bulk}
                            </ul>
                          </div>
                          <div id="carousel" class="flexslider">
                            <ul class="slides">
                              {exp:ce_img:bulk width="210" height="84" attributes='width="" height=""' crop="yes|center,center|0,0" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                {news_photo_gallery}
                                    <li><img src="{url}"></li>
                                {/news_photo_gallery}
                                {gallery_images}
                                    <li><img src="{url}"></li>
                                {/gallery_images}
                              {/exp:ce_img:bulk}
                              {/exp:channel:entries}
                            </ul>
                          </div>
                        </section>

{!--   first                            {if news_photo_gallery}
                                  {news_photo_gallery}
                                      {exp:ce_img:pair src="{url}" width="894" height="596" crop="yes|smart_scale" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}" width="{width}" height="{height}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/news_photo_gallery}
                              {/if}
                              {if gallery_images}
                                  {gallery_images}
                                      {exp:ce_img:pair src="{url}" width="894" height="596" crop="yes|smart_scale" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}" width="{width}" height="{height}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/gallery_images}
                              {/if}
                            </ul>
                          </div>
                          <div id="carousel" class="flexslider">
                            <ul class="slides">
                              {if news_photo_gallery}
                                  {news_photo_gallery}
                                      {exp:ce_img:pair src="{url}" width="210" height="114" crop="yes" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/news_photo_gallery}
                              {/if}
                              {if gallery_images}
                                  {gallery_images}
                                      {exp:ce_img:pair src="{url}" width="210" height="114" crop="yes" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/gallery_images}
                              {/if}--}

{!--    One possibility, and try crop|smart_scale                           {if news_photo_gallery}
                                  {news_photo_gallery}
                                      {exp:ce_img:pair src="{url}" width="894" height="596" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/news_photo_gallery}
                              {/if}
                              {if gallery_images}
                                  {gallery_images}
                                      {exp:ce_img:pair src="{url}" width="894" height="596" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/gallery_images}
                              {/if}
                            </ul>
                          </div>
                          <div id="carousel" class="flexslider">
                            <ul class="slides">
                              {if news_photo_gallery}
                                  {news_photo_gallery}
                                      {exp:ce_img:pair src="{url}" width="210" height="114" crop="yes" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/news_photo_gallery}
                              {/if}
                              {if gallery_images}
                                  {gallery_images}
                                      {exp:ce_img:pair src="{url}" width="210" height="114" crop="yes" cache="yes" refresh="86400" quality="80" filter="auto_sharpen"}
                                        <li>
                                          <img src="//d0.redstorm.com{made}">
                                        </li>
                                      {/exp:ce_img:pair}
                                  {/gallery_images}
                              {/if}--}


                    <footer class="inset">
                      <ul class="pager">
                        <li class="previous">
                          {exp:channel:prev_entry channel="news|gallery" category="{segment_2_category_id}" url_title="{segment_3}" disable="member_data pagination"}
                            <a href="/{segment_1}/{segment_2}/{url_title}/" title="{title}" rel="prev">&larr; {title}</a>
                          {/exp:channel:prev_entry}
                        </li>
                        <li class="next">
                          {exp:channel:next_entry channel="news|gallery" category="{segment_2_category_id}" url_title="{segment_3}" disable="member_data pagination"}
                            <a href="/{segment_1}/{segment_2}/{url_title}/" title="{title}" rel="next">{title} &rarr;</a>
                          {/exp:channel:next_entry}
                        </li>
                      </ul>
                    </footer>

                    <hr>

                    <aside class="mod comments pepa" id="comments">
                        <div class="fb-comments" data-href="{current_url}" data-num-posts="10" data-width="902" data-colorscheme="dark"></div>
                    </aside>

                  {/case}

                {/switchee}

              {/case}

              {!-- /the-eye/the-armory/ --}
              {case value="the-armory"}
                <header class="section-heading">
                  <h2>{segment_2_category_name}</h2>
                </header>
                <div class="row">
                </div>
              {/case}

              {!-- /the-eye/timeline/ --}
              {case value="timeline"}

                <header class="section-heading">
                  <h2>Timeline</h2>
                </header>

                {breadcrumbs}

                {!-- BEGIN Timeline Embed --}
                <div id="timeline-embed"></div>
                <script>
                  var timeline_config = {
                    width: '940',
                    height: '700',
                    hash_bookmark: true,
                    source: 'https://docs.google.com/spreadsheet/pub?key=0Ah-lFloNCI9pdHNRbDN1bU1lSThBbmtJZzQ3NzM5Y2c&output=html',
                    font:   'Merriweather-NewsCycle',
                    css:    '/js/libs/timeline/css/dark.css',
                    js:  '/js/libs/timeline/js/timeline-min.js'
                  }
                </script>
                <script>
                  head.ready("jquery", function() {
                    head.js("/js/libs/timeline/timeline-embed.js");
                  });
                </script>
                {!-- END Timeline Embed --}

              {/case}

              {!-- /the-eye/misc/ --}
              {case value="misc"}

                {switchee variable="{segment_3}" parse="inward" debug="yes"}

                  {!-- /the-eye/misc/the-many-hats-of-nathan/ --}
                  {case value="the-many-hats-of-nathan"}
                    <header class="section-heading">
                      <h2>The Many Hats of Nathan</h2>
                    </header>
                    <ul class="thumbnails inset">
                      <li>
                        <a href="http://redstorm.com/images/uploads/cat3.jpg" rel="gallery" class="thumb">
                          <img src="http://placehold.it/165x124" width="165" height="124">
                        </a>
                      </li>
                      <li>
                        <a href="http://redstorm.com/images/uploads/cat3.jpg" rel="gallery" class="thumb">
                          <img src="http://placehold.it/165x124" width="165" height="124">
                        </a>
                      </li>
                      <li>
                        <a href="http://redstorm.com/images/uploads/cat3.jpg" rel="gallery" class="thumb">
                          <img src="http://placehold.it/165x124" width="165" height="124">
                        </a>
                      </li>
                      <li>
                        <a href="http://redstorm.com/images/uploads/cat3.jpg" rel="gallery" class="thumb">
                          <img src="http://placehold.it/165x124" width="165" height="124">
                        </a>
                      </li>
                    </ul>
                  {/case}

                {/switchee}

              {!-- end /the-eye/misc/ --}
              {/case}

            {/exp:switchee}
          </section>
        </div>

    {/exp:stash:set}