JinglyWiki - Kiss your iPod goodbye

<!--{{{-->
<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 0em 1em 1em; left:-1px; top:-1px;}
.headerForeground {position:absolute; padding:4.5em 0em 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:0em 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 .3em 0;}
#sidebarTabs .tabContents {width:15em; overflow:hidden;}

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

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

.tiddlerPopupButton {padding:0.2em 0.2em 0.2em 0.2em;}
.popupTiddler {position: absolute; z-index:300; padding:1em 1em 1em 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 0em;}
.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 0em 0em 0.5em;}
.tab {margin:0em 0em 0em 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 0em 14em;}

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

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

.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:0em 0.25em; padding:0em 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 0em; font-size:.9em;}
.editorFooter .button {padding-top:0px; padding-bottom:0px;}

.fieldsetFix {border:0; padding:0; margin:1px 0px 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 0.3em 0.5em;}
#backstageToolbar {position:relative;}
#backstageArea a {font-weight:bold; margin-left:0.5em; padding:0.3em 0.5em 0.3em 0.5em;}
#backstageButton {display:none; position:absolute; z-index:175; top:0em; right:0em;}
#backstageButton a {padding:0.1em 0.4em 0.1em 0.4em; margin:0.1em 0.1em 0.1em 0.1em;}
#backstage {position:relative; width:100%; z-index:50;}
#backstagePanel {display:none; z-index:100; position:absolute; width:90%; margin:0em 3em 0em 3em; padding:1em 1em 1em 1em;}
.backstagePanelFooter {padding-top:0.2em; float:right;}
.backstagePanelFooter a {padding:0.2em 0.4em 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 1em;}
/* Fixes a feature in Firefox 1.5.0.2 where print preview displays the noscript content */
noscript {display:none;}
}
/*}}}*/

