diff --git a/admin.py b/admin.py
index 86c0b23..8124664 100644
--- a/admin.py
+++ b/admin.py
@@ -101,7 +101,10 @@ class MapEditor(webapp.RequestHandler):
 class Selector(webapp.RequestHandler): #NOTICE: << Publicly available at /communityselector! >> [10/10/16]
 	@ndb.toplevel
 	def get(self,name):
-		if not name: self.redirect("/admin/selector/pack_1a"); return
+		if not name: 
+			whtml(self,"utility/htmls/imagesets/select-imageset.html",domain=gdi(self),imagesets=imagesets)
+			return
+		
 		name=name.split("/")[0]
 		file=imagesets[name]["file"]
 		size=imagesets[name]["size"]
@@ -110,7 +113,7 @@ class Selector(webapp.RequestHandler): #NOTICE: << Publicly available at /commun
 		xs=[]; ys=[]
 		for i in xrange(width/size): xs.append(i)
 		for j in xrange(height/size): ys.append(j)
-		whtml(self,"utility/htmls/selector.html",domain=gdi(self),name=name,file=file,size=size,width=width,height=height,xs=xs,ys=ys,scale=3)
+		whtml(self,"utility/htmls/imagesets/selector.html",domain=gdi(self),name=name,file=file,size=size,width=width,height=height,xs=xs,ys=ys,scale=3)
 	def post(self,name): self.get(name)
 
 class PhotoUpload(blobstore_handlers.BlobstoreUploadHandler):
