
<div class="col-sm-8">
    <div class="row gray_ttc">
        <div class="col-sm-12">
            <div class="col-sm-12" style="padding:0px">
                <div class="col-sm-12" id="my_link">
                    
                                    <div id="sActions">
                                        <div class="col-sm-6  white form-group " style="height: 170px">
                                            <div class="col-sm-12 padding-zero text-right">
                                                
                                                    <a href="javascript:void(0)" 
                                                       onclick="return checkForLinkAction()">
                                                        <i class="fa fa-unlink" title="Remove From Link"></i>
                                                    </a>&nbsp;&nbsp;&nbsp;

                                                    <a href="javascript:void(0)"
                                                       onclick="return checkForLinkAction('')"> 
                                                        <i class="fa fa-ban" title="Block Person"></i>
                                                    </a>&nbsp;&nbsp;&nbsp;                                                

                                                        <a href="javascript:void(0)"
                                                           onclick="return checkForLinkAction()"> 
                                                            <i class="fa fa-check-circle" title="Accept Request"></i>
                                                        </a>&nbsp;&nbsp;&nbsp;

                                                        <a href="javascript:void(0)"
                                                           onclick="return checkForLinkAction('')"> 
                                                            <i class="fa fa-user-times" title="Cancel Request"></i>
                                                        </a>&nbsp;&nbsp;&nbsp;

                                                        <a href="javascript:void(0)"
                                                           onclick="return checkForLinkAction()"> 
                                                            <i class="fa fa-ban" title="Block Person"></i>
                                                        </a>&nbsp;&nbsp;&nbsp;                                                  

                                                        <a href="javascript:void(0)"
                                                           onclick="return checkForLinkAction()">
                                                            <i class="fa fa-user-times" title="Cancel Request"></i>
                                                            <!--<span class="span-text">Cancel Request</span>-->
                                                        </a>&nbsp;&nbsp;

                                                        <a href="javascript:void(0)"
                                                           onclick="return checkForLinkAction()"> 
                                                            <i class="fa fa-ban" title="Block Person"></i>
                                                        </a>&nbsp;&nbsp;&nbsp;                                                      

                                            </div>


                                            <div class="col-sm-4 padding-zero">
                                                <a href="">
                                                    
                                                        <img src="" 
                                                             style="width:100px; height:100px;"  class="img-responsive">
                                                         
                                                        <img src="" style="width:100px; height:100px;" class="img-responsive">
                                                  
                                                </a>
                                            </div>
                                            <div class="col-sm-8 padding-zero text-left">
                                                <address class="margin-zero">
                                                    <div class="col-sm-12">
                                                        
                                                    </div>
                                                    <div class="col-sm-12">
                                                        
                                                    </div>
                                                </address>
                                            </div>
                                            <div class="col-sm-12 padding-zero text-left">
                                                <div class="col-sm-12">
                                                    <a href="">                                                         
                                                    </a>
                                                </div>
                                            </div> 
                                        </div>
                                    </div>


                </div>
            </div>

        </div>

        <div class="col-sm-12"><br></div>
        <div class="col-sm-12">
            <h3>
                Suggested Link
                <!--<a href="add_video_management.html"> <span class="pull-right" style="font-size: 18px">Add Video</span></a>-->
            </h3>
            <hr>

        </div>
        <div class="col-sm-12">
            <div class="col-sm-12 " style="padding:0px">
                <div class="col-sm-12 padding-zero" id="suggested_person">                   

                                    <div class="col-sm-6 form-group "  id="">
                                        
                                        <div class="col-sm-12  white link-height padding-zero" style="height: 170px">
                                            <span class="col-sm-12 text-right padding-zero ">
                                                
                                                    <a href="javascript:void(0)"
                                                       onclick="return checkForLinkAction()">
                                                        <i class="fa fa-check-circle" title="Accept Request"></i>
                                                    </a>&nbsp;

                                                    <a href="javascript:void(0)"
                                                       onclick="return checkForLinkAction()">
                                                        <i class="fa fa-user-times" title="Cancel Request"></i>
                                                    </a>&nbsp;

                                                    <a href="javascript:void(0)"
                                                       onclick="return blockPerson()"> 
                                                        <i class="fa fa-ban" title="Block Person"></i>
                                                    </a>&nbsp;

                                             
                                                    <!--send request-->

                                                    <a href="javascript:void(0)" 
                                                       onclick="connectUser()">
                                                        <i class="fa fa-chain" title="Connect"></i>
                                                    </a>&nbsp;

                                                    <a href="javascript:void(0)"
                                                       onclick="return blockPerson()"> 
                                                        <i class="fa fa-ban" title="Block Person"></i>
                                                    </a>&nbsp;

                                                <a href="javascript:;" 
                                                   onclick="nextPerson()">
                                                    <i class="fa fa-times" title="Close"></i>
                                                </a>&nbsp;&nbsp;&nbsp;
                                            </span>
                                            <div class="col-sm-4 padding-zero">
                                                <a href=""> 
                                                  

                                                        <img src="" 
                                                             class="img-responsive image-thum" alt="logo">

                                                 

                                                        <img src="" 
                                                             class="img-responsive image-thum" alt="logo">

                                                 
                                                </a>
                                            </div>

                                            <div class="col-sm-8 padding-zero text-left">
                                                <address class="margin-zero">
                                                    <div class="col-sm-12">
                                                        
                                                    </div>
                                                    <div class="col-sm-12">
                                                        
                                                    </div>
                                                </address>
                                            </div>
                                            <div class="col-sm-12 padding-zero text-left">
                                                <div class="col-sm-12">
                                                    <a href="">
                                                        
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                
                            <div class="col-sm-6 form-group" id="">

                                <div class="col-sm-12  white link-height padding-zero" style="height: 170px">
                                    <span class="col-sm-12 text-right padding-zero " >

                                        <a href="javascript:void(0)" 
                                           onclick="connectUser()">
                                            <i class="fa fa-chain" title="Connect"></i>
                                        </a>  &nbsp;                                         


                                        <a href="javascript:void(0)"
                                           onclick="return blockPerson()"> 
                                            <i class="fa fa-ban" title="Block Person"></i>
                                        </a>&nbsp;

                                        <a href="javascript:;" 
                                           onclick="nextPerson()">
                                            <i class="fa fa-times"></i>
                                        </a>&nbsp;&nbsp;
                                    </span>
                                    <div class="col-sm-4 padding-zero">
                                        <a href="">                                            

                                                <img src="" 
                                                     class="img-responsive image-thum" alt="logo">                                           
                                                <img src="" 
                                                     class="img-responsive image-thum" alt="logo">                                                
                                        </a>
                                    </div>
                                    <div class="col-sm-8 padding-zero text-left">
                                        <address class="margin-zero">
                                            <div class="col-sm-12">                                                
                                                
                                            </div>
                                            <div class="col-sm-12">
                                                
                                            </div>
                                        </address>
                                    </div>
                                    <div class="col-sm-12 text-left">
                                        <a href="">
                                            
                                        </a>
                                    </div>

                                </div>
                            </div>                           

                </div>
                <div class="col-sm-12  "><br></div>


            </div>
        </div>

    </div><!-- /.row gray -->
