{include file="$gentemplates/$header_tpl"}
	<table width="100%" border="0" cellpadding="0" cellspacing="0">
	<tr valign="middle"><td height="25px">
			<h2>{$lang.section.voip_call} {$lang.voip.rate_page}</h2>
			{if $error}<div class="sep"></div><div class="error_msg">* {$error}</div>{/if}
	</td></tr>
	<tr><td class="text" style="padding-top:5px">
	{if $from_number}
	<div class="content">
		<table class="user_vert_table" cellpadding="0" cellspacing="0">
		<tr>
			<td rowspan="8" valign="top" align="center" width="120px;">
				<div><a href="{$user_info.profile_link}"><img src="{$user_info.upload_path}" alt="{$user_info.login}" border="0" class="icon imgcanvas" /></a></div>
				<div><a href="{$user_info.profile_link}">{$user_info.name}</a></div>
				<div>{$user_info.age} {$lang.home_page.ans}</div>
			</td>
		</tr>
		<tr>
			<th align="{$default_left}" width="170px;">{$lang.voip.from_number}:</th>
			<td>{$from_number}</td>
		</tr>
		<tr>
			<th>{$lang.voip.calling_to}:</th>
			<td>{$rates.touser_name}{*if $add_site_funds}&nbsp;&nbsp;* {$add_site_funds}{/if*}</td>
		</tr>
		<tr>
			<th>{$lang.voip.calling_cost}:</th>
			<td>{if $rates.rate.rate}{$rates.rate.rate} {$rates.site_balance.currency_name} {else}<font class="error_msg">* {$rate_err}</font>{/if}</td>
		</tr>
		<tr>
			<th>{$lang.voip.site_balance}:</th>
			<td>{$rates.site_balance.balance} {$rates.site_balance.currency_name}</td>
		</tr>
		{*if !$add_site_funds}
		<tr>
			<th>{$lang.voip.add_call_credits}:</th>
			<td id="add_form">
				<form name="add_form" action="{$file_name}" method="post" enctype="multipart/form-data" style="margin:0px;">
					{$add_form.hiddens}
					<input type="text" name="funds" value="" size="4" /> {$rates.site_balance.currency_name}
					<input type="button" value="{$lang.button.add}" onclick="javascript: checkFunds(document.add_form.funds);" />
				</form>
			</td>
		</tr>
		{/if*}
		{if $add_site_funds}
		<tr>
			<th>{$lang.voip.add_call_credits}:</th>
			<td>&nbsp;&nbsp;* {$add_site_funds}</td>			
		</tr>
		{/if}
		<!--tr>
			<th>{$lang.voip.call_credits}:</th>
			<td>{$rates.balance.balance} {$rates.balance.currency_name} * {$lang.voip.call_credit_update_notice}</td>
		</tr-->
		{*if $rates.balance.balance > 0 && $rates.rate}
		<tr>
			<th></th>
			<td style="padding-bottom:3px; font-weight:bold; font-size:12px;" >
				<div id="call_status"><input type="button" name="call" value="{$lang.voip.call_button}" onclick="javascript: call({$to_id_user});" /></div>
				<input type="hidden" name="call_id" id="rc_id" value="0" />
				<input type="hidden" name="call_status_code" id="call_st_code" value="0" />
			</td>
		</tr>
		{/if*}
		{if !$add_site_funds}
		<tr>				
			<th><b>Call status:</b></th>
			<td><span id="status">Online</span></td>
        </tr>
		<tr>
                {literal}
				<script type="text/javascript" src="http://static.twilio.com/libs/twiliojs/1.0/twilio.js"></script>
                <script type="text/javascript">
				to_user = {/literal}{$to_id_user}{literal};
				$(document).ready(function(){
                                        Twilio.Device.setup("{/literal}{$token}{literal}");
					var connection=null;
					$("#hangup").click(function() {
						$.post(SITE_ROOT+"/voip_call.php",{sel:"stop_call", to_user:to_user},function(data){
							$('#status').text("HangUp");
						});
						Twilio.Device.disconnectAll();
						toggleCallStatus();
					});

					Twilio.Device.incoming(function (conn) {
						if (confirm('Accept incoming call from ' + conn.parameters.From + '?')){
							connection=conn;
							conn.accept();
						}
					});
					
					Twilio.Device.ready(function (device) {
						$('#status').text('Ready to start call');
					});

					Twilio.Device.offline(function (device) {
						$('#status').text('Offline');
					});

					Twilio.Device.error(function (error) {
						$('#status').text(error);
					});

					Twilio.Device.connect(function (conn) {
						$('#status').text("Successfully established call");
						toggleCallStatus();
					});

					Twilio.Device.disconnect(function (conn) {
						$('#status').text("Call ended");
						toggleCallStatus();
					});
					function toggleCallStatus(){
						$('#call').toggle();
						$('#hangup').toggle();
					}
				});
				function call_phone(){
					number = '{/literal}{$to_number}{literal}';
					if (number == ''){
                                            ShowAjaxError('', '{/literal}{$lang.voip.err.empty_phone}{literal}');
					}else{
                                            $.post(SITE_ROOT+"/voip_call.php",{sel:"call", called: number, to_user:to_user},function(data){
                                                $('#status').text(data);	
                                            });
					}
				}
					
                </script>
                {/literal}				
				<!--th></th-->
				<td colspan=2>
					<input type="button" value="{$lang.voip.hangup}" id="hangup" style="display:none;" >&nbsp;&nbsp;
				{if !isset($notice) && $notice eq ''}
					<input type="button" value="send call request" onclick="SendVoipRequest({$to_id_user});"></td>
                {else}
					<input type="hidden" id="client_to_call" name="client_to_call" value="{$user_info.login|lower}"/>
					<input type="button" id="call" value="{$lang.voip.call}" onclick="call_phone();" style="display:block;" >
					</td>
		</tr>
				{/if}
		{/if}
		</table>
	</div>
	{/if}
	</td></tr>
	</table>
