CodingForums.com - ajax modal box help

hello, bellow is a simple total javascript alert box code.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<style type="text/css">

#CustomAlert {

visibility: hidden;

position: absolute;

z-index: 999;

top: 200px;

left: 200px;

width: 100px;

height: 50px;

border-style: groove;

border-width: 5px;

border-color: #FFFFFF;

cursor: default;

filter: alpha(opacity=90);

background-color: silver;

text-align: center;

}

#CustomAlertSampleokButton {

background-color: silver;

font-color: #000000;

font-size: 9pt;

font-family: arial;

width: 70px;

height: 20px; 

}

#CustomAlertTitle {

background-color: dimgray;

font-family: arial;

font-size: 9pt;

color: #FFFFFF;

font-weight: bold;

}

#CustomAlertMessage {

font-family: arial;

font-size: 11pt;

color: #000000;

font-weight: normal;

}

</style>

<script>

var CUSTOM_ALERT = function(){//Namespace pattern

        var alertBox = null, titleEl = null, messageEl = null;

        return {

                hide : function(){

                        alertBox.style.visibility = 'hidden';

                },

                alert : function(aTitle, aMessage){

                        if(!alertBox) alertBox = document.getElementById("CustomAlert");

                        if(!titleEl) titleEl = document.getElementById("CustomAlertTitle");

                        if(!messageEl) messageEl = document.getElementById("CustomAlertMessage");

                        titleEl.innerHTML = aTitle;

                        messageEl.innerHTML = aMessage;

                        thisText = aMessage.length;

                        if (aTitle.length > aMessage.length){ thisText = aTitle.length;}

                        aWidth = Math.min(Math.max(thisText*5+80, 150), 350);

                        aHeight = (thisText>610) ? 290 : (thisText>550) ? 270 : (thisText > 490) ? 250 : (thisText > 420) ? 230 : (thisText > 360) ? 210 : (thisText > 300) ? 190 : (thisText > 240) ? 170 : (thisText > 180) ? 150 : (thisText > 120) ? 130 : (thisText > 60)? 110 : 100;

                        alertBox.style.width = aWidth + 'px';

                        alertBox.style.height = aHeight + 'px';

                        var left = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

                        var top = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

                        var hScroll = window.pageXOffset || document.body.scrollLeft || document.documentElement.scrollLeft || 0;

                        var vScroll = window.pageYOffset || document.body.scrollTop || document.documentElement.scrollTop || 0;

                        alertBox.style.left = hScroll + (left - aWidth)/2 + 'px';

                        alertBox.style.top =  vScroll + (top - aHeight)/2 + 'px';

                        alertBox.style.visibility = 'visible';

                }

        };

}();

</script>

</head>

 

<body>

<div id="CustomAlert">

        <table border="0" width="100%" height="100%">

        <tr height="5"><td colspan="4" id="CustomAlertTitle"></td></tr>

        <tr height="5"><td width="5"></td></tr>

        <tr><td width="5"></td><td width="20" align="left"><img src="alert.gif"></td><td align="center" id="CustomAlertMessage"></td><td width="5"></td></tr>

        <tr height="5"><td width="5"></td></tr>

        <tr><td width="5"></td><td colspan="2" align="center"><input type="button" value="OK" onClick="CUSTOM_ALERT.hide();" id="CustomAlertSampleokButton"></td><td width="5"></td></tr>

        <tr height="5"><td width="5"></td></tr>

        </table>

</div>

 

<center>

 

<input type="button" value="Click Here For A Normal JavaScript Alert" onClick="alert('A Standard Boring JavaScript Alert');">

<br><br>

<input type="button" value="Click Here For A More Attractive Alert" onClick="CUSTOM_ALERT.alert('Your Alert Title','Your Alert Message Goes Here<br>This script is very easy to use and<br>can easily be customised using CSS');">

</center>

</body>

</html>

This code is ok but I want to use this box like a message form for private messaging. I want to add some extra feature in it like:

1. adding a "Subject" and "Message" input field in it.
2. creating button "Send" and "Cancel".
3. putting a [x] at top right side to close the box.
4. fadeIn() n fadeOut() function to make page fade when it opens + slide toggle open.
5. a progress bar when it is pressed "Send" button.
6. If the message content is bigger than 2048 characters if outputs the warning message on top.

I need this code very much. someone please code this or tell me the way I can do those.
Thanks.