<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
	<head>
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/head.tpl"}
		<script src="{$MODULE_REL_PATH}_3parties/scriptaculous/dragdrop.js" type="text/javascript"></script>

		{*********************************************************************************************
			global scripts used by DTM
		 *********************************************************************************************}
		<script src="{$MODULE_REL_PATH}_js/application/cloneFactory.js" type="text/javascript"></script>

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

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

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

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

		{*********************************************************************************************
			include control handlers. theese must also contain the default values definitions
		 *********************************************************************************************}
		{loadjs controls1="_js/debugJS.js" controls2="_js/eventScheduler.js" controls3="_js/JSTabs.js" controls4="_js/grippie.js" controls5="_js/buttonGroup.js"}
		{loadjs controls6="_js/minibrowser.js" controls7="_js/utils_extendPrototype.js" controls8="_js/utils.js" controls9="_js/utils_textAdvancedOptions.js" controls10="_js/dontCloseWindow.js"}
		{loadjs controls11="_js/pageUtils.js"   controls12="_js/controls/control.js" controls13="_js/controls/control.utils.js" controls14="_js/controls/control.text.js"}
		{loadjs controls15="_js/controls/defaults.text.js" controls16="_js/controls/control.image.js" controls17="_js/controls/defaults.image.js" controls18="_js/controls/control.horizontalLine.js" controls19="_js/controls/defaults.horizontalLine.js"}
		{loadjs controls20="_js/controls/control.verticalLine.js" controls21="_js/controls/defaults.verticalLine.js" controls22="_js/controls/control.rectangle.js" controls23="_js/controls/defaults.rectangle.js" controls24="_js/controls/control.group.js"}
		{loadjs controls25="_js/controls/defaults.group.js" controls26="_js/controls/control.newLine.js" controls27="_js/controls/defaults.newLine.js" controls28="_js/controls/control.newPage.js" controls29="_js/controls/defaults.newPage.js"}
		{loadjs controls30="_js/controls/control.specialObject.js" controls31="_js/controls/defaults.specialObject.js" controls32="_js/controls/controls.js" controls33="_js/controls/grid.js" controls34="_js/controls/region.js" controls35="_js/listObjects.js"}
		{loadjs controls36="_js/colorPicker/color_functions.js" controls37="_js/colorPicker/js_color_picker_v2.js" controls38="_js/DTM.variableEditor.js"}

		{*********************************************************************************************
			 control helpers. Theese provide helper functions and collections for the control classes.
		**********************************************************************************************}

		{*********************************************************************************************
			custom CSS includes
		**********************************************************************************************}
		<link rel="stylesheet" type="text/css" href="_css/index.css">
		<link rel="stylesheet" type="text/css" href="_css/icons.css">
		<link rel="stylesheet" type="text/css" href="_css/attributes.css">

		{*** The DHTML color Picker ***}
		<link rel="stylesheet" type="text/css" href="_css/colorPicker/js_color_picker_v2.css">


		<script type="text/javascript">
			{************
				function called when the specialObject will deny creating more objects of the same kind.
					the special object will internally set the autoDestroy flag, so the parent will call this function and destroy() itself
			*************}
			Control.prototype.autodestroy=function (objectType,parentAttributes,childAttributes,extraParams){ldelim}
				messageBox.showInfo(
					'{$APP_NAME}',
					'Will not create '+objectType+'.Too many objects.',
					[
						['{$_LANG.ok}', '' , true]
					]
				);
			{rdelim}
		</script>
	</head>

	<body class="hasStatusBar theme-{$smarty.const.THEME}">
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/header.tpl"}
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/menu.tpl"}

		{* FILTERS *}
		<div id="pageContent">

			{showMessage}

			{*********************************************************
				this div acts as a hidden container for different types of controls
				 each control defined in here should get detached from the DOM and stored internally by the corresponding controller
				 this means the js class handling each type of object
			**********************************************************}
			<div
				style="display: none;"
				id="templates"
				>
				{include file="controls/controls.text.tpl"}
				{include file="controls/controls.image.tpl"}
				{include file="controls/controls.horizontalLine.tpl"}
				{include file="controls/controls.verticalLine.tpl"}
				{include file="controls/controls.rectangle.tpl"}
				{include file="controls/controls.group.tpl"}
				{include file="controls/controls.newLine.tpl"}
				{include file="controls/controls.newPage.tpl"}

				{if $specialObjects}
					{******************************************************
						this piece of code is usually called by the controoler class, but since special objects are generated dinamically,
							we will call this here.
						this will remove the control from the DOM and store it in CloneTemplates
					********************************************************}
					{foreach from=$specialObjects key=objectName item=object}
						{include file="controls/controls.specialObject.tpl" attributes=$object.attributes objectName=$objectName}
						{strip2}
							<script type="text/javascript">

								/*
								 	standard initalization for this class, performed on pageLoad
								*/

								Event.observe(window, 'load', function() {ldelim}
									CloneTemplates['_control_specialObject_{$objectName}']=new _cloneFactory(
											'_control_specialObject_{$objectName}_.:id:.',
											{ldelim}
												'id':	{ldelim}	type:'int',	start:'1'	{rdelim}
											{rdelim},
											{ldelim}
												bulkEval:true
											{rdelim}
										);

									CloneTemplates['_control_specialObject_{$objectName}_attributes']=new _cloneFactory(
												'_control_specialObject_{$objectName}_.:id:._attributes',
												{ldelim}
													'id':	{ldelim}	type:'int',	start:'1'	{rdelim}
												{rdelim},
												{ldelim}
													bulkEval:true
												{rdelim}
											);
								{rdelim});
							</script>
						{/strip2}
					{/foreach}
				{/if}
			</div>


			{include file="index_variablesEditor.tpl"}

			{********************************************************************************************************
				define the main form.
				all controls and inputs will get stored here.
			*********************************************************************************************************}
			<form
				id="mainForm"
				name="mainForm"
				style="padding: 0; margin: 0"
				method="post"

				{** if allowSave is not set, then deny saving the document **}
				{literal}
				onsubmit="if(Controls.getGlobal('allowSave')){disable_dontCloseWindowConfirm(); return true;}return false;"
				{/literal}
				>
				{** used inconjunction with allowSave **}
				<input type="hidden" value="0" name="save" id="save" />

				<div id="advancedTextOptions" style="position: absolute; background-color: #fff; display: none;">
					<table class="remoteLoad" cellspacing="0" cellpadding="1" width="100%">
						<tr>
							<td class="title center">
								&nbsp;
							</td>
							<td width="1%" class="title right"><span onClick="textHideAdvancedOptions();" class="closeButton"><b>X</b></span></td>
						</tr>

						<tr>
							<td colspan="2">
								{foreach from=$CFG.DTM.module.text.specialCharacters item=description key=char}
									{if $description=='---'}
										<div class="advancedTextOption">&nbsp;</div>
									{else}
										<a  href='#'
											class="advancedTextOption"
											style="display: block;"
											onclick="textClickAdvancedOption('{$char}');return false;">
											{$description}
										</a>
									{/if}
								{/foreach}
							</td>
						</tr>
					</table>
				</div>

				{**************
					main table with 3 columns , storing the tab pages, the main document container and the attribute container
				***************}
				<table class="" width="100%" border="0">
					<tr>
						<td
							style="
								white-space: nowrap;
								vertical-align: top;
								width: 1%;
								"
							id="panel_1"
							>
							{**** display the tabs ****}
							{include file="index_tabs.tpl"}
						</td>
						<td>

							{***
								the
							***}
							<div
								id="documentContainer_floatable"
								style="position: absolute; z-index: 1500;"	{***** absolute so it will not affect any other element in the page *****}
								>
								<div id="showMessageDiv_static" class="message msgInfo" style="display: none;"></div>
							</div>



							{****
								the document container. should be scrollable, and elements should be positioned inside it.
							****}
							<div
								style="
										overflow: scroll;
										border: 1px solid #f0f0f0;
										position: relative;
										"
								id="pageContainer"
								>
								{******
									the div visible when doing page-loads. This displays a text and an short repetitive animation
								*****}
								<div id="pageLoadStatus"
									style=" text-align: center;
											color: #4baaec;
											font-family:monospace;
											font-size:10px;
											display: none;
											position: absolute;"
								></div>

								{**********************************
									start document definition

									the document is built using this DOM structure:

										[pageContainer] - scrollable container, (positioned relative)
											- *[pageLoadStatus] - misc <div> only used for displaying the "loading progress"
											- [preDocumentContainer] - (positioned absolute) <div> with controlled dimensions to fit into the middle of the browser window.
												- [documentContainer] - the basic document, will contain all defined controls
													- *[documentContainer_statics] - dummy DOM node that contains all "relative" (or static) controls.
													- *[pageTemplate_.:id:.] - dummy <div> that will get cloned with each created new "page". This is the text that appears on each page.

								***********************************}
								<div
									id="preDocumentContainer1"
									style="
										width: {$pageSettings.width-$pageSettings.margins_left-$pageSettings.margins_right+26}px;
										height: {$pageSettings.height-$pageSettings.margins_top-$pageSettings.margins_bottom+5}px;
										position: absolute;
										"
									>
									<div
										id="preDocumentContainer2"
										style="
											width: {$pageSettings.width-$pageSettings.margins_left-$pageSettings.margins_right+5}px;
											height: {$pageSettings.height-$pageSettings.margins_top-$pageSettings.margins_bottom+5}px;
											position: absolute;
											"
										>
										<div
											id="documentContainer"
											onclick="containerClick();"
											style="width: {$pageSettings.width-$pageSettings.margins_left-$pageSettings.margins_right+5}px;
													height: {$pageSettings.height-$pageSettings.margins_top-$pageSettings.margins_bottom+5}px;
													position:relative;
													"
											>

											{************
												this should not contain any HTML code, or even blank spaces.
												here will be added any existing objects directly in the DOM
													* any controls contained here should be carefully removed from the DOM on pageLoad()
											*************}

											<div
												id="documentContainer_statics"
												onclick="containerClick();"
												style="position: absolute;"	{***** absolute so it will not affect any other element in the page *****}
												>
											</div>

											{***** this is a template, will get removed when calling new _cloneObject *****}
											<div
												id="pageTemplate_.:id:."
												style="
													border-bottom:1px dashed #444;
													border-right:1px dashed #444;
													width: {$pageSettings.width-$pageSettings.margins_left-$pageSettings.margins_right+5}px;
													height: {$pageSettings.height-$pageSettings.margins_top-$pageSettings.margins_bottom+5}px;
													color:#ccc;
													"
											>{$_LANG.DTM.tpl.pageNo} <b>.:pageDescription:.</b></div>
										</div>
									</div>
								</div>
								{* end document definition *}
							</div>
						</td>

						{********************************
								THE ATTRIBUTES PANEL
						*********************************}
						<td
							style="white-space: nowrap;width: 1%;"
							id="panel_3">

							<table
								cellpadding="0"
								cellspacing="0"
								style="width: 280px; height: 100%; padding: 0;"
								id="attributes_mainContainer_td"
								>
								<tr>
									<td
										class="JStabs_container"
										style="height: 95%; background-image: none;"
										>
										{****************************
											the panel containig the attribtues controls. Empty for now, but will get filled in by the js controllers
										*****************************}
										<div
											style="width:345px;overflow:auto;"
											id="attributesContainer"
											>
											&nbsp;
										</div>
									</td>
								</tr>
								<tr>
									<td
										style="height: 1%; padding: 5px;"
										class="left"
										>
										{if $OK}
											<button
												type="button"
												class="special"
												style="float: right;"
												onclick="Controls.setGlobal('allowSave',true);disable_dontCloseWindowConfirm();$('save').value='{$documentData->id}';$('mainForm').submit();"
												>{$_LANG.DTM.tpl.saveClose}</button>
											{if $CFG.DTM.module.allowFastSave}
												<button
													type="button"
													class="special"
													id="button_fastSaveDocument"
													style="float: right;"
													onclick="fastSaveDocument('{$documentData->id}',false);return false;"
													>{$_LANG.DTM.tpl.save}</button>
											{/if}
											<button
												type="button"
												style="float: right;"
												onclick="previewPage();"
												>{$_LANG.DTM.tpl.preview}</button>
										{else}
											{*** do not show the save buttons, so the user cannot save the document when errors occured ***}
											<div>
												&nbsp;
											</div>
										{/if}

										{if $CFG.DTM.module.showUsage}
											{************************
												display the usage of the page.
												actually this measures the number of calls to eventScheduler.schedule() functions
											*************************}
											{include file="index_showUsage.tpl"}
										{/if}

										{*********************************
										   ***** The page status ******
										**********************************}
										<div id="pageStatus"></div>
									</td>
								</tr>
							</table>
						</td>
					</tr>
				</table>
			</form>

			{***********************************************************
			 ****** initialize the page, setup default some values *****
			 ***********************************************************}

			<script type="text/javascript">
				Event.observe(window,'load',function(){ldelim}
					grid=new Grid({ldelim}
									pageW:{$pageSettings.width-$pageSettings.margins_left-$pageSettings.margins_right+5},
									pageH:{$pageSettings.height-$pageSettings.margins_top-$pageSettings.margins_bottom+5}
									{rdelim});
				{literal}

					detectMonitorSize();
					request_resizePanels('fast');
					Event.observe(window,'resize',function(){request_resizePanels();});
					eventScheduler.schedule('updatePageStatus',updatePageStatus, 0.5);
					eventScheduler.schedule('toggleRuler',toggleRuler.bind(true,getRuler()), 0.5);
					updateGlobalSnap($F('page_snap_'));
					updateGlobalGrid($F('page_grid_'));
					updatePageStatus();

					enable_dontCloseWindowConfirm();
				});
				{/literal}

				{strip2}
					var fontFamilies={json_encode(\App\Utils\FopManager\Installer::getInstance()->getAvailableFontIds())};
					Controls.setGlobal('fontFamilies',fontFamilies);
				{/strip2}

				{if $CFG.DTM.module.allowAutoSave}
					Event.observe(window,'load',function(){ldelim}
						autoSaveDocument(false);
					{rdelim});
				{/if}

				{***********************************************************
				 *** send the translations from $_LANG to the JS layer *****
				 ***********************************************************}
				{strip2}
					{if $_LANG.DTM.js}
					 	var _LANG={$_LANG.DTM.js|json_encode};
					{else}
						var _LANG={ldelim}{rdelim};
					{/if}

					Controls.setGlobal('_LANG',_LANG);
					Controls.setGlobal('documentID',{$documentData->id});
				{/strip2}
			</script>


			{***********************************************************
			 ************** a load-page was requested ******************
			 ***********************************************************}
			{if $loadPage && $loadPage.controls && $OK}
				{if $CFG.DTM.module.loadType=='ajax'}
					<script type="text/javascript">
						function loadPage(){ldelim}
							{literal}
							$('pageLoadStatus').update('controls');
							markBusyPage(0.5);

							var url="AJAXRequest.php?action=getCurrentControls&rnd="+Math.random();
							new Ajax.Request(url,{
								onSuccess:function(transport,JSON){
									$('pageLoadStatus').update('attributes');

									$('documentContainer').update(transport.responseText);

									Controls.setGlobal('stage1_loaded',1);

									var url="AJAXRequest.php?action=getCurrentAttribtues&rnd="+Math.random();
									new Ajax.Request(url,{
											onSuccess:function(transport,JSON){
												$('pageLoadStatus').update('scripts');
												$('attributesContainer').update(transport.responseText);
												initTooltips(null, $('attributesContainer'));

												var url="AJAXRequest.php?action=getCurrentScripts&rnd="+Math.random();
												new Ajax.Request(url,{
													onSuccess:function(transport,JSON){
														ajax_bindControls(transport.responseText);	// this may start execution in background
													}
												});
										}
									});
								}
							});
							{/literal}
						{rdelim}

						function ajax_bindControls(scriptText,retryCount){ldelim}
							$('pageLoadStatus').update('exec');

							if(retryCount>20){ldelim}
								alert('Cannot initialize page. Retried '+retryCount+' times. Giving up now');

								Controls.setGlobal('stage3_loaded',1);
								eventScheduler.schedule('x1',markBusyPage.bind(0,0,1),0.1);
								return;
							{rdelim}

							try{ldelim}
								String(scriptText).evalScripts();
							{rdelim}catch(ex){ldelim}
								if(!retryCount)
									retryCount=1;
								eventScheduler.schedule('ajax_bindControls',ajax_bindControls.bind(null,scriptText,retryCount+1) ,0.5);	// delay the execution of this code, soi that the DOM will get a chance to get synced up (Chrome gives an error here)
								$('pageLoadStatus').update('exec ('+retryCount+')');
								return;
							{rdelim}

							Controls.setGlobal('stage3_loaded',1);
							eventScheduler.schedule('x1',markBusyPage.bind(0,0,1),0.1);
							$('pageLoadStatus').update('');
						{rdelim}

						Event.observe(document,'dom:loaded',function(){ldelim}
							eventScheduler.schedule('loadPage',loadPage,0);
						{rdelim});
					</script>
				{else}
					<script type="text/javascript">
						function loadPage(){ldelim}
							{literal}
								markBusyPage(1);
							{/literal}

							{include file="js_loadPage/index.js_loadPage.tpl"}
						{rdelim}

						Event.observe(document,'dom:loaded',function(){ldelim}
							eventScheduler.schedule('loadPage',loadPage,0);
						{rdelim});
					</script>
				{/if}
			{/if}
		</div>
		{include file="{$smarty.const.APP_REAL_PATH}_templates/engine/footer.tpl"}
	</body>
</html>