diff --git a/TODO.otl b/TODO.otl
index 4fc4e73..edaaad7 100755
--- a/TODO.otl
+++ b/TODO.otl
@@ -27,8 +27,7 @@
 		[X] add page urls
 		[X] add state saving to local storage
 		[X] use modes (CSS) for thumbnail/page views...
-	[_] 66% stage 1 - basic features
-		[_] issue browser structure
+	[X] 100% stage 1 - basic features
 		[X] global navigation bar
 		[X] real magazine structure
 		[X] 100% basic article navigation
@@ -40,11 +39,6 @@
 			[X] go to next article
 		[X] real previews
 		| use zoom to show a ribbon...
-		[_] 0% issue navigation
-			[_] issue list
-			[_] 0% issue download
-				[_] whole edition dowload and update (primary mode)
-				[_] seporate issue download (secondary)
 	[_] 25% stage 2 - templates and examples
 		[_] 0% default cover templates
 		[_] 0% default page templates
@@ -72,7 +66,14 @@
 			[_] plain
 		[X] 100% default actions
 			[X] show/hide layer
-	[_] 0% stage 3 - advanced features
+	[_] 0% stage 3 - issue browser
+		[_] issue browser structure
+		[_] 0% issue navigation
+			[_] issue list
+			[_] 0% issue download
+				[_] whole edition dowload and update (primary mode)
+				[_] seporate issue download (secondary)
+	[_] 0% stage 4 - advanced features
 		[_] 0% edition editor / publisher
 			[_] create/delete edition
 			[_] cover
diff --git a/index.html b/index.html
index 35bcb2b..1fa5ebe 100755
--- a/index.html
+++ b/index.html
@@ -6,6 +6,7 @@
 <script src="jquery.touchSwipe.js"></script>
 <script src="jstorage.js"></script>
 
+<script src="jli.js"></script>
 <script src="magazine.js"></script>
 
 <script>
