Initial commit

masks/add_code.html

@@ -0,0 +1,206 @@
+<div id="add_code_container">
+	<form id="add_code" name="add_code">
+		<div class="h1_wrap">
+			<h1 class="round" id="add_code_title"><span>Ajouter du code</span></h1>
+			<div id="loggued_name_container">
+				<p id="logging_info" class="round_top">Vous &ecirc;tes sur le point de poster sous le compte de <span id="loggued_name"></span> (<span id="loggued_company"></span>)</p>
+				<p><input type="button" id="logout_btn" class="round" value="Ce n'est pas vous ?" /></p>
+			</div>
+			<textarea id="content" name="content" class="round"></textarea>
+		</div>
+		<table id="extra_data">
+			<tr>
+				<td>Description</td>
+				<td><input type="text" name="description" id="description" class="round" maxlength="200" /></td>
+			</tr>
+			<tr>
+				<td>Lien (facultatif)</td>
+				<td>
+					<input type="text" name="link" id="link" class="round" maxlength="200" />
+					<span id="available_phrase" class="round"></span>
+					<span id="link_result" class="share round"></span>
+					<input type="hidden" name="link_escaped" id="link_escaped" value="" />
+				</td>
+			</tr>
+			<tr id="auth_name_container" style="display:none;">
+				<td>Nom &amp; pr&eacute;nom</td>
+				<td><input type="text" name="auth_name" class="round" /></td>
+			</tr>
+			<tr id="auth_company_container" style="display:none;">
+				<td>Soci&eacute;t&eacute;</td>
+				<td><input type="text" name="auth_company" class="round" value="Micropole" /></td>
+			</tr>
+			<tr><td colspan="2" class="last"><input type="button" id="add_code_btn" name="add_code_btn" value="Envoyer" class="button heavy round" /></td></tr>
+		</table>
+	</form>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//Tmp
+	databap.tmp('last_val', 'string');
+	
+	//content
+	databap.getMainElem('#content').text(databap.consts.add_code_text);
+	databap.getMainElem('#content').click(function(){clearDefaultValue($(this), databap.consts.add_code_text);});
+
+	//link phrase
+	databap.getMainElem('#link').bind
+	(
+		'keyup',
+		function()
+		{
+			$link = databap.getMainElem('#link_result');
+			var link = $.trim($(this).val());
+			var escaped_link = link.replace(/ /g, '_');
+			if(escaped_link!=databap.tmp('last_val'))
+			{
+				databap.tmp('last_val', escaped_link);
+				$link.text(databap.getCodeLink(escaped_link));
+				databap.getMainElem('#link_escaped').val(escaped_link);
+				if(escaped_link!='') 
+				{
+					//check availability
+					checkUrlAvailability($.trim(escaped_link));
+				}
+				else
+				{
+					if($link.is(':visible')) $link.hide('fast');
+					databap.getMainElem('#available_phrase').hide('fast');
+				}
+			}
+		}
+	);
+
+	//submit
+	databap.getMainElem('#add_code').submit(function(event){event.preventDefault();});
+	databap.getMainElem('#add_code_btn').click
+	(
+		function()
+		{
+			var code = databap.getMainElem('#content').val();
+									
+			if
+			(
+				code!=databap.consts.add_code_text &&
+				code!='' &&
+				databap.getMainElem('#description').val()!='' &&
+				databap.getMainElem('#auth_name').val()!='' &&
+				databap.getMainElem('#auth_company').val()!=''
+			)
+			{
+				databap.saveForm
+				(
+					'add_code',
+					databap.getMainElem('#add_code'),
+					function(iCodeId)
+					{
+						if(!iCodeId || iCodeId===null || iCodeId==0)
+						{
+							databap.addErrorBefore('Erreur d\'authentification', '#add_code_btn');
+							databap.$main.find('#auth_name_container, #auth_company_container').show('fast');
+						}
+						else
+						{
+							var link = databap.getMainElem('#link_escaped').val();
+							databap.vars.code = (link=='')?iCodeId:link;
+							debug('returned : '+databap.vars.code); 
+							databap.switchPage(databap.pages.read_code);
+						}
+					},
+					true
+				);
+			}
+			else
+			{
+				databap.addErrorBefore('Tous les champs ne sont pas remplis', '#add_code_btn');
+			}
+		}
+	);
+
+	//Add logged in warning
+	/*databap.getUserInfo
+	(
+		function(user)
+		{
+			//hide logon fields
+			databap.getMainElem('#auth_name_container, #auth_company_container').hide();
+
+			//show loggued user information
+			databap.getMainElem('#loggued_name').text(user.name);
+			databap.getMainElem('#loggued_company').text(user.company);
+			databap.getMainElem('#loggued_name_container').show();
+		}
+	);
+
+	//post re-login 
+	databap.getMainElem('#logout_btn').click
+	(
+		function()
+		{
+			databap.getMainElem('#auth_name_container, #auth_company_container').show();
+			databap.getMainElem('#loggued_name_container').hide('fast');
+		}
+	);*/
+
+	//On resize
+	//databap.resetSize = function(){databap.getMainElem('#content').height('300');};
+	databap.onResize = function()
+	{
+		//TODO : to be replaced by tinyscrollbar
+		databap.$main.css('overflow', 'auto');
+		
+		var iCodeContainerHeight = $('#add_code_container').height();
+		if(iCodeContainerHeight != databap.consts.pageMaxHeight)
+		{
+			databap.getMainElem('#content').height('+='+(databap.consts.pageMaxHeight-iCodeContainerHeight));
+		}
+	};
+
+	//Init's end
+	databap.setInitEnd(true);
+};
+
+function checkUrlAvailability(phrase, bTriggered)
+{
+	if(bTriggered == true)
+	{
+		databap.getInfo
+		(
+			'url',
+			function(bExist)
+			{
+				var availabilityClass, availabilityText;
+				var $link = databap.getMainElem('#link_result');
+				if(bExist=='0')
+				{
+					availabilityClass = 'available';
+					availabilityText = 'Disponible';
+					if($link.is(':hidden')) $link.show('fast');
+				}
+				else
+				{
+					availabilityClass = 'unavailable';
+					availabilityText = 'Indisponible';
+					if($link.is(':visible')) $link.hide('fast');
+				}
+				databap.getMainElem('#available_phrase')
+					.removeClass('available unavailable')
+					.addClass(availabilityClass)
+					.text(availabilityText)
+					.show('fast');
+			},
+			{link_escaped:phrase},
+			'html',
+			function(){},
+			true
+		);
+	}
+	else
+	{
+		databap.addBufferIcon();
+		if(typeof oCheckLinkTimer != "undefined") clearTimeout(oCheckLinkTimer);
+		oCheckLinkTimer = setTimeout(function(){checkUrlAvailability(phrase, true);}, 500);	
+	}
+}
+</script>

masks/chat.html

