// <h4 data-icon='o' class='new-contact color2'>
//
// 	<input type='hidden' data-name='uid' value='@uid'>\n+
// 	<input type='hidden' data-name='call' value='@call'>\n+
// 	<input type='hidden' data-name='sms' value='@sms'>\n+
//
// 	<input type='hidden' data-name='countcall' value='@countcall'>\n+
// 	<input type='hidden' data-name='countsms' value='@countsms'>\n+
//
// 	<input type='text' data-name='number'    placeholder='Numéro de téléphone' value='@number'    >
//
// 	<span class='select-container nobold'><select data-name='existing'>\n+
// 		<option value='.'>Utiliser pseudo</option>\n+
// 		@contacts+
// 	</select></span>\n+
//
// 	&nbsp;&nbsp;&nbsp;&nbsp;ou&nbsp;&nbsp;&nbsp;&nbsp;\n+
//
// 	<input type='text' data-name='username'  placeholder='Pseudo'              value='@username'  >
// 	<input type='submit' class='primary sub-number'                            value='Enregistrer'>
//
// </h4>\n\n);


//////////////
// USE CASE //
//////////////


////////////////
// PARAMETERS //
////////////////
// {xx}             - where 'xx' is a variable name which will be (literally) replaced by the $xx given parameter (if missing, by an empty string)
//                          note that the parameter in a higher level have to be preceeded by '$'
//                          /!\ warning: the variable name must only contain [ lowercase_letters, hyphens ]
//
// {{zz}}           - where 'zz' is an array variable name which will be (for each item) replaced by the $$zz given array (see next statement)
//                          note that the parameter in a higher level have to be preceeded by '$$'
//
// {zz.xx}          - where 'zz' is an array name + 'xx' is an index name of this array's items, it will be replaced by zz[0][xx], then zz[1][xx], etc
//                          note that this is the only case when the dot (.) is allowed in variable naming
//
// {__attributes__}  - default variable name for the attributes
// {__children__}    - default variable name for the children

/////////////////////////
// REGURAL EXPRESSIONS //
/////////////////////////
// /^yy$/     - where '^yy$' is a regular expression, matches will be added to the input parameters named like so : '$1', '$2'
//                 note that it have to match the whole string and begin with '/^' and end with '$/'


////////////////////////
// DEFAULT ATTRIBUTES //
////////////////////////
//
// @node       - is a "key" of a definition that describes an element
// @html       - overrides all to specify the html content corresponding of the element
// @children   - the set of the element's children (doesn't check if it is a container or not)
// @data       - parameters to pass to a lower level
// @attributes - attributes are replaced in a lower level
// @listeners  - contient les associations 'eventName' => 'listenerFuncName'
// $xxx        - where 'xxx' is a variable name that will be replaced in a lower level
// $$zzz       - where 'zzz' is an array variable name that will be split in a lower level

var default_definition = {
	'input':        { html: '<input {__attributes__}>'                         },
	'h/^([1-6])$/': { html: '<h{$1} {__attributes__}>{__children__}</h{$1}>'   },
	'br':           { html: '<br>'                                             },
	'option':       { html: '<option {__attributes__}>{__children__}</option>' },
	'select':       { html: '<select {__attributes__}>{__children__}</select>' },
	'span':         { html: '<span {__attributes__}>{__children__}</span>'     }
};

var custom_definition = {
	'input:/^([a-z]+)$/': {
		node: 'input',
		attributes: {
			'type':        '{$1}',
			'data-name':   '{name}',
			'value':       '{value}',
			'placeholder': '{placeholder}' },
		next_child: { node: 'br' } },


	'custom-select': {
		node: 'span',
		attributes: { 'class': 'select-container nobold' },
		children: {
			node:       'select',
			attributes: { 'data-name': '{name}' },
			children: {
					node: 'option',
					attribute: { value: '{options.value}' },
					children:  { html:  '{options.value}' } } },
		next_child: { node: 'br' } },
};

var form = {
	node: 'h4',
	attributes: { 'data-icon': 'o', 'class': 'new-contact color2' },
	children: [
		{ node: 'input:hidden',  $name: 'uid',       $value: '{uid}'          },
		{ node: 'input:hidden',  $name: 'call',      $value: '{call}'         },
		{ node: 'input:hidden',  $name: 'sms',       $value: '{sms}'          },
		{ node: 'input:hidden',  $name: 'countcall', $value: '{countcall}'    },
		{ node: 'input:hidden',  $name: 'countsms',  $value: '{countsms}'     },

		{ node: 'input:text',    $name: 'number',    $value: '{number}'       },

		{ node: 'custom-select', $name: 'number',    $$options: '{{options}}' }
	]
};

// <span class='select-container nobold'><select data-name='existing'>\n+
// 	<option value='.'>Utiliser pseudo</option>\n+
// 	@contacts+
// </select></span>\n+