<style>
    .profile_s_pic {
    max-height: 50px;
    max-width: 50px;
}
    ul.shinh li label {
        font-size: 15px;
        color: #333;
        padding: 0 10px;
        color: #ff4081;
    }

    ul.shinh li:hover {
        background: #e5e5e5;
        color: #ff4081;
        cursor: pointer;
        padding: 0 10px;
    }

    ul.shinh li label input {
        margin-right: 10px;
        height: 20px;
        width: 20px;
        background: transparent !important;
    }
      #waterfall li.show {
              opacity: 1;
              transform: translateY(0);
              transition: all 0.3s, top 1s;
            }

            #waterfall li > div {
              color: rgba(0,0,0,0.6);
              border-radius: 3px;
              margin: 10px;
              padding: 0px;
              background: rgb(255,255,255);
              border: 1px solid rgba(038, 191, 64, 0);
              transition: all 0.5s;
            }

            #waterfall li > div:hover {
              transform: translateY(-10px);
              border: 1px solid #3b5998;
              box-shadow: 0 10px 15px rgba(154, 187, 221, 0.4);
              transition: all 0.3s;
            }
</style>

<div data-ng-controller="BoardController" ng-lazy-scroll="loadMore()" lazy-scroll-trigger="40" lazy-no-scroll="false">
    <!-- Page name -->
   
    <div class="row no-space">
        <div class="col m12">
            <div class="card-panel blue accent-1 center-align z-depth-2">
                <div class="nobox">
                    <h5 class="no-space white-text">#<span>{{bname}}</span></h5>
                </div>
            </div>
        </div>
    </div>
    <!-- statr products list -->
    <div class="row">
        <div id="center" >
            <ul id="waterfall">
                <li class="show" id="test" ng-repeat="feed in  lstBoardFeeds | orderBy:'publishedtime':true">
                     <div class="studio_card">
                        <div class="card hoverable">
                            <div class="card-content">
                                <div class="row">
                                    <div class="col l12 m12 s12 margin-top-10 center">
                                        <img class="responsive-img circle profile_s_pic " src="{{feed.fromPicUrl}}">
                                    </div>
                                    <div class="col l12 s12 m12 center">
                                        <span class="card-title">{{feed.fromName}}</span>
                                        <br>
                                        <span ng-if="feed.twitterprofileid !=null" >
                                            <a ng-href="https://twitter.com/{{feed.fromName}}" target="_blank" class="blue-text text-darken-1">
                                                <i class="fa fa-twitter-square fa-fw "></i>@{{feed.fromName}}
                                            </a>
                                        </span>
                                        <span ng-if="feed.instagramaccountid !=null" >
                                            <a ng-href="https://www.instagram.com/{{feed.fromId}}" target="_blank" class="brown-text text-darken-1">
                                                <i class="fa fa-instagram fa-fw "></i>@{{feed.fromName}}
                                            </a>
                                        </span>
                                        <span ng-if="feed.gplusboardaccprofileid!=null" >
                                            <a ng-href="https://plus.google.com/{{feed.fromId}}" target="_blank" class="red-text text-darken-3">
                                                <i class="fa fa-google-plus-square fa-fw "></i>@{{feed.fromName}}
                                            </a>
                                        </span>
                                    </div>
                                    <div class="col l12 m12 s12">
                                        <p class="description_listen">
                                            {{feed.text}}
                                            <div class="center">
                                                <img ng-if="feed.imageurl != null" src="{{feed.imageurl}}" class="responsive-img">
                                            </div>
                                        </p>
                                    </div>
                                </div>
                            </div>
                            <div class="card-action center">
                                <a ng-click="scheduledraft(feed)" class="btn btn_style col s6 img_comp_btn">Schedule</a>
                                <a ng-click="openComposeMessage(feed)" class="btn btn_style col s6 img_comp_btn">1-Click</a>
                            </div>
                        </div>
                    </div>
                </li>
          </ul>
        </div>
        <!--<div ng-if="lstBoardFeeds.length!=0" ng-repeat="feed in  lstBoardFeeds | orderBy:'publishedtime':true" my-repeat-feed-timeout-directive>
            <div class="product" ng-if="feed.twitterprofileid != undefined">
                
                <div class="card hoverable">
                    <div class="card-content">
                      <div class="row">
                            <div class="col l12 m12 s12 margin-top-10 center">
                                <img class="responsive-img circle " src="{{feed.fromPicUrl}}">
                            </div>
                            <div class="col l12 s12 m12 center">
                                <span class="card-title">{{feed.fromName}}</span>
                                <br>
                                <span>
                                    <a ng-href="https://twitter.com/{{feed.fromName}}" target="_blank">
                                        <i class="fa fa-twitter-square fa-fw"></i>@{{feed.fromName}}
                                    </a>
                                </span>
                            </div>
                            <div class="col l12 m12 s12">
                                <p class="description_listen">
                                    {{feed.text}}
                                    <div class="center">
                                        <img ng-if="feed.imageurl != null" src="{{feed.imageurl}}" class="responsive-img">
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card-action center">
                        <a ng-click="scheduledraft(feed)">Schedule</a>
                        <a ng-click="openComposeMessage(feed)" class="waves-effect waves-grey btn gery ">1-Click Schedule</a>
                    </div>
                </div>
            </div>

            <div class="product" ng-if="feed.instagramaccountid != undefined">
                <div class="card hoverable">
                    <div class="card-content">
                        <div class="row">
                            <div class="col l12 m12 s12 margin-top-10 center">
                                <img class="responsive-img circle " src="{{feed.fromPicUrl}}">
                            </div>
                            <div class="col l12 s12 m12 center">
                                <span class="card-title">{{feed.fromName}}</span>
                                <br>
                                <span>
                                    <a ng-href="https://www.instagram.com/{{feed.fromId}}" target="_blank">
                                        <i class="fa fa-instagram fa-fw"></i>@{{feed.fromName}}
                                    </a>
                                </span>
                            </div>
                            <div class="col l12 m12 s12">
                                <p class="description_listen">

                                    <div class="center">
                                        <img ng-if="feed.imageurl != null" src="{{feed.imageurl}}" class="responsive-img">
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card-action center">
                        <a ng-click="scheduledraft(feed)">Schedule</a>
                        <a ng-click="openComposeMessage(feed)" class="waves-effect waves-grey btn gery ">1-Click Schedule</a>
                    </div>
                </div>
            </div>

            <div class="product" ng-if="feed.gplusboardaccprofileid != undefined">
                <div class="card hoverable">
                    <div class="card-content">
                        <div class="row">
                            <div class="col l12 m12 s12 margin-top-10 center">
                                <img class="responsive-img circle " src="{{feed.fromPicUrl}}">
                             </div>
                            <div class="col l12 s12 m12 center">
                                <span class="card-title">{{feed.fromName}}</span>
                                <br>
                                <span>
                                    <a ng-href="https://plus.google.com/{{feed.fromId}}" target="_blank">
                                        <i class="fa fa-google-plus-square fa-fw"></i>@{{feed.fromName}}
                                    </a>
                                </span>
                            </div>
                            <div class="col l12 m12 s12">
                                <p class="description_listen">
                                    {{feed.title}}
                                    <div class="center">
                                        <img ng-if="feed.imageurl != null" src="{{feed.imageurl}}" class="responsive-img">
                                    </div>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="card-action center">
                        <a ng-click="scheduledraft(feed)">Schedule</a>
                        <a ng-click="openComposeMessage(feed)" class="waves-effect waves-grey btn gery ">1-Click Schedule</a>
                    </div>
                </div>
            </div>
        </div>-->
       

    </div>

    <div ng-if="lstBoardFeeds.length==null">
        <span>
            No Post availabe for this keyword
        </span>
    </div>

    <div ng-if="lastreach!=true">
        
        <div class="center">
            <div>
                <div class="preloader-wrapper small active">
                    <div class="spinner-layer spinner-blue">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div><div class="gap-patch">
                            <div class="circle"></div>
                        </div><div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>

                    <div class="spinner-layer spinner-red">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div><div class="gap-patch">
                            <div class="circle"></div>
                        </div><div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>

                    <div class="spinner-layer spinner-yellow">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div><div class="gap-patch">
                            <div class="circle"></div>
                        </div><div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>

                    <div class="spinner-layer spinner-green">
                        <div class="circle-clipper left">
                            <div class="circle"></div>
                        </div><div class="gap-patch">
                            <div class="circle"></div>
                        </div><div class="circle-clipper right">
                            <div class="circle"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/ end items list -->
    <!-- Modal Structure -->
    <div id="searchcatagory" class="modal">
        <div class="modal-content">
            <a href="" class="right modal-action modal-close waves-effect waves-green"><i class="icon-close"></i></a>
            <h4 class="center">Categories Featured</h4>
            <div class="row">
                <div class="col l12 s12 m12">
                    <div class="input-field">
                        <input value="SocioBoard" id="categories" type="text" class="validate">
                        <label class="active" for="categories">Search your categories</label>
                    </div>
                </div>
                <div class="col l4 m4 s12">
                    <div class="collection">
                        <a href="#!" class="collection-item active">Advertising</a>
                        <a href="#!" class="collection-item">Agriculture</a>
                        <a href="#!" class="collection-item">Aircraft</a>
                        <a href="#!" class="collection-item">Animals</a>
                    </div>
                </div>
                <div class="col l4 m4 s12">
                    <div class="collection">
                        <a href="#!" class="collection-item">Digital Marketing</a>
                        <a href="#!" class="collection-item">Economy</a>
                        <a href="#!" class="collection-item">Food &amp; Beverage</a>
                        <a href="#!" class="collection-item">HR &amp; Management</a>
                    </div>
                </div>
                <div class="col l4 m4 s12">
                    <div class="collection">
                        <a href="#!" class="collection-item">Knowledge Management</a>
                        <a href="#!" class="collection-item">Internet</a>
                        <a href="#!" class="collection-item">Literature</a>
                        <a href="#!" class="collection-item">Marketing</a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Compose Email Structure -->

    <div id="ComposePostModal" class="modal">
        <div class="modal-content">
            <nav class="red">
                <div class="nav-wrapper">
                    <div class="left col s12 m5 l5">
                        <ul>
                            <li>
                                <a href="javascript:void(0)" class="email-type">Compose</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="model-email-content">
            <div class="row no-space">
                <form class="col s12">
                    <div class="row no-space">
                        <div class="col s12 m6">
                            <div class="input-field col s12" ng-if="boardComposeMessage.url != null" >
                                <div class="emoji-picker-container">
                                    <textarea id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="5000">{{boardComposeMessage.url }}</textarea>
                                </div>
                            </div>
                            <!--<div class="input-field col s12" ng-if="boardComposeMessage.url == null">
                                <div class="emoji-picker-container">
                                    <textarea ng-if="boardComposeMessage.socialMedia=='twitter'" id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="5000">
                                        https://twitter.com/{{boardComposeMessage.fromId}}/status/{{boardComposeMessage.feedId}}
                                    </textarea>
                                    <textarea ng-if="boardComposeMessage.socialMedia=='gplus'"    id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="5000">
                                        https://twitter.com/{{boardComposeMessage.fromId}}/status/{{boardComposeMessage.feedId}}
                                    </textarea>
                                    <textarea ng-if="boardComposeMessage.socialMedia=='instagram'" id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="5000">
                                        https://www.instagram.com/{{boardComposeMessage.fromId}}/status/{{boardComposeMessage.feedId}}
                                    </textarea>
                                </div>                                
                            </div>-->
                            <div class="row no-space">
                                <div class="col s12 m12 l12">
                                    <p>Select your file [Ex: gif, jpeg, png, mp4, ...]</p>
                                </div>
                                <input type="hidden" id="imageUrl" value="{{boardComposeMessage.picUrl}}" />
                                <div class="col s12 m8 l9" ng-if="boardComposeMessage && boardComposeMessage.picUrl!=null">
                                    <input type="file" id="composeImage" ng-if="boardComposeMessage.picUrl!=null" class="dropify" after-render data-default-file="{{boardComposeMessage.picUrl}}" disabled/>
                                </div>
                                <div class="col s12 m8 l9" ng-if="boardComposeMessage && boardComposeMessage.picUrl==null">
                                    <input type="file" id="composeImage" after-render data-default-file=""  />
                                </div>

                                <div class="col s12 m8 l9" ng-if="!boardComposeMessage">
                                    <input type="file" id="composeImage" class="dropify" after-render data-default-file="" />
                                </div>
                            </div>
                        </div>
                        <div class="col s12 m6">
                            <div class="row">
                                <div class="input-field col s12">
                                    <input ng-model="query[queryBy]" id="search_name" type="text" class="validate">
                                    <label for="search_name">Search Profile</label>
                                </div>
                                <ul class="col s12 shinh" id="checkboxdata" style="max-height:250px; overflow-y:scroll;">
                                    <li style="padding:5px 0;">
                                        <label>
                                            <input type="checkbox" style="visibility:visible;position:relative;left:5px; float:left" id="checkAll" onclick="check();" />
                                            <span style="float:left;">Check All</span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:0} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13' }" style="padding:5px 0;">
                                        <label>
                                            <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/fb_icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:1} | filter:{profileType:'!10'} | filter:{profileType:'!11'} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                        <label>
                                            <input onclick="profile();" name="selector[]" class="subcheckbox" id="urlfb_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/Fb_page-icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:2}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="tw_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/twticon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query | filter:{profileType:3} | filter:{profileType:'!13'}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="lin_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                        </label>
                                    </li>
                                    <li ng-repeat="profile in lstProfiles |filter:query| filter:{profileType:4}" style="padding:5px 0;">
                                        <label>
                                            <input name="selector[]" onclick="profile();" class="subcheckbox" id="Cmpylinpage_{{profile.profileId}}" type="checkbox" style="visibility:visible;position: relative;left:5px;float:left" />
                                            <img src="{{profile.profilePic}}" style="width:20px;float:left;margin-right: 5px;" />
                                            <span style="float:left; width:150px;" class="truncate" title="{{profile.profileName}}">{{profile.profileName}}</span>
                                            <span style="float:right;"><img ng-src="/contents/socioboard/images/link_icon.png"></span>
                                        </label>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="row no-space">
                        <!--<a href="" class="btn btn_style blue_btn_style left" ng-click="draftMsg()">Save as Draft</a>-->
                        <div class="right btn btn_style blue_btn_style">
                            <div ng-show="dispbtn" ng-click="ComposeMessage()">send</div>
                            <div ng-show="!dispbtn"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    


