adds ability to move the partition

index.css

@@ -50,14 +50,56 @@ h4 {
 
 #gutter {
 	position: fixed;
+	z-index: 1;
 	top: 0;
 	left: 40%;
-	width: 40px;
+	width: 50px;
 	height: calc(100% - 40px);
 	flex-shrink: 0;
 	background: black;
-	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 80%);
-	border-right: 1px solid #222;
+	background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 40%);
+}
+
+#gutter:hover {
+	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.1) 40%)
+}
+
+#gutter div {
+	position: relative;
+	width: 20px;
+	height: 100%;
+	position: relative;
+	left: 20px;
+	border-right: 1px solid rgba(255,255,255,0.2);
+	cursor: col-resize;
+}
+
+#gutter:hover div {
+	border-right: 1px solid rgba(255,255,255,0.4);
+}
+
+#gutter div[data-tooltip]::before {
+	content: attr(data-tooltip);
+	opacity: 0;
+	transition: opacity 0ms 0ms linear;
+}
+
+#gutter div[data-tooltip]:hover::before {
+	content: attr(data-tooltip);
+	position: absolute;
+	top: 20px;
+	left: 50%;
+	transform: translateX(-40%);
+	background-color: #555;
+	padding: 4px 8px;
+	border-radius: 4px;
+	box-shadow: 0 5px 10px black;
+	white-space: nowrap;
+	font-size: 12px;
+	color: white;
+	opacity: 1;
+	transition: opacity 100ms 500ms linear;
+	pointer-events: none;  /* Make sure the tooltip doesn't interfere with other interactions */
 }
 
 #image-container {
@@ -66,7 +108,7 @@ h4 {
 	flex-wrap: wrap;
 	align-items: flex-start;
 	justify-content: space-around;
-	margin-left: calc(40% + 40px);
+	margin-left: calc(40% + 50px);
 	margin-top: 20px;
 	margin-bottom: 20px;
 	width: 100%;

index.html

@@ -164,7 +164,7 @@
 				<span id="edit_most_used" class="hidden">edit</span>
 				<!-- JS will insert checkboxes here -->
 			</div>
-			<div id="gutter"></div>
+			<div id="gutter"><div data-tooltip="drag slowly"></div></div>
 			<div id="image-container">
 				<div id="filtersHidingAll">
 					these filters hide every image<br>

index.js

@@ -9,6 +9,8 @@ var imgTypeShown = 0;
 var log = '';
 var editMode = false;
 var windowWidth = 0;
+var gutterStartPosX, mouseStartPosX, gutterEndPercentX
+var style, stylesheet, imgHoverRule;
 
 //
 //
@@ -32,6 +34,7 @@ function startUp() {
 	loadMostUsedTags();
 	updateArtistsCountPerCategory();
 	showHideLowCountTags();
+	getStyleRuleForDrag();
 }
 
 function updateFooter() {
@@ -994,6 +997,9 @@ function enterExitEditMostUsedMode(doExit) {
 			// clean up classes added to track moved tags during edit mode
 			label.classList.remove('was_moved');
 		})
+		document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
+		document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
+		document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
 		updateArtistsCountPerCategory();
 	} else {
 		// enter edit mode
@@ -1003,6 +1009,9 @@ function enterExitEditMostUsedMode(doExit) {
 		inputs.forEach(function(input) {
 			input.disabled = true;
 		});
+		document.getElementById('toggles').style.width = '';
+		document.getElementById('gutter').style.left =  '';
+		document.getElementById('image-container').style.marginLeft = '';
 	}
 }
 
@@ -1286,6 +1295,41 @@ function cleanupEventListener(imageItem) {
 	layout.removeEventListener('mousemove', imageItem.boundMouseMoveFunc);
 }
 
+function getStyleRuleForDrag() {
+	style = document.createElement('style');
+	document.head.appendChild(style);
+	stylesheet = style.sheet;
+	let index = stylesheet.insertRule('.image-item:hover .imgBox { width: 40%; }', 0);
+	imgHoverRule = stylesheet.cssRules[index];
+}
+
+function movePartition(e) {
+	let newPos = gutterStartPosX + e.pageX - mouseStartPosX;
+	if(newPos < 240) {
+		newPos = 240;
+	} else if(newPos > window.innerWidth - 350) {
+		newPos = window.innerWidth - 350;
+	}
+	gutterEndPercentX = (newPos / window.innerWidth) * 100;
+	document.getElementById('toggles').style.width = 'calc(' + gutterEndPercentX + '% - 20px)';
+	document.getElementById('gutter').style.left =  gutterEndPercentX + '%';
+	document.getElementById('image-container').style.marginLeft = 'calc(' + gutterEndPercentX + '% + 50px)';
+	imgHoverRule.style.width = gutterEndPercentX + '%';
+	// prevent text from being selected during drag
+	if (window.getSelection) {
+		if (window.getSelection().empty) {
+			// Chrome
+			window.getSelection().empty();
+		} else if (window.getSelection().removeAllRanges) {
+			// Firefox
+			window.getSelection().removeAllRanges();
+		}
+	} else if (document.selection) {
+		// IE?
+		document.selection.empty();
+	}
+}
+
 //
 //
 //
@@ -1434,7 +1478,7 @@ document.addEventListener("DOMContentLoaded", function() {
 		highlightSelectedOption('sortAR');
 		storeOptionsState();
 	});
-	// must used mode
+	// most used mode
 	var mostUsed = document.getElementById('edit_most_used');
 	mostUsed.addEventListener('click', function(e) {
 		enterExitEditMostUsedMode();
@@ -1489,6 +1533,17 @@ document.addEventListener("DOMContentLoaded", function() {
 			// toggleThisArtistsTags(this.textContent);
 		});
 	});
+	// add gutter event listener
+	var gutter = document.getElementById('gutter');
+	gutter.addEventListener('mousedown', function(e) {
+		e.preventDefault();
+		gutterStartPosX = this.offsetLeft;
+		mouseStartPosX = e.pageX;
+		this.addEventListener('mousemove', movePartition, false);
+		window.addEventListener('mouseup', function() {
+			gutter.removeEventListener('mousemove', movePartition, false);
+		}, false);
+	}, false);
 	// add footer event listeners
 	var closeFooter = document.getElementById('close_footer');
 	closeFooter.addEventListener('click', function(e) {