<!--{{{-->
<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml' />
<!--}}}-->
Background: #fff
Foreground: #000
PrimaryPale: #8cf
PrimaryLight: #18f
PrimaryMid: #04b
PrimaryDark: #014
SecondaryPale: #ffc
SecondaryLight: #fe8
SecondaryMid: #db4
SecondaryDark: #841
TertiaryPale: #eee
TertiaryLight: #ccc
TertiaryMid: #999
TertiaryDark: #666
Error: #f88
/*{{{*/
body {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}

a {color:[[ColorPalette::PrimaryMid]];}
a:hover {background-color:[[ColorPalette::PrimaryMid]]; color:[[ColorPalette::Background]];}
a img {border:0;}

h1,h2,h3,h4,h5,h6 {color:[[ColorPalette::SecondaryDark]]; background:transparent;}
h1 {border-bottom:2px solid [[ColorPalette::TertiaryLight]];}
h2,h3 {border-bottom:1px solid [[ColorPalette::TertiaryLight]];}

.button {color:[[ColorPalette::PrimaryDark]]; border:1px solid [[ColorPalette::Background]];}
.button:hover {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::SecondaryLight]]; border-color:[[ColorPalette::SecondaryMid]];}
.button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::SecondaryDark]];}

.header {background:[[ColorPalette::PrimaryMid]];}
.headerShadow {color:[[ColorPalette::Foreground]];}
.headerShadow a {font-weight:normal; color:[[ColorPalette::Foreground]];}
.headerForeground {color:[[ColorPalette::Background]];}
.headerForeground a {font-weight:normal; color:[[ColorPalette::PrimaryPale]];}

.tabSelected{color:[[ColorPalette::PrimaryDark]];
	background:[[ColorPalette::TertiaryPale]];
	border-left:1px solid [[ColorPalette::TertiaryLight]];
	border-top:1px solid [[ColorPalette::TertiaryLight]];
	border-right:1px solid [[ColorPalette::TertiaryLight]];
}
.tabUnselected {color:[[ColorPalette::Background]]; background:[[ColorPalette::TertiaryMid]];}
.tabContents {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::TertiaryPale]]; border:1px solid [[ColorPalette::TertiaryLight]];}
.tabContents .button {border:0;}

#sidebar {}
#sidebarOptions input {border:1px solid [[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel {background:[[ColorPalette::PrimaryPale]];}
#sidebarOptions .sliderPanel a {border:none;color:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:hover {color:[[ColorPalette::Background]]; background:[[ColorPalette::PrimaryMid]];}
#sidebarOptions .sliderPanel a:active {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::Background]];}

.wizard {background:[[ColorPalette::PrimaryPale]]; border:1px solid [[ColorPalette::PrimaryMid]];}
.wizard h1 {color:[[ColorPalette::PrimaryDark]]; border:none;}
.wizard h2 {color:[[ColorPalette::Foreground]]; border:none;}
.wizardStep {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];
	border:1px solid [[ColorPalette::PrimaryMid]];}
.wizardStep.wizardStepDone {background:[[ColorPalette::TertiaryLight]];}
.wizardFooter {background:[[ColorPalette::PrimaryPale]];}
.wizardFooter .status {background:[[ColorPalette::PrimaryDark]]; color:[[ColorPalette::Background]];}
.wizard .button {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryLight]]; border: 1px solid;
	border-color:[[ColorPalette::SecondaryPale]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryDark]] [[ColorPalette::SecondaryPale]];}
.wizard .button:hover {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Background]];}
.wizard .button:active {color:[[ColorPalette::Background]]; background:[[ColorPalette::Foreground]]; border: 1px solid;
	border-color:[[ColorPalette::PrimaryDark]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryPale]] [[ColorPalette::PrimaryDark]];}

