diff --git a/ui/TODO.otl b/ui/TODO.otl
index 07fb464f..8046d191 100755
--- a/ui/TODO.otl
+++ b/ui/TODO.otl
@@ -93,11 +93,12 @@ Roadmap
 	
 
 
-[_] 30% Gen 3 current todo
-	[_] 61% High priority
+[_] 29% Gen 3 current todo
+	[_] 59% High priority
 		[_] add indicator to ribbon up/down navigation in full screen...
 		| this might be a number or some kind of animation...
 		[_] BUG: sometimes images.json folder is created...
+		[_] rework the marks.js/modes.js to enable multi-level cropping...
 		[_] 0% Priority tasks
 			[_] full archive index
 				[_] segmented loading of images and data
@@ -272,6 +273,7 @@ Roadmap
 			[_] remove extra and repetitive actions
 			[_] caching config
 		[_] side-by side view...
+		[X] BUG: cropping in cropped mode will not save the whole data...
 		[X] 100% BUG: sometimes the previews are not updated...
 			[X] wrong resolution preview is loaded
 			| when coming out of single-image-mode after moving to a 
diff --git a/ui/data.js b/ui/data.js
index a2b79070..b1158582 100755
--- a/ui/data.js
+++ b/ui/data.js
@@ -109,6 +109,8 @@ var IMAGES_CREATED = false
 
 var MARKED = []
 
+var CROP_STACK = []
+
 // NOTE: these are named: <mode>-<feature>
 var SETTINGS = {
 	'global-theme': null,
@@ -1077,31 +1079,6 @@ function loadSettings(){
 }
 
 
-// Crop view to only given gids
-//
-// XXX make keep_ribbons option work...
-function cropDataToGIDs(gids, keep_ribbons){
-	var cur = DATA.current
-	var old_data = DATA
-	DATA = {
-		varsion: '2.0',
-		current: null,
-		ribbons: [
-			gids
-		],
-		order: DATA.order.slice(),
-	}
-	cur = getGIDBefore(cur, 0)
-	cur = cur == null ? gids[0] : cur
-	DATA.current = cur 
-
-	reloadViewer()
-	updateImages()
-
-	return old_data
-}
-
-
 
 /**********************************************************************
 * Image caching...
@@ -1177,6 +1154,98 @@ function getPrevLocation(){
 * Actions...
 */
 
+/******************************************************* Crop Data ***/
+
+function isViewCropped(){
+	return !(CROP_STACK.length == 0)
+}
+
+
+function getAllData(){
+	if(!isViewCropped()){
+		return DATA
+	} else {
+		return CROP_STACK[0]
+	}
+}
+
+
+// XXX make keep_ribbons option work...
+function makeCroppedData(gids, keep_ribbons){
+	var cur = DATA.current
+	var old_data = DATA
+	var res = {
+		varsion: '2.0',
+		current: null,
+		ribbons: [],
+		order: DATA.order.slice(),
+	}
+
+	// flat single ribbon crop...
+	if(!keep_ribbons){
+		res.ribbons[0] = gids
+
+	// keep the ribbon structure...
+	} else {
+		$.each(DATA.ribbons, function(_, e){
+			e = e.filter(function(ee){ return gids.indexOf(ee) >= 0 })
+			// skip empty ribbons...
+			if(e.length != 0){
+				res.ribbons.push(e)
+			}
+		})
+	}
+
+	cur = getGIDBefore(cur, 0)
+	cur = cur == null ? gids[0] : cur
+	res.current = cur 
+
+	return res
+}
+
+
+function cropDataTo(gids, keep_ribbons){
+	var prev_state = DATA
+
+	CROP_STACK.push(prev_state)
+	DATA = makeCroppedData(gids, keep_ribbons)
+
+	reloadViewer()
+	updateImages()
+
+	return prev_state
+}
+
+
+function uncropData(){
+	if(!isViewCropped()){
+		return DATA
+	}
+	var prev_state = DATA
+
+	DATA = CROP_STACK.pop()
+
+	reloadViewer()
+	updateImages()
+
+	return prev_state
+}
+
+
+function showAllData(){
+	var prev_state = DATA
+
+	DATA = getAllData()
+	CROP_STACK = []
+
+	reloadViewer()
+	updateImages()
+
+	return prev_state
+}
+
+
+
 /********************************************************* Workers ***/
 
 // get/create a named worker queue...
diff --git a/ui/files.js b/ui/files.js
index e47454cf..2131e078 100755
--- a/ui/files.js
+++ b/ui/files.js
@@ -438,7 +438,7 @@ function saveFileState(name, no_normalize_path){
 		}
 	}
 
