{assign var="enableUserCreatedChallengeFilter" value=false}
{if $hubbub->hubbub_arrOptions.enableUserCreatedChallengeFilter === 1 || !isset($hubbub->hubbub_arrOptions.enableUserCreatedChallengeFilter)}
  {assign var="enableUserCreatedChallengeFilter" value=true}
{/if}
<div id="challengeBrowser">

    <div class="b-challenges mdl-challenges" id="overview_frame">

        <h2 class="type-style-headerXL mdl-challenges__title">
          {Translation::t($selectedNavPage, 'page_title')}
        </h2>

        {if $selectedNavPage->data.page_text ne ''}
            <p class="b-challenges__description">{Translation::t($selectedNavPage,'page_text')}</p>
        {/if}


        <div class="b-challenges__results">

        <form id="filter_form" class="i-challenges__action-bar-container">

            <div class="mdl-filter">

              <div class="mdl-filter__items -end">

                <div class="b-challenges__options-count" style="display:none;">
                    {"Showing"|gettext}: <span><span class="result-count"></span> {"Challenges"|gettext}</span>
                </div>

                {if $hasUserCreatedChallenges}
                  <div class="mdl-filter__item">
                    <label class="
                      challenge-filter filter-user-created mdl-form__label -inline
                      {if $enableUserCreatedChallengeFilter}active{/if}
                    " data-filter=".filter-user-created">
                      <span class="mdl-form__input -faux -checkbox {if $enableUserCreatedChallengeFilter}-checked{/if}"></span>
                      {"User created"|gettext}
                    </label>
                  </div>
                {/if}

                <div class="mdl-filter__item">
                  <label class="challenge-filter filter-archived mdl-form__label -inline" data-filter=".filter-archived">
                    <span class="mdl-form__input -faux -checkbox"></span>
                    {"Archived"|gettext}
                  </label>
                </div>

                <div class="mdl-filter__item">
                  <label class="challenge-filter filter-ended mdl-form__label -inline" data-filter=".filter-ended">
                    <span class="mdl-form__input -faux -checkbox"></span>
                    {"Closed"|gettext}
                  </label>
                </div>

                <div class="mdl-filter__item">
                  <label class="hidden" for="challenge-sort">{"Sort challenges"|gettext}</label>
                  <select id="challenge-sort" name="challenge-sort" class="i-mix-sort mdl-form__input -select">
                    <option value="order:asc">{"Default"|gettext}</option>
                    <option value="id:desc">{"Newest"|gettext}</option>
                    <option value="ideas:desc">{"Most Ideas"|gettext}</option>
                  </select>
                </div>

                <button class="i-sort-grid__trigger i-sort-grid__trigger--active mdl-filter__item mdl-filter__button mdl-button -icon-only" data-list-style="grid">
                  <span class="mdl-icon"><svg><use href="#grid"></use></svg></span>
                  <span class="hidden">{"Show challenges as grid"|gettext}</span>
                </button>
                <button class="i-sort-grid__trigger mdl-filter__item mdl-filter__button mdl-button -icon-only" data-list-style="list">
                  <span class="mdl-icon"><svg><use href="#feed"></use></svg></span>
                  <span class="hidden">{"Show challenges as list"|gettext}</span>
                </button>

              </div>
            </div>

            <div class="mdl-filter mdl-form -inverted" {if count($categories) eq 0}style="display:none;"{/if}>

                <div class="mdl-filter__title">
                    <span>{"Filter"|gettext}</span> {"Categories"|gettext}
                </div>
                <div class="mdl-filter__items -full-padding">
                    <ul class="mdl-form__group -inline">
                        {foreach $categories as $category}
                        <li class="mdl-form__item -inline">
                          <label
                            class="challenge-filter mdl-form__label -wrap filter-{$category->data['globalcategory_id']}"
                            data-filter=".filter-{$category->data['globalcategory_id']}"
                          >
                            <span class="mdl-form__input -faux -checkbox"></span>
                            {$category->data['globalcategory_name']}
                          </label>
                        </li>
                        {/foreach}
                    </ul>
                </div>

            </div>

        </form>

            <!-- b_challenge_browseList -->
        <div id="challenge-container" class="mdl-grid -x3 i-challenges__list i-infinite-scroll b-challenges__list b-challenges--grid-view clearfix" data-list-style="grid">
            {include file=Template::get('category/browseList.html')}
        </div>

        </div>

    </div>
</div>

