Tagsplorer - plugin demo

<!--{{{-->
<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]];}
.readOnly {background:[[ColorPalette::TertiaryPale]];}

#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>>

#--[+] popup does not close after making a selection-- (added hack [[TagsplorerMacro.h3]])
#--FND Updated to v1.3.3 (ctrl+click of tags keeps window open, otherwise acts normal - same as the core)--
#expand exclude:excludeLists parameter to be able to use multiple tags

!!!Reference
[[TW Project Directory|../twn.htm]]
[[Updated code from FND|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js]]
!!!Tiddlywiki Google Group Discussion
http://groups.google.com/group/tiddlywiki/browse_thread/thread/2986d7efae85b6ef/a5d026e62d28550c?lnk=gst&q=tagsplorer#a5d026e62d28550c

Mike

Javascript or jQuery - compare / subtract (2) arrays, output to a 3rd
array?

I am having a hard time finding a reference as to what is the best
practice for this. . .

Any thoughts or suggestion?

Mike

----
		
Mark S.   	

I guess you mean a method to produce an array by removing all items
from array 1 that are not in array 2 ?

Something like this?

function ArraySubtract(ara1,ara2) {
  var aRes = new Array() ;
  for(var i=0;i<ara1.length;i++) {
    if( ! (ara2.contains(ara1[i]) )) {
      aRes.push(ara1[i]) ;
    }
  }
  return aRes ;

}

Mark

----

Mike   	

I think that may be it (or very close)
i.e.
ara1 = [a,b,c,d,e]
ara2 = [c,e]

aRes = [a, b, d]

I tried to google a answer, but without the proper terminology I did
not get any usable results.

Thank You for the feedback,

Mike

----
		
Mark S.   	

Hi Mike,

Just to clarify -- that is what the function I posted does ;-)

Mark

...

...

From http://www.jonrobson.me.uk/static/development/css_arrows/arrow.html
using 
   <div class='text'>with transparent overlay</div>

        <div class='transparency'>
          <div class='arrow_tail_horizontal'>
          </div>
          <div class='arrow_head_horizontal_right'>          
          </div>
        </div>


.arrow_tail_horizontal {
background-color:maroon;
color:white;
float:left;
height:30px;
margin-top:15px;
position:relative;
width:200px;
}

html, div, map, dt, isindex, form {
display:block;
}

.transparency {
opacity:0.5;
}

[tag[hack]]

<<tagsplorer foo>>
<<tagsplorer foo bar>>
<<tagsplorer foo bar baz>>

{{{<<tagsplorer foo bar baz>>}}}
<<tagsplorer foo bar baz>>

{{{<<tagsplorer>>}}}
<<tagsplorer>>

{{{<<tagsplorer exclude:'excludeLists' foo bar baz>>}}}
<<tagsplorer exclude:'excludeLists' foo bar baz>>

{{{<<tagsplorer exclude:'systemConfigDisable' systemConfig>>}}}
<<tagsplorer exclude:'systemConfigDisable' systemConfig>>


{{{<<tagsplorer exclude:'systemConfig' systemConfig>>}}}
<<tagsplorer exclude:'systemConfig' systemConfig>>

{{{<<tagsplorer exclude:'systemConfig' excludeLists>>}}}
<<tagsplorer exclude:'systemConfig' excludeLists>>

...

<<tag [[original]]>>

<<tag [[hack]]>>

plugin demo

Tagsplorer

