hummingbird-me/hummingbird

- title "Explore Anime"

.anime-discover.anime-explore
  .row
    .large-12.columns
      .large-9.columns.no-padding
        .large-12.columns.no-padding
          %p.cf.browse-label Browse By:
          %ul.panel.rounded-panel.inline-list.explore-filter
            %li
              %a.year-filter(href="javascript:void(0)")
                Year
                %i.fa.fa-caret-down

            %li
              %a.genre-filter(href="javascript:void(0)")
                Genre
                %i.fa.fa-caret-down

            %li
              %a.popular-filter(href="javascript:void(0)")
                Order
                %i.fa.fa-caret-down

            %li= link_to "Anticipated", anime_filter_path(sort: "all", y: ["Upcoming"])
            %li= link_to "Airing Soon", anime_filter_path(sort: "oldest", y: ["Upcoming"])

      .large-3.columns
        %a.button.padded.secondary(href="/random/anime")
          %i.fa.fa-random
          Something Random


    .large-12.columns
      %h4.top-title= 'Trending Today'
      %hr.title-divider

      .large-12.columns.no-padding.trending-panel
        %ul
          - @trending_anime.each do |anime|
            = link_to anime do
              %li.large-2.columns.single-wrapper
                .popular-card.tip-top(data-tooltip title="#{anime.canonical_title(current_user)}")
                  %p.wanna-watch
                  = image_tag(anime.poster_image.url(:large), alt: anime.canonical_title)
                  %p.title= anime.canonical_title(current_user)
  .row
    .large-12.columns
      .panel.rounded-panel
        .large-12.columns
          %h4 Recently Reviewed
          %hr 
        .large-12.columns.recent-panel
          %ul.recently-reviewed
            - @recent_reviews.each do |review|
              %li.large-1.columns.recent-review.tip-top(data-tooltip title="#{review.anime.canonical_title(current_user)}")
                = link_to image_tag(review.anime.poster_image.url(:large), alt: "#{review.anime.canonical_title} Review"), anime_review_path(review.anime, review)

  .row
    .large-8.columns
      .panel.rounded-panel
        .large-12.columns
          %h4 Trending Reviews
          = render partial: "reviews/review", collection: @trending_reviews, locals: {image: :anime}
          :javascript
            (function() {
              $(".chart").easyPieChart({
                size: 86
              });
            
            }).call(this);
          :css
            .chart {
              margin: 10px;
              font-size: 2em;
              font-weight: bold;
            }
          %hr

          %p.center.reviews-footer
            %a.tip-top(data-tooltip href="javascript:void(0)" title="Coming Soon™") Load More Reviews

    .large-4.columns.explore-sidebar
      .panel.rounded-panel.center.side-advert
        .large-12.columns.no-padding-left.no-padding
        :javascript
          google_ad_client = "ca-pub-3410319844519574";
          /* Homepage Sidebar */
          google_ad_slot = "8094424442";
          google_ad_width = 300;
          google_ad_height = 250;

        %script{:src => "http://pagead2.googlesyndication.com/pagead/show_ads.js", :type => "text/javascript"}
      .panel.rounded-panel
        = render partial: "shared/forum_widget"

  .popovers.hide
    .genre-filter-popover
      .filter.genre-filter-popover-content
        .row
          - Genre.default_filterable(current_user).each do |genre|
            .large-4.columns
              = link_to genre.name, anime_filter_path(g: [genre]), class: 'filter-option'

    .popular-filter-popover
      .filter.popular-filter-popover-content
        = link_to "Highest Rated", anime_filter_path(sort: "rating"), class: 'filter-option'
        = link_to "Most Popular", anime_filter_path(sort: "popular"), class: 'filter-option'

    .year-filter-popover
      .filter.year-filter-popover-content
        = link_to "All", anime_filter_path(y: @filter_years), class: 'filter-option'
        - @filter_years.each do |year|
          = link_to year, anime_filter_path(y: [year]), class: 'filter-option'

:coffee
  $("a.genre-filter").popover
    animation: true
    placement: "bottom"
    html: true
    trigger: "manual"
    content: $(".popovers .genre-filter-popover").html()
  
  $("a.popular-filter").popover
    animation: true
    placement: "bottom"
    html: true
    trigger: "manual"
    content: $(".popovers .popular-filter-popover").html()
  
  $("a.year-filter").popover
    animation: true
    placement: "bottom"
    html: true
    trigger: "manual"
    content: $(".popovers .year-filter-popover").html()
    
  filterElements = [$("a.genre-filter"), $("a.popular-filter"), $("a.year-filter")]
  _.each filterElements, (f) ->
    f.click ->
      show = true
      if $(this).hasClass "active-filter"
        show = false
      _.each filterElements, (f2) -> 
        f2.popover('hide')
        f2.removeClass "active-filter"
      if show
        $(this).popover('show')
        $(this).addClass "active-filter"