<!DOCTYPE html>
<html ng-app="folderPluginWidget">
<head lang="en">
    <title>widget</title>
    <meta charset="UTF-8">
    <!-- CSS -->
    <script type="text/javascript">
  !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t){var e=document.createElement("script");e.type="text/javascript";e.async=!0;e.src=("https:"===document.location.protocol?"https://":"http://")+"cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)};analytics.SNIPPET_VERSION="4.0.0";
      analytics.load("J1oyXILpnXqpbf1dnVSnxscVDzL4MqKh");
  analytics.page();
  }}();
    </script>
    <link href="../../../scripts/owlCarousel/owlCarousel.css" rel="stylesheet" />
    <link rel="stylesheet" href="../../../styles/helper.css">
    <link rel="stylesheet" href="../../../styles/siteIcons.css">
    <link rel="stylesheet" href="css/style.css">
    <!-- JS -->
    <script src="../../../scripts/jquery/jquery-1.11.2.min.js"></script>
    <script src="../../../scripts/smartcrop.js"></script>
    <script src="../../../scripts/angular/angular.min.js"></script>
    <script src="js/angular-owl-carousel.js"></script>
    <script type="text/javascript" src="../../../scripts/buildfire.js"></script>
    <script type="text/javascript" src="../../../scripts/owlCarousel/owlCarousel.js"></script>
    <script src="../../../scripts/buildfire/components/carousel/carousel.js"></script>
    <script src="../../../scripts/buildfire/components/pluginInstance/sortableList.js"></script>
    <script src="../../../scripts/angular/ng-infinite-scroll.custom.js " type="application/javascript"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript" src="app.services.js"></script>
    <script type="text/javascript" src="directives.js"></script>
    <script type="text/javascript" src="widget.controller.js"></script>
    <script type="text/javascript" src="widget.services.js"></script>