/***
|''Name''|TagsplorerMacro|
|''Description''|tag-based tiddler navigation|
|''Author''|FND|
|''Version''|1.0.0|
|''Status''|@@experimental@@|
|''Source''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/|
|''License''|[[BSD|http://www.opensource.org/licenses/bsd-license.php]]|
|''CoreVersion''|2.6.0|
|''Keywords''|navigation tagging|
!Usage
{{{
<<tagsplorer [tag] [tag] ... >>
}}}
!!Examples
<<tagsplorer systemConfig>>
!Revision History
!!v1.0 (2010-03-21)
* initial release
!To Do
* refresh handling
* sorting for tag/tiddler lists
* animations for new/removed tags/tiddlers (requires array diff'ing)
!StyleSheet
.tagsplorer ul {
	margin: 0;
	padding: 0;
}

.tagsplorer .tagSelection {
	overflow: auto;
	border: 1px solid [[ColorPalette::TertiaryLight]];
	padding: 5px;
	list-style-type: none;
	background-color: [[ColorPalette::TertiaryPale]];
}

.tagsplorer .tagSelection li {
	float: left;
	margin-right: 0.5em;
}

.tagsplorer .tiddlerList {
	margin: 5px 0 10px 1.5em;
}
!Code
***/
//{{{
(function($) {

config.shadowTiddlers.StyleSheetTagsplorer = store.getTiddlerText(tiddler.title + "##StyleSheet");
store.addNotification("StyleSheetTagsplorer", refreshStyles);

var macro = config.macros.tagsplorer = {};

config.macros.tagsplorer = $.extend(macro, {
	locale: {
		newTagLabel: "new",
		newTagTooltip: "add tag to filter",
		delTagTooltip: "remove tag",
		noTagLabel: "N/A"
	},

	handler: function(place, macroName, params, wikifier, paramString, tiddler) {
		var tags = params;
		var tiddlers = getTiddlers(tags);

		var container = $('<div class="tagsplorer" />').
			append('<ul class="tagSelection" />').
			append('<ul class="tiddlerList" />');

		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);

		container.appendTo(place);
	},
	newTagClick: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");

		var tags = container.find(".tagSelection").data("tags");
		var tiddlers = container.find(".tiddlerList").data("tiddlers");
		var tagSelection = getTagSelection(tiddlers, tags);

		var popup = Popup.create(this, "ul");
		if(tagSelection.length) {
			$.each(tagSelection, function(i, tag) {
				createTagElement(popup, tag, macro.locale.newTagTooltip, macro.onTagClick);
			});
		} else {
			createTagElement(popup, macro.locale.noTagLabel);
		}
		$(popup).data({
			container: container,
			tags: tags,
			tiddlers: tiddlers
		});
		Popup.show();
		ev.stopPropagation();
	},
	onTagClick: function(ev) {
		var btn = $(this);
		var popup = btn.closest(".popup");
		var container = popup.data("container");
		var tags = popup.data("tags");
		var tiddlers = popup.data("tiddlers");
		var tag = btn.text();
		tags.pushUnique(tag);
		tiddlers = filterTiddlers(tiddlers, tag);
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
	},
	delTag: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");
		var tags = container.find(".tagSelection").data("tags");
		tags.remove(btn.text());
		var tiddlers = getTiddlers(tags);
		btn.parent().remove();
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
	},
	refreshTags: function(tags, container) {
		var orig = container.find(".tagSelection");
		var clone = orig.clone().empty();
		clone.data("tags", tags);

		var self = this;
		$.each(tags, function(i, tag) {
			createTagElement(clone, tag, self.locale.delTagTooltip, self.delTag);
		});
		createTagElement(clone, this.locale.newTagLabel, this.locale.newTagTooltip, this.newTagClick).
			addClass("button");

		orig.replaceWith(clone);
	},
	refreshTiddlers: function(tiddlers, container) {
		var orig = container.find(".tiddlerList");
		var clone = orig.clone().empty();
		clone.data("tiddlers", tiddlers);

		$.each(tiddlers, function(i, tiddler) {
			var el = $("<li />").appendTo(clone)[0];
			createTiddlyLink(el, tiddler.title, true);
		});

		orig.replaceWith(clone);
	}
});

var getTiddlers = function(tags) {
	var tiddlers = store.getTiddlers();
	for(var i = 0; i < tags.length; i++) {
		tiddlers = filterTiddlers(tiddlers, tags[i]);
	}
	return tiddlers;
};

var filterTiddlers = function(tiddlers, tag) {
	return $.map(tiddlers, function(item, i) {
		if(item.tags.contains(tag)) {
			return item;
		}
	});
};

var getTagSelection = function(tiddlers, exclude) {
	var tags = [];
	for(var i = 0; i < tiddlers.length; i++) {
		var _tags = tiddlers[i].tags;
		for(var j = 0; j < _tags.length; j++) {
			var tag = _tags[j];
			if(!exclude.contains(tag)) {
				tags.pushUnique(tag);
			}
		}
	}
	return tags;
};

var createTagElement = function(container, label, tooltip, action) {
	var el = $("<li />").appendTo(container);
	return $('<a href="javascript:;" />').
		text(label).
		attr("title", tooltip || "").
		click(action || null).
		appendTo(el);
};

})(jQuery);
//}}}

