diff --git a/editor.html b/editor.html
new file mode 100755
index 0000000..b9aa64c
--- /dev/null
+++ b/editor.html
@@ -0,0 +1,299 @@
+<!-- XXX for some reason a doctype kills the layout, need to investigate -->
+<!--DOCTYPE html-->
+<html>
+<head>
+<title>PortableMag</title>
+
+<link rel="stylesheet" href="magazine.css">
+<link rel="stylesheet" href="magazine-custom.css">
+
+<script src="jquery.js"></script>
+<script src="jquery.touchSwipe.js"></script>
+<script src="jstorage.js"></script>
+<!-- XXX make this optional... -->
+<script src="ckeditor/ckeditor.js"></script>
+
+<script src="jli.js"></script>
+<script src="magazine.js"></script>
+
+<!-- configuration, keep this last... -->
+<script src="keybindings.js"></script>
+<script src="config.js"></script>
+
+<script>
+
+var DEBUG = true
+
+$(document).ready(function(){
+
+	if(DEBUG){
+		$('.splash').click(function(){
+			$('.splash').fadeOut()
+		})
+	}
+
+	$(window)
+		.resize(viewResizeHandler)
+		.bind('hashchange', hashChangeHandler)
+
+	$(document)
+		.keydown(makeKeyboardHandler(keybindings))
+
+	$('.viewer')
+		// setup internal events...
+		.on('pageChanged bookmarkAdded bookmarkRemoved bookmarksCleared', saveState)
+		.on('pageChanged', updatePageNumberIndicator)
+		.on('bookmarksCleared', clearBookmarkIndicators)
+		.on('bookmarkAdded', function(_, n){makeBookmarkIndicator(n)})
+		.on('bookmarkRemoved', function(_, n){removeBookmarkIndicator(n)})
+
+		// user interactions...
+		.swipe({
+			swipeStatus: swipeHandler,
+
+			// XXX these get called instead of pinches...
+			swipeUp: function(event, direction, distance, duration, fingerCount){
+				if(fingerCount == 2){
+					toggleBookmark()
+				} else {
+					togglePageView()
+				}
+			},
+			// XXX these get called instead of pinches...
+			swipeDown: function(event, direction, distance, duration, fingerCount){
+				if(fingerCount == 2){
+					toggleBookmark()
+				} else {
+					togglePageView()
+				}
+			},
+
+
+			// XXX for some reasons these lose the competition with swipes...
+			pinchIn: function(event, direction, distance, duration, fingerCount, pinchZoom) {
+				if(pinchZoom < distance){
+					return
+				}
+				if(fingerCount == 2){
+					togglePageView('on')
+				}
+			},
+			// XXX for some reasons these lose the competition with swipes...
+			pinchOut: function(event, direction, distance, duration, fingerCount, pinchZoom) {
+				if(pinchZoom < distance){
+					return
+				}
+				if(fingerCount == 2){
+					togglePageView('off')
+				}
+			},
+
+
+			// XXX for some reason this deos not bubble up the nested elements...
+			click: function(evt, elem){
+				if($(elem).hasClass('page')){
+					setCurrentPage(elem)
+				} else if($(elem).hasClass('content')){
+					setCurrentPage($(elem).parents('.page').first())
+				}
+				return true
+			},
+
+			excludedElements: '.noSwipe, a, [contenteditable=true]',
+			fingers: $.fn.swipe.fingers.ALL
+			//fingers: $.fn.swipe.fingers.THREE
+		})
+
+
+	// load state and setup everything that depends on it...
+	loadState()
+	setupNavigator()
+	setupBookmarkTouchZones()
+
+	// set default view...
+	togglePageView('on')
+
+	// hide the splash screen...
+	$(window).one('webkitTransitionEnd oTransitionEnd msTransitionEnd transitionend',
+		function(){
+			// NOTE: this will fix a bug on android -- the pages appear 
+			//		to rendering quite a bit longer than loading, so on
+			//		loadState() above the current page is set well before
+			//		it is alligned correctly, so this will reset the 
+			//		current page after everything is aligned...
+			setTimeout(function(){
+				//updateView()
+				setCurrentPage()
+			}, 300)
+			// hide the splash...
+			setTimeout(function(){
+				$('.splash').fadeOut()
+			}, 350)
+		})
+	
+
+	
+})
+
+// setup ckeditor events...
+// XXX need to $('[contenteditable]').attr('contenteditable', 'false') on
+//		thumbnail view mode and true on page view mode...
+CKEDITOR.on('instanceCreated', function(evt){
+	var editor = evt.editor
+	editor.on('focus', function(){
+		toggleEditorMode('on')
+	})
+	editor.on('blur', function(){
+		toggleEditorMode('off')
+	})
+})
+
+
+
+
+</script>
+</head>
+<body>
+
+<div class="viewer">
+
+	<!-- Splash screen -->
+	<div class="splash noSwipe">
+		<!-- XXX replace this with a background-image logo... -->
+		<table width="100%" height="100%"><tr><td align="center" valign="middle">
+			<h2><i>loading...</i></h2>
+		</td></tr></table>
+	</div>
+
+
+	<!-- XXX Magazine title... -->
+
+	<div class="top-toolbar">
+		<div class="left-set">
+			<div class="button cover title"><a href="#home">PortableMag</a></div>
+		</div>
+		<div class="right-set">
+			<div class="button prev-bookmark">
+				<a href="#prevBookmark">
+					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+					 <g>
+					  <title>Previous bookmark (S-Left)</title>
+					  <path transform="rotate(-180 18.9697 20.1122)" id="svg_13" stroke="#ffffff" d="m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
+					 </g>
+					</svg>
+				</a>
+			</div>
+			<div class="button toggle-bookmark">
+				<a href="#bookmark">
+					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+					 <g>
+					  <title>Toggle bookmark (B)</title>
+					  <rect stroke="#ffffff" id="svg_1" height="28.604868" width="24.052915" y="5.858955" x="8.807377" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
+					  <path stroke="#ffffff" id="svg_4" d="m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0" fill="#ff0000"/>
+					 </g>
+					</svg>
+				</a>
+			</div>
+			<div class="button next-bookmark">
+				<a href="#nextBookmark">
+					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+					 <g>
+					  <title>Next bookmark (S-Right)</title>
+					  <path stroke="#ffffff" id="svg_11" d="m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity="0" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#afafaf"/>
+					 </g>
+					</svg>
+				</a>
+			</div>
+			<div class="button info" style="opacity: 0.3">
+				<a href="javascript:alert('not implemented yet...')">
+					<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
+					 <g>
+					  <title>Info</title>
+					  <g id="svg_3">
+					   <circle fill="#000000" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" fill-opacity="0" cx="20.341617" cy="20.120354" r="14.302816" id="svg_2" stroke="#ffffff"/>
+					   <text fill="#ffffff" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="19.914334" y="23.397665" id="svg_5" font-size="24" font-family="Sans-serif" text-anchor="middle" xml:space="preserve" stroke-opacity="0" transform="matrix(1.02694 0 0 1.02694 -0.348556 4.34707)" stroke="#000000">i</text>
+					  </g>
+					 </g>
+					</svg>
+				</a>
+			</div>
+		</div>
+	</div>
+	<div class="bottom-toolbar">
+		<!-- this is just an example-->
+		<div class="controls">
+			<a href="#home" title="(Home)">Cover</a>
+			<a href="#prevBookmark" title="(S-Left)">&lt; Bookmark</a>
+			<a href="#prevArticle" title="(C-Left)">&lt; Article</a>
+			<a href="#prev" title="Previous page (Left)">&lt; Pa</a><a href="#next" title="Next page (Right)">ge &gt;</a>
+			<a href="#nextArticle" title="(C-Right)">Article &gt;</a>
+			<a href="#nextBookmark" title="(S-Right)">Bookmark &gt;</a>
+			<a href="#end" title="(End)">End</a>
+		</div>
+		<!-- position indicator -->
+		<div class="navigator">
+			<div class="bar">
+				<div class="indicator"></div>
+			</div>
+		</div>
+		<div class="page-number">0/0</div>
+	</div>
+
+<div class="scaler">
+<div class="aligner">
+	<div class="magazine" title="PortableMag Templates">
+		<div class="cover page current">
+			<div class="content">
+				<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
+				<h1 style="color:silver; font-size: 20px; margin-left:10px">A suit for publishing portable periodic magazines on mobile platforms.</h1-->
+
+				<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
+				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
+				 <g>
+				  <title>PortableMag cover</title>
+				  <defs>
+				   <path id="circle_path" d="m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z"/>
+				  </defs>
+				  <text fill="#7f7f7f" stroke="#000000" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="306" y="434.33334" id="svg_2" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve"/>
+				  <g id="svg_1">
+				   <g id="svg_8">
+					<text stroke="#000000" fill="#7f7f7f" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="224.898504" y="309.870464" id="svg_6" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" font-weight="bold" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Mag</text>
+					<text stroke="#000000" fill="#a8a8a8" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="156.581224" y="309.650884" id="svg_7" font-size="24" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(5.71749 0 0 5.71749 -632.211 -1442.56)">Portable</text>
+				   </g>
+				   <text stroke="#000000" fill="#afafaf" stroke-width="0" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" x="261.526111" y="338.824173" id="svg_4" font-size="15" font-family="Arial" text-anchor="middle" xml:space="preserve" transform="matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight="normal" font-style="normal">A suit for publishing portable periodic magazines on mobile platforms.</text>
+				  </g>
+				 </g>
+				</svg>
+					
+			</div>
+		</div>
+
+		<!-- XXX do we need a Magazine Credits page??? -->
+
+		<div class="article">
+			<div class="cover page">
+				<div class="content">
+					<h1 name="basics" style="color:gray;font-size:100px;">Templates...</h1>
+				</div>
+			</div>
+			<div class="page">
+				<div class="content">
+					<h1 contenteditable="true">Two column</h1>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; margin: 10px;">
+						Column 1
+					</div>
+					<div contenteditable="true" style="float:left; width: 45%; height: 100%; padding: 10px;">
+						Column 2
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+</div>
+</div>
+
+
+</body>
+</html>
+<!-- vim:set ts=4 sw=4 nowrap : -->
diff --git a/index.html b/index.html
index fcf7d62..c4af8d0 100755
--- a/index.html
+++ b/index.html
@@ -10,8 +10,6 @@
 <script src="jquery.js"></script>
 <script src="jquery.touchSwipe.js"></script>
 <script src="jstorage.js"></script>
