diff --git a/index.html b/index.html
index e75dcaa..0ac03b7 100755
--- a/index.html
+++ b/index.html
@@ -13,6 +13,7 @@
 
 <script src="jli.js"></script>
 <script src="magazine.js"></script>
+<script src="navigator.js"></script>
 
 <!-- configuration, keep this last... -->
 <script src="keybindings.js"></script>
diff --git a/magazine.js b/magazine.js
index f89405e..5706502 100755
--- a/magazine.js
+++ b/magazine.js
@@ -555,163 +555,6 @@ function prevBookmark(){
 
 
 
-/******************************************************* navigator ***/
-// NOTE: the navigator is not live and will need to get regenerated on
-// 		each magazine edit...
-
-// NOTE: article indicators will be regenirated on magazine structure 
-// 		change, so there is no use of linking to actual pages.
-// 		...no need in making this live.
-function makeArticleIndicator(i, article, width){
-	var bar = $('.navigator .bar')
-	var article = $(article)
-	var n = getPageNumber(article.children('.cover').first())
-	$('<div/>')
-		.prependTo($('.navigator .bar'))
-		.addClass('article')
-		.css({
-			width: width,
-			left: width*n
-		})
-		.swipe({
-			click: function(){
-				setCurrentPage(n)
-			}
-		})
-	return article
-}
-
-
-function setupArticleIndicators(W){
-	var articles = $('.magazine .article')
-	// cleanup...
-	clearArticleIndicators()
-	// set article indicator positions...
-	articles.each(function(i, e){
-		return makeArticleIndicator(i, e, W)
-	})
-}
-
-function clearArticleIndicators(){
-	$('.navigator .bar .article').remove()
-}
-	
-
-function setupNavigator(){
-	var bar = $('.navigator .bar')
-	var elems = $('.navigator .indicator, .navigator .article')
-	var pos = $('.navigator .indicator').fadeIn()
-	var pages = $('.page').length
-	var mag = $('.magazine')
-
-	var W = bar.width()/pages
-
-	setupArticleIndicators(W)
-
-	// set navigator element sizes...
-	elems.css({
-		width: W
-	})
-
-	updateNavigator()
-
-	// need to reconstruct indicators...
-	$('.magazine .page .bookmark').each(function(_, e){
-		makeBookmarkIndicator($(e).parents('.page'))
-	})
-	
-	// setup event handlers...
-	$('.viewer')
-		.on('pageChanged', function(e, n){updateNavigator(n)})
-		.on('magazineDragging', function(){updateNavigator()})
-}
-
-// XXX this needs to unbind events...
-function clearNavigator(){
-	$('.navigator .indicator').hide()
-	clearBookmarkIndicators()
-	clearArticleIndicators()
-}
-
-function resetNavigator(){
-	clearNavigator()
-	setupNavigator()
-}
-
-
-function updateNavigator(n){
-	var mag = $('.magazine')
-	var page = $('.page')
-	var bar = $('.navigator .bar')
-	var pos = $('.navigator .indicator')
-
-	var pn = page.length
-
-	var bW = bar.width()
-	var mW = mag.width()
-	var PW = page.width()
-	var pW = bar.width()/pn
-
-	if(n == null){
-		// XXX this behaves erratically if the page is zoomed...
-		var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW)
-	} else {
-		res = pW*n
-	}
-
-	// normalize the position...
-	res = res > 0 ? res: 0
-	res = res < (bW-pW) ? res: (bW-pW)
-
-	// set indicator position...
-	pos.css({
-		left: res 
-	})
-}
-
-
-function makeBookmarkIndicator(n){
-	if(n == null){
-		n = getPageNumber()
-	} else if(typeof(n) != typeof(1)){
-		n = getPageNumber(n)
-	}
-	var bar = $('.navigator .bar')
-	var pages = $('.page').length
-	var width = bar.width()/pages
-	var res = $('<div/>')
-		.prependTo($('.navigator .bar'))
-		.addClass('bookmark')
-		.css({
-			left: width*n + width*0.75
-		})
-		.attr({
-			page: n
-		})
-		.swipe({
-			click: function(){
-				setCurrentPage(n)
-			}
-		})
-
-	return res
-}
-
-function clearBookmarkIndicators(){
-	$('.navigator .bar .bookmark').remove()
-}
-function removeBookmarkIndicator(n){
-	$('.navigator .bar .bookmark[page="'+n+'"]').remove()
-}
-
-
-// NOTE: this is 1 based page number, the rest of the system is 0 based.
-function updatePageNumberIndicator(){
-	$('.page-number').text((getPageNumber()+1)+'/'+$('.page').length)
-}
-
-
-
 /*********************************************************** state ****
 *
 *  Local state consists of:
@@ -969,6 +812,8 @@ JSONMetadata = {
 		}
 	}
 }
+
+
 function readMetadata(elem, res, metadata){
 	if(res == null){
 		res = {}
@@ -1003,6 +848,7 @@ function writeMetadata(elem, res, metadata){
 	return elem
 }
 
+
 function buildJSON(export_bookmarks, export_position){
 	function _getContent(_, elem){
 		elem = $(elem)
@@ -1093,6 +939,8 @@ function loadJSON(data, ignore_chrome){
 	// XXX check version...
 	var version = data['format-version']
 	if(version != JSON_VERSION){
+		// XXX this might be a good spot to add data conversion between
+		// 		versions...
 		console.warn('WARNING: JSON Format Version Mismatch.')
 	}
 
@@ -1104,7 +952,6 @@ function loadJSON(data, ignore_chrome){
 		_build(mag, e)
 	})
 	// remove service classes...
-	// XXX should we do this here, on build or in both places...
 	mag.children('.current.page').removeClass('current')
 	loadMagazineData(mag)
 
diff --git a/navigator.js b/navigator.js
new file mode 100755
index 0000000..af9dfda
--- /dev/null
+++ b/navigator.js
@@ -0,0 +1,164 @@
+/**********************************************************************
+* 
+* Navigator 
+*
+*
+**********************************************************************/
+// NOTE: the navigator is not live and will need to get regenerated on
+// 		each magazine edit...
+
+// NOTE: article indicators will be regenirated on magazine structure 
+// 		change, so there is no use of linking to actual pages.
+// 		...no need in making this live.
+function makeArticleIndicator(i, article, width){
+	var bar = $('.navigator .bar')
+	var article = $(article)
+	var n = getPageNumber(article.children('.cover').first())
+	$('<div/>')
+		.prependTo($('.navigator .bar'))
+		.addClass('article')
+		.css({
+			width: width,
+			left: width*n
+		})
+		.swipe({
+			click: function(){
+				setCurrentPage(n)
+			}
+		})
+	return article
+}
+
+
+function setupArticleIndicators(W){
+	var articles = $('.magazine .article')
+	// cleanup...
+	clearArticleIndicators()
+	// set article indicator positions...
+	articles.each(function(i, e){
+		return makeArticleIndicator(i, e, W)
+	})
+}
+
+function clearArticleIndicators(){
+	$('.navigator .bar .article').remove()
+}
+	
+
+function setupNavigator(){
+	var bar = $('.navigator .bar')
+	var elems = $('.navigator .indicator, .navigator .article')
+	var pos = $('.navigator .indicator').fadeIn()
+	var pages = $('.page').length
+	var mag = $('.magazine')
+
+	var W = bar.width()/pages
+
+	setupArticleIndicators(W)
+
+	// set navigator element sizes...
+	elems.css({
+		width: W
+	})
+
+	updateNavigator()
+
+	// need to reconstruct indicators...
+	$('.magazine .page .bookmark').each(function(_, e){
+		makeBookmarkIndicator($(e).parents('.page'))
+	})
+	
+	// setup event handlers...
+	$('.viewer')
+		.on('pageChanged', function(e, n){updateNavigator(n)})
+		.on('magazineDragging', function(){updateNavigator()})
+}
+
+// XXX this needs to unbind events...
+function clearNavigator(){
+	$('.navigator .indicator').hide()
+	clearBookmarkIndicators()
+	clearArticleIndicators()
+}
+
+function resetNavigator(){
+	clearNavigator()
+	setupNavigator()
+}
+
+
+function updateNavigator(n){
+	var mag = $('.magazine')
+	var page = $('.page')
+	var bar = $('.navigator .bar')
+	var pos = $('.navigator .indicator')
+
+	var pn = page.length
+
+	var bW = bar.width()
+	var mW = mag.width()
+	var PW = page.width()
+	var pW = bar.width()/pn
+
+	if(n == null){
+		// XXX this behaves erratically if the page is zoomed...
+		var res = (-parseFloat(mag.css('left'))/(mW-PW)) * (bW-pW)
+	} else {
+		res = pW*n
+	}
+
+	// normalize the position...
+	res = res > 0 ? res: 0
+	res = res < (bW-pW) ? res: (bW-pW)
+
+	// set indicator position...
+	pos.css({
+		left: res 
+	})
+}
+
+
+function makeBookmarkIndicator(n){
+	if(n == null){
+		n = getPageNumber()
+	} else if(typeof(n) != typeof(1)){
+		n = getPageNumber(n)
+	}
+	var bar = $('.navigator .bar')
+	var pages = $('.page').length
+	var width = bar.width()/pages
+	var res = $('<div/>')
+		.prependTo($('.navigator .bar'))
+		.addClass('bookmark')
+		.css({
+			left: width*n + width*0.75
+		})
+		.attr({
+			page: n
+		})
+		.swipe({
+			click: function(){
+				setCurrentPage(n)
+			}
+		})
+
+	return res
+}
+
+function clearBookmarkIndicators(){
+	$('.navigator .bar .bookmark').remove()
+}
+function removeBookmarkIndicator(n){
+	$('.navigator .bar .bookmark[page="'+n+'"]').remove()
+}
+
+
+// NOTE: this is 1 based page number, the rest of the system is 0 based.
+function updatePageNumberIndicator(){
+	$('.page-number').text((getPageNumber()+1)+'/'+$('.page').length)
+}
+
+
+
+/*********************************************************************/
+// vim:set ts=4 sw=4 :