Ajuste para visualizar campos read-only

Rodrigo Gonçalves
1 parent 0fc64633
Showing 19 changed files with 2822 additions and 30 deletions Show diff stats
CreateOpmUFSC.sh
FixTemplateGenerator.diff
Kernel/Config/Files/NewTicketWizard.xml
Kernel/Modules/NewTicketWizard.pm
Kernel/Modules/NewTicketWizardPublic.pm
Kernel/Modules/NewTicketWizardServiceForm.pm
Kernel/Output/HTML/Standard/CustomerFooterNTWUFSC.tt
Kernel/Output/HTML/Standard/NewTicketWizardServiceFormEdit.tt
Kernel/System/ServiceForm.pm
NewTicketWizard.sopm
NewTicketWizardUFSC.sopm
sqls.sql
var/httpd/htdocs/js/NewTicketWizard.js
var/httpd/htdocs/js/jquery.chili.js
var/httpd/htdocs/js/jquery.chili.recipes.javascript.js
var/httpd/htdocs/js/jquery.chili.recipes.js
var/httpd/htdocs/js/jquery.jsonview.js
var/httpd/htdocs/js/thirdparty/alpaca/alpaca-full.min.js
var/httpd/htdocs/skins/Agent/default/css/jquery.jsonview.css
@@ -0,0 +1,5 @@
+#!/bin/bash
+LOCAL="$PWD"
+cd /opt/otrs/bin
+./otrs.PackageManager.pl -a build -p "$LOCAL"/NewTicketWizardUFSC.sopm -o "$LOCAL"/
+cd $LOCAL
@@ -23,6 +23,7 @@
 					<JavaScript>thirdparty/alpaca/alpaca-full.min.js</JavaScript>
 					<JavaScript>thirdparty/alpaca/jquery.sumoselect.js</JavaScript>
 					<JavaScript>thirdparty/alpaca/datatables.js</JavaScript>
+					<JavaScript>thirdparty/maskedinput/jquery.maskedinput.min.js</JavaScript>
 					<JavaScript>thirdparty/jquery-validate-1.13.0/jquery.validate.js</JavaScript>
 					<CSS>alpaca/alpaca-newticketwizard.css</CSS>
 					<CSS>alpaca/sumoselect.css</CSS>
@@ -43,6 +44,13 @@
 				<Description>Admin</Description>
 				<Title>Service forms</Title>
 				<NavBarName>Admin</NavBarName>
+				<Loader>
+					<CSS>jquery.jsonview.css</CSS>
+					<JavaScript>jquery.jsonview.js</JavaScript>
+					<JavaScript>jquery.chili.js</JavaScript>
+					<JavaScript>jquery.chili.recipes.javascript.js</JavaScript>
+					<JavaScript>jquery.chili.recipes.js</JavaScript>
+				</Loader>
 				<NavBarModule>
 					<Module>Kernel::Output::HTML::NavBarModuleAdmin</Module>
 					<Name>Service forms</Name>
@@ -267,6 +275,7 @@
 					<JavaScript>thirdparty/alpaca/jquery.sumoselect.js</JavaScript>
 					<JavaScript>thirdparty/alpaca/datatables.js</JavaScript>
 					<JavaScript>thirdparty/jquery-validate-1.13.0/jquery.validate.js</JavaScript>
+					<JavaScript>thirdparty/maskedinput/jquery.maskedinput.min.js</JavaScript>
 					<CSS>alpaca/alpaca-newticketwizard.css</CSS>
 					<CSS>alpaca/sumoselect.css</CSS>
 					<CSS>alpaca/alpaca-jqueryui-newticketwizard.css</CSS>
@@ -158,6 +158,8 @@ sub Run {
 		}
 		elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {
 			return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
+		} elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormCustomProps" ) {
+			return $Self->GetFormCustomProps( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
 		}
 	}
 	else {
@@ -227,6 +229,31 @@ sub GetFormJSON {
 	);
 }
+sub GetFormCustomProps {
+	my ( $Self, %Param ) = @_;
+	my %serviceForm;
+	
+	my $ServiceFormObject = $Kernel::OM->Get("Kernel::System::ServiceForm");
+	my $LayoutObject = $Kernel::OM->Get("Kernel::Output::HTML::Layout");
+	my $ParamObject = $Kernel::OM->Get("Kernel::System::Web::Request");
+
+	my $QueueID = $ParamObject->GetParam( Param => "QueueID" );
+
+	if ( $Param{ServiceID} ) {
+		%serviceForm = $ServiceFormObject->GetServiceFormForQueue( ServiceID => $Param{ServiceID}, QueueID => $QueueID );
+		if (! $serviceForm{ServiceID}) {
+			%serviceForm = $ServiceFormObject->GetServiceForm( ServiceID => $Param{ServiceID} );	
+		}
+	}
+	
+	return $LayoutObject->Attachment(
+		ContentType => 'text/plain; charset=' . $LayoutObject->{Charset},
+		Content     => $serviceForm{CustomProps} || "/**/",
+		Type        => 'inline',
+		NoCache     => 1,
+	);
+}
+
 sub GetForm {
 	my ( $Self, %Param ) = @_;
@@ -163,7 +163,10 @@ sub Run {
 		}
 		elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {
 			return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
+		} elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormCustomProps" ) {
+			return $Self->GetFormCustomProps( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
 		}
+
 	}
 	else {
 		my ( $schema, $fields ) = $Self->GetForm();
@@ -203,6 +206,32 @@ sub Run {
 	}
 }
