Thus We Play The Fools With Time

The list of monthly archives was getting a little long, so I decided to do something about them.  Basically, I looked at the output of Tunes2HTML, a perl script that makes a webpage out of your iPod database, and adapted the code used to cascade artists, albums, and songs into something usable for my purposes.

Those who want to know how I did it can find the info in the extended entry.  Those who just care about points can make a guess at this 2 point title.

Ok, here goes:

1.  First off, you'll need the Compare and SetVarBlock plugins.  Install them, and then continue on to the next step.

2.  Now that you have the plugins installed, insert the following snippet of JavaScript onto any pages you want to use this feature:

<script language="javascript" type="text/javascript">

var downImg = new Image();
downImg.src = "/img/tmpl/arrow-down.png"

var rightImg = new Image();
rightImg.src = "/img/tmpl/arrow-right.png"

function showYear( _yearId, _imgId ) {
	var thisYear = document.getElementById( _yearId );
	var thisImg = document.getElementById( _imgId );
	if ( thisYear.style.display == "none") {
		thisYear.style.display = "";
		thisImg.src = downImg.src;
		}
	else {
		thisYear.style.display = "none";
		thisImg.src = rightImg.src;
		}
}
</script>

I presonally recommend creating a new template module and using MovableType's include tag to include it on the pages, like so: <$MTInclude module="Script Name"$>

3.  Now, you'll want to go to the section where you are creating your archive list and replace the MTArchiveList section with this tidbit:

<MTSetVar name="year" value="0">

<MTArchiveList archive_type="Monthly">

<MTIfNotEqual a="[MTArchiveDate format='%Y']" b="[MTGetVar name='year']" numeric="1">
<MTIfNotEqual a="0" b="[MTGetVar name='year']" numeric="1">
</div>
</MTIfNotEqual>

<MTSetVarBlock name="year"><$MTArchiveDate format="%Y"$></MTSetVarBlock>
<a href="javascript:showYear('<$MTGetVar name="year"$>','img<$MTGetVar name="year"$>');" style="text-decoration:none">
<img id="img<$MTGetVar name="year"$>" src="/img/tmpl/arrow-right.png" /><$MTGetVar name="year"$>:<br />
</a>
<div id="<$MTGetVar name="year"$ >" style="position:relative;left:+15px;display:none">
</MTIfNotEqual>

<a href="<$MTArchiveLink$>"><$MTArchiveDate format="%B"$></a><br />
</MTArchiveList>

4.  Change the references to the images in both the script and template code to point to the images you want to use, and you're done.  Finally, please remember to share and enjoy!™