diff --git a/jli.js b/jli.js
new file mode 100755
index 0000000..8ccebbe
--- /dev/null
+++ b/jli.js
@@ -0,0 +1,170 @@
+/**********************************************************************
+**********************************************************************/
+
+var DEBUG = true
+
+
+/*********************************************************************/
+// XXX find a better name for this... 
+
+// this will create a function that will add/remove a css_class to elem 
+// calling the optional callbacks before and/or after.
+//
+// elem is a jquery compatible object; default use-case: a css selector.
+//
+// the resulting function understands the folowing arguments:
+// 	- 'on'			: switch mode on
+// 	- 'off'			: switch mode off
+// 	- '?'			: return current state ('on'|'off')
+// 	- no arguments	: toggle the state
+//
+// NOTE: of only one callback is given then it will be called after the 
+// 		 class change...
+// 		 a way around this is to pass an empty function as callback_b
+//
+function createCSSClassToggler(elem, css_class, callback_a, callback_b){
+	// prepare the pre/post callbacks...
+	if(callback_b == null){
+		var callback_pre = null
+		var callback_post = callback_a
+	} else {
+		var callback_pre = callback_a
+		var callback_post = callback_b
+	}
+	// build the acual toggler function...
+	var func = function(action){
+		if(action == null || action == '?'){
+			var getter = action == '?' ? true : false
+			action = 'on'
+			// get current state...
+			if( $(elem).hasClass(css_class) ){
+				action = 'off'
+			}
+			if(getter){
+				// as the above actions indicate intent and not state, 
+				// we'll need to swap the values...
+				return action == 'on' ? 'off' : 'on'
+			}
+		}
+		if(callback_pre != null){
+			callback_pre(action)
+		}
+		// play with the class...
+		if(action == 'on'){
+			$(elem).addClass(css_class)
+		} else {
+			$(elem).removeClass(css_class)
+		}
+		if(callback_post != null){
+			callback_post(action)
+		}
+	}
+	func.doc = 'With no arguments this will toggle between "on" and '+
+		'"off".\n'+
+		'If either "on" or "off" are given then this will switch '+
+		'to that mode.\n'+
+		'If "?" is given, this will return either "on" or "off" '+
+		'depending on the current state.'
+	return func
+}
+
+
+// show a jQuary opject in viewer overlay...
+// XXX need to set .scrollTop(0) when showing different UI... 
+// 		...and not set it when the UI is the same
+// XXX this must create it's own overlay...
+function showInOverlay(obj){
+	obj.click(function(){ return false })
+	// XXX 
+	$('.viewer').addClass('overlay-mode')
+	// clean things up...
+	$('.overlay .content').children().remove()
+	// put it in the overlay...
+	$('.overlay .content').append(obj)
+	// prepare the overlay...
+	$('.overlay')
+		.one('click', function(){
+			$('.overlay')
+				.fadeOut(function(){
+					$('.overlay .content')
+						.children()
+							.remove()
+					$('.overlay-mode').removeClass('overlay-mode')
+				})
+		})
+		.fadeIn()
+	return obj
+}
+
+
+
+function overlayMessage(text){
+	return showInOverlay($('<div class="overlay-message">' +text+ '</div>'))
+}
+
+
+
+
+// XXX might be good to use apply here...
+function doWithoutTransitions(obj, func, time){
+	if(time == null){
+		time = 5
+	}	
+	obj.addClass('unanimated')
+	var res = func()
+	setTimeout(function(){obj.removeClass('unanimated')}, time)
+	return res
+}
+
+function unanimated(obj, func, time){
+	return function(){
+		if(time == null){
+			time = 5
+		}	
+		obj.addClass('unanimated')
+		var res = func.apply(func, arguments)
+		setTimeout(function(){obj.removeClass('unanimated')}, time)
+		return res
+	}
+}
+
+// Return a scale value for the given element(s).
+// NOTE: this will only return a single scale value...
+function getElementScale(elem){
+	//var transform = elem.css('transform')
+	var vendors = ['o', 'moz', 'ms', 'webkit']
+	var transform = elem.css('transform')
+	var res
+
+	// go through vendor prefixes... (hate this!)
+	if(!transform || transform == 'none'){
+		for(var i in vendors){
+			transform = elem.css('-' + vendors[i] + '-transform')
+			if(transform && transform != 'none'){
+				break
+			}
+		}
+	}
+	// no transform is set...
+	if(!transform || transform == 'none'){
+		return 1
+	}
+	// get the scale value -- first argument of scale/matrix...
+	return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
+}
+
+function setElementScale(elem, scale){
+	return elem.css({
+		'transform': 'scale('+scale+')',
+		'-moz-transform': 'scale('+scale+')',
+		'-o-transform': 'scale('+scale+')',
+		'-ms-transform': 'scale('+scale+')',
+		'-webkit-transform': 'scale('+scale+')',
+	})
+}
+
+
+
+
+/*********************************************************************/
+
diff --git a/magazine.js b/magazine.js
index 6fecd47..9c40c20 100755
--- a/magazine.js
+++ b/magazine.js
@@ -6,170 +6,9 @@ var DEBUG = true
 /* this is needed only for live resize... */
 var PAGES_VISIBLE = 1
 var PAGES_IN_RIBBON = 6