+sub GetFormCustomProps {
+	my ( $Self, %Param ) = @_;
+	my %serviceForm;
+	
+	my $ServiceFormObject = $Kernel::OM->Get("Kernel::System::ServiceForm");
+	my $LayoutObject = $Kernel::OM->Get("Kernel::Output::HTML::Layout");
+	my $ParamObject = $Kernel::OM->Get("Kernel::System::Web::Request");
+
+	my $QueueID = $ParamObject->GetParam( Param => "QueueID" );
+
+	if ( $Param{ServiceID} ) {
+		%serviceForm = $ServiceFormObject->GetServiceFormForQueue( ServiceID => $Param{ServiceID}, QueueID => $QueueID );
+		if (! $serviceForm{ServiceID}) {
+			%serviceForm = $ServiceFormObject->GetServiceForm( ServiceID => $Param{ServiceID} );	
+		}
+	}
+	
+	return $LayoutObject->Attachment(
+		ContentType => 'text/plain; charset=' . $LayoutObject->{Charset},
+		Content     => $serviceForm{CustomProps} || "/**/",
+		Type        => 'inline',
+		NoCache     => 1,
+	);
+}
+
+
 sub GetFormJSON {
 	my ( $Self, %Param ) = @_;
 	my %serviceForm;
@@ -67,6 +67,7 @@ sub Run {
 			$Data{Form}         = $serviceForm{Form};
 			$Data{Schema}       = $serviceForm{Schema};
 			$Data{FixedValues}       = $serviceForm{FixedValues};
+			$Data{CustomProps}       = $serviceForm{CustomProps};
 			$Data{ServiceID}    = $ParamObject->GetParam( Param => "ServiceID" );
 			$Data{QueueID}      = $ParamObject->GetParam( Param => "QueueID" );
@@ -94,6 +95,7 @@ sub Run {
 					Introduction => $ParamObject->GetParam( Param => "Introduction" ),
 					Form         => $ParamObject->GetParam( Param => "Form" ),
 					Schema       => $ParamObject->GetParam( Param => "Schema" ),
+					CustomProps  => $ParamObject->GetParam( Param => "CustomProps" ),
 					FixedValues       => $ParamObject->GetParam( Param => "FixedValues" ),
 				);				
 			} else {
@@ -102,6 +104,7 @@ sub Run {
 					Introduction => $ParamObject->GetParam( Param => "Introduction" ),
 					Form         => $ParamObject->GetParam( Param => "Form" ),
 					Schema       => $ParamObject->GetParam( Param => "Schema" ),
+					CustomProps  => $ParamObject->GetParam( Param => "CustomProps" ),
 					FixedValues       => $ParamObject->GetParam( Param => "FixedValues" ),
 				);
 			}
@@ -7,7 +7,7 @@
 # did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
 # --
-<div id="footerF" align="center" style="position: absolute; bottom: 10px; width: 100%; margin-top: 18px; margin-bottom: 8px;" class="noPrint">
+<div id="footerF" align="center" style="bottom: 10px; width: 100%; margin-top: 18px; margin-bottom: 8px;" class="noPrint">
 <div style="font-size: 0px;">
 <div style="height: 2px; width: 100%; background-image: url('/otrs-web/skins/Customer/default/images/queues-panel/separador.gif'); background-repeat: repeat-x; background-position: 0 50%;"></div>
@@ -31,15 +31,21 @@
                         </div>
                         <div class="Clear"></div>
-                        <label for="Form">[% Translate("Form") | html %]: </label>
+                        <label for="FormUI">[% Translate("Form") | html %]: </label>
                         <div class="Field">
-                            <textarea name="Form" id="Form" class="W50pc " rows="20">[% Data.Form | html %]</textarea>
+                        	
+                            <textarea name="Form" id="FormUI" style="width: 50%" class="W50pc " rows="20">[% Data.Form | html %]</textarea>
+                            <button type="button" onclick='mostraEsconde("FormUI"); return false;'>Exibir JSON</button>
+                            <div id="jsonFormUIDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;"><div id="jsonForm"></div></div>
+                            
                         </div>
                         <div class="Clear"></div>
                         <label for="Schema">[% Translate("Schema") | html %]: </label>
                         <div class="Field">
                             <textarea name="Schema" id="Schema" class="W50pc " rows="20">[% Data.Schema | html %]</textarea>
+                            <button type="button" onclick='mostraEsconde("Schema"); return false;'>Exibir JSON</button>
+                            <div id="jsonSchemaDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;"><div id="jsonSchema"></div></div>
                         </div>
                         <div class="Clear"></div>
@@ -49,6 +55,16 @@
                         </div>
                         <div class="Clear"></div>
+                        <label for="CustomProps">[% Translate("Custom Properties for basic schema. <BR/>S_xxxxx=yyyy => Schema<BR/>F_xxxxx=yyyy => Form")  %]: </label>
+                        <div class="Field">
+                            <textarea name="CustomProps" id="CustomProps" class="W50pc " rows="20">[% Data.CustomProps | html %]</textarea>
+                            <button type="button" onclick='mostraEsconde("CustomProps"); return false;'>Exibir JSON</button>
+                            <div id="jsonCustomPropsDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;">
+                            <code class="chili-lang-javascript" id='jsCode'></code>
+                            </div>
+                        </div>
+                        <div class="Clear"></div>
+                        
                         <div class="Field SpacingTop">
                             <button class="Primary" type="submit" value="[% Translate("Submit") | html %]">[% Translate("Submit") | html %]</button>
                             [% Translate("or") | html %]
@@ -59,3 +75,51 @@
                 </form>
             </div>
+
+
+<script type="text/javascript">	
+	function mostraEsconde(id) {
+		idJSON = "#json" + id + "Dlg";
+		id = "#" + id;
+		$(idJSON).toggle();
+		$(idJSON).width($(id).width());
+	}
+
+</script>
+ 
+[% WRAPPER JSOnDocumentComplete %]
+<script type="text/javascript">	
+
+	
+	$("#jsonFormUIDlg").toggle();
+	$("#jsonSchemaDlg").toggle();
+	$("#jsonCustomPropsDlg").toggle();
+	
+	setInterval(function() {
+		var code = $("#CustomProps").val();
+		$("#jsCode").html(code);
+		$("#jsCode").chili();			
+	}, 1000);
+	
+	
+	setInterval(function() {
+		var json = "{" + $("#Schema").val() + "}";
+		try {
+			json = JSON.parse(json);
+			$("#jsonSchema").JSONView(json);
+		} catch(err) {
+			$("#jsonSchema").JSONView({error: "Invalid JSON!"});
+		}
+	}, 1000);
+	
+	setInterval(function() {
+		var json = "{" + $("#FormUI").val() + "}";
+		try {
+			json = JSON.parse(json);
+			$("#jsonForm").JSONView(json);
+		} catch(err) {
+			$("#jsonForm").JSONView({error: "Invalid JSON!"});
+		}
+	}, 1000);
+</script>    
+[% END %]            
 \ No newline at end of file
@@ -44,7 +44,7 @@ sub GetServiceForm {
 	# get service form from db
 	$DBObject->Prepare(
-		SQL   => 'SELECT service_id, introduction, form, form_schema, fixed_values FROM service_form WHERE service_id = ? and queue_id is null',
+		SQL   => 'SELECT service_id, introduction, form, form_schema, fixed_values, custom_props FROM service_form WHERE service_id = ? and queue_id is null',
 		Bind  => [ \$Param{ServiceID} ],
 		Limit => 1,
 	);
@@ -57,6 +57,7 @@ sub GetServiceForm {
 		$ServiceData{Form}         = $Row[2];
 		$ServiceData{Schema}       = $Row[3];
 		$ServiceData{FixedValues}  = $Row[4];
+		$ServiceData{CustomProps}  = $Row[5];
 	}
 	return %ServiceData;
@@ -76,7 +77,7 @@ sub GetServiceFormForQueue {
 	# get service form from db
 	$DBObject->Prepare(
-		SQL   => 'SELECT service_id, introduction, form, form_schema, fixed_values FROM service_form WHERE service_id = ? and queue_id = ? ',
+		SQL   => 'SELECT service_id, introduction, form, form_schema, fixed_values, custom_props FROM service_form WHERE service_id = ? and queue_id = ? ',
 		Bind  => [ \$Param{ServiceID}, \$Param{QueueID} ],
 		Limit => 1,
 	);
@@ -89,6 +90,7 @@ sub GetServiceFormForQueue {
 		$ServiceData{Form}         = $Row[2];
 		$ServiceData{Schema}       = $Row[3];
 		$ServiceData{FixedValues}  = $Row[4];
+		$ServiceData{CustomProps}  = $Row[5];
 	}
 	return %ServiceData;
@@ -119,14 +121,14 @@ sub SaveServiceForm {
 	my $update = ($serviceForm{ServiceID});
 	if ($update) {		
-		$DBObject->Do(SQL => 'UPDATE service_form SET introduction=?,form=?,form_schema=?,fixed_values=? where service_id=? and queue_id is null',        
+		$DBObject->Do(SQL => 'UPDATE service_form SET introduction=?,form=?,form_schema=?,fixed_values=?,custom_props=? where service_id=? and queue_id is null',        
         Bind => [
-            \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}, \$Param{ServiceID}
+            \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}, \$Param{CustomProps}, \$Param{ServiceID}
         ]);		
 	} else {
-		$DBObject->Do(SQL => 'INSERT INTO service_form(service_id,introduction,form,form_schema,fixed_values) VALUES (?,?,?,?,?)',        
+		$DBObject->Do(SQL => 'INSERT INTO service_form(service_id,introduction,form,form_schema,fixed_values,custom_props) VALUES (?,?,?,?,?,?)',        
         Bind => [
-            \$Param{ServiceID}, \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}
+            \$Param{ServiceID}, \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}, \$Param{CustomProps}
         ]);
 	}	
@@ -160,14 +162,14 @@ sub SaveServiceFormForQueue {
 	my $update = ($serviceForm{ServiceID});
 	if ($update) {		
-		$DBObject->Do(SQL => 'UPDATE service_form SET introduction=?,form=?,form_schema=?,fixed_values=? where service_id=? and queue_id=? ',        
+		$DBObject->Do(SQL => 'UPDATE service_form SET introduction=?,form=?,form_schema=?,fixed_values=?,custom_props=? where service_id=? and queue_id=? ',        
         Bind => [
-            \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}, \$Param{ServiceID}, \$Param{QueueID}
+            \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{FixedValues}, \$Param{CustomProps}, \$Param{ServiceID}, \$Param{QueueID}
         ]);		
 	} else {
-		$DBObject->Do(SQL => 'INSERT INTO service_form(service_id,introduction,form,form_schema,queue_id,fixed_values) VALUES (?,?,?,?,?,?)',        
+		$DBObject->Do(SQL => 'INSERT INTO service_form(service_id,introduction,form,form_schema,queue_id,fixed_values,custom_props) VALUES (?,?,?,?,?,?,?)',        
         Bind => [
-            \$Param{ServiceID}, \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{QueueID}, \$Param{FixedValues}
+            \$Param{ServiceID}, \$Param{Introduction}, \$Param{Form}, \$Param{Schema}, \$Param{QueueID}, \$Param{FixedValues}, \$Param{CustomProps}
         ]);
 	}	
 <?xml version="1.0" encoding="utf-8" ?>
 <otrs_package version="1.0">
     <Name>NewTicketWizard</Name>
-    <Version>1.9.3</Version>
+    <Version>1.9.11</Version>
     <Framework>4.0.x</Framework>
     <Vendor>SeTIC</Vendor>
     <URL>http://www.setic.ufsc.br</URL>
@@ -18,7 +18,12 @@
    	<ChangeLog version="1.8.1">Layout bug fix</ChangeLog>
    	<ChangeLog version="1.8.2">Multiselect component</ChangeLog>
    	<ChangeLog version="1.9.0">Table support</ChangeLog>
-   	<ChangeLog version="1.9.3">Support for custom template</ChangeLog>
+   	<ChangeLog version="1.9.4">Support for custom template</ChangeLog>
+   	<ChangeLog version="1.9.5">Shows and validates JSON in form editing</ChangeLog>
+   	<ChangeLog version="1.9.6">Support for custom javascript in forms</ChangeLog>
+   	<ChangeLog version="1.9.7">Fix for datatables instalation</ChangeLog>
+   	<ChangeLog version="1.9.9">Fix for date fields</ChangeLog>
+   	<ChangeLog version="1.9.11">Fix for public interface custom properties</ChangeLog>
     <IntroInstall Type="post" Title="Thank you">New Ticket Wizard module installed successfully!</IntroInstall>
     <BuildDate>?</BuildDate>
     <BuildHost>?</BuildHost>
@@ -46,8 +51,15 @@
         <File Permission="644" Location="var/httpd/htdocs/js/thirdparty/alpaca/alpaca-full.min.js"></File>
         <File Permission="644" Location="var/httpd/htdocs/js/thirdparty/alpaca/jquery.sumoselect.js"></File>
-        <File Permission="644" Location="var/httpd/htdocs/js/thirdparty/handlebars/handlebars.js"></File>
+        <File Permission="644" Location="var/httpd/htdocs/js/thirdparty/alpaca/datatables.js"></File>
+        <File Permission="644" Location="var/httpd/htdocs/js/thirdparty/handlebars/handlebars.js"></File>        
+        <File Permission="644" Location="var/httpd/htdocs/js/jquery.jsonview.js"></File>
         <File Permission="644" Location="var/httpd/htdocs/js/NewTicketWizard.js"></File>
+
+        <File Permission="644" Location="var/httpd/htdocs/js/jquery.chili.js"></File>
+        <File Permission="644" Location="var/httpd/htdocs/js/jquery.chili.recipes.javascript.js"></File>
+        <File Permission="644" Location="var/httpd/htdocs/js/jquery.chili.recipes.js"></File>
+
         <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/images/alpaca-icons.png"></File>
         <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/images/date.png"></File>
@@ -61,6 +73,10 @@
         <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/alpaca-jqueryui-newticketwizard.css"></File>        
         <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/alpaca-newticketwizard.css"></File>
         <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/sumoselect.css"></File>
+        <File Permission="644" Location="var/httpd/htdocs/skins/Customer/default/css/alpaca/datatables.css"></File>
+        
+        <File Permission="644" Location="var/httpd/htdocs/skins/Agent/default/css/jquery.jsonview.css"></File>
+        
     </Filelist>
 <?xml version="1.0" encoding="utf-8" ?>
 <otrs_package version="1.0">
     <Name>NewTicketWizardUFSC</Name>
-    <Version>1.0.0</Version>
+    <Version>1.0.1</Version>
     <Framework>4.0.x</Framework>
     <Vendor>SeTIC</Vendor>
     <URL>http://www.setic.ufsc.br</URL>
     <License>GPLv2</License>
     <Description>NewTicket Wizard Module Template for UFSC</Description>
    	<ChangeLog version="1.0.0">First version</ChangeLog>
+   	<ChangeLog version="1.0.1">Fix for footer</ChangeLog>
    	<IntroInstall Type="post" Title="Thank you">New Ticket Wizard UFSC Template module installed successfully!</IntroInstall>
     <BuildDate>?</BuildDate>
     <BuildHost>?</BuildHost>
@@ -2,5 +2,7 @@ alter table service_form drop foreign key FK_service_form_service_id_id;
 alter table service_form drop primary key;
 alter table service_form add id int auto_increment not null primary key;
 alter table service_form add queue_id int;
-
 alter table service_form add fixed_values text;
+
+alter table service_form add custom_props text;
+
@@ -2,6 +2,7 @@
  * Variables
  */
 var formAlpaca;
+var activeQueue;
 /**
@@ -79,7 +80,78 @@ var postRenderCallback = function(form) {
             return false;
     	});
 	}
+	
+	carregaCustomProps(activeQueue);
+};
+
+
+var postRenderCallbackPublic = function(form) {
+	formOptions = form.options.fields;
+	formAlpaca = form;
+	
+	Object.keys(formOptions).forEach(function (key) {	
+		var value = formOptions[key];
+
+		// Extension to set control width
+		if (value["control_width"]) {
+			$("[name='" + key + "']").width(value["control_width"]);
+		}
+	});
+	
+	if (form) {
+		$("[name='service']").val($("#ServiceID").val());
+    	$("[name='submit']").css("font-size", "18px");
+		
+		form.form.registerSubmitHandler(function(e, form) {
+        	// validate the entire form (top control + all children)
+            form.validate(true);
+            
+            // draw the validation state (top control + all children)
+            form.renderValidationState(true);
+                    
+            // now display something
+            if (form.isFormValid()) {
+            	return true;
+			} else {
+				alert("Dados inválidos!");
+				return false;
+			}
+            e.stopPropagation();
+            return false;
+    	});
+	}
+	
+	carregaCustomPropsPublic(activeQueue);
 };
+
+function carregaCustomPropsPublic(queue) {
+	if (! queue) {
+		queue = "";
+	}
+	
+	var url = "/otrs/public.pl?Action=NewTicketWizardPublic;Subaction=GetFormCustomProps" + queue;
+	
+	url += ";ServiceID=" + $("#ServiceID").val();
+	
+	$.getScript(url, function(data) {		
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+    alert(textStatus);
+  });
+}
+
+function carregaCustomProps(queue) {
+	if (! queue) {
+		queue = "";
+	}	
+	var url = "/otrs/customer.pl?Action=NewTicketWizard;Subaction=GetFormCustomProps" + queue;
+	
+	url += ";ServiceID=" + $("#ServiceID").val();
+	
+	$.getScript(url, function(data) {		
+    }).fail(function(jqXHR, textStatus, errorThrown) {
+    alert(textStatus);
+  });
+}
 function carregaForm(dataForm, sendText, action, queue) {
 	var url = "/otrs/customer.pl?Action=NewTicketWizard;Subaction=GetFormJSON" + queue;
@@ -88,6 +160,7 @@ function carregaForm(dataForm, sendText, action, queue) {
 		formAlpaca.destroy();
 	} 
+	activeQueue = queue;	
 	url += ";ServiceID=" + $("#ServiceID").val();
 	$.getJSON(url, function(data) {		
@@ -109,9 +182,11 @@ function carregaForm(dataForm, sendText, action, queue) {
     	$("[name='submit']").css("font-size", "18px");
+    	
+    	
     }).fail(function(jqXHR, textStatus, errorThrown) {
-    alert(textStatus);
+    	alert("Erro ao recuperar: " + url + " => " + textStatus);
   });
 }
@@ -143,6 +218,7 @@ function carregaFormPublic(dataForm, sendText, action, queue) {
 		//$("#formTicket").find("select").val("");
 	}
+	activeQueue = queue;	
 	url += ";ServiceID=" + $("#ServiceID").val();
 	$.getJSON(url, function(data) {		
@@ -154,14 +230,14 @@ function carregaFormPublic(dataForm, sendText, action, queue) {
        		"data": dataForm,
         	"schema": buildSchema(data[0]),
         	"options": buildOptions(data[1], sendText, action),			
-        	"postRender": postRenderCallback,
+        	"postRender": postRenderCallbackPublic,
 			"view": "jqueryui-create",
 			"ui": "jquery-ui"
     	}); 
     }).fail(function(jqXHR, textStatus, errorThrown) {
-    	alert(textStatus);
+    	alert("Erro ao recuperar: " + url + " => " + textStatus);
   });
 }
@@ -0,0 +1,1810 @@
+/*!
+ * Chili - the jQuery plugin for highlighting code
+ * http://noteslog.com/chili/
+ * 
+ * Copyright 2010 Andrea Ercolino
+ * Dual licensed under the MIT and GPL licenses.
+ * http://docs.jquery.com/License
+ * 
+ * VERSION: NEXT - 20151204 1106
+ */
+
+(function( $ ) 
+{
+    
+    $.extend({
+    	chili: {
+    		options: {  
+                whiteSpace: {
+                    tabWidth:  4,    //spaces
+                    no1stLine: true  //if empty
+                },
+                automatic: {
+                    active:    true,
+                    selector:  "code",
+                    context:   document
+                },
+    	        dynamic: {
+                    active:    true,
+                    origin:    ''    //used like: recipeFolder + recipeName + '.js'
+                },
+                decoration: {
+                    lineNumbers: !true
+                },
+                selection: {
+                    active:    true,
+                    box: {
+                        style: [ 
+                            "position:absolute; z-index:3000; overflow:scroll;",
+                            "width:16em;",
+                            "height:9em;",
+                            "border:1px solid gray;",
+                            "padding:1em;",
+                            "background-color:white;"
+                        ].join(' '),
+                        top:   function(pageX, pageY, width, height)
+                        {
+                            var result = pageY - Math.round( height / 2 );
+                            return result;
+                        },
+                        left:  function(pageX, pageY, width, height)
+                        {
+                            var result = pageX /*- Math.round( width / 2 )*/;
+                            return result;
+                        }
+                    }
+                }
+        	}
+    	}
+    });
+    
+        
+	$(function() 
+    {
+	    $.chili.loadStylesheetInline('.chili-ln-off {list-style-type: none;}');
+	    $.extend($.chili, $.chili.options);
+        
+        if ($.chili.automatic.active) 
+        {
+            $($.chili.automatic.selector, $.chili.automatic.context).chili();
+        }
+    });
+	
+	    
+    $.extend($.chili, {
+        version: "next", // development started on 2010-01-06
+        
+        /**
+         * Returns the language piece of data for the given dom_element
+         * 
+         * @param {Element} dom_element
+         * 
+         * @return String
+         */
+        codeLanguage: function( dom_element ) {
+            var classes = $(dom_element).attr('class');
+            var matches = classes.match(/\bchili-lang-(\w+)/);
+            var result = matches ? matches[1] : '';
+            return result;
+        },
+        
+        /**
+         * Returns the line numbers data for the given dom_element
+         * 
+         * @param {Element} dom_element
+         * 
+         * @return Array
+         */
+        codeLineNumbers: function( dom_element ) {
+            var classes = $(dom_element).attr('class');
+            var matches = classes.match(/\bchili-ln-(\d+)-([\w][\w\-]*)|\bchili-ln-(\d+)/);
+            var result = ! matches 
+                ? null
+                : matches[3] 
+                    ? [ matches[0], matches[3], '' ] 
+                    : [ matches[0], matches[1], matches[2] ];
+            return result;
+        },
+        
+        /**
+         * Returns the codes of any character of the given text
+         * (Used for developing Chili)
+         * 
+         * @param {String} text
+         * 
+         * @return String
+         */
+        revealChars: function ( text ) 
+        {
+            var result = [];
+            for (var i=0, iTop=text.length; i<iTop; i++)
+            {
+                result.push(text[i] + ' <- ' + text.charCodeAt(i));
+            }
+            result = result.join('\n');
+            return result;
+        },
+        
+        /**
+         * Loads the given CSS code as a new style element of head
+         * 
+         * @param {string} sourceCode
+         */
+        loadStylesheetInline: function ( sourceCode ) 
+        { 
+            if ( document.createElement ) 
+            { 
+                var style_element = document.createElement( "style" ); 
+                style_element.type = "text/css"; 
+                if ( style_element.styleSheet ) 
+                {
+                    style_element.styleSheet.cssText = sourceCode; // IE
+                }  
+                else 
+                { 
+                    var t = document.createTextNode( sourceCode ); 
+                    style_element.appendChild( t ); 
+                } 
+                var head = document.getElementsByTagName( "head" )[0];
+                head.appendChild( style_element ); 
+            } 
+        },
+        
+        queue: {},
+        
+        recipes: {},
+        
+        filters: {
+            off: function() {
+                return this.text;
+            }
+        }
+    });
+    
+    
+    /**
+     * Highlights currently selected elements accordingly to the given options
+     * 
+     * @param {Object} options
+     */
+    $.fn.chili = function( options ) 
+    {
+        var globals = $.extend({}, $.chili);
+        $.chili = $.extend( true, $.chili, options || {} );
+        this.each(function() 
+        {
+            askDish( this );
+        });
+        $.chili = globals;
+        return this;
+    };
+    
+    /**
+     * Returns the recipe path from the given recipeName
+     * 
+     * @param {String} recipeName
+     * 
+     * @return String
+     */
+    function getRecipePath( recipeName ) 
+    {
+        var result = $.chili.dynamic.origin + 'jquery.chili.recipes.' + recipeName + '.js';
+        return result;
+    }
+    
+    /**
+     * Returns the recipe name from the given recipePath
+     * 
+     * @param {String} recipePath
+     * 
+     * @return String
+     */
+    function getRecipeName( recipePath )
+    {
+        var matches = recipePath.match(/\bjquery\.chili\.recipes\.([\w-]+)\.js$/i);
+        var result = matches[1];
+        return result;
+    }
+    
+    /**
+     * Detects the recipe to use for highlighting the given DOM element and 
+     * makes it happen, for static and dynamic setups
+     * 
+     * @param {Element} dom_element
+     */
+    function askDish( dom_element ) 
+    {
+        var recipeName = $.chili.codeLanguage( dom_element );
+        if ( '' == recipeName )
+            return;
+        var path = getRecipePath( recipeName );
+        if ( $.chili.dynamic.active && ! $.chili.recipes[ recipeName ] ) 
+        {
+            // dynamic setups come here
+            if ( ! $.chili.queue[ path ] ) 
+            {
+                downloadRecipe(path, makeDish, [path]);
+            }
+            $.chili.queue[ path ].push( dom_element );
+        }
+        else 
+        {
+            // static setups come here
+            $(dom_element).trigger( 'chili.before_coloring', [recipeName] );
+            makeDish.apply( dom_element, [path] );
+            $(dom_element).trigger( 'chili.after_coloring', [recipeName] );
+        }
+    }
+    
+    /**
+     * Highlights the current DOM element using the recipe identified by the
+     * given recipePath
+     */
+    function makeDish( recipePath ) 
+    {
+        var recipeName = getRecipeName(recipePath);
+        var recipe = $.chili.recipes[ recipeName ];
+        if (! recipe) 
+            return;
+        var ingredients = $( this ).text();
+        if (! ingredients) 
+            return;
+        ingredients = fixWhiteSpaceAfterReading(ingredients);
+        replaceElement.apply({
+            selector: this, 
+            subject:  ingredients, 
+            module:   recipeName, 
+            context:  {}
+        });
+        fixTextSelection(this);
+        checkLineNumbers(this);
+    }
+    
+    /**
+     * Replaces source code in the given DOM element with its highlighted 
+     * version
+     */
+    function replaceElement()
+    {
+        filtersPrepare(this);
+        var replacement = applyModule( this.subject, this.module, this.context );
+        replacement = filtersProcess(this, replacement);
+        
+        replacement = fixWhiteSpaceBeforeWriting( replacement );
+        
+        var dom_element = $( this.selector )[0];
+        dom_element.innerHTML = replacement;
+    }
+    
+        
+    /**
+     * Returns the requested action according to the empty configuration of 
+     * the given values
+     * 
+     * @param {String} recipeName
+     * @param {String} blockName
+     * @param {String} stepName
+     * 
+     * @return String
+     */
+    function requestedAction( recipeName, blockName, stepName ) 
+    {
+        if ( '' != stepName )   return 'applyStep';
+        if ( '' != blockName )  return 'applyBlock';
+        if ( '' != recipeName ) return 'applyRecipe';
+        return '';
+    }
+    
+    /**
+     * Returns the interpretation of the given module into the given context
+     * 
+     * @param {String} module
+     * @param {Object} context
+     * 
+     * @return Object
+     */
+    function detectAction( module, context )
+    {
+        if (! module)   return;
+        var re = new RegExp('^(?!(?:/$|.+/$|.+//$|.+//.))([^/]*)(?:/([^/]*)(?:/([^/]+))?)?$');
+        var matches = (module || '').match(re);
+        if (! matches)  return; // Expected recipe[/block[/step]] module format
+        var recipeName = matches[1] || '';
+        var blockName  = matches[2] || '';
+        var stepName   = matches[3] || '';
+        var action = requestedAction( recipeName, blockName, stepName );
+        var recipe = getRecipe( recipeName, context );
+        var result = {
+              action:     action
+            , recipeName: recipeName 
+            , blockName:  blockName
+            , stepName:   stepName
+            , recipe:     recipe
+            , module:     module
+            , context:    context
+        };
+        return result;
+    }
+    
+    /**
+     * Returns the cached recipe with the given recipeName if recipeName is 
+     * not empty, else the recipe from context
+     * 
+     * @param {String} recipeName
+     * @param {Object} context
+     * 
+     * @return Object
+     */
+    function getRecipe( recipeName, context ) 
+    {
+        var recipe = null;
+        if ( '' == recipeName )
+        {
+            recipe = context.recipe;
+        }
+        else 
+        {
+            recipe = $.chili.recipes[ recipeName ];
+        }
+        return recipe;
+    }
+    
+    /**
+     * Downloads a recipe by means of an ajax call and, on success, applies 
+     * the cbFunction callback, passing it all cbData array elements as 
+     * arguments, to any element waiting for being highlighted on the queue 
+     * of the recipe identified by path
+     *
+     * @param {String} path
+     * @param {Function} cbFunction
+     * @param {Array} cbData
+     */
+    function downloadRecipe( path, cbFunction, cbData )
+    {
+        $.chili.queue[ path ] = [];
+        $.getScript( path, function( recipeLoaded ) 
+        {
+            var recipeName = getRecipeName( path );
+            var q = $.chili.queue[ path ];
+            for( var i = 0, iTop = q.length; i < iTop; i++ )
+            {
+                var el = q[ i ];
+                if ('undefined' != typeof el.selector) 
+                {
+                    el = $(el.selector)[0];
+                }
+                $(el).trigger( 'chili.before_coloring', [recipeName] );
+                cbFunction.apply(q[ i ], cbData);
+                $(el).trigger( 'chili.after_coloring', [recipeName] );
+            }
+        } );
+    }
+    
+    /**
+     * Returns the result of applying the given detected recipe to the given
+     * subject
+     * 
+     * @param {String} subject
+     * @param {Object} detected
+     * 
+     * @return String
+     */
+    function applyRecipe( subject, detected )
+    {
+        var recipe = detected.recipe;
+        result = cook(subject, recipe);
+        return result;
+    }
+    
+    /**
+     * Returns the result of applying the given detected block to the given
+     * subject
+     * 
+     * @param {String} subject
+     * @param {Object} detected
+     * 
+     * @return String
+     */
+    function applyBlock( subject, detected )
+    {
+        var blockName = detected.blockName;
+        var recipe    = detected.recipe;
+        if (! (blockName in recipe)) 
+        {
+            result = escapeHtmlSpecialChars(subject);
+        }
+        else
+        {
+            result = cook(subject, recipe, blockName);
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the result of applying the given detected step to the given
+     * subject
+     * 
+     * @param {String} subject
+     * @param {Object} detected
+     * 
+     * @return String
+     */
+    function applyStep( subject, detected )
+    {
+        var recipeName = detected.recipeName;
+        var blockName  = detected.blockName;
+        var stepName   = detected.stepName;
+        var recipe     = detected.recipe;
+        var context    = detected.context;
+        if ('' == blockName) 
+        {
+            blockName = context.blockName;
+        }
+        if (false
+            || ! (blockName in recipe)
+            || ! (stepName  in recipe[blockName]))
+        {
+            result = escapeHtmlSpecialChars(subject);
+        }
+        else
+        {
+            result = cook(subject, recipe, blockName, stepName);
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the result of applying the given detected action to the given
+     * subject
+     * 
+     * @param {String} subject
+     * @param {Object} detected
+     * 
+     * @return String
+     */
+    function applyAction( subject, detected )
+    {
+        var result = '';
+        var action = detected.action;
+        switch (action)
+        {
+            case 'applyRecipe':
+                result = applyRecipe(subject, detected);
+            break;
+            case 'applyBlock':
+                result = applyBlock(subject, detected);
+            break;
+            case 'applyStep':
+                result = applyStep(subject, detected);
+            break;
+            default:
+                //nothing to do
+            break;
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the result of applying the given detected action to the given
+     * subject
+     * 
+     * @param {String} subject
+     * @param {Object} detected
+     * 
+     * @return String
+     */
+    function applyDeferred( subject, detected )
+    {
+        // dynamic setups come here too
+        var path = getRecipePath(detected.recipeName);
+        if (! $.chili.queue[ path ]) 
+        {
+            downloadRecipe(path, replaceElement);
+        }
+        var cue = 'chili_' + unique();
+        $.chili.queue[ path ].push( {
+            selector: '#' + cue, 
+            subject:  subject, 
+            module:   detected.module, 
+            context:  detected.context
+        } );
+        result = '<span id="' + cue + '">' + result + '</span>';
+        return result;
+    }
+
+    /**
+     * Returns the result of applying the given module to the given subject 
+     * into the given context
+     * 
+     * @param {String} subject
+     * @param {String} module
+     * @param {Object} context
+     * 
+     * @return String
+     */
+    function applyModule( subject, module, context ) 
+    {
+        var result = '';
+        var detected = detectAction(module, context);
+        if (typeof detected == 'undefined')
+        {
+            result = escapeHtmlSpecialChars(subject);
+        }
+        else if (detected.recipe)
+        {
+            result = applyAction(subject, detected);
+        }
+        else if ( $.chili.dynamic.active ) 
+        {
+            result = applyDeferred(subject, detected);
+        }
+        else
+        {
+            result = escapeHtmlSpecialChars(subject);
+        }
+        return result;
+    }
+    
+    /**
+     * Returns a unique number. If the given text is not undefined the 
+     * return value is guaranteed to be unique inside text
+     * 
+     * @param {String} text
+     * 
+     * @return Integer
+     */
+    function unique( text ) 
+    {
+        var result = (new Date()).valueOf();
+        while( text && text.indexOf( result ) > -1 );
+        { 
+            result = (new Date()).valueOf();
+        }
+        return result;
+    }
+    
+        
+    /**
+     * Returns all the steps of the given blockName of the given recipe
+     * 
+     * @param {String} recipe
+     * @param {String} blockName
+     * 
+     * @return Array
+     */
+    function prepareBlock( recipe, blockName ) 
+    {
+        var steps = [];
+        var block = recipe[ blockName ];
+        for( var stepName in block ) 
+        {
+            var prepared = prepareStep( recipe, blockName, stepName );
+            steps.push( prepared );
+        }
+        return steps;
+    }
+    
+    /**
+     * Returns the number of sub matches in the given regular expression (as
+     * a string)
+     * 
+     * @param {String} re
+     * 
+     * @return integer
+     */
+    function numberOfSubmatches( re )
+    {
+        var submatches = re
+            .replace( /\\./g, "%" )     // disable any escaped character
+            .replace( /\[.*?\]/g, "%" ) // disable any character class
+            .match( /\((?!\?)/g )       // match any open parenthesis, not followed by a ?
+        ;
+        var result = (submatches || []).length;
+        return result;
+    }
+    
+    /**
+     * Returns a step built from the given stepName of the given blockName 
+     * of the given recipe
+     * 
+     * @param {String} recipe
+     * @param {String} blockName
+     * @param {String} stepName
+     * 
+     * @return Object
+     */
+    function prepareStep( recipe, blockName, stepName ) 
+    {
+        var step = recipe[ blockName ][ stepName ];
+        var exp = ( typeof step._match == "string" ) 
+            ? step._match 
+            : step._match.source;
+        var replacement = step._replace 
+            ? step._replace 
+            : '<span class="$0">$$</span>';
+        var result = {
+            recipe:      recipe,
+            blockName:   blockName,
+            stepName:    stepName,
+            exp:         '(' + exp + ')', // new exp will have 1 more submatch
+            length:      numberOfSubmatches( exp ) + 1,
+            replacement: replacement
+        };
+        return result;
+    }
+    
+    /**
+     * Returns the given steps, with back references in the regular 
+     * expression of each step renumbered according to the number of back 
+     * references found in any previous step
+     *
+     * @param {Array} steps
+     * 
+     * @return Array
+     */
+    function adjustBackReferences( steps )
+    {
+        var prevLength = 1;
+        var exps = [];
+        for (var i = 0, iTop = steps.length; i < iTop; i++) {
+            var exp = steps[ i ].exp;
+            exp = exp.replace( /\\\\|\\(\d+)/g, 
+                function( m, aNum ) 
+                {
+                    return !aNum ? m : "\\" + ( prevLength + 1 + parseInt( aNum, 10 ) );
+                } 
+            );
+            exps.push( exp );
+            prevLength += steps[ i ].length;
+        }
+        return exps;
+    }
+    
+    /**
+     * Returns a regular expression built from all the given steps
+     * 
+     * @param {Array} steps
+     * 
+     * @return RegExp
+     */
+    function knowHow( steps, flags ) 
+    {
+        var prolog = '((?:\\s|\\S)*?)';
+        var epilog = '((?:\\s|\\S)+)';
+        var exps = adjustBackReferences( steps );
+        var source = '(?:' + exps.join( '|' ) + ')';
+        source = prolog + source + '|' + epilog;
+        return new RegExp( source, flags );
+    }
+    
+    /**
+     * Returns the given replacement, after adding the given prefix to all 
+     * classes of all SPANs
+     * 
+     * @param {String} prefix
+     * @param {String} replacement
+     * 
+     * @return String
+     */
+    function addPrefix( prefix, replacement ) 
+    {
+        var lookFor = /(<span\s+class\s*=\s*(["']))((?:(?!__)\w)+\2\s*>)/ig;
+        var replaceWith = '$1' + prefix + '__$3';
+        var aux = replacement.replace( lookFor, replaceWith );
+        return aux;
+    }
+    
+    /**
+     * Returns the step in the given steps and its matches in the given
+     * allMatches
+     * 
+     * @param {Object} steps       the steps of a recipe
+     * @param {Array}  allMatches  the corresponding matches
+     * 
+     * @return Object
+     */
+    function locateStepMatches( steps, allMatches )
+    {
+        var matchesIndex = 2;
+        for (var i = 0, iTop = steps.length; i < iTop; i++)
+        {
+            var step = steps[ i ];
+            var stepMatches = allMatches[ matchesIndex ];
+            if (stepMatches) break;
+            matchesIndex += step.length;
+        }
+        var matches  = allMatches.slice(matchesIndex, matchesIndex + step.length);
+        matches.push( allMatches.index );
+        matches.push( allMatches.input );
+        return {step: step, matches: matches};
+    }
+    
+    /**
+     * Returns the replacement for the given stepMatches, based on the
+     * function in stepMatches.step.replacement
+     * 
+     * @param {Object} stepMatches
+     * 
+     * @return String
+     */
+    function functionReplacement( stepMatches ) 
+    {
+        var that = 
+        { 
+            x: function( subject, module ) 
+            { 
+                var result = applyModule( subject, module, stepMatches.step );
+                return result;
+            }
+        };
+        var result = stepMatches.step.replacement.apply(that, stepMatches.matches);
+        return result;
+    }   
+    
+    /**
+     * Returns the replacement for the given stepMatches, based on the
+     * template in stepMatches.step.replacement
+     * 
+     * @param {Object} stepMatches
+     * 
+     * @return String
+     */
+    function templateReplacement( stepMatches )
+    {
+        var re = /(\\\$)|(?:\$\$)|(?:\$(\d+))/g;
+        var substitution = function( m, escaped, K ) 
+        {
+            var result = '';
+            if ( escaped )        /* \$ */ 
+            {
+                result = "$";
+            }
+            else if ( !K )        /* $$ */ 
+            {
+                result = escapeHtmlSpecialChars( stepMatches.matches[ 0 ] ); //stepMatches
+            }
+            else if ( K == "0" )  /* $0 */ 
+            {
+                result = stepMatches.step.stepName;
+            }
+            else                  /* $K */
+            {
+                result = escapeHtmlSpecialChars( stepMatches.matches[ K ] );
+            }
+            return result;
+        };
+        var result = stepMatches.step.replacement.replace(re, substitution);
+        return result;
+    }
+    
+    /**
+     * Returns the replacement for any match found. This is a callback 
+     * function passed to String.replace()
+     * 
+     * @return String
+     */
+    function chef( steps, replaceArgs ) 
+    {
+        var result = '';
+        var anyMatch = replaceArgs[ 0 ];
+        if (! anyMatch) return result;
+        
+        var epilog = replaceArgs[ replaceArgs.length - 1 ];
+        if (epilog) {
+            result = escapeHtmlSpecialChars( epilog );
+            return result;
+        }
+        var stepMatches = locateStepMatches( steps, replaceArgs );
+        result = $.isFunction(stepMatches.step.replacement)
+            ? functionReplacement(stepMatches)
+            : templateReplacement(stepMatches)
+        ;
+        var prolog = replaceArgs[ 1 ];
+        prolog = escapeHtmlSpecialChars( prolog );
+        result = addPrefix( stepMatches.step.recipe._name, result );
+        result = prolog + result;
+        return result;
+    }
+    
+    /**
+     * Returns the given subject, after replacing all the matches of the
+     * given steps, of the given recipe
+     *  
+     * @param {String} subject
+     * @param {Object} recipe
+     * @param {Array}  steps
+     * 
+     * @return String
+     */
+    function applySteps( subject, recipe, steps )
+    {
+        var flags = recipe._case 
+            ? "g" 
+            : "gi";
+        var expr = knowHow( steps, flags );
+        var result = [];
+        var matches;
+        while ((matches = expr.exec(subject)) != null && matches[0] != '')
+        {
+            var element = chef(steps, matches);
+            result.push(element);
+        }
+        result = result.join('');
+        return result;
+    }
+    
+    /**
+     * Returns the given ingredients, after applying the given steName of
+     * the given blockName of the given recipe to it
+     * 
+     * @param {String} ingredients
+     * @param {Object} recipe
+     * @param {String} blockName
+     * @param {String} stepName
+     * 
+     * @return String
+     */
+    function cook( ingredients, recipe, blockName, stepName ) 
+    {
+        if (stepName) 
+        {
+            var step  = prepareStep(recipe, blockName, stepName);
+            var steps = [step];
+        }
+        else
+        {
+            if (! blockName) 
+            {
+                blockName = '_main';
+                checkSpices( recipe );
+            }
+            if (! blockName in recipe)
+            {
+                return escapeHtmlSpecialChars( ingredients );
+            }
+            var steps = prepareBlock(recipe, blockName);
+        }
+        var result = applySteps(ingredients, recipe, steps);
+        return result;
+    }
+    
+        
+    /**
+     * Returns a CSS class definition with the given className and the given
+     * classStyle
+     *
+     * @param {String} className
+     * @param {String} classStyle
+     * 
+     * @return String
+     */
+    function cssClassDefinition( className, classStyle )
+    {
+        var result = ''
+            + '.' + className + '\n'
+            + '{\n' 
+            + '\t' + classStyle + '\n'
+            + '}\n'
+        ;
+        return result;
+    }
+    
+    /**
+     * Returns the style sheet of the given recipe
+     *
+     * @param {Object} recipe
+     * 
+     * @return string
+     */
+    function makeStylesheet( recipe )
+    {
+        var name = recipe._name;
+        var content = ['/* Chili -- ' + name + ' */'];
+        for (var blockName in recipe) 
+        {
+            if ( blockName.search( /^_(?!main\b)/ ) >= 0 ) 
+                continue; // if _bar but not _main nor foo
+            var block = recipe[ blockName ];
+            for (var stepName in block) 
+            {
+                var step = block[ stepName ];
+                if (! '_style' in step) 
+                    continue;
+                var style_def = step[ '_style' ];
+                if ( typeof style_def == 'string' ) 
+                {
+                    var oStyle = {};
+                    oStyle[ stepName ] = style_def;
+                    style_def = oStyle;
+                }
+                for (var className in style_def) 
+                {
+                    var stepClass = name + '__' + className;
+                    var stepStyle = style_def[ className ];
+                    var def = cssClassDefinition( stepClass, stepStyle );
+                    content.push(def);
+                }
+            }
+        }
+        var result = content.join('\n');
+        return result;
+    }
+    
+    /**
+     * If needed, generates and loads the style sheet of the given recipe 
+     * into the current page
+     * 
+     * @param {Object} recipe
+     */
+    function checkSpices( recipe ) 
+    {
+        var name = recipe._name;
+        if ( ! $.chili.queue[ name ] ) 
+        {
+            var stylesheet = makeStylesheet(recipe);
+            $.chili.loadStylesheetInline(stylesheet);
+            $.chili.queue[ name ] = true;
+        }
+    }
+    
+        
+    /**
+     * Returns the given sting padded to itself the given times
+     * 
+     * @param {String} string
+     * @param {Number} times
+     */
+    function repeat( string, times )
+    {
+        var result = '';
+        for (var i = 0; i < times; i++)
+        {
+            result += string;
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the given text, with all &, <, and > replaced by their HTML
+     * entities
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function escapeHtmlSpecialChars( text ) 
+    {
+        var result = text
+            .replace( /&/g, "&amp;" )
+            .replace( /</g, "&lt;" )
+            .replace( />/g, "&gt;" )
+        ;
+        return result;
+    }
+    
+    /**
+     * Returns the given text, with all &, <, and > replaced to their HTML
+     * entities
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function unescapeHtmlSpecialChars( text ) 
+    {
+        var result = text
+            .replace( /&amp;/g, "&" )
+            .replace( /&lt;/g,  "<" )
+            .replace( /&gt;/g,  ">" )
+        ;
+        return result;
+    }
+    
+    /**
+     * Scans the given subject and calls the given callback, passing along 
+     * the given args, for each piece of text or html tag it finds
+     * 
+     * @param {String} subject
+     * @param {Function} callback
+     * @param {Array} args
+     */
+    function scan( subject, callback, args )
+    {
+        args = args || [];
+        var expr = /([\w\W]*?)(?:(<\w+[^>]*\/>)|(<\w+[^>]*>)|(<\/\w+[^>]*>))|([\w\W]+)/ig;
+        var func = function(all, prolog, tag_empty, tag_open, tag_close, epilog) 
+        {
+            var realOffset = matches.index;
+            var token;
+            if (epilog)
+            {
+                token = tokenMake('text',  epilog, realOffset);
+                callback.apply(token, args);
+            }
+            else
+            {
+                token = tokenMake('text',  prolog, realOffset);
+                callback.apply(token, args);
+                
+                realOffset += prolog.length;
+                if (tag_empty)
+                {
+                    token = tokenMake('empty', tag_empty, realOffset);
+                }
+                else if(tag_open)
+                {
+                    token = tokenMake('open', tag_open, realOffset);
+                }
+                else if(tag_close)
+                {
+                    token = tokenMake('close', tag_close, realOffset);
+                }
+                callback.apply(token, args);
+            }
+        };
+        var matches;
+        while ((matches = expr.exec(subject)) != null && matches[0] != '')
+        {
+            func.apply({}, matches);
+        }
+    }
+    
+    /**
+     * Returns the given text, with all spaces replaced by the writingSpace 
+     * string
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function escapeSpaces( text ) 
+    {
+        var writingSpace = $.chili.whiteSpace.writingSpace;
+        var result = text.replace(/ /g, writingSpace);
+        return result;
+    }
+    
+    /**
+     * Returns the given text, with all tabs replaced by the writingTab 
+     * string
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function escapeTabs( text ) 
+    {
+        var writingTab = $.chili.whiteSpace.writingTab;
+        var result = text.replace(/\t/g, writingTab);
+        return result;
+    }
+    
+    /**
+     * Returns the given text, with all '\n' replaced by the browser new 
+     * line string
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function lineFeedsToNewLines( text ) 
+    {
+        var writingNewLine = $.chili.whiteSpace.writingNewLine;
+        var result = text.replace(/\n/g, writingNewLine);
+        return result;
+    }
+    
+    /**
+     * Returns the given text, with all the browser new line strings 
+     * replaced by '\n' 
+     * 
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function newLinesToLineFeeds( text ) 
+    {
+        var result = text;
+        result = result.replace(/&nbsp;<BR>/ig, '\n');
+        result = result.replace(/\r\n?/g, '\n');
+        return result;
+    }
+    
+    /**
+     * Sets white space constants into $.chili
+     * 
+     * @param {String} html
+     */
+    function setWhiteSpaceConstants( html )
+    {
+        $.chili.whiteSpace.writingSpace = '&#160;';
+        $.chili.whiteSpace.writingTab = repeat('&#160;', $.chili.whiteSpace.tabWidth);
+        $.chili.whiteSpace.writingNewLine = '\n';
+        if (/\r\n?/.test(html))
+        {
+            if ($.browser.msie)
+            {
+                $.chili.whiteSpace.writingNewLine = '&#160;<br>';
+            }
+            else
+            {
+                $.chili.whiteSpace.writingNewLine = /\r\n/.test(html) 
+                    ? '\r\n' 
+                    : '\r';
+            }
+        }
+    }
+    
+    /**
+     * Returns the given text after making new lines uniform across 
+     * all browsers
+     *
+     * @param {String} text
+     * 
+     * @return String
+     */
+    function fixWhiteSpaceAfterReading( html )
+    {
+        setWhiteSpaceConstants(html);
+        var result = newLinesToLineFeeds(html);
+        if ( $.chili.whiteSpace.no1stLine ) 
+        {
+            result = result.replace(/^\n/, '');
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the given text after making new lines uniform across 
+     * all browsers
+     *
+     * @param {String} html
+     * 
+     * @return String
+     */
+    function fixWhiteSpaceBeforeWriting( html )
+    {
+        var result = [];
+        scan(html, function () 
+        {
+            var value = this.value;
+            if (this.type == 'text')
+            {
+                value = escapeSpaces( value );
+                value = escapeTabs( value );
+                value = lineFeedsToNewLines( value );
+            }
+            result.push(value);
+        });
+        result = result.join('');
+        return result;
+    }
+    
+        
+    /**
+     * Wraps a given line into well formed open and close tags, based on the
+     * given open stack
+     * 
+     * @param {String} line
+     * @param {Array} open
+     * 
+     * @return Object
+     */
+    function well_form( line, open )
+    {
+        var close = [];
+        var open_start = open.join('');
+        scan(line, function()
+        {
+            if (this.type == 'open')
+            {
+                open.push(this.value);
+            }
+            else if (this.type == 'close')
+            {
+                open.pop();
+            }
+        });
+        for (var i = 0, iTop = open.length; i < iTop; i++)
+        {
+            var tag_open  = open[i];
+            var tag_close = tag_open.replace(/^<(\w+)[^>]*>$/, '</$1>');
+            close.unshift(tag_close);
+        }
+        var close_end = close.join('');
+        line = open_start + line + close_end;
+        return {
+            line:  line,
+            open:  open
+        };
+    }
+    
+    /**
+     * Converts lines inside the given dom_element to list items into an
+     * ordered list element
+     * 
+     * @param {Element} dom_element
+     * 
+     * @return String
+     */
+    function makeOrderedList( html )
+    {
+        var open  = [];
+        var expr = /(.*)\n/g;
+        var func = function ( all, line ) 
+        {
+            var well_formed = well_form(line, open);
+            open = well_formed.open;
+            line = well_formed.line 
+                ? '<li>' + well_formed.line + '</li>' 
+                : '<li> </li>'; //leave a space in empty lines
+            return line;
+        };
+        var result = html.replace(expr, func);
+        result = '<ol>' + result + '</ol>';
+        return result;
+    }
+    
+    /**
+     * Sets the start of the ol tag of the current DOM element
+     * 
+     * @param {String} groupStart
+     * @param {String} groupId
+     * @param {String} start
+     */
+    function setLineNumbersStart( all, groupStart, groupId )
+    {
+        var start = parseInt( groupStart, 10 );
+        if ( groupId ) 
+        {
+            var $pieces = $( '.' + all );
+            var pos = $pieces.index( this );
+            $pieces
+                .slice( 0, pos )
+                .each( 
+                    function() 
+                    {
+                        start += $( this ).find( 'li' ).length;
+                    } 
+                )
+            ;
+        }
+        $(this).find( 'ol' ).attr('start', start);
+        // refresh the window
+        $('body')
+            .width( $('body').width() - 1 )
+            .width( $('body').width() + 1 )
+        ;
+    }
+    
+    /**
+     * Make line numbers appear into the given dom_element
+     * 
+     * @param {Element} dom_element
+     */
+    function addLineNumbers( dom_element ) 
+    {
+        var html = $(dom_element).html();
+        html = fixWhiteSpaceAfterReading(html);
+        html = makeOrderedList( html );
+        html = fixWhiteSpaceBeforeWriting(html);
+        dom_element.innerHTML = html;
+    }
+    
+    /**
+     * If needed, adds line numbers with a proper start to the given 
+     * dom_element
+     * 
+     * @param {Element} dom_element
+     */
+    function checkLineNumbers( dom_element )
+    {
+        var ln = $.chili.codeLineNumbers(dom_element);
+        if (ln) 
+        {
+            addLineNumbers(dom_element);
+            setLineNumbersStart.apply(dom_element, ln);
+        }
+        else if ($.chili.decoration.lineNumbers) 
+        {
+            addLineNumbers(dom_element);
+        }
+    }
+    
+        
+    /**
+     * Makes filters from tags into that.subject, adds those filters to that 
+     * and cleans up that.subject
+     * 
+     * @param {Object} that
+     */
+    function filtersPrepare( that )
+    {
+        var subject = that.subject;
+        if (! /{:\w+\(/.test(subject))
+        {
+            return;
+        }
+        var format = 0;
+        var expr = /({:(\w+)\((|(?:(['"])[^\4\n]*(?:\\.[^\4\n]*)*\4)(?:\s*,\s*((['"])[^\6\n]*(?:\\.[^\6\n]*)*\6))*)\)\[)((?:.|\n)*?)(\]\2:})/g;
+        var func = function(all, tag_open, callback, args, ignore4, ignore5, ignore6, target, tag_close, offset)
+        {
+            eval('args = [' + args + '];');
+            var filter = {
+                original: target,
+                start:    offset - format, 
+                count:    target.length, 
+                callback: callback, 
+                args:     args
+            };
+            format += tag_open.length + tag_close.length;
+            if ($.isArray(that.filters))
+            {
+                that.filters.push(filter);
+            }
+            else
+            {
+                that.filters = [filter];
+            }
+            return target;
+        };
+        subject = escapeHtmlSpecialChars(subject);
+        subject = subject.replace(expr, func);
+        subject = unescapeHtmlSpecialChars(subject);
+        that.subject = subject;
+    }
+    
+    /**
+     * Makes up a token object based on the given type, value and start
+     * 
+     * @param {String} type
+     * @param {String} value
+     * @param {Integer} start
+     * 
+     * @return Object
+     */
+    function tokenMake( type, value, start )
+    {
+        var result = {
+            type:  type,
+            value: value,
+            start: start
+        };
+        return result;
+    }
+    
+    /**
+     * Splits the given html into its tags and texts
+     * 
+     * @param {String} html
+     * 
+     * @return Array
+     */
+    function tokenSplit( html )
+    {
+        var result = [];
+        var format = 0;
+        scan(html, function() 
+        {
+            switch (this.type)
+            {
+                case 'empty':
+                case 'open':
+                case 'close':
+                    format += this.value.length;
+                break;
+                case 'text':
+                    this.start -= format;
+                    this.end = this.start + this.value.length;
+                break;
+                default:
+                    throw "no type case for '" + this.type + "'";
+                break;
+            }
+            result.push(this);
+        });
+        return result;
+    }
+    
+    /**
+     * Strips empty span tags from the given html
+     * 
+     * @param {String} html
+     * 
+     * @return String
+     */
+    function stripEmpties( html )
+    {
+        var result = html.replace(/<span[^>]+><\/span>/g, '');
+        return result;
+    }
+    
+    /**
+     * Joins values of all tokens
+     * 
+     * @param {Array} tokens
+     * 
+     * @return String
+     */
+    function tokenJoin( tokens )
+    {
+        var result = [];
+        for (var i = 0, iTop = tokens.length;  i < iTop;  i++)
+        {
+            result.push(tokens[i].value);
+        }
+        result = result.join('');
+        result = stripEmpties(result);
+        return result;
+    }
+    
+    /**
+     * Finds beginning and ending tokens in the given tokens that contain the
+     * begin and end of the string that starts at the given start and whose 
+     * length is the given count
+     * 
+     * @param {Array} tokens
+     * @param {Integer} start
+     * @param {Integer} count
+     * 
+     * @return {Object}
+     */
+    function tokenFind( tokens, start, count )
+    {
+        var end = start + count;
+        var firstPos     = -1;
+        var lastPos      = -1;
+        var previousSpan = '';
+        var firstSpan    = '';
+        var lastSpan     = '';
+        for (var i = 0, iTop = tokens.length;  i < iTop;  i++)
+        {
+            var token = tokens[i];
+            if (token.type == 'open')
+            {
+                previousSpan = token.value;
+            }
+            else if (token.type == 'close')
+            {
+                previousSpan = '';
+            }
+            else
+            {
+                if (token.start <= start && start < token.end)
+                {
+                    firstPos = i;
+                    firstSpan = previousSpan;
+                }
+                if (token.start <= end && end < token.end)
+                {
+                    lastPos = i;
+                    lastSpan = previousSpan;
+                }
+                if (firstPos != -1 && lastPos != -1)
+                {
+                    break;
+                }
+            }
+        }
+        var result = {
+            first: {
+                position: firstPos, 
+                span: firstSpan
+            }, 
+            last: {
+                position: lastPos, 
+                span: lastSpan
+            }
+        };
+        return result;
+    }
+    
+    /**
+     * Returns the tokens that result from breaking in two given token at the 
+     * given position; if the given span is not empty, two additional tokens are 
+     * returned to leave the sequence well formed
+     * 
+     * @param {Object} token
+     * @param {Integer} position
+     * @param {String} span
+     * 
+     * @return {Object}
+     */
+    function tokenBreak( token, position, span )
+    {
+        var firstText = token.value.substr(0, position);
+        var firstToken = tokenMake('text', firstText, token.start);
+        firstToken.end = token.start + firstText.length;
+        
+        var secondText = token.value.substr(position);
+        var secondToken = tokenMake('text', secondText, token.start + position);
+        secondToken.end = token.start + position + secondText.length;
+        
+        var result = { 
+            first:  [firstToken], 
+            second: [secondToken] 
+        };
+        if (span)
+        {
+            result.first.push(tokenMake('close', '</span>'));
+            result.second.unshift(tokenMake('open', span));
+        }
+        return result;
+    }
+    
+    /**
+     * Creates a new html token out of the given tokens and insert it at the 
+     * right position into them. The token contains all the string that starts 
+     * at the given start and whose length is the given count. 
+     * Resulting tokens are well formed.
+     * 
+     * @param {Array} tokens
+     * @param {Integer} start
+     * @param {Integer} count
+     * 
+     * @return {Object}
+     */
+    function tokenExtract( tokens, start, count )
+    {
+        var end = start + count;
+        
+        var found = tokenFind(tokens, start, count);
+        var beforeTokens = tokens.slice(0, found.first.position);
+        var firstToken   = tokens[found.first.position];
+        var middleTokens = tokens.slice(found.first.position + 1, found.last.position);
+        var lastToken    = tokens[found.last.position];
+        var afterTokens  = tokens.slice(found.last.position + 1);
+        
+        var firstTokens = tokenBreak(firstToken, start - firstToken.start, found.first.span);
+        var lastTokens  = tokenBreak(lastToken,  end   - lastToken.start,  found.last.span);
+        
+        var newValue = [].concat(
+            firstTokens.second, 
+            middleTokens, 
+            lastTokens.first
+        );
+        newValue = tokenJoin(newValue);
+        var newToken = tokenMake('html', newValue, start);
+        
+        tokens = [].concat(
+            beforeTokens, 
+            firstTokens.first, 
+            newToken, 
+            lastTokens.second, 
+            afterTokens
+        );
+        var result = {
+            tokens:   tokens,
+            position: beforeTokens.length + firstTokens.first.length
+        };
+        return result;
+    }
+    
+    /**
+     * Applies all the filters of the given that to the given html
+     * 
+     * @param {Object} that
+     * @param {String} html
+     * 
+     * @return String
+     */
+    function filtersProcess( that, html )
+    {
+        var result = html;
+        if (! that.filters)
+        {
+            return result;
+        }
+        var tokens = [];
+        for (var i = 0, iTop = that.filters.length; i < iTop; i++ )
+        {
+            var filter = that.filters[i];
+            var callback = $.chili.filters && $.chili.filters[ filter.callback ];
+            if (! (callback && $.isFunction(callback)))
+            {
+                continue;
+            }
+            if (0 == tokens.length)
+            {
+                tokens = tokenSplit(html);
+            }
+            var extraction = tokenExtract(tokens, filter.start, filter.count);
+            tokens = extraction.tokens;
+            var position = extraction.position;
+            var filterInput = {
+                text: filter.original,
+                html: tokens[ position ].value
+            };
+            var args = filter.args;
+            var filterOutput = callback.apply(filterInput, args);
+            tokens[ position ].value = filterOutput;
+        }
+        if (0 < tokens.length)
+        {
+            result = tokenJoin(tokens);
+        }
+        return result;
+    }
+    
+        
+    /**
+     * Clears anything that was selected before
+     */
+    function clearPreviousSelection()
+    {
+        if ($.browser.msie) 
+        {
+            document.selection.empty();
+        }
+        else
+        {
+            window.getSelection().removeAllRanges();
+        }
+    }
+    
+    /**
+     * Resets the currently selected element
+     * 
+     * This is later used to check that the user selected text from
+     * the same element
+     */
+    function resetSelectedTextElement() 
+    {
+        element = this;
+        clearPreviousSelection();
+    }
+    
+    /**
+     * Returns the text selected by the user
+     */
+    function getSelectedText()
+    {
+        var result;
+        if ($.browser.msie)
+        {
+            result = document.selection.createRange().htmlText;
+        }
+        else
+        {
+            var selection = window.getSelection();
+            var range     = selection.getRangeAt(0);
+            selection = selection.toString();
+            range     = range.toString();
+            //selection works for line numbers on, range otherwise
+            result = /\n/.test(selection) ? selection : range;
+        }
+        return result;
+    }
+    
+    /**
+     * Returns the given html after replacing any HTML break and block by a 
+     * new line
+     *
+     * @param {String} html
+     * 
+     * @return String 
+     */
+    function preserveNewLines( html )
+    {
+        var newline_flag = unique(html);
+        var text = '';
+        if (/<br\b/i.test(html) || /<li\b/i.test(html)) 
+        {
+            if (/<br\b/i.test(html)) 
+            {
+                html = html.replace( /\<br[^>]*?\>/ig, newline_flag );
+            }
+            else if (/<li\b/i.test(html)) 
+            {
+                html = html.replace( /<ol[^>]*?>|<\/ol>|<li[^>]*?>/ig, '' ).replace( /<\/li>/ig, newline_flag );
+            }
+            var el = $( '<pre>' ).appendTo( 'body' ).hide()[0];
+            el.innerHTML = html;
+            text = $( el ).text().replace( new RegExp( newline_flag, "g" ), '\r\n' );
+            $( el ).remove();
+        }
+        return text;
+    }
+    
+    /**
+     * Returns the given text, after removing garbage characters
+     */
+    function cleanText( text )
+    {
+        var result = $.browser.msie
+            ? preserveNewLines(text)
+            : text
+                .replace( /\r/g, '' )
+                .replace( /^# ?/g, '' )
+                .replace( /\n# ?/g, '\n' );
+        return result;
+    }
+    
+    /**
+     * Shows a dialog containing the given text
+     */
+    function makeDialog( selected, event )
+    {
+        var boxOptions = $.chili.selection.box;
+        var boxTag = $.browser.msie
+            ? ('<textarea style="' + boxOptions.style + '">')
+            : ('<pre style="' + boxOptions.style + '">');
+            
+        var boxElement = $(boxTag)
+            .appendTo( 'body' )
+            .text( selected )
+            .attr( 'id', 'chili_selection' )
+            .click( function() { $(this).remove(); } )
+        ;
+        var top  = boxOptions.top(event.pageX, event.pageY, 
+                boxElement.width(), boxElement.height());
+        var left = boxOptions.left(event.pageX, event.pageY, 
+                boxElement.width(), boxElement.height());
+        boxElement.css( { top: top, left: left } );
+            
+        return boxElement;
+    }
+    
+    /**
+     * Selects the text in the given $container
+     */
+    function selectTextAgain($container)
+    {
+        if ($.browser.msie) 
+        {
+            $container[0].focus();
+            $container[0].select();
+        }
+        else 
+        {
+            var s = window.getSelection();
+            s.removeAllRanges();
+            var r = document.createRange();
+            r.selectNodeContents( $container[0] );
+            s.addRange( r );
+        }
+    }
+    
+    /**
+     * Shows a dialog containing the text selected by the user
+     */
+    function displaySelectedTextDialog( event ) 
+    {
+        if (! (element && element == this)) 
+        {
+            return;
+        }
+        element = null;
+        
+        var selectedText = getSelectedText();
+        if ( '' == selectedText ) 
+        { 
+            return;
+        }
+        selectedText = cleanText(selectedText);
+        
+        var $container = makeDialog(selectedText, event);
+        selectTextAgain($container);
+    }
+    
+    /**
+     * When a user selects highlighted text, IE and FF returns a mess: this
+     * function displays a minimal dialog with the selected text, cleaned up 
+     */
+    function fixTextSelection( dom_element )
+    {
+        //chrome, opera, and safari select PRE text correctly 
+        if ($.chili.selection.active && ($.browser.msie || $.browser.mozilla)) 
+        {
+            var element = null;
+            $(dom_element)
+                .parents()
+                .filter("pre")
+                .bind("mousedown", resetSelectedTextElement)
+                .bind("mouseup", displaySelectedTextDialog)
+            ;
+        }
+    }
+    
+    }
+)(jQuery);
@@ -0,0 +1,65 @@
+jQuery.chili.recipes.javascript =
+{
+      _name: 'js'
+    , _case: true
+    , _main: {
+          ml_comment: { 
+              _match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
+            , _style: 'color: gray;'
+        }
+        , sl_comment: { 
+              _match: /\/\/.*/
+            , _style: 'color: green;'
+        }
+        , string: { 
+              _match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/
+            , _style: 'color: teal;'
+        }
+        , num: { 
+              _match: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/
+            , _style: 'color: red;'
+        }
+        , reg_not: { //this prevents "a / b / c" to be interpreted as a reg_exp
+              _match: /(?:\w+\s*)\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*(?:\s*\w+)/
+            , _replace: function( all ) {
+                return this.x( all, '//num' );
+            }
+        }
+        , reg_exp: { 
+              _match: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/
+            , _style: 'color: maroon;'
+        }
+        , brace: { 
+              _match: /[\{\}]/
+            , _style: 'color: red; font-weight: bold;'
+        }
+        , statement: { 
+              _match: /\b(with|while|var|try|throw|switch|return|if|for|finally|else|do|default|continue|const|catch|case|break)\b/
+            , _style: 'color: navy; font-weight: bold;'
+        }
+        , error: { 
+              _match: /\b(URIError|TypeError|SyntaxError|ReferenceError|RangeError|EvalError|Error)\b/
+            , _style: 'color: Coral;'
+        }
+        , object: { 
+              _match: /\b(String|RegExp|Object|Number|Math|Function|Date|Boolean|Array)\b/
+            , _style: 'color: DeepPink;'
+        }
+        , property: { 
+              _match: /\b(undefined|arguments|NaN|Infinity)\b/
+            , _style: 'color: Purple; font-weight: bold;'
+        }
+        , 'function': { 
+              _match: /\b(parseInt|parseFloat|isNaN|isFinite|eval|encodeURIComponent|encodeURI|decodeURIComponent|decodeURI)\b/
+            , _style: 'color: olive;'
+        }
+        , operator: {
+              _match: /\b(void|typeof|this|new|instanceof|in|function|delete)\b/
+            , _style: 'color: RoyalBlue; font-weight: bold;'
+        }
+        , liveconnect: {
+              _match: /\b(sun|netscape|java|Packages|JavaPackage|JavaObject|JavaClass|JavaArray|JSObject|JSException)\b/
+            , _style: 'text-decoration: overline;'
+        }
+    }
+};
 \ No newline at end of file
@@ -0,0 +1,347 @@
+jQuery.chili.options.dynamic.active = false;
+
+
+
+/* this recipe uses a little trick for highlighting php code
+ *   1: replace each php snippet with a placeholder
+ *   2: highlight html without php and php snippets apart
+ *   3: replace each placeholder with its highlighted php snippet
+ * 
+ * the trick is not perfect
+ */
+jQuery.chili.recipes.php = 
+{
+	  _name: "php"
+	, _case: true
+	, _main: {
+		  all: {
+			  _match: /[\w\W]*/ 
+			, _replace: function( all ) {
+				var placeholder = String.fromCharCode(0);
+				var blocks = [];
+				var that = this;
+				var no_php_1 = all.replace( /<\?[^?]*\?+(?:[^>][^?]*\?+)*>/g, function( block ) {
+					blocks.push( that.x( block, '/block/php_1' ) );
+					return placeholder;
+				} );
+				var no_php_2 = no_php_1.replace( /^[^?]*\?+(?:[^>][^?]*\?+)*>|<\?[\w\W]*$/g, function( block ) {
+					blocks.push( that.x( block, '/block/php_2' ) );
+					return placeholder;
+				} );
+				if( blocks.length ) {
+					var html = this.x( no_php_2, 'html' );
+					var count = 0;
+					return html.replace( new RegExp( placeholder, "g" ), function() {
+						return blocks[ count++ ];
+					} );
+				}
+				else {
+					return this.x( all, '/php' );
+				}
+			}
+		}
+	}
+	, block: {
+		  php_1: { // --- <? +++ ?> ---
+			  _match: /(<\?(?:php\b)?)([^?]*\?+(?:[^>][^?]*\?+)*>)/
+			, _replace: function( all, open, content ) {
+				return "<span class='start'>" + this.x( open ) + "</span>"
+					+ this.x( content.replace( /\?>$/, '' ), '/php' ) 
+					+ "<span class='end'>" + this.x( '?>' ) + "</span>";
+			}
+			, _style: {
+					  start: "color: red; font-weight: bold"
+					, end:   "color: red;"
+			}
+		}
+		, php_2: { // +++ ?> --- <? +++
+			  _match: /([^?]*\?+(?:[^>][^?]*\?+)*>)|(<\?(?:php\b)?)([\w\W]*)/
+			, _replace: function( all, content, open2, content2 ) {
+				if( open2 ) {
+					return "<span class='start'>" + this.x( open2 ) + "</span>"
+						+ this.x( content2, '/php' );
+				}
+				else {
+					return this.x( content.replace( /\?>$/, '' ), '/php' ) 
+						+ "<span class='end'>" + this.x( '?>' ) + "</span>";
+				}
+			}
+			, _style: {
+					  start: "color: red; font-weight: bold"
+					, end:   "color: red;"
+			}
+		}
+	}
+	, php: {
+		  mlcom: {
+			  _match: /\/\*[^*]*\*+([^\/][^*]*\*+)*\// 
+			, _style: "color: gray;"
+		}
+		, com: {
+			  _match: /(?:\/\/.*)|(?:[^\\]\#.*)/ 
+			, _style: "color: green;"
+		}
+		, string1: {
+			  _match: /\'[^\'\\]*(?:\\.[^\'\\]*)*\'/ 
+			, _style: "color: purple;"
+		}
+		, string2: {
+			  _match: /\"[^\"\\]*(?:\\.[^\"\\]*)*\"/ 
+			, _style: "color: fuchsia;"
+		}
+		, value: {
+			  _match: /\b(?:[Nn][Uu][Ll][Ll]|[Tt][Rr][Uu][Ee]|[Ff][Aa][Ll][Ss][Ee])\b/ 
+			, _style: "color: gray; font-weight: bold;"
+		}
+		, number: {
+			  _match: /\b[+-]?(\d*\.?\d+|\d+\.?\d*)([eE][+-]?\d+)?\b/ 
+			, _style: "color: red;"
+		}
+		, const1: {
+			  _match: /\b(?:DEFAULT_INCLUDE_PATH|E_(?:ALL|CO(?:MPILE_(?:ERROR|WARNING)|RE_(?:ERROR|WARNING))|ERROR|NOTICE|PARSE|STRICT|USER_(?:ERROR|NOTICE|WARNING)|WARNING)|P(?:EAR_(?:EXTENSION_DIR|INSTALL_DIR)|HP_(?:BINDIR|CONFIG_FILE_(?:PATH|SCAN_DIR)|DATADIR|E(?:OL|XTENSION_DIR)|INT_(?:MAX|SIZE)|L(?:IBDIR|OCALSTATEDIR)|O(?:S|UTPUT_HANDLER_(?:CONT|END|START))|PREFIX|S(?:API|HLIB_SUFFIX|YSCONFDIR)|VERSION))|__COMPILER_HALT_OFFSET__)\b/ 
+			, _style: "color: red;"
+		}
+		, const2: {
+			  _match: /\b(?:A(?:B(?:DAY_(?:1|2|3|4|5|6|7)|MON_(?:1(?:0|1|2|)|2|3|4|5|6|7|8|9))|LT_DIGITS|M_STR|SSERT_(?:ACTIVE|BAIL|CALLBACK|QUIET_EVAL|WARNING))|C(?:ASE_(?:LOWER|UPPER)|HAR_MAX|O(?:DESET|NNECTION_(?:ABORTED|NORMAL|TIMEOUT)|UNT_(?:NORMAL|RECURSIVE))|R(?:EDITS_(?:ALL|DOCS|FULLPAGE|G(?:ENERAL|ROUP)|MODULES|QA|SAPI)|NCYSTR|YPT_(?:BLOWFISH|EXT_DES|MD5|S(?:ALT_LENGTH|TD_DES)))|URRENCY_SYMBOL)|D(?:AY_(?:1|2|3|4|5|6|7)|ECIMAL_POINT|IRECTORY_SEPARATOR|_(?:FMT|T_FMT))|E(?:NT_(?:COMPAT|NOQUOTES|QUOTES)|RA(?:_(?:D_(?:FMT|T_FMT)|T_FMT|YEAR)|)|XTR_(?:IF_EXISTS|OVERWRITE|PREFIX_(?:ALL|I(?:F_EXISTS|NVALID)|SAME)|SKIP))|FRAC_DIGITS|GROUPING|HTML_(?:ENTITIES|SPECIALCHARS)|IN(?:FO_(?:ALL|C(?:ONFIGURATION|REDITS)|ENVIRONMENT|GENERAL|LICENSE|MODULES|VARIABLES)|I_(?:ALL|PERDIR|SYSTEM|USER)|T_(?:CURR_SYMBOL|FRAC_DIGITS))|L(?:C_(?:ALL|C(?:OLLATE|TYPE)|M(?:ESSAGES|ONETARY)|NUMERIC|TIME)|O(?:CK_(?:EX|NB|SH|UN)|G_(?:A(?:LERT|UTH(?:PRIV|))|C(?:ONS|R(?:IT|ON))|D(?:AEMON|EBUG)|E(?:MERG|RR)|INFO|KERN|L(?:OCAL(?:0|1|2|3|4|5|6|7)|PR)|MAIL|N(?:DELAY|EWS|O(?:TICE|WAIT))|ODELAY|P(?:ERROR|ID)|SYSLOG|U(?:SER|UCP)|WARNING)))|M(?:ON_(?:1(?:0|1|2|)|2|3|4|5|6|7|8|9|DECIMAL_POINT|GROUPING|THOUSANDS_SEP)|_(?:1_PI|2_(?:PI|SQRTPI)|E|L(?:N(?:10|2)|OG(?:10E|2E))|PI(?:_(?:2|4)|)|SQRT(?:1_2|2)))|N(?:EGATIVE_SIGN|O(?:EXPR|STR)|_(?:CS_PRECEDES|S(?:EP_BY_SPACE|IGN_POSN)))|P(?:ATH(?:INFO_(?:BASENAME|DIRNAME|EXTENSION)|_SEPARATOR)|M_STR|OSITIVE_SIGN|_(?:CS_PRECEDES|S(?:EP_BY_SPACE|IGN_POSN)))|RADIXCHAR|S(?:EEK_(?:CUR|END|SET)|ORT_(?:ASC|DESC|NUMERIC|REGULAR|STRING)|TR_PAD_(?:BOTH|LEFT|RIGHT))|T(?:HOUS(?:ANDS_SEP|EP)|_FMT(?:_AMPM|))|YES(?:EXPR|STR))\b/ 
+			, _style: "color: red;"
+		}
+		, global: {
+			  _match: /(?:\$GLOBALS|\$_COOKIE|\$_ENV|\$_FILES|\$_GET|\$_POST|\$_REQUEST|\$_SERVER|\$_SESSION|\$php_errormsg)\b/ 
+			, _style: "color: red;"
+		}
+		, keyword: {
+			  _match: /\b(?:__CLASS__|__FILE__|__FUNCTION__|__LINE__|__METHOD__|abstract|and|array|as|break|case|catch|cfunction|class|clone|const|continue|declare|default|die|do|echo|else|elseif|empty|enddeclare|endfor|endforeach|endif|endswitch|endwhile|eval|exception|exit|extends|extends|final|for|foreach|function|global|if|implements|include|include_once|interface|isset|list|new|old_function|or|php_user_filter|print|private|protected|public|require|require_once|return|static|switch|this|throw|try|unset|use|var|while|xor)\b/ 
+			, _style: "color: navy; font-weight: bold;"
+		}
+		, variable: {
+			  _match: /\$(\w+)/
+			, _replace: '<span class="keyword">$</span><span class="variable">$1</span>' 
+			, _style: "color: #4040c2;"
+		}
+		, heredoc: {
+			  _match: /(\<\<\<\s*)(\w+)((?:(?!\2).*\n)+)(\2)\b/
+			, _replace: '<span class="keyword">$1</span><span class="string1">$2</span><span class="string2">$3</span><span class="string1">$4</span>' 
+		}
+	}
+};
+
+
+
+jQuery.chili.recipes.html = 
+{
+	  _name: 'html'
+	, _case: false
+	, _main: {
+		  doctype: { 
+			  _match: /<!DOCTYPE\b[\w\W]*?>/ 
+			, _style: "color: #CC6600;"
+		}
+		, ie_style: {
+			  _match: /(<!--\[[^\]]*\]>)([\w\W]*?)(<!\[[^\]]*\]-->)/
+			, _replace: function( all, open, content, close ) {
+				return "<span class='ie_style'>" + this.x( open ) + "</span>" 
+					  + this.x( content, '//style' ) 
+					  + "<span class='ie_style'>" + this.x( close ) + "</span>";
+			}
+			, _style: "color: DarkSlateGray; font-weight: bold;"
+		}
+		, comment: { 
+			  _match: /<!--[\w\W]*?-->/ 
+			, _style: "color: #4040c2;"
+		}
+		, script: { 
+			  _match: /(<script\s+[^>]*>)([\w\W]*?)(<\/script\s*>)/
+			, _replace: function( all, open, content, close ) { 
+				  return this.x( open, '//tag_start' ) 
+					  + this.x( content, 'javascript' ) 
+					  + this.x( close, '//tag_end' );
+			} 
+		}
+		, style: { 
+			  _match: /(<style\s+[^>]*>)([\w\W]*?)(<\/style\s*>)/
+			, _replace: function( all, open, content, close ) { 
+				  return this.x( open, '//tag_start' ) 
+					  + this.x( content, 'css' ) 
+					  + this.x( close, '//tag_end' );
+			} 
+		}
+		// matches a starting tag of an element (with attrs)
+		// like "<div ... >" or "<img ... />"
+		, tag_start: { 
+			  _match: /(<\w+)((?:[?%]>|[\w\W])*?)(\/>|>)/ 
+			, _replace: function( all, open, content, close ) { 
+				  return "<span class='tag_start'>" + this.x( open ) + "</span>" 
+					  + this.x( content, '/tag_attrs' ) 
+					  + "<span class='tag_start'>" + this.x( close ) + "</span>";
+			}
+			, _style: "color: navy; font-weight: bold;"
+		} 
+		// matches an ending tag
+		// like "</div>"
+		, tag_end: { 
+			  _match: /<\/\w+\s*>|\/>/ 
+			, _style: "color: navy;"
+		}
+		, entity: { 
+			  _match: /&\w+?;/ 
+			, _style: "color: blue;"
+		}
+	}
+	, tag_attrs: {
+		// matches a name/value pair
+		attr: {
+			// before in $1, name in $2, between in $3, value in $4
+			  _match: /(\W*?)([\w-]+)(\s*=\s*)((?:\'[^\']*(?:\\.[^\']*)*\')|(?:\"[^\"]*(?:\\.[^\"]*)*\"))/ 
+			, _replace: "$1<span class='attr_name'>$2</span>$3<span class='attr_value'>$4</span>"
+			, _style: { attr_name:  "color: green;", attr_value: "color: maroon;" }
+		}
+	}
+};
+
+
+
+jQuery.chili.recipes.javascript =
+{
+      _name: 'js'
+    , _case: true
+    , _main: {
+          ml_comment: { 
+              _match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
+            , _style: 'color: gray;'
+        }
+        , sl_comment: { 
+              _match: /\/\/.*/
+            , _style: 'color: green;'
+        }
+        , string: { 
+              _match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/
+            , _style: 'color: teal;'
+        }
+        , num: { 
+              _match: /\b[+-]?(?:\d*\.?\d+|\d+\.?\d*)(?:[eE][+-]?\d+)?\b/
+            , _style: 'color: red;'
+        }
+        , reg_not: { //this prevents "a / b / c" to be interpreted as a reg_exp
+              _match: /(?:\w+\s*)\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*(?:\s*\w+)/
+            , _replace: function( all ) {
+                return this.x( all, '//num' );
+            }
+        }
+        , reg_exp: { 
+              _match: /\/[^\/\\\n]*(?:\\.[^\/\\\n]*)*\/[gim]*/
+            , _style: 'color: maroon;'
+        }
+        , brace: { 
+              _match: /[\{\}]/
+            , _style: 'color: red; font-weight: bold;'
+        }
+        , statement: { 
+              _match: /\b(with|while|var|try|throw|switch|return|if|for|finally|else|do|default|continue|const|catch|case|break)\b/
+            , _style: 'color: navy; font-weight: bold;'
+        }
+        , error: { 
+              _match: /\b(URIError|TypeError|SyntaxError|ReferenceError|RangeError|EvalError|Error)\b/
+            , _style: 'color: Coral;'
+        }
+        , object: { 
+              _match: /\b(String|RegExp|Object|Number|Math|Function|Date|Boolean|Array)\b/
+            , _style: 'color: DeepPink;'
+        }
+        , property: { 
+              _match: /\b(undefined|arguments|NaN|Infinity)\b/
+            , _style: 'color: Purple; font-weight: bold;'
+        }
+        , 'function': { 
+              _match: /\b(parseInt|parseFloat|isNaN|isFinite|eval|encodeURIComponent|encodeURI|decodeURIComponent|decodeURI)\b/
+            , _style: 'color: olive;'
+        }
+        , operator: {
+              _match: /\b(void|typeof|this|new|instanceof|in|function|delete)\b/
+            , _style: 'color: RoyalBlue; font-weight: bold;'
+        }
+        , liveconnect: {
+              _match: /\b(sun|netscape|java|Packages|JavaPackage|JavaObject|JavaClass|JavaArray|JSObject|JSException)\b/
+            , _style: 'text-decoration: overline;'
+        }
+    }
+};
+
+
+
+jQuery.chili.recipes.css = 
+{
+	  _name: 'css'
+	, _case: true
+	, _main: {
+		  comment: { 
+			  _match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\// 
+			, _style: "color: olive;"
+		}
+		, directive: {
+			  _match: /@\w+/
+			, _style: "color: fuchsia;"
+		}
+		, url: {
+			  _match: /\b(url\s*\()([^)]+)(\))/
+			, _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
+			, _style: "color: fuchsia;"
+		}
+		, block:   {
+			  _match: /\{([\w\W]*?)\}/
+			, _replace: function( all, pairs ) {
+				return '{' + this.x( pairs, '/definition' ) + '}';
+			}
+		}
+		, 'class': {
+			  _match: /\.\w+/
+			, _style: "color: #CC0066; font-weight: bold;"
+		}
+		, id:      {
+			  _match: /#\w+/
+			, _style: "color: IndianRed; font-weight: bold;"
+		}
+		, pseudo:  {
+			  _match: /:\w+/
+			, _style: "color: #CC9900;"
+		}
+		, element: {
+			  _match: /\w+/
+			, _style: "color: Purple; font-weight: bold;"
+		}
+	}
+	, definition: {
+		  comment: { 
+			  _match: /\/\*[^*]*\*+(?:[^\/][^*]*\*+)*\//
+		}
+		, property: {
+			  _match: /\b(?:zoom|z-index|writing-mode|word-wrap|word-spacing|word-break|width|widows|white-space|volume|voice-family|visibility|vertical-align|unicode-bidi|top|text-underline-position|text-transform|text-shadow|text-overflow|text-kashida-space|text-justify|text-indent|text-decoration|text-autospace|text-align-last|text-align|table-layout|stress|speech-rate|speak-punctuation|speak-numeral|speak-header|speak|size|scrollbar-track-color|scrollbar-shadow-color|scrollbar-highlight-color|scrollbar-face-color|scrollbar-dark-shadow-color|scrollbar-base-color|scrollbar-arrow-color|scrollbar-3d-light-color|ruby-position|ruby-overhang|ruby-align|right|richness|quotes|position|play-during|pitch-range|pitch|pause-before|pause-after|pause|page-break-inside|page-break-before|page-break-after|page|padding-top|padding-right|padding-left|padding-bottom|padding|overflow-Y|overflow-X|overflow|outline-width|outline-style|outline-color|outline|orphans|min-width|min-height|max-width|max-height|marks|marker-offset|margin-top|margin-right|margin-left|margin-bottom|margin|list-style-type|list-style-position|list-style-image|list-style|line-height|line-break|letter-spacing|left|layout-grid-type|layout-grid-mode|layout-grid-line|layout-grid-char-spacing|layout-grid-char|layout-grid|layout-flow|layer-background-image|layer-background-color|include-source|ime-mode|height|font-weight|font-variant|font-style|font-stretch|font-size-adjust|font-size|font-family|font|float|filter|empty-cells|elevation|display|direction|cursor|cue-before|cue-after|cue|counter-reset|counter-increment|content|color|clip|clear|caption-side|bottom|border-width|border-top-width|border-top-style|border-top-color|border-top|border-style|border-spacing|border-right-width|border-right-style|border-right-color|border-right|border-left-width|border-left-style|border-left-color|border-left|border-color|border-collapse|border-bottom-width|border-bottom-style|border-bottom-color|border-bottom|border|behavior|background-repeat|background-position-y|background-position-x|background-position|background-image|background-color|background-attachment|background|azimuth|accelerator)\s*:/
+			, _style: "color: #330066;"
+		}
+		, special: {
+			  _match: /\b(?:-use-link-source|-set-link-source|-replace|-moz-user-select|-moz-user-modify|-moz-user-input|-moz-user-focus|-moz-outline-width|-moz-outline-style|-moz-outline-color|-moz-outline|-moz-opacity|-moz-border-top-colors|-moz-border-right-colors|-moz-border-radius-topright|-moz-border-radius-topleft|-moz-border-radius-bottomright|-moz-border-radius-bottomleft|-moz-border-radius|-moz-border-left-colors|-moz-border-bottom-colors|-moz-binding)\s*:/
+			, _style: "color: #330066; text-decoration: underline;"
+		}
+		, url: {
+			  _match: /\b(url\s*\()([^)]+)(\))/
+			, _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
+		}
+		, value: {
+			  _match: /\b(?:xx-small|xx-large|x-soft|x-small|x-slow|x-low|x-loud|x-large|x-high|x-fast|wider|wait|w-resize|visible|url|uppercase|upper-roman|upper-latin|upper-alpha|underline|ultra-expanded|ultra-condensed|tv|tty|transparent|top|thin|thick|text-top|text-bottom|table-row-group|table-row|table-header-group|table-footer-group|table-column-group|table-column|table-cell|table-caption|sw-resize|super|sub|status-bar|static|square|spell-out|speech|solid|soft|smaller|small-caption|small-caps|small|slower|slow|silent|show|separate|semi-expanded|semi-condensed|se-resize|scroll|screen|s-resize|run-in|rtl|rightwards|right-side|right|ridge|rgb|repeat-y|repeat-x|repeat|relative|projection|print|pre|portrait|pointer|overline|outside|outset|open-quote|once|oblique|nw-resize|nowrap|normal|none|no-repeat|no-open-quote|no-close-quote|ne-resize|narrower|n-resize|move|mix|middle|message-box|medium|marker|ltr|lowercase|lower-roman|lower-latin|lower-greek|lower-alpha|lower|low|loud|local|list-item|line-through|lighter|level|leftwards|left-side|left|larger|large|landscape|justify|italic|invert|inside|inset|inline-table|inline|icon|higher|high|hide|hidden|help|hebrew|handheld|groove|format|fixed|faster|fast|far-right|far-left|fantasy|extra-expanded|extra-condensed|expanded|embossed|embed|e-resize|double|dotted|disc|digits|default|decimal-leading-zero|decimal|dashed|cursive|crosshair|cross|crop|counters|counter|continuous|condensed|compact|collapse|code|close-quote|circle|center-right|center-left|center|caption|capitalize|braille|bottom|both|bolder|bold|block|blink|bidi-override|below|behind|baseline|avoid|auto|aural|attr|armenian|always|all|absolute|above)\b/
+			, _style: "color: #3366FF;"
+		}
+		, string: { 
+			  _match: /(?:\'[^\'\\\n]*(?:\\.[^\'\\\n]*)*\')|(?:\"[^\"\\\n]*(?:\\.[^\"\\\n]*)*\")/ 
+			, _style: "color: teal;"
+		}
+		, number: { 
+			  _match: /(?:\b[+-]?(?:\d*\.?\d+|\d+\.?\d*))(?:%|(?:(?:px|pt|em|)\b))/ 
+			, _style: "color: red;"
+		}
+		, color : { 
+			  _match: /(?:\#[a-fA-F0-9]{3,6})|\b(?:yellow|white|teal|silver|red|purple|olive|navy|maroon|lime|green|gray|fuchsia|blue|black|aqua|YellowGreen|Yellow|WhiteSmoke|White|Wheat|Violet|Turquoise|Tomato|Thistle|Teal|Tan|SteelBlue|SpringGreen|Snow|SlateGrey|SlateGray|SlateBlue|SkyBlue|Silver|Sienna|SeaShell|SeaGreen|SandyBrown|Salmon|SaddleBrown|RoyalBlue|RosyBrown|Red|Purple|PowderBlue|Plum|Pink|Peru|PeachPuff|PapayaWhip|PaleVioletRed|PaleTurquoise|PaleGreen|PaleGoldenRod|Orchid|OrangeRed|Orange|OliveDrab|Olive|OldLace|Navy|NavajoWhite|Moccasin|MistyRose|MintCream|MidnightBlue|MediumVioletRed|MediumTurquoise|MediumSpringGreen|MediumSlateBlue|MediumSeaGreen|MediumPurple|MediumOrchid|MediumBlue|MediumAquaMarine|Maroon|Magenta|Linen|LimeGreen|Lime|LightYellow|LightSteelBlue|LightSlateGrey|LightSlateGray|LightSkyBlue|LightSeaGreen|LightSalmon|LightPink|LightGrey|LightGreen|LightGray|LightGoldenRodYellow|LightCyan|LightCoral|LightBlue|LemonChiffon|LawnGreen|LavenderBlush|Lavender|Khaki|Ivory|Indigo|IndianRed|HotPink|HoneyDew|Grey|GreenYellow|Green|Gray|GoldenRod|Gold|GhostWhite|Gainsboro|Fuchsia|ForestGreen|FloralWhite|FireBrick|DodgerBlue|DimGrey|DimGray|DeepSkyBlue|DeepPink|Darkorange|DarkViolet|DarkTurquoise|DarkSlateGrey|DarkSlateGray|DarkSlateBlue|DarkSeaGreen|DarkSalmon|DarkRed|DarkOrchid|DarkOliveGreen|DarkMagenta|DarkKhaki|DarkGrey|DarkGreen|DarkGray|DarkGoldenRod|DarkCyan|DarkBlue|Cyan|Crimson|Cornsilk|CornflowerBlue|Coral|Chocolate|Chartreuse|CadetBlue|BurlyWood|Brown|BlueViolet|Blue|BlanchedAlmond|Black|Bisque|Beige|Azure|Aquamarine|Aqua|AntiqueWhite|AliceBlue)\b/ 
+			, _style: "color: green;"
+		}
+	}
+};
+
+
@@ -0,0 +1,284 @@
+
+/*!
+jQuery JSONView.
+Licensed under the MIT License.
+ */
+(function(jQuery) {
+  var $, Collapser, JSONFormatter, JSONView;
+  JSONFormatter = (function() {
+    function JSONFormatter(options) {
+      if (options == null) {
+        options = {};
+      }
+      this.options = options;
+    }
+
+    JSONFormatter.prototype.htmlEncode = function(html) {
+      if (html !== null) {
+        return html.toString().replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+      } else {
+        return '';
+      }
+    };
+
+    JSONFormatter.prototype.jsString = function(s) {
+      s = JSON.stringify(s).slice(1, -1);
+      return this.htmlEncode(s);
+    };
+
+    JSONFormatter.prototype.decorateWithSpan = function(value, className) {
+      return "<span class=\"" + className + "\">" + (this.htmlEncode(value)) + "</span>";
+    };
+
+    JSONFormatter.prototype.valueToHTML = function(value, level) {
+      var valueType;
+      if (level == null) {
+        level = 0;
+      }
+      valueType = Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase();
+      return this["" + valueType + "ToHTML"].call(this, value, level);
+    };
+
+    JSONFormatter.prototype.nullToHTML = function(value) {
+      return this.decorateWithSpan('null', 'null');
+    };
+
+    JSONFormatter.prototype.numberToHTML = function(value) {
+      return this.decorateWithSpan(value, 'num');
+    };
+
+    JSONFormatter.prototype.stringToHTML = function(value) {
+      var multilineClass, newLinePattern;
+      if (/^(http|https|file):\/\/[^\s]+$/i.test(value)) {
+        return "<a href=\"" + (this.htmlEncode(value)) + "\"><span class=\"q\">\"</span>" + (this.jsString(value)) + "<span class=\"q\">\"</span></a>";
+      } else {
+        multilineClass = '';
+        value = this.jsString(value);
+        if (this.options.nl2br) {
+          newLinePattern = /([^>\\r\\n]?)(\\r\\n|\\n\\r|\\r|\\n)/g;
+          if (newLinePattern.test(value)) {
+            multilineClass = ' multiline';
+            value = (value + '').replace(newLinePattern, '$1' + '<br />');
+          }
+        }
+        return "<span class=\"string" + multilineClass + "\">\"" + value + "\"</span>";
+      }
+    };
+
+    JSONFormatter.prototype.booleanToHTML = function(value) {
+      return this.decorateWithSpan(value, 'bool');
+    };
+
+    JSONFormatter.prototype.arrayToHTML = function(array, level) {
+      var collapsible, hasContents, index, numProps, output, value, _i, _len;
+      if (level == null) {
+        level = 0;
+      }
+      hasContents = false;
+      output = '';
+      numProps = array.length;
+      for (index = _i = 0, _len = array.length; _i < _len; index = ++_i) {
+        value = array[index];
+        hasContents = true;
+        output += '<li>' + this.valueToHTML(value, level + 1);
+        if (numProps > 1) {
+          output += ',';
+        }
+        output += '</li>';
+        numProps--;
+      }
+      if (hasContents) {
+        collapsible = level === 0 ? '' : ' collapsible';
+        return "[<ul class=\"array level" + level + collapsible + "\">" + output + "</ul>]";
+      } else {
+        return '[ ]';
+      }
+    };
+
+    JSONFormatter.prototype.objectToHTML = function(object, level) {
+      var collapsible, hasContents, key, numProps, output, prop, value;
+      if (level == null) {
+        level = 0;
+      }
+      hasContents = false;
+      output = '';
+      numProps = 0;
+      for (prop in object) {
+        numProps++;
+      }
+      for (prop in object) {
+        value = object[prop];
+        hasContents = true;
+        key = this.options.escape ? this.jsString(prop) : prop;
+        output += "<li><span class=\"prop\"><span class=\"q\">\"</span>" + key + "<span class=\"q\">\"</span></span>: " + (this.valueToHTML(value, level + 1));
+        if (numProps > 1) {
+          output += ',';
+        }
+        output += '</li>';
+        numProps--;
+      }
+      if (hasContents) {
+        collapsible = level === 0 ? '' : ' collapsible';
+        return "{<ul class=\"obj level" + level + collapsible + "\">" + output + "</ul>}";
+      } else {
+        return '{ }';
+      }
+    };
+
+    JSONFormatter.prototype.jsonToHTML = function(json) {
+      return "<div class=\"jsonview\">" + (this.valueToHTML(json)) + "</div>";
+    };
+
+    return JSONFormatter;
+
+  })();
+  (typeof module !== "undefined" && module !== null) && (module.exports = JSONFormatter);
+  Collapser = (function() {
+    function Collapser() {}
+
+    Collapser.bindEvent = function(item, options) {
+      var collapser;
+      collapser = document.createElement('div');
+      collapser.className = 'collapser';
+      collapser.innerHTML = options.collapsed ? '+' : '-';
+      collapser.addEventListener('click', (function(_this) {
+        return function(event) {
+          return _this.toggle(event.target, options);
+        };
+      })(this));
+      item.insertBefore(collapser, item.firstChild);
+      if (options.collapsed) {
+        return this.collapse(collapser);
+      }
+    };
+
+    Collapser.expand = function(collapser) {
+      var ellipsis, target;
+      target = this.collapseTarget(collapser);
+      if (target.style.display === '') {
+        return;
+      }
+      ellipsis = target.parentNode.getElementsByClassName('ellipsis')[0];
+      target.parentNode.removeChild(ellipsis);
+      target.style.display = '';
+      return collapser.innerHTML = '-';
+    };
+
+    Collapser.collapse = function(collapser) {
+      var ellipsis, target;
+      target = this.collapseTarget(collapser);
+      if (target.style.display === 'none') {
+        return;
+      }
+      target.style.display = 'none';
+      ellipsis = document.createElement('span');
+      ellipsis.className = 'ellipsis';
+      ellipsis.innerHTML = ' &hellip; ';
+      target.parentNode.insertBefore(ellipsis, target);
+      return collapser.innerHTML = '+';
+    };
+
+    Collapser.toggle = function(collapser, options) {
+      var action, collapsers, target, _i, _len, _results;
+      if (options == null) {
+        options = {};
+      }
+      target = this.collapseTarget(collapser);
+      action = target.style.display === 'none' ? 'expand' : 'collapse';
+      if (options.recursive_collapser) {
+        collapsers = collapser.parentNode.getElementsByClassName('collapser');
+        _results = [];
+        for (_i = 0, _len = collapsers.length; _i < _len; _i++) {
+          collapser = collapsers[_i];
+          _results.push(this[action](collapser));
+        }
+        return _results;
+      } else {
+        return this[action](collapser);
+      }
+    };
+
+    Collapser.collapseTarget = function(collapser) {
+      var target, targets;
+      targets = collapser.parentNode.getElementsByClassName('collapsible');
+      if (!targets.length) {
+        return;
+      }
+      return target = targets[0];
+    };
+
+    return Collapser;
+
+  })();
+  $ = jQuery;
+  JSONView = {
+    collapse: function(el) {
+      if (el.innerHTML === '-') {
+        return Collapser.collapse(el);
+      }
+    },
+    expand: function(el) {
+      if (el.innerHTML === '+') {
+        return Collapser.expand(el);
+      }
+    },
+    toggle: function(el) {
+      return Collapser.toggle(el);
+    }
+  };
+  return $.fn.JSONView = function() {
+    var args, defaultOptions, formatter, json, method, options, outputDoc;
+    args = arguments;
+    if (JSONView[args[0]] != null) {
+      method = args[0];
+      return this.each(function() {
+        var $this, level;
+        $this = $(this);
+        if (args[1] != null) {
+          level = args[1];
+          return $this.find(".jsonview .collapsible.level" + level).siblings('.collapser').each(function() {
+            return JSONView[method](this);
+          });
+        } else {
+          return $this.find('.jsonview > ul > li .collapsible').siblings('.collapser').each(function() {
+            return JSONView[method](this);
+          });
+        }
+      });
+    } else {
+      json = args[0];
+      options = args[1] || {};
+      defaultOptions = {
+        collapsed: false,
+        nl2br: false,
+        recursive_collapser: false,
+        escape: true
+      };
+      options = $.extend(defaultOptions, options);
+      formatter = new JSONFormatter({
+        nl2br: options.nl2br,
+        escape: options.escape
+      });
+      if (Object.prototype.toString.call(json) === '[object String]') {
+        json = JSON.parse(json);
+      }
+      outputDoc = formatter.jsonToHTML(json);
+      return this.each(function() {
+        var $this, item, items, _i, _len, _results;
+        $this = $(this);
+        $this.html(outputDoc);
+        items = $this[0].getElementsByClassName('collapsible');
+        _results = [];
+        for (_i = 0, _len = items.length; _i < _len; _i++) {
+          item = items[_i];
+          if (item.parentNode.nodeName === 'LI') {
+            _results.push(Collapser.bindEvent(item.parentNode, options));
+          } else {
+            _results.push(void 0);
+          }
+        }
+        return _results;
+      });
+    }
+  };
+})(jQuery);
@@ -22736,19 +22736,19 @@ this[&quot;HandlebarsPrecompiled&quot;][&quot;web-edit&quot;][&quot;wizard&quot;] = Handlebars.template({&quot;1&quot;:f
                 if (self.view.type !== "display")
                 {
-                    if ($.fn.datetimepicker)
+                    if ($.fn.datepicker)
                     {
-                        self.getControlEl().datetimepicker(self.options.picker);
+                        self.picker = self.getControlEl().datepicker(self.options.picker);
-                        self.picker = self.getControlEl().data("DateTimePicker");
+                        //self.picker = self.getControlEl().data("DateTimePicker");
                         if (self.picker && self.options.dateFormat)
                         {
-                            self.picker.format(self.options.dateFormat);
-                        }
-                        if (self.picker)
-                        {
-                            self.options.dateFormat = self.picker.format();
+                            self.picker.datepicker( "option", "dateFormat", self.options.dateFormat );
                         }
+                        //if (self.picker)
+                        //{
+                        //    self.options.dateFormat = self.picker.format();
+                        //}
                         // with date-time picker, trigger change using plugin
                         self.getFieldEl().on("dp.change", function(e) {
@@ -29572,7 +29572,7 @@ this[&quot;HandlebarsPrecompiled&quot;][&quot;web-edit&quot;][&quot;wizard&quot;] = Handlebars.template({&quot;1&quot;:f
         "parent": "jqueryui-edit",
         "type": "create",
         "title": "Create view for jQuery UI",
-        "displayReadonly": false
+        "displayReadonly": true
     });
     Alpaca.registerView({
@@ -0,0 +1,52 @@
+@charset "UTF-8";
+.jsonview {
+  font-family: monospace;
+  font-size: 1.1em;
+  white-space: pre-wrap; }
+  .jsonview .prop {
+    font-weight: bold; }
+  .jsonview .null {
+    color: red; }
+  .jsonview .bool {
+    color: blue; }
+  .jsonview .num {
+    color: blue; }
+  .jsonview .string {
+    color: green;
+    white-space: pre-wrap; }
+    .jsonview .string.multiline {
+      display: inline-block;
+      vertical-align: text-top; }
+  .jsonview .collapser {
+    position: absolute;
+    left: -1em;
+    cursor: pointer; }
+  .jsonview .collapsible {
+    transition: height 1.2s;
+    transition: width 1.2s; }
+  .jsonview .collapsible.collapsed {
+    height: .8em;
+    width: 1em;
+    display: inline-block;
+    overflow: hidden;
+    margin: 0; }
+  .jsonview .collapsible.collapsed:before {
+    content: "…";
+    width: 1em;
+    margin-left: .2em; }
+  .jsonview .collapser.collapsed {
+    transform: rotate(0deg); }
+  .jsonview .q {
+    display: inline-block;
+    width: 0px;
+    color: transparent; }
+  .jsonview li {
+    position: relative; }
+  .jsonview ul {
+    list-style: none;
+    margin: 0 0 0 2em;
+    padding: 0; }
+  .jsonview h1 {
+    font-size: 1.2em; }
+
+/*# sourceMappingURL=jquery.jsonview.css.map */
@@ -0,0 +1,5 @@		@@ -0,0 +1,5 @@
	1	+#!/bin/bash
	2	+LOCAL="$PWD"
	3	+cd /opt/otrs/bin
	4	+./otrs.PackageManager.pl -a build -p "$LOCAL"/NewTicketWizardUFSC.sopm -o "$LOCAL"/
	5	+cd $LOCAL
	@@ -158,6 +158,8 @@ sub Run {		@@ -158,6 +158,8 @@ sub Run {
158	}	158	}
159	elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {	159	elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {
160	return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );	160	return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
		161	+ } elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormCustomProps" ) {
		162	+ return $Self->GetFormCustomProps( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
161	}	163	}
162	}	164	}
163	else {	165	else {
	@@ -227,6 +229,31 @@ sub GetFormJSON {		@@ -227,6 +229,31 @@ sub GetFormJSON {
227	);	229	);
228	}	230	}
229		231
		232	+sub GetFormCustomProps {
		233	+ my ( $Self, %Param ) = @_;
		234	+ my %serviceForm;
		235	+
		236	+ my $ServiceFormObject = $Kernel::OM->Get("Kernel::System::ServiceForm");
		237	+ my $LayoutObject = $Kernel::OM->Get("Kernel::Output::HTML::Layout");
		238	+ my $ParamObject = $Kernel::OM->Get("Kernel::System::Web::Request");
		239	+
		240	+ my $QueueID = $ParamObject->GetParam( Param => "QueueID" );
		241	+
		242	+ if ( $Param{ServiceID} ) {
		243	+ %serviceForm = $ServiceFormObject->GetServiceFormForQueue( ServiceID => $Param{ServiceID}, QueueID => $QueueID );
		244	+ if (! $serviceForm{ServiceID}) {
		245	+ %serviceForm = $ServiceFormObject->GetServiceForm( ServiceID => $Param{ServiceID} );
		246	+ }
		247	+ }
		248	+
		249	+ return $LayoutObject->Attachment(
		250	+ ContentType => 'text/plain; charset=' . $LayoutObject->{Charset},
		251	+ Content => $serviceForm{CustomProps} \|\| "/**/",
		252	+ Type => 'inline',
		253	+ NoCache => 1,
		254	+ );
		255	+}
		256	+
230	sub GetForm {	257	sub GetForm {
231	my ( $Self, %Param ) = @_;	258	my ( $Self, %Param ) = @_;
232		259
	@@ -163,7 +163,10 @@ sub Run {		@@ -163,7 +163,10 @@ sub Run {
163	}	163	}
164	elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {	164	elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormJSON" ) {
165	return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );	165	return $Self->GetFormJSON( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
		166	+ } elsif ( $ParamObject->GetParam( Param => "Subaction" ) eq "GetFormCustomProps" ) {
		167	+ return $Self->GetFormCustomProps( ServiceID => $ParamObject->GetParam( Param => "ServiceID" ) );
166	}	168	}
		169	+
167	}	170	}
168	else {	171	else {
169	my ( $schema, $fields ) = $Self->GetForm();	172	my ( $schema, $fields ) = $Self->GetForm();
	@@ -203,6 +206,32 @@ sub Run {		@@ -203,6 +206,32 @@ sub Run {
203	}	206	}
204	}	207	}
205		208
		209	+sub GetFormCustomProps {
		210	+ my ( $Self, %Param ) = @_;
		211	+ my %serviceForm;
		212	+
		213	+ my $ServiceFormObject = $Kernel::OM->Get("Kernel::System::ServiceForm");
		214	+ my $LayoutObject = $Kernel::OM->Get("Kernel::Output::HTML::Layout");
		215	+ my $ParamObject = $Kernel::OM->Get("Kernel::System::Web::Request");
		216	+
		217	+ my $QueueID = $ParamObject->GetParam( Param => "QueueID" );
		218	+
		219	+ if ( $Param{ServiceID} ) {
		220	+ %serviceForm = $ServiceFormObject->GetServiceFormForQueue( ServiceID => $Param{ServiceID}, QueueID => $QueueID );
		221	+ if (! $serviceForm{ServiceID}) {
		222	+ %serviceForm = $ServiceFormObject->GetServiceForm( ServiceID => $Param{ServiceID} );
		223	+ }
		224	+ }
		225	+
		226	+ return $LayoutObject->Attachment(
		227	+ ContentType => 'text/plain; charset=' . $LayoutObject->{Charset},
		228	+ Content => $serviceForm{CustomProps} \|\| "/**/",
		229	+ Type => 'inline',
		230	+ NoCache => 1,
		231	+ );
		232	+}
		233	+
		234	+
206	sub GetFormJSON {	235	sub GetFormJSON {
207	my ( $Self, %Param ) = @_;	236	my ( $Self, %Param ) = @_;
208	my %serviceForm;	237	my %serviceForm;
	@@ -7,7 +7,7 @@		@@ -7,7 +7,7 @@
7	# did not receive this file, see http://www.gnu.org/licenses/agpl.txt.	7	# did not receive this file, see http://www.gnu.org/licenses/agpl.txt.
8	# --	8	# --
9		9
10	-<div id="footerF" align="center" style="position: absolute; bottom: 10px; width: 100%; margin-top: 18px; margin-bottom: 8px;" class="noPrint">	10	+<div id="footerF" align="center" style="bottom: 10px; width: 100%; margin-top: 18px; margin-bottom: 8px;" class="noPrint">
11		11
12	<div style="font-size: 0px;">	12	<div style="font-size: 0px;">
13	<div style="height: 2px; width: 100%; background-image: url('/otrs-web/skins/Customer/default/images/queues-panel/separador.gif'); background-repeat: repeat-x; background-position: 0 50%;"></div>	13	<div style="height: 2px; width: 100%; background-image: url('/otrs-web/skins/Customer/default/images/queues-panel/separador.gif'); background-repeat: repeat-x; background-position: 0 50%;"></div>
	@@ -31,15 +31,21 @@		@@ -31,15 +31,21 @@
31	</div>	31	</div>
32	<div class="Clear"></div>	32	<div class="Clear"></div>
33		33
34	- <label for="Form">[% Translate("Form") \| html %]: </label>	34	+ <label for="FormUI">[% Translate("Form") \| html %]: </label>
35	<div class="Field">	35	<div class="Field">
36	- <textarea name="Form" id="Form" class="W50pc " rows="20">[% Data.Form \| html %]</textarea>	36	+
		37	+ <textarea name="Form" id="FormUI" style="width: 50%" class="W50pc " rows="20">[% Data.Form \| html %]</textarea>
		38	+ <button type="button" onclick='mostraEsconde("FormUI"); return false;'>Exibir JSON</button>
		39	+ <div id="jsonFormUIDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;"><div id="jsonForm"></div></div>
		40	+
37	</div>	41	</div>
38	<div class="Clear"></div>	42	<div class="Clear"></div>
39		43
40	<label for="Schema">[% Translate("Schema") \| html %]: </label>	44	<label for="Schema">[% Translate("Schema") \| html %]: </label>
41	<div class="Field">	45	<div class="Field">
42	<textarea name="Schema" id="Schema" class="W50pc " rows="20">[% Data.Schema \| html %]</textarea>	46	<textarea name="Schema" id="Schema" class="W50pc " rows="20">[% Data.Schema \| html %]</textarea>
		47	+ <button type="button" onclick='mostraEsconde("Schema"); return false;'>Exibir JSON</button>
		48	+ <div id="jsonSchemaDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;"><div id="jsonSchema"></div></div>
43	</div>	49	</div>
44	<div class="Clear"></div>	50	<div class="Clear"></div>
45		51
	@@ -49,6 +55,16 @@		@@ -49,6 +55,16 @@
49	</div>	55	</div>
50	<div class="Clear"></div>	56	<div class="Clear"></div>
51		57
		58	+ <label for="CustomProps">[% Translate("Custom Properties for basic schema. <BR/>S_xxxxx=yyyy => Schema<BR/>F_xxxxx=yyyy => Form") %]: </label>
		59	+ <div class="Field">
		60	+ <textarea name="CustomProps" id="CustomProps" class="W50pc " rows="20">[% Data.CustomProps \| html %]</textarea>
		61	+ <button type="button" onclick='mostraEsconde("CustomProps"); return false;'>Exibir JSON</button>
		62	+ <div id="jsonCustomPropsDlg" style="height: 300px; overflow: auto; border-style: solid; border-width: 1px;">
		63	+ <code class="chili-lang-javascript" id='jsCode'></code>
		64	+ </div>
		65	+ </div>
		66	+ <div class="Clear"></div>
		67	+
52	<div class="Field SpacingTop">	68	<div class="Field SpacingTop">
53	<button class="Primary" type="submit" value="[% Translate("Submit") \| html %]">[% Translate("Submit") \| html %]</button>	69	<button class="Primary" type="submit" value="[% Translate("Submit") \| html %]">[% Translate("Submit") \| html %]</button>
54	[% Translate("or") \| html %]	70	[% Translate("or") \| html %]
	@@ -59,3 +75,51 @@		@@ -59,3 +75,51 @@
59		75
60	</form>	76	</form>
61	</div>	77	</div>
		78	+
		79	+
		80	+<script type="text/javascript">
		81	+ function mostraEsconde(id) {
		82	+ idJSON = "#json" + id + "Dlg";
		83	+ id = "#" + id;
		84	+ $(idJSON).toggle();
		85	+ $(idJSON).width($(id).width());
		86	+ }
		87	+
		88	+</script>
		89	+
		90	+[% WRAPPER JSOnDocumentComplete %]
		91	+<script type="text/javascript">
		92	+
		93	+
		94	+ $("#jsonFormUIDlg").toggle();
		95	+ $("#jsonSchemaDlg").toggle();
		96	+ $("#jsonCustomPropsDlg").toggle();
		97	+
		98	+ setInterval(function() {
		99	+ var code = $("#CustomProps").val();
		100	+ $("#jsCode").html(code);
		101	+ $("#jsCode").chili();
		102	+ }, 1000);
		103	+
		104	+
		105	+ setInterval(function() {
		106	+ var json = "{" + $("#Schema").val() + "}";
		107	+ try {
		108	+ json = JSON.parse(json);
		109	+ $("#jsonSchema").JSONView(json);
		110	+ } catch(err) {
		111	+ $("#jsonSchema").JSONView({error: "Invalid JSON!"});
		112	+ }
		113	+ }, 1000);
		114	+
		115	+ setInterval(function() {
		116	+ var json = "{" + $("#FormUI").val() + "}";
		117	+ try {
		118	+ json = JSON.parse(json);
		119	+ $("#jsonForm").JSONView(json);
		120	+ } catch(err) {
		121	+ $("#jsonForm").JSONView({error: "Invalid JSON!"});
		122	+ }
		123	+ }, 1000);
		124	+</script>
		125	+[% END %]
62	\ No newline at end of file	126	\ No newline at end of file
	@@ -2,6 +2,7 @@		@@ -2,6 +2,7 @@
2	* Variables	2	* Variables
3	*/	3	*/
4	var formAlpaca;	4	var formAlpaca;
		5	+var activeQueue;
5		6
6		7
7	/**	8	/**
	@@ -79,7 +80,78 @@ var postRenderCallback = function(form) {		@@ -79,7 +80,78 @@ var postRenderCallback = function(form) {
79	return false;	80	return false;
80	});	81	});
81	}	82	}
		83	+
		84	+ carregaCustomProps(activeQueue);
		85	+};
		86	+
		87	+
		88	+var postRenderCallbackPublic = function(form) {
		89	+ formOptions = form.options.fields;
		90	+ formAlpaca = form;
		91	+
		92	+ Object.keys(formOptions).forEach(function (key) {
		93	+ var value = formOptions[key];
		94	+
		95	+ // Extension to set control width
		96	+ if (value["control_width"]) {
		97	+ $("[name='" + key + "']").width(value["control_width"]);
		98	+ }
		99	+ });
		100	+
		101	+ if (form) {
		102	+ $("[name='service']").val($("#ServiceID").val());
		103	+ $("[name='submit']").css("font-size", "18px");
		104	+
		105	+ form.form.registerSubmitHandler(function(e, form) {
		106	+ // validate the entire form (top control + all children)
		107	+ form.validate(true);
		108	+
		109	+ // draw the validation state (top control + all children)
		110	+ form.renderValidationState(true);
		111	+
		112	+ // now display something
		113	+ if (form.isFormValid()) {
		114	+ return true;
		115	+ } else {
		116	+ alert("Dados inválidos!");
		117	+ return false;
		118	+ }
		119	+ e.stopPropagation();
		120	+ return false;
		121	+ });
		122	+ }
		123	+
		124	+ carregaCustomPropsPublic(activeQueue);
82	};	125	};
		126	+
		127	+function carregaCustomPropsPublic(queue) {
		128	+ if (! queue) {
		129	+ queue = "";
		130	+ }
		131	+
		132	+ var url = "/otrs/public.pl?Action=NewTicketWizardPublic;Subaction=GetFormCustomProps" + queue;
		133	+
		134	+ url += ";ServiceID=" + $("#ServiceID").val();
		135	+
		136	+ $.getScript(url, function(data) {
		137	+ }).fail(function(jqXHR, textStatus, errorThrown) {
		138	+ alert(textStatus);
		139	+ });
		140	+}
		141	+
		142	+function carregaCustomProps(queue) {
		143	+ if (! queue) {
		144	+ queue = "";
		145	+ }
		146	+ var url = "/otrs/customer.pl?Action=NewTicketWizard;Subaction=GetFormCustomProps" + queue;
		147	+
		148	+ url += ";ServiceID=" + $("#ServiceID").val();
		149	+
		150	+ $.getScript(url, function(data) {
		151	+ }).fail(function(jqXHR, textStatus, errorThrown) {
		152	+ alert(textStatus);
		153	+ });
		154	+}
83		155
84	function carregaForm(dataForm, sendText, action, queue) {	156	function carregaForm(dataForm, sendText, action, queue) {
85	var url = "/otrs/customer.pl?Action=NewTicketWizard;Subaction=GetFormJSON" + queue;	157	var url = "/otrs/customer.pl?Action=NewTicketWizard;Subaction=GetFormJSON" + queue;
	@@ -88,6 +160,7 @@ function carregaForm(dataForm, sendText, action, queue) {		@@ -88,6 +160,7 @@ function carregaForm(dataForm, sendText, action, queue) {
88	formAlpaca.destroy();	160	formAlpaca.destroy();
89	}	161	}
90		162
		163	+ activeQueue = queue;
91	url += ";ServiceID=" + $("#ServiceID").val();	164	url += ";ServiceID=" + $("#ServiceID").val();
92		165
93	$.getJSON(url, function(data) {	166	$.getJSON(url, function(data) {
	@@ -109,9 +182,11 @@ function carregaForm(dataForm, sendText, action, queue) {		@@ -109,9 +182,11 @@ function carregaForm(dataForm, sendText, action, queue) {
109		182
110	$("[name='submit']").css("font-size", "18px");	183	$("[name='submit']").css("font-size", "18px");
111		184
		185	+
		186	+
112		187
113	}).fail(function(jqXHR, textStatus, errorThrown) {	188	}).fail(function(jqXHR, textStatus, errorThrown) {
114	- alert(textStatus);	189	+ alert("Erro ao recuperar: " + url + " => " + textStatus);
115	});	190	});
116	}	191	}
117		192
	@@ -143,6 +218,7 @@ function carregaFormPublic(dataForm, sendText, action, queue) {		@@ -143,6 +218,7 @@ function carregaFormPublic(dataForm, sendText, action, queue) {
143	//$("#formTicket").find("select").val("");	218	//$("#formTicket").find("select").val("");
144	}	219	}
145		220
		221	+ activeQueue = queue;
146	url += ";ServiceID=" + $("#ServiceID").val();	222	url += ";ServiceID=" + $("#ServiceID").val();
147		223
148	$.getJSON(url, function(data) {	224	$.getJSON(url, function(data) {
	@@ -154,14 +230,14 @@ function carregaFormPublic(dataForm, sendText, action, queue) {		@@ -154,14 +230,14 @@ function carregaFormPublic(dataForm, sendText, action, queue) {
154	"data": dataForm,	230	"data": dataForm,
155	"schema": buildSchema(data[0]),	231	"schema": buildSchema(data[0]),
156	"options": buildOptions(data[1], sendText, action),	232	"options": buildOptions(data[1], sendText, action),
157	- "postRender": postRenderCallback,	233	+ "postRender": postRenderCallbackPublic,
158	"view": "jqueryui-create",	234	"view": "jqueryui-create",
159	"ui": "jquery-ui"	235	"ui": "jquery-ui"
160	});	236	});
161		237
162		238
163	}).fail(function(jqXHR, textStatus, errorThrown) {	239	}).fail(function(jqXHR, textStatus, errorThrown) {
164	- alert(textStatus);	240	+ alert("Erro ao recuperar: " + url + " => " + textStatus);
165	});	241	});
166	}	242	}
167		243
	@@ -0,0 +1,65 @@		@@ -0,0 +1,65 @@
		1	+jQuery.chili.recipes.javascript =
		2	+{
		3	+ _name: 'js'
		4	+ , _case: true
		5	+ , _main: {
		6	+ ml_comment: {
		7	+ _match: /\/\[^]\+(?:[^\/][^]\+)\//
		8	+ , _style: 'color: gray;'
		9	+ }
		10	+ , sl_comment: {
		11	+ _match: /\/\/.*/
		12	+ , _style: 'color: green;'
		13	+ }
		14	+ , string: {
		15	+ _match: /(?:\'[^\'\\\n](?:\\.[^\'\\\n])\')\|(?:\"[^\"\\\n](?:\\.[^\"\\\n])\")/
		16	+ , _style: 'color: teal;'
		17	+ }
		18	+ , num: {
		19	+ _match: /\b[+-]?(?:\d\.?\d+\|\d+\.?\d)(?:[eE][+-]?\d+)?\b/
		20	+ , _style: 'color: red;'
		21	+ }
		22	+ , reg_not: { //this prevents "a / b / c" to be interpreted as a reg_exp
		23	+ _match: /(?:\w+\s)\/[^\/\\\n](?:\\.[^\/\\\n])\/[gim](?:\s\w+)/
		24	+ , _replace: function( all ) {
		25	+ return this.x( all, '//num' );
		26	+ }
		27	+ }
		28	+ , reg_exp: {
		29	+ _match: /\/[^\/\\\n](?:\\.[^\/\\\n])\/[gim]/
		30	+ , _style: 'color: maroon;'
		31	+ }
		32	+ , brace: {
		33	+ _match: /[\{\}]/
		34	+ , _style: 'color: red; font-weight: bold;'
		35	+ }
		36	+ , statement: {
		37	+ _match: /\b(with\|while\|var\|try\|throw\|switch\|return\|if\|for\|finally\|else\|do\|default\|continue\|const\|catch\|case\|break)\b/
		38	+ , _style: 'color: navy; font-weight: bold;'
		39	+ }
		40	+ , error: {
		41	+ _match: /\b(URIError\|TypeError\|SyntaxError\|ReferenceError\|RangeError\|EvalError\|Error)\b/
		42	+ , _style: 'color: Coral;'
		43	+ }
		44	+ , object: {
		45	+ _match: /\b(String\|RegExp\|Object\|Number\|Math\|Function\|Date\|Boolean\|Array)\b/
		46	+ , _style: 'color: DeepPink;'
		47	+ }
		48	+ , property: {
		49	+ _match: /\b(undefined\|arguments\|NaN\|Infinity)\b/
		50	+ , _style: 'color: Purple; font-weight: bold;'
		51	+ }
		52	+ , 'function': {
		53	+ _match: /\b(parseInt\|parseFloat\|isNaN\|isFinite\|eval\|encodeURIComponent\|encodeURI\|decodeURIComponent\|decodeURI)\b/
		54	+ , _style: 'color: olive;'
		55	+ }
		56	+ , operator: {
		57	+ _match: /\b(void\|typeof\|this\|new\|instanceof\|in\|function\|delete)\b/
		58	+ , _style: 'color: RoyalBlue; font-weight: bold;'
		59	+ }
		60	+ , liveconnect: {
		61	+ _match: /\b(sun\|netscape\|java\|Packages\|JavaPackage\|JavaObject\|JavaClass\|JavaArray\|JSObject\|JSException)\b/
		62	+ , _style: 'text-decoration: overline;'
		63	+ }
		64	+ }
		65	+};
0	\ No newline at end of file	66	\ No newline at end of file
@@ -0,0 +1,347 @@		@@ -0,0 +1,347 @@
	1	+jQuery.chili.options.dynamic.active = false;
	2	+
	3	+
	4	+
	5	+/* this recipe uses a little trick for highlighting php code
	6	+ * 1: replace each php snippet with a placeholder
	7	+ * 2: highlight html without php and php snippets apart
	8	+ * 3: replace each placeholder with its highlighted php snippet
	9	+ *
	10	+ * the trick is not perfect
	11	+ */
	12	+jQuery.chili.recipes.php =
	13	+{
	14	+ _name: "php"
	15	+ , _case: true
	16	+ , _main: {
	17	+ all: {
	18	+ _match: /[\w\W]*/
	19	+ , _replace: function( all ) {
	20	+ var placeholder = String.fromCharCode(0);
	21	+ var blocks = [];
	22	+ var that = this;
	23	+ var no_php_1 = all.replace( /<\?[^?]\?+(?:[^>][^?]\?+)*>/g, function( block ) {
	24	+ blocks.push( that.x( block, '/block/php_1' ) );
	25	+ return placeholder;
	26	+ } );
	27	+ var no_php_2 = no_php_1.replace( /^[^?]\?+(?:[^>][^?]\?+)>\|<\?[\w\W]$/g, function( block ) {
	28	+ blocks.push( that.x( block, '/block/php_2' ) );
	29	+ return placeholder;
	30	+ } );
	31	+ if( blocks.length ) {
	32	+ var html = this.x( no_php_2, 'html' );
	33	+ var count = 0;
	34	+ return html.replace( new RegExp( placeholder, "g" ), function() {
	35	+ return blocks[ count++ ];
	36	+ } );
	37	+ }
	38	+ else {
	39	+ return this.x( all, '/php' );
	40	+ }
	41	+ }
	42	+ }
	43	+ }
	44	+ , block: {
	45	+ php_1: { // --- <? +++ ?> ---
	46	+ _match: /(<\?(?:php\b)?)([^?]\?+(?:[^>][^?]\?+)*>)/
	47	+ , _replace: function( all, open, content ) {
	48	+ return "<span class='start'>" + this.x( open ) + "</span>"
	49	+ + this.x( content.replace( /\?>$/, '' ), '/php' )
	50	+ + "<span class='end'>" + this.x( '?>' ) + "</span>";
	51	+ }
	52	+ , _style: {
	53	+ start: "color: red; font-weight: bold"
	54	+ , end: "color: red;"
	55	+ }
	56	+ }
	57	+ , php_2: { // +++ ?> --- <? +++
	58	+ _match: /([^?]\?+(?:[^>][^?]\?+)>)\|(<\?(?:php\b)?)([\w\W])/
	59	+ , _replace: function( all, content, open2, content2 ) {
	60	+ if( open2 ) {
	61	+ return "<span class='start'>" + this.x( open2 ) + "</span>"
	62	+ + this.x( content2, '/php' );
	63	+ }
	64	+ else {
	65	+ return this.x( content.replace( /\?>$/, '' ), '/php' )
	66	+ + "<span class='end'>" + this.x( '?>' ) + "</span>";
	67	+ }
	68	+ }
	69	+ , _style: {
	70	+ start: "color: red; font-weight: bold"
	71	+ , end: "color: red;"
	72	+ }
	73	+ }
	74	+ }
	75	+ , php: {
	76	+ mlcom: {
	77	+ _match: /\/\[^]\+([^\/][^]\+)\//
	78	+ , _style: "color: gray;"
	79	+ }
	80	+ , com: {
	81	+ _match: /(?:\/\/.)\|(?:[^\\]\#.)/
	82	+ , _style: "color: green;"
	83	+ }
	84	+ , string1: {
	85	+ _match: /\'[^\'\\](?:\\.[^\'\\])*\'/
	86	+ , _style: "color: purple;"
	87	+ }
	88	+ , string2: {
	89	+ _match: /\"[^\"\\](?:\\.[^\"\\])*\"/
	90	+ , _style: "color: fuchsia;"
	91	+ }
	92	+ , value: {
	93	+ _match: /\b(?:[Nn][Uu][Ll][Ll]\|[Tt][Rr][Uu][Ee]\|[Ff][Aa][Ll][Ss][Ee])\b/
	94	+ , _style: "color: gray; font-weight: bold;"
	95	+ }
	96	+ , number: {
	97	+ _match: /\b[+-]?(\d\.?\d+\|\d+\.?\d)([eE][+-]?\d+)?\b/
	98	+ , _style: "color: red;"
	99	+ }
	100	+ , const1: {
	101	+ _match: /\b(?:DEFAULT_INCLUDE_PATH\|E_(?:ALL\|CO(?:MPILE_(?:ERROR\|WARNING)\|RE_(?:ERROR\|WARNING))\|ERROR\|NOTICE\|PARSE\|STRICT\|USER_(?:ERROR\|NOTICE\|WARNING)\|WARNING)\|P(?:EAR_(?:EXTENSION_DIR\|INSTALL_DIR)\|HP_(?:BINDIR\|CONFIG_FILE_(?:PATH\|SCAN_DIR)\|DATADIR\|E(?:OL\|XTENSION_DIR)\|INT_(?:MAX\|SIZE)\|L(?:IBDIR\|OCALSTATEDIR)\|O(?:S\|UTPUT_HANDLER_(?:CONT\|END\|START))\|PREFIX\|S(?:API\|HLIB_SUFFIX\|YSCONFDIR)\|VERSION))\|__COMPILER_HALT_OFFSET__)\b/
	102	+ , _style: "color: red;"
	103	+ }
	104	+ , const2: {
	105	+ _match: /\b(?:A(?:B(?:DAY_(?:1\|2\|3\|4\|5\|6\|7)\|MON_(?:1(?:0\|1\|2\|)\|2\|3\|4\|5\|6\|7\|8\|9))\|LT_DIGITS\|M_STR\|SSERT_(?:ACTIVE\|BAIL\|CALLBACK\|QUIET_EVAL\|WARNING))\|C(?:ASE_(?:LOWER\|UPPER)\|HAR_MAX\|O(?:DESET\|NNECTION_(?:ABORTED\|NORMAL\|TIMEOUT)\|UNT_(?:NORMAL\|RECURSIVE))\|R(?:EDITS_(?:ALL\|DOCS\|FULLPAGE\|G(?:ENERAL\|ROUP)\|MODULES\|QA\|SAPI)\|NCYSTR\|YPT_(?:BLOWFISH\|EXT_DES\|MD5\|S(?:ALT_LENGTH\|TD_DES)))\|URRENCY_SYMBOL)\|D(?:AY_(?:1\|2\|3\|4\|5\|6\|7)\|ECIMAL_POINT\|IRECTORY_SEPARATOR\|_(?:FMT\|T_FMT))\|E(?:NT_(?:COMPAT\|NOQUOTES\|QUOTES)\|RA(?:_(?:D_(?:FMT\|T_FMT)\|T_FMT\|YEAR)\|)\|XTR_(?:IF_EXISTS\|OVERWRITE\|PREFIX_(?:ALL\|I(?:F_EXISTS\|NVALID)\|SAME)\|SKIP))\|FRAC_DIGITS\|GROUPING\|HTML_(?:ENTITIES\|SPECIALCHARS)\|IN(?:FO_(?:ALL\|C(?:ONFIGURATION\|REDITS)\|ENVIRONMENT\|GENERAL\|LICENSE\|MODULES\|VARIABLES)\|I_(?:ALL\|PERDIR\|SYSTEM\|USER)\|T_(?:CURR_SYMBOL\|FRAC_DIGITS))\|L(?:C_(?:ALL\|C(?:OLLATE\|TYPE)\|M(?:ESSAGES\|ONETARY)\|NUMERIC\|TIME)\|O(?:CK_(?:EX\|NB\|SH\|UN)\|G_(?:A(?:LERT\|UTH(?:PRIV\|))\|C(?:ONS\|R(?:IT\|ON))\|D(?:AEMON\|EBUG)\|E(?:MERG\|RR)\|INFO\|KERN\|L(?:OCAL(?:0\|1\|2\|3\|4\|5\|6\|7)\|PR)\|MAIL\|N(?:DELAY\|EWS\|O(?:TICE\|WAIT))\|ODELAY\|P(?:ERROR\|ID)\|SYSLOG\|U(?:SER\|UCP)\|WARNING)))\|M(?:ON_(?:1(?:0\|1\|2\|)\|2\|3\|4\|5\|6\|7\|8\|9\|DECIMAL_POINT\|GROUPING\|THOUSANDS_SEP)\|_(?:1_PI\|2_(?:PI\|SQRTPI)\|E\|L(?:N(?:10\|2)\|OG(?:10E\|2E))\|PI(?:_(?:2\|4)\|)\|SQRT(?:1_2\|2)))\|N(?:EGATIVE_SIGN\|O(?:EXPR\|STR)\|_(?:CS_PRECEDES\|S(?:EP_BY_SPACE\|IGN_POSN)))\|P(?:ATH(?:INFO_(?:BASENAME\|DIRNAME\|EXTENSION)\|_SEPARATOR)\|M_STR\|OSITIVE_SIGN\|_(?:CS_PRECEDES\|S(?:EP_BY_SPACE\|IGN_POSN)))\|RADIXCHAR\|S(?:EEK_(?:CUR\|END\|SET)\|ORT_(?:ASC\|DESC\|NUMERIC\|REGULAR\|STRING)\|TR_PAD_(?:BOTH\|LEFT\|RIGHT))\|T(?:HOUS(?:ANDS_SEP\|EP)\|_FMT(?:_AMPM\|))\|YES(?:EXPR\|STR))\b/
	106	+ , _style: "color: red;"
	107	+ }
	108	+ , global: {
	109	+ _match: /(?:\$GLOBALS\|\$_COOKIE\|\$_ENV\|\$_FILES\|\$_GET\|\$_POST\|\$_REQUEST\|\$_SERVER\|\$_SESSION\|\$php_errormsg)\b/
	110	+ , _style: "color: red;"
	111	+ }
	112	+ , keyword: {
	113	+ _match: /\b(?:__CLASS__\|__FILE__\|__FUNCTION__\|__LINE__\|__METHOD__\|abstract\|and\|array\|as\|break\|case\|catch\|cfunction\|class\|clone\|const\|continue\|declare\|default\|die\|do\|echo\|else\|elseif\|empty\|enddeclare\|endfor\|endforeach\|endif\|endswitch\|endwhile\|eval\|exception\|exit\|extends\|extends\|final\|for\|foreach\|function\|global\|if\|implements\|include\|include_once\|interface\|isset\|list\|new\|old_function\|or\|php_user_filter\|print\|private\|protected\|public\|require\|require_once\|return\|static\|switch\|this\|throw\|try\|unset\|use\|var\|while\|xor)\b/
	114	+ , _style: "color: navy; font-weight: bold;"
	115	+ }
	116	+ , variable: {
	117	+ _match: /\$(\w+)/
	118	+ , _replace: '<span class="keyword">$</span><span class="variable">$1</span>'
	119	+ , _style: "color: #4040c2;"
	120	+ }
	121	+ , heredoc: {
	122	+ _match: /(\<\<\<\s)(\w+)((?:(?!\2).\n)+)(\2)\b/
	123	+ , _replace: '<span class="keyword">$1</span><span class="string1">$2</span><span class="string2">$3</span><span class="string1">$4</span>'
	124	+ }
	125	+ }
	126	+};
	127	+
	128	+
	129	+
	130	+jQuery.chili.recipes.html =
	131	+{
	132	+ _name: 'html'
	133	+ , _case: false
	134	+ , _main: {
	135	+ doctype: {
	136	+ _match: /<!DOCTYPE\b[\w\W]*?>/
	137	+ , _style: "color: #CC6600;"
	138	+ }
	139	+ , ie_style: {
	140	+ _match: /(<!--\[[^\]]\]>)([\w\W]?)(<!\[[^\]]*\]-->)/
	141	+ , _replace: function( all, open, content, close ) {
	142	+ return "<span class='ie_style'>" + this.x( open ) + "</span>"
	143	+ + this.x( content, '//style' )
	144	+ + "<span class='ie_style'>" + this.x( close ) + "</span>";
	145	+ }
	146	+ , _style: "color: DarkSlateGray; font-weight: bold;"
	147	+ }
	148	+ , comment: {
	149	+ _match: /<!--[\w\W]*?-->/
	150	+ , _style: "color: #4040c2;"
	151	+ }
	152	+ , script: {
	153	+ _match: /(<script\s+[^>]>)([\w\W]?)(<\/script\s*>)/
	154	+ , _replace: function( all, open, content, close ) {
	155	+ return this.x( open, '//tag_start' )
	156	+ + this.x( content, 'javascript' )
	157	+ + this.x( close, '//tag_end' );
	158	+ }
	159	+ }
	160	+ , style: {
	161	+ _match: /(<style\s+[^>]>)([\w\W]?)(<\/style\s*>)/
	162	+ , _replace: function( all, open, content, close ) {
	163	+ return this.x( open, '//tag_start' )
	164	+ + this.x( content, 'css' )
	165	+ + this.x( close, '//tag_end' );
	166	+ }
	167	+ }
	168	+ // matches a starting tag of an element (with attrs)
	169	+ // like "<div ... >" or "<img ... />"
	170	+ , tag_start: {
	171	+ _match: /(<\w+)((?:[?%]>\|[\w\W])*?)(\/>\|>)/
	172	+ , _replace: function( all, open, content, close ) {
	173	+ return "<span class='tag_start'>" + this.x( open ) + "</span>"
	174	+ + this.x( content, '/tag_attrs' )
	175	+ + "<span class='tag_start'>" + this.x( close ) + "</span>";
	176	+ }
	177	+ , _style: "color: navy; font-weight: bold;"
	178	+ }
	179	+ // matches an ending tag
	180	+ // like "</div>"
	181	+ , tag_end: {
	182	+ _match: /<\/\w+\s*>\|\/>/
	183	+ , _style: "color: navy;"
	184	+ }
	185	+ , entity: {
	186	+ _match: /&\w+?;/
	187	+ , _style: "color: blue;"
	188	+ }
	189	+ }
	190	+ , tag_attrs: {
	191	+ // matches a name/value pair
	192	+ attr: {
	193	+ // before in $1, name in $2, between in $3, value in $4
	194	+ _match: /(\W?)([\w-]+)(\s=\s)((?:\'[^\'](?:\\.[^\'])\')\|(?:\"[^\"](?:\\.[^\"])*\"))/
	195	+ , _replace: "$1<span class='attr_name'>$2</span>$3<span class='attr_value'>$4</span>"
	196	+ , _style: { attr_name: "color: green;", attr_value: "color: maroon;" }
	197	+ }
	198	+ }
	199	+};
	200	+
	201	+
	202	+
	203	+jQuery.chili.recipes.javascript =
	204	+{
	205	+ _name: 'js'
	206	+ , _case: true
	207	+ , _main: {
	208	+ ml_comment: {
	209	+ _match: /\/\[^]\+(?:[^\/][^]\+)\//
	210	+ , _style: 'color: gray;'
	211	+ }
	212	+ , sl_comment: {
	213	+ _match: /\/\/.*/
	214	+ , _style: 'color: green;'
	215	+ }
	216	+ , string: {
	217	+ _match: /(?:\'[^\'\\\n](?:\\.[^\'\\\n])\')\|(?:\"[^\"\\\n](?:\\.[^\"\\\n])\")/
	218	+ , _style: 'color: teal;'
	219	+ }
	220	+ , num: {
	221	+ _match: /\b[+-]?(?:\d\.?\d+\|\d+\.?\d)(?:[eE][+-]?\d+)?\b/
	222	+ , _style: 'color: red;'
	223	+ }
	224	+ , reg_not: { //this prevents "a / b / c" to be interpreted as a reg_exp
	225	+ _match: /(?:\w+\s)\/[^\/\\\n](?:\\.[^\/\\\n])\/[gim](?:\s\w+)/
	226	+ , _replace: function( all ) {
	227	+ return this.x( all, '//num' );
	228	+ }
	229	+ }
	230	+ , reg_exp: {
	231	+ _match: /\/[^\/\\\n](?:\\.[^\/\\\n])\/[gim]/
	232	+ , _style: 'color: maroon;'
	233	+ }
	234	+ , brace: {
	235	+ _match: /[\{\}]/
	236	+ , _style: 'color: red; font-weight: bold;'
	237	+ }
	238	+ , statement: {
	239	+ _match: /\b(with\|while\|var\|try\|throw\|switch\|return\|if\|for\|finally\|else\|do\|default\|continue\|const\|catch\|case\|break)\b/
	240	+ , _style: 'color: navy; font-weight: bold;'
	241	+ }
	242	+ , error: {
	243	+ _match: /\b(URIError\|TypeError\|SyntaxError\|ReferenceError\|RangeError\|EvalError\|Error)\b/
	244	+ , _style: 'color: Coral;'
	245	+ }
	246	+ , object: {
	247	+ _match: /\b(String\|RegExp\|Object\|Number\|Math\|Function\|Date\|Boolean\|Array)\b/
	248	+ , _style: 'color: DeepPink;'
	249	+ }
	250	+ , property: {
	251	+ _match: /\b(undefined\|arguments\|NaN\|Infinity)\b/
	252	+ , _style: 'color: Purple; font-weight: bold;'
	253	+ }
	254	+ , 'function': {
	255	+ _match: /\b(parseInt\|parseFloat\|isNaN\|isFinite\|eval\|encodeURIComponent\|encodeURI\|decodeURIComponent\|decodeURI)\b/
	256	+ , _style: 'color: olive;'
	257	+ }
	258	+ , operator: {
	259	+ _match: /\b(void\|typeof\|this\|new\|instanceof\|in\|function\|delete)\b/
	260	+ , _style: 'color: RoyalBlue; font-weight: bold;'
	261	+ }
	262	+ , liveconnect: {
	263	+ _match: /\b(sun\|netscape\|java\|Packages\|JavaPackage\|JavaObject\|JavaClass\|JavaArray\|JSObject\|JSException)\b/
	264	+ , _style: 'text-decoration: overline;'
	265	+ }
	266	+ }
	267	+};
	268	+
	269	+
	270	+
	271	+jQuery.chili.recipes.css =
	272	+{
	273	+ _name: 'css'
	274	+ , _case: true
	275	+ , _main: {
	276	+ comment: {
	277	+ _match: /\/\[^]\+(?:[^\/][^]\+)\//
	278	+ , _style: "color: olive;"
	279	+ }
	280	+ , directive: {
	281	+ _match: /@\w+/
	282	+ , _style: "color: fuchsia;"
	283	+ }
	284	+ , url: {
	285	+ _match: /\b(url\s*\()([^)]+)(\))/
	286	+ , _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
	287	+ , _style: "color: fuchsia;"
	288	+ }
	289	+ , block: {
	290	+ _match: /\{([\w\W]*?)\}/
	291	+ , _replace: function( all, pairs ) {
	292	+ return '{' + this.x( pairs, '/definition' ) + '}';
	293	+ }
	294	+ }
	295	+ , 'class': {
	296	+ _match: /\.\w+/
	297	+ , _style: "color: #CC0066; font-weight: bold;"
	298	+ }
	299	+ , id: {
	300	+ _match: /#\w+/
	301	+ , _style: "color: IndianRed; font-weight: bold;"
	302	+ }
	303	+ , pseudo: {
	304	+ _match: /:\w+/
	305	+ , _style: "color: #CC9900;"
	306	+ }
	307	+ , element: {
	308	+ _match: /\w+/
	309	+ , _style: "color: Purple; font-weight: bold;"
	310	+ }
	311	+ }
	312	+ , definition: {
	313	+ comment: {
	314	+ _match: /\/\[^]\+(?:[^\/][^]\+)\//
	315	+ }
	316	+ , property: {
	317	+ _match: /\b(?:zoom\|z-index\|writing-mode\|word-wrap\|word-spacing\|word-break\|width\|widows\|white-space\|volume\|voice-family\|visibility\|vertical-align\|unicode-bidi\|top\|text-underline-position\|text-transform\|text-shadow\|text-overflow\|text-kashida-space\|text-justify\|text-indent\|text-decoration\|text-autospace\|text-align-last\|text-align\|table-layout\|stress\|speech-rate\|speak-punctuation\|speak-numeral\|speak-header\|speak\|size\|scrollbar-track-color\|scrollbar-shadow-color\|scrollbar-highlight-color\|scrollbar-face-color\|scrollbar-dark-shadow-color\|scrollbar-base-color\|scrollbar-arrow-color\|scrollbar-3d-light-color\|ruby-position\|ruby-overhang\|ruby-align\|right\|richness\|quotes\|position\|play-during\|pitch-range\|pitch\|pause-before\|pause-after\|pause\|page-break-inside\|page-break-before\|page-break-after\|page\|padding-top\|padding-right\|padding-left\|padding-bottom\|padding\|overflow-Y\|overflow-X\|overflow\|outline-width\|outline-style\|outline-color\|outline\|orphans\|min-width\|min-height\|max-width\|max-height\|marks\|marker-offset\|margin-top\|margin-right\|margin-left\|margin-bottom\|margin\|list-style-type\|list-style-position\|list-style-image\|list-style\|line-height\|line-break\|letter-spacing\|left\|layout-grid-type\|layout-grid-mode\|layout-grid-line\|layout-grid-char-spacing\|layout-grid-char\|layout-grid\|layout-flow\|layer-background-image\|layer-background-color\|include-source\|ime-mode\|height\|font-weight\|font-variant\|font-style\|font-stretch\|font-size-adjust\|font-size\|font-family\|font\|float\|filter\|empty-cells\|elevation\|display\|direction\|cursor\|cue-before\|cue-after\|cue\|counter-reset\|counter-increment\|content\|color\|clip\|clear\|caption-side\|bottom\|border-width\|border-top-width\|border-top-style\|border-top-color\|border-top\|border-style\|border-spacing\|border-right-width\|border-right-style\|border-right-color\|border-right\|border-left-width\|border-left-style\|border-left-color\|border-left\|border-color\|border-collapse\|border-bottom-width\|border-bottom-style\|border-bottom-color\|border-bottom\|border\|behavior\|background-repeat\|background-position-y\|background-position-x\|background-position\|background-image\|background-color\|background-attachment\|background\|azimuth\|accelerator)\s*:/
	318	+ , _style: "color: #330066;"
	319	+ }
	320	+ , special: {
	321	+ _match: /\b(?:-use-link-source\|-set-link-source\|-replace\|-moz-user-select\|-moz-user-modify\|-moz-user-input\|-moz-user-focus\|-moz-outline-width\|-moz-outline-style\|-moz-outline-color\|-moz-outline\|-moz-opacity\|-moz-border-top-colors\|-moz-border-right-colors\|-moz-border-radius-topright\|-moz-border-radius-topleft\|-moz-border-radius-bottomright\|-moz-border-radius-bottomleft\|-moz-border-radius\|-moz-border-left-colors\|-moz-border-bottom-colors\|-moz-binding)\s*:/
	322	+ , _style: "color: #330066; text-decoration: underline;"
	323	+ }
	324	+ , url: {
	325	+ _match: /\b(url\s*\()([^)]+)(\))/
	326	+ , _replace: "<span class='url'>$1</span>$2<span class='url'>$3</span>"
	327	+ }
	328	+ , value: {
	329	+ _match: /\b(?:xx-small\|xx-large\|x-soft\|x-small\|x-slow\|x-low\|x-loud\|x-large\|x-high\|x-fast\|wider\|wait\|w-resize\|visible\|url\|uppercase\|upper-roman\|upper-latin\|upper-alpha\|underline\|ultra-expanded\|ultra-condensed\|tv\|tty\|transparent\|top\|thin\|thick\|text-top\|text-bottom\|table-row-group\|table-row\|table-header-group\|table-footer-group\|table-column-group\|table-column\|table-cell\|table-caption\|sw-resize\|super\|sub\|status-bar\|static\|square\|spell-out\|speech\|solid\|soft\|smaller\|small-caption\|small-caps\|small\|slower\|slow\|silent\|show\|separate\|semi-expanded\|semi-condensed\|se-resize\|scroll\|screen\|s-resize\|run-in\|rtl\|rightwards\|right-side\|right\|ridge\|rgb\|repeat-y\|repeat-x\|repeat\|relative\|projection\|print\|pre\|portrait\|pointer\|overline\|outside\|outset\|open-quote\|once\|oblique\|nw-resize\|nowrap\|normal\|none\|no-repeat\|no-open-quote\|no-close-quote\|ne-resize\|narrower\|n-resize\|move\|mix\|middle\|message-box\|medium\|marker\|ltr\|lowercase\|lower-roman\|lower-latin\|lower-greek\|lower-alpha\|lower\|low\|loud\|local\|list-item\|line-through\|lighter\|level\|leftwards\|left-side\|left\|larger\|large\|landscape\|justify\|italic\|invert\|inside\|inset\|inline-table\|inline\|icon\|higher\|high\|hide\|hidden\|help\|hebrew\|handheld\|groove\|format\|fixed\|faster\|fast\|far-right\|far-left\|fantasy\|extra-expanded\|extra-condensed\|expanded\|embossed\|embed\|e-resize\|double\|dotted\|disc\|digits\|default\|decimal-leading-zero\|decimal\|dashed\|cursive\|crosshair\|cross\|crop\|counters\|counter\|continuous\|condensed\|compact\|collapse\|code\|close-quote\|circle\|center-right\|center-left\|center\|caption\|capitalize\|braille\|bottom\|both\|bolder\|bold\|block\|blink\|bidi-override\|below\|behind\|baseline\|avoid\|auto\|aural\|attr\|armenian\|always\|all\|absolute\|above)\b/
	330	+ , _style: "color: #3366FF;"
	331	+ }
	332	+ , string: {
	333	+ _match: /(?:\'[^\'\\\n](?:\\.[^\'\\\n])\')\|(?:\"[^\"\\\n](?:\\.[^\"\\\n])\")/
	334	+ , _style: "color: teal;"
	335	+ }
	336	+ , number: {
	337	+ _match: /(?:\b[+-]?(?:\d\.?\d+\|\d+\.?\d))(?:%\|(?:(?:px\|pt\|em\|)\b))/
	338	+ , _style: "color: red;"
	339	+ }
	340	+ , color : {
	341	+ _match: /(?:\#[a-fA-F0-9]{3,6})\|\b(?:yellow\|white\|teal\|silver\|red\|purple\|olive\|navy\|maroon\|lime\|green\|gray\|fuchsia\|blue\|black\|aqua\|YellowGreen\|Yellow\|WhiteSmoke\|White\|Wheat\|Violet\|Turquoise\|Tomato\|Thistle\|Teal\|Tan\|SteelBlue\|SpringGreen\|Snow\|SlateGrey\|SlateGray\|SlateBlue\|SkyBlue\|Silver\|Sienna\|SeaShell\|SeaGreen\|SandyBrown\|Salmon\|SaddleBrown\|RoyalBlue\|RosyBrown\|Red\|Purple\|PowderBlue\|Plum\|Pink\|Peru\|PeachPuff\|PapayaWhip\|PaleVioletRed\|PaleTurquoise\|PaleGreen\|PaleGoldenRod\|Orchid\|OrangeRed\|Orange\|OliveDrab\|Olive\|OldLace\|Navy\|NavajoWhite\|Moccasin\|MistyRose\|MintCream\|MidnightBlue\|MediumVioletRed\|MediumTurquoise\|MediumSpringGreen\|MediumSlateBlue\|MediumSeaGreen\|MediumPurple\|MediumOrchid\|MediumBlue\|MediumAquaMarine\|Maroon\|Magenta\|Linen\|LimeGreen\|Lime\|LightYellow\|LightSteelBlue\|LightSlateGrey\|LightSlateGray\|LightSkyBlue\|LightSeaGreen\|LightSalmon\|LightPink\|LightGrey\|LightGreen\|LightGray\|LightGoldenRodYellow\|LightCyan\|LightCoral\|LightBlue\|LemonChiffon\|LawnGreen\|LavenderBlush\|Lavender\|Khaki\|Ivory\|Indigo\|IndianRed\|HotPink\|HoneyDew\|Grey\|GreenYellow\|Green\|Gray\|GoldenRod\|Gold\|GhostWhite\|Gainsboro\|Fuchsia\|ForestGreen\|FloralWhite\|FireBrick\|DodgerBlue\|DimGrey\|DimGray\|DeepSkyBlue\|DeepPink\|Darkorange\|DarkViolet\|DarkTurquoise\|DarkSlateGrey\|DarkSlateGray\|DarkSlateBlue\|DarkSeaGreen\|DarkSalmon\|DarkRed\|DarkOrchid\|DarkOliveGreen\|DarkMagenta\|DarkKhaki\|DarkGrey\|DarkGreen\|DarkGray\|DarkGoldenRod\|DarkCyan\|DarkBlue\|Cyan\|Crimson\|Cornsilk\|CornflowerBlue\|Coral\|Chocolate\|Chartreuse\|CadetBlue\|BurlyWood\|Brown\|BlueViolet\|Blue\|BlanchedAlmond\|Black\|Bisque\|Beige\|Azure\|Aquamarine\|Aqua\|AntiqueWhite\|AliceBlue)\b/
	342	+ , _style: "color: green;"
	343	+ }
	344	+ }
	345	+};
	346	+
	347	+
@@ -0,0 +1,284 @@		@@ -0,0 +1,284 @@
	1	+
	2	+/*!
	3	+jQuery JSONView.
	4	+Licensed under the MIT License.
	5	+ */
	6	+(function(jQuery) {
	7	+ var $, Collapser, JSONFormatter, JSONView;
	8	+ JSONFormatter = (function() {
	9	+ function JSONFormatter(options) {
	10	+ if (options == null) {
	11	+ options = {};
	12	+ }
	13	+ this.options = options;
	14	+ }
	15	+
	16	+ JSONFormatter.prototype.htmlEncode = function(html) {
	17	+ if (html !== null) {
	18	+ return html.toString().replace(/&/g, "&").replace(/"/g, """).replace(/</g, "<").replace(/>/g, ">");
	19	+ } else {
	20	+ return '';
	21	+ }
	22	+ };
	23	+
	24	+ JSONFormatter.prototype.jsString = function(s) {
	25	+ s = JSON.stringify(s).slice(1, -1);
	26	+ return this.htmlEncode(s);
	27	+ };
	28	+
	29	+ JSONFormatter.prototype.decorateWithSpan = function(value, className) {
	30	+ return "<span class=\"" + className + "\">" + (this.htmlEncode(value)) + "</span>";
	31	+ };
	32	+
	33	+ JSONFormatter.prototype.valueToHTML = function(value, level) {
	34	+ var valueType;
	35	+ if (level == null) {
	36	+ level = 0;
	37	+ }
	38	+ valueType = Object.prototype.toString.call(value).match(/\s(.+)]/)[1].toLowerCase();
	39	+ return this["" + valueType + "ToHTML"].call(this, value, level);
	40	+ };
	41	+
	42	+ JSONFormatter.prototype.nullToHTML = function(value) {
	43	+ return this.decorateWithSpan('null', 'null');
	44	+ };
	45	+
	46	+ JSONFormatter.prototype.numberToHTML = function(value) {
	47	+ return this.decorateWithSpan(value, 'num');
	48	+ };
	49	+
	50	+ JSONFormatter.prototype.stringToHTML = function(value) {
	51	+ var multilineClass, newLinePattern;
	52	+ if (/^(http\|https\|file):\/\/[^\s]+$/i.test(value)) {
	53	+ return "<a href=\"" + (this.htmlEncode(value)) + "\"><span class=\"q\">\"</span>" + (this.jsString(value)) + "<span class=\"q\">\"</span></a>";
	54	+ } else {
	55	+ multilineClass = '';
	56	+ value = this.jsString(value);
	57	+ if (this.options.nl2br) {
	58	+ newLinePattern = /([^>\\r\\n]?)(\\r\\n\|\\n\\r\|\\r\|\\n)/g;
	59	+ if (newLinePattern.test(value)) {
	60	+ multilineClass = ' multiline';
	61	+ value = (value + '').replace(newLinePattern, '$1' + '<br />');
	62	+ }
	63	+ }
	64	+ return "<span class=\"string" + multilineClass + "\">\"" + value + "\"</span>";
	65	+ }
	66	+ };
	67	+
	68	+ JSONFormatter.prototype.booleanToHTML = function(value) {
	69	+ return this.decorateWithSpan(value, 'bool');
	70	+ };
	71	+
	72	+ JSONFormatter.prototype.arrayToHTML = function(array, level) {
	73	+ var collapsible, hasContents, index, numProps, output, value, _i, _len;
	74	+ if (level == null) {
	75	+ level = 0;
	76	+ }
	77	+ hasContents = false;
	78	+ output = '';
	79	+ numProps = array.length;
	80	+ for (index = _i = 0, _len = array.length; _i < _len; index = ++_i) {
	81	+ value = array[index];
	82	+ hasContents = true;
	83	+ output += '<li>' + this.valueToHTML(value, level + 1);
	84	+ if (numProps > 1) {
	85	+ output += ',';
	86	+ }
	87	+ output += '</li>';
	88	+ numProps--;
	89	+ }
	90	+ if (hasContents) {
	91	+ collapsible = level === 0 ? '' : ' collapsible';
	92	+ return "[<ul class=\"array level" + level + collapsible + "\">" + output + "</ul>]";
	93	+ } else {
	94	+ return '[ ]';
	95	+ }
	96	+ };
	97	+
	98	+ JSONFormatter.prototype.objectToHTML = function(object, level) {
	99	+ var collapsible, hasContents, key, numProps, output, prop, value;
	100	+ if (level == null) {
	101	+ level = 0;
	102	+ }
	103	+ hasContents = false;
	104	+ output = '';
	105	+ numProps = 0;
	106	+ for (prop in object) {
	107	+ numProps++;
	108	+ }
	109	+ for (prop in object) {
	110	+ value = object[prop];
	111	+ hasContents = true;
	112	+ key = this.options.escape ? this.jsString(prop) : prop;
	113	+ output += "<li><span class=\"prop\"><span class=\"q\">\"</span>" + key + "<span class=\"q\">\"</span></span>: " + (this.valueToHTML(value, level + 1));
	114	+ if (numProps > 1) {
	115	+ output += ',';
	116	+ }
	117	+ output += '</li>';
	118	+ numProps--;
	119	+ }
	120	+ if (hasContents) {
	121	+ collapsible = level === 0 ? '' : ' collapsible';
	122	+ return "{<ul class=\"obj level" + level + collapsible + "\">" + output + "</ul>}";
	123	+ } else {
	124	+ return '{ }';
	125	+ }
	126	+ };
	127	+
	128	+ JSONFormatter.prototype.jsonToHTML = function(json) {
	129	+ return "<div class=\"jsonview\">" + (this.valueToHTML(json)) + "</div>";
	130	+ };
	131	+
	132	+ return JSONFormatter;
	133	+
	134	+ })();
	135	+ (typeof module !== "undefined" && module !== null) && (module.exports = JSONFormatter);
	136	+ Collapser = (function() {
	137	+ function Collapser() {}
	138	+
	139	+ Collapser.bindEvent = function(item, options) {
	140	+ var collapser;
	141	+ collapser = document.createElement('div');
	142	+ collapser.className = 'collapser';
	143	+ collapser.innerHTML = options.collapsed ? '+' : '-';
	144	+ collapser.addEventListener('click', (function(_this) {
	145	+ return function(event) {
	146	+ return _this.toggle(event.target, options);
	147	+ };
	148	+ })(this));
	149	+ item.insertBefore(collapser, item.firstChild);
	150	+ if (options.collapsed) {
	151	+ return this.collapse(collapser);
	152	+ }
	153	+ };
	154	+
	155	+ Collapser.expand = function(collapser) {
	156	+ var ellipsis, target;
	157	+ target = this.collapseTarget(collapser);
	158	+ if (target.style.display === '') {
	159	+ return;
	160	+ }
	161	+ ellipsis = target.parentNode.getElementsByClassName('ellipsis')[0];
	162	+ target.parentNode.removeChild(ellipsis);
	163	+ target.style.display = '';
	164	+ return collapser.innerHTML = '-';
	165	+ };
	166	+
	167	+ Collapser.collapse = function(collapser) {
	168	+ var ellipsis, target;
	169	+ target = this.collapseTarget(collapser);
	170	+ if (target.style.display === 'none') {
	171	+ return;
	172	+ }
	173	+ target.style.display = 'none';
	174	+ ellipsis = document.createElement('span');
	175	+ ellipsis.className = 'ellipsis';
	176	+ ellipsis.innerHTML = ' … ';
	177	+ target.parentNode.insertBefore(ellipsis, target);
	178	+ return collapser.innerHTML = '+';
	179	+ };
	180	+
	181	+ Collapser.toggle = function(collapser, options) {
	182	+ var action, collapsers, target, _i, _len, _results;
	183	+ if (options == null) {
	184	+ options = {};
	185	+ }
	186	+ target = this.collapseTarget(collapser);
	187	+ action = target.style.display === 'none' ? 'expand' : 'collapse';
	188	+ if (options.recursive_collapser) {
	189	+ collapsers = collapser.parentNode.getElementsByClassName('collapser');
	190	+ _results = [];
	191	+ for (_i = 0, _len = collapsers.length; _i < _len; _i++) {
	192	+ collapser = collapsers[_i];
	193	+ _results.push(this[action](collapser));
	194	+ }
	195	+ return _results;
	196	+ } else {
	197	+ return this[action](collapser);
	198	+ }
	199	+ };
	200	+
	201	+ Collapser.collapseTarget = function(collapser) {
	202	+ var target, targets;
	203	+ targets = collapser.parentNode.getElementsByClassName('collapsible');
	204	+ if (!targets.length) {
	205	+ return;
	206	+ }
	207	+ return target = targets[0];
	208	+ };
	209	+
	210	+ return Collapser;
	211	+
	212	+ })();
	213	+ $ = jQuery;
	214	+ JSONView = {
	215	+ collapse: function(el) {
	216	+ if (el.innerHTML === '-') {
	217	+ return Collapser.collapse(el);
	218	+ }
	219	+ },
	220	+ expand: function(el) {
	221	+ if (el.innerHTML === '+') {
	222	+ return Collapser.expand(el);
	223	+ }
	224	+ },
	225	+ toggle: function(el) {
	226	+ return Collapser.toggle(el);
	227	+ }
	228	+ };
	229	+ return $.fn.JSONView = function() {
	230	+ var args, defaultOptions, formatter, json, method, options, outputDoc;
	231	+ args = arguments;
	232	+ if (JSONView[args[0]] != null) {
	233	+ method = args[0];
	234	+ return this.each(function() {
	235	+ var $this, level;
	236	+ $this = $(this);
	237	+ if (args[1] != null) {
	238	+ level = args[1];
	239	+ return $this.find(".jsonview .collapsible.level" + level).siblings('.collapser').each(function() {
	240	+ return JSONView[method](this);
	241	+ });
	242	+ } else {
	243	+ return $this.find('.jsonview > ul > li .collapsible').siblings('.collapser').each(function() {
	244	+ return JSONView[method](this);
	245	+ });
	246	+ }
	247	+ });
	248	+ } else {
	249	+ json = args[0];
	250	+ options = args[1] \|\| {};
	251	+ defaultOptions = {
	252	+ collapsed: false,
	253	+ nl2br: false,
	254	+ recursive_collapser: false,
	255	+ escape: true
	256	+ };
	257	+ options = $.extend(defaultOptions, options);
	258	+ formatter = new JSONFormatter({
	259	+ nl2br: options.nl2br,
	260	+ escape: options.escape
	261	+ });
	262	+ if (Object.prototype.toString.call(json) === '[object String]') {
	263	+ json = JSON.parse(json);
	264	+ }
	265	+ outputDoc = formatter.jsonToHTML(json);
	266	+ return this.each(function() {
	267	+ var $this, item, items, _i, _len, _results;
	268	+ $this = $(this);
	269	+ $this.html(outputDoc);
	270	+ items = $this[0].getElementsByClassName('collapsible');
	271	+ _results = [];
	272	+ for (_i = 0, _len = items.length; _i < _len; _i++) {
	273	+ item = items[_i];
	274	+ if (item.parentNode.nodeName === 'LI') {
	275	+ _results.push(Collapser.bindEvent(item.parentNode, options));
	276	+ } else {
	277	+ _results.push(void 0);
	278	+ }
	279	+ }
	280	+ return _results;
	281	+ });
	282	+ }
	283	+ };
	284	+})(jQuery);
@@ -0,0 +1,52 @@		@@ -0,0 +1,52 @@
	1	+@charset "UTF-8";
	2	+.jsonview {
	3	+ font-family: monospace;
	4	+ font-size: 1.1em;
	5	+ white-space: pre-wrap; }
	6	+ .jsonview .prop {
	7	+ font-weight: bold; }
	8	+ .jsonview .null {
	9	+ color: red; }
	10	+ .jsonview .bool {
	11	+ color: blue; }
	12	+ .jsonview .num {
	13	+ color: blue; }
	14	+ .jsonview .string {
	15	+ color: green;
	16	+ white-space: pre-wrap; }
	17	+ .jsonview .string.multiline {
	18	+ display: inline-block;
	19	+ vertical-align: text-top; }
	20	+ .jsonview .collapser {
	21	+ position: absolute;
	22	+ left: -1em;
	23	+ cursor: pointer; }
	24	+ .jsonview .collapsible {
	25	+ transition: height 1.2s;
	26	+ transition: width 1.2s; }
	27	+ .jsonview .collapsible.collapsed {
	28	+ height: .8em;
	29	+ width: 1em;
	30	+ display: inline-block;
	31	+ overflow: hidden;
	32	+ margin: 0; }
	33	+ .jsonview .collapsible.collapsed:before {
	34	+ content: "…";
	35	+ width: 1em;
	36	+ margin-left: .2em; }
	37	+ .jsonview .collapser.collapsed {
	38	+ transform: rotate(0deg); }
	39	+ .jsonview .q {
	40	+ display: inline-block;
	41	+ width: 0px;
	42	+ color: transparent; }
	43	+ .jsonview li {
	44	+ position: relative; }
	45	+ .jsonview ul {
	46	+ list-style: none;
	47	+ margin: 0 0 0 2em;
	48	+ padding: 0; }
	49	+ .jsonview h1 {
	50	+ font-size: 1.2em; }
	51	+
	52	+/# sourceMappingURL=jquery.jsonview.css.map /