</div>

<script>
    $(document).ready(function () {
        $('#waterfall').NewWaterfall();
    });

    // 自动加载更多 automatic load more
    function random(min, max) {
        return min + Math.floor(Math.random() * (max - min + 1))
    }
    var loading = false;
    var dist = 300;
    var num = 1;

    setInterval(function () {
        if ($(window).scrollTop() >= $(document).height() - $(window).height() - dist && !loading) {
            loading = true;
            //$("#test").clone().appendTo('#waterfall');
            // $("#waterfall").append("<li><div style='height:" + random(50,500) +  "px'>" + num + "</div></li>");
            num++;

            loading = false;
        }
    }, 60);
        function loadmore_tweets() {
            $('#load_circle_twt').show();
        }
        function loadmore_feeds() {
            $('#load_circle_feed').show();
        }

        function check() {
            debugger;
            var flag = $('#checkAll').is(":checked");
            $('#checkboxdata input:checkbox').each(function () {
                $(this).prop('checked', flag);
            });
        }

        function profile() {
            var count = 0;
            $("#checkboxdata :checkbox").each(function () {
                if (this.id != 'checkAll') {
                    if(!($("#" + this.id).prop('checked'))){
                      count++;
                    }
                }
            });

            if (count > 0) {
                //alert("no "+count);
                $("#checkAll").prop('checked', false);
            }
            if (count == 0) {
                //alert("yess " + count);
                $("#checkAll").prop('checked', true);
            }
        }
</script>