function gallery(increment, visibleItems) {
	$("body").addClass("jsEnabled");
	//Add buttons to scroll the gallery
	$("#thumbs").prepend("<a href='#next' id='scroll-left'>Scroll Up</a>");
	$("#thumbs").append("<a href='#previous' id='scroll-right'>Scroll Down</a>");

	//Add Container for media and text
	$("#gallery").prepend("<div id='showcase'></div><p id='counter'></p>");	
	$("#showcase").prepend("<div id='media'><div id='wrapper'></div></div>");
	$("#showcase").append("<p></p>");

	//Wrap the ul in a holder tag
	$("#thumbs ul").wrap("<div id='slide-holder'></div>");
	var totalImages = $("#thumbs li").length;
	var galleryItem = $("#thumbs li:first");

	//Get the size of each item and any margin, padding, or border
	var totalDimensions;
	var itemSize = 80;

	var incrementAmount = increment * itemSize;
	var visibleItemsSize = visibleItems * itemSize;
	var maxOffset = (totalImages * itemSize) - visibleItemsSize;


	//Add events to the scroll buttons
	var target = $("#thumbs ul");
	$("#scroll-left").click(function() {
		scroll(target, "left", incrementAmount, maxOffset);
		return false;
	});
	$("#scroll-right").click(function() {
		scroll(target, "right", incrementAmount, maxOffset);
		return false;
	});

	var totalItems = $("#thumbs li").length;
	var counter = 0;

	// Make first gallery item active by default
	$("#thumbs li:first").each(function() {
		var link = $(this).children("a").attr("href");
		var thumbSrc = $(this).children("a").children("img").attr("src");
		var altText = $(this).children("a").children("img").attr("alt");
		var text = $(this).children("a").children("span").text();
		if(thumbSrc != null) var newThumbSrc = link;

		$("#counter").text("1 of " + totalItems);
		$(this).siblings().removeClass("active");
		$(this).addClass("active");
		$("#wrapper").prepend('<img alt="' + altText + '" class="item"" src="' + newThumbSrc + '" />');
		$("#showcase p").text(text);
		
		var wallpaper = $(this).children(".wallpaper").attr("href");
		if(wallpaper != undefined) {
			$("#showcase").append("<a class='wallpaper' href='" + wallpaper + "'>Save As Desktop Wallpaper</a>");
		}
	});

	var $thumbs = $("#thumbs li")
	$thumbs.each(function() {
		counter ++;
		var link = $(this).children("a").attr("href");
		var altText = $(this).children("a").children("img").attr("alt");
		
		var splitLink = link.split("?");
		var end = splitLink[0].lastIndexOf(".");
		var mediaType = splitLink[0].substring(end+1);
		
		var text = $(this).children("a").children("span").text();
		var wallpaper = $(this).children(".wallpaper").attr("href");
		var itemNumber = counter;
		
		var mediaContent;
		var height, width;
		//Generate code based on the type of media to be displayed
		switch(mediaType) {

			//Audio
			case "mp3":
				//hard code the dimensions of mp3 files so that just the controls are visible
				width = 300;
				height = 16;

				/* Begin creating the OBJECT tag */
				mediaContent = '<object class="item" width="'+ width +'" height="'+ height +'" id="gallery-media" name="gallery-media"';
			
				if(navigator.plugins && navigator.plugins.length){
					mediaContent += 'data="'+ link +'" type="video/quicktime">';
				}else{ // IE
					mediaContent +=  'classid= "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">';
				}

				mediaContent += '<param value="'+ link +'" name="src"/>'+
				'<param value="aspect" name="scale"/>'+
				'<param value="true" name="controller"/>'+
				'<param value="true" name="autoplay"/>'+
				'</object>';
				//End OBJECT tag
				break;

			//Flash
			case "swf":
				//Get all the parameters for the flash movie
				var urlParams = link.split("?");
				link = urlParams[0];
				var properties = getQueryString(urlParams[1]);
				
				width = properties['width'];
				height = properties['height'];
				
				//If dimensions not defined or too large then set to max size
				if(!height || height > 403) height = 403;
				if(!width || width > 450) width = 450;
				
				flashVars = '&MM_ComponentVersion='+ properties['MM_ComponentVersion'] +'&skinName='+ properties['skinName'] +'&streamName='+ properties['streamName'] +'&autoPlay='+ properties['autoPlay'] +'&autoRewind='+ properties['autoRewind'];

				mediaContent = '<object class="item" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" height="' + height + '" width="' + width + '" align="top">'+
				'<param value="lt" name="salign"/>'+
  				'<param value="noscale" name="scale"/>'+
				'<param name="movie" value="'+ link +'">'+
				'<param name="quality" value="high">'+
				'<param value="'+ flashVars +'" name="FlashVars"/>'+
				'<embed flashvars="'+ flashVars +'" height="' + height + '" pluginspage="http://www.macromedia.com/go/getflashplayer" src="' + link + '" type="application/x-shockwave-flash" width="' + width + '" quality="high" salign="LT" scale="noscale">'+
				'<\/embed><\/object>';
				break;

			//Images
			case "jpg":
			case "jpeg":
			case "gif":
			case "png":
			case "bmp":
				mediaContent = '<img alt="' +  altText + '" class="item" src="' + link + '" />';
				break;

			//Video
			case "mov":
				var urlParams = link.split("?");
				link = urlParams[0];
				var properties = getQueryString(urlParams[1]);
				width = properties['width'];
				height = properties['height'];
				
				/* Begin creating the OBJECT tag */
				mediaContent = '<object class="item" width="'+ width +'" height="'+ height +'" id="gallery-media" name="gallery-media"';
			
				if(navigator.plugins && navigator.plugins.length){
					mediaContent += 'data="'+ link +'" type="video/quicktime">';
				}else{ // IE
					mediaContent +=  'classid= "clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab#version=6,0,2,0">';
				}
			
				mediaContent += '<param value="'+ link +'" name="src"/>'+
				'<param value="aspect" name="scale"/>'+
				'<param value="true" name="controller"/>'+
				'<param value="true" name="autoplay"/>'+
				'</object>';
				//End OBJECT tag
				break;
		}

		//When thumbnail clicked, set as active item and load content into main display area
		$(this).click(function() {
			addMediaToPage($(this), itemNumber, totalItems, mediaContent, text, wallpaper);
			return false;
		});

		//Add hover effect to gallery items
		$(this).mouseover(function() {
			$(this).addClass("jsHover");
		});
		$(this).mouseout(function() {
			$(this).removeClass("jsHover");
		});
		this.onclick = function() { return false; };
	});
}