</head>
<body  ng-cloak data-back-img="{{ data.design.backgroundImage}}" class="infinite-scroll-parent">
    <style>
        .layout-6 .list-item-media {
            background-color: transparent !important;
        }

        .folder-plugin-text:empty + div .layout3 .list-layout {
            border-top: 0;
        }

        #mainContainer {
            position: relative;
        }

        .icon3, .icon4 {
            font-size: 140px;
        }

        .icon5 {
            font-size: 130px;
            position: relative;
            top: 22px;
        }

        .icon6 {
            font-size: 120px;
            position: relative;
            top: 15px;
        }

        .fullHeight {
            height: 100%;
        }

        .marginTop {
            margin-top: 1px;
        }

        .owl-dots {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var slides = $('.plugin-slider .plugin-slide').length;

            // Slider needs at least 2 slides or you'll get an error.
            if (slides > 1) {
                $('.plugin-slider').owlCarousel({
                    loop: false,
                    nav: false,
                    items: 1
                });
            }
        }

    </script>
    <div data-ng-init="setWidth()" class="holder padding-zero hasBackground fullHeight" id="mainContainer">
        <div class="folder-plugin list-layout fullHeight">
            <!--
        Top

    -->
            <div ng-controller="folderPluginCtrl"> 
                <div ng-class="{ 'hidden': data.content.carouselImages.length === 0 }" class="plugin-banner clearfix" ng-hide="data.design.selectedLayout == 12">
                    <div id="carousel" class="plugin-slider text-center" ng-style="data.content.carouselImages.length > 0 ? {'min-height': (9 * deviceWidth / 16) + 'px' } : {}"></div>
                </div>
                <div class="text-left padded padding-bottom-zero clearfix folder-plugin-text hide-empty " ng-bind-html="safeHtml(data.content.text1)" ng-hide="data.design.selectedLayout == 12"></div>

            </div>

            <!--
        This is where the tabata starts

    -->

            <div class="tabata" ng-controller="tabata">
                <audio id="short" src="https://www.soundjay.com/button/sounds/beep-07.mp3" autostart="false"></audio>
                <audio id="long" src="https://www.soundjay.com/button/sounds/beep-01a.mp3" autostart="false"></audio>

                <div class="top">
                      <span>Rounds</span>
                    <input type="number" ng-model="setrounds" ng-change="setRounds()" placeholder="Rounds" /><br />

                </div>
                <div class="timer" ng-init="wsec = 20; wdec = 0; rsec = 10; rdec = 0;">
                    <h3 style="margin-bottom:10px;padding-bottom:10px;border-bottom: 2px solid;">{{seconds}}.{{wdec}}</h3>
                    <h3>{{restseconds}}.{{rdec}}</h3>

                </div>
                <!--
                    
                -->
                <div class="countdown" ng-show="cshow" ng-init="cshow=false;" style="color:white;"><span id="cdown">{{countdown}}</span></div>
                <div class="countdown" ng-show="fshow" ng-init="fshow=false;" style="color:white;"><span id="fmes">{{fmessage}}</span></div>
                <h4 style="color:#c91818;" ng-init="setrounds = 8; setRounds();">Rounds Left</h4>
                <h4 style="color:white;">{{rounds}}/{{setrounds}}</h4>
                <button ng-click="bstart()">Start</button>
                <button ng-click="stop()">Stop</button>
                <button ng-click="reset()">Reset</button>
            </div>

            <style>
                .tabata {
                    text-align: center;
                    color: white;
                    padding-bottom: 10px;
                }

                .timer {
                    float: left;
                    width: 100%;
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    border-bottom: 2px solid;
                }

                .tabata h3 {
                    font-size: 25vw;
                    color: #c91818;
                    width: auto;
                }

                .tabata input {
                    background: none;
                    border: none;
                    border-bottom: 2px solid black;
                    padding-bottom: 3px;
                    width: 30%;
                    float: left;
                    font-size:18px;
                }

                .tabata button {
                    background: none;
                    font-size: 8vw;
                    padding: 5px;
                    width: auto;
                    height: auto;
                }

                .top {
                    float: left;
                    width: 100%;
                    border-bottom: 2px solid;
                    height: auto;
                    margin-bottom: 10px;
                    padding-bottom: 10px;
                    padding-top: 10px;
                }

                    .top span {
                        float: left;
                        width: 40%;
                        text-align: right;
                        padding-right: 10px;
                    }

                .countdown {
                    position: fixed;
                    top: 30vh;
                    width:100%;
                    background: none;
                    height:auto;
                }

                    #cdown {
                        text-align: center;
                        font-size: 80vw;
                    }

                    #fmes {
                        font-size: 20vw;
                    }
            </style>
            <!--
        This is where the tabata ends

    -->
            <div ng-controller="folderPluginCtrl1">

                <div class="text-left padded padding-bottom-zero clearfix folder-plugin-text hide-empty " ng-bind-html="safeHtml(data.content.text)" ng-hide="data.design.selectedLayout == 12"></div>
                <div ng-if="data.design.selectedLayout && data.plugins.length > 0" ng-class="{'marginTop': data.design.selectedLayout == 11, 'fullHeight': data.design.selectedLayout == 12}" infinite-scroll="paging()"
                     data-infinite-container=".infinite-scroll-parent">
                    <!-- Layout 1 -->
                    <div class="media-center-plugin layout3" ng-if="data.design.selectedLayout == 1">
                        <div class=" list-layout">
                            <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                                <div class="list-item-media text-left overflow-hidden">
                                    <div class="list-media-holder square-icon pull-left">
                                        <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="180" crop-height="180" crop-type="crop" ng-if="plugin.iconUrl">
                                        <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                    </div>
                                    <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                        <p class="ellipsis margin-zero margin-top-twenty">{{ plugin.title }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 1 -->
                    <!-- Layout 2 -->
                    <div class="holder padding-zero" ng-if="data.design.selectedLayout == 2">
                        <div class="media-center-plugin layout3">
                            <div class="list-layout">
                                <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                                    <div class="list-item-media text-left overflow-hidden">
                                        <div class="list-media-holder pull-left">
                                            <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="220" crop-height="120" crop-type="crop" ng-if="plugin.iconUrl">
                                            <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                        </div>
                                        <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                            <p class="ellipsis margin-zero bodyTextTheme margin-top-twenty">{{ plugin.title }}</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 2 -->
                    <!-- Layout 3 -->
                    <div>
                        <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 3">
                            <div class="plugin-banner clearfix border-bottom-grey">
                                <div class="plugin-slide text-center">
                                    <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-16x9.png', {width: 450, height: 254}) }}');"></div>
                                    <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="450" crop-height="254" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                                    <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                                </div>
                            </div>
                            <div class="padded text-left">
                                <a class="text-primary" ng-if="data.design.hideText!==undefined? !data.design.hideText : '' ">{{ plugin.title }}</a>
                                <a class="text-primary" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</a>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 3 -->
                    <!-- Layout 4 -->
                    <div>
                        <div class="plugin-banner has-info-bar clearfix" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 4">
                            <div class="plugin-slide text-center">
                                <img load-image="16x9" data-final-src="{{ plugin.iconUrl }}" crop-width="450" crop-height="254" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                                <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                            </div>
                            <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                                <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">{{ plugin.title }}</p>
                            </div>
                            <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                                <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">{{ plugin.title }}</p>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 4 -->
                    <!-- Layout 5 -->
                    <div class="padded padding-top-zero padding-bottom-zero" ng-if="data.design.selectedLayout == 5">
                        <div class="list-layout layout5">
                            <div ng-repeat="pluginRow in data.plugins" class="row">
                                <div class="list-item col-xs-6 padding-zero has-info-bar pull-left" ng-repeat="plugin in pluginRow" ng-click="navigateToPlugin(plugin)">
                                    <div class="list-item-media text-center">
                                        <div class="list-media-holder">
                                            <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="320" crop-height="320" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-12 + 'px' }" />
                                            <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                                        </div>
                                        <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                                            <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">
                                                {{ plugin.title }}
                                            </p>
                                        </div>
                                        <div class="info-bar titleBarBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                                            <p class="margin-bottom-zero col-md-12 ellipsis titleBarTextAndIcons">
                                                {{ plugin.title }}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 5 -->
                    <!-- Layout 6 -->
                    <div class="padded padding-top-zero padding-bottom-zero" ng-if="data.design.selectedLayout == 6" style=" padding-top: 10px; ">
                        <div class="list-layout layout-6" ng-class="data.content.text?'':'margin-top-fifteen'">
                            <div ng-repeat="pluginRow in data.plugins" class="row">
                                <div class="list-item col-xs-6 pull-left" ng-repeat="plugin in pluginRow" ng-click="navigateToPlugin(plugin)">
                                    <div class="list-item-media text-center overflow-hidden">
                                        <div class="list-media-holder">
                                            <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="200" crop-height="200" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-45 + 'px' }" />
                                            <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                                        </div>
                                        <div class="list-item-copy text-center" ng-class="data.design.hideText==false?'with-text':'without-text'">
                                            <p class="ellipsis margin-zero text-primary">
                                                <a class="text-primary" ng-show="data.design.hideText==false">
                                                    {{ plugin.title }}
                                                </a>
                                                <a class="text-primary" ng-if="data.design.hideText===undefined ? true : false ">
                                                    {{ plugin.title }}
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- End layout 6 -->
                    <!-- Layout 7 -->
                    <div>
                        <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 7">
                            <div class="plugin-banner clearfix">
                                <div class="plugin-slide text-center">
                                    <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-239x1.png', {width: 512, height: 210}) }}');"></div>
                                    <img load-image="239x1" data-final-src="{{plugin.iconUrl}}" crop-width="512" crop-height="210" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (1 * deviceWidth / 4)-12 + 'px' }">
                                    <img load-image="239x1" data-final-src="../../../styles/media/holder-239x1.png" ng-if="plugin.iconClassName" />
                                </div>
                                <div class="info-bar blackBackgroundTheme" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">
                                    <p class="margin-bottom-zero col-md-12 ellipsis whiteTheme">{{ plugin.title }}</p>
                                </div>
                                <div class="info-bar blackBackgroundTheme" ng-if="data.design.hideText===undefined ? true : false ">
                                    <p class="margin-bottom-zero col-md-12 ellipsis whiteTheme">{{ plugin.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 7 -->
                    <!-- Layout 8 -->
                    <div class="media-center-plugin layout3" ng-if="data.design.selectedLayout == 8">
                        <div class=" list-layout">
                            <div class="list-item" ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)">
                                <div class="list-item-media text-left overflow-hidden">
                                    <div class="list-media-holder square-icon pull-left">
                                        <img load-image="1x1" data-final-src="{{plugin.iconUrl}}" crop-width="180" crop-height="180" crop-type="crop" ng-if="plugin.iconUrl" style="border-radius:50%;">
                                        <span class="main-icon {{ plugin.iconClassName }}" ng-if="plugin.iconClassName"></span>
                                    </div>
                                    <div class="list-item-copy text-left padding-left-ten padding-right-ten">
                                        <p class="ellipsis margin-zero margin-top-twenty">{{ plugin.title }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 8 -->
                    <!-- Layout 9 -->
                    <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 9">
                        <div class="plugin-banner clearfix">
                            <div class="plugin-banner clearfix">
                                <div class="plugin-slide text-center">
                                    <div class="blackLayer"></div>
                                    <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-16x9.png', {width: 640, height: 360}) }}');"></div>
                                    <img load-image="16x9" data-final-src="{{plugin.iconUrl}}" crop-width="640" crop-height="360" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (9 * deviceWidth / 16)-12 + 'px' }" />
                                    <img load-image="16x9" data-final-src="../../../styles/media/holder-16x9.png" ng-if="plugin.iconClassName" />
                                    <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                                    <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 9 -->
                    <!-- Layout 10 -->
                    <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 10" style="margin-top:2px;">
                        <div class="plugin-banner clearfix">
                            <div class="plugin-slide text-center">
                                <div class="blackLayer"></div>
                                <div class="backgroundLayer" style="background:url('{{ cropImage(plugin.iconUrl? plugin.iconUrl : '../../../styles/media/holder-4x1.png', {width: 640, height: 160}) }}');"></div>
                                <img load-image="4x1" data-final-src="{{plugin.iconUrl }}" crop-width="640" crop-height="160" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': (1 * deviceWidth / 4)-12 + 'px' }" />
                                <img load-image="4x1" data-final-src="../../../styles/media/holder-4x1.png" ng-if="plugin.iconClassName" ng-style="{'min-height': (1 * deviceWidth / 4) + 'px' }" />
                                <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                                <p class="ellipsis item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 10 -->
                    <!-- Layout 11 -->
                    <div ng-repeat="plugin in data.plugins" ng-click="navigateToPlugin(plugin)" ng-if="data.design.selectedLayout == 11" class="col-md-4 col-sm-6 col-xs-6" style="padding:1px;">
                        <div class="item-block clearfix pull-left" style="padding:0 !important;">
                            <div class="text-center">
                                <div class="blackLayer"></div>
                                <img load-image="1x1" data-final-src="{{ plugin.iconUrl }}" crop-width="400" crop-height="400" crop-type="crop" ng-if="plugin.iconUrl" ng-style="{'min-height': ((1 * deviceWidth / 1)/2)-12 + 'px' }" />
                                <img load-image="1x1" data-final-src="../../../styles/media/holder-1x1.png" ng-if="plugin.iconClassName" />
                                <div class="text-holder">
                                    <p class="item-text whiteTheme text-center" ng-if="data.design.hideText!==undefined? !data.design.hideText: '' ">{{ plugin.title }}</p>
                                    <p class="item-text whiteTheme text-center" ng-if="data.design.hideText===undefined ? true : false ">{{ plugin.title }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 11 -->
                    <!-- Layout 12 -->
                    <div class="holder padding-zero" style="height:100%;" ng-if="data.design.selectedLayout == 12">
                        <div class="folder-plugin layout12" style="height:100%;">
                            <div class="plugin-banner clearfix">
                                <div class="plugin-slider text-center" image-carousel="{{ layout12TotalItem}}">
                                    <div class="plugin-slide" ng-repeat="rows in data.plugins">
                                        <div class="link-holder" ng-style="data.plugins.length>1 ? {'height': layout12Height}  : {} ">
                                            <p ng-repeat="plugin in rows" ng-click="navigateToPlugin(plugin)" class="ellipsis whiteTheme" emit-last-repeater-element>
                                                <a class="whiteTheme ellipsis">{{ plugin.title }}</a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--End Layout 12 -->
                </div>
            </div>
        </div>
    </div>
</body>
</html>