/***
|''Name''|TagsplorerMacro|
|''Description''|tag-based faceted tiddler navigation|
|''Author''|FND|
|''Version''|1.3.2|
|''Status''|stable|
|''Source''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/|
|''License''|[[BSD|http://www.opensource.org/licenses/bsd-license.php]]|
|''CoreVersion''|2.6.0|
|''Keywords''|navigation tagging|
!Usage
{{{
<<tagsplorer [exclude:<tagName>] [tag] [tag] ... >>
}}}
!!Examples
<<tagsplorer exclude:excludeLists systemConfig>>
!Revision History
!!v1.0 (2010-03-21)
* initial release
!!v1.1 (2010-03-26)
* added sorting for tag and tiddler collections
* added section headings
* adjusted styling
!!v1.2 (2010-03-27)
* added exclude parameter for excludeLists support
!!v1.3 (2010-03-29)
* added automatic scrolling after tag selection
!To Do
* refresh handling
* "open all" functionality
* animations for new/removed tags/tiddlers (requires array diff'ing)
!StyleSheet
.tagsplorer {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	padding: 5px;
	background-color: [[ColorPalette::TertiaryPale]];
}

.tagsplorer h3,
.tagsplorer ul {
	margin: 0;
	padding: 0;
}

.tagsplorer h3 {
	margin: 0 -5px;
	padding: 0 5px;
	border: none;
}

.tagsplorer h3.tags {
	float: left;
	margin-right: 1em;
}

.tagsplorer h3.tiddlers {
	margin-top: 5px;
	border-top: 1px solid [[ColorPalette::TertiaryLight]];
	padding-top: 5px;
}

.tagsplorer .tagSelection {
	overflow: auto;
	list-style-type: none;
}

.tagsplorer .tagSelection li {
	float: left;
}

.tagsplorer .tagSelection li a.tag {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	border-top-right-radius: 0.7em;
	-webkit-border-top-right-radius: 0.7em;
	-moz-border-radius-topright: 0.7em;
	border-bottom-right-radius: 0.7em;
	-webkit-border-bottom-right-radius: 0.7em;
	-moz-border-radius-bottomright: 0.7em;
	padding: 0 0.5em 0 0.3em;
}

.tagsplorer .tiddlerList {
	margin-left: 1.5em;
}
!Code
***/
//{{{
(function($) {

config.shadowTiddlers.StyleSheetTagsplorer = store.getTiddlerText(tiddler.title + "##StyleSheet");
store.addNotification("StyleSheetTagsplorer", refreshStyles);

var macro = config.macros.tagsplorer = {};

config.macros.tagsplorer = $.extend(macro, {
	locale: {
		tagsLabel: "Tags",
		tiddlersLabel: "Tiddlers",
		newTagLabel: "[+]",
		newTagTooltip: "add tag to filter",
		delTagTooltip: "remove tag from filter",
		noTagsLabel: "N/A",
		noTiddlersLabel: "N/A"
	},

	handler: function(place, macroName, params, wikifier, paramString, tiddler) {
		var prms = paramString.parseParams("anon", null, true);
		var excludeTag = getParam(prms, "exclude", null);
		var tags = prms[0].anon || [];
		var tiddlers = getTiddlers(tags, excludeTag);

		var container = $('<div class="tagsplorer" />').
			append('<h3 class="tags" />').children(":last").
				text(this.locale.tagsLabel).end().
			append('<ul class="tagSelection" />').
			append('<h3 class="tiddlers" />').children(":last").
				text(this.locale.tiddlersLabel).end().
			append('<ul class="tiddlerList" />').
			data("excludeTag", excludeTag);

		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);

		container.appendTo(place);
	},
	newTagClick: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");

		var tags = container.find(".tagSelection").data("tags");
		var tiddlers = container.find(".tiddlerList").data("tiddlers");
		var tagSelection = getTagSelection(tiddlers, tags);

		var popup = Popup.create(this, "ul");
		if(tagSelection.length) {
			$.each(tagSelection, function(i, tag) {
				createTagElement(popup, tag, macro.locale.newTagTooltip, macro.onTagClick);
			});
		} else {
			createTagElement(popup, macro.locale.noTagsLabel);
		}
		$(popup).data({
			container: container,
			tags: tags,
			tiddlers: tiddlers
		});
		Popup.show();
		ev.stopPropagation();
		return false;
	},
	onTagClick: function(ev) {
		var btn = $(this);
		var popup = btn.closest(".popup");
		var data = popup.data();
		var tag = btn.text();
		data.tags.pushUnique(tag);
		data.tiddlers = filterTiddlers(data.tiddlers, tag);
		if(config.options.chkAnimate && anim && typeof Scroller == "function") {
			anim.startAnimating(new Scroller(data.container[0]));
		} else {
			window.scrollTo(0, ensureVisible(data.container[0]));
		}
		macro.refreshTags(data.tags, data.container);
		macro.refreshTiddlers(data.tiddlers, data.container);
		return false;
	},
	delTag: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");
		var tags = container.find(".tagSelection").data("tags");
		tags.remove(btn.text());
		var tiddlers = getTiddlers(tags, container.data("excludeTag"));
		btn.parent().remove();
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
		return false;
	},
	refreshTags: function(tags, container) {
		var orig = container.find(".tagSelection");
		var clone = orig.clone().empty();
		clone.data("tags", tags);

		var self = this;
		$.each(tags, function(i, tag) {
			createTagElement(clone, tag, self.locale.delTagTooltip, self.delTag, "tag");
		});
		createTagElement(clone, this.locale.newTagLabel, this.locale.newTagTooltip, this.newTagClick).
			addClass("button");

		orig.replaceWith(clone);
	},
	refreshTiddlers: function(tiddlers, container) {
		var orig = container.find(".tiddlerList");
		var clone = orig.clone().empty();
		clone.data("tiddlers", tiddlers);

		if(tiddlers.length) {
			$.each(tiddlers, function(i, tiddler) {
				var el = $("<li />").appendTo(clone)[0];
				createTiddlyLink(el, tiddler.title, true);
			});
		} else {
			$("<li />").text(macro.locale.noTiddlersLabel).appendTo(clone);
		}

		orig.replaceWith(clone);
	}
});

