function slides() {
	var width = 960;
	var slides = $(".slide").length;
	
	this.controller = function() {
		// Making it a bit simpler
		$(".slides").before('<ul class="controller"></ul>');
		$("ul.controller").append( $(".slides h2").map(function(i){
			return '<li><a id=s'+ i + ' href = "#" '+ (i==0 ? ' class="active"' : '') + '>' + $(this).html() + '</a></li>';
		}).get().join('') );
	
		// Prevent links on the controller
		var $a = $(".controller a");
		$a.click(function(event) {
			
			// Set the active class
			$a.removeClass("active");
			$(this).addClass("active");
		
			// Do the sliding
			var position = "-" + $(this).attr("id").slice(-1) * width + "px";

			$(".slideWrapper").animate ({ marginLeft: position }, 500);
		
			return false;
		  });
	};
	
	this.viewport = function(width,slides) {
		// Make Viewport
		$(".slide").wrapAll('<div class="slideViewport"></div>').wrapAll('<div class="slideWrapper"></div>');
	
		// Set the CSS widths
		$(".slideWrapper").css("width", width*slides+"px");
		$(".slide").css("width",width-20+"px"); /* make some space for padding */
	};
	
	/* Construct the controller and the viewport */
	this.controller();
	this.viewport(width, slides);
};