<?php echo $this->Html->script('site_js/searchfriend')?>
<?php echo $this->Html->script ( 'site_js/mailbox' )?>



<style>
	#profilelist{ position: absolute;z-index: 100}
	#profilelist ul{ background-color: #FFFFFF;  border: 1px solid #008000; max-height: 200px; overflow: scroll;  padding: 5px;  position: absolute; white-space: nowrap; width: 200px; z-index: 200; }
	#profilelist ul li a{  display: block; font: bold 12px Tahoma;  height: 20px; padding: 5px 5px 1px; }
	#profilelist ul li :hover{ background: #000000; color: #fff; }
	.friends li{display: inline-block;width: 388px;margin-right: 5px;margin-bottom: 5px;}
</style>

<div class="blocktitle"> Network</div>
<br/>

<div class="w97p pdl10">

<?php //pr($friends);die();?>
<div class="friends index" style="z-index: 99;">

	
	<?php 
	
	$items_per_group = 25;
	$arr_friendsList = sizeof($friends);
	

	$total_groups= ceil($arr_friendsList/$items_per_group);


	
	?>
	<script type="text/javascript">
    $(document).ready(function() {
    var path='<?php echo $this->webroot?>';

            var track_load = 0; //total loaded record group(s)
            var loading  = false; //to prevents multipal ajax loads
            var total_groups = '<?php echo $total_groups;?>'; //total record group(s)

            $('#results').load(path+"courseroles/friendsload", {'group_no':track_load}, function() {track_load++;}); //load first group

                    $('.partA').bind('scroll', function()
                    {
                    	//alert(track_load);
                        
                      if($(this).scrollTop() + $(this).innerHeight()+150>=$(this)[0].scrollHeight)
                      {
                    	  
                              if(track_load <= total_groups && loading==false) //there's more data to load
                                    {
                                            	
                                            loading = true; //prevent further ajax loading
                                            $('.animation_image').show(); //show loading image

                                            //load data from the server using a HTTP POST request
                                            $.post(path+"courseroles/friendsload",{'group_no': track_load}, function(data){

                                                    $("#results").append(data); //append received data into the element

                                                    //hide loading image
                                                    $('.animation_image').hide(); //hide loading image once data is received

                                                    track_load++; //loaded group increment
                                                    loading = false; 

                                            }).fail(function(xhr, ajaxOptions, thrownError) { //any errors?

                                                    alert(thrownError); //alert with HTTP error
                                                    $('.animation_image').hide(); //hide loading image
                                                    loading = false;

                                            });

                                    }
                      }
             });
    });
    
</script>
	
<ol id="results">
	</ol>
<div class="animation_image" style="display:none" align="center"><img src="<?php echo $this->webroot;?>img/ajax-loader.gif"></div>
	
		
	
</div>

</div>

