<style>
    .fb_feed {
        background: #ececec none repeat scroll 0 0;
        color: #555555;
        font-size: 13px;
        font-weight: normal;
        padding: 10px 20px;
    }

  #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;
        }
    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;
    }
</style>
<div data-ng-controller="DesignFeedsINController" scroll id="linpage" ng-class="{min:boolChangeClass}" style="height:100%;">
    <!-- Page name -->
    <div class="container">
        <div class="col m12">
            <h4>Monitor</h4>
        </div>
        <div class="col m6" style="margin-top: -45px;float: right;">
            <a ng-click="discoveryPopUp()" class="btn">
                <i class="fa fa-search"></i>
            </a>
        </div>
    </div>

    <!-- START CONTENT -->
    <div id="center">
        <ul id="waterfall">
            <li class="collection-item" ng-repeat="linpost in lstDiscoverySearchLinkedIn ">
                <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="{{linpost.profileImage}}">
                                </div>
                                <div class="col l12 m12 s12 margin-top-10 center">
                                    <span class="card-title">{{linpost.profileName}}</span>
                                    <br>
                                    <span>
                                        <i class="fa fa-linkedin-square" style="color:#0077B5; font-size:x-large"></i>
                                    </span>
                                </div>
                                <div class="col l12 m12 s12">
                                    <p class="description_listen">
                                        {{getPostData(linpost.message)}}
                                        <div class="center">
                                            <img ng-if="linpost.imageurl != null" src="{{linpost.postImgUrl}}" class="responsive-img">
                                            <!--<div style="word-break:break-all"> {{getPostData(linpost.message)}} </div>-->
                                        </div>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div class="card-action center">
                            <a ng-click="schedulefbpost(linpost)"class="waves-effect waves-grey btn btn_round ">Schedule</a>
                            <a ng-click="openComposeMessage(linpost)" class="waves-effect waves-grey btn grey btn_round ">1-Click</a>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>

            <!-- END CONTENT -->
            <!-- add profile -->
            <div id="addprofile" class="modal">
                <div class="modal-content">
                    <h4>Adding Profiles</h4>
                    <div class="row">
                        <div class="col s12">
                            <ul class="tabs tab-demo z-depth-1">
                                <li class="tab col s1"><a class="active" href="#twitter"><i class="fa fa-twitter fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#facebook"><i class="fa fa-facebook fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#google"><i class="fa fa-google-plus fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#linkedin"><i class="fa fa-linkedin fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#instagram"><i class="fa fa-instagram fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#tumblr"><i class="fa fa-tumblr fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#youtube"><i class="fa fa-youtube fa-fw fa-2x"></i></a></li>
                                <li class="tab col s1"><a href="#ganalytics"><i class="fa fa-line-chart fa-fw fa-2x"></i></a></li>
                            </ul>
                        </div>
                        <div id="twitter" class="col s12">
                            <div class="center-align">
                                <p>Please make sure you are logged in with the proper account when you authorize Socioboard.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-twitter fa-fw"></i>Add a Twitter Profile</a>
                                <p>
                                    <input type="checkbox" id="Follow1" />
                                    <label for="Follow1">Follow Socioboard on twitter for update &amp; announcements</label>
                                </p>
                            </div>
                        </div>
                        <div id="facebook" class="col s12">
                            <div class="center-align">
                                <p>Socioboard needs permission to access and publish content to Facebook on your behalf. To grant permission, you must be an admin for your brand’s Facebook page.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Profile</a>
                                <a class="waves-effect waves-light btn modal-trigger" href="#FbFanpageModal"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Fanpage</a>
                                <a class="waves-effect waves-light btn"><i class="fa fa-facebook fa-fw"></i>Add a Facebook Fanpage Analytics</a>
                            </div>
                        </div>
                        <div id="google" class="col s12">
                            <div class="center-align">
                                <p>Allow Socioboard access to your Google+ account, you must first give authorization from the Google website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-google-plus fa-fw"></i>Add a Google+ Profile</a>
                            </div>
                        </div>
                        <div id="linkedin" class="col s12">
                            <div class="center-align">
                                <p>Grant access to your profile to share updates and view your feed.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Profile</a>
                                <a class="waves-effect waves-light btn"><i class="fa fa-linkedin fa-fw"></i>Add Linkedin Company Page</a>
                            </div>
                        </div>
                        <div id="instagram" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Instagram account, you must first give authorization from the Instagram website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add Instagram Profile</a>
                            </div>
                        </div>
                        <div id="tumblr" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Tumblr account, you must first give authorization from the Tumblr website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-instagram fa-fw"></i>Add a tumblr Profile</a>
                            </div>
                        </div>
                        <div id="youtube" class="col s12">
                            <div class="center-align">
                                <p>To allow Socioboard access to your Youtube account, you must first give authorization from the Youtube website</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-youtube fa-fw"></i>Connect your personal youtube</a>
                            </div>
                        </div>
                        <div id="ganalytics" class="col s12">
                            <div class="center-align">
                                <p>Add your Google Analytics Account to see how your website traffic correlates with your social media activity.</p>
                                <a class="waves-effect waves-light btn"><i class="fa fa-line-chart fa-fw"></i>Connect your personal GoogleAnalytics</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Fb Fanpage Modal  -->
            <div id="FbFanpageModal" class="modal">
                <div class="modal-content">
                    <h4>CHOOSE FACEBOOK PAGES TO CONNECT</h4>
                    <ul class="collection">
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/938022872953726/picture?type=small" alt="Socioboard" class="circle">
                                <span class="title">Socioboard</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                                <input type="checkbox" id="Socioboard" />
                                <label for="Socioboard"></label>
                            </p>
                        </li>
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/284030164045/picture?type=small" alt="Globussoft" class="circle">
                                <span class="title">Globussoft</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                                <input type="checkbox" id="Globussoft" />
                                <label for="Globussoft"></label>
                            </p>
                        </li>
                        <li class="collection-item avatar">
                            <div class="left">
                                <img src="https://graph.facebook.com/1872928502931573/picture?type=small" alt="DailyOfficeCocktail" class="circle">
                                <span class="title">DailyOfficeCocktail</span>
                                <p>Connected</p>
                            </div>
                            <p class="right">
                                <input type="checkbox" id="DailyOfficeCocktail" />
                                <label for="DailyOfficeCocktail"></label>
                            </p>
                        </li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Close</a>
                    <a href="#!" class=" modal-action waves-effect waves-green btn-flat">Connect</a>
                </div>
            </div>

            <!-- 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>

                    <form class="col s12" name="discoveryform">
                        <div class="row">
                            <div class="col l12 s12 m12">
                                <div class="input-field">
                                    <input value="" id="categories" type="text" class="validate">
                                    <label class="active" for="categories">Search your categories</label>
                                </div>
                                <div class="col s2">
                                    <!--<a ng-click="discovery()" class="btn">
                                        <i class="fa fa-search"></i>
                                    </a>-->
                                    <button type="submit" ng-show="!dispbtn" ng-click="discovery()" class="btn">
                                        <i class="fa fa-search"></i>
                                    </button>
                                    <button ng-show="dispbtn" class="btn">
                                        <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
                                    </button>
                                </div>
                            </div>
                            <!--<div class="col l4 m4 s12" ng-repeat="categories in lstcategories">
                <div class="collection">
                    <a ng-click="discovery(categories.keyword)" class="collection-item active">{{categories.keyword}}</a>
                </div>
            </div>-->
                        </div>
                        </form>