<script type="text/javascript">
{if $rates.site_balance.balance > 0}

max_funds = parseFloat({$rates.site_balance.balance});
{literal}
function checkFunds(funds_obj){
	funds = parseFloat(funds_obj.value);
	if (funds > max_funds){
		alert("{/literal}{$lang.voip.err.too_big_funds|escape:javascript}{literal}");
		return false;
	}
	if (funds <= 0 || isNaN(funds)){
		alert("{/literal}{$lang.voip.err.zero_funds|escape:javascript}{literal}");
		return false;
	}
	document.add_form.submit();
}
{/literal}
{/if}

{if $rates.balance.balance > 0}
path_to_image = '{$site_root}{$template_root}{$template_images_root}/';
file_name = '{$file_name}';
check_call_status_interval = 2000; //ms
{literal}
function call(to_user){
	destination_odj = document.getElementById('call_status');
	add_form_obj = document.getElementById('add_form');
	refresh_button_obj = document.getElementById('refresh_button');
	
	//add_form_obj.style.display = '';
	
	str="sel=call&to_user="+to_user;
	old_dest = '<img src="'+path_to_image+'loading.gif" border="0"/>';
	asinch = false;
	ajaxRequest(file_name, str, destination_odj, old_dest, asinch);
	checkCallStatus();
	int=self.setInterval('checkCallStatus();',check_call_status_interval);
}

function checkCallStatus(){
	destination_odj = document.getElementById('call_status');
	call_status1 = document.getElementById('call_st_code').value;
	if (call_status1 == '-1') int=window.clearInterval(int);
	rc_id1 = document.getElementById('rc_id').value;
	if (rc_id1){
		str = 'sel=get_status&rs_id='+rc_id1;
		asinch = false;
		runJS = true;
		ajaxRequest(file_name, str, destination_odj, destination_odj.innerHTML, asinch);
	}
}
{/literal}
{/if}
</script>
{include file="$gentemplates/$footer_tpl"}