diff --git a/index.html b/index.html
index fa2c4c6..68aad0f 100755
--- a/index.html
+++ b/index.html
@@ -100,8 +100,9 @@ $(document).ready(function(){
 	// XXX do we need these here??
 	$('.button.cover').swipe({click: goToMagazineCover})
 
-	$('.button.prev-bookmark').swipe({click: prevBookmark})
 	$('.button.toggle-bookmark').swipe({click: function(){toggleBookmark()}})
+	// XXX for some reason these are not animated...
+	$('.button.prev-bookmark').swipe({click: prevBookmark})
 	$('.button.next-bookmark').swipe({click: nextBookmark})
 
 	loadState()
@@ -136,14 +137,14 @@ $(document).ready(function(){
 
 	<div class="top-toolbar">
 		<div class="left-set">
-			<div class="button cover">PortableMag</div>
+			<div class="button cover title">PortableMag</div>
 		</div>
 		<div class="right-set">
 			<div class="button prev-bookmark">
 				<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 				 <g>
-				  <title>prev</title>
+				  <title>Previous page (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>
@@ -152,7 +153,7 @@ $(document).ready(function(){
 				<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 				 <g>
-				  <title>bookmark</title>
+				  <title>Bookmark this page (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>
@@ -162,7 +163,7 @@ $(document).ready(function(){
 				<svg width="40" height="40" xmlns="http://www.w3.org/2000/svg">
 				 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 				 <g>
-				  <title>next</title>
+				  <title>Next page (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>
@@ -442,8 +443,8 @@ $(document).ready(function(){
 					var toggleViewerAnimation = function(){
 						var toggler = createCSSClassToggler(
 							// XXX this will turn off magazine animations...
-							//'.scaler, .page, .magazine',
-							'.scaler, .page',
+							'.scaler, .page, .magazine',
+							//'.scaler, .page',
 							'unanimated',
 							function(action){
 								$('#viewer_transition_state').text(action == 'on' ? 'off' : 'on')
diff --git a/magazine.css b/magazine.css
index 571eb1d..f771a42 100755
--- a/magazine.css
+++ b/magazine.css
@@ -254,6 +254,10 @@ body {
 	font-size: 14px;
 	color: white;
 }
+.top-toolbar .title,
+.bottom-toolbar .title {
+	font-size: 40px;
+}
 .top-toolbar .left-set,
 .bottom-toolbar .left-set {
 	float: left;
diff --git a/magazine.js b/magazine.js
index b9b40b1..0a0a943 100755
--- a/magazine.js
+++ b/magazine.js
@@ -195,6 +195,7 @@ function swipeHandler(evt, phase, direction, distance, duration, fingers){
 // 	- if n is 1 then fit_to_content bool argument controls wether:
 // 		- the page will be stretched to viewer (false)
 // 		- or to content (true)
+// XXX on USE_REAL_PAGE_SIZES offset is calculated incorrectly...
 function fitNPages(n, fit_to_content){
 	if(n == null){
 		n = 1
@@ -260,9 +261,14 @@ function fitNPages(n, fit_to_content){
 		// resulting page width...
 		var rW = W/scale
 	}
+	if(USE_REAL_PAGE_SIZES){
+		$('.page.no-resize').width('auto')
+	}
 
-	// XXX revise...
-	if(fit_to_content){
+	// NOTE: we need to calculate the offset as the actual widths during 
+	// 		the anumation are not correct...
+	// XXX in general this is correct, but still there is some error...
+	if(!USE_REAL_PAGE_SIZES && fit_to_content){
 		var offset = rW * getPageNumber()-1
 	} else {
 		// calculate the target offset...
@@ -273,21 +279,21 @@ function fitNPages(n, fit_to_content){
 		}
 		var i = rpages.index(cur) 
 		var offset = rW * i-1
-		// now do the unresized elements...
+		// now do the no-resize elements...
+		// XXX this still generates slightly incorrect values...
 		if(USE_REAL_PAGE_SIZES){
-			$('.page.no-resize').width('auto')
 			var nrpages = $('.page.no-resize, .current.page')
 			i = nrpages.index(cur) 
 			nrpages.splice(i)
 			nrpages.each(function(_, e){
-				offset += $(e).width()
+				offset += $(e).children('.content').width()
 			})
 		}
 	}
 
 	if(USE_REAL_PAGE_SIZES){
 		if(cur.hasClass('no-resize')){
-			rW = cur.width()
+			rW = cur.children('.content').width()
 		}
 	}
 
@@ -301,6 +307,8 @@ function fitNPages(n, fit_to_content){
 
 /********************************************************* actions ***/
 
+// Argument width is used ONLY to center the page.
+//
 // NOTE: if n is not given it will be set to current page number
 // NOTE: if width is not given it will be set to current page width.
 // NOTE: n can be:
@@ -308,11 +316,6 @@ function fitNPages(n, fit_to_content){
 // 		- page element
 // NOTE: this will fire a 'pageChanged' event on the viewer each time 
 // 		it is called...
-// XXX make this work for pages of different width...
-// 		use markers -- a marker is any element that will be used to 
-// 		allign the magazine so that the marker is at the left edge of 
-// 		the viewer...
-// 		by default a page is a marker.
 function setCurrentPage(n, offset, width){
 	if(n == null){
 		var cur = $('.current.page')