-/*********************************************************************/
-// XXX move to generic lib...
-
-// this will create a function that will add/remove a css_class to elem 
-// calling the optional callbacks before and/or after.
-//
-// elem is a jquery compatible object; default use-case: a css selector.
-//
-// the resulting function understands the folowing arguments:
-// 	- 'on'			: switch mode on
-// 	- 'off'			: switch mode off
-// 	- '?'			: return current state ('on'|'off')
-// 	- no arguments	: toggle the state
-//
-// NOTE: of only one callback is given then it will be called after the 
-// 		 class change...
-// 		 a way around this is to pass an empty function as callback_b
-//
-function createCSSClassToggler(elem, css_class, callback_a, callback_b){
-	// prepare the pre/post callbacks...
-	if(callback_b == null){
-		var callback_pre = null
-		var callback_post = callback_a
-	} else {
-		var callback_pre = callback_a
-		var callback_post = callback_b
-	}
-	// build the acual toggler function...
-	var func = function(action){
-		if(action == null || action == '?'){
-			var getter = action == '?' ? true : false
-			action = 'on'
-			// get current state...
-			if( $(elem).hasClass(css_class) ){
-				action = 'off'
-			}
-			if(getter){
-				// as the above actions indicate intent and not state, 
-				// we'll need to swap the values...
-				return action == 'on' ? 'off' : 'on'
-			}
-		}
-		if(callback_pre != null){
-			callback_pre(action)
-		}
-		// play with the class...
-		if(action == 'on'){
-			$(elem).addClass(css_class)
-		} else {
-			$(elem).removeClass(css_class)
-		}
-		if(callback_post != null){
-			callback_post(action)
-		}
-	}
-	func.doc = 'With no arguments this will toggle between "on" and '+
-		'"off".\n'+
-		'If either "on" or "off" are given then this will switch '+
-		'to that mode.\n'+
-		'If "?" is given, this will return either "on" or "off" '+
-		'depending on the current state.'
-	return func
-}
-
-
-// show a jQuary opject in viewer overlay...
-// XXX need to set .scrollTop(0) when showing different UI... 
-// 		...and not set it when the UI is the same
-// XXX this must create it's own overlay...
-function showInOverlay(obj){
-	obj.click(function(){ return false })
-	// XXX 
-	$('.viewer').addClass('overlay-mode')
-	// clean things up...
-	$('.overlay .content').children().remove()
-	// put it in the overlay...
-	$('.overlay .content').append(obj)
-	// prepare the overlay...
-	$('.overlay')
-		.one('click', function(){
-			$('.overlay')
-				.fadeOut(function(){
-					$('.overlay .content')
-						.children()
-							.remove()
-					$('.overlay-mode').removeClass('overlay-mode')
-				})
-		})
-		.fadeIn()
-	return obj
-}
-
-
-
-function overlayMessage(text){
-	return showInOverlay($('<div class="overlay-message">' +text+ '</div>'))
-}
-
-
-
-
-// XXX might be good to use apply here...
-function doWithoutTransitions(obj, func, time){
-	if(time == null){
-		time = 5
-	}	
-	obj.addClass('unanimated')
-	var res = func()
-	setTimeout(function(){obj.removeClass('unanimated')}, time)
-	return res
-}
-
-function unanimated(obj, func, time){
-	return function(){
-		if(time == null){
-			time = 5
-		}	
-		obj.addClass('unanimated')
-		var res = func.apply(func, arguments)
-		setTimeout(function(){obj.removeClass('unanimated')}, time)
-		return res
-	}
-}
-
-// Return a scale value for the given element(s).
-// NOTE: this will only return a single scale value...
-function getElementScale(elem){
-	//var transform = elem.css('transform')
-	var vendors = ['o', 'moz', 'ms', 'webkit']
-	var transform = elem.css('transform')
-	var res
-
-	// go through vendor prefixes... (hate this!)
-	if(!transform || transform == 'none'){
-		for(var i in vendors){
-			transform = elem.css('-' + vendors[i] + '-transform')
-			if(transform && transform != 'none'){
-				break
-			}
-		}
-	}
-	// no transform is set...
-	if(!transform || transform == 'none'){
-		return 1
-	}
-	// get the scale value -- first argument of scale/matrix...
-	return parseFloat((/(scale|matrix)\(([^,]*),.*\)/).exec(transform)[2])
-}
-
-function setElementScale(elem, scale){
-	return elem.css({
-		'transform': 'scale('+scale+')',
-		'-moz-transform': 'scale('+scale+')',
-		'-o-transform': 'scale('+scale+')',
-		'-ms-transform': 'scale('+scale+')',
-		'-webkit-transform': 'scale('+scale+')',
-	})
-}
-
-
 
 
 /*********************************************************************/
-
 togglePageDragging = createCSSClassToggler(
 	'.viewer',
 	'dragging')