diff --git a/utility/htmls/imagesets/select-imageset.html b/utility/htmls/imagesets/select-imageset.html
new file mode 100644
index 0000000..e95655e
--- /dev/null
+++ b/utility/htmls/imagesets/select-imageset.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
+		<script src="/js/common_functions.js?v={{domain.v}}"></script>
+		<script src="/js/functions.js?v={{domain.v}}"></script>
+		<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
+		<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
+		<style>
+			html,
+			body {
+				background: black;
+			}
+			body {
+				overflow-y: scroll;
+			}
+		</style>
+		<script>
+			var mode = "alert";
+			function clicked(x, y) {
+				if (mode == "alert") alert(x + "," + y);
+				else {
+					$(".element" + x + y).attr("class", "clickable element" + x + y + " rotate" + mode);
+				}
+			}
+		</script>
+	</head>
+	<body>
+		<ul>
+			{% for key,imageset in imagesets.items() %}
+			<li><a href="./{{key}}">{{key}} {{imageset.file}}</a></li>
+			{% endfor %}
+		</ul>
+	</body>
+</html>
diff --git a/utility/htmls/imagesets/selector.html b/utility/htmls/imagesets/selector.html
new file mode 100644
index 0000000..6ecae67
--- /dev/null
+++ b/utility/htmls/imagesets/selector.html
@@ -0,0 +1,192 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
+		<script src="/js/common_functions.js?v={{domain.v}}"></script>
+		<script src="/js/functions.js?v={{domain.v}}"></script>
+		<script src="/data.js?v={{domain.v}}"></script>
+		<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
+		<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css" />
+		<style>
+			html,
+			body {
+				background: black;
+			}
+			body {
+				overflow-y: scroll;
+			}
+			.sprite {
+				display: inline-block;
+				border: 2px solid gray;
+				margin: 2px;
+			}
+
+			.has-position {
+				border-color: yellow;
+			}
+
+			.has-item,
+			.has-condition,
+			.has-skill {
+				border-color: red;
+			}
+		</style>
+		<script>
+			// Wait for DOM to load
+			$(function () {
+				// TODO: prepare / show a little items.py snippet for easy copy paste?
+				const current_itemset = "{{name}}";
+
+				function mapBySkin(dictionary) {
+					const bySkin = {};
+					for (const key in dictionary) {
+						const value = dictionary[key];
+						if (!value.skin) continue;
+						value.id = key;
+
+						if (!bySkin[value.skin]) {
+							bySkin[value.skin] = [];
+						}
+
+						bySkin[value.skin].push(value);
+					}
+					return bySkin;
+				}
+
+				const itemsBySkin = mapBySkin(G.items);
+				const conditionsBySkin = mapBySkin(G.conditions);
+				const skillsBySkin = mapBySkin(G.skills);
+
+				// lookup table to look up skin name in G.positions by x,y coordinates
+				const skinByXY = {};
+				for (const skin in G.positions) {
+					const [itemset, x, y] = G.positions[skin];
+					let key = itemset == "" ? "pack_20" : itemset; // html.js item_container defaults to pack_20 if no itemset is specified
+					if (!skinByXY[key]) {
+						skinByXY[key] = [];
+					}
+
+					if (!skinByXY[key][x]) {
+						skinByXY[key][x] = [];
+					}
+
+					if (!skinByXY[key][x][y]) {
+						skinByXY[key][x][y] = [];
+					}
+
+					skinByXY[key][x][y].push(skin);
+				}
+
+				const itemset_skins = skinByXY[current_itemset];
+
+				// loop all sprites on this sprite sheet and enhance them with info in regards to usage.
+				const sprites = $(".sprite");
+
+				for (const element of sprites) {
+					const x = element.dataset.x;
+					const y = element.dataset.y;
+					const skins = itemset_skins[x] && itemset_skins[x][y] ? itemset_skins[x][y] : [];
+
+					let hasPosition = false;
+					let hasItem = false;
+					let hasCondition = false;
+					let hasSkill = false;
+					let title = [`${x},${y}`];
+					for (const skin of skins) {
+						const position = G.positions[skin];
+						if (position) {
+							const [itemset, x2, y2] = position;
+							hasPosition = true;
+							title.push(`G.positions.${skin} = [${itemset},${x2},${y2}]`);
+						}
+
+						const items = itemsBySkin[skin] ?? [];
+						for (const item of items) {
+							title.push(`G.items.${item.id} = ${item.name}`);
+							hasItem = true;
+						}
+
+						const conditions = conditionsBySkin[skin] ?? [];
+						for (const item of conditions) {
+							title.push(`G.conditions.${item.id} = ${item.name}`);
+							hasCondition = true;
+						}
+
+						const skills = skillsBySkin[skin] ?? [];
+						for (const item of skills) {
+							title.push(`G.skills.${item.id} = ${item.name}`);
+							hasSkill = true;
+						}
+
+						title.push("");
+					}
+
+					if (hasPosition) {
+						$(element).addClass("has-position");
+					}
+
+					if (hasItem) {
+						$(element).addClass("has-item");
+					}
+
+					if (hasCondition) {
+						$(element).addClass("has-condition");
+					}
+
+					if (hasSkill) {
+						$(element).addClass("has-skill");
+					}
+
+					$(element).attr("title", title.join("\n"));
+				}
+
+				var mode = "alert";
+				function clicked(x, y) {
+					if (mode == "alert") alert(x + "," + y);
+					else {
+						$(".element" + x + y).attr("class", "clickable element" + x + y + " rotate" + mode);
+					}
+				}
+			});
+		</script>
+	</head>
+	<body>
+		<div id="toprightcorner">
+			<div style="margin-right: 24px">
+				<div class="gamebutton clickable" onclick="mode=2">2</div>
+				<div class="gamebutton clickable" onclick="mode=4">4</div>
+				<div class="gamebutton clickable" onclick="mode=6">6</div>
+				<div class="gamebutton clickable" onclick="mode='alert'">Alert</div>
+				<div style="margin-bottom: 5px"></div>
+				<div class="gamebutton clickable" onclick="mode=8">8</div>
+				<div class="gamebutton clickable" onclick="mode=10">10</div>
+				<div class="gamebutton clickable" onclick="mode=12">12</div>
+				<div class="gamebutton clickable" onclick="mode=14">14</div>
+			</div>
+		</div>
+		<div style="color: white; background-color: black; padding: 2px; font-size: 0px">
+			{% for y in ys %}
+			<div>
+				{% for x in xs%}
+				<div
+					style="height: {{size*scale+6}}px; width: {{size*scale+6}}px; overflow: hidden"
+					class="sprite clickable element{{x}}{{y}}"
+					onclick="clicked({{x}},{{y}})"
+					data-x="{{x}}"
+					data-y="{{y}}"
+				>
+					<div
+						style="margin-left: 3px; margin-top: 3px; width: {{size*scale}}px; height: {{size*scale}}px; overflow: hidden"
+					>
+						<img
+							style="width: {{width*scale}}px; height: {{height*scale}}px; margin-left: -{{x*size*scale}}px; margin-top: -{{y*size*scale}}px;"
+							src="{{file}}"
+						/>
+					</div>
+				</div>
+				{% endfor %}
+			</div>
+			{% endfor %}
+		</div>
+	</body>
+</html>
diff --git a/utility/htmls/selector.html b/utility/htmls/selector.html
deleted file mode 100644
index 9e3ecc9..0000000
--- a/utility/htmls/selector.html
+++ /dev/null
@@ -1,58 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<script src="/js/jquery/jquery-{{domain.jquery_version}}.min.js"></script>
-		<script src="/js/common_functions.js?v={{domain.v}}"></script>
-		<script src="/js/functions.js?v={{domain.v}}"></script>
-		<link href="/css/index.css?v={{domain.v}}" rel="stylesheet" type="text/css"/>
-		<link href="/css/common.css?v={{domain.v}}" rel="stylesheet" type="text/css"/>
-		<style>
-			html,body{
-				background:black;
-			}
-			body{
-				overflow-y: scroll;
-			}
-		</style>
-		<script>
-			var mode="alert";
-			function clicked(x,y)
-			{
-				if(mode=="alert") alert(x+","+y);
-				else
-				{
-					$(".element"+x+y).attr("class","clickable element"+x+y+" rotate"+mode);
-				}
-			}
-		</script>
-	</head>
-	<body>
-		<div id="toprightcorner">
-			<div style="margin-right: 24px">
-				<div class="gamebutton clickable" onclick="mode=2">2</div>
-				<div class="gamebutton clickable" onclick="mode=4">4</div>
-				<div class="gamebutton clickable" onclick="mode=6">6</div>
-				<div class="gamebutton clickable" onclick="mode='alert'">Alert</div>
-				<div style="margin-bottom: 5px"></div>
-				<div class="gamebutton clickable" onclick="mode=8">8</div>
-				<div class="gamebutton clickable" onclick="mode=10">10</div>
-				<div class="gamebutton clickable" onclick="mode=12">12</div>
-				<div class="gamebutton clickable" onclick="mode=14">14</div>
-			</div>
-		</div>
-		<div style='color: white; background-color: black; padding: 2px; font-size: 0px'>
-			{% for y in ys %}
-				<div>
-					{% for x in xs%}
-						<div style='display:inline-block; border: 2px solid gray; margin: 2px; height: {{size*scale+6}}px; width: {{size*scale+6}}px; overflow: hidden'
-							class="clickable element{{x}}{{y}}" onclick="clicked({{x}},{{y}})">
-							<div style="margin-left: 3px; margin-top: 3px; width: {{size*scale}}px; height: {{size*scale}}px; overflow: hidden">
-								<img style='width: {{width*scale}}px; height: {{height*scale}}px; margin-left: -{{x*size*scale}}px; margin-top: -{{y*size*scale}}px;' src='{{file}}' />
-							</div>
-						</div>
-					{% endfor %}
-				</div>
-			{% endfor %}
-		</div>
-	</body>
-</html>
\ No newline at end of file