var getTiddlers = function(tags, excludeTag) {
	var tiddlers = store.getTiddlers("title", excludeTag);
	for(var i = 0; i < tags.length; i++) {
		tiddlers = filterTiddlers(tiddlers, tags[i]);
	}
	return tiddlers;
};

var filterTiddlers = function(tiddlers, tag) {
	return $.map(tiddlers, function(item, i) {
		if(item.tags.contains(tag)) {
			return item;
		}
	});
};

var getTagSelection = function(tiddlers, exclude) {
	var tags = [];
	for(var i = 0; i < tiddlers.length; i++) {
		var _tags = tiddlers[i].tags;
		for(var j = 0; j < _tags.length; j++) {
			var tag = _tags[j];
			if(!exclude.contains(tag)) {
				tags.pushUnique(tag);
			}
		}
	}
	return tags.sort();
};

var createTagElement = function(container, label, tooltip, action, className) {
	var el = $("<li />").appendTo(container);
	return $('<a href="javascript:;" />').
		addClass(className || "").
		attr("title", tooltip || "").
		text(label).
		click(action || null).
		appendTo(el);
};

})(jQuery);
//}}}

/***
|''Name''|TagsplorerMacro|
|''Description''|tag-based faceted tiddler navigation|
|''Author''|FND|
|''Version''|1.3.3|
|''Status''|stable|
|''Source''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/|
|''License''|[[BSD|http://www.opensource.org/licenses/bsd-license.php]]|
|''CoreVersion''|2.6.0|
|''Keywords''|navigation tagging|
!Usage
{{{
<<tagsplorer [exclude:<tagName>] [tag] [tag] ... >>
}}}
!!Examples
<<tagsplorer exclude:excludeLists systemConfig>>
!Revision History
!!v1.0 (2010-03-21)
* initial release
!!v1.1 (2010-03-26)
* added sorting for tag and tiddler collections
* added section headings
* adjusted styling
!!v1.2 (2010-03-27)
* added exclude parameter for excludeLists support
!!v1.3 (2010-03-29)
* added automatic scrolling after tag selection
!To Do
* refresh handling
* "open all" functionality
* animations for new/removed tags/tiddlers (requires array diff'ing)
!StyleSheet
.tagsplorer {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	padding: 5px;
	background-color: [[ColorPalette::TertiaryPale]];
}

.tagsplorer h3,
.tagsplorer ul {
	margin: 0;
	padding: 0;
}

.tagsplorer h3 {
	margin: 0 -5px;
	padding: 0 5px;
	border: none;
}

.tagsplorer h3.tags {
	float: left;
	margin-right: 1em;
}

.tagsplorer h3.tiddlers {
	margin-top: 5px;
	border-top: 1px solid [[ColorPalette::TertiaryLight]];
	padding-top: 5px;
}

.tagsplorer .tagSelection {
	overflow: auto;
	list-style-type: none;
}

.tagsplorer .tagSelection li {
	float: left;
}

.tagsplorer .tagSelection li a.tag {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	border-top-right-radius: 0.7em;
	-webkit-border-top-right-radius: 0.7em;
	-moz-border-radius-topright: 0.7em;
	border-bottom-right-radius: 0.7em;
	-webkit-border-bottom-right-radius: 0.7em;
	-moz-border-radius-bottomright: 0.7em;
	padding: 0 0.5em 0 0.3em;
}

.tagsplorer .tiddlerList {
	margin-left: 1.5em;
}
!Code
***/
//{{{
(function($) {

config.shadowTiddlers.StyleSheetTagsplorer = store.getTiddlerText(tiddler.title + "##StyleSheet");
store.addNotification("StyleSheetTagsplorer", refreshStyles);

var macro = config.macros.tagsplorer = {};

config.macros.tagsplorer = $.extend(macro, {
	locale: {
		tagsLabel: "Tags",
		tiddlersLabel: "Tiddlers",
		newTagLabel: "[+]",
		newTagTooltip: "add tag to filter",
		delTagTooltip: "remove tag from filter",
		noTagsLabel: "N/A",
		noTiddlersLabel: "N/A"
	},

	handler: function(place, macroName, params, wikifier, paramString, tiddler) {
		var prms = paramString.parseParams("anon", null, true);
		var excludeTag = getParam(prms, "exclude", null);
		var tags = prms[0].anon || [];
		var tiddlers = getTiddlers(tags, excludeTag);

		var container = $('<div class="tagsplorer" />').
			append('<h3 class="tags" />').children(":last").
				text(this.locale.tagsLabel).end().
			append('<ul class="tagSelection" />').
			append('<h3 class="tiddlers" />').children(":last").
				text(this.locale.tiddlersLabel).end().
			append('<ul class="tiddlerList" />').
			data("excludeTag", excludeTag);

		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);

		container.appendTo(place);
	},
	newTagClick: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");

		var tags = container.find(".tagSelection").data("tags");
		var tiddlers = container.find(".tiddlerList").data("tiddlers");
		var tagSelection = getTagSelection(tiddlers, tags);

		var popup = Popup.create(this, "ul");
		if(tagSelection.length) {
			$.each(tagSelection, function(i, tag) {
				createTagElement(popup, tag, macro.locale.newTagTooltip, macro.onTagClick);
			});
		} else {
			createTagElement(popup, macro.locale.noTagsLabel);
		}
		$(popup).data({
			container: container,
			tags: tags,
			tiddlers: tiddlers
		});
		Popup.show();
		ev.stopPropagation();
		return false;
	},
	onTagClick: function(ev) {
		var btn = $(this);
		var popup = btn.closest(".popup");
		var data = popup.data();
		var tag = btn.text();
		data.tags.pushUnique(tag);
		data.tiddlers = filterTiddlers(data.tiddlers, tag);
		if(config.options.chkAnimate && anim && typeof Scroller == "function") {
			anim.startAnimating(new Scroller(data.container[0]));
		} else {
			window.scrollTo(0, ensureVisible(data.container[0]));
		}
		macro.refreshTags(data.tags, data.container);
		macro.refreshTiddlers(data.tiddlers, data.container);
		return !ev.ctrlKey;
	},
	delTag: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");
		var tags = container.find(".tagSelection").data("tags");
		tags.remove(btn.text());
		var tiddlers = getTiddlers(tags, container.data("excludeTag"));
		btn.parent().remove();
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
		return false;
	},
	refreshTags: function(tags, container) {
		var orig = container.find(".tagSelection");
		var clone = orig.clone().empty();
		clone.data("tags", tags);

		var self = this;
		$.each(tags, function(i, tag) {
			createTagElement(clone, tag, self.locale.delTagTooltip, self.delTag, "tag");
		});
		createTagElement(clone, this.locale.newTagLabel, this.locale.newTagTooltip, this.newTagClick).
			addClass("button");

		orig.replaceWith(clone);
	},
	refreshTiddlers: function(tiddlers, container) {
		var orig = container.find(".tiddlerList");
		var clone = orig.clone().empty();
		clone.data("tiddlers", tiddlers);

		if(tiddlers.length) {
			$.each(tiddlers, function(i, tiddler) {
				var el = $("<li />").appendTo(clone)[0];
				createTiddlyLink(el, tiddler.title, true);
			});
		} else {
			$("<li />").text(macro.locale.noTiddlersLabel).appendTo(clone);
		}

		orig.replaceWith(clone);
	}
});

