#!/usr/bin/perl
################################################################################
#
#
################################################################################
use CGI ':standard';
use HTML::Entities; #-- for encode and decode string


(%FORM) = ();
if ($ENV{'REQUEST_METHOD'} eq "POST")
{
	my ($id);
	#-- extract the value inside param into %FORM hash
	foreach $id (param)
		{
			$FORM{$id} = param($id);
		}
} # // if post

print "Content-Type: text/html; charset=utf-8\n\n";

print "<h2>Encode UTF-8 Chinese Character Input</h2><br>";

print &input_form;


#---------------------------------------------------#
#---------------------------------------------------#
sub input_form
{
	my ($content) = "";
	
	my ($value) = "";
	if ($FORM{'data'} ne "")
		{
			$value = $FORM{'data'};
		}
		
	my ($encoded_value) = "";
	my ($process_content) = "";
	
	if ($FORM{'action'} eq "encode")
		{
			$encoded_value = $FORM{'encoded_value'};
			
			# !! attempt to do encoding inside perl but the $FORM{'data'} when split,
			# it become 3 char for Chinese char !!
			my (@arr) = split(//,$FORM{'data'});
			foreach my $c (@arr)
				{
					$c = unpack('C*', $c);
					$process_content .= "$c\n";
				}
		}
	elsif ($FORM{'action'} eq "decode")
		{
		}
		
	
	#-- content ---------------------------------
	$content = qq~
	<script type="text/javascript">
	function encodeCN(id) {
		var tstr = document.getElementById(id).value;
		var bstr = '';
		for(i=0; i<tstr.length; i++)
		{
			if(tstr.charCodeAt(i)>127)
			{
				bstr += '&#' + tstr.charCodeAt(i) + ';';
			}
			else
			{
				bstr += tstr.charAt(i);
			}
		}
		document.getElementById('encoded_value').value = bstr;
	}
	</script>
	
	<form id="fr_in" name="fr_in" action="utf8_encode.pl" style="" method="POST" enctype="application/x-www-form-urlencoded">
	<input type="hidden" onFocus="this.blur()" name="convert" id="convert" value="">
	<input type="hidden" onFocus="this.blur()" name="action" id="action" value="">
	<input type="hidden" name="encoded_value" id="encoded_value" value="">
	
	<textarea id="data" name="data" style="width:600px; height:200px;">$value</textarea>	
	<br>
<xmp>
1. FORM submitted value:
$value

2. Encoded value thru JS before form submit:
$encoded_value

3. *Try to do encoding inside Perl*
$process_content
</xmp>
	

	<input type="button" value="Encode" onClick="encodeCN('data'); document.getElementById('action').value='encode'; this.form.submit();">
	<input type="button" value="Decode" onClick="document.getElementById('action').value='decode'; this.form.submit();">
	</form>
	~;
	#--// content -------------------------------
	
	return ($content);
}