<div id="story_preview">
  <img src='assets/images/stories/ajax-loader.gif' class='preloader'/>
</div>

<h1 id="options_title"><span class="text">7 Billion Campaign <span class="for">for</span> 7 Billion Actions</span></h1>

<!-- VITRINE -->
<div id='slider'>
  <div class='photos'>
    <a href='' id='sliderBtLeft' class='arrow left'><img src='assets/images/arrows_left.png'/></a>
    <a href='' id='sliderBtRight' class='arrow right'><img src='assets/images/arrows_right.png'/></a>
    <div class='container' id='photosContainer'>
      
<?php
foreach($this->banners as $banner):
?>
      <div class='history'>
        <a href='<?= $banner->url; ?>' class='image'><img src='<?php echo $this->thumbUrl("banners/{$banner->image}", 790, 350); ?>' width='790' height='350'/></a>
        <div class='description'>
          <a href='<?= $banner->url; ?>'>
            <span class="title"><?= Pampa_Util_String::sample($banner->title, 75, '…'); ?></span>
            <span class="text"><?= Pampa_Util_String::sample($banner->description, 115, '…'); ?></span>
          </a>
        </div>
      </div>
<?php endforeach; ?>

    </div>
  </div>
  <!-- /VITRINE -->

  <!-- BOTOES LATERAIS -->
  <ul id="home_options">
    <li>
      <a href="http://www.facebook.com/7billionactions" class="joinfb">Join the movement on Facebook</a>
      <a href="<?= $this->urlTo('stories'); ?>" class="share">Share your story</a>
      <a href="<?= $this->urlTo('film'); ?>" class="submit">Submit a film</a>
      <a href="<?= $this->urlTo('music'); ?>" class="remix">Remix our Anthem</a>
      <a href="https://twitter.com/#!/search/%237Billion" class="jointtt">Join us on Twitter with #7Billion</a>
    </li>
  </ul>
  <!-- /BOTOES LATERAIS -->
</div>




<!-- STORIES -->
<div class="wrapper fullsize">
  <div style="width: 960px;margin:0 auto;">
    <a href="<?=$this->urlTo("stories")?>" class="see_all">See all stories and add your own</a>
    <div class="people_selector" id='peopleSelector'>
      <a href='javascript:;' onclick="showGrid()" class='icon ico_grid marked' rel="grid">Grid</a>
      <a href='javascript:;' onclick="showMap()" class='icon ico_map' rel="map">Map</a>
    </div>
  </div>
  <div class="clear"></div>

  <div class="people grid">
    <div class='container' id='itemsContainer'>
      <div class='slider' id='itemsSlider'>
        <div class='group'>
          <?php
          $storiesCount = 0;
          foreach ($this->stories as $story):
            $storiesCount++;
            ?>
            <div class='item'>
              <a href='<?php echo $this->linkTo('stories', 'preview', array('id' => $story->id)); ?>' class='image'><img src='<?php echo $this->thumbUrl("stories/{$story->image}", 171, 105); ?>' width='171' height='105'/></a>
              <a href='<?php echo $this->linkTo('stories', 'preview', array('id' => $story->id)); ?>' class='hover'><b>I am <?php echo Pampa_Util_String::sample($story->title, 15, '…'); ?></b><br/><?php echo "{$story->first_name} {$story->last_name}"; ?></a>
            </div>
            <?php
            if ($storiesCount%3 == 0 && $storiesCount != sizeof($this->stories)) {
              echo "</div><div class='group'>";
            }
          endforeach;
          ?>
        </div>
      </div>
    </div>
    <div class="clear"></div>
    <div class='scrollbar' id='uiScroll'></div>
    <div class="clear"></div>
  </div>

  <div id="people_map"></div>

</div>
<!-- /STORIES -->
<script type='text/javascript'>
var stories = <?= $this->storiesMapJson($this->stories); ?>;  
</script>