@@ -0,0 +1,784 @@
+<div id="chat">
+	<div class="h1_wrap" id="chat_title">
+		<h1 class="round"><span>Chat</span></h1>
+	</div>
+
+	<div id="chat_chan">
+		<p class="tab_bar"><span id="join_chan" class="round_top clickable"></span></p>
+	</div>
+	<div id="sidebar">
+		<div class="sidebar_box round">
+			<div id="connected_users_title" class="sidebar_box_title round_top clickable">Connect&eacute;s</div>
+			<div id="connected_users" class="sidebar_box_content"></div>
+		</div>
+		<div class="sidebar_box round">
+			<div class="sidebar_box_title round_top clickable round">Aide</div>
+			<div id="help_open" class="sidebar_box_content help_paperclip clickable hide"></div>
+		</div>
+	</div>
+	<div id="chat_room" class="round">
+		<div id="chat_container">
+			<div class="scrollbar"><div class="track round"><div class="thumb round clickable"><div class="end round clickable"></div></div></div></div>
+			<div id="chat_messages_box">
+				<div id="chat_messages"></div>
+			</div>
+		</div>
+		<div id="chat_input" class="tiny_round">
+			<form id="chat_form" name="chat_form">
+				<input type="text" id="message" name="message" value="" maxlength="500" />
+				<input type="hidden" id="chan" name="chan" value="" maxlength="50" />
+			</form>
+		</div>
+	</div>
+	<div id="template" class="hide">
+		<div id="help" class="help tiny_round">
+				<p class="title">Manuel d'utilisation<span id="close_help" class="clickable">x</span></p>
+				<p class="subtitle"><span>Message</span></p>
+				<p class="item"><span class="key">Echap</span>Supprime le texte en cours de rédaction</p>
+				<p class="item"><span class="key">Fl&egrave;che haut</span>R&eacute;p&egrave;te dernier message envoyé</p>
+				<p class="item"><span class="key">@X Y</span>Vous dites Y &agrave; X (pseudo de Y en rouge)</p>
+				<p class="item"><span class="key">/me X</span>Votre_pseudo X. Utile lorsque vous voulez parler de vous à la 3ème personne. Par exemple : /me se touche la nouille au taff</p>
+				<p class="item"><span class="key">/mail X Y</span>Vous envoyez à X un email contenant Y (adresse professionel)</p>
+				<p class="item">
+					<span class="key">Tab</span>
+					Chaque hit pré-remplie le message en faisant défiler la liste des connectés.
+					Il est possible d'écrire la/les premières lettres afin de faire commencer le défilement aux pseudos commençant par ces lettre-ci.
+					Le fonctionnement demeure le même si l'on fait précéder le pseudo par @
+				</p>
+				<p class="subtitle"><span>Chans</span></p>
+				<p class="item">Les chans sont divisés en trois catégories : les chans privés (PM, pour deux personnes seulement), les chans entreprise (pour toutes les personnes d'une même entreprise) et les autres (chans publiques)</p>
+				<p class="item"><span class="key">/join #X</span>Vous rejoignez le chan X (si autorisé)</p>
+				<p class="item"><span class="key">/pm #X</span>Vous rejoignez le chan privé (vous et X)</p>
+				<p class="item"><span class="key">/quit #X</span>Vous quittez le chan X</p>
+				<p class="item"><span class="key">/chans</span>Liste des chans publiques disponibles (aussi accessible via /channels et /list)</p>
+				<p class="subtitle"><span>Options</span></p>
+				<p class="item"><span class="key">/nick X</span>Vous changez votre peudo en X</p>
+				<p class="item"><span class="key">/mission X</span>Vous changez votre affectation de mission</p>
+				<p class="subtitle"><span>Broutilles</span></p>
+				<p class="item"><span class="key">/9gag X</span>Vous postez le lien 9gag X (URL) dans le chat (utilisable comme proxy)</p>
+				<p class="item"><span class="key">/img X</span>Vous postez l'image X (URL) dans le chat (utilisable comme proxy)</p>
+				<p class="item"><span class="key">/now</span>Horloge parlante</p>
+				<p class="item"><span class="key">/like</span>Vous plussoyez</p>
+				<p class="item"><span class="key">/slap X</span>Vous foutez une grosse tarte &agrave; X</p>
+				<p class="item"><span class="key">/bs X</span>Vous bitch-slappez X</p>
+				<p class="item"><span class="key">/kick X</span>Vous mettez un coup de pied au cul &agrave; X</p>
+				<p class="item"><span class="key">/mean</span>Vous dites une insulte au hasard</p>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//Page constant
+	databap.consts.chanPrefix = 'chan_';
+	databap.consts.chanQuitPrefix = 'quit_chan_';
+	databap.consts.chanUnreadPrefix = 'unread_chan_';
+	
+	//Page variables
+	databap.tmp('sending_msg', 'boolean');
+	databap.initVar('unread_msg', 'object');
+	
+	//Main elements
+	$MsgInput = databap.getMainElem('#message');
+	$MsgInputBox = databap.getMainElem('#chat_input');
+	
+	//Bind message box key events
+	databap.getMainElem('#chat_form').submit(function(e){e.preventDefault();});
+	$MsgInput.bind('keydown', function(e){if(e.which == 9)e.preventDefault();});
+	$MsgInput.keyup(function(event){add_message(event);});
+	
+	//Loading the chat
+	databap.vars.last_message_id = '0';
+	oScrollbar = $('#chat_container').tinyscrollbar({viewport:'#chat_messages_box', overview:'#chat_messages'});
+	
+	//Loading Chans
+	setChanButton();
+	databap.vars.chans_list[databap.consts.all_chan_id] = databap.consts.all_chan_text;
+	databap.vars.unread_msg[databap.consts.all_chan_text] = 0;
+	joinChan(databap.consts.default_chan, true);
+	
+	//window focus
+	//databap.onMouveEnter = function(){if(databap.vars.inputFocus){onPageFocus();}else{$MsgInput.focus();}};
+	//databap.onMouveLeave = function(){$MsgInput.focus();onPageBlur();};
+	$(window).focus(onPageFocus);
+	$(window).blur(onPageBlur);
+	//$(window).focus(function(){debug('focus');}).blur(function(){debug('blur');});
+	
+	//Message Input Focus
+	//$MsgInput.focus(function(){onPageFocus();databap.vars.inputFocus=true;});
+	//$MsgInput.blur(function(){onPageBlur();databap.vars.inputFocus=false;});
+	$MsgInput.focus();
+	//databap.onKeyDown = function(e){if(!databap.vars.inputFocus)$MsgInput.focus();};
+
+	//On resize
+	//databap.resetSize = function(){databap.getMainElem('#chat_messages_box').height(databap.getMainElem('#sidebar').outerHeight());};
+	databap.onResize = function()
+	{
+		databap.$main.css('overflow', 'hidden');
+		
+		//debug('chat page resize triggered');
+		var $cb = databap.getMainElem('#chat_messages_box');
+		var iMaxHeight = databap.consts.pageMaxHeight - 15 -  ($('#chat_title').outerHeight(true) + $('#chat_chan').outerHeight(true) + $('#chat_room').outerHeight(true) - $('#chat_messages_box').outerHeight(true));
+		if($cb.height() != iMaxHeight)
+		{
+			//$cb.animate({height: maxHeight}, 400, function(){oScrollbar.tinyscrollbar_update('bottom');resizing=false;});
+			$cb.height(iMaxHeight);
+			oScrollbar.tinyscrollbar_update('bottom');
+		}
+	};
+	
+	//Disconnect from the chat
+	databap.onQuit = function()
+	{
+		//databap.getSyncInfo('disconnect_chat');
+		databap.vars.chans_list = {};
+		if(typeof oChatTimer != "undefined") clearTimeout(oChatTimer);
+		if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);
+	};
+
+	//Sidebar
+	databap.getMainElem('.sidebar_box_title').click
+	(
+		function()
+		{
+			$(this).toggleClass('round')
+				.closest('.sidebar_box').find('.sidebar_box_content').toggle('fast', function(){databap.resizeMain('true');});
+		}
+	);
+
+	//Help
+	databap.getMainElem('#help_open').click(displayHelp);
+	
+	//Init's end
+	databap.setInitEnd(true);
+};
+
+function onPageFocus()
+{
+	databap.vars.focus=true;
+	//iUnreadMessages -= databap.vars.unread_msg[currentChan()];
+	//databap.setTitle();
+	//debug('focused '+databap.vars.focus);
+	switchChan();
+}
+function onPageBlur()
+{
+	databap.vars.focus = false;
+	//debug('blured '+databap.vars.focus);
+}
+
+function setChanButton()
+{
+	var sAddChanText = '+';
+	$JoinButton = $('#join_chan');
+	if($JoinButton.text() == sAddChanText)
+	{
+		$JoinButton
+			.addClass('active')
+			.empty()
+			.append($('<span>#<input type="text" id="input_chan" class="round" /></span>'))
+			.find('#input_chan').focus().keyup
+			(
+				function(e)
+				{
+					if(e.keyCode == 13)
+					{
+						setChanButton();
+						joinChan($(this).val());
+					}
+				}
+			);
+	}
+	else $JoinButton
+			.empty()
+			.text(sAddChanText)
+			.removeClass('active')
+			.click(function(){setChanButton();});	
+}
+
+function getChanKeyName(sChanName)
+{
+	var sChanKeyName = false;
+	//$.each(databap.vars.chans_list, function(sConnChanKeyName, sConnChanName){if(sConnChanName==sChanName) sChanKeyName=sConnChanKeyName;});
+	for(var i in databap.vars.chans_list) {if(databap.vars.chans_list[i]==sChanName){sChanKeyName=i;break;}}
+	return sChanKeyName;
+}
+function getChanName(sChanKeyName)
+{
+	return (typeof databap.vars.chans_list[sChanKeyName] == 'undefined')?false:databap.vars.chans_list[sChanKeyName];
+}
+
+function joinPmChan()
+{
+	var iTargetId = $(this).attr('id');
+	if(iTargetId!=databap.vars.user_id)
+	{
+		var sPmChan = (databap.vars.user_id < iTargetId)?databap.vars.user_id+databap.consts.pm_separator+iTargetId:iTargetId+databap.consts.pm_separator+databap.vars.user_id;
+		joinChan(sPmChan, false, [iTargetId]);
+	}
+}
+
+function joinChan(sChanName, bFirstConn, asAttendees, bSwitchOnJoin)
+{
+	bFirstConn = bFirstConn || false;
+	asAttendees = asAttendees || [];
+	bSwitchOnJoin = (typeof bSwitchOnJoin === 'undefined')?true:bSwitchOnJoin;
+	var sChanName = ucwords(sChanName);
+	
+	if(sChanName!='')
+	{
+		//Join for the first time
+		if(!getChanKeyName(sChanName))
+		{
+			//Check accessibility & bring back messages
+			databap.getInfo
+			(
+				'join_chan',
+				function(result)
+				{
+					//Add to channels list
+					var sConnectedChanKeyName = '';
+					$.each
+					(
+						result.channels,
+						function(iChanId, sReturnedChanName)
+						{
+							//Add tab if not already there
+							if(!getChanName(iChanId)) addChanTab(iChanId, sReturnedChanName, result.channel_tab_names[iChanId], !bSwitchOnJoin);
+						}
+					);
+										
+					//Full reload of messages
+					refresh_chat(true);
+					
+					//Switch to the right chan
+					switchChan(bSwitchOnJoin?result.current_chan_id:null);
+				},
+				{chan:sChanName, first_conn:(bFirstConn?1:0), attendees:asAttendees},
+				'json',
+				function()
+				{
+					databap.addFailIcon('Chan non autorisé');
+				},
+				true
+			);
+		}
+		else
+		{
+			//Switch to the right chan
+			switchChan(bSwitchOnJoin?getChanKeyName(sChanName):null);
+		}
+	}
+	
+	//Focus input bar
+	$('#message').focus();
+}
+
+function currentChan(sChanName)
+{
+	return (!sChanName)?$('#chan').val():$('#chan').val(sChanName).val();
+}
+
+function switchChan(sChanKeyName)
+{
+	var sChanName = currentChan(getChanName(sChanKeyName));
+	sChanKeyName = sChanKeyName || getChanKeyName(sChanName);
+	
+	//Unread msg
+	if(databap.vars.focus) 
+	{
+		databap.vars.unread_msg[sChanName] = 0;
+		databap.vars.unread_msg[databap.consts.all_chan_text] = 0;
+	}
+	syncUnreadMsg();
+	
+	//Switch current channel button to active
+	$('#chat_chan').find('span[id^="'+databap.consts.chanPrefix+'"]').removeClass('active').addClass('clickable');
+	$('#'+databap.consts.chanPrefix+sChanKeyName).addClass('active').removeClass('clickable');
+	
+	//Show current channel messages
+	databap.getMainElem('#chat_messages').find('p').hide();
+	databap.getMainElem('#chat_messages').find('p.class_'+sChanKeyName+', p.class_'+databap.consts.all_chan_id).show();
+	oScrollbar.tinyscrollbar_update('bottom');
+	
+	//Show Current channel members
+	databap.getMainElem('#connected_users').find('p').hide();
+	databap.getMainElem('#connected_users').find('p.class_'+sChanKeyName).show();
+}
+
+function syncUnreadMsg()
+{
+	//Global unread messages
+	var iCountUnread = 0;
+	$.each
+	(
+		databap.vars.unread_msg,
+		function(sChanName, iUnreadMsg)
+		{
+			iCountUnread += iUnreadMsg;
+		}
+	);
+	databap.setTitle((iCountUnread>0)?iCountUnread+' msg':'');
+	
+	//Chan unread messages
+	var sChanUnreadId = '';
+	var sUnreadText = '';
+	iCountUnread = 0;
+	$.each
+	(
+		databap.vars.chans_list,
+		function(sChanKeyName, sChanName)
+		{
+			sChanUnreadId = databap.consts.chanUnreadPrefix+sChanKeyName;
+			iCountUnread = databap.vars.unread_msg[sChanName];
+			sUnreadText = (iCountUnread > 0 && sChanName != currentChan())?'('+iCountUnread+')':'';
+			databap.getMainElem('#'+sChanUnreadId).text(sUnreadText);
+		}
+	);
+}
+
+function addChanTab(sChanKeyName, sChanName, sChanTabName, bLightUp)
+{
+	//Add channel to list
+	sChanTabName = sChanTabName || sChanName;
+	databap.vars.chans_list[sChanKeyName] = sChanName;
+	databap.vars.unread_msg[sChanName] = 0;
+	
+	//Add channel tab
+	var sChanId = databap.consts.chanPrefix+sChanKeyName;
+	if(!$('#'+sChanId).length)
+	{
+		//Prepare clickable chan button
+		var sChanQuitId = databap.consts.chanQuitPrefix+sChanKeyName;
+		var sChanUnreadId = databap.consts.chanUnreadPrefix+sChanKeyName;
+		var $ChanButton = 	$('<span id="'+sChanId+'" class="chan clickable round_top'+(bLightUp?' light_up':'')+'">#</span>')
+							.click(function(){$(this).removeClass('light_up');joinChan(databap.vars.chans_list[$(this).attr('id').substr(databap.consts.chanPrefix.length)]);})
+							.append('<span class="chan_title">'+sChanTabName+'</span>')
+							.append('<span class="chan_unread" id="'+sChanUnreadId+'"></span>')
+							.append($('<a id="'+sChanQuitId+'" class="quit_chan clickable">x</a>').click(function(e){e.stopPropagation();quitChan($(this).attr('id').substr(databap.consts.chanQuitPrefix.length));}));
+							
+		
+		//Add channel tab name and bind delete button
+		$('#join_chan').before($ChanButton);
+	}
+}
+
+function quitChan(sChanKeyName)
+{
+	var sChanName = databap.vars.chans_list[sChanKeyName];
+	if(typeof sChanName != 'undefined' && Object.keys(databap.vars.chans_list).length > 1)
+	{
+		//delete on server
+		databap.getInfo
+		(
+			'quit_chan',
+			function(result){},
+			{chan:sChanName},
+			'text',
+			function(textStatus)
+			{
+				debug('Error chat.html quit channel');
+				databap.showError(textStatus);
+			}
+		);
+		
+		//Delete tab
+		$('#'+databap.consts.chanPrefix+sChanKeyName).fadeOut('fast', function(){$(this).remove();});
+		
+		//Delete from list
+		delete databap.vars.chans_list[sChanKeyName];
+		
+		//Switch back to another chan
+		if(sChanName == currentChan()) switchChan(Object.keys(databap.vars.chans_list)[1]);
+		
+		//Delete messages
+		databap.getMainElem('#chat_messages').find('p.class_'+sChanKeyName).remove();
+	}
+	else databap.addFailIcon('Ceci est le dernier chan');
+}
+
+function add_message(e)
+{
+	switch(e.keyCode)
+	{
+		case 13 : //enter
+			$this = databap.getMainElem('#message');
+			var chat_message = $this.val();
+
+			if(chat_message.substr(0, 7) == '/join #') joinChan(chat_message.substr(7));
+			else if(chat_message.substr(0, 7) == '/quit #') quitChan(getChanKeyName(chat_message.substr(7)));
+			else if(chat_message == '/help') displayHelp();
+			else if(chat_message != '' && databap.tmp('sending_msg') == false) //send
+			{
+				databap.tmp('sending_msg', true);
+				//debug(databap.tmp('sending_msg'));
+				databap.saveForm
+				(
+					'add_message',
+					databap.getMainElem('#chat_form'),
+					function(id)
+					{
+						databap.tmp('sending_msg', false);
+						//debug(databap.tmp('sending_msg'));
+						refresh_chat();
+					},
+					true
+				);
+			}
+			databap.vars.prev_chat_value = chat_message;
+			$this.val('');
+			break;
+		case 27 : //echap
+			databap.getMainElem('#message').val('');
+			break;
+		case 38 : //arrow up
+			$this = databap.getMainElem('#message');
+			var chat_message = $this.val();
+			if(chat_message=='' && typeof databap.vars.prev_chat_value !== 'undefined' && databap.vars.prev_chat_value!='')
+			{
+				$this.val(databap.vars.prev_chat_value);
+			}
+			break;
+		case 40 : //arrow down
+			$this = databap.getMainElem('#message');
+			var chat_message = $this.val();
+			if(typeof databap.vars.prev_chat_value !== 'undefined' && databap.vars.prev_chat_value==chat_message)
+			{
+				$this.val('');
+			}
+			break;
+		case 9 : //tab
+			//Init
+			$this = databap.getMainElem('#message');
+			var chat_message = $.trim($this.val());
+			if(!e.altKey && chat_message.length>0)
+			{
+				var user_name = "";
+				var index = 0;
+	
+				//Finding last word
+				var last_word = (chat_message.lastIndexOf(" ")==-1)?chat_message:chat_message.substr(chat_message.lastIndexOf(" ") + 1);
+				if(last_word.substr(0, 1)=='@') last_word = last_word.substr(1);
+	
+				var last_word_len = last_word.length;
+				var approx_nick = last_word.toLowerCase();
+				
+				//Tabbing through positive results
+				var existing_nick = false;
+				var userIndex = $.inArray(last_word, users_list);
+				if(userIndex==-1)
+				{
+					//Recording first search keyword
+					//debug('buffering approx nick : "'+last_word+'"');
+					prev_approx_nick = approx_nick;
+					prev_approx_nick_len = last_word_len;
+					userIndex = users_list.length - 1;
+				}
+				else existing_nick = true;
+				
+				//debug('last word : "'+last_word+'"');
+				//debug('existing_nick : '+existing_nick);
+				
+				//Next nickname in the list
+				index = (userIndex+1)%users_list.length;
+				count = 0;
+				
+				//loop on the nickname list
+				while(count<users_list.length)
+				{	
+					//debug('index: '+index);
+					var nick = users_list[index];
+					var lower_nick = nick.toLowerCase();
+					if
+					(
+						!existing_nick && lower_nick.substr(0, last_word_len) == approx_nick || 
+						existing_nick && lower_nick.substr(0, prev_approx_nick_len) == prev_approx_nick
+					)
+					{
+						user_name = nick;
+						break;
+					}
+					index = (index+1)%users_list.length;
+					count++;
+				}
+				//debug('chat message : '+chat_message);
+				if(user_name!='') $this.val(chat_message.substr(0, chat_message.length - last_word_len)+user_name+' ');
+			}
+			break;
+		/*default:debug(e.keyCode);break;*/
+		/*
+		default:
+			$this = databap.getMainElem('#message');
+			$copy = databap.getMainElem('#copy_message');
+			$copy.text($this.val());
+			var maxSize = databap.getMainElem('#chat_input').width() - 16;
+			var iInputSize = $copy.width();
+			if(iInputSize < 100)
+			{
+				$this.width(100);
+			}
+			else if(iInputSize > maxSize)	 
+			{
+				$this.width(maxSize);
+			}
+			else
+			{
+				$this.width(iInputSize);
+			}
+		*/
+	}
+}
+
+function refresh_chat(bReset)
+{
+	var bReset = (typeof bReset != 'undefined' && bReset == true);
+	if(typeof oChatTimer != "undefined") clearTimeout(oChatTimer);
+	if(databap.vars.current_page == databap.pages.chat)
+	{
+		if(!databap.vars.loading)
+		{
+			if(bReset)
+			{
+				databap.vars.last_message_id = 0;
+				databap.getMainElem('#chat_messages').empty();
+			}
+			databap.getInfo
+			(
+				'messages',
+				function(result)
+				{
+					var prevLastMsgId = databap.vars.last_message_id;
+					updateUsersList = false;
+					databap.resetIcon();
+					if(databap.vars.last_message_id < result.last_message_id || bReset)
+					{
+						//Update last read message id
+						databap.vars.last_message_id = Math.max(result.last_message_id, prevLastMsgId);
+						
+						//Display messages
+						$.each
+						(
+							result.messages,
+							function(id_message, message_info)
+							{
+								addMessage(message_info, bReset);
+								if(!bReset && message_info.msg_class!='C' /* && message_info.id_user!=databap.vars.user_id */)
+								{
+									databap.vars.unread_msg[getChanName(message_info.id_chan)]++;
+								}
+							}
+						);
+						
+						//Nicknames changes
+						if(updateUsersList === true || prevLastMsgId == 0)
+						{
+							oScrollbar.tinyscrollbar_update('bottom');
+							refresh_users();
+							updateUsersList = false;
+						}
+						else switchChan();
+					}
+				},
+				{message_id:databap.vars.last_message_id},
+				'json',
+				function(textStatus)
+				{
+					debug('Error chat.html 155');
+					databap.showError(textStatus);
+				}
+			);
+			oChatTimer = setTimeout(refresh_chat, databap.vars.focus?2000:5000);
+		}
+		else
+		{
+			oChatTimer = setTimeout(function(){refresh_chat(bReset);}, 500);
+		}
+	}
+}
+
+function addMessage(message_info, bReset)
+{
+	var sChanKeyName = message_info.id_chan;
+	var msg_body = '';
+	switch(message_info.msg_class)
+	{
+		case 'U':
+			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+message_info.message+'</span>';
+			break;
+		case 'A':
+			var url = databap.getCodeLink(message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; un nouveau code : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
+		case 'E':
+			var url = databap.getCodeLink(message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; le code <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
+		case 'PA':
+			var url = databap.getProcLink(message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a ajout&eacute; une nouvelle proc&eacute;dure : <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
+		case 'PE':
+			var url = databap.getProcLink(message_info.message);
+			msg_body = '<span class="text">'+message_info.nickname+' a modifi&eacute; la proc&eacute;dure <a href="'+url+'" target="_blank">'+message_info.description+'</a></span>';
+			break;
+		case 'M':
+			msg_body = '<span class="text action">'+message_info.nickname+' '+message_info.message+'</span>';
+			break;
+		case 'P':
+			slicePos = message_info.message.indexOf(' ');
+			msgTargetUser = message_info.message.substr(1, slicePos - 1);
+			var msg = message_info.message.slice(slicePos + 1);
+			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console"> <span class="highlight">&#64;'+msgTargetUser+'</span>&gt;</span><span class="text">'+msg+'</span>';
+			break;
+		case 'N':
+			msg_body = '<span class="text">'+message_info.message+' ('+message_info.name+')</span>';
+			updateUsersList = true;
+			break;
+		case 'C':
+			updateUsersList = true;
+			msg_body = '<span class="text action">'+message_info.nickname+' '+message_info.message+'</span>';
+			break;
+		case 'I':
+			var msg = '<a href="'+message_info.message[3]+'" target="_blank"><img src="'+message_info.message[0]+'" width="'+message_info.message[1]+'" height="'+message_info.message[2]+'" class="proxy"></a>';
+			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+msg+'</span>';
+			break;
+		case '9':
+			var msg = '<a href="'+message_info.message.url+'" target="_blank" title="'+message_info.message.title+'"><img src="'+message_info.message.url_img+'" width="'+message_info.message.width+'" height="'+message_info.message.height+'" class="proxy" /></a>';
+			msg_body = '<a class="user clickable" title="Ecrire un PM &agrave; '+message_info.nickname+'">'+message_info.nickname+'</a><span class="console">&gt;</span><span class="text">'+msg+'</span>';
+			break;
+		case 'R':
+			if(!bReset)
+			{
+				msg_body = '<span class="text action">'+message_info.message+'</span>';
+				setTimeout('databap.goTo(databap.vars.current_page);', databap.consts.reboot_delay*1000);
+			}
+			break;
+		case 'V':
+			if(!bReset) joinChan(sChanKeyName, false, [], false);
+			break;
+		case 'B':
+			msg_body = '<span class="text action">Nouvel article sur le blog BI de SAP : <a href="'+message_info.message.link_art+'" target="_blank">'+message_info.message.title+'</a> ';
+			msg_body+= 'par <a title="Lien vers la page de l\'auteur" href="'+message_info.message.link_auth+'" target="_blank">'+message_info.message.name+'</a> ('+message_info.message.date+')'+'</span>';
+			break;
+		case 'S':
+			updateUsersList = true;
+			msg_body = '<span class="text action">'+message_info.nickname+' '+message_info.message+'</span>';
+			break;
+	}
+	
+	if(msg_body != '')
+	{
+		$Message = $('<p class="'+message_info.msg_class+' class_'+sChanKeyName+' hide round_right"></p>').append('<span class="time">'+message_info.time+'</span>', msg_body);
+		$Message.find('.chan_link').click(function(){joinChan($(this).find('.chan_text').text());});
+		$Message.find('.user').click(setPm);
+		databap.getMainElem('#chat_messages').append($Message);
+	}
+}
+
+function refresh_users()
+{
+	if(typeof oUserTimer != "undefined") clearTimeout(oUserTimer);
+	if(databap.vars.current_page == databap.pages.chat)
+	{
+		var delay = databap.consts.keep_alive / 10; //seconds
+		databap.getInfo
+		(
+			'connected_users',
+			function(result)
+			{
+				//empty current users list
+				databap.getMainElem('#connected_users').empty();
+				users_list = [];
+				
+				$.each
+				(
+					result,
+					function(sChankeyName, chan_info)
+					{
+						$.each
+						(
+							chan_info,
+							function(id_user, user_info)
+							{
+								var sNickName = user_info.nickname.replace('"', '\'');
+								users_list.push(sNickName);
+								var afk = (user_info.afk=='1')?'<img src="'+databap.consts.app_image_folder+'afk.png" class="afk" />':'';
+								var profileLink = databap.getExternalLink('profil', user_info.id_user);
+								var user =	'<p class="class_'+sChankeyName+'">'
+											+'<a href="'+profileLink+'" title="Lien vers le profil de '+user_info.name+' ('+user_info.company+')" target="_blank"><img src="'+databap.consts.app_image_folder+user_info.logo+'" style="vertical-align:middle" />'+afk+'</a>'
+											+'<a class="connectedUser clickable '+sNickName+'" id="'+user_info.id_user+'" title="Mission actuelle : '+user_info.status+'">'+sNickName+'</a>'
+											+'</p>';
+								$user = $(user).css("visibility", "hidden");
+								$user.find('.connectedUser').click(joinPmChan);
+								databap.getMainElem('#connected_users').append($user);
+							}
+						);
+					}
+				);
+				
+				//Resize Nickname
+				var iMaxSize = 126 - 24 - 5; //boxSize - imageSize - marginLeftSize
+				$.each
+				(
+				    users_list,
+				    function(user_id, user)
+				    {
+						databap.getMainElem('.'+user).each(function()
+						{
+							$nick = $(this);    
+				        	while($nick.width() > iMaxSize)
+							{
+				            	sNickName = $nick.text();
+				            	$nick.text(sNickName.substr(0, sNickName.length - 1));
+							}
+							$nick.parent().css("visibility", "visible");
+						});
+				    }
+				);
+				
+				switchChan();
+			},
+			{},
+			'json',
+			function(textStatus)
+			{
+				delay = 10;
+			}
+		);
+
+		//re-scheddule
+		oUserTimer = setTimeout(refresh_users, delay*1000);
+	}
+}
+
+function setPm()
+{
+	var name = $(this).text();
+
+	//PM
+	var msg='';
+	var prevMsg = databap.getMainElem('#message').val();
+	if(prevMsg.substr(0, 1) == '@')
+	{
+		msg = prevMsg.substr(prevMsg.indexOf(' ')+1);
+	}
+	else
+	{
+		msg = prevMsg;
+	}
+	databap.getMainElem('#message').val('@'+name+' '+msg).focus();
+}
+
+function displayHelp()
+{
+	//Get template
+	$Help = $('#help').clone().attr('id', 'help_'+Math.floor((Math.random()*1000)));
+	
+	//Visible on all channels
+	$Help.find('p').addClass('class_'+databap.consts.all_chan_id);
+	$Help.appendTo('#chat_messages').slideDown('fast', function(){oScrollbar.tinyscrollbar_update('bottom');});
+	
+	//Close button activation
+	$Help.find('#close_help').click(function(){$(this).closest('.help').slideUp('fast', function(){oScrollbar.tinyscrollbar_update('bottom');});});
+}
+</script>

masks/code_block.html

@@ -0,0 +1,8 @@
+<div id="code_reader" class="code_reader round">
+	<div id="author_box" class="author_box round_top"><span id="description"></span> &bull; <span id="author_name"></span> (<span id="author_company"></span>) &bull; <span id="led"></span></div>
+	<div id="tab_left" class="tab_left round_bottom">
+		<form name="code_form" id="code_form">
+			<pre><ol id="code_lines" class="code_lines round_right">Chargement du code...</ol></pre>
+		</form>
+	</div>
+</div>

masks/doc.html

@@ -0,0 +1,196 @@
+<div id="doc">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Documentation</span></h1>
+	</div>
+	<div id="doc_container">
+		<div id="titles_edit" class="hide">
+			<form id="doc_form" name="doc_form">
+				<div id="title_edit" class="step_box round">
+					<p class="step_nb_box">Titre</p>
+					<input type="text" name="title" id="title" class="step_line_item round" maxlength="200" value="" />
+				</div>
+				<div id="desc_edit" class="step_box round">
+					<p class="step_nb_box">Description</p>
+					<input type="text" name="description" id="description" class="step_line_item round" maxlength="500" value="" />
+				</div>
+				<div id="attach_file"></div>
+				<div id="doc_menu"><span id="submit_doc" class="button ok round">Valider</span></div>
+			</form>
+		</div>
+		<div id="titles_read" class="step_box round hide">
+			<p class="read_title"><span id="titles_read_title"></span></p>
+			<p class="read_details">Cr&eacute;&eacute; par <span id="titles_read_user"></span> (<span id="titles_read_company"></span>) le <span id="titles_read_led"></span></p>
+			<p class="read_description"><span id="titles_read_description"></span></p>
+		</div>
+		<div id="docs_read" class="step_box round hide">
+			<p class="step_nb_box">Documents</p>
+			<p id="doc_links"></p>
+		</div>
+	</div>
+</div>
+<div id="image_model" class="hide">
+	<span id="image_action">
+		<input type="text" id="image_desc" name="image_desc" class="image_description round" />
+		<input type="hidden" name="image_name" id="image_name" value="" />
+		<input type="button" id="delete_image" class="button delete round" />
+	</span>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//image
+	databap.vars.imageHtml = databap.getMainElem('#image_model').html();
+	
+	//On Resize Event
+	databap.onResize = function()
+	{
+		//TODO : to be replaced by tinyscrollbar
+		databap.$main.css('overflow', 'auto');
+	
+		var maxWidth = databap.getMainElem('#desc_edit').find('p.step_nb_box').width();
+		databap.getMainElem('#description').width(maxWidth-10);
+	};
+	
+	//load Uploader
+	oUploader = new qq.FileUploader
+	(
+		{
+			element: document.getElementById('attach_file'),
+			action: databap.getActionLink('upload_file'),
+			allowedExtensions: databap.consts.authorized_file_exts,
+			sizeLimit: parseInt(databap.consts.max_size)*100,
+			debug:true,
+			stepId:1
+        }
+	);
+
+	if(databap.vars.doc_id>0)
+	{
+		loadDoc
+		(
+			databap.vars.doc_id,
+			function()
+			{
+				databap.setInitEnd(true);
+			}
+		);
+	}
+	else
+	{
+		setDisplay('edit');
+		
+		//Init's end
+		databap.setInitEnd(true);
+	}
+
+	//submit
+	databap.getMainElem('#submit_doc').click(saveDoc);
+};
+
+function loadDoc(iDocId, fOnSuccess)
+{
+	databap.getInfo
+	(
+		'get_doc',
+		function(doc_info)
+		{
+			debug(doc_info);
+			databap.getMainElem('#titles_read_title').html(doc_info.title);
+			databap.getMainElem('#titles_read_user').html(doc_info.name);
+			databap.getMainElem('#titles_read_company').html(doc_info.company);
+			databap.getMainElem('#titles_read_led').html(doc_info.led);
+			databap.getMainElem('#titles_read_description').html(doc_info.description);
+
+			//links
+			for(i in doc_info.files)
+			{
+				var $Link = $('<a href="#" title="T&eacute;l&eacute;charger cette documentation"></a><br />');
+				var sLink = databap.getActionLink('dl_file&id='+i);debug(sLink);
+				$Link.attr('href', sLink);
+				$Link.html(doc_info.files[i].description);
+				databap.getMainElem('#doc_links').append($Link);
+			}
+			setDisplay('read');
+			fOnSuccess();
+		},
+		{id:iDocId},
+		'json'
+	);
+	
+}
+
+function saveDoc()
+{
+	if(databap.getMainElem('#title').val()!='' && databap.getMainElem('#description').val()!='')
+	{
+		databap.saveForm
+		(
+			'add_doc', 
+			databap.getMainElem('#doc_form'), 
+			function(data)
+			{
+				if(data.result == 'success') loadDoc(data.doc_id);
+			}, 
+			true, 
+			'json'
+		);
+	}
+	else
+	{
+		databap.addErrorBefore('Tous les champs en sont pas remplis', '#doc_menu');
+	}
+}
+
+function setDisplay(sNewMode)
+{	
+	//Hide / show boxes
+	var $EditBoxes = databap.getMainElem('#titles_edit');
+	var $ReadBoxes = databap.getMainElem('#titles_read, #docs_read');
+	
+	switch(sNewMode)
+	{
+		case 'read':
+			$EditBoxes.hide();
+			$ReadBoxes.show();
+			break;
+		case 'edit':
+			$EditBoxes.show();
+			$ReadBoxes.hide();
+			break;
+	}
+}
+
+function addImage(stepId, imageId, imageName, imageDesc)
+{
+	//get image number
+	$ImageBox = databap.getMainElem('#'+databap.getElemTag('uploader_item', [stepId, imageId]));
+	
+	//Create new image
+	$newImage = $(databap.vars.imageHtml);
+	
+	//Set image name
+	$newImage.find('#image_name').val(imageName);
+
+	//Set image description
+	$newImage.find('#image_desc').val(imageDesc);
+	
+	//delete button for this image
+	$newImage.find('#delete_image').click
+	(
+		function()
+		{
+			var stepIds = databap.getElemIds($(this).attr('id'));
+			removeImage(stepIds[0], stepIds[1]);
+		}
+	);
+	
+	//Add ids
+	$newImage = databap.setElemTags($newImage, [stepId, imageId]);
+	
+	//Add Image to the step
+	$newImage.appendTo($ImageBox);
+	
+	return imageId;
+}
+
+</script>

masks/error.html

@@ -0,0 +1,10 @@
+<div id="err_404">
+	<div class="h1_wrap" id="chat_title">
+		<h1 class="round"><span>Page introuvable</span></h1>
+	</div>
+	<p>Sorry Bro!</p>
+	<p><a id="back_to_main" class="button round" href="#">Revenir &agrave; la page d'accueil</a></p>
+</div>
+<script type="text/javascript">
+databap.pageInit = function(){databap.$main.find('#back_to_main').attr('href', databap.vars.serv_name);};
+</script>

masks/index.html

@@ -0,0 +1,69 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+	<meta name="author" content="Francois Lutran" />
+	<meta name="description" content="Abap database for consultants" />
+	<meta name="keywords" content="ABAP, SAP, BW, BI" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="shortcut icon" href="images/favicon_gc3.ico" />
+	<link href="index.php?a=css&v=0.94" rel="stylesheet" type="text/css" />
+	<script type="text/javascript" src="jquery/jquery.min.js?v0.94"></script>
+	<!-- <script type="text/javascript" src="jquery/resize.js"></script> -->
+	<script type="text/javascript" src="jquery/tinyscrollbar.js?v0.94"></script>
+	<script type="text/javascript" src="jquery/fileuploader.js?v0.94"></script>
+	<script type="text/javascript" src="jquery/handler.js?v0.94"></script>
+	<script type="text/javascript">
+		$(document).ready
+		(
+			function()
+			{
+				//#line_break#databap.vars = {<!-- [PART] VARS [START] -->#var_name# : '#var_value#'#coma#<!-- [PART] VARS [END] -->};
+				//#line_break#databap.pages = {<!-- [PART] PAGES [START] -->#page_name# : '#page_value#'#coma#<!-- [PART] PAGES [END] -->},
+				//#line_break#databap.consts = #constants#;
+				//#line_break#databap.init('#first_page#');
+			}
+		);
+	</script>
+	<title>Databap</title>
+</head>
+<body>
+	<!-- <div class="line_h" style="top:45px;"></div>
+	<div class="line_v" style="left:50%;"></div> -->
+	<div id="container">
+		<div id="header">
+			<table class="maximized">
+				<tr>
+					<td class="cell lefty"><a href="#index_link#" class="logo2"><img src="images/logo_43.png" /></a><!-- <a href="http://www.micropole.com" title="Groupe Micropole" target="_blank" id="micropole" class="title round"><img src="images/logo_mu_25.png" alt="Micropole" /></a> --></td>
+					<td class="cell righty"><form name="form_header" id="form_header"><input type="text" name="query" id="query" class="round_left" /><input type="button" name="search_btn_submit" id="search_btn_submit" value="&gt;" class="clickable round_right" /></form></td>
+				</tr>
+			</table>
+		</div>
+		<div id="menu" class="round">
+			<div id="menu_title"><p>m</p><p>e</p><p>n</p><p>u</p></div>
+			<div id="menu_box">
+				<h1 class="title">databap</h1>
+				<ul style="list-style: none;" id="menu_items">
+					<li id="add_ln">Ajouter du code</li>
+					<li id="procedure_ln">Ajouter une proc&eacute;dure</li>
+<!--				<li id="doc_ln">Doc</li>-->
+					<li id="list_ln">Liste compl&egrave;te</li>
+<!--				<li id="quick_code_access_ln">N&deg;<input type="text" name="quick_code_access_id" id="quick_code_access_id" class="round" value="code" /></li>-->
+					<li id="profile_ln">Profil</li>
+					<li id="chat_ln">Chat</li>
+					<li id="options_ln">Options</li>
+					<li id="rss_ln"><a href="#rss_link#" target="_blank">Flux Rss</a></li>
+					<li id="log_me_out_ln">Quitter</li>
+					<li id="close_menu_ln" class="mobile">Fermer</li>
+				</ul>
+			</div>
+			<a href="#index_link#" class="useless_button round" title="The Secret Useless Button"></a>
+		</div>
+		<div id="main" class="round"></div>
+		<div id="footer">
+			<p><a href="#index_link#">v0.94 Beta</a>. Designed and powered by <a href="mailto:francois@lutran.fr" title="Envoyer un mail">Fran&ccedil;ois Lutran</a>.
+			Databap Project under <a href="http://www.gnu.org/licenses/gpl.html" target="_blank">GPLv3</a> License.</p>
+		</div>
+	</div>
+</body>
+</html>

masks/list.html

@@ -0,0 +1,46 @@
+<div id="list">
+	<div class="h1_wrap">
+		<h1 class="round"><span>La liste</span></h1>
+	</div>
+	<div id="list_container" class="standalone"></div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//TODO : to be replaced by tinyscrollbar
+	databap.$main.css('overflow', 'auto');
+
+	databap.getInfo('list',	function(items){buildList(items);},	{},	'json');
+};
+
+function buildList(asAllItems)
+{
+	var sType ='';
+	var iItemId = 0;
+	for(sType in asAllItems)
+	{
+		for(iItemId in asAllItems[sType])
+		{
+			asItemInfo = asAllItems[sType][iItemId];
+			
+			//Filling up the item line
+			$verHtml = $(databap.consts.versionHtml);
+	 		$verHtml.find('#description').html(asItemInfo.description);
+		 	$verHtml.find('#author_name').html(asItemInfo.name);
+			$verHtml.find('#author_company').html(asItemInfo.company);
+			$verHtml.find('#led').html(asItemInfo.led);
+
+			//Link 
+			var sItemLink = databap.getExternalLink(sType, iItemId);
+			$verHtml.find('#item_link').attr('href', sItemLink).attr('title', 'Lien vers '+sItemLink);
+			$verHtml = databap.setElemTags($verHtml, iItemId, false, sType);
+
+			//Display
+			$verHtml.hide().appendTo(databap.getMainElem('#list_container')).slideDown('fast');
+		}
+	}
+	
+	//Init's end
+	databap.setInitEnd(true);
+}
+</script>

masks/logon.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
+	<meta name="author" content="Franzz" />
+	<meta name="viewport" content="width=device-width" />
+	<link rel="shortcut icon" href="images/favicon_gc3.ico" />
+	<link href="style.css" rel="stylesheet" type="text/css" />
+	<title>Databap &bull; Logon</title>
+</head>
+<body>
+	<div id="logon_logo">databap</div>
+	<div id="logon_container">
+		<form id="logon" name="logon" method="post">
+			<div id="logon_box" class="round">
+				<div class="key"></div>
+				<table>
+					<tr>
+						<td class="desc">Nom et pr&eacute;nom&nbsp;</td>
+						<td class="value"><input type="text" name="auth_name" id="auth_name" class="round" value="#name#" /></td>
+					</tr>
+					<tr>
+						<td class="desc">Soci&eacute;t&eacute;</td>
+						<td class="value"><input type="password" name="auth_company" class="round" value="#company#" /></td>
+					</tr>
+					<tr><td colspan="2" class="validate"><input type="submit" name="log_me_in" id="log_me_in" value="Ok" class="round" /></td></tr>
+				</table>
+			</div>
+		</form>
+	</div>
+</body>
+</html>

masks/options.html

@@ -0,0 +1,93 @@
+<div id="options">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Options</span></h1>
+	</div>
+	<div id="options_container">
+		<form id="options_form" name="options_form">
+			<div id="options_input" class="round"><p class="loading">Chargement en cours...</p></div>
+			<input type="button" value="Valider" name="options_submit" id="options_submit" class="button heavy round" />
+		</form>
+	</div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//TODO : to be replaced by tinyscrollbar
+	databap.$main.css('overflow', 'auto');
+	
+	databap.getInfo
+	(
+		'get_options',
+		function(options)
+		{
+			var selectHtml = '';
+			var optionHtml = '';
+			var nameAndId = '';
+			var selected = '';
+			
+			//remove default text
+			$('#options_input').find('.loading').hide();
+			
+			//Display options
+			$.each
+			(
+				options,
+				function(optNameId, optInfo)
+				{
+					optionHtml = '<div class="option_line"><label>'+optInfo.option_name+'</label>';
+					nameAndId = 'id="'+optNameId+'" name="'+optNameId+'"';
+					switch(optInfo.type)
+					{
+						case databap.consts.opt_type_text:
+							optionHtml += '<input type="text" '+nameAndId+' value="'+optInfo.user_value+'" class="round" />';
+							break;
+						case databap.consts.opt_type_select:
+							selectHtml = selected = '';
+							$.each
+							(
+								optInfo.select, 
+								function(selectId, selectName)
+								{
+									debug('id='+selectId+selectName);
+									//selected = (optinfo.user_value_id && selectId==optinfo.user_value_id)?' selected':'';
+									selectHtml += '<option value="'+selectId+'"'+selected+'>'+selectName+'</option>';
+								}
+							);
+							optionHtml += '<select '+nameAndId+' class="round">'+selectHtml+'</select>';
+							break;
+					}
+					$(optionHtml+'</div>').appendTo(databap.getMainElem('#options_input')).slideDown('fast');
+				}
+			);
+			
+			//Init's end
+			databap.setInitEnd(true);
+		},
+		{},
+		'json',
+		function(){},
+		true
+	);
+
+	databap.getMainElem('#options_submit').click
+	(
+		function()
+		{
+			databap.saveForm
+			(
+				'set_options',
+				databap.getMainElem('#options_form'),
+				function(result)
+				{
+					databap.addSuccessIcon();
+					databap.goTo('options');
+				},
+				'#options_submit'
+			);
+		}
+	);
+
+	var warning = '<p class="warning">Attention : Une fois la s&eacute;lection valid&eacute;e, la page se rafraichira automatiquement</p>';
+	databap.getMainElem('#options_container').append(warning);
+};
+</script>

