Mootools Image Swap Onclick

I'm trying to do an image swap - you click ANY image in the LI and it replaces the FIRST IMG in that LI.

I've updated the code a couple of times - currently, the following code SWAPS the image, but won't swap back!

JS:

	$$('img').addEvent('click', function() {
		this.getParent().addClass('selected');
		var src = $E('li img').getProperty('src');
		var path = src.substring(src.lastIndexOf(/^.*\//),src.length - 7);
		var img = src.substring(src.lastIndexOf('/'),src.length - 7);
		var ext = src.substring(src.lastIndexOf('.'),src.length);
		var newImg = (path + 'on' + ext);
		this.getParent().firstChild.setProperty('src', newImg);
	});
	$$('a.removeItem').addEvent('click', function() {
		this.getParent().removeClass('selected');
		var src = $E('li img').getProperty('src');
		var path = src.substring(src.lastIndexOf(/^.*\//),src.length - 7);
		var img = src.substring(src.lastIndexOf('/'),src.length - 7);
		var ext = src.substring(src.lastIndexOf('.'),src.length);
		var newImg = (path + 'off' + ext);
		this.getParent().firstChild.setProperty('src', newImg);
	});

HTML:

	ul id="whatever"
            li img src="images/image01_off.jpg"
            	Desc Text Other text
                img src="images/btn_add.jpg" class="btnAdd"
                img src="images/btn_added.jpg" class="btnAdded"
                a href="javascript:;" class="removeItem" Remove Item
            /li
            /li
            li img src="images/image02_off.jpg"
            	Desc Text Other text
                img src="images/btn_add.jpg" alt="Add to Wishlist" class="btnAdd"
                img src="images/btn_added.jpg" alt="Add to Wishlist" class="btnAdded"
                a href="javascript:;" class="removeItem" Remove Item
            /li
        /ul

Any ideas?

Thanks...