Index: main/plugin-flipbook/pages/flashpageflip/book.xsl
===================================================================
--- main/plugin-flipbook/pages/flashpageflip/book.xsl	(revision 29049)
+++ main/plugin-flipbook/pages/flashpageflip/book.xsl	(working copy)
@@ -44,28 +44,33 @@
                 <xsl:call-template name="css-flipbook" />
             </head>
             <body>
-                <xsl:call-template name="html-flipbook-body" />
-				<xsl:call-template name="html-flipbook-footer" />
+                <div id="canvas">
+	                <xsl:call-template name="html-flipbook-body" />
+					<xsl:call-template name="html-flipbook-footer" />
+			        <xsl:call-template name="js-flipbook" />
+				</div>
             </body>
         </html>
-        <xsl:call-template name="js-flipbook" />
     </xsl:template>
     
     <xsl:template name="html-flipbook-body">
-        <div id="canvas" />
-
-        <div class="zoom-icon zoom-icon-in"></div>
-        
-        <div class="magazine-viewport">
-            <div class="container">
-                <div class="magazine">
-                    <!-- Next button -->
-                    <div ignore="1" class="next-button"></div>
-                    <!-- Previous button -->
-                    <div ignore="1" class="previous-button"></div>
+	        <div class="zoom-icon zoom-icon-in"></div>
+	        
+	        <div class="magazine-viewport">
+	            <div class="container">
+	                <div class="magazine">
+	                    <!-- Next button -->
+	                    <div ignore="1" class="next-button"></div>
+	                    <!-- Previous button -->
+	                    <div ignore="1" class="previous-button"></div>
+	                </div>
+	            </div>
+                <div class="bottom">
+	                <div id="slider-bar" class="fpf-slider">
+	                   <div id="slider"></div>
+                    </div>
                 </div>
-            </div>
-        </div>
+	        </div>
     </xsl:template>
     
     <xsl:template name="html-flipbook-footer">
@@ -137,43 +142,46 @@
 	                    when: {
 	                        turning: function(event, page, view) {
 	                            var book = $j(this),
-	                            currentPage = book.turn('page'),
-	                            pages = book.turn('pages');
-	                    
-	                            // Update the current URI
-	                            Hash.go('page/' + page).update();
-	        
-	                            // Show and hide navigation buttons
-	                            $j('.thumbnails .page-'+currentPage).
-	                                parent().
-	                                removeClass('current');
-	        
-	                            $j('.thumbnails .page-'+page).
-	                                parent().
-	                                addClass('current');
+			                    currentPage = book.turn('page'),
+			                    pages = book.turn('pages');
+			            
+			                    // Update the current URI
+			
+			                    Hash.go('page/' + page).update();
+			
+			                    // Play flip sound
+			                    var browserName=navigator.appName;
+			                    if (browserName!="Microsoft Internet Explorer" &amp;&amp; browserName.indexOf("Safari")!=-1) {
+			                        if(! /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
+			                            flipsound.playclip();
+			                        };
+			                    };
+			
+			                    // Show and hide navigation buttons
+			
+			                    disableControls(page);
 	                        },
 	        
 	                        turned: function(event, page, view) {
-	                            $j(this).turn('center');
-	        
-	                            //bulunulan sayfa
-	                            var view = $j(".magazine").turn("view").join(" - ");
-	        
-	                            if ($j(this).turn('page') == $j(this).turn('pages'))
-	                            {
-	                                view = $j(this).turn('pages');
-	                            }
-	                            else if($j(this).turn('page') == 1)
-	                            {
-	                                view = 1;
-	                            }
-	        
-	                            $j("#pageNums").html(view + " / " + $j(this).turn('pages'));
-	        
-	                            if (page==1) 
-	                            { 
-	                                $j(this).turn('peel', 'br');
-	                            }
+	                            disableControls(page);
+
+			                    $j(this).turn('center');
+			                    $j('#slider').slider().slider('value', getViewNumber($j(this), page));
+			
+			                    //bulunulan sayfa
+			                    var view = $j(".magazine").turn("view").join(" - ");
+			
+			                    if ($j(this).turn('page') == $j(this).turn('pages')){
+			                        view = $j(this).turn('pages');
+			                    }else if($j(this).turn('page') == 1){
+			                        view = 1;
+			                    }
+			
+			                    $j("#pageNums").html(view + " / " + $j(this).turn('pages'));
+			
+			                    if (page==1) { 
+			                        $j(this).turn('peel', 'br');
+			                    }
 	                        },
 	        
 	                        missing: function (event, pages) {
@@ -311,7 +319,32 @@
 	            }).bind('orientationchange', function() {
 	                resizeViewport();
 	            }); 