masks/procedure.html

@@ -0,0 +1,696 @@
+<div id="procedure">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Proc&eacute;dure</span></h1>
+	</div>
+	<form id="procedure_form" name="procedure_form">
+		<input type="hidden" id="procedure_id" name="procedure_id" value="0" />
+		<div class="proc_menu" id="top_menu">
+			<span id="top_switch" class="button switch round"><span class="mode_read hide">Aper&ccedil;u</span><span class="mode_edit hide" class="hide">Modifier</span></span>
+			<a id="share" class="button share round">Partager</a>
+		</div>
+		<div id="titles_edit" class="hide">
+			<div id="procedure_title" class="step_box round">
+				<p class="step_nb_box">Titre</p>
+				<input type="text" name="title" id="title" class="step_line_item round" maxlength="200" value="" />
+			</div>
+			<div id="procedure_desc" class="step_box round">
+				<p class="step_nb_box">Description</p>
+				<input type="text" name="description" id="description" class="step_line_item round" maxlength="500" value="" />
+			</div>
+		</div>
+		<div id="titles_read" class="step_box round hide">
+			<p class="read_title"><span id="titles_read_title"></span></p>
+			<p class="read_details">Cr&eacute;&eacute; par <span id="titles_read_user"></span> (<span id="titles_read_company"></span>) le <span id="titles_read_led"></span></p>
+			<p class="read_description"><span id="titles_read_description"></span></p>
+		</div>
+		<div id="procedure_steps"></div>
+		<div class="proc_menu" id="bottom_menu">
+			<span id="add_step" class="button add round">Ajouter une &eacute;tape</span>
+			<span id="submit_procedure" class="button ok round">Valider</span>
+			<span id="bottom_switch" class="button switch round"><span class="mode_read">Aper&ccedil;u</span><span class="mode_edit" class="hide">Modifier</span></span>
+		</div>
+	</form>
+	<div id="slider" class="round hide">
+		<div id="slider_close" class="innerBorder clickable round"><img id="slider_image" src="images/processing_48.gif" /></div>
+	</div>
+</div>
+<div id="models" class="hide">
+	<div id="step_model">
+		<table id="step" class="step_box round">
+			<tr>
+				<td colspan="2" class="step_nb_box">&Eacute;tape <span id="step_nb"></span></td>
+			</tr>	
+			<tr>
+				<td class="step_margin"><textarea id="step_text" name="step_text" class="round"></textarea></td>
+				<td class="image_box_container">
+					<div id="step_images"></div>
+					<div id="step_images_thumbs"></div>
+				</td>
+			</tr>
+			<tr>
+				<td colspan="2" class="step_buttons">
+					<span id="insert_step_before" class="button add round" title="Ins&eacute;rer une &eacute;tape avant celle-ci">Ins&eacute;rer une &eacute;tape avant</span>
+					<span id="insert_step_after" class="button add round" title="Ins&eacute;rer une &eacute;tape apr&egrave;s celle-ci">Ins&eacute;rer une &eacute;tape apr&egrave;s</span>
+					<span id="delete_step" class="button delete delete_step_button round">Supprimer l'&eacute;tape</span>
+				</td>
+			</tr>
+		</table>
+	</div>
+	<div id="image_model">
+		<span id="image_action">
+			<input type="text" id="image_desc" name="image_desc" class="image_description round" />
+			<input type="hidden" name="image_name" id="image_name" value="" />
+			<input type="button" id="delete_image" class="button delete round" />
+		</span>
+	</div>
+	<div id="thumbnail_model">
+		<p class="thumbnail_box">
+			<img class="thumbnail_image round clickable" src="" title="Cliquer pour agrandir" />
+			<span class="thumbnail_desc"></span>
+		</p>
+	</div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//TODO : to be replaced by tinyscrollbar
+	databap.$main.css('overflow', 'auto');
+	
+	//Get step HTML
+	databap.vars.stepHtml = databap.getMainElem('#step_model').html();
+	databap.vars.imageHtml = databap.getMainElem('#image_model').html();
+	databap.vars.thumbnailHtml = databap.getMainElem('#thumbnail_model').html();
+
+	//Get user data
+	databap.getUserInfo
+	(
+		function(data)
+		{
+			data.led = '(aucune date)';
+			addExtraReadElements(data);
+		}
+	);
+	
+	//Add titles
+	databap.getMainElem('#procedure_title').show('fast');
+	databap.getMainElem('#procedure_desc').show('fast', resizeDescription);
+	
+	//Init steps and images
+	curStep = 0;
+	curStepImages = {};
+	uploaders = {};
+	
+	//Add new step
+	var $StepBox = databap.getMainElem('#add_step');
+	$StepBox.click(function(){addStep();});
+
+	//submit
+	databap.getMainElem('#submit_procedure').click(saveProcedure);
+
+	//Set display
+	databap.getMainElem('#bottom_switch,#top_switch').click(function(){setDisplay();});
+	databap.getMainElem('#share').click
+	(
+		function()
+		{
+			var iProcId = getProcId();
+			if(iProcId>0)
+			{
+				$(this)
+					.hide()
+					.text(databap.getProcLink(iProcId))
+					.addClass('addr')
+					.slideDown('fast')
+					.unbind('click');
+			}
+		}
+	);
+	if(databap.vars.proc_id>0)
+	{
+		loadProcedure
+		(
+			databap.vars.proc_id,
+			function()
+			{
+				//Init's end
+				databap.setInitEnd(true);
+			}
+		);
+	}
+	else
+	{
+		setDisplay('edit');
+		$StepBox.trigger('click');
+	}
+
+	//Slider
+	oSlider = new Slider();
+	databap.onResize = function()
+	{
+		oSlider.resizeImage();
+		resizeDescription();
+	};
+	databap.onKeyUp = function(e){if(e.keyCode==27)oSlider.quit();};
+};
+
+function resizeDescription()
+{
+	//width adjustement
+	var maxWidth = databap.getMainElem('#procedure_desc').find('p.step_nb_box').width();
+	databap.getMainElem('#description').width(maxWidth-10);
+}
+
+function setDisplay(sNewMode)
+{
+	//On page first load
+	var sOldMode = databap.vars.mode;
+	if(!sOldMode || sOldMode=='')
+	{
+		sOldMode = (sNewMode=='read')?'edit':'read';
+	}
+
+	//default behaviour : switch to alternative display
+	if(!sNewMode)
+	{
+		sNewMode = (sOldMode=='read')?'edit':'read';
+	}
+
+	//Set new Display
+	if(sNewMode!=sOldMode)
+	{		
+		var sDisabled;
+
+		//Set read mode data
+		if(sNewMode=='read')
+		{
+			syncReadModeData();
+		}
+		
+		//Hide / show boxes
+		var $EditBoxes = databap.getMainElem('.uploader_box, .step_buttons, #add_step, #submit_procedure, #titles_edit');
+		var $ReadBoxes = databap.getMainElem('#share, #titles_read');
+		
+		switch(sNewMode)
+		{
+			case 'read':
+				sDisabled = true;
+				$EditBoxes.hide();
+				$ReadBoxes.show();
+				break;
+			case 'edit':
+				sDisabled = false;
+				$EditBoxes.show();
+				$ReadBoxes.hide();
+				break;
+		}
+		
+		//Enable / disable inputs
+		databap.getMainElem('#procedure_form :input').attr('disabled', sDisabled);
+	
+		//Add / Remove image thumbnails
+		setThumbnails(sDisabled);
+				
+		//Change mode internally 
+		databap.vars.mode = sNewMode;
+
+		//Change switch button
+		//databap.getMainElem('#mode_'+sNewMode).hide('fast', function(){databap.getMainElem('#mode_'+sOldMode).show('fast');});
+		
+		databap.getMainElem('#bottom_switch,#top_switch').find('.mode_'+sNewMode).hide('fast', function(){$(this).parent().find('.mode_'+sOldMode).show('fast');});
+	}
+}
+
+function syncReadModeData()
+{
+	//Title & description
+	var $EditBox = databap.getMainElem('#titles_edit');
+	var $ReadBox = databap.getMainElem('#titles_read');
+	$ReadBox.find('#titles_read_title').text($EditBox.find('#title').val());
+	$ReadBox.find('#titles_read_description').text($EditBox.find('#description').val());
+	
+	//Steps
+}
+
+function setThumbnails(bShow)
+{	
+	//Each step
+	databap.getMainElem('#procedure_steps').children().each
+	(
+		function(iRank, step)
+		{
+			$step = $(step);
+			var iStepId = databap.getFirstElemId($step.attr('id'));
+			var $ThumbnailsBox = $step.find('#'+databap.getElemTag('step_images_thumbs', iStepId));
+			if(bShow)
+			{
+				$ThumbnailsBox.show('fast');
+
+				//Each image
+				$step.find('#'+databap.getElemTag('uploader_list', iStepId)).children().filter('.uploader_item_success').each
+				(
+					function(index)
+					{
+						$Image = $(this);
+						var aiIds = databap.getElemIds($Image.attr('id'));
+						var iImageId = aiIds[1];
+						var sImageDesc = $Image.find('#'+databap.getElemTag('image_desc', [iStepId, iImageId])).val();
+						var sImageName = $Image.find('#'+databap.getElemTag('image_name', [iStepId, iImageId])).val();
+
+						//Add image thumbnail
+						var $Thumbnail = $(databap.vars.thumbnailHtml);
+						var sThumbnailUrl = getImageUrl(sImageName, true);
+						if(sThumbnailUrl=='')
+						{
+							sThumbnailUrl = databap.consts.app_image_folder+'no_48.png';
+							$Thumbnail.find('.thumbnail_image').attr('title', 'Image introuvable');
+						}
+						$Thumbnail.find('.thumbnail_image').attr('src', sThumbnailUrl);
+						//$Thumbnail.find('.thumbnail_image').attr('alt', sImageName);
+						
+						//Add image description
+						$Thumbnail.find('.thumbnail_desc').text(sImageDesc);
+						$Thumbnail.hide().appendTo($ThumbnailsBox).show
+						(
+							function()
+							{
+								//add event listener : Enlarge picture
+								$Thumbnail.find('.thumbnail_image').click
+								(
+									function()
+									{
+										$this = $(this);
+										var sImageUrl = getImageUrl(basename($this.attr('src')));
+										if(sImageUrl!='')
+										{
+											oSlider.startSlider(sImageUrl);
+										}
+									}
+								);
+							}
+						);
+					}
+				);
+			}
+			else
+			{
+				$ThumbnailsBox.hide(0, function(){$(this).empty();});
+			}
+		}
+	);
+}
+
+function getImageUrl(sImageName, bThumbnail)
+{
+	var sImageUrl = (bThumbnail?databap.consts.image_folder_thumb:databap.consts.image_folder)+sImageName;
+	if(file_exists(sImageUrl))
+	{
+		return sImageUrl;
+	}
+	sImageUrl = databap.consts.image_folder_tmp+sImageName;
+	if(file_exists(sImageUrl))
+	{
+		return sImageUrl;
+	}
+	return '';
+}
+
+function Slider()
+{
+	//Variables
+	this.$Slider = databap.getMainElem('#slider');
+	this.$SliderImage = this.$Slider.find('#slider_image');
+	var self = this;
+
+	//Methods
+	this.resizeImage = function()
+	{
+		//max size
+		var maxWidth = databap.consts.maxWidth - 60; //5*2*2 border + 20*2 margin
+		var maxHeight = databap.consts.maxHeight - 60;
+		$image = self.$SliderImage.css({'width':'auto', 'height':'auto'});
+		var image_height = $image.height();
+		var image_width = $image.width();
+		//debug('max H : '+maxHeight+', max W : '+maxWidth)
+		//debug('H : '+image_height+', W : '+image_width)
+		if(image_width > maxWidth || image_height > maxHeight)
+		{
+			if(image_width > maxWidth)
+			{
+				image_height = maxWidth / image_width * image_height;
+				image_width = maxWidth;
+			}
+			if(image_height > maxHeight)
+			{
+				image_width = maxHeight / image_height * image_width;
+				image_height = maxHeight;
+			}
+			//debug('new H : '+image_height+', new W : '+image_width)
+			$image.css({'width':image_width+'px', 'height':image_height+'px'});
+		}
+		var sliderLeftPos = (databap.consts.maxWidth - self.$Slider.width())/2 - 5;
+		var sliderTopPos = (databap.consts.maxHeight - self.$Slider.height())/2 - 5;
+		self.$Slider.css({'left':sliderLeftPos, 'top':sliderTopPos});
+	};
+	
+	this.startSlider = function(sImageUrl)
+	{
+		//this.$Slider.find('#slider_image').animate({width:'auto', height:'auto'});
+		this.$Slider.show();
+		this.$SliderImage.attr('src', sImageUrl).css({'width':'auto', 'height':'auto'});
+	};
+
+	this.quit = function()
+	{
+		self.$Slider.hide();
+	};
+
+	//Bindings
+	this.$Slider.find('#slider_close').click(this.quit);
+	this.$SliderImage.resize(this.resizeImage);
+	//this.$SliderImage.load(function(){debug('load');});
+}
+
+function addImage(stepId, imageId, imageName, imageDesc)
+{
+	//get image number
+	$ImageBox = databap.getMainElem('#'+databap.getElemTag('uploader_item', [stepId, imageId]));
+	
+	//Create new image
+	$newImage = $(databap.vars.imageHtml);
+	
+	//Set image name
+	$newImage.find('#image_name').val(imageName);
+
+	//Set image description
+	$newImage.find('#image_desc').val(imageDesc);
+	
+	//delete button for this image
+	$newImage.find('#delete_image').click
+	(
+		function()
+		{
+			var stepIds = databap.getElemIds($(this).attr('id'));
+			removeImage(stepIds[0], stepIds[1]);
+		}
+	);
+	
+	//Add ids
+	$newImage = databap.setElemTags($newImage, [stepId, imageId]);
+	
+	//Add Image to the step
+	$newImage.appendTo($ImageBox);
+	
+	return imageId;
+}
+
+function addStep(stepId, sPosition, sDesc)
+{
+	//Set Step Count
+	iCurrentStep = '0';
+
+	//Build new Step
+	$StepBox = databap.getMainElem('#procedure_steps');
+	var $step = $(databap.vars.stepHtml);
+
+	//Add Step text
+	if(sDesc)
+	{
+		$step.find('#step_text').val(sDesc);
+	}
+	
+	//Insert new step before this step
+	$step.find('#insert_step_before').click
+	(
+		function()
+		{
+			var stepId = databap.getFirstElemId($(this).attr('id'));
+			addStep(stepId, 'before');
+		}
+	);
+
+	//Insert new step after this step
+	$step.find('#insert_step_after').click
+	(
+		function()
+		{
+			var stepId = databap.getFirstElemId($(this).attr('id'));
+			addStep(stepId, 'after');
+		}
+	);
+
+	//Delete this step
+	$step.find('#delete_step').click
+	(
+		function()
+		{
+			var stepId = databap.getFirstElemId($(this).attr('id'));
+			removeStep(stepId);
+		}
+	);
+
+	//Append to page
+	$step.hide();
+	if(!stepId)
+	{
+		$step.appendTo(databap.getMainElem('#procedure_steps'));
+	}
+	else
+	{
+		var $elem = databap.getMainElem('#'+databap.getElemTag('step', stepId));
+		switch(sPosition)
+		{
+			case 'before':
+				$elem.before($step);
+				break;
+			case 'after':
+				$elem.after($step);
+				break;
+		}		
+	}
+
+	//Add unique Ids
+	recalculateStepNb();
+	
+	//Add Image Uploader
+	var iStepId = databap.getFirstElemId($step.attr('id'));
+	var sImageBoxId = databap.getElemTag('step_images', iStepId);
+	uploaders[iStepId] = new qq.FileUploader
+	(
+		{
+			element: document.getElementById(sImageBoxId),
+			action: databap.getActionLink('upload_image'),
+			allowedExtensions: databap.consts.authorized_img_exts,
+			sizeLimit: parseInt(databap.consts.max_size)*100,
+			debug: false,
+			stepId: iStepId
+        }
+	);
+	$step.show('fast', function(){databap.setInitEnd(true);});
+	
+	return iStepId;
+}
+
+function removeImage(iStepId, iImageId)
+{
+	var sImageTag = databap.getElemTag('uploader_item', [iStepId, iImageId]);
+	databap.getMainElem('#'+sImageTag).hide
+	(
+		'fast',
+		function()
+		{
+			$(this).remove();
+		}
+	);
+}
+
+function removeStep(iStepId)
+{
+	//debug('removing step '+iStepId);
+	var sStepTag = databap.getElemTag('step', [iStepId]);
+	databap.getMainElem('#'+sStepTag).slideUp
+	(
+		'fast',
+		function()
+		{
+			$this = $(this);
+			delete uploaders[databap.getFirstElemId($this.attr('id'))];
+			$this.remove();
+			recalculateStepNb();
+		}
+	);
+}
+
+//re-calculate steps displayed id
+function recalculateStepNb()
+{
+	databap.getMainElem('#procedure_steps').children().each
+	(
+		function(iRank, step)
+		{
+			$step = $(step);
+			
+			//Get current and new step id
+			var iStepId = databap.getFirstElemId($step.attr('id'));
+			var iNewStepId = iRank+1;
+			
+			//Update step id
+			databap.setElemTags($step, [iNewStepId], true);
+
+			//Update step number (displayed)
+			//debug("oldtag: "+$step.attr('id')+", oldid: "+iStepId+", newtag: "+databap.getElemTag('step_nb', [iStepId])+", newid : "+iNewStepId);
+			$step.find('#'+databap.getElemTag('step_nb', [iNewStepId])).text(iNewStepId);
+			
+			//update uploader step id
+			if(iStepId>0 && iNewStepId!=iStepId)
+			{
+				uploaders[iNewStepId] = uploaders[iStepId];
+				delete uploaders[iStepId];
+			}
+		}
+	);
+}
+
+function checkProcedure()
+{
+	bValidForm = true;
+	databap.getMainElem('#procedure_form').find('input[type=text],textarea').each
+	(
+		function(key,object)
+		{
+			if($(object).val() == '')
+			{
+				bValidForm = false;
+			}
+		}
+	);
+	return bValidForm;
+}
+
+function saveProcedure()
+{
+	if(checkProcedure())
+	{
+		//debug(databap.getMainElem('#procedure_form').find('input,textarea'));
+		databap.saveForm
+		(
+			'add_procedure',
+			databap.getMainElem('#procedure_form'),
+			function(proc_info)
+			{
+				if(proc_info.result=='success')
+				{
+					//Update procedure Id
+					majProcId(proc_info.proc_id);
+					addExtraReadElements(proc_info);
+					
+					databap.addSuccessBefore('La proc&eacute;dure est enregistr&eacute;e', '#bottom_menu');
+					databap.addSuccessIcon();
+					setDisplay('read');
+				}
+				else
+				{
+					$.each
+					(
+						proc_info.errors,
+						function(key, value)
+						{
+							databap.addErrorBefore(key+"|"+value, '#bottom_menu');
+						}
+					);
+				}
+			},
+			true,
+			'json'
+		);
+	}
+	else
+	{
+		databap.addErrorBefore('Tous les champs en sont pas remplis', '#bottom_menu');
+	}
+}
+
+function loadProcedure(iProcId, fOnSuccess)
+{
+	databap.getInfo
+	(
+		'get_procedure',
+		function(proc_info)
+		{
+			//Form Element
+			$form = databap.getMainElem('#procedure_form');
+
+			if(proc_info.proc_id > 0)
+			{
+				//maj proc number
+				majProcId(proc_info.proc_id);
+				
+				//Title
+				$form.find('#title').val(proc_info.title);
+	
+				//Description
+				$form.find('#description').val(proc_info.description);
+	
+				//Extra read mode data
+				addExtraReadElements(proc_info);
+	
+				//Steps
+				$.each
+				(
+					proc_info.steps,
+					function(iStepId, sStepDesc)
+					{
+						iDisplayedStepId = addStep(false, false, sStepDesc.description);
+						
+						//Image
+						if(iStepId in proc_info.images)
+						{
+							$.each
+							(
+								proc_info.images[iStepId],
+								function(iImageId, asImage)
+								{
+									var iImageId = uploaders[iDisplayedStepId]._handler.addToFiles({fileName:asImage.name, fileSize:1});
+									uploaders[iDisplayedStepId]._onSubmit(iImageId, asImage.name);
+									
+									var oResult = {status:200, responseText:"{success:true, file_name:\""+asImage.name+"\", fileDesc:\""+asImage.desc+"\"}"};
+									uploaders[iDisplayedStepId]._handler._onComplete(iImageId, oResult);
+								}
+							);
+						}
+					}
+				);
+			}
+			else $form.find('#title').val('Introuvable !');
+
+			//Switch to read mode
+			setDisplay('read');
+			fOnSuccess();
+		},
+		{proc_id:iProcId},
+		'json',
+		function(textStatus)
+		{
+			delay = 10;
+		}
+	);
+}
+
+function addExtraReadElements(data)
+{
+	//Add extra read-mode data
+	$ReadTitles = databap.getMainElem('#titles_read');
+	$ReadTitles.find('#titles_read_user').text(data.name);
+	$ReadTitles.find('#titles_read_company').text(data.company);
+	$ReadTitles.find('#titles_read_led').text(data.led);
+}
+
+function majProcId(iProcId)
+{
+	databap.getMainElem('#procedure_id').val(iProcId);
+}
+
+function getProcId()
+{
+	return databap.getMainElem('#procedure_id').val();
+}
+</script>