-	dumpJSON(name + '-data.json', DATA)
+	dumpJSON(name + '-data.json', getAllData())
 	// XXX do we need to do this???
 	saveFileMarks(name)
 
diff --git a/ui/localstorage.js b/ui/localstorage.js
index d6e0344f..c05dcdc5 100755
--- a/ui/localstorage.js
+++ b/ui/localstorage.js
@@ -48,7 +48,7 @@ function loadLocalStorageData(attr){
 }
 function saveLocalStorageData(attr){
 	attr = attr == null ? DATA_ATTR : attr
-	localStorage[attr] = JSON.stringify(DATA)
+	localStorage[attr] = JSON.stringify(getAllData())
 	saveLocalStorageBaseURL(attr)
 }
 
diff --git a/ui/marks.js b/ui/marks.js
index ac2c564c..9151c22f 100755
--- a/ui/marks.js
+++ b/ui/marks.js
@@ -16,7 +16,7 @@
 // NOTE: MARKED may contain both gids that are not loaded and that do 
 // 		not exist, as there is no way to distinguish between the two 
 // 		situations the cleanup is optional...
-function loadMarkedOnlyData(cmp, no_cleanout_marks){
+function cropMarkedImages(cmp, no_cleanout_marks){
 	cmp = cmp == null ? imageOrderCmp : cmp
 	var cur = DATA.current
 	var marked = MARKED.slice().sort(cmp)
@@ -34,27 +34,12 @@ function loadMarkedOnlyData(cmp, no_cleanout_marks){
 		}
 	}
 
-	ALL_DATA = cropDataToGIDs(marked)
+	ALL_DATA = cropDataTo(marked)
 
 	return DATA
 }
 
 
-// XXX name this in a better way...
-function loadAllImages(){
-	var cur = DATA.current
-	DATA = ALL_DATA
-	// NOTE: if we do not do this the user will lose context every time
-	// 		returning from marks only view...
-	DATA.current = cur
-	reloadViewer()
-	// XXX FIX: for some reason not all previews get updated to the 
-	// 		right size...
-	updateImages()
-	return DATA
-}
-
-
 
 /**********************************************************************
 * Modes
@@ -72,9 +57,9 @@ var toggleMarkedOnlyView = createCSSClassToggler(
 		},
 		function(action){
 			if(action == 'on'){
-				loadMarkedOnlyData()
+				cropMarkedImages()
 			} else {
-				loadAllImages()
+				uncropData()
 			}
 		})
 
diff --git a/ui/modes.js b/ui/modes.js
index 2e2b4dc7..9bd7e2d5 100755
--- a/ui/modes.js
+++ b/ui/modes.js
@@ -184,13 +184,9 @@ var toggleSingleRibbonMode = createCSSClassToggler(
 		},
 		function(action){
 			if(action == 'on'){
-				ALL_DATA = cropDataToGIDs(DATA.ribbons[getRibbonIndex()].slice())
+				cropDataTo(DATA.ribbons[getRibbonIndex()].slice())
 			} else {
-				var cur = DATA.current
-				DATA = ALL_DATA
-				DATA.current = cur
-				reloadViewer()
-				updateImages()
+				uncropData()
 			}
 		})