-	        
+				
+				// Events for the next button
+			
+			    $j('.next-button').bind($j.mouseEvents.over, function() {
+			        
+			        $j(this).addClass('next-button-hover');
+			
+			    }).bind($j.mouseEvents.out, function() {
+			        
+			        $j(this).removeClass('next-button-hover');
+			
+			    }).bind($j.mouseEvents.down, function() {
+			        
+			        $j(this).addClass('next-button-down');
+			
+			    }).bind($j.mouseEvents.up, function() {
+			        
+			        $j(this).removeClass('next-button-down');
+			
+			    }).click(function() {
+			        
+			        $j('.magazine').turn('next');
+			
+			    });
+
+   
 	            // Events for the previous button
 	            
 	            $j('.previous-button').bind($j.mouseEvents.over, function() {
@@ -336,6 +369,21 @@
 	        
 	            });
 	        
+	            // Slider
+
+			    $j( "#slider" ).slider({
+			        min: 1,
+			        max: numberOfViews(flipbook),
+			
+			        start: function(event, ui) {
+			            moveBar(false);
+			        },
+			
+			        stop: function() {
+			            $j('.magazine').turn('page', Math.max(1, $j(this).slider('value')*2 - 2));
+			        }
+			    });
+	        
 	            resizeViewport();
 	        
 	            $j('.magazine').addClass('animated');
@@ -372,8 +420,8 @@
 	        yepnope({
 	            test : Modernizr.csstransforms,
 	            yep: ['<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'flashpageflip/js/flip.js')" />'],
-	            nope: ['<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'flashpageflip/js/flip.html4.js')" />'],
-	            both: ['<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'flashpageflip/js/zoom.js')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'js/org/ametys/flipbook/magazine.js')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'css/magazine.css')" />'],
+	            nope: ['<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'flashpageflip/js/flip.html4.js')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'css/jquery.ui.html4.css')" />'],
+	            both: ['<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'flashpageflip/js/zoom.js')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'css/jquery.ui.css')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'js/org/ametys/flipbook/magazine.js')" />', '<xsl:value-of select="ametys:pluginResourceURL('flipbook', 'css/magazine.css')" />'],
 	            complete: loadApp
 	        });
 	        