var getTiddlers = function(tags, excludeTag) {
	var tiddlers = store.getTiddlers("title", excludeTag);
	for(var i = 0; i < tags.length; i++) {
		tiddlers = filterTiddlers(tiddlers, tags[i]);
	}
	return tiddlers;
};

var filterTiddlers = function(tiddlers, tag) {
	return $.map(tiddlers, function(item, i) {
		if(item.tags.contains(tag)) {
			return item;
		}
	});
};

var getTagSelection = function(tiddlers, exclude) {
	var tags = [];
	for(var i = 0; i < tiddlers.length; i++) {
		var _tags = tiddlers[i].tags;
		for(var j = 0; j < _tags.length; j++) {
			var tag = _tags[j];
			if(!exclude.contains(tag)) {
				tags.pushUnique(tag);
			}
		}
	}
	return tags.sort();
};

var createTagElement = function(container, label, tooltip, action, className) {
	var el = $("<li />").appendTo(container);
	return $('<a href="javascript:;" />').
		addClass(className || "").
		attr("title", tooltip || "").
		text(label).
		click(action || null).
		appendTo(el);
};

})(jQuery);
//}}}

/***
|''Name''|TagsplorerMacro|
|''Description''|tag-based tiddler navigation|
|''Author''|FND|
|''Version''|1.0.0_h2|
|''Status''|@@experimental@@|
|''Source''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/|
|''License''|[[BSD|http://www.opensource.org/licenses/bsd-license.php]]|
|''CoreVersion''|2.6.0|
|''Keywords''|navigation tagging|
|''Hacks''|Mike P.(http://www.strm.us/tw.htm)|
!Concept
The macro {{{<<tagsplorer>>}}} by itself returns all tiddlers (sorted alphabetically by default)
Then a tags filter can be created or changed showing relevant information (tiddlers tagged as), with the option to
#add additional filters to drill down further (from menu bar via + button)
#remove filters to drill out (from menu bar via click tag name)
#start the tag list at a predefined point example {{{<<tagsplorer foo bar baz>>}}} shows only tiddlers tagged with foo, bar, and baz

The plugin does not modify existing tags.

!Usage
{{{
<<tagsplorer [tag] [tag] ... >>
}}}
!!Examples
<<tagsplorer systemConfig>>
!!Config
<<option chkExcludeLists >> exclude items tagged as <<tag excludeLists>>
!Revision History
!!v1.0_h2 (2010-03-24)
* added excludeLists config ! - Mike P. (used cookie instead of parameter)
!!v1.0_h1 (2010-03-24)
* added reverse sort order hack (no parameter) - overette1
* commented out, no revision
!!v1.0_h1 (2010-03-22)
* added basic excludeLists hack (no parameter) - Mike P.
!!v1.0 (2010-03-21)
* initial release
!To Do
* refresh handling
* sorting for tag/tiddler lists
* animations for new/removed tags/tiddlers (requires array diff'ing)
!StyleSheet
.tagsplorer ul {
	margin: 0;
	padding: 0;
}

.tagsplorer .tagSelection {
	overflow: auto;
	border: 1px solid [[ColorPalette::TertiaryLight]];
	padding: 5px;
	list-style-type: none;
	background-color: [[ColorPalette::TertiaryPale]];
}

.tagsplorer .tagSelection li {
	float: left;
	margin-right: 0.5em;
}

.tagsplorer .tiddlerList {
	margin: 5px 0 10px 1.5em;
}
!Code
***/
//{{{
config.options.chkExcludeLists = config.options.chkExcludeLists ? config.options.chkExcludeLists : false;
(function($) {
config.shadowTiddlers.StyleSheetTagsplorer = store.getTiddlerText(tiddler.title + "##StyleSheet");
store.addNotification("StyleSheetTagsplorer", refreshStyles);

var macro = config.macros.tagsplorer = {};

config.macros.tagsplorer = $.extend(macro, {
	locale: {
		newTagLabel: "+",
		newTagTooltip: "add tag to filter",
		delTagTooltip: "remove tag from filter",
		noTagLabel: "N/A"
	},

	handler: function(place, macroName, params, wikifier, paramString, tiddler) {
		var tags = params;
		var tiddlers = getTiddlers(tags);

		var container = $('<div class="tagsplorer" />').
			append('<ul class="tagSelection" />').
			append('<ul class="tiddlerList" />');

		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);

		container.appendTo(place);
	},
	newTagClick: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");

		var tags = container.find(".tagSelection").data("tags");
		var tiddlers = container.find(".tiddlerList").data("tiddlers");
		var tagSelection = getTagSelection(tiddlers, tags);

		var popup = Popup.create(this, "ul");
		if(tagSelection.length) {
			$.each(tagSelection, function(i, tag) {
				createTagElement(popup, tag, macro.locale.newTagTooltip, macro.onTagClick);
			});
		} else {
			createTagElement(popup, macro.locale.noTagLabel);
		}
		$(popup).data({
			container: container,
			tags: tags,
			tiddlers: tiddlers
		});
		Popup.show();
		ev.stopPropagation();
	},
	onTagClick: function(ev) {
		var btn = $(this);
		var popup = btn.closest(".popup");
		var container = popup.data("container");
		var tags = popup.data("tags");
		var tiddlers = popup.data("tiddlers");
		var tag = btn.text();
		tags.pushUnique(tag);
		tiddlers = filterTiddlers(tiddlers, tag);
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
	},
	delTag: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");
		var tags = container.find(".tagSelection").data("tags");
		tags.remove(btn.text());
		var tiddlers = getTiddlers(tags);
		btn.parent().remove();
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
	},
	refreshTags: function(tags, container) {
		var orig = container.find(".tagSelection");
		var clone = orig.clone().empty();
		clone.data("tags", tags);

		var self = this;
		$.each(tags, function(i, tag) {
			createTagElement(clone, tag, self.locale.delTagTooltip, self.delTag);
		});
		createTagElement(clone, this.locale.newTagLabel, this.locale.newTagTooltip, this.newTagClick).
			addClass("button");

		orig.replaceWith(clone);
	},
	refreshTiddlers: function(tiddlers, container) {
		var orig = container.find(".tiddlerList");
		var clone = orig.clone().empty();
		clone.data("tiddlers", tiddlers);

		$.each(tiddlers, function(i, tiddler) {
			var el = $("<li />").appendTo(clone)[0];
			createTiddlyLink(el, tiddler.title, true);
		});

		orig.replaceWith(clone);
	}
});

