<html >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=Unicode" />
        <title>Vonage Dialer</title>
        <style type="text/css">
        body
        {
            margin: 0;
            width: 135px;
            height: 75px;
            font-family: verdana;
            font-weight: bold;
            font-size: 20px;
        }
        #gadgetContent
        {
            margin-top: 0px;
            width: 135px;
            vertical-align: middle;
            text-align: center;
            overflow: hidden;
        }
        </style>
        <script type="text/jscript" language="jscript">
            // Initialize the gadget.
            function init()
            {
                System.Gadget.settingsUI = "settings.html";
           //     document.getElementById("pre_tonumber").value =  System.Gadget.Settings.read('lastnumber' );
                
            }
        </script>
            <script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript">

function validate_phone()
{

	phone = document.getElementById("pre_tonumber").value;

	// find the "X" if there is one
	xPos = phone.indexOf("x");
	if (xPos < 0)
	{
		xPos = phone.length;
	}

	// remove all characters up to the X
	phone = phone.substring(0, xPos);

	// now strip out special characters
	phone = phone.replace(/\D/g,'');
	document.getElementById("tonumber").value = phone;
};

//jQuery.post example

$(function(){
	$("#JqPostForm").submit(function(){		
	validate_phone();
 
 document.getElementById("username").value = System.Gadget.Settings.read('username');
 document.getElementById("password").value = System.Gadget.Settings.read('password');
 document.getElementById("fromnumber").value = System.Gadget.Settings.read('fromnumber');
 //System.Gadget.Settings.write('lastnumber' , document.getElementById("pre_tonumber").value);
 
 
		$.post("https://secure.click2callu.com/tpcc/makecall", $("#JqPostForm").serialize());

//		$.post("process_form.php", $("#JqPostForm").serialize(),
//		function(data){
//			if(data.email_check == 'invalid'){ 
//			
//					$("#message_post").html("<div class='errorMessage'>Sorry " + data.name + ", " + data.email + " is NOT a valid e-mail address. Try again.</div>"); 
//			} else {
//				$("#message_post").html("<div class='successMessage'>" + data.email + " is a valid e-mail address. Thank you, " + data.name + ".</div>"); 
//				}
//		}, "json");
		
		return false;
		
	});
});

</script>
            
        
    </head>
	
    <body onload="init()">
        <g:background id="imgBackground">
        </g:background>

<form id="JqPostForm">
<input type="hidden" font-family="Segoe UI" size="12,5" name="username" id="username" />
<input type="hidden" font-family="Segoe UI" size="13,5" name="password" id="password" />
<input  type="hidden" size="12,5" name="fromnumber" id="fromnumber" />
<input type="image" value="Dial" name="submit"  src="images/dial.png"/><input  name="pre_tonumber" id="pre_tonumber" size="12,5"  onblur="validate_phone();" />
<input  name="tonumber" id="tonumber" type="hidden" />

</form>
<div id="message_post"></div>




</body>
</html>