Index: main/plugin-flipbook/resources/css/jquery.ui.html4.css
===================================================================
--- main/plugin-flipbook/resources/css/jquery.ui.html4.css	(revision 0)
+++ main/plugin-flipbook/resources/css/jquery.ui.html4.css	(revision 0)
@@ -0,0 +1,16 @@
+.fpf-slider{
+	width:600px;
+	height:8px;
+	background-color:#B4B4B4;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.fpf-slider .ui-slider .ui-slider-handle{
+	background-color:#8F8F8F;
+	z-index:10000;
+}
+
+.fpf-slider .thumbnail{
+	background: #666;
+}
\ No newline at end of file
Index: main/plugin-flipbook/resources/css/magazine.css
===================================================================
--- main/plugin-flipbook/resources/css/magazine.css	(revision 29049)
+++ main/plugin-flipbook/resources/css/magazine.css	(working copy)
@@ -15,7 +15,7 @@
  */
 body {
 	overflow: hidden;
-	/*background-image: url(img/bg3.jpg);*/
+/* 	background-image: url(img/bg3.jpg); */
 	background-repeat: repeat;
 	background-position: 0 0;
 	background-attachment: fixed;
Index: main/plugin-flipbook/resources/css/jquery.ui.css
===================================================================
--- main/plugin-flipbook/resources/css/jquery.ui.css	(revision 0)
+++ main/plugin-flipbook/resources/css/jquery.ui.css	(revision 0)
@@ -0,0 +1,143 @@
+.fpf-slider{
+	width:600px;
+	height:8px;
+	background:rgba(0,0,0, 0.2);
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-o-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+	margin:20px auto;
+}
+
+.fpf-slider .thumbnail{
+	width:115px;
+	height:85px;
+	position:absolute;
+	background:rgba(0,0,0, 0.5);
+	z-index:10000;
+	top:-100px;
+	left:-17px;
+	display:none;
+
+	-webkit-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-webkit-transition:-webkit-transform 0.2s;
+	-webkit-border-radius:5px;
+
+	-moz-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-moz-transition:-moz-transform 0.2s;
+	-moz-border-radius:5px;
+
+	-o-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-o-transition:-o-transform 0.2s;
+	-o-border-radius:5px;
+
+	-ms-transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	-ms-transition:-ms-transform 0.2s;
+	-ms-border-radius:5px;
+
+	transform:translate3d(0px, 50px, 0px) scale(0.1, 0.1);
+	transition:transform 0.2s;
+	border-radius:5px;
+}
+
+.no-transition{
+	-webkit-transition:none;
+	-moz-transition:none;
+	-o-transition:none;
+	-ms-transition:none;
+}
+
+.fpf-slider .thumbnail div{
+	width:100px;
+	margin:7px;
+	height:70px;
+	background-color:white;
+}
+
+.fpf-slider .ui-state-hover .thumbnail{
+	display:block;
+	opacity:0;
+}
+
+.fpf-slider .ui-state-active .thumbnail{
+	display:block;
+	opacity:1;
+	-webkit-transform:scale(1, 1);
+	-moz-transform:scale(1, 1);
+	-o-transform:scale(1, 1);
+	-ms-transform:scale(1, 1);
+	transform:scale(1, 1);
+}
+
+/* Layout helpers
+----------------------------------*/
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.fpf-slider .ui-widget-overlay {
+	position: absolute;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+
+.fpf-slider .ui-slider {
+	position: relative;
+	text-align: left;
+}
+
+.fpf-slider .ui-slider-handle{
+	position: absolute;
+	z-index:0;
+	width:80px;
+	height: 8px;
+	cursor: default;
+	-webkit-border-radius:5px;
+	-moz-border-radius:5px;
+	-ms-border-radius:5px;
+	border-radius:5px;
+}
+
+.fpf-slider .ui-slider-horizontal {
+	height: 8px;
+	width:520px;
+	margin-left:39px;
+}
+
+.fpf-slider .ui-slider-horizontal .ui-slider-handle {
+	margin-left:-40px;
+	margin-top:-1px;
+}
+
+/* Interaction states
+----------------------------------*/
+.fpf-slider .ui-slider-handle{
+	border:1px solid white;
+	background-color:black;
+	opacity:0.2;
+	display:block;
+	-webkit-transition:opacity 0.2s;
+	-moz-transition:opacity 0.2s;
+	-ms-transition:opacity 0.2s;
+	-o-transition:opacity 0.2s;
+	transition:opacity 0.2s;
+}
+
+.fpf-slider .ui-state-hover{
+	opacity:0.4;
+}
+
+.fpf-slider .ui-state-active{
+	opacity:1;
+}
+
Index: main/plugin-flipbook/resources/js/org/ametys/flipbook/magazine.js
===================================================================
--- main/plugin-flipbook/resources/js/org/ametys/flipbook/magazine.js	(revision 29049)
+++ main/plugin-flipbook/resources/js/org/ametys/flipbook/magazine.js	(working copy)
@@ -132,71 +132,63 @@
 
 function resizeViewport() {
 
-	var width = $j(window).width(), height = $j(window).height() - 50, // subtracted
-	// 50
-	// for
-	// bottom
-	// toolbar
-	options = $j('.magazine').turn('options');
+	var width = $j(window).width(),
+		height = $j(window).height()-50, //subtracted 50 for bottom toolbar
+		options = $j('.magazine').turn('options');
 
 	$j('.magazine').removeClass('animated');
 
 	$j('.magazine-viewport').css({
-		width : width,
-		height : height
-	}).zoom('resize');
+		width: width,
+		height: height
+	}).
+	zoom('resize');
+
 
-	if ($j('.magazine').turn('zoom') == 1) {
+	if ($j('.magazine').turn('zoom')==1) {
 		var bound = calculateBound({
-			width : options.width,
-			height : options.height,
-			boundWidth : Math.min(options.width, width),
-			boundHeight : Math.min(options.height, height)
+			width: options.width,
+			height: options.height,
+			boundWidth: Math.min(options.width, width),
+			boundHeight: Math.min(options.height, height)
 		});
 
-		if (bound.width % 2 !== 0)
-			bound.width -= 1;
+		if (bound.width%2!==0)
+			bound.width-=1;
 
-		if (bound.width != $j('.magazine').width()
-				|| bound.height != $j('.magazine').height()) {
+			
+		if (bound.width!=$j('.magazine').width() || bound.height!=$j('.magazine').height()) {
 
 			$j('.magazine').turn('size', bound.width, bound.height);
 
-			if ($j('.magazine').turn('page') == 1)
+			if ($j('.magazine').turn('page')==1)
 				$j('.magazine').turn('peel', 'br');
+
+			$j('.next-button').css({height: bound.height, backgroundPosition: '-38px '+(bound.height/2-32/2)+'px'});
+			$j('.previous-button').css({height: bound.height, backgroundPosition: '-4px '+(bound.height/2-32/2)+'px'});
 		}
 
-		$j('.magazine').css({
-			top : -bound.height / 2,
-			left : -bound.width / 2
-		});
+		$j('.magazine').css({top: -bound.height/2, left: -bound.width/2});
 	}
 
-	var magazineOffset = $j('.magazine').offset(), boundH = height
-			- magazineOffset.top - $j('.magazine').height(), marginTop = (boundH - $j(
-			'.thumbnails > div').height()) / 2;
+	var magazineOffset = $j('.magazine').offset(),
+		boundH = height - magazineOffset.top - $j('.magazine').height(),
+		marginTop = (boundH - $j('.thumbnails > div').height()) / 2;
 
-	if (marginTop < 0) {
-		$j('.thumbnails').css({
-			height : 1
-		}); // hide thumbnails
-		// $j('.thumbnails').css({height:140}); //do not hide thumbnails
+	if (marginTop<0) {
+		$j('.thumbnails').css({height:1});
 	} else {
-		$j('.thumbnails').css({
-			height : boundH
-		});
-		$j('.thumbnails > div').css({
-			marginTop : marginTop
-		});
+		$j('.thumbnails').css({height: boundH});
+		$j('.thumbnails > div').css({marginTop: marginTop});
 	}
 
-	if (magazineOffset.top < $j('.made').height())
+	if (magazineOffset.top<$j('.made').height())
 		$j('.made').hide();
 	else
 		$j('.made').show();
 
 	$j('.magazine').addClass('animated');
-
+	
 }
 
 // Number of views in a flipbook
@@ -205,17 +197,16 @@
 	return book.turn('pages') / 2 + 1;
 }
 
-// Current view in a flipbook
+
+//Current view in a flipbook
 
 function getViewNumber(book, page) {
-	return parseInt((page || book.turn('page')) / 2 + 1, 10);
+	return parseInt((page || book.turn('page'))/2 + 1, 10);
 }
 
 function moveBar(yes) {
 	if (Modernizr && Modernizr.csstransforms) {
-		$j('#slider .ui-slider-handle').css({
-			zIndex : yes ? -1 : 10000
-		});
+		$j('#slider .ui-slider-handle').css({zIndex: yes ? -1 : 10000});
 	}
 }
 
@@ -269,4 +260,16 @@
 	}
 
 	return bound;
+}
+
+function disableControls(page) {
+	if (page==1)
+		$j('.previous-button').hide();
+	else
+		$j('.previous-button').show();
+				
+	if (page==$j('.magazine').turn('pages'))
+		$j('.next-button').hide();
+	else
+		$j('.next-button').show();
 }
\ No newline at end of file