<!--{{{-->
<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'></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>>

[[Hello World]]
JinglyWiki
JinglyPlugin

Hi this is my tiddler.

<<jingle>>

config.macros.jingle = {}
config.macros.jingle.handler = function(place,macroName,params,wikifier,paramString,tiddler) {

  button = document.createElement("button");
  button.style.fontSize = "4em";
  button.innerHTML = "Play Me! Play Me!"
  button.onclick = function(ev) {
    startWav(SOUND_URL);
  }
  place.appendChild(button);

  // cancel dbl-click so we can follow our natural urge to click on the button incessantly
  story.getTiddler(tiddler.title).ondblclick = function() {}

}

// non-flash sound handling adapted from http://www.zwitserloot.com/files/soundkit/soundcheck.html

var embedEl;

function startWav(uri) {
        stopWav();
        embedEl = document.createElement("embed");
        embedEl.setAttribute("src", uri);
        embedEl.setAttribute("hidden", true);
        embedEl.setAttribute("autostart", true);
        document.body.appendChild(embedEl);
}

function stopWav() {
  if (embedEl) document.body.removeChild(embedEl);
  embedEl = null;
}

// To make a new sound, cut and paste into hixie's handy Data URI Kitchen
// http://software.hixie.ch/utilities/cgi/data/data.pl

var SOUND_URL="data:audio/x-wav,RIFF%17%1C%00%00WAVEfmt%20%10%00%00%00%01%00%01%00%40%1F%00%00%40%1F%00%00%01%00%08%00data%F3%1B%00%00~%82%7Dx%87%92%7Bv%7C~%85%81w%7B%82%81%7F%84~xzjH%9F%B1%91%9E%84ux%83vLf~%81%A1%9C%82w%7D%80lqwo%84%96%94%8B%83%7Ds%7B%80tx%87%8B%8B%8B%86%7Cvzz~%86%83%83%8D%8A%82%7Ctsv%80%85%86%89%8B%85%84%83zvwz%7F%85%8C%86%84sBg%CB%8D%91%A8i~%82%8FaF%7Fy%85%AF%8B%7Dy%86%7Cgzkf%92%9E%90%85%86%7Du%7Fyk%7D%87%87%92%93%83u%7B%80uw%89%9F%87fr%7F%7B%83%82u%7B%8C%92%86%83yq%7D%82%7D%7B%80%85%85a%3B%A1%C5r%B5%88j%85~%87Fc%84k%A4%AA~yz%8Cil%7C%60z%9A%95%8F%88%86qw%83qqz%82%8C%8D%8F%7Blw%A8%ABfJfp%90%A2%88jw%99%91%84%7Bci%8A%91~t~%80%89%86C(%BC%C4%81%D4xiu%8E~%2Bhwk%BA%AE%87l%7D%84UurR%87%A3%9F%8D%90%89g%7F%83emz%86%8F%98%88%8C%B2%93TIcoz%95%8B%7F%97%9B%83skhp%8E%8C%7C%80%88%85%8A%88%7DU%1A%5E%FF%93%A4%C4Py%81%8EF(%8Au%98%D8%99tc%8CjNy%5Ch%A6%B5%A4%87%8Ena%85n%5Bi%84%92%A6%C7%98pg%5Dcn%7Bvy%A0%9D%9A%8Drnn%7Byw%87%84%8A%89%82%7Cx%7F%83f%26Q%E9%9F%9E%C6dz%83%90R%22yq%88%C8%A1%7Fg%8EwVz%5DZ%93%B4%A8%88%93%7Be%7Dt%5E%60%85%AD%B4%A7%82dfpqlwv%89%A1%96%89zsxwzz%7F%8E%8F%89%7F~%7Dvyu%5B%3C%85%BF%A4%B4%9Ex~~zNEjp%94%B3%9C%83y%85vgk_m%97%A2%95%94%92%7Futke%7D%98%94%93%90zqrsmv%83%85%8F%8F%84%84%82ztx%7F~%85%8F%87%82~xtvog%5En%94%AB%A0%91%8B~%7C%7Fr%60c%81%8B%92%98%84yt%84zw%8B%8A%86%8B%7Dqvzxt%7C%8D%93%90%88%81%85%84%7Boiv%81%85%91%8E~%7D%86%84%83~%7Bz%87%8F%7D%7B%84%80%7Dvlnt%7Dzzyo%84%9B%8F%93%90ww%8C%88vo%83%85%8B%95%7F%7D~%81%87%7F%7C%7C~%83ypv%7By%88%91%93%8F%83zq%7B%84%82%7D%85%7B%87%91%83px%86%7Ft%7Duv%8A%8D%80%7D~%7Ckdvl%86%99%8B%9A%81%91%8Cw~nw%8F%7B%87%7Dz%85%7F%8A%80%7F%82z%7C%7C%83z%87%8F%82%7F%7C%84%80%7C%81%81%83%83vz%83%89%8C%8D%86v%7F%8E%83tyy%83%84%7F%7Br%80%8B%7Ftrotxswz~%89%8A%8Ewwbs%A9%9D%9B%9F%8A%85%87%7B%5Cg%7C%85%88%8C%83w%8B%88mj~%88%86%89ur%7F%93%90~%7F%7C%8A%90%88sm%84%81%87~tm%7F%92%7Dww%86iWsq%5DZ%85%D7%C7%B4%A6%86whgM8W%7D%93%A8%AF%AA%94~dROfq%7C%90%94%90%8F%90%88~%88yxzx%7F%87%8C%84%8F%9B%95%8A%7F%83%84~osvn%7Dys%86%85yzzjiheoyv%7F%9A%93%8A%8A%81%80v%7B%7B%7D%8B%93%8C%8B%94v%82%82%81%80iBU%B5%BE%9D%98%8E%7D%8B%84SGTs%84%99%9D%89%8C%89ucfhx%83%84%86%87%92%8D~%81%80%81%8E%89u%7B%7B%86%8By%7C%89%89%8D%85xluxomminzzu%9E%B3%AA%95%8A%7Dro_ocusq%A6%B0%9D%88%7Bkjibk%83%96%92%93%87%7D%88%8C%80%7Bxwy%80%8F%85%8B%99%A0%9D%96%8C%82zwqkl~%7F%82%84%84%7F%7D%7Cldb%5Eaelu%91%8A%89%8D%81%90%7B%81%7B%7C%86%80%8D%83x%82yk%7F%9D%A8%AF%A7%99%80%7DmVOahw%93%90%82%88%81sfhj%7F%8E%88%84%97%8C%8B%8F%87%82%86%82%82%86%8D%7F%8B%8B%7F%7B%8E%7Cyq%7Dn%7BqZi%5E%7F%89%8E%9D%96%9A%99%90usfPehv%87%9B%94%94%9C%8Awohin%8A%83%85%89%8C%8A%92%86%85%86%84x%7B%81%82%7F%88%89%90%8E%95%97%91%8A%88%86%7Cna%5Djy%7F%82~%8A%8A%82tcSinrnr%82%8A%85%8A%84%85%8A%89%8B%84%7B%83%8C%88%8B%84%87%86%92%84z%7B%82%80ws%7Fu%80%7B%7Cy%83%80x%7D%80z%7C%81%7F%83%89%81%81%81%88%8E%8A%7Bz%7F%87%89zy%7D%81%89%85yy%80%7D%84%7Cpl%7B%83%7B%7C%85z%7Dv%7B%80%95%A6%9F%9A%92%90%81%86o%5Ddp%7B%7D%8E%82~%89%80%7Fpxv%7B%81%7F%84%85%7F%83%8B%94%91%88%86%85%80%83%81%83%81%8C%7C%92%83%7Bfx%9D%9D%9F%94%92%8C%88%8Eq%5EACPXcw%85%8F%A0%99%89peebrrsz%8A%92%93%91%87%86%86%88%8F%7F%7B%7C%82%87%8C%8E%91%9A%98%8D%80~m%5D%5C%5Cv%93%9E%A6%A4%9E%A0%97z%5CNFLO%5Dn%83%95%98%91%8D%82xqvrrq%7B%83%88%8C%94%96%9F%99%9B%8D%85%7D~m~%85%94%8D%8C%85%8D~q%3EV%9A%9E%A5%A6%A3%9D%A3%AAoj84AMbS%81%92%A9%AF%9D%86ixchhglq%8B%84%89%8B%91%97%97%94%84%7Fzu%7F%85%90%8A%9D%A8%A8%9E%97%88xuibfgps%89%82yvqdcdafeiw%7Bpuqbe%99%C4%BE%BE%BD%B0%A3%A4%85VLSWf%80%80%84%95%98%87xrqv%7D%7Ctz%80z%88%8E%8F%89%8F%97%9B%96%97%8D%89%86%94%91%86woemv%85%8C%88%87%82z%7Fh%5EWQWfqv%80%8A%87%8A%7Fwqv%81%83%80%88%8D%8D%8B%89%8B%8C%89%94%8C%84%81zyxxz%90%90%8F%88%90%96%8F%93%89yws%7Cxxnqxx~%80%7Fumob_aht%87%88%8B%8B%99%A3%A5%A4%97%86zz%7Cswt~%83%8E%95%8E%83%85~vwuimv%7C%7D%80w%83%8C%8E%97%94mcr%83%8A%9F%AE%A4%9E%A6%99%80pW%3FFQT%5Bsv%80%8A%84zw%7Cyw%84%86~%82%92%99%95%98%90%96%99%93%87%84%7C%80%7D%90%8D%88%92%9B%A1%9F%8C%85%7Fwtlgjkry~zsvzwse%60dmumbr~%7C%A0%A9%A5%AE%B7%B2%98%8D%7Dnhronxux%7D%7Dsw%7C%7Cquupy%83~%81%8A%88%8B%85%90%99%8A%88%89%89pz%87%7C%8A%A0%A4%97%99%92yleZIPQYk%7B~%82%8A%86%85%87%86zu%84%7D%84%8A%8E%8A%94%9B%97%92%8F%86%7F%87%88s%7C%7F%80~%8E%90%8B%9D%AB%9C%97%8E%7Fopc%5Edrpr%80%80xzshfrnmmix%88%86ny%80%89%95%AF%C0%B6%BC%B7%A8%8E%85jTVUWVdnp%7D%7C%81~%7B%7Cvzusu%7By%7C%8B%93%89%93%99%9F%A3%A3%80%85%8A%83%7Bj%7Clm%94%9D%89%84%96tlu%60MM%60%5Bo%80%7Cz%84%8D%7F%84%7F%80%7F%89%92%85%8A%8F%8E%96%97%90%89%88%87%89%88sgs%82w%84%80%84%97%95%AB%A4%9A%8C%84%7Chiemjz%7F%84%88%7Cymsnafef%5Bfni%88%7F%89%9E%C5%D6%CD%CA%AD%9A%7CwaNWWdnwuw%81w%7Fx~qkpqxx%7F%82%80%84%91%9F%9B%9B%89%89%8D%9B%86%7F%86w%87%84%91%8C~%81%7Dxox%5DY%5D%5Efiysuz%7F%7Fz%82uz%82%84%81%88%90%8C%93%9A%9B%9A%93%95%89%84y%7Bspy~%84%9A%99%97%A2%9F%A2%9A%81uhjfcanx%7B%7Bty%7Fuurmjlukfiw%81%84%95%96%B1%C8%C7%BB%A6%9Ezvj%5DZV%60Zfpqw%80%88%7D%81%7F%80yuuv%7D%7D%89%88%80%8B%A6%98%84%88%8B%91%7C%84%7Bl%88%87%9F%8D%85%8Du%89rt%5EYdXsnvqv%82v%89%7Bzx%7F%8C%87%90%84%89%97%93%97%91%96%94%8E%87%89%89%7B%80%83%84%85%97%9D%90%90%96%8A%84%83zhjpibej%5Barxn%89%A3%98%A1%9A%92%80%83%82iiluo%7D%89~%83%8C%8B%88%84%83tz%7F%7Cqwvp%80%8F%8C%8A%86%83~%82%8Bg%5Bgf%A3%AF%B6%C1%AE%C2%A1%A2%80VE-%40%3ANZSry%91%84%8E%88u~u%7Bhjqk%8F%96%A9%98%94%9A%99%AB%8A%88sy%8E%9A%A6%96%9A%9E%97%9E%8A~iprpphkgpxz%7Dqvrxujenvio%7Fv%80%9B%9D%A3%B1%BF%B0%A7%A9%9A%84riZ%5Bcdagsty%85%7F~%86%81rwwxw%7F%82%8C%8D%9A%96%97%A3%99%9D%84zpg%5D%5C%8B%89%9D%A6%AC%A6%A0%A4%82fOL%3D8NScn%83%84%86%9C%91%8E%83%87~xxry%81%91%95%9D%A4%96%98%98%8Bxx%7Fzy%86%8D%8A%92%93%89kr%92%8B%8C%90%8Az%84%98vqmgQWrinnx%7B%7F%96%84z%86%8A%88%7C%86vv%88%92%87%7C%84%88%87%8C%8C%80%83%87%92%8D%8B%90%91%8D%8F%90%81v%5BQ%5El%86v%84%8D%99%AC%9A%92r_%5CWOJNSdz%7F%87%87%8E%8C%8C%93%86%7Bnptz%8A%81%7F%89%96%9F%A0%9C%88%8F%91%87%7C~%86%7B%7F%5CJu%9B%B3%B5%C5%B5%AD%BB%AC%89hL*19BKax%84%A2%A6%9A%83%80~pmg%5E%5Efy%7C%88%94%8D%95%9C%A0%88%81%88%88%88%98%A0%98%9B%AF%A5%9D%93%85spyn%60imnj%7Comnppd%5DWMA%3Dm%9B%AF%C8%C8%D5%C9%CF%BC%8EoOE7%3EABe%90%B3%B0%AF%A9%97%98%8B%7C%60%5BZVcl%7C%80%93%AA%AA%AE%A3%A2%94%95%8Dw%82xlQZz%88%93%94%97%91%9D%A4%8BoYPGOQJVf%82%8C%93%93%84%8A%8A%86%7D%7Dzsx%82%88%85%8E%93%97%A1%9B%96%83%80%84z%81utx%86%8B%84%87%8E%95%96%94%85wvxyvlaZYnm%7Brm%96%91%A7%9D%8A%81v%90wvtmt%7C%95%7F%7F%82%85%8B%84%8Dy%80%83%83%85%7B%82v%7B%84%81%87zxs%83%90vvn%84%A8%AB%B3%94%9B%99%91%8DkZ%3FDSZeSpv%85%83ytbstusmw~%99%9D%9D%A2%A4%A8%A3%98%89%7Dx%81%8E%7F%81%84%89%98%A0%9F%97%92%82qutpjnszyqknt%84wt%80%7D%93%8E%92~y%82y%81wtqz%85%7C%80%7C%80%7C%80%86%81%8C%86%89%88%87%8F%89%88%86%8A%86%7C%84yj%5CWo%9C%AD%A8%AE%BA%BA%B2%A4%84aNF%3D26F%5Ev%84%89%85%87%8C%8B%84ukhimpx%7F%8F%93%A0%A7%AA%9F%98%95%91%8A%8A%86%7C%82%90%97%93%91%91%8A%8D%8C%87xpvqkf%5D%60%5Ea_ex~%84%95%9E%99%94%95%89%7Dxujkvvx%7D%7F%80%81%88%87%89%8B%87%83%7F%83~y%7D%7B%82%88%8B%8D%86%83%88%89p%60%7B%A5%A3%94%A6%A9%A2%AE%A1%81%5D%5DWLLJJWw%7Cux%7C%81%80%85sjqx%7B%7D%7C%81%8C%99%9F%9D%99%95%92%90%8F%85z%7F%82%8B%8D%8B%98%90%89%82og%7D%8B%85%85%84%8E%91%98%8AnrqbNUYZqyyw%8C%91%8A%89%88%81z%82wlz%7B%80%7D%88%88%8C%91%91%8E%8D%8E%8B%83%8CvnI%60%8C%A2%9D%8E%A8%B6%C2%BF%9C%7DgthN7-F%5Etkjx%8D%9D%8E%81s%7B%7Dsi%5Djv%83%87%88%93%9A%9E%9B%99%98%94%8F%8A%90%89yHE%7C%9A%A6%9A%AA%B6%CC%D4%B4%8DnkaC4!5St%7B%83%9A%9E%AE%A2%8AvnsicXZhy%84%81%8F%9D%9E%9B%9A%8C%80%89%87%7F%7DwhIj%91%A5%9E%A0%AA%B5%C6%BC%95wnnUI%3D%3ANkvm%7D%8A%94%99%8Fxnyzkc%60fs%83%80%7F%89%97%98%95%91%97%96%96%88%82XK%7B%97%9D%87%A1%B0%C4%CC%B4%8D%7F%80tQH%3ADVlcf%84%92%94%8E%86%83%86%8E%83rivv%7Dxrx%86%8D%88%87%88%8D%93%98%8A~aNx%8F%90%7B%8C%A1%B6%C6%B3%8B%82%88%82aYDO%5Bnegy%8A%92%93%86%85%86%93%83yqutzrqr%7D~%7Cz%84%86%94%8D%86k%5E%8D%9F%96%82%96%A5%B3%BB%9F~%81%85%7DhbS_t%7Cgk%7B%82%86%86zs~%85%7Cxv%7C%80%89%7Dqz%83%7Dyz%7C%7D%88%82%82gu%96%A3%9E%96%A0%A5%AD%AA%8Awu%7Clea_evnehxy%7F%7C%7By%84%87%82~%7F%7D%87%87%85z%80~zw%83%85%81nyaw%97%9C%94%99%AE%A9%B1%A6%88qwueYYVlx%7Bo%7D%88%8A%89%7Duw%82%7Du%7D~%87%87%8C%84%87%89%87~%83%7DsihZ%7B%8F%9C%96%AF%B5%B9%B5%A4%81%7B~kRMNZkujr%87%96%93%8C%80w%85%81skot%80%8B%89%7F%8A%8D%9B%95%89mv%5Ep%80%92%87%96%A5%B2%B0%AD%8D~%85%84f%5CXYch__s%84%85%85%85%81%8B%90%81us%7Cx%81%7Cuv%84%8C%8Bwtdl%8E%9C%92%94%AC%B3%BB%AB%94%7B%8D%88iT%5E%5BnlbXt%85%84%7C%7F~%8E%93%87ox~%7Drynu%7B%88qsfq%92%AA%A5%9E%B5%BA%B8%A9%8Epy%7ChSX_x%80wfy%86%7Fwqlq%7Dxmx%84%87%86%83%85%8D%8D%7DpnVt%8C%9B%8F%AE%B6%BE%B8%AE%86%81%81oXVR%5Enrct%83%84%82%81%7Bx%87%83vx%84%83%81%81%7B%7F%89uqY%60%86%A4%9D%9E%B0%B6%C8%B9%9Av~zeNKNetnh%7C%88%8E%85%7Fy%83%86%7Fns~%84%7Czu%7By%7D%5Dm%8B%A5%A4%B1%B6%BA%BB%AF%8E%7Cui%5BSR%5Evwq%7D%84%86%80wmp%7Brrozw%86%85%7Dv%7Ft%5B%7D%97%94%9B%B0%AB%B6%C4%A7%87%87%84lf_Zd%7Duox%7Cy%81%7Bipyrltqr%82%7Flywj%87%9F%9C%A0%B7%B3%B2%A7%9C%80%80tf%5Cbepwor~%7Dwvssyxpnququlvtr%8F%9D%A8%A8%C0%B6%BD%A9%9D%85%84ne%60hcromozutssp%7Bqpowxy%7D%7Do%7B%92%A4%A4%AE%AE%B5%AF%A9%96%83%7Dskcbeikruos%81%80%7Fxxtqoofmkfw%8F%A8%B2%BA%B7%BF%B8%AE%91%82qqn%60T%5Cdmlnkv~%80xuprtqij%5Ey%94%A3%9F%B0%BC%C2%BA%A0%81%86%88%7Doeemvgbbpoomoy%82%81%82%8C%9F%A5%A8%9C%98%8D%8B%7C%7Bopusiprrrnot%7F%85%8F%9A%A5%A5%A0%98%8F%8E%87%7Bquvwslmwrf_fv%88%8D%94%A0%AD%AC%92zntuxrw%7F%89%81ywvi%5CZkx%88%9A%AD%B9%BB%AA%90%85%89~tmihmhhjjd%5Bcy%91%94%9E%AB%B9%AF%99vonxnllz%81%7Cu%7Cvi%5Cky%84%8F%97%A6%B6%B0%96%82%86%87%88~wvzxedc%5ESVo%83%94%A0%AA%B7%BA%A3%86zstufeowoltwp_j%82%98%9E%9C%A6%B5%A8%8Ets%7C%81zlw%84%80olqmZ%5Bq%83%93%A1%9C%B0%BA%A3%80uy%82%80qgv%7Btljg_Wfy%83%8E%97%A2%B7%AB%8Cy~%86%83wq~%87%7Fmovr%5C%5Dp%8B%9C%A5%9E%AF%B8%9C%7Cpsyxlly%80tjijYUk%7C%84%94%9E%A8%C1%A4%86w%83%85%89ys%7F%8C%7CnorbNiy%8F%99%9A%9D%BE%AF%89mtu~ugt%89%84orojNaq%83%91%9A%9C%B5%C0%A0%82u%7B%7D%7Bgjw%80spqjVTp%83%8D%8F%99%A6%C3%AA%8Bv%84%87%8E%7Co%7F%8C%84vnjYJds%7F%82%93%90%B3%A7%8Cqz%7D%84%81oy%81%82qqq%60Jbz%8E%8E%9F%9F%B9%BC%9B%7By%82%7D%7Cip~%83plmfKbv%82%86%96%99%AF%B7%93%7B%7B%84%85%89r%7C%86%8AtqmZF%5Ds%81%91%98%98%B6%BC%97~vzy~hn%7F%83yqsYTp%85%85%8B%9D%A3%B9%B0%89wv%8A%81%7Dm%7C%8B%8AtjaFSis%7C%8D%99%A6%BA%A3%8B%7B%81~%85zs%7DyrjhNHh%7B%8A%9B%A2%AA%BA%AE%89%7Ctnw%7Fp%7D%8E%85wrU%3Fbz%81%85%9A%A1%BD%B5%8Bspuszm%81%91%8CwsX%40_%7Cs%81%9B%A2%B6%BD%94%7C%80zv%80w%84%8F%8AunJDk%7Bv%85%9A%A6%BD%A8%7Fu%7Bmqrp%82%97%88xoQc%82%81z%92%A3%B1%B1%8Fwz%7Cuxq%7B%8C%89rgFKlzx%89%9E%AD%B6%A0%85%7F%83p%7Bx%7D%89%90yoPOs%86%7C%87%9F%AF%C0%A7%81r%7Fsqfiy%87s%5BDNo%89%7D%88%A0%B7%BE%A6%85v%81%7Fzqy%85%86%7B%5ECQu%83%7C%8F%A2%BA%B9%9F%81z%84wplx%86%81pIIi%85%82%85%9C%B1%C7%AC%85u%82%7Dqji%7B%86u%5D%40Ws%88%7D%89%99%B8%B4%92us%80%81zn%7C%92%8DrIQt%8A%87%8B%95%AF%C2%A1%82szvylm%83%88sLNk%82%82%7D%8C%A2%B5%9D%7Fs%7C%7Dxmv%86%85nKSv%8B%85%80%8D%A4%B5%98~t%81%83%83vx%88%81lKYp%8D%8E%93%9D%B5%B3%93vv%80yqix~~T%40%5D%82%8D%89%92%9F%BA%B1%89oq%7D%7Foey%84zSVu%94%91%91%97%AD%B2%99~y%81%82ypr%7FuVCc%81%8F%8A%91%9D%B0%A0%8C%7C%7C%82%84%83%80%82v%60EZoy%7F%92%98%A8%AB%91yx%81%86%81suynKJ%60%7C%8B%98%94%A6%B7%A3%8Avy%84%88qoxvVUk%83%91%9C%A6%A4%AB%98%80kpppfr%7C%7BUNi%87%9A%99%96%9B%B4%A4%80ksv%83rruyYUo%8A%98%98%9A%A3%B1%9Azhp%7C%83ww~wYVh%7C%8A%94%99%9F%AB%9C%82w%7D%7D%80tuwrRTo%87%97%98%9B%A5%AD%97%83%7Bz~ukmhTBUp%8B%96%9E%A9%B9%AF%91%7Dy%7D%89%85lqmTBWg%88%9A%AA%A8%B9%AC%9C%87~%7B%7Fyki%60EBav%85%91%9C%A7%AF%9A%86z%7C%87%8Cyqv%60ETg%7F%93%9F%A1%B0%B0%99%87%7C%7C%86%82rkdGNgu%86%9E%A8%A9%AB%97%88%83%7B%7D%80tomU%3BWt%8C%95%A2%A9%B5%A8%8Awr%7B%86%7DptjHPj%7D%8D%9A%A4%AC%AF%99%88z%7B%86%87%7DvrQKcz%86%8E%9F%A2%AB%92%80x%7B%80%86%81xs%5CBYk%7C%89%9E%A4%AC%A3%86%81%80%82%8D%89vtpBJe%7B%8D%99%99%A4%B0%93%81zw%8D%90yjiDG%5Ck%80%9E%A5%A8%B1%98%8C%8A%80%84%85%7F%7BoHAhq%81%8F%9E%A2%AE%96%81%80%83%8C%88zqsI%3E%5Cn%86%9D%9C%9D%AF%9E%87%85%7B%81%93%89rjF%40gu%80%96%9E%A4%AF%94z%80%7C%8A%97%8C%7BkFFcp%81%92%9B%A2%AB%8D%7C~%7B%8B%91%7ComHFjy%8D%A0%A2%A4%AD%8Cyww%87%8Fzri%40Hk%7F%8F%9F%9F%A9%AD%8Bvu%7C%8A%8Dxk%5DBWr%7C%92%A2%A6%A9%A0%80%7D%80%85%91%89utU%3C%60v%87%9E%A7%A6%AB%93y~%7C%81%8B%7BslC%3Aax%91%A3%9E%A3%B3%96~%7Cy%87%96~mX6Hq%82%96%A5%A3%B0%AD%85x%7F%82%92%96ymM7Zq%7D%94%A8%A2%AD%98wu%82%8E%94%86ud%3BCbt%8D%A5%A3%A0%A2%83%7B%7D%86%97%9A%81qM3Si%80%9B%AB%AB%B4%9E%82%7C%80%80%8E%85w%5E0%3B_%7B%90%9D%9B%A9%B0%91%7Bw%81%97%8Fwg%3D%2F%5Cz%88%9F%AB%A9%B2%94%7Dv~%8E%97%81oR%2FEo%80%91%A9%A5%AB%A4%89%7C%84%8A%94%8AsP%269_%7F%95%AB%AC%B7%B4%8Ct%7C%89%92%8BtW19Vw%8A%A4%AC%B0%AC%93%81%7D%8A%93%95%84m5%26Kt%87%98%9D%A9%BA%A0%7Cq%84%92%9E%81j%401Mk%81%95%AC%AB%B5%A1%8B%7C%88%90%99%87tF%26B_%7C%94%AB%A4%B6%A3%8Ax%82%8D%90%85nD%22%40_%81%95%A9%A5%BD%A7%90%80%87%96%9F%8Ar%40%1F%3C%5D%7C%8E%A2%A3%B8%A8%93%80%8D%9E%A7%8Bm9'D%5Br%98%A9%A4%B6%A4%92%88%8F%99%A1%8Aj2%1FKk%7B%93%9E%9D%B3%95%81%7C%8D%96%9F%87l0)Lo%88%9C%9C%A0%B1%96%89%80%94%A0%A1%88a%231Xw%8B%9E%98%A4%A9%8F~%88%9B%A6%9C%84H%1A4%5Cy%8E%95%93%AE%A6%87w%83%9A%AA%92y%3F%22Aj%7C%99%A1%93%A7%95%81%83%96%9D%AC%98r.'Eq%89%A9%A4%AC%A9%90z%7C%92%A1%97%85%5B%1B%2BMq%8C%A6%92%A9%A9%8B%7B%87%9B%AF%A1%81G%1F7ct%8C%A5%96%AA%9D%83y%97%AA%B7%9B%7D%2F%23Fl~%9E%95%98%A4%8Cux%8F%AB%B4%9Cm%23.Tv%7C%9A%8F%A0%A2%8Eq%88%9C%B1%AC%94C%23%40i%81%90%92%94%A8%86ne%8A%A8%B8%A4%8A%3A6Tsv%9F%8E%99%9A%80ez%97%A7%A9%A0e.Dh%85%93%A2%88%A3%8EsWx%95%AE%A2%8E%3B8%5D%7F%7F%9F%87%98%A7%88cn%84%A6%AE%9B%5D0Ou%8D%94%9D%84%A6%8Cv%5Ds%8A%B5%9F%833%3Ee%95%8A%A2%8A%9C%9D%81Zn%85%A3%A4%8FL0Q%7B%91%9F%A2%93%A7%89rc~%8B%A3%9Ay*%3F%5E%8D%8D%AB%86%9F%94%82du%83%A5%A2%9AO7O%81%8B%A3%94%8B%9F%87qj%84%8C%A2%98h%2CPi%8A%92%A7%83%A5%90%83%60y%83%A4%98%88%3B%3Ed%92%82%99%8A%93%9E%89im%8B%9A%A0%92V%2BV%89%99%8C%8E~%A4%8BrY~%94%A4%98s%2FLv%A4%9C%A6%7B%98%8F%85bz%8B%A2%9E%8F%3C%2FX%90%9B%A8%8B%87%96%84i%60%7B%98%A5%9BY)R%80%9F%A3%A7%83%A1%87sXu%83%A7%9Bz.Cl%A5%A5%B0%8C%A5%99%80Z%60t%94%98%89%3C3Z%93%A2%AF%90%8D%A3%8Bn%5Eo%85%A2%93%5E.Ky%AA%A4%AA%88%A4%91%84%5Cn%7C%96%95p%2CAe%99%9A%AE%8D%9A%94%86gow%8E%9B%8C%3F%3DZ%91%A3%AF%92%92%93%87tk~%8A%97%93W%2FR%82%A4%A2%9F%87%A0%84xd%7B~%96%8Ce0No%A6%A2%A4%8A%A0%86%80bq%84%97%8F%7F%3DLn%A1%A4%AE%86%97%8E~gp%80%96%92%7CDBf%8F%A0%A8%95%99%9Btciw%84%91%83%5D%3Ac%86%A7%9B%A9%86%A3%81tY%80%81%95%86r6Xq%A7%A4%AF%86%A6%90%7D%5Epu%88%8Ay%3EBd%9A%AE%A9%8F%92%9D%81j%5E%83%8C%94%81Q5g%88%A5%AA%9C%84%A1%85p%5Bu%84%93%88j5Y%7C%AC%AC%AD%86%A0%8Cx%5Ekz%8B%8D%7BANm%95%AC%B4%94%96%97%81th%82%87%83%80N%3Bd%88%9D%AA%91%83%A0%88pk%7F%8B%92%88ZC_%82%A5%A5%98%80%90%81xbz%87%8B%8Dq%40a~%A6%AD%A3y%90%86wem%80%90%86%7FIUu%97%A5%B4%8E%89%80vlko%83%87%85ZOj%8F%AA%B6%95%83%8F%7Breo%7B%8B%85b%40c%84%A4%AB%AF%88%A1%83xdyw%8E%80n%40%5Bm%96%9B%A9%90%9A%8B%81zy%7B%8B%83wAGi%8E%9F%A7%95%96%9B%87yw%82%89%8E%81U%3B%5E%7B%99%9F%96%8C%9C%87%82o%81%89%92%85l8Rp%94%96%9C%84%A2%8F%84r%83%85%9E%90%7FBNg%8A%8A%94%82%9C%93%80oy%8A%94%8C%88%5DFc%7D%8C%91%8A%88%A5%85xp%87%8A%96%85xI%5Co%8E%86%92~%9D%95%82i%7D%88%95%8F%87UIc%7D%86%90%81%8B%9F%8Expz%90%98%92%7BUY%7D%8F%8C%89%80%97%9C%82io%84%93%8F%83aQq%8A%86%8D%82%8C%A3%8Amkz%88%8C%86xX%5B~%87%8A%8C%89%9A%A3%7Cls%82%87%8D%82nVmy%82%83%82%8B%A5%90xs%81%86%85%80%85ncswy%85%86%93%9D%87x%7C%7D%88%82%7B%7Dmjkov%86%8E%9A%93%89%84%8A%7D~y%84%7Fqdit%7B%83%8C%92%90%93%88%80%86%83%83%8A%89rdhfgx%83%8B%95%91%8E%8D%87%80%89%91%8Fwdejqw~%8D%96%90%88%88%86%85%86%97%95ved_nnt%91%9F%91%8C%88%8B%8D%8B%89%87%83l%5Dcfgv%8E%98%92%90%8F%90%8B%88%88%89%83hW%5Eheo%7F%91%9C%99%8E%93%93%88%85%8A%81oibgpoq%88%98%99%9C%91%8F%8D%81%83ytmniplm%7B%86%96%A0%93%90%94%87yqssttpjqw%89%92%95%95%99%94%8D%80zvx%7Bxkhkx%7D%86%85%90%95%91%8E%80%7B%7C%87%85%7Bhoywvy%7B%89%93%8D%86%85%88%92%95%86voouuqox%86%89%8A~y%86%96%90%80ns%87%81wxy%85%82%7C%7Fy%80%8C%94%86%7F%7B%80%80%7Bp%7D%82%83%7C%85w%7B%82%83%88%89s%7C%83zwxy%8A%7Dz%81zy%8C%87%82%82y%87%88%80x%7D%82%85q%7Fy%80%82%86~%8Bsv%7B%80~%82%7D%89%80~%7D%7C%81%8B%86~%7Bs%7Czz%7B%82%86%8D%7C%7By%84%85%8E%7C%86w%7Byzt%7F%84%8B%80%7Dy%7D%86%8B%87%80x%7D%81ty%7D%81%90%88w%81%7F%7D%86%8A%82%7Fy%81~zu%7C%81%83%7Fyw%81%83%85%84%81%7B%82~xz%7C%82%8A%7D%80%82%7F~%81%80%85%7Cv%83%80%7C%7D~%85%85%81%7F%7C%80%84%80%83%7D%7D%7F%7Cz%7D%7C%7F%81%7F%82%83%81%7F%82%81%84~%7F%7B%81~%82%7C%7F%7C%81%7D~%7C%7C~%82%80%7D%82%81%84%83%80%84%83%7B%80%7F%81%7F~%7C%81~%80~%83%81%83%83%84%81%83z%7F%83~z%7D%7B%81%7D%7C~%83%83%82%81%84%83~%7F%83%80~%7F%7B%80%7C%7D%81%7F%81%81%81%86%7F%7F%80%7F~~%7B%81%7F~%7F%81%7F%80%80%82%81%82%80~%7F%80~~%7F%80%7F%81%81%80%80%81%82%7F%80%7F%7F%7F%7F%7F%7F%80~%81~%80%80~%7F~%80%80%80~%7F%7F%81%7F%80%80%80%81%81%7F%80%7F%7F%7F%80%80%7F~%7F%7F%80%7F%81%7F%80%80%80~%80%7F%80~%80"

JinglyWiki started after an office conversation yesterday. We had a flaky wifi connection and were pleased to be able to play a beat on http://instantrimshot.com to signify a re-connection. This got us thinking about playing beats in Tiddlywiki. [[Jeremy|http://jermolene.com/]] mentioned the possibility of data: URIs, and I thought back to [[Reinier's great effort in playing sound without Flash|http://www.zwitserloot.com/files/soundkit/soundcheck.html]]. I wondered if it would work with data: URIs and to my pleasant surprise, it did. At least in FF3, which is all I've tested so far. I also forgot how tiny the code is to play audio without Flash - you just add an element to the page.

The point of JinglyWiki is you can stick a 300K file on your local file system or a USB stick and play gratuitous sounds without being online. Your iPod cost you several hundred bucks, whereas JinglyWiki is entirely free. Free as in you can spend your money on beer instead. JinglyWiki may well be the best portable music player you never paid a penny for. Groovy.

As for the name, it's a play on the much more important project Phil Hawksworth has initiated to build a JQuery based Tiddlywiki framework: [[JigglyWiki|http://www.hawksworx.com/journal/2008/08/27/announcing-jigglywiki-a-tiddlywiki-experiment-with-jquery/]]. I think this nascent effort is going to produce some wonderful plugins for the JQuery community and be an important enough project to derive novelty joke names out of :), so I'm setting the trend here.

Kiss your iPod goodbye

JinglyWiki