masks/profile.html

@@ -0,0 +1,58 @@
+<div id="profile">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Profil</span></h1>
+	</div>
+	<div id="avatar" class="clickable round"></div>
+	<div class="user round">
+		<p>Nom : <span id="profile_name"></span></p>
+		<p>Soci&eacute;t&eacute; : <span id="profile_company"></span></p>
+		<p>Mission actuelle : <span id="profile_assignment"></span></p>
+	</div>
+	<p class="user_history_title">Historique</p>
+	<div id="user_history" class="round hide"></div>
+</div>
+<script type="text/javascript">
+databap.pageInit = function()
+{
+	//TODO : to be replaced by tinyscrollbar
+	databap.$main.css('overflow', 'auto');
+	
+	databap.getInfo
+	(
+		'profile',
+		function(profile)
+		{
+			//user info
+			databap.getMainElem('#profile_name').text(profile.name);
+			databap.getMainElem('#profile_company').text(profile.company);
+			databap.getMainElem('#profile_assignment').text(profile.status);
+
+			//Profile link
+			databap.getMainElem('#avatar').click(function(){alert(databap.getExternalLink('p', profile.nickname));});
+			
+			//user history
+			$UserHistory = databap.getMainElem('#user_history');
+			if(typeof profile.history != 'undefined')
+			{
+				$.each
+				(
+					profile.history,
+					function(id_code, code_info)
+					{
+						var url = databap.getCodeLink(code_info.phrase);
+						var code = $('<p class="history_line">'+code_info.date+' - '+code_info.action+' : <a href="'+url+'" title="'+code_info.phrase+'" target="_blank">'+code_info.description+'</a></p>');
+						$UserHistory.append(code);
+					}
+				);
+				$UserHistory.show('fast', function(){databap.setInitEnd(true);});
+			}
+			else
+			{
+				databap.setInitEnd(true);
+			}
+		},
+		{user:databap.vars.profile_user},
+		'json'
+	);
+};
+</script>