var getTiddlers = function(tags) {
	if (config.options.chkExcludeLists == false){
		var tiddlers = store.getTiddlers(); 
	} else {
		var tiddlers=store.getTiddlers('title','excludeLists');}
	for(var i = 0; i < tags.length; i++) {
		tiddlers = filterTiddlers(tiddlers, tags[i]);
	}
//        tiddlers.sort(); //overette1
//        tiddlers.reverse(); //overette1
	return tiddlers;

};

var filterTiddlers = function(tiddlers, tag) {
	return $.map(tiddlers, function(item, i) {
		if(item.tags.contains(tag)) {
			return item;
		}
	});
};

var getTagSelection = function(tiddlers, exclude) {
	var tags = [];
	for(var i = 0; i < tiddlers.length; i++) {
		var _tags = tiddlers[i].tags;
		for(var j = 0; j < _tags.length; j++) {
			var tag = _tags[j];
			if(!exclude.contains(tag)) {
				tags.pushUnique(tag);
			}
		}
	}
	return tags;
//        return tags.sort(); //overette1

};

var createTagElement = function(container, label, tooltip, action) {
	var el = $("<li />").appendTo(container);
	return $('<a href="javascript:;" />').
		text(label).
		attr("title", tooltip || "").
		click(action || null).
		appendTo(el);
};

})(jQuery);
//}}}