</div>

<script>
    function connectUser(url, ID) {
        //        alert(ID);
        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            xmlhttp = new XMLHttpRequest();
        }

        serverPage = url;
        xmlhttp.open("GET", serverPage);
        xmlhttp.onreadystatechange = function () {
//            alert(xmlhttp.readyState);
            //            alert(xmlhttp.status);
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
                loadLinkPerson();
                //                alert(xmlhttp.responseText);
                if (xmlhttp.responseText === 0) {

                } else {
                    var parent = document.getElementById('suggested_person');
                    var element = document.getElementById("sActions" + ID);
                    parent.removeChild(element);

                    var div1 = document.createElement('div');
                    if (xmlhttp.responseText != null) {
                        parent.appendChild(div1);
                        var data1 = xmlhttp.responseText;
                        div1.innerHTML = data1;
                        parent.appendChild(div1);
                    }

                    var pID = document.getElementById('pID').value;
                    div1.setAttribute('id', 'sActions' + pID);
                    div1.setAttribute('class', 'col-sm-6 form-group');

                    $('#sActions' + pID).hide().appendTo("#suggested_person").fadeIn(1000);

                    var parent = document.getElementById('sActions' + pID);
                    element = document.getElementById('pID');
                    parent.removeChild(element);
                }
            }
        }
        xmlhttp.send(null);
    }

    function nextPerson(url, ID) {
//        alert(ID);
//        alert(url);
        var xmlhttp1 = false;
        try {
            xmlhttp1 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp1 = false;
            }
        }
        if (!xmlhttp1 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp1 = new XMLHttpRequest();
        }
        serverPage = url;