masks/read_code.html

@@ -0,0 +1,178 @@
+<div id="reader">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Revue de code</span></h1>
+	</div>
+	<div id="code_menu">
+		<a id="edit" class="button round">Modifier</a>
+		<a id="raw" class="button round" href="#" target="_blank">Fichier brut</a>
+		<a id="save" class="button round" href="#">T&eacute;l&eacute;charger</a>
+		<a id="print" class="button round" href="#" target="_blank">Imprimer</a>
+		<a id="share" class="button share round">Partager</a>
+	</div>
+	<div id="previous_versions" class="standalone"></div>
+	<div id="code_container"></div>
+	<div id="next_versions" class="standalone"></div>
+	<div id="edit_container">
+		<div class="h1_wrap">
+			<form name="edit_code" id="edit_code">
+				<textarea id="content" name="content" class="round"></textarea>
+				<input type="hidden" id="code" name="code" value="" />
+			</form>
+			<a id="edit_btn" class="button heavy round">Corriger</a>
+		</div>
+	</div>
+</div>
+<script type="text/javascript">
+	databap.pageInit = function()
+	{
+		//TODO : to be replaced by tinyscrollbar
+		databap.$main.css('overflow', 'auto');
+		
+		databap.setCodeContainer
+		(
+			function()
+			{
+				databap.getInfo
+				(
+					'read_code',
+					function(jContent)
+					{
+						//debug(jContent);
+						//append code to main and refresh id
+						databap.appendCode('#code_reader', jContent);
+						
+						if(typeof jContent.other_versions !== 'undefined')
+						{
+							if(jContent.truncated)
+							{
+								var $Truncated = $(databap.consts.versionHtml);
+								$Truncated.data('id_code', jContent.truncated).click(function(){databap.loadReadPage($(this).data('id_code'));});
+								$Truncated.find('#item_link').text('...');
+								$('#previous_versions').append($Truncated);
+							}
+							$.each
+							(
+								jContent.other_versions,
+								function(key, code_info)
+								{
+									$verHtml = $(databap.consts.versionHtml).data('id_code', code_info.id_code).click(function(){databap.loadReadPage($(this).data('id_code'));});
+									
+							 		$verHtml.find('#description').html(code_info.description);
+								 	$verHtml.find('#author_name').html(code_info.name);
+									$verHtml.find('#author_company').html(code_info.company);
+									$verHtml.find('#led').html(code_info.led);
+									$verHtml.find('#item_link').attr('target', '').attr('title', 'Afficher cette version du code');
+									
+									$verHtml = databap.setElemTags($verHtml, code_info.id_code);
+									var anchor = '#'+((parseInt(code_info.id_code) < parseInt(databap.vars.code))?'previous':'next')+'_versions';
+							 		$(anchor).append($verHtml);
+								}
+							);
+						}
+						
+						//expanding
+						$("input").click(function(){expand($(this));});
+						$("#code_container input[id^=expand_loop]").hover
+						(
+							function()
+							{
+								$('.'+$(this).attr('id').substr(7)).toggleClass('code_hover');
+							}
+						);
+
+						//action links
+						$("#edit").click
+						(
+							function()
+							{
+								if($('#content').val()=='')
+								{
+									//make space for edit box
+									databap.getMainElem('#previous_versions,#next_versions').slideUp
+									(
+										'fast',
+										function()
+										{
+											$code_container = $('#'+databap.getElemTag('tab_left', databap.vars.code));
+											$code_container.css('overflow', 'auto').height(Math.min($code_container.height(), 200));
+										}
+									);
+									
+									databap.getInfo
+									(
+										'nude_code', 
+										function(data)
+										{
+											databap.vars.old_code = data;
+											$('#content').val(databap.vars.old_code);
+											$('#code').val(databap.vars.code);
+											$('#edit_container').show('fast');
+										}, 
+										{code:databap.vars.code}
+									);
+								}
+							}
+						);
+						
+						databap.getMainElem('a#raw').attr('href', databap.getActionLink('raw_code', {code:databap.vars.phrase}));
+						databap.getMainElem('a#save').attr('href', databap.getActionLink('dl_code', {code:databap.vars.phrase}));
+						databap.getMainElem('a#print').attr('href', databap.getActionLink('print_code', {code:databap.vars.phrase}));
+						databap.getMainElem('#share').click
+						(
+							function()
+							{
+								$(this)
+								.hide()
+								.text(databap.getCodeLink(databap.vars.phrase))
+								.addClass('addr')
+								.slideDown('fast')
+								.unbind('click');
+							}
+						);
+						
+						//edit code
+						$('#edit_btn').click
+						(
+							function()
+							{		
+								code = $('textarea#content').val();			
+								if(code !='')
+								{
+									if(code != databap.vars.old_code)
+									{
+										databap.saveForm
+										(
+											'edit_code',
+											$('#edit_code'),
+											function(iCodeId)
+											{
+												databap.vars.code = iCodeId;
+												databap.vars.old_code = '';
+												databap.switchPage(databap.pages.read_code);
+											},
+											'#edit_btn'
+										);
+									}
+									else
+									{
+										databap.addErrorBefore('Aucune modification n\'a &eacute;t&eacute; effectu&eacute;e', '#edit_btn');
+									}
+								}
+								else
+								{
+									databap.addErrorBefore('Le champ code est vide', '#edit_btn');
+								}
+							}
+						);
+
+						//Init's end
+						databap.setInitEnd(true);
+					},
+					{code:databap.vars.code},
+					'json'
+				);
+			},
+			'#code_container'
+		);
+	};
+</script>