/***
|''Name''|TagsplorerMacro|
|''Description''|tag-based faceted tiddler navigation|
|''Author''|FND|
|''Version''|1.3.3|
|''Status''|stable|
|''Source''|http://svn.tiddlywiki.org/Trunk/contributors/FND/plugins/TagsplorerMacro.js|
|''CodeRepository''|http://svn.tiddlywiki.org/Trunk/contributors/FND/|
|''License''|[[BSD|http://www.opensource.org/licenses/bsd-license.php]]|
|''CoreVersion''|2.6.0|
|''Keywords''|navigation tagging|
!Usage
{{{
<<tagsplorer [exclude:<tagName>] [tag] [tag] ... >>
}}}
!!Examples
<<tagsplorer exclude:excludeLists systemConfig>>
!Revision History
!!v1.0 (2010-03-21)
* initial release
!!v1.1 (2010-03-26)
* added sorting for tag and tiddler collections
* added section headings
* adjusted styling
!!v1.2 (2010-03-27)
* added exclude parameter for excludeLists support
!!v1.3 (2010-03-29)
* added automatic scrolling after tag selection
!To Do
* refresh handling
* "open all" functionality
* animations for new/removed tags/tiddlers (requires array diff'ing)
!StyleSheet
.tagsplorer {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	padding: 5px;
	background-color: [[ColorPalette::TertiaryPale]];
}

.tagsplorer h3,
.tagsplorer ul {
	margin: 0;
	padding: 0;
}

.tagsplorer h3 {
	margin: 0 -5px;
	padding: 0 5px;
	border: none;
}

.tagsplorer h3.tags {
	float: left;
	margin-right: 1em;
}

.tagsplorer h3.tiddlers {
	margin-top: 5px;
	border-top: 1px solid [[ColorPalette::TertiaryLight]];
	padding-top: 5px;
}

.tagsplorer .tagSelection {
	overflow: auto;
	list-style-type: none;
}

.tagsplorer .tagSelection li {
	float: left;
}

.tagsplorer .tagSelection li a.tag {
	border: 1px solid [[ColorPalette::TertiaryLight]];
	border-top-right-radius: 0.7em;
	-webkit-border-top-right-radius: 0.7em;
	-moz-border-radius-topright: 0.7em;
	border-bottom-right-radius: 0.7em;
	-webkit-border-bottom-right-radius: 0.7em;
	-moz-border-radius-bottomright: 0.7em;
	padding: 0 0.5em 0 0.3em;
}

.tagsplorer .tiddlerList {
	margin-left: 1.5em;
}
!Code
***/
//{{{
(function($) {

config.shadowTiddlers.StyleSheetTagsplorer = store.getTiddlerText(tiddler.title + "##StyleSheet");
store.addNotification("StyleSheetTagsplorer", refreshStyles);

var macro = config.macros.tagsplorer = {};

config.macros.tagsplorer = $.extend(macro, {
	locale: {
		tagsLabel: "Tags",
		tiddlersLabel: "Tiddlers",
		newTagLabel: "[+]",
		newTagTooltip: "add tag to filter",
		delTagTooltip: "remove tag from filter",
		noTagsLabel: "N/A",
		noTiddlersLabel: "N/A"
	},

	handler: function(place, macroName, params, wikifier, paramString, tiddler) {
		var prms = paramString.parseParams("anon", null, true);
		var excludeTag = getParam(prms, "exclude", null);
		var tags = prms[0].anon || [];
		var tiddlers = getTiddlers(tags, excludeTag);

		var container = $('<div class="tagsplorer" />').
			append('<h3 class="tags" />').children(":last").
				text(this.locale.tagsLabel).end().
			append('<ul class="tagSelection" />').
			append('<h3 class="tiddlers" />').children(":last").
				text(this.locale.tiddlersLabel).end().
			append('<ul class="tiddlerList" />').
			data("excludeTag", excludeTag);

		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);

		container.appendTo(place);
	},
	newTagClick: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");

		var tags = container.find(".tagSelection").data("tags");
		var tiddlers = container.find(".tiddlerList").data("tiddlers");
		var tagSelection = getTagSelection(tiddlers, tags);

		var popup = Popup.create(this, "ul");
		if(tagSelection.length) {
			$.each(tagSelection, function(i, tag) {
				createTagElement(popup, tag, macro.locale.newTagTooltip, macro.onTagClick);
			});
		} else {
			createTagElement(popup, macro.locale.noTagsLabel);
		}
		$(popup).data({
			container: container,
			tags: tags,
			tiddlers: tiddlers
		});
		Popup.show();
		ev.stopPropagation();
		return false;
	},
	onTagClick: function(ev) {
		var btn = $(this);
		var popup = btn.closest(".popup");
		var data = popup.data();
		var tag = btn.text();
		data.tags.pushUnique(tag);
		data.tiddlers = filterTiddlers(data.tiddlers, tag);
		if(config.options.chkAnimate && anim && typeof Scroller == "function") {
			anim.startAnimating(new Scroller(data.container[0]));
		} else {
			window.scrollTo(0, ensureVisible(data.container[0]));
		}
		macro.refreshTags(data.tags, data.container);
		macro.refreshTiddlers(data.tiddlers, data.container);
		return !ev.ctrlKey;
	},
	delTag: function(ev) {
		var btn = $(this);
		var container = btn.closest(".tagsplorer");
		var tags = container.find(".tagSelection").data("tags");
		tags.remove(btn.text());
		var tiddlers = getTiddlers(tags, container.data("excludeTag"));
		btn.parent().remove();
		macro.refreshTags(tags, container);
		macro.refreshTiddlers(tiddlers, container);
		return false;
	},
	refreshTags: function(tags, container) {
		var orig = container.find(".tagSelection");
		var clone = orig.clone().empty();
		clone.data("tags", tags);

		var self = this;
		$.each(tags, function(i, tag) {
			createTagElement(clone, tag, self.locale.delTagTooltip, self.delTag, "tag");
		});
		createTagElement(clone, this.locale.newTagLabel, this.locale.newTagTooltip, this.newTagClick).
			addClass("button");

		orig.replaceWith(clone);
	},
	refreshTiddlers: function(tiddlers, container) {
		var orig = container.find(".tiddlerList");
		var clone = orig.clone().empty();
		clone.data("tiddlers", tiddlers);

		if(tiddlers.length) {
			$.each(tiddlers, function(i, tiddler) {
				var el = $("<li />").appendTo(clone)[0];
				createTiddlyLink(el, tiddler.title, true);
			});
		} else {
			$("<li />").text(macro.locale.noTiddlersLabel).appendTo(clone);
		}

		orig.replaceWith(clone);
	}
});