<!-- COLUMNS -->
<div id='footer'>
  <!-- 2 COLUMNS -->
  <div class='featured' id='featuredItems'>
    <div class='item first'>
      <h3>Latest <span>from the blog</span></h3>
      <div class='description'>
        <?php if(!empty($this->blogText->title)):?>
        <h4><?=$this->escape($this->blogText->title);?></h4>
        <?php endif; ?>
        <?=$this->escape($this->blogText->text);?>
      </div>

      <ul class="latest_list">
        <?php
        $rssCount = 0;
        foreach($this->rss as $entry):
          $rssCount++;
          $entryDate = new Zend_Date($entry->pubDate());
        ?>
        <li>
          <a href="<?=$entry->link(); ?>" target="_blank"><span class="title"><?=$entry->title();?></span>
            <span class="date"><?=date('d F Y', $entryDate->get());?></span></a>
        </li>
        <?php
          if($rssCount == 3){
            break;
          }
        endforeach;
        ?>
      </ul>
      
      <a href="http://7billionactions.tumblr.com/" target="_blank" class="older_posts">Older posts</a>
    </div>
    <div class='item last'>
      <!-- COUNTER -->
      <div class='counter'>
        <h3>Current <span>World Population</span></h3>
        <span id='counterFoo'></span>
        <p id='counterOutput'>6.934.678.806</p>
      </div>
      <!-- /COUNTER -->
      <h3>Social <span>Media</span></h3>
      <div class="fb-like-box" data-href="http://facebook.com/7billionactions" data-width="278" data-show-faces="false" data-stream="true" data-header="false"></div>
      <div class='clear'></div>
    </div>
    <div class='clear'></div>
  </div>
  <!-- /COLUMNS -->

  <!-- BANNERS -->
  <div class='featured banners'>
    <h3><b>Featured</b></h3>
    <div class='item first'>
      <a href='http://www.blogtalkradio.com/'><img src='assets/images/home_banners_talkradio.jpg'/></a>
      <a href='http://on.natgeo.com/q301cY'><img src='assets/images/home_banners_ngeographic.jpg'/></a>
      <a href='http://www.7billionandme.org/'><img src='assets/images/home_banners_7bandme.jpg'/></a>
      <a href='http://www.unfpa.org/swp/' class="last"><img src='assets/images/home_banners_population.jpg'/></a>
    </div>
    <!--div class='item first'>
      <a href='http://on.natgeo.com/q301cY'><img src='assets/images/home/bottom-banner1.gif'/></a>
    </div>
    <div class='item center'>
      <a href='http://www.7billionandme.org/'><img src='assets/images/home/bottom-banner2.gif'/></a>
    </div>
    <div class='item last'>
      <a href='http://www.unfpa.org/swp/'><img src='assets/images/home/bottom-banner3.gif'/></a>
    </div-->
    <br class='clear'/>
  </div>
  <!-- /BANNERS -->

  <!-- SLIDER -->
  <div class='organizations'>
    <h3><b>Organizations</b> making a difference</h3>
    <a href='<?= $this->urlTo('organizations'); ?>' class='button b1'>See all</a>
    <a href='<?= $this->linkTo('organizations', 'new'); ?>' class='button b2' id='add_organization'>Add your organization</a>
    <br class='clear'/>
    <a href='javascript:;' class='arrows left' id='orgsBtLeft'><img src='assets/images/home/slider-arrow_left.png'/></a>
    <a href='javascript:;' class='arrows right' id='orgsBtRight'><img src='assets/images/home/slider-arrow_right.png'/></a>
    <div class='slider'>
      <div class='container' id='orgContainer'>
        <?php foreach($this->organizations as $org):?>
        <div class='item'>
          <?php if(empty($org->text)):?>
          <a href='javascript:;'><img src='<?php echo $this->thumbUrl("stories/{$org->image}", 171, 100); ?>'/></a>
          <?php else: ?>
          <a href='<?php echo $this->linkToOrganization($org); ?>'><img src='<?php echo $this->thumbUrl("stories/{$org->image}", 171, 100); ?>'/></a>
          <?php endif; ?>
        </div>
        <?php endforeach; ?>
      </div>
    </div>
    <br class='clear'/>
  </div>
  <!-- /SLIDER -->

  <!-- SPONSORS -->
  <div class='sponsors'>
    <h3><b>Partners</b> supporting the campaign</h3>
    <div class="dvSponsors">
      <a href="http://www.nationalgeographic.com" target="_blank"><img src="assets/images/home/logo_nationalgeografic.jpg" width="159" height="98" alt="" /></a>
    </div>
    <div class="dvSponsors">
      <a href="https://foursquare.com" target="_blank"><img src="assets/images/home/logo_foursaquare.jpg" width="159" height="98" alt="" /></a>
    </div>
    <div class="dvSponsors">
      <a href="http://www.jnj.com" target="_blank"><img src="assets/images/home/logo_johnsonejohnson.jpg" width="159" height="98" alt="" /></a>
    </div>
    <div class="dvSponsors">
      <a href="http://www.itu.int" target="_blank"><img src="assets/images/home/logo_itu.jpg" width="159" height="98" alt="" /></a>
    </div>
    <div class="dvSponsors">
      <a href="http://www.mdgfund.org" target="_blank"><img src="assets/images/home/logo_mdgif.jpg" width="159" height="98" alt="" /></a>
    </div>
    <div class="dvSponsors ultimo">
      <a href="http://www.sap.com" target="_blank"><img src="assets/images/home/logo_sap.jpg" width="159" height="98" alt="" /></a>
    </div>
    <br class='clear'/>
  </div>
  <!-- /SPONSORS -->

</div>

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>