.wizard .notChanged {background:transparent;}
.wizard .changedLocally {background:#80ff80;}
.wizard .changedServer {background:#8080ff;}
.wizard .changedBoth {background:#ff8080;}
.wizard .notFound {background:#ffff80;}
.wizard .putToServer {background:#ff80ff;}
.wizard .gotFromServer {background:#80ffff;}

#messageArea {border:1px solid [[ColorPalette::SecondaryMid]]; background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]];}
#messageArea .button {color:[[ColorPalette::PrimaryMid]]; background:[[ColorPalette::SecondaryPale]]; border:none;}

.popupTiddler {background:[[ColorPalette::TertiaryPale]]; border:2px solid [[ColorPalette::TertiaryMid]];}

.popup {background:[[ColorPalette::TertiaryPale]]; color:[[ColorPalette::TertiaryDark]]; border-left:1px solid [[ColorPalette::TertiaryMid]]; border-top:1px solid [[ColorPalette::TertiaryMid]]; border-right:2px solid [[ColorPalette::TertiaryDark]]; border-bottom:2px solid [[ColorPalette::TertiaryDark]];}
.popup hr {color:[[ColorPalette::PrimaryDark]]; background:[[ColorPalette::PrimaryDark]]; border-bottom:1px;}
.popup li.disabled {color:[[ColorPalette::TertiaryMid]];}
.popup li a, .popup li a:visited {color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border: none;}
.popup li a:active {background:[[ColorPalette::SecondaryPale]]; color:[[ColorPalette::Foreground]]; border: none;}
.popupHighlight {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
.listBreak div {border-bottom:1px solid [[ColorPalette::TertiaryDark]];}

.tiddler .defaultCommand {font-weight:bold;}

.shadow .title {color:[[ColorPalette::TertiaryDark]];}

.title {color:[[ColorPalette::SecondaryDark]];}
.subtitle {color:[[ColorPalette::TertiaryDark]];}

.toolbar {color:[[ColorPalette::PrimaryMid]];}
.toolbar a {color:[[ColorPalette::TertiaryLight]];}
.selected .toolbar a {color:[[ColorPalette::TertiaryMid]];}
.selected .toolbar a:hover {color:[[ColorPalette::Foreground]];}

.tagging, .tagged {border:1px solid [[ColorPalette::TertiaryPale]]; background-color:[[ColorPalette::TertiaryPale]];}
.selected .tagging, .selected .tagged {background-color:[[ColorPalette::TertiaryLight]]; border:1px solid [[ColorPalette::TertiaryMid]];}
.tagging .listTitle, .tagged .listTitle {color:[[ColorPalette::PrimaryDark]];}
.tagging .button, .tagged .button {border:none;}

.footer {color:[[ColorPalette::TertiaryLight]];}
.selected .footer {color:[[ColorPalette::TertiaryMid]];}

.sparkline {background:[[ColorPalette::PrimaryPale]]; border:0;}
.sparktick {background:[[ColorPalette::PrimaryDark]];}

.error, .errorButton {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::Error]];}
.warning {color:[[ColorPalette::Foreground]]; background:[[ColorPalette::SecondaryPale]];}
.lowlight {background:[[ColorPalette::TertiaryLight]];}

.zoomer {background:none; color:[[ColorPalette::TertiaryMid]]; border:3px solid [[ColorPalette::TertiaryMid]];}

.imageLink, #displayArea .imageLink {background:transparent;}

.annotation {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; border:2px solid [[ColorPalette::SecondaryMid]];}

.viewer .listTitle {list-style-type:none; margin-left:-2em;}
.viewer .button {border:1px solid [[ColorPalette::SecondaryMid]];}
.viewer blockquote {border-left:3px solid [[ColorPalette::TertiaryDark]];}

.viewer table, table.twtable {border:2px solid [[ColorPalette::TertiaryDark]];}
.viewer th, .viewer thead td, .twtable th, .twtable thead td {background:[[ColorPalette::SecondaryMid]]; border:1px solid [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::Background]];}
.viewer td, .viewer tr, .twtable td, .twtable tr {border:1px solid [[ColorPalette::TertiaryDark]];}

.viewer pre {border:1px solid [[ColorPalette::SecondaryLight]]; background:[[ColorPalette::SecondaryPale]];}
.viewer code {color:[[ColorPalette::SecondaryDark]];}
.viewer hr {border:0; border-top:dashed 1px [[ColorPalette::TertiaryDark]]; color:[[ColorPalette::TertiaryDark]];}

.highlight, .marked {background:[[ColorPalette::SecondaryLight]];}

.editor input {border:1px solid [[ColorPalette::PrimaryMid]];}
.editor textarea {border:1px solid [[ColorPalette::PrimaryMid]]; width:100%;}
.editorFooter {color:[[ColorPalette::TertiaryMid]];}

#backstageArea {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::TertiaryMid]];}
#backstageArea a {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstageArea a:hover {background:[[ColorPalette::SecondaryLight]]; color:[[ColorPalette::Foreground]]; }
#backstageArea a.backstageSelTab {background:[[ColorPalette::Background]]; color:[[ColorPalette::Foreground]];}
#backstageButton a {background:none; color:[[ColorPalette::Background]]; border:none;}
#backstageButton a:hover {background:[[ColorPalette::Foreground]]; color:[[ColorPalette::Background]]; border:none;}
#backstagePanel {background:[[ColorPalette::Background]]; border-color: [[ColorPalette::Background]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]] [[ColorPalette::TertiaryDark]];}
.backstagePanelFooter .button {border:none; color:[[ColorPalette::Background]];}
.backstagePanelFooter .button:hover {color:[[ColorPalette::Foreground]];}
#backstageCloak {background:[[ColorPalette::Foreground]]; opacity:0.6; filter:'alpha(opacity=60)';}
/*}}}*/
/*{{{*/
* html .tiddler {height:1%;}

body {font-size:.75em; font-family:arial,helvetica; margin:0; padding:0;}

h1,h2,h3,h4,h5,h6 {font-weight:bold; text-decoration:none;}
h1,h2,h3 {padding-bottom:1px; margin-top:1.2em;margin-bottom:0.3em;}
h4,h5,h6 {margin-top:1em;}
h1 {font-size:1.35em;}
h2 {font-size:1.25em;}
h3 {font-size:1.1em;}
h4 {font-size:1em;}
h5 {font-size:.9em;}

hr {height:1px;}

a {text-decoration:none;}

dt {font-weight:bold;}

ol {list-style-type:decimal;}
ol ol {list-style-type:lower-alpha;}
ol ol ol {list-style-type:lower-roman;}
ol ol ol ol {list-style-type:decimal;}
ol ol ol ol ol {list-style-type:lower-alpha;}
ol ol ol ol ol ol {list-style-type:lower-roman;}
ol ol ol ol ol ol ol {list-style-type:decimal;}

.txtOptionInput {width:11em;}

#contentWrapper .chkOptionInput {border:0;}

.externalLink {text-decoration:underline;}

.indent {margin-left:3em;}
.outdent {margin-left:3em; text-indent:-3em;}
code.escaped {white-space:nowrap;}

.tiddlyLinkExisting {font-weight:bold;}
.tiddlyLinkNonExisting {font-style:italic;}

/* the 'a' is required for IE, otherwise it renders the whole tiddler in bold */
a.tiddlyLinkNonExisting.shadow {font-weight:bold;}

#mainMenu .tiddlyLinkExisting,
	#mainMenu .tiddlyLinkNonExisting,
	#sidebarTabs .tiddlyLinkNonExisting {font-weight:normal; font-style:normal;}
#sidebarTabs .tiddlyLinkExisting {font-weight:bold; font-style:normal;}

.header {position:relative;}
.header a:hover {background:transparent;}
.headerShadow {position:relative; padding:4.5em 0 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0 1em 1em; left:0px; top:0px;}

.siteTitle {font-size:3em;}
.siteSubtitle {font-size:1.2em;}

#mainMenu {position:absolute; left:0; width:10em; text-align:right; line-height:1.6em; padding:1.5em 0.5em 0.5em 0.5em; font-size:1.1em;}

#sidebar {position:absolute; right:3px; width:16em; font-size:.9em;}
#sidebarOptions {padding-top:0.3em;}
#sidebarOptions a {margin:0 0.2em; padding:0.2em 0.3em; display:block;}
#sidebarOptions input {margin:0.4em 0.5em;}
#sidebarOptions .sliderPanel {margin-left:1em; padding:0.5em; font-size:.85em;}
#sidebarOptions .sliderPanel a {font-weight:bold; display:inline; padding:0;}
#sidebarOptions .sliderPanel input {margin:0 0 0.3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

.wizard {padding:0.1em 1em 0 2em;}
.wizard h1 {font-size:2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizard h2 {font-size:1.2em; font-weight:bold; background:none; padding:0; margin:0.4em 0 0.2em;}
.wizardStep {padding:1em 1em 1em 1em;}
.wizard .button {margin:0.5em 0 0; font-size:1.2em;}
.wizardFooter {padding:0.8em 0.4em 0.8em 0;}
.wizardFooter .status {padding:0 0.4em; margin-left:1em;}
.wizard .button {padding:0.1em 0.2em;}

#messageArea {position:fixed; top:2em; right:0; margin:0.5em; padding:0.5em; z-index:2000; _position:absolute;}
.messageToolbar {display:block; text-align:right; padding:0.2em;}
#messageArea a {text-decoration:underline;}

.tiddlerPopupButton {padding:0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em; margin:0;}

.popup {position:absolute; z-index:300; font-size:.9em; padding:0; list-style:none; margin:0;}
.popup .popupMessage {padding:0.4em;}
.popup hr {display:block; height:1px; width:auto; padding:0; margin:0.2em 0;}
.popup li.disabled {padding:0.4em;}
.popup li a {display:block; padding:0.4em; font-weight:normal; cursor:pointer;}
.listBreak {font-size:1px; line-height:1px;}
.listBreak div {margin:2px 0;}

.tabset {padding:1em 0 0 0.5em;}
.tab {margin:0 0 0 0.25em; padding:2px;}
.tabContents {padding:0.5em;}
.tabContents ul, .tabContents ol {margin:0; padding:0;}
.txtMainTab .tabContents li {list-style:none;}
.tabContents li.listLink { margin-left:.75em;}

#contentWrapper {display:block;}
#splashScreen {display:none;}

#displayArea {margin:1em 17em 0 14em;}

.toolbar {text-align:right; font-size:.9em;}

.tiddler {padding:1em 1em 0;}

.missing .viewer,.missing .title {font-style:italic;}

.title {font-size:1.6em; font-weight:bold;}

.missing .subtitle {display:none;}
.subtitle {font-size:1.1em;}

.tiddler .button {padding:0.2em 0.4em;}

.tagging {margin:0.5em 0.5em 0.5em 0; float:left; display:none;}
.isTag .tagging {display:block;}
.tagged {margin:0.5em; float:right;}
.tagging, .tagged {font-size:0.9em; padding:0.25em;}
.tagging ul, .tagged ul {list-style:none; margin:0.25em; padding:0;}
.tagClear {clear:both;}

.footer {font-size:.9em;}
.footer li {display:inline;}

.annotation {padding:0.5em; margin:0.5em;}

* html .viewer pre {width:99%; padding:0 0 1em 0;}
.viewer {line-height:1.4em; padding-top:0.5em;}
.viewer .button {margin:0 0.25em; padding:0 0.25em;}
.viewer blockquote {line-height:1.5em; padding-left:0.8em;margin-left:2.5em;}
.viewer ul, .viewer ol {margin-left:0.5em; padding-left:1.5em;}

.viewer table, table.twtable {border-collapse:collapse; margin:0.8em 1.0em;}
.viewer th, .viewer td, .viewer tr,.viewer caption,.twtable th, .twtable td, .twtable tr,.twtable caption {padding:3px;}
table.listView {font-size:0.85em; margin:0.8em 1.0em;}
table.listView th, table.listView td, table.listView tr {padding:0px 3px 0px 3px;}

.viewer pre {padding:0.5em; margin-left:0.5em; font-size:1.2em; line-height:1.4em; overflow:auto;}
.viewer code {font-size:1.2em; line-height:1.4em;}

.editor {font-size:1.1em;}
.editor input, .editor textarea {display:block; width:100%; font:inherit;}
.editorFooter {padding:0.25em 0; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px;}

.sparkline {line-height:1em;}
.sparktick {outline:0;}

.zoomer {font-size:1.1em; position:absolute; overflow:hidden;}
.zoomer div {padding:1em;}

* html #backstage {width:99%;}
* html #backstageArea {width:99%;}
#backstageArea {display:none; position:relative; overflow: hidden; z-index:150; padding:0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0; right:0;}
#backstageButton a {padding:0.1em 0.4em; margin:0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin-left:3em; padding:1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em;}
#backstageCloak {display:none; z-index:20; position:absolute; width:100%; height:100px;}

.whenBackstage {display:none;}
.backstageVisible .whenBackstage {display:block;}
/*}}}*/
/***
StyleSheet for use when a translation requires any css style changes.
This StyleSheet can be used directly by languages such as Chinese, Japanese and Korean which need larger font sizes.
***/
/*{{{*/
body {font-size:0.8em;}
#sidebarOptions {font-size:1.05em;}
#sidebarOptions a {font-style:normal;}
#sidebarOptions .sliderPanel {font-size:0.95em;}
.subtitle {font-size:0.8em;}
.viewer table.listView {font-size:0.95em;}
/*}}}*/
/*{{{*/
@media print {
#mainMenu, #sidebar, #messageArea, .toolbar, #backstageButton, #backstageArea {display: none !important;}
#displayArea {margin: 1em 1em 0em;}
noscript {display:none;} /* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
}
/*}}}*/
<!--{{{-->
<div class='header' macro='gradient vert [[ColorPalette::PrimaryLight]] [[ColorPalette::PrimaryMid]]'>
<div class='headerShadow'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
<div class='headerForeground'>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>
</div>
<div id='mainMenu' refresh='content' tiddler='MainMenu'></div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='SideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>
<!--}}}-->
<!--{{{-->
<div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div macro='annotations'></div>
<div class='editor' macro='edit text'></div>
<div class='editor' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div>
<!--}}}-->
To get started with this blank [[TiddlyWiki]], you'll need to modify the following tiddlers:
* [[SiteTitle]] & [[SiteSubtitle]]: The title and subtitle of the site, as shown above (after saving, they will also appear in the browser title bar)
* [[MainMenu]]: The menu (usually on the left)
* [[DefaultTiddlers]]: Contains the names of the tiddlers that you want to appear when the TiddlyWiki is opened
You'll also need to enter your username for signing your edits: <<option txtUserName>>
These [[InterfaceOptions]] for customising [[TiddlyWiki]] are saved in your browser

Your username for signing your edits. Write it as a [[WikiWord]] (eg [[JoeBloggs]])

<<option txtUserName>>
<<option chkSaveBackups>> [[SaveBackups]]
<<option chkAutoSave>> [[AutoSave]]
<<option chkRegExpSearch>> [[RegExpSearch]]
<<option chkCaseSensitiveSearch>> [[CaseSensitiveSearch]]
<<option chkAnimate>> [[EnableAnimations]]

----
Also see [[AdvancedOptions]]
<<importTiddlers>>
/***
|Name|DrawingPlugin|
|Description|Macro for nested comments, where each comment is a separate tiddler.|
|Source|http://tiddlyguv.org/CommentsPlugin.html#CommentsPlugin|
|Documentation|http://tiddlyguv.org/CommentsPlugin.html#CommentsPluginInfo|
|Version|0.1|
|Author|Michael Mahemoff, Osmosoft|
|''License:''|[[BSD open source license]]|
|~CoreVersion|2.2|

Having problem at start due to no formatter for this very plugin, oddly.

***/

/*{{{*/

if(!version.extensions.DrawPlugin) {

  version.extensions.DrawPlugin = {installed:true};

  (function(plugin) {


  plugin.log = function() {
    // if (console) console.log.apply(console, arguments);
    // firebug.d.console.cmd.log.apply(console, arguments);
  }

  plugin.makeShadowsFromSlices = function(names) {
    for (var i=0; i<names.length; i++)
      config.shadowTiddlers[names[i]] = store.getTiddlerText(tiddler.title + "##" + names[i]);
  }

  config.macros.fieldCheckbox = {
    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
      var field = params[0];
      var checkbox = createTiddlyElement(place, "input");
      checkbox.type = "checkbox";
      tiddler.fields[field] && tiddler.fields[field].toLowerCase()=="true" ?
        (checkbox.checked = true) : delete checkbox.checked;
      checkbox.onclick = checkbox.onchange = function() {
        tiddler.fields[field] = ""+(checkbox.checked);
        store.saveTiddler(tiddler.title);
        autoSaveChanges(false);
      }
    }
  }



  plugin.apiKey = function() {
    return encodeURIComponent(config.options.txtDrawingAPIKey);
  }


  var options = config.options;

  if (!options.txtDrawingAPIKey || !options.txtDrawingAPIKey.trim().length)
    options.txtDrawingAPIKey = "hJHLNc3+mGtyo4HpMzZ78YwogWMEZXOY8XWizs2oBZcyTnh+d3F24w==";
    if (typeof(options.chkDrawingSVG)==="undefined") options.chkDrawingSVG = true;

  plugin.makeShadowsFromSlices(
    ["DrawingOptions", "DrawingViewTemplate", "DrawingEditTemplate", "DrawingStyleSheet"]);
  store.addNotification("DrawingStyleSheet", refreshStyles);

  // adapted from TaggedTemplateTweak
  // decided to copy and modify to avoid dependence
  var origChooseTemplateForTiddler = Story.prototype.chooseTemplateForTiddler;
  Story.prototype.chooseTemplateForTiddler = function(title,template) {
    // TODO FIX this
    origTemplate = origChooseTemplateForTiddler.apply(null, arguments);
    var tiddler = store.getTiddler(title);
    if (!tiddler) return origTemplate;
    if (tiddler.isTagged("Drawing")) {
      return (template==DEFAULT_EDIT_TEMPLATE) ? "DrawingEditTemplate" : "DrawingViewTemplate";
    }

    return origTemplate;
  };


  config.macros.newDrawing = {

    init: function() {
    },

    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
      var text = (paramString && paramString.trim().length) ? paramString : "New Drawing";
      var launcher = createTiddlyElement(place, "a", "", "newDrawing", text);
      launcher.onclick = function() {
        var url = "http://draw.labs.autodesk.com/ADDraw/api/set/";
        var data = "API_KEY=" + plugin.apiKey() + "&BROWSER=IE";
        var params = { // call context
          place: place,
          loadingMessage: createTiddlyElement(place, "div", null, null, "Loading ...")
        }
        var xhr = httpReq("POST",url,config.macros.newDrawing.onStartSessionResponse,params,null,data);
      };
      // launcher.onclick(); // for testing
   },

    onStartSessionResponse: function(status,params,responseText,url,xhr) {

      var sessionURL = responseText;
      var matches = sessionURL.match(/\?_a=(.*)&/);
      if (matches) {
        var sessionID = decodeURIComponent(matches[1]);
        window.open(sessionURL, "editor");

        var title = "New Drawing [" + sessionID + "]";
        // drawingTiddler.fields.sessionID = sessionID;
        // drawingTiddler.modifier = 
        // drawingTiddler.text = "<<drawing " + sessionID + ">>";
        // drawingTiddler.tags = ["drawing"];
        var drawingTiddler = store.saveTiddler(title, title, "", 
          config.options.txtUserName, new Date(),
          ["Drawing"], {sessionid: sessionID});
        drawingTiddler.fields.width = "300";
        drawingTiddler.fields.height = "400";
        drawingTiddler.fields.usesvg = "true";

        autoSaveChanges(false);
        // story.displayTiddler(DEFAULT_EDIT_TEMPLATE, drawingTiddler);
        config.macros.newDrawing.newestSessionID = sessionID;
        story.displayTiddler("top", drawingTiddler, DEFAULT_EDIT_TEMPLATE);
      } else {
        displayMessage("Cannot open drawing editor. Please try later.");
      }

      if (params.loadingMessage) {
        removeNode(params.loadingMessage);
        params.loadingMessage = null;
      }

    }
  }


  var drawingMacro = config.macros.drawing = {
    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
      if (!place) return; // seems to execute in side menu
      xhrParams = { place: place };
      console.log("args", arguments);
      var macroParams = paramString.parseParams();
      console.log("params", params, "macroParams", macroParams);
      var sessionID;
      if (params && params.length) {
        console.log("sessionID", sessionID);
        sessionID = params[params.length-1]
        xhrParams.width = getParam(macroParams, "width");
        xhrParams.height = getParam(macroParams, "height");
      } else {
        sessionID = tiddler.fields.sessionid;
        xhrParams.width = tiddler.fields.width;
        xhrParams.height = tiddler.fields.height;
      }
      console.log(tiddler, "sess", sessionID);
      var data =    "API_KEY=" + plugin.apiKey() +
                    "&SESSIONID=" + encodeURIComponent(sessionID);
      // var usesvg = (tidler.fields.usesvg.toLowerCase()=="true");
      if (drawingMacro.useSVG()) {
        var url = "http://draw.labs.autodesk.com/ADDraw/api/get/xml";
        var xhr = httpReq("POST",url,config.macros.drawing.onGetXMLResponse,xhrParams,null,data);
      } else {
        var container = createTiddlyElement(place, "div", null, "drawingImageContainer")
        var image = createTiddlyElement(container, "img", null, "drawingImage")
        image.src = "http://draw.labs.autodesk.com/ADDraw/FileAndLogoProcessor?REQUEST_TYPE=LOAD_IMAGE&_a=" + encodeURIComponent(sessionID) + "&_o=" + plugin.apiKey();
        drawingMacro.clipDrawing(tiddler.fields.width, tiddler.fields.height, container);
      }
    },

    onGetXMLResponse: function(status,params,responseText,url,xhr) {
      if (!params.place) return;
      // var container = createTiddlyElement(xhr.place, "div", null, null, null);
      // container.innerHTML = responseText;

      responseText = responseText.trim();
      plugin.log("RESPONSE:::"+responseText+":::");
      var drawingEl;
      if (drawingMacro.isIE()) {
        plugin.log("isIE - placing SVG directly");
        drawingEl = createTiddlyElement(params.place, "div", null, null, responseText);
      } else {
        plugin.log("is not IE - placing SVG in object element");
        drawingEl = document.createElement('object');
        drawingEl.setAttribute('type', 'image/svg+xml');
        drawingEl.setAttribute('data', 'data:image/svg+xml,'+ responseText);
        params.place.appendChild(drawingEl);
      }
      drawingMacro.clipDrawing(params.width, params.height, drawingEl);
    },

    isIE: function() { return /msie/i.test(navigator.userAgent) && !/opera/i.test(navigator.userAgent); },

    clipDrawing: function(width, height, drawingEl) {
      if (!width)  width="400";
      if (!height) height="400";
      drawingEl.style.width = width + "px";
      drawingEl.style.height = height + "px";
      drawingEl.style.overflow = "hidden";
    },

    useSVG: function() {
      return !drawingMacro.isIE() || drawingMacro.isASVInstalled();
    },

    isASVInstalled: function() {
      try {
         var asv = new ActiveXObject("Adobe.SVGCtl");
          return true;
      }
      catch(e){ }
      return false;
    }

  };


  plugin.editorCount=0;
  config.macros.editDrawing = {
    handler: function(place,macroName,params,wikifier,paramString,tiddler) {
      if (!place) return; // seems to execute in side menu
      var sessionID = paramString.trim().length ? paramString : tiddler.fields.sessionid;
      var isNew = (sessionID == config.macros.newDrawing.newestSessionID);
      if (isNew) config.macros.newDrawing.newestSessionID=null;
      var sessionURL = "http://draw.labs.autodesk.com/ADDraw/api.html?" +
        "_a=" + encodeURIComponent(sessionID) +
        "&_o=" + plugin.apiKey();
      // window.open(sessionURL, "editor");
      createTiddlyElement(place, "div", "editDrawingInstructions", null, "To edit your drawing:");
      var instructions = createTiddlyElement(place, "ol");
      var launchStep = createTiddlyElement(instructions, "li", null, null);
      if (isNew) {
        createTiddlyElement(launchStep, "div", null, null, "Edit Drawing. (Enter the drawing editor and start editing. If the editor was not launched, please check your browser's popup window settings and ensure it's possible to popup a new window from TiddlyWiki.)");
      } else {
        var launcher = createTiddlyElement(launchStep, "a", null, "launchEditor", "Launch drawing editor.");
        launcher.onclick = function() { window.open(sessionURL, "editor"+plugin.editorCount); }
      }
      createTiddlyElement(instructions, "li", null, null,
        "Save drawing within editor. (Inside the drawing editor, choose Save from the File menu.)");
      createTiddlyElement(instructions, "li", null, null,
        "Save this tiddler (Click \"done\" above).");
      plugin.editorCount++;
    }
  };

  })(version.extensions.DrawPlugin);


/***
!DrawingOptions

API Key: <<option txtDrawingAPIKey>>

Use SVG? <<option chkDrawingSVG>>
!(end of DrawingOptions)
***/


/***
!DrawingViewTemplate

<div class='toolbar' macro='toolbar [[ToolbarCommands::ViewToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date'></span>)</div>
<div class='drawing' macro='drawing'></div>

!(end of DrawingViewTemplate)
***/

/***
!DrawingEditTemplate

<div class='editDrawing'><div class='toolbar' macro='toolbar [[ToolbarCommands::EditToolbar]]'></div>
<div class='title' macro='view title'></div>
<div class='editor' macro='edit title'></div>
<div class='annotations'></div>
<div class='editDrawing' macro='editDrawing'></div>
<div>Width: <span class='drawingWidth' macro='edit width'></span> px</div>
<div>Height: <span class='drawingHeight' macro='edit height'></span> px</div>
<div style='display:none;'>Use SVG (instead of image)?: <span class='fieldCheckbox' macro='fieldCheckbox usesvg'></span></div>
<div class='editor tags' macro='edit tags'></div><div class='editorFooter'><span macro='message views.editor.tagPrompt'></span><span macro='tagChooser excludeLists'></span></div></div>

!(end of DrawingEditTemplate)

***/

/***
!DrawingStyleSheet

a.newDrawing { cursor: pointer; }
a.launchEdit { cursor: pointer; }
.editDrawing .annotations { margin-bottom: 2em; }
.editDrawing .tags { margin-top: 2em; }
.editDrawing a { cursor: pointer; }
.drawingWidth input, .drawingHeight input { width: 4em; text-align: right; }

.drawingImageContainer { position: relative; }
.drawingImageContainer img { position: absolute; overflow: hidden; }

!(end of DrawingStyleSheet)

***/

} // end of 'install only once'
/*}}}*/

Note this demo won't work when served from the web due to cross-domain restrictions. To run it, you must download this HTML file and point it locally from your browser. (From a file:// URL.)

For more info about this plugin, see http://softwareas.com/tiddlywiki-drawing-plugin-based-on-project-draw.
Hello. This is a demo for the drawing plugin.

This tiddler is a drawing tiddler - tagged "Drawing", and with the appropriate fields set.
This is a demo for the drawing macro.

This tiddler embeds a drawing using the &lt;&;lt;drawing&gt;&gt; macro, with the right parameters following it (with a deliberately short height setting).

<<drawing width:220 height:200 3DjYqbPKx9CSze227nuRVQ==>>

DrawingPluginInfo
Example
Sketchbook
DrawingPlugin
<<newDrawing>>
Drawing Plugin
Mashup with Project Draw