masks/search.html

@@ -0,0 +1,22 @@
+<div id="search">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Recherche</span></h1>
+	</div>
+	<div id="code_container"></div>
+</div>
+<script type="text/javascript">
+	databap.pageInit = function()
+	{
+		//TODO : to be replaced by tinyscrollbar
+		databap.$main.css('overflow', 'auto');
+		
+		if($('#query').val()==databap.consts.search_box_text)
+		{
+			$('#query').val(databap.vars.search_words);
+		}
+		databap.loadSearchPage();
+
+		//Init's end
+		databap.setInitEnd(true);
+	};
+</script>

masks/welcome.html

@@ -0,0 +1,49 @@
+<div id="welcome">
+	<div class="h1_wrap">
+		<h1 class="round"><span>Bienvenue</span></h1>
+	</div>
+	<div id="welcome_container" class="round">
+		<p class="welcome_text">Bienvenue sur la base de donn&eacute;es Databap.</p>
+		<ul>
+			<li>Version 0.94 En cours de d&eacute;veloppement (maj du 31/05/2013)</li>
+			<li>Upcoming features :
+				<ul>
+					<li>Recherche avanc&eacute;e : expressions r&eacute;guli&egrave;res, version de document, recerche large (code, proc&eacute;dure, chat, Q&amp;A)</li>
+					<li>T&eacute;l&eacute;versement de documentation</li>
+					<li>Q&amp;A</li>
+				</ul>
+			</li>
+			<li>Changelog :
+				<ul>
+					<li>/9gag</li>
+					<li>Nouvelle aide Clippy</li>
+				</ul>
+			</li>
+			<li><a href="mailto:francois@lutran.fr" class="feedback">Me contacter</a></li>
+		</ul>
+		<p class="redirect">Cette page sera automatiquement remplac&eacute; par la page "<span id="default_page"></span>" dans 10 secondes</p>
+	</div>
+</div>
+<script type="text/javascript">
+	databap.pageInit = function()
+	{
+		//TODO : to be replaced by tinyscrollbar
+		databap.$main.css('overflow', 'auto');
+		
+		$('#default_page').text(databap.consts.default_page);
+		setTimeout
+		(
+			function()
+			{
+				if(databap.vars.current_page == databap.pages.welcome)
+				{
+					databap.switchPage(databap.consts.default_page);
+				}
+			},
+			'10000'
+		);
+
+		//Init's end
+		databap.setInitEnd(true);
+	};
+</script>