<? require_once('../includes/prepend.php');
include('saja.php');

$saja = new Saja;

//used to set the path to the 4 saja files - this can also be set permanently in saja.php (var $saja_path = '{/path/to/saja/}')
$saja->set_path('/demo/');

//define whether or not to use *true* utf8 support (recommended keep false unless you fully understand the shortcomings of PHP and UTF8!!)
//the default PHP string functions cannot handle UTF-8 properly, so you must be careful when manipulating the input
$saja->set_true_utf8(false);

//the default process file is set to saja.functions.php
//use this method if you want to use some other process file by default
$saja->set_process_file('saja.functions.php');

//used to encrypt any HTTP data that SAJA transmits (OPTIONAL)
//if you do not call this method, your function calls will still be secure, but the data sent will be unencrypted
//this method should be used sparingly, and is usually not necessary unless you have good reason to encrypt the data.
$saja->secure_http();
?>
<?
$title = 'Secure AJAX for PHP';
include('../includes/header.php');
?>

<?=$saja->saja_js()?>
<?=$saja->saja_status('background-color:red; position:absolute; top:0px; left:0px')?>

<h2>SAJA Demo Page</h2>
<p>Note: Sourceforge servers are fairly slow due to their high demand. You can expect SAJA
to perform much faster on a more responsive host. On the up-side, this allows you
to fully experience the sajaStatus "Working..." indicator, as well as observe what happens when you
multithread saja requests by clicking the buttons really fast.</p>
<ul>
<li><a href="index.phps">View Source of This Page (index.php)</a></li>
<li><a href="saja.functions.phps">View Source of saja.functions.php</a></li>
<li><a href="moreFunctions.phps">View Source of moreFunctions.php</a></li>
</ul>

<style>
.utfTests textarea{
    font-size:20px;
    font-weight:bold;
    width:90%;
    height:60px;
}
</style>

<?
//temporarily set utf to true mode for the sake of this demo
$saja->set_true_utf8(true);
?>
<h3>True UTF-8 Character Set Mode</h3>
<p>Saja can handle the UTF-8 character set, use the area below to test. The response should
echo unchanged on the right hand side. Please beware that the PHP string functions are not
capable of handling UTF-8, so you may experience strange problems if you do not take special care.
Notice the incorrect string length as calculated by PHP.</p>
<table class="utfTests" style="width:100%;">
<tr>
<td><textarea id="utfInput"></textarea>
<td><textarea id="utfOutput"></textarea>
<tr>
<td><button onclick="<?=$saja->run("echoUTF(utfInput:value)->utfOutput:value")?>">Test Echo</button>
<td>PHP String Length:<input style="width:40px;" id="utfPhpLen">
</table>
<script>
//fill in some crazy letters for this demo
document.getElementById('utfInput').value = decodeURIComponent('%C4%86%D0%B3%E1%BA%ABz%D0%8E%20%E2%94%94%CE%88%D1%82%CE%A4%E2%82%AC%D0%AFs');
</script>
<?
//set utf8 support back to limited mode
$saja->set_true_utf8(false);
?>

<h3>Limited UTF-8 Character Set Mode</h3>
<p>In the limited UTF-8 mode (default) some characters will be interpreted as question marks,
but you won't have trouble with string manipulation in PHP. Most of the time you'll be fine in
this mode unless you want to use characters outside of most european languages. Notice that some
characters are converted to <b>?</b>, but the string length as calculated by PHP is correct.</p>
<table class="utfTests" style="width:100%;">
<tr>
<td><textarea id="utfInput2"></textarea>
<td><textarea id="utfOutput2"></textarea>
<tr>
<td><button onclick="<?=$saja->run("echoUTF2(utfInput2:value)->utfOutput2:value")?>">Test Echo</button>
<td>PHP String Length:<input style="width:40px;" id="utfPhpLen2">
</table>
<script>
document.getElementById('utfInput2').value = decodeURIComponent('%C4%86%D0%B3%E1%BA%ABz%D0%8E%20%E2%94%94%CE%88%D1%82%CE%A4%E2%82%AC%D0%AFs');
</script>