<script type="text/javascript">
    (function($) {
        $(document).ready(function() {
            var action_bar_affixed = false;
            var filterCategory="";
            var filterTags=new Array();
            var filterStatus=new Array("challengeStatus-0");

            $('.i-chosen').chosen({
                disable_search_threshold: 10
            });

            // Switch list styles
            $('.i-sort-grid__trigger').click(function() {
                var list_style = $(this).data('list-style');

                $('.i-challenges__list').removeClass(function(index, css) {
                    // Remove all view style classes, with a "b-challenges--*-view" class
                    return (css.match(/(^|\s)b-challenges--\S+-view/) || []).join(' ');
                });
                $('.i-challenges__list').addClass('b-challenges--' + list_style + '-view');
                if (list_style === 'list') {
                  jQuery('.i-challenges__list').removeClass('-x3');
                } else {
                  jQuery('.i-challenges__list').addClass('-x3');
                }
                $('.i-challenges__list').attr('data-list-style', list_style);

                $('.i-sort-grid__trigger--active').removeClass('i-list-style-switch--active b-sort-grid__icon--active');
                $(this).addClass('i-sort-grid__trigger--active b-sort-grid__icon--active');

                return false;
            });

            // TODO: move this into its own dependency/class.
            // Will do this when redoing the HTML front-end
            var countdown = function() {
                return {
                    /**
                     * Initialises the countdown timer
                     * @return void
                     */
                    init: function() {
                        var now = new Date();
                        $.each($('.i-countdown'), function(i, element) {
                            var hours         = $(this).find('.i-countdown__hours'),
                                minutes       = $(this).find('.i-countdown__minutes'),
                                seconds       = $(this).find('.i-countdown__seconds'),
                                days          = $(this).find('.i-countdown__days'),
                                daysContainer = $(this).find('.i-countdown__daysContainer'),
                                daysPlural    = $(this).find('.i-countdown__daysLabelPlural'),
                                daysSingular  = $(this).find('.i-countdown__daysLabelSingular'),
                                container     = $(this),
                                end_date = new Date(now.getTime() + (60 * 60 * 24 * 1000));

                            //var time_to_countdown_end = end_date.getTime() - now.getTime();
                            var time_to_countdown_end = parseInt($(this).data('countdown')) * 1000;
                            var timer = setInterval(function() {
                                if (time_to_countdown_end > 0) {
                                    container.show();
                                } else {
                                    container.hide();
                                }
                                var time_to_end = countdown.parse_time(time_to_countdown_end);

                                hours.html(time_to_end.hh);
                                minutes.html(time_to_end.mm);
                                seconds.html(time_to_end.ss);
                                days.html(time_to_end.days);

                                if (time_to_end.days>1) {
                                    daysPlural.show();
                                    daysSingular.hide();
                                } else {
                                    daysPlural.hide();
                                    daysSingular.show();
                                }

                                time_to_countdown_end -= 1000;
                            }, 1000);
                        });

                        // Add blinker class on countdown initialisation
                        // to sync up the seconds
                        $('.i-countdown__blinker').addClass('b-countdown__metric-value-separator--blinker');
                    },

                    /**
                     * Parses a ms (millisecond) formatted time into hours, minutes & seconds
                     * @param  int time in ms
                     * @return object containing parsed hours, minutes and seconds
                     */
                    parse_time: function(time) {
                        var days = Math.floor(time / 1000 / 60 / 60 / 24);
                        time -= days * 1000 * 60 * 60 * 24;
                        var hh = Math.floor(time / 1000 / 60 / 60);
                        time -= hh * 1000 * 60 * 60;
                        var mm = Math.floor(time / 1000 / 60);
                        time -= mm * 1000 * 60;
                        var ss = Math.floor(time / 1000);

                        return {
                            hh: hh < 10 ? '0' + hh : hh,
                            mm: mm < 10 ? '0' + mm : mm,
                            ss: ss < 10 ? '0' + ss : ss,
                            days: days,
                        }
                    }
                }
            }();
            countdown.init();

            var infinite_scroll = function() {
                var
                    infinite_scroll_container = null,

                    // We're going to load new items before the user sees the bottom of the page,
                    // this offset will be used to determine how far away the user needs to be to
                    // trigger the infinite scrolling
                    autoload_offset = 480,

                    // Flag to prevent duplicate triggers whilst loading items
                    currently_loading = false,

                    // Only here to provide content for the infinite scroll demo.
                    // Should be removed when hooked in to the API.
                    clone_index = 0,

                    can_load_more = true,

                    timeout = undefined;

                return {
                    init: function() {
                        infinite_scroll_container = $('.i-infinite-scroll');

                        infinite_scroll.add_scroll_handlers();

                        if(infinite_scroll.check_scroll_position() && can_load_more) {
                            infinite_scroll.load_items();
                        }
                    },

                    check_scroll_position: function() {
                            var scroll_position = $(document).scrollTop(),
                                infinite_scroll_container_position = infinite_scroll_container.position(),
                                infinite_scroll_container_height = infinite_scroll_container.outerHeight();
                            var bottom_of_infinite_scroll_container = infinite_scroll_container_position.top + infinite_scroll_container_height;

                            if(scroll_position >= bottom_of_infinite_scroll_container - $(window).height() - autoload_offset) {
                                if(!currently_loading) {
                                    return true;
                                }
                            }

                            return false;
                    },

                    /**
                     * Adds the relevant handlers to provide
                     * infinite scrolling functionality
                     *
                     * @return void
                     */
                    add_scroll_handlers: function() {
                        $(document).scroll(function() {
                            if(infinite_scroll.check_scroll_position()) {
                                infinite_scroll.load_items();
                            }
                        });
                    },

                    /**
                     * Adds placeholder items to the infinite scroll list,
                     * and sets the currently_loading flag to true to prevent further triggers
                     *
                     * @return void
                     */
                    add_placeholder_items: function() {
                        var placeholders_to_add = 6,
                            list_style_type = $('.i-challenges__list').attr('data-list-style');

                        if(!currently_loading) {
                            currently_loading = true;

                        }
                    },

                    /**
                     * AJAX call to load items via infinite scrolling
                     *
                     * @return void
                     */
                    load_items: function() {
                        /*$.ajax({
                            beforeSend: function() {
                                currently_loading = true;
                            },
                            success: function() {
                                timeout = setTimeout(function() {
                                    infinite_scroll.append_loaded_items();
                                    currently_loading = false;
                                }, Math.random() * 1000);
                            }
                        });*/
                        can_load_more = ChallengeBrowser.loadMoreChallenges();
                    },

                    /**
                     * Adds loaded items to the DOM
                     *
                     * @return void
                     */
                    append_loaded_items: function() {
                        for(var i = 0; i < 6; i++) {
                            item = $('.b-challenge').eq(i).clone().removeAttr('style');

                            $('.i-infinite-scroll').append(item);

                            clone_index = clone_index < 5 ? clone_index + 1 : 0;
                        }
                    }
                }
            }();
            infinite_scroll.init();

            var dropdown = function() {
                var animation = {
                    time: 200,
                    easing: 'easeOutCubic'
                };

                return {
                    init: function() {
                        this.add_click_handlers();
                    },

                    add_click_handlers: function() {
                        _this = this;

                        $('.i-dropdown__trigger').click(function() {
                            if($(this).hasClass('i-dropdown--active')) {
                                _this.close(this);
                            } else {
                                _this.open(this);
                            }
                            return false;
                        });
                    },

                    close: function(element) {
                        if(typeof(element) === 'undefined') {
                            element = $('.i-dropdown--active');
                        }

                        $(element).removeClass('b-dropdown__trigger--active i-dropdown--active');
                        $(element).next('.i-dropdown__list').slideUp(animation.time, animation.easing);

                        this.toggle_caret_direction(element, 'down');
                    },

                    open: function(element) {
                        this.close($('.i-dropdown--active'));

                        $(element).addClass('b-dropdown__trigger--active i-dropdown--active');
                        $(element).next('.i-dropdown__list').slideDown(animation.time, animation.easing);

                        this.toggle_caret_direction(element, 'up');
                    },

                    toggle_caret_direction: function(element, direction) {
                        if(direction == 'down') {
                            $(element).find('.i-dropdown__caret').removeClass('fa-caret-up').addClass('fa-caret-down');
                        } else {
                            $(element).find('.i-dropdown__caret').removeClass('fa-caret-down').addClass('fa-caret-up');
                        }
                    }
                }
            }();
            dropdown.init();



            var tag_bar = function() {
                var trigger = $('.i-filter-dropdown__trigger'),
                    element = $('.i-filter-dropdown__list'),
                    is_open = false;

                return {
                    init: function() {
                        tag_bar.add_click_handlers();
                    },

                    add_click_handlers: function() {
                        $('.i-tag').click(function() {
                            var tag = $(this).clone(),
                                tag_id = $(this).data('tag-id');

                            if($('.i-active-filters-list .i-tag--active[data-tag-id="'+tag_id+'"]').length) {
                                tag_bar.remove_tag_filter(this);
                            } else {
                                tag_bar.add_tag_filter(this);
                            }

                            return false;
                        });

                        $(document).on('click', '.i-tag--remove', function() {
                            tag_bar.remove_tag_filter(this);
                            return false;
                        });
                    },

                    add_tag_filter: function(tag) {
                        $(tag).addClass('b-tag--active i-tag--active');

                        var tag = $(tag).clone(true),
                            tag_id = tag.data('tag-id');

                        $(tag).addClass('b-tag--active i-tag--active');

                        tag.addClass('b-tag--active i-tag--active');
                        tag.append('<span class="mdl-icon -s i-tag--remove"><svg><use href="#cancel"></use></svg>');

                        $('.i-active-filters-list').append(tag);
                    },

                    remove_tag_filter: function(tag) {
                        var tag_id = $(tag).data('tag-id');

                        $('.i-active-filters-list .i-tag--active[data-tag-id="'+tag_id+'"]').remove();
                        $(tag).removeClass('b-tag--active i-tag--active');
                        $('.i-tag--active[data-tag-id="'+tag_id+'"]').removeClass('b-tag--active');
                    }
                }
            }();
            tag_bar.init();

            //ChallengeBrowser.fixChallengeHeight();




        });
    })(jQuery);
</script>