var getTiddlers = function(tags, excludeTag) {
	var tiddlers = store.getTiddlers("title", excludeTag);
	for(var i = 0; i < tags.length; i++) {
		tiddlers = filterTiddlers(tiddlers, tags[i]);
	}
	return tiddlers;
};

var filterTiddlers = function(tiddlers, tag) {
	return $.map(tiddlers, function(item, i) {
		if(item.tags.contains(tag)) {
			return item;
		}
	});
};

var getTagSelection = function(tiddlers, exclude) {
	var tags = [];
	for(var i = 0; i < tiddlers.length; i++) {
		var _tags = tiddlers[i].tags;
		for(var j = 0; j < _tags.length; j++) {
			var tag = _tags[j];
			if(!exclude.contains(tag)) {
				tags.pushUnique(tag);
			}
		}
	}
	return tags.sort();
};

var createTagElement = function(container, label, tooltip, action, className) {
	var el = $("<li />").appendTo(container);
	return $('<a href="javascript:;" />').
		addClass(className || "").
		attr("title", tooltip || "").
		text(label).
		click(action || null).
		appendTo(el);
};

})(jQuery);
//}}}

http://www.tek-tips.com/viewthread.cfm?qid=1593118&page=1
<script>
var a = [1,2,3,4,5,6];//major set
var b = [1,3,4]; //subset
var c = []; //want 2,5,6
//search thru a array to see if any values there do not appear in b array
for (var j = 0; a.length > j; j++) {
    var found=false;
    for (var i = 0; b.length > i; i++)
        if (b[i]==a[j]) {
            found=true;
            break;
        }
    if (!found) {
        c.push(a[j]);
    }//end if
}//end for j
</script>

config.options.txtUserName="Mike P.";
config.options.chkInsertTabs = true;
config.options.chkSaveBackups=false;
config.options.chkAutoSave=false;