<commit_before><!DOCTYPE html>
<html>
<head lang="en">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cargo</title>

	<!-- css -->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="lib/highlight/styles/github.css">

	<link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
	<div class="container-fluid">
		
		<div class="row">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#" id="a-cargo">Cargo</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">

							<li id="li-gettingStarted"><a href="#">Getting Started</a></li>
							<li id="li-tutorials"><a href="#">Tutorials</a></li>
							<li id="li-docs"><a href="#">Docs</a></li>

						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li id="li-about"><a href="#">About</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>

		<div class="row pageRow" id="page-cargo">
			<div class="row"> 
				<div class="col-xs-12 text-center" id="cargo-intro-container">
					<div class="col-xs-12">
						<img src="img/wheel.svg" id="cargo-intro-wheel"/>
					</div>
					<div class="col-sm-6 col-sm-offset-3 text-center">
						<h2>Cargo is a complete web application framework. It's fast, easy and lightweight.<br><br></h2>
						<p><a class="btn btn-primary btn-lg" href="#" role="button">Download Cargo</a></p>
						<p>v1.0</p>
					</div>
				</div>
			</div>
			<div class="row marketing">
				<div class="col-md-3">
					<span class="glyphicon glyphicon glyphicon-ok"></span>
					<h2>Complete</h2>
					<p>Front-end, server, database. All in one.</p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-play"></span>
					<h2>Easiest setup</h2>
					<p> One download. </p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-road"></span>
					<h2>Smooth learning curve</h2>
					<p>
						Code everything in one language: javascript. 
					</p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-flash"></span>
					<h2>Lightweight, fast, non-blocking</h2>
					<p>Golang background.</p>
				</div>
			</div>

		</div>
	</div>
	<div class="row hidden pageRow" id="page-gettingStarted">
		<div class="col-lg-12">
			<p>-Comment installer, configurer, expliquer les fichiers, la configuration, etc.
				<br>-Comment créer un projet (hello world)
				<br>-Télécharger le projet hello world: complet A à Z (comme angular)
				<br>-Bridge
			</p>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-tutorials">
		<div class="col-sm-2" role="complementary">
			
			<nav class="bs-docs-sidebar affix-top tutorialsSideBar">	
				<h3 id="tutorialsLink-intro" class="tutorials-link tutorialsHeader">Tutorials</h3>
				<ul class="nav bs-docs-sidenav">
					<li id="tutorialsLink-frontEnd" class="tutorials-link"> 
						<a href="#">Front End</a> 
					</li>
					<li id="tutorialsLink-AsynchronousProgramming" class="tutorials-link"> 
						<a href="#">Asynchronous Programming</a> 
					</li>
					<li id="tutorialsLink-events" class="tutorials-link"> 
						<a href="#">Events</a> 
					</li>
					<li id="tutorialsLink-serverSide" class="tutorials-link"> 
						<a href="#">Server-side</a> 
					</li>
				</ul>		
			</nav>
		</div>
		<div class="col-sm-10" role="main">
			<div class="row tutorialsRow tutorialsSectionIntro" id="tutorialsSection-intro">
				<div class="col-xs-12">
					<div class="jumbotron">
						<div class="container">
							<p>Creating a web application is made easy with cargo.</p>
							<p>These tutorials will go through all the components of the framework to make you a web development pro as soon as possible. If it hasn't been done, we suggest starting with the 'Getting Started' page.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-frontEnd">
				<div class="col-xs-12">
					<h2> Front End </h2>
					<h3> Element </h3>
					<p>
						The 'Element' class included in the Cargo javascript framework offers a basic Html element wrapper class to help you create client side graphical interfaces. It gives you the ability to create and manipulate html elements within your javascript files rather than in the traditionnal html and css files. All the functionnalities related to this class can be found within the file 'element.js'. 
					</p>
					<p>
						You do not need to use the 'Element' class or any of it's related functionnalities 
						to develop a web application using the Cargo framework. It can be used in conjunction with other javascript libraries such as Jquery and Bootstrap. If you are an experienced front-end web application developper and already have techniques which you are familiar with, feel free to skip to the <a href="#" id="frontEndNextTutorialLink"> next tutorial</a>.
					</p>

					<h4> Element essential functions </h4>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseElementConstructor">
						Element constructor
					</button>
					<div class="collapse" id="collapseElementConstructor">
						<p> 
							To create a new element, simply call it's constructor function.
						</p>
						<pre><code class="javascript">var myElement = new Element(parent, params, callback, isAppendAtFront)</code></pre>
						<ul>
							<li><b>parent</b> Parent element of this element. Can be an Element or a DOM element.</li>
							<li><b>params</b> List of parameters.</li>
							<li><b>callback</b> Function called after the initialization is completed.</li>
							<li><b>isAppendAtFront</b> 'true': the element is put in front of the other elements. 'false': it will be at the end.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseAppendElement">
						.appendElement()
					</button>
					<div class="collapse" id="collapseAppendElement">
						<p> 
							This function is used to append a child element to an existing element. 
						</p>
						<pre><code class="javascript">myElement.appendElement(childElement)</code></pre>
						<ul>
							<li><b>childElement</b> The element to append. It can be an existing element, or a list of element properties.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseRemoveElement">
						.removeElement()
					</button>
					<div class="collapse" id="collapseRemoveElement">
						<p> 
							This function is used to remove a child element from an existing element. 
						</p>
						<pre><code class="javascript">myElement.removeElement(childElement)</code></pre>
						<ul>
							<li><b>childElement</b> The child element to remove.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseGetChildById">
						.getChildById()
					</button>
					<div class="collapse" id="collapseGetChildById">
						<p> 
							This function is used to find a child recursively inside the element's childs hierarchy. 
						</p>
						<pre><code class="javascript">myElement.getChildById("childElementId")</code></pre>
						<ul>
							<li><b>childElement</b> {string} id The id of the element to retreive.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseDown">
						.down()
					</button>
					<div class="collapse" id="collapseDown">
						<p> 
							This function is used to navigate downwards in the Element hierarchy. It returns the last child of the element.
						</p>
						<pre><code class="javascript">myElement.down()</code></pre>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseUp">
						.up()
					</button>
					<div class="collapse" id="collapseUp">
						<p> 
							This function is used to navigate upwards in the Element hierarchy. It returns the immediate parent of the element.
						</p>
						<pre><code class="javascript">myElement.up()</code></pre>
					</div>

					<h4> Example </h4>

					<p>Basic layout</p>


					<pre><code class="javascript">/* In this example we use the DOM element with the id 'elementExampleContainer' as a parent to <br>our first element. When creating a web page from scratch you can use <br>'document.getElementsByTagName("body")[0]'' instead to get the DOM body element. */ <br>var containerElement = new Element(<br>&#09;document.getElementById( "elementExampleContainer"),<br>&#09;{ "tag": "div", "style": "height: 100%; width: 100%;" }<br>);<br><br>/* Storing the 'headerElement' in a variable using the .down() function */<br>var headerElement = containerElement.appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 10%; width: 100%; background: black; color: white; text-align:center"<br>}).down();<br><br>/* You can use '.element' to access the DOM element and change it's properties. */ <br>headerElement.element.innerHTML = "header";<br><br>/* You can also create all the elements consecutiveley using the '.down()' and 'up()' functions to navigate. */ <br>containerElement.appendElement({<br>&#09;"id" : "middle",<br>&#09;"tag": "div",<br>&#09;"style": "height: 80%; width: 100%; background: gray; color: white; text-align:center",<br>}).down().appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 50px; width: 200px; background: lightgray; color: black;",<br>&#09;"innerHtml" : "rectangle"<br>}).up().appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 10%; width: 100%; background: darkgray; color: white; text-align:center",<br>&#09;"innerHtml" : "footer"<br>});<br><br>/* '.getChildById' gives you the ability to later retreive a child element with a given id. */<br>containerElement.getChildById("middle").element.style.background = "gray";</code></pre>
					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#elementExampleResult">
						View result
					</button>
					<div class="collapse" id="elementExampleResult">
						<div class="exampleContainer" id="elementExampleContainer">
						</div>
					</div>

				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-AsynchronousProgramming">
				<div class="col-xs-12">
					<h2> Asynchronous programming </h2>
					<p>
						Asynchronous programming means that your web application can execute multiple segments of code simultaneously. To do so, Cargo uses 'callbacks'. A callback is a function that can be passed as an argument in another function. Cargo has three types of callbacks.
					</p>
					<ul>
						<li> Progress callbacks: executed during the progress of the function. (For example used as feedback when transfering a file through the network).</li>
						<li> Success callbacks: executed when the function has succeded.</li>
						<li> Error callbacks: executed when the function fails.</li>
					</ul>
					<p>
						Callbacks are in most cases optional parameters, meaning that if you can pass an empty function (<code>function(){}</code>) or <code>undefined</code> as a callback.
					</p>
					<p>
						Some functions have a parameter named 'caller'. The caller is a JSON in which you can store object from the request context and get it back from the response context. This means you can place a variable in the 'caller', pass it as a parameter to the function, modify it in the callback functions, and retrieve it afterwards.
					</p>
					<h4> Example </h4>
					<p>Session manager's login function</p>
					<pre><code class="javascript">var user = {<br>&#09;"userName" : "myUserName",<br>&#09;"password" : "<PASSWORD>"<br>};<br><br>server.sessionManager.login(<br>&#09;/* name */<br>&#09;user.userName,<br>&#09;/* password */<br>&#09;user.password,<br>&#09;/* Success Callback */<br>&#09;function (result, caller){<br>&#09;&#09;console.log(caller.userName + " logged in.");<br>&#09;},<br>&#09;/* Error Callback */<br>&#09;function (err, caller) {<br>&#09;&#09;console.log("Login error ", err);<br>&#09;},<br>&#09;/* caller */<br>&#09;{ "user": user}<br>);</code></pre>
					<p>Note that the 'login' function has a success callback, an error callback and a caller but it does not have a progress callback.</p>
				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-events">
				<div class="col-xs-12">
					<h2> Events </h2>
					<h3> Event Manager </h3>
					<h3> Local events </h3>
					Local events will be accessible only from within the running application, meaning that other applications on the network will not be able to respond to those events.
					<h4> Example </h4>
					<h3> Network events </h3>
					Network events are available to all other applications connected to the server.
					<h3> Attaching events </h3>
				</div>

			</div>

			<div class="row tutorialsRow" id="tutorialsSection-serverSide">
				<div class="col-xs-12">
					<h2> Server Side </h2>
					When developing a web app using Cargo, you never need to code in another language than javasript.
				</div>
			</div>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-docs">
		<div class="col-12">
			<a href="#">Docs</a>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-about">
		<div class="col-12">
			<a href="#">About</a>
		</div>
	</div>
</div>
<!-- Libs -->
<script src="lib/jquery/js/jquery-3.1.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/highlight/highlight.pack.js"></script>
<script src="lib/cargo/element.js"></script>
<script src="lib/cargo/utility.js"></script>

<script src="js/main.js"></script>
</body>

</html><commit_msg>website element param ajustment<commit_after><!DOCTYPE html>
<html>
<head lang="en">
	<meta http-equiv="x-ua-compatible" content="IE=edge">
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Cargo</title>

	<!-- css -->
	<link rel="stylesheet" type="text/css" href="lib/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="lib/highlight/styles/github.css">

	<link rel="stylesheet" type="text/css" href="css/main.css">

</head>

<body>
	<div class="container-fluid">
		
		<div class="row">
			<nav class="navbar navbar-default">
				<div class="container-fluid">
					<div class="navbar-header">
						<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#" id="a-cargo">Cargo</a>
					</div>

					<!-- Collect the nav links, forms, and other content for toggling -->
					<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
						<ul class="nav navbar-nav">

							<li id="li-gettingStarted"><a href="#">Getting Started</a></li>
							<li id="li-tutorials"><a href="#">Tutorials</a></li>
							<li id="li-docs"><a href="#">Docs</a></li>

						</ul>

						<ul class="nav navbar-nav navbar-right">
							<li id="li-about"><a href="#">About</a></li>
						</ul>
					</div><!-- /.navbar-collapse -->
				</div><!-- /.container-fluid -->
			</nav>
		</div>

		<div class="row pageRow" id="page-cargo">
			<div class="row"> 
				<div class="col-xs-12 text-center" id="cargo-intro-container">
					<div class="col-xs-12">
						<img src="img/wheel.svg" id="cargo-intro-wheel"/>
					</div>
					<div class="col-sm-6 col-sm-offset-3 text-center">
						<h2>Cargo is a complete web application framework. It's fast, easy and lightweight.<br><br></h2>
						<p><a class="btn btn-primary btn-lg" href="#" role="button">Download Cargo</a></p>
						<p>v1.0</p>
					</div>
				</div>
			</div>
			<div class="row marketing">
				<div class="col-md-3">
					<span class="glyphicon glyphicon glyphicon-ok"></span>
					<h2>Complete</h2>
					<p>Front-end, server, database. All in one.</p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-play"></span>
					<h2>Easiest setup</h2>
					<p> One download. </p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-road"></span>
					<h2>Smooth learning curve</h2>
					<p>
						Code everything in one language: javascript. 
					</p>
				</div>
				<div class="col-md-3">
					<span class="glyphicon glyphicon-flash"></span>
					<h2>Lightweight, fast, non-blocking</h2>
					<p>Golang background.</p>
				</div>
			</div>

		</div>
	</div>
	<div class="row hidden pageRow" id="page-gettingStarted">
		<div class="col-lg-12">
			<p>-Comment installer, configurer, expliquer les fichiers, la configuration, etc.
				<br>-Comment créer un projet (hello world)
				<br>-Télécharger le projet hello world: complet A à Z (comme angular)
				<br>-Bridge
			</p>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-tutorials">
		<div class="col-sm-2" role="complementary">
			
			<nav class="bs-docs-sidebar affix-top tutorialsSideBar">	
				<h3 id="tutorialsLink-intro" class="tutorials-link tutorialsHeader">Tutorials</h3>
				<ul class="nav bs-docs-sidenav">
					<li id="tutorialsLink-frontEnd" class="tutorials-link"> 
						<a href="#">Front End</a> 
					</li>
					<li id="tutorialsLink-AsynchronousProgramming" class="tutorials-link"> 
						<a href="#">Asynchronous Programming</a> 
					</li>
					<li id="tutorialsLink-events" class="tutorials-link"> 
						<a href="#">Events</a> 
					</li>
					<li id="tutorialsLink-serverSide" class="tutorials-link"> 
						<a href="#">Server-side</a> 
					</li>
				</ul>		
			</nav>
		</div>
		<div class="col-sm-10" role="main">
			<div class="row tutorialsRow tutorialsSectionIntro" id="tutorialsSection-intro">
				<div class="col-xs-12">
					<div class="jumbotron">
						<div class="container">
							<p>Creating a web application is made easy with cargo.</p>
							<p>These tutorials will go through all the components of the framework to make you a web development pro as soon as possible. If it hasn't been done, we suggest starting with the 'Getting Started' page.</p>
						</div>
					</div>
				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-frontEnd">
				<div class="col-xs-12">
					<h2> Front End </h2>
					<h3> Element </h3>
					<p>
						The 'Element' class included in the Cargo javascript framework offers a basic Html element wrapper class to help you create client side graphical interfaces. It gives you the ability to create and manipulate html elements within your javascript files rather than in the traditionnal html and css files. All the functionnalities related to this class can be found within the file 'element.js'. 
					</p>
					<p>
						You do not need to use the 'Element' class or any of it's related functionnalities 
						to develop a web application using the Cargo framework. It can be used in conjunction with other javascript libraries such as Jquery and Bootstrap. If you are an experienced front-end web application developper and already have techniques which you are familiar with, feel free to skip to the <a href="#" id="frontEndNextTutorialLink"> next tutorial</a>.
					</p>

					<h4> Element essential functions </h4>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseElementConstructor">
						Element constructor
					</button>
					<div class="collapse" id="collapseElementConstructor">
						<p> 
							To create a new element, simply call it's constructor function.
						</p>
						<pre><code class="javascript">var myElement = new Element(parent, params, callback, appendFront)</code></pre>
						<ul>
							<li><b>parent</b> Parent element of this element. Can be an Element or a DOM element.</li>
							<li><b>params</b> List of parameters.</li>
							<li><b>callback</b> Function called after the initialization is completed.</li>
							<li><b>appendFront</b> 'true': the element is put in front of the other elements. 'false': it will be at the end.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseAppendElement">
						.appendElement()
					</button>
					<div class="collapse" id="collapseAppendElement">
						<p> 
							This function is used to append a child element to an existing element. 
						</p>
						<pre><code class="javascript">myElement.appendElement(childElement)</code></pre>
						<ul>
							<li><b>childElement</b> The element to append. It can be an existing element, or a list of element properties.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseRemoveElement">
						.removeElement()
					</button>
					<div class="collapse" id="collapseRemoveElement">
						<p> 
							This function is used to remove a child element from an existing element. 
						</p>
						<pre><code class="javascript">myElement.removeElement(childElement)</code></pre>
						<ul>
							<li><b>childElement</b> The child element to remove.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseGetChildById">
						.getChildById()
					</button>
					<div class="collapse" id="collapseGetChildById">
						<p> 
							This function is used to find a child recursively inside the element's childs hierarchy. 
						</p>
						<pre><code class="javascript">myElement.getChildById("childElementId")</code></pre>
						<ul>
							<li><b>childElement</b> {string} id The id of the element to retreive.</li>
						</ul>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseDown">
						.down()
					</button>
					<div class="collapse" id="collapseDown">
						<p> 
							This function is used to navigate downwards in the Element hierarchy. It returns the last child of the element.
						</p>
						<pre><code class="javascript">myElement.down()</code></pre>
					</div>

					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseUp">
						.up()
					</button>
					<div class="collapse" id="collapseUp">
						<p> 
							This function is used to navigate upwards in the Element hierarchy. It returns the immediate parent of the element.
						</p>
						<pre><code class="javascript">myElement.up()</code></pre>
					</div>

					<h4> Example </h4>

					<p>Basic layout</p>


					<pre><code class="javascript">/* In this example we use the DOM element with the id 'elementExampleContainer' as a parent to <br>our first element. When creating a web page from scratch you can use <br>'document.getElementsByTagName("body")[0]'' instead to get the DOM body element. */ <br>var containerElement = new Element(<br>&#09;document.getElementById( "elementExampleContainer"),<br>&#09;{ "tag": "div", "style": "height: 100%; width: 100%;" }<br>);<br><br>/* Storing the 'headerElement' in a variable using the .down() function */<br>var headerElement = containerElement.appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 10%; width: 100%; background: black; color: white; text-align:center"<br>}).down();<br><br>/* You can use '.element' to access the DOM element and change it's properties. */ <br>headerElement.element.innerHTML = "header";<br><br>/* You can also create all the elements consecutiveley using the '.down()' and 'up()' functions to navigate. */ <br>containerElement.appendElement({<br>&#09;"id" : "middle",<br>&#09;"tag": "div",<br>&#09;"style": "height: 80%; width: 100%; background: gray; color: white; text-align:center",<br>}).down().appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 50px; width: 200px; background: lightgray; color: black;",<br>&#09;"innerHtml" : "rectangle"<br>}).up().appendElement({<br>&#09;"tag": "div",<br>&#09;"style": "height: 10%; width: 100%; background: darkgray; color: white; text-align:center",<br>&#09;"innerHtml" : "footer"<br>});<br><br>/* '.getChildById' gives you the ability to later retreive a child element with a given id. */<br>containerElement.getChildById("middle").element.style.background = "gray";</code></pre>
					<button class="btn btn-default" type="button" data-toggle="collapse" data-target="#elementExampleResult">
						View result
					</button>
					<div class="collapse" id="elementExampleResult">
						<div class="exampleContainer" id="elementExampleContainer">
						</div>
					</div>

				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-AsynchronousProgramming">
				<div class="col-xs-12">
					<h2> Asynchronous programming </h2>
					<p>
						Asynchronous programming means that your web application can execute multiple segments of code simultaneously. To do so, Cargo uses 'callbacks'. A callback is a function that can be passed as an argument in another function. Cargo has three types of callbacks.
					</p>
					<ul>
						<li> Progress callbacks: executed during the progress of the function. (For example used as feedback when transfering a file through the network).</li>
						<li> Success callbacks: executed when the function has succeded.</li>
						<li> Error callbacks: executed when the function fails.</li>
					</ul>
					<p>
						Callbacks are in most cases optional parameters, meaning that if you can pass an empty function (<code>function(){}</code>) or <code>undefined</code> as a callback.
					</p>
					<p>
						Some functions have a parameter named 'caller'. The caller is a JSON in which you can store object from the request context and get it back from the response context. This means you can place a variable in the 'caller', pass it as a parameter to the function, modify it in the callback functions, and retrieve it afterwards.
					</p>
					<h4> Example </h4>
					<p>Session manager's login function</p>
					<pre><code class="javascript">var user = {<br>&#09;"userName" : "myUserName",<br>&#09;"password" : "<PASSWORD>"<br>};<br><br>server.sessionManager.login(<br>&#09;/* name */<br>&#09;user.userName,<br>&#09;/* password */<br>&#09;user.password,<br>&#09;/* Success Callback */<br>&#09;function (result, caller){<br>&#09;&#09;console.log(caller.userName + " logged in.");<br>&#09;},<br>&#09;/* Error Callback */<br>&#09;function (err, caller) {<br>&#09;&#09;console.log("Login error ", err);<br>&#09;},<br>&#09;/* caller */<br>&#09;{ "user": user}<br>);</code></pre>
					<p>Note that the 'login' function has a success callback, an error callback and a caller but it does not have a progress callback.</p>
				</div>
			</div>
			<div class="row tutorialsRow" id="tutorialsSection-events">
				<div class="col-xs-12">
					<h2> Events </h2>
					<h3> Event Manager </h3>
					<h3> Local events </h3>
					Local events will be accessible only from within the running application, meaning that other applications on the network will not be able to respond to those events.
					<h4> Example </h4>
					<h3> Network events </h3>
					Network events are available to all other applications connected to the server.
					<h3> Attaching events </h3>
				</div>

			</div>

			<div class="row tutorialsRow" id="tutorialsSection-serverSide">
				<div class="col-xs-12">
					<h2> Server Side </h2>
					When developing a web app using Cargo, you never need to code in another language than javasript.
				</div>
			</div>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-docs">
		<div class="col-12">
			<a href="#">Docs</a>
		</div>
	</div>
	<div class="row hidden pageRow" id="page-about">
		<div class="col-12">
			<a href="#">About</a>
		</div>
	</div>
</div>
<!-- Libs -->
<script src="lib/jquery/js/jquery-3.1.1.min.js"></script>
<script src="lib/bootstrap/js/bootstrap.min.js"></script>
<script src="lib/highlight/highlight.pack.js"></script>
<script src="lib/cargo/element.js"></script>
<script src="lib/cargo/utility.js"></script>

<script src="js/main.js"></script>
</body>

</html>
{'fraction_non_alphanumeric': 0.1650343821629506, 'fraction_numerical': 0.011460720983538238, 'mean_word_length': 3.57353875476493, 'pattern_counts': {'":': 22, '<': 861, '<?xml version=': 0, '>': 861, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5509394', 'n_tokens_mistral': 11292, 'n_tokens_neox': 8960, 'n_words': 2684}