-<!-- XXX make this optional... -->
-<script src="ckeditor/ckeditor.js"></script>
 
 <script src="jli.js"></script>
 <script src="magazine.js"></script>
@@ -135,22 +133,6 @@ $(document).ready(function(){
 	
 })
 
-// setup ckeditor events...
-// XXX need to $('[contenteditable]').attr('contenteditable', 'false') on
-//		thumbnail view mode and true on page view mode...
-CKEDITOR.on('instanceCreated', function(evt){
-	var editor = evt.editor
-	editor.on('focus', function(){
-		toggleEditorMode('on')
-	})
-	editor.on('blur', function(){
-		toggleEditorMode('off')
-	})
-})
-
-
-
-
 </script>
 </head>
 <body>
@@ -241,7 +223,7 @@ CKEDITOR.on('instanceCreated', function(evt){
 
 <div class="scaler">
 <div class="aligner">
-	<div class="magazine">
+	<div class="magazine" title="PortableMag Demo">
 		<div class="cover page current">
 			<div class="content">
 				<!--h1 style="color:gray;font-size:125px;margin-bottom:-35px; margin-top: 160px">PortableMag</h1>
diff --git a/magazine.js b/magazine.js
index 0be75af..b17a01e 100755
--- a/magazine.js
+++ b/magazine.js
@@ -774,17 +774,27 @@ function saveURLState(){
 
 // local storage state managers...
 function loadStorageState(){
-	return {
-		current_page: parseInt($.jStorage.get('current_page', 0)),
-		bookmarks: $.jStorage.get('bookmarks', [])
+	var title = $('.magazine').attr('title')
+	var data = $.jStorage.get(title, {})
+	// set the defaults...
+	if(data.current_page == null){
+		data.current_page = 0
 	}
+	if(data.bookmarks == null){
+		data.bookmarks = []
+	}
+	return data
 }
 function saveStorageState(){
-	$.jStorage.set('current_page', getPageNumber())
-	$.jStorage.set('bookmarks', buildBookmarkList())
+	var title = $('.magazine').attr('title')
+	$.jStorage.set(title, {
+			current_page: getPageNumber(),
+			bookmarks: buildBookmarkList()
+	})
 }
 function resetStorageState(){
-	$.jStorage.flush()
+	var title = $('.magazine').attr('title')
+	$.jStorage.deleteKey(title)
 }
 
 