/*
 * After all the work has been done, this will add the html to the page
 * It also removes any existing media in the showcase
 */
function addMediaToPage(el, itemNumber, totalItems, mediaContent, text, wallpaper) {
	//Display Counter
	$("#counter").text(itemNumber + " of " + totalItems);	
	$("#showcase").empty();
	$("#showcase").prepend("<div id='media'><div id='wrapper'></div></div>");
	$("#showcase").append("<p></p>");

	//Set current item as active
	el.siblings().removeClass("active");
	el.siblings().removeClass("jsHover");
	el.addClass("active");

	//Remove existing content
	try {
		document.gallery-media.Stop();
	}
	catch(e){}
	$("#wrapper .item").css("display", "none");
	$("#wrapper").empty();
	
	//Add new content
	document.getElementById("wrapper").innerHTML = mediaContent;
	$("#showcase p").text(text);
	
	//Remove existing content
	try {
		document.gallery-media.Stop();
	}
	catch(e){}
	$("#wrapper .item").css("display", "none");
	$("#wrapper").empty();
	//Add new content
	document.getElementById("wrapper").innerHTML = mediaContent;
	$("#showcase p").text(text);
	
	if(wallpaper != undefined) {
		$("#showcase").append("<a class='wallpaper' href='" + wallpaper + "'>Save As Desktop Wallpaper</a>");
	}
}

/*
 * Get the dimensions of the media content from a query string
 * Returns an array containing width and height
 */
function getDimensions(params) {
	var dim = new Array();
	params = params.split("&");
	dim[0] = params[1].substring(6);
	dim[1] = Number(params[0].substring(7)) + 16;
	return dim;
}

function getQueryString(params) {
	var props = new Array();
	
	$(params.split("&")).each(function(i) {
		var param = this.split("=");
		props[param[0]] = param[1];
	});

	return props;
}

/*
 * Scroll the gallery the required amount in the specified direction
 */
function scroll(container, direction, amount, maxOffest) {
	var cur = container.css("left");

	if(cur == "auto") cur = 0;
	else cur = Number(cur.replace("px", ""));

	switch(direction) {
		case "left":
			cur = cur + amount;
			if(cur > 0) cur = 0;
			break;
		case "right":
			cur = cur - amount;
			if(cur < - maxOffest) cur = - maxOffest;
			break;
	}

	container.css("left", cur+"px");
}