<?php 
    /*
        @name: Facebook Friends Selection custom component
        @version: 1.0
        @author: Md. Mahmud Ahsan
        @link: http://mahmudahsan.wordpress.com
        @Description: This code is used to make a custom friends selector component. Useful when you need to select some friends and
                      send their ids using ajax call
                      
        @File extension: .php
         
    */
    
class FriendsSelector{
    function __construct(){
    
    }
    
    function printCss(){
        echo <<<CSS
            <style>
    div.scroll {
        height: 160px;
        width: 200px;
        overflow: auto;
        border: 1px solid #666;
        padding: 8px;
    }

    #listwords{
        border: 1px solid #BDBABD; 
        margin-top: 5px; 
        margin-left: 10px;
    }

    #listwords ul{
        list-style: none;
        margin-top: -3px;
        cursor: pointer;
    }

    #listwords span{
        color: olive;
        text-decoration: none;
    }
    
    .itemselect{
        background-color: #e2dfaf;
        color: #650202;
    }
    
    .itemmouseover{
        background-color: #FFEEBB;
        color: BLACK;
    }
    
    .itemnormal{
        color: BLACK;
        font-family: arial;
        font-size: 12px;
    }
</style>
CSS;
    }
    
    function printJS(){
        echo <<<JS
        <script type="text/javascript">
    //javascript part    
    /*------------------------- Friends selection -----------------*/
    var friendsSelectedIds  =   ''; //this is string
    
    function toggleSelect(id){
        var liBox   =   document.getElementById('li' + id);
        var chkBox  =   document.getElementById('chk' + id);        
        
        liBox.toggleClassName('itemselect');
        if (chkBox.getChecked()){
            friendsSelectedIds  =   friendsSelectedIds.replace(id + ',', '');
            chkBox.setChecked(false);
        }
        else{
            chkBox.setChecked(true);
            friendsSelectedIds += id + ',';
        }
        //new Dialog().showMessage('Select a question', 'Please select a question!' + friendsSelectedIds);
        
        return false;
    }
    /*============== END ====================*/
    
    function sendFriendIds(){
        if (friendsSelectedIds.length == 0){
            new Dialog().showMessage('Select friends', 'Please select friends!');
            return false;
        }
        
        //submit form using ajax call
        var ajax                = new Ajax();
        ajax.responseType       = Ajax.FBML;
        
        ajax.ondone        = function(data){
            //task u will do
        }
        ajax.onerror = function(){
            new Dialog(Dialog.DIALOG_POP).showMessage('Error', 'Loading error! Please try again!', button_confirm = 'Okay');
        }
        
        var queryParams = {"ids" : friendsSelectedIds};
        ajax.post('http://yourdomain.com/submit.php' , queryParams);
        
    }
</script>
JS;
    }
}

    function printHtml(){
        echo <<< HTML
        <!-- HTML + PHP Part -->
<form name='ffriends' method="POST" action="" onsubmit="return false">
    <div class="scroll" id="listwords">
        <?php $i=0; ?>
        <ul style='margin-left: -44px'>
        <?php foreach($friends as $item){ ?>
            <li id="li<?=$item['uid']?>" class='itemnormal' onclick="toggleSelect(<?=$item['uid']?>)">
                <input id="chk<?=$item['uid']?>" type="checkbox" /> <fb:name uid="<?=$item['uid']?>" linked="false" />
            </li>
        <?php } ?>
        </ul>
    </div>
    <input style="margin-left: 10px;" class="inputsubmit" type="Submit" value="Send Question" onclick="sendFriendIds()" />
</form>
HTML;
    }
    
    $ob =   new FriendsSelector(); //create object
    $ob->printCss(); //print css
    $ob->printJS();  //print javascript
    $ob->printHtml();// print html
?>