</div>
                <div class="col l12 s12 m12 fb_feed">
                    <span style="color: buttontext; font-size: 17px;">
                        To Get More Leads visit our partner &nbsp;&nbsp;
                        <a href="http://socioleadspro.com/" target="_blank">
                            <img src="http://socioleadspro.com/Contents/img/SocioleadsPro_100.png" style="height: 15px; width: 113px;">
                        </a>
                    </span>
                </div>
            </div>

            <!-- Compose Email Trigger -->
            <!--<div ng-show="user.TrailStatus!=2" class="fixed-action-btn" onclick="$('select').material_select()" style="bottom: 45px; right: 24px;">
                <div class="btn-floating btn-large red modal-trigger" href="#searchcatagory">
                    <i class="large mdi-action-search"></i>
                </div>
            </div>
            <div ng-if="user.TrailStatus==2" class="fixed-action-btn" style="bottom: 45px; right: 24px;">
                <a class="btn-floating btn-large red modal-trigger" title="your trial period is expired.Click here to upgrade your account" href="#/upgradeplan">
                    <i class="large mdi-editor-mode-edit"></i>
                </a>
            </div>-->
    <!--Compose model-->
    <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">
                                <div class="emoji-picker-container">
                                    <textarea id="composeMessage" disabled class="materialize-textarea active grey-text text-darken-4" length="5000">{{liComposeMessage.shareMessage }}</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="{{liComposeMessage.picUrl}}" />
                                <div class="col s12 m8 l9" ng-if="liComposeMessage">
                                    <input type="file" id="composeImage" class="dropify"  after-render data-default-file="{{liComposeMessage.picUrl}}" />
                                </div>

                                <div class="col s12 m8 l9" ng-if="!liComposeMessage">
                                    <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="fb_{{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="fb_{{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="cmpbtn" ng-click="ComposeMessage()">send</div>
                            <div ng-show="!cmpbtn"><i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i></div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>




        
<script>

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

    // waterfall
    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 check() {
        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>