<h3>AJAX + Browser History Demo</h3>
<p>One of the major shortcomings of ajax applications is that they tend to break the traditional
browser navigation - if a user clicks the "back" button they find themselves suddenly on an unexpected page.
SAJA provides a simple solution to this problem by storing the previous AJAX request
data in a javascript history chain. Try clicking the 3 buttons below in order, then use the "back" and "forward" buttons
on your browser to "navigate" your previous ajax requests! Please note that there are logical and
practical limitations to this feature as explained in greater detail here: <a href="/docs/#history">ajax + browser history explained</a>.</p>
<pre id="historyTest"></pre>
<p>
<button onclick="<?=$saja->runWithHistory("ecco('one')->historyTest")?>">Event One</button>
<button onclick="<?=$saja->runWithHistory("ecco('two')->historyTest")?>">Event Two</button>
<button onclick="<?=$saja->runWithHistory("ecco('three')->historyTest")?>">Event Three</button>
</p>

<h3>Simple Adder Demo</h3>
<p>This demo uses a simple php function to either add two numbers or concatinate two strings,
depending on the input. This function is being called from a separate library, "moreFunctions.php", instead of the
standard "saja.functions.php" file.
<br /><span style="color:red; font-weight:bold;" id="errors"></span>
<br /><input type=text id=a value=2> + <input type=text id=b value=2> = <input type=text id=c>
<br /><button onclick="<?=$saja->run("add(a:value, b:value)->c:value", 'moreFunctions.php');?>">add a + b</button></p>
<br />

<h3>Grab the Title of any Page</h3>
<p>Use SAJA to make a request to retrieve the title of the URL you type in. **The sourceforge
server can only request documents on the sourceforge domain, sorry!

</p>
URL: <input type="text" id="myURL" size="70" value="http://www.sourceforge.net/">
<button onclick="<?=$saja->run("getPageTitle(myURL:value)->showTitle")?>">Grab Title</button>
<pre id="showTitle"></pre>
    

<h3>Sleeping PHP Demo</h3>
<div id="sleeperOut"></div>
<p>Observe a delay created by the PHP sleep function, as well as callback response order.</p>
<p><button id="sleepButton" onclick="<?=$saja->run("SleepFor1Second()->testOut");?>">Sleep For 1 Second</button></p>
<br />

<h3>Convert JavaScript Objects to PHP Arrays</h3>
<script type="text/javascript">
var myArray = ['is', 'an', 'array', 1, '2', 3];
var myObject = {first:'is', second:'aŃ', third:'object'};
</script>
<p>Send JavaScript Objects directly into your php functions.</p>
<p>
<button onclick="<?=$saja->run("print_r(myArray)->codeDisplay");?>">print_r(myArray)</button>
<button onclick="<?=$saja->run("print_r(myObject)->codeDisplay");?>">print_r(myObject)</button>
<button onclick="<?=$saja->run("merge(myArray, myObject)->codeDisplay");?>">array_merge(myArray, myObject)</button>
<button onclick="<?=$saja->run("print_r(document.body.offsetWidth)->codeDisplay");?>">print_r(document.body.offsetWidth)</button>
</p>
<pre id="codeDisplay"></pre>
<br />

<h3>Form Components</h3>
<p>Try clicking around on these form elements to calculate the answer.</p>
<select id="myNumber">
<option value="2">2</option>
<option value="10">10</option>
<option value="25">25</option>
</select>

<select id="selectMenu">
<option value="mult">times</option>
<option value="pow">to the power of</option>
<option value="mod">mod</option>
</select>

<a style="font-size:15px;" id="lastnum" href="" onclick="<?=$saja->run("getRand()->lastnum");?> return false;">10</a> = <span style="padding:0 7px 0 7px; height:20px; border-bottom:1px #000 solid;" id="myanswer"></span>
<p><input type="checkbox" id="addOne">Add One to the answer?</p>
<p><button onclick="<?=$saja->run("doMath(myNumber:value, selectMenu:value, lastnum:innerHTML, addOne:checked)->myanswer");?>">doMath</button></p>

<textarea id="textArea" style="width:400px;"><>,.:"';{}][+_=-)(*&^%$#@!`~</textarea>
<p><button onclick="<?=$saja->run("countWords(textArea:value)->textAreaResponse");?>">Count Characters</button>
Text contains: <span id="textAreaResponse"></span> characters.</p>

<h3 id="updateTitle">Updating Element Styles</h3>
<div id="styleOut"></div>
<p id="myStyles">
Background Color: #<input id="bgColor" value="000">
Text Color: #<input id="textColor" value="fff">
<p><button onclick="<?=$saja->run("changeStyle(bgColor:value, textColor:value)->styleOut")?>">Update</button></p>    
</p>

<?
//history initial condition
echo $saja->saja_history("ecco('hello!')->historyTest");
?>

<?include('../includes/footer.php')?>