vizz 0 Junior Poster

I have created chatbox using jquery. It generates one chatbox per user. But it goes till users available.

I want to show only 4 box on page.

If 4 chatbox are visible and clicked on 5th user hide first chatbox from right side and add chatbox for that clicked user to left side.

At end there must be only 4 chatbox available on page at same time.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Chatting</title>
<style type="text/css" media="all">
.chatboxlink{width:25%; padding:auto;height:350px; }
.chatboxlink a{ display:block; padding:0px 5px 0px 5px; width:15%;height:10px;}

.chatbox{ width:250px; height:250px; background:#CCFFFF; float:right; bottom:-190px; position:relative; right:0px; border:1px solid #993300;}
.chatbox textarea{  height:80px; width:240px;overflow-y:auto scroll; resize:none; }
.chatbox p{ text-align:center; font-size:16px; color:#99FF99;}
.chatinput{ border-top:2px solid #00FF99; height:60px;width:250px; bottom:40px; position:absolute; float:left; margin-left:0; }
#title{ padding:5px; text-align:left; border:1px solid #3366FF; height:25px; }
#chatmessage{ background:#99CC99;height:155px;width:250px; top:0px; position:relative; overflow:auto scroll;}
</style>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
$(document).ready(function(){

    $('.chatboxlink a').click(function(){

        var $user= $(this).attr('href');        
        var $id =  $(this).attr('id');

        var ids = $('[id="'+this.id+'"]');




        if(ids.length>1 && ids[0]==this)
        {
            $('textarea').focus();
            alert($id);

        }
        else  
        {

            $('body').append('<div class="chatbox" id='+ $id +'><div id="title"> ' + $user + ' </div><div id="chatmessage"></div><div class="chatinput"><textarea></textarea></div></div>');

        }


        return false;           


    });



}); 
</script>
</head>

<body>
    <div class="chatboxlink"><br />
        <a href="Charles" id="1">Charles</a><br />

        <a href="Randy" id="2">Randy</a><br />

        <a href="Ben" id="3">Ben</a><br />

        <a href="William" id="4">William</a><br />

        <a href="George" id="5">George</a><br />

        <a href="Karl" id="6">Karl</a><br />

        <a href="Denis" id="7">Denis</a><br />

        <a href="John" id="8">John</a><br />

        <a href="Victor" id="9">Victor</a><br />

        <a href="Andrew" id="10">Andrew</a><br />
    </div>   
</body>
</html>

Demo available http://jsfiddle.net/xyq5F/4/