/**
 * Simple image swapper
 * Pär Thernström / MarsApril
 * Version 1. Just 1.
 
 Usage:
 Create markup like this:
 
 		<div class='ma-imageswapper' id='ma-imageswapper'>
			<div class='ma-imageswapper-image'>
				<img src='/images/myimage.jpg' alt='' />
			</div>		
			<div class='ma-imageswapper-nav'>
			</div>
		</div>
	
Then using javacript:
var maImageSwapperOptions = {
	images: [{src: "image1src"}, {src: "image2src"}]
}
$("#ma-imageswapper").maImageSwapper(maImageSwapperOptions);

 
 */
jQuery.fn.maImageSwapper = function(options) {
	var defaults = {
		no: "default",
		settings: "yet"
	}
	options = jQuery.extend(defaults, options);
	var e = this;
	// mark this swapper as active. makes it easy to style it both for 
	// non-active (non javascript-enabled client) and active (javascript-enabled client)
	e.addClass("ma-imageswapper-active");

	// add navigation
	var nav = e.find(".ma-imageswapper-nav");
	
	var navHTML = "<ul>";
	var navCurrentImageNum = 1;
	var image = e.find(".ma-imageswapper-image img");
	$.each(options.images, function(i, val) {
	navHTML += "<li><a href='" + val.src + "'>" + navCurrentImageNum + "</a></li>";
		navCurrentImageNum++;
	});
	navHTML += "</ul>";
	nav.html(navHTML);
	// attach a listener to the nav div
	nav.click(function(e) {
		if (e.target.tagName == "A") {
			image.attr("src", e.target.href);
		}
		return false;
	});
};