//        alert(serverPage);
        xmlhttp1.open("GET", serverPage);
        xmlhttp1.onreadystatechange = function ()
        {
            //            alert(xmlhttp1.readyState);
            //            alert(xmlhttp1.status);
            if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200)
            {
//                loadLinkPerson();
                //                alert(xmlhttp1.responseText);
                var parent = document.getElementById('suggested_person');
                var element = document.getElementById("sActions" + ID);
                parent.removeChild(element);

                var div1 = document.createElement('div');
                if (xmlhttp1.responseText != null) {
                    parent.appendChild(div1);
                    var data1 = xmlhttp1.responseText;
                    div1.innerHTML = data1;
                    parent.appendChild(div1);

                    var pID = document.getElementById('pID').value;
                    div1.setAttribute('id', 'sActions' + pID);
                    div1.setAttribute('class', 'col-sm-6 form-group');
                    $('#sActions' + pID).hide().appendTo("#suggested_person").fadeIn(1000);

                    var parent = document.getElementById('sActions' + pID);
                    element = document.getElementById('pID');
                    parent.removeChild(element);
                }
            }
        }
        xmlhttp1.send(null);
    }

    function loadLinkPerson() {

        var xmlhttp = false;
        try {
            xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp = false;
            }
        }
        if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
            xmlhttp = new XMLHttpRequest();
        }

        serverPage = '<?php echo base_url() . $this->session->userdata('profile_id') . '/load_link_person_by_ajax'; ?>';
        xmlhttp.open("GET", serverPage);
        xmlhttp.onreadystatechange = function ()
        {
//                alert(xmlhttp.readyState);
//                alert(xmlhttp.status);
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
            {
//                alert(xmlhttp.responseText);
                document.getElementById('my_link').innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.send(null);
    }

    function blockPerson(url, action, message, ID) {
//        alert(ID);
//        alert(url);
        var xmlhttp1 = false;
        try {
            xmlhttp1 = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
            try {
                xmlhttp1 = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (E) {
                xmlhttp1 = false;
            }
        }
        if (!xmlhttp1 && typeof XMLHttpRequest != 'undefined') {
            xmlhttp1 = new XMLHttpRequest();
        }

        serverPage = url;
//        alert(serverPage);
        xmlhttp1.open("GET", serverPage);
        xmlhttp1.onreadystatechange = function ()
        {
//            alert(xmlhttp1.readyState);
//            alert(xmlhttp1.status);
            if (xmlhttp1.readyState == 4 && xmlhttp1.status == 200)
            {
                var parent = document.getElementById('suggested_person');
                var element = document.getElementById("sActions" + ID);
                parent.removeChild(element);

                var div1 = document.createElement('div');
                if (xmlhttp1.responseText != null) {
                    parent.appendChild(div1);
                    var data1 = xmlhttp1.responseText;
                    div1.innerHTML = data1;
                    parent.appendChild(div1);
                    var pID = document.getElementById('pID').value;
                    div1.setAttribute('id', 'sActions' + pID);
                    div1.setAttribute('class', 'col-sm-6 form-group');
                    $('#sActions' + pID).hide().appendTo("#suggested_person").fadeIn(1000);

                    var parent = document.getElementById('sActions' + pID);
                    element = document.getElementById('pID');
                    parent.removeChild(element);
                }
            }
        }
        xmlhttp1.send(null);
    }
</script>  
