RubyGems - kamishibai - Versions diffs - 0.6.2 - Mend

kamishibai 0.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (166) hide show

checksums.yaml +7 -0
data/.gitignore +1 -0
data/LICENSE +29 -0
data/README.md +91 -0
data/bin/kamishibai +59 -0
data/changelogs.txt +6 -0
data/images/reading.jpg +0 -0
data/images/settings.jpg +0 -0
data/images/view_browse.jpg +0 -0
data/images/view_dir.jpg +0 -0
data/kamishibai.gemspec +31 -0
data/lib/kamishibai.rb +35 -0
data/lib/kamishibai/book.rb +97 -0
data/lib/kamishibai/config.rb +90 -0
data/lib/kamishibai/database.rb +330 -0
data/lib/kamishibai/functions.rb +332 -0
data/lib/kamishibai/patches.rb +58 -0
data/lib/kamishibai/version.rb +7 -0
data/lib/kamishibai/webserver.rb +502 -0
data/lib/kamishibai/webserver_cmds.rb +26 -0
data/lib/kamishibai/webserver_config.rb +91 -0
data/lib/kamishibai/webserver_filemanager.rb +29 -0
data/lib/kamishibai/webserver_tablet.rb +259 -0
data/lib/kamishibai/workers.rb +39 -0
data/public/css/browse.css +390 -0
data/public/css/config.css +3 -0
data/public/css/reader.css +119 -0
data/public/css/styles.css +30 -0
data/public/css/tablet_browse.css +247 -0
data/public/css/tablet_reader.css +323 -0
data/public/css/tablet_reader_input.css +191 -0
data/public/images/ajax-loader.gif +0 -0
data/public/images/delete.png +0 -0
data/public/images/folder-mini-up.png +0 -0
data/public/images/folder-mini.png +0 -0
data/public/images/spinner.gif +0 -0
data/public/images/trash-empty-mini.png +0 -0
data/public/images/trash-full-mini.png +0 -0
data/public/js/browse.js +391 -0
data/public/js/config.js +190 -0
data/public/js/reader.js +497 -0
data/public/js/swipeview-k.js +478 -0
data/public/js/tablet3.js +241 -0
data/public/js/tablet3_browse.js +173 -0
data/public/js/tablet3_reader.js +534 -0
data/public/js/utilities.js +170 -0
data/public/lang/k-cn.json +82 -0
data/public/lang/k-en.json +82 -0
data/public/lang/k-ja.json +82 -0
data/public/vendor/css/bootstrap-slider.css +252 -0
data/public/vendor/css/bootstrap-theme.css +476 -0
data/public/vendor/css/bootstrap-theme.css.map +1 -0
data/public/vendor/css/bootstrap-theme.min.css +5 -0
data/public/vendor/css/bootstrap.css +6584 -0
data/public/vendor/css/bootstrap.css.map +1 -0
data/public/vendor/css/bootstrap.min.css +5 -0
data/public/vendor/css/jquery-ui-1.10.0.custom.css +1614 -0
data/public/vendor/css/jquery.mobile-1.3.1.min.css +3 -0
data/public/vendor/css/jqueryFileTree.css +91 -0
data/public/vendor/fonts/glyphicons-halflings-regular.eot +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.svg +288 -0
data/public/vendor/fonts/glyphicons-halflings-regular.ttf +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.woff +0 -0
data/public/vendor/fonts/glyphicons-halflings-regular.woff2 +0 -0
data/public/vendor/images/application.png +0 -0
data/public/vendor/images/code.png +0 -0
data/public/vendor/images/css.png +0 -0
data/public/vendor/images/db.png +0 -0
data/public/vendor/images/dim.png +0 -0
data/public/vendor/images/directory.png +0 -0
data/public/vendor/images/doc.png +0 -0
data/public/vendor/images/file.png +0 -0
data/public/vendor/images/film.png +0 -0
data/public/vendor/images/flash.png +0 -0
data/public/vendor/images/folder_open.png +0 -0
data/public/vendor/images/grey.png +0 -0
data/public/vendor/images/html.png +0 -0
data/public/vendor/images/icons-18-black.png +0 -0
data/public/vendor/images/icons-18-white.png +0 -0
data/public/vendor/images/icons-36-black.png +0 -0
data/public/vendor/images/icons-36-white.png +0 -0
data/public/vendor/images/java.png +0 -0
data/public/vendor/images/linux.png +0 -0
data/public/vendor/images/music.png +0 -0
data/public/vendor/images/pdf.png +0 -0
data/public/vendor/images/php.png +0 -0
data/public/vendor/images/picture.png +0 -0
data/public/vendor/images/ppt.png +0 -0
data/public/vendor/images/psd.png +0 -0
data/public/vendor/images/ruby.png +0 -0
data/public/vendor/images/script.png +0 -0
data/public/vendor/images/spinner.gif +0 -0
data/public/vendor/images/txt.png +0 -0
data/public/vendor/images/ui-bg_diagonals-thick_18_b81900_40x40.png +0 -0
data/public/vendor/images/ui-bg_diagonals-thick_20_666666_40x40.png +0 -0
data/public/vendor/images/ui-bg_flat_0_aaaaaa_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_10_000000_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_30_cccccc_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_50_5c5c5c_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_55_fbec88_40x100.png +0 -0
data/public/vendor/images/ui-bg_flat_75_ffffff_40x100.png +0 -0
data/public/vendor/images/ui-bg_glass_100_f6f6f6_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_100_fdf5ce_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_20_555555_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_40_0078a3_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_40_ffc73d_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_55_fbf9ee_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_65_ffffff_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_d0e5f5_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_dadada_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_75_e6e6e6_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_85_dfeffc_1x400.png +0 -0
data/public/vendor/images/ui-bg_glass_95_fef1ec_1x400.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_25_333333_500x100.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_35_f6a828_500x100.png +0 -0
data/public/vendor/images/ui-bg_gloss-wave_55_5c9ccc_500x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_100_eeeeee_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_75_cccccc_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_75_ffe45c_1x100.png +0 -0
data/public/vendor/images/ui-bg_highlight-soft_80_eeeeee_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-hard_100_f5f8f9_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-hard_100_fcfdfd_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-soft_25_000000_1x100.png +0 -0
data/public/vendor/images/ui-bg_inset-soft_30_f58400_1x100.png +0 -0
data/public/vendor/images/ui-icons_217bc0_256x240.png +0 -0
data/public/vendor/images/ui-icons_222222_256x240.png +0 -0
data/public/vendor/images/ui-icons_228ef1_256x240.png +0 -0
data/public/vendor/images/ui-icons_2e83ff_256x240.png +0 -0
data/public/vendor/images/ui-icons_454545_256x240.png +0 -0
data/public/vendor/images/ui-icons_469bdd_256x240.png +0 -0
data/public/vendor/images/ui-icons_4b8e0b_256x240.png +0 -0
data/public/vendor/images/ui-icons_6da8d5_256x240.png +0 -0
data/public/vendor/images/ui-icons_888888_256x240.png +0 -0
data/public/vendor/images/ui-icons_a83300_256x240.png +0 -0
data/public/vendor/images/ui-icons_cccccc_256x240.png +0 -0
data/public/vendor/images/ui-icons_cd0a0a_256x240.png +0 -0
data/public/vendor/images/ui-icons_d8e7f3_256x240.png +0 -0
data/public/vendor/images/ui-icons_ef8c08_256x240.png +0 -0
data/public/vendor/images/ui-icons_f9bd01_256x240.png +0 -0
data/public/vendor/images/ui-icons_ffd27a_256x240.png +0 -0
data/public/vendor/images/ui-icons_ffffff_256x240.png +0 -0
data/public/vendor/images/xls.png +0 -0
data/public/vendor/images/zip.png +0 -0
data/public/vendor/js/bootstrap-slider.js +1550 -0
data/public/vendor/js/bootstrap.js +2317 -0
data/public/vendor/js/bootstrap.min.js +7 -0
data/public/vendor/js/jquery-2.1.4.js +9210 -0
data/public/vendor/js/jquery-2.1.4.min.js +4 -0
data/public/vendor/js/jquery-2.1.4.min.map +1 -0
data/public/vendor/js/jquery-ui-1.10.2.custom.min.js +7 -0
data/public/vendor/js/jquery.cookie.js +72 -0
data/public/vendor/js/jquery.hammer.min.js +7 -0
data/public/vendor/js/jquery.lazyload.min.js +15 -0
data/public/vendor/js/jquery.localize.js +180 -0
data/public/vendor/js/jquery.mobile-1.3.1.min.js +7 -0
data/public/vendor/js/jquery.scrollTo-1.4.3.1.js +218 -0
data/public/vendor/js/jqueryFileTree.js +95 -0
data/public/vendor/js/swipeview.js +471 -0
data/views/browse.haml +97 -0
data/views/config.haml +115 -0
data/views/layout.haml +12 -0
data/views/login.haml +51 -0
data/views/reader.haml +70 -0
data/views/statistics.haml +108 -0
data/views/tablet3.haml +80 -0
metadata +334 -0

data/lib/kamishibai/webserver_cmds.rb ADDED

@@ -0,0 +1,26 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		get '/save_bookmarks' do
+			$db.save_bookmarks
+		end
+		# restart webserver
+		get '/restart' do
+			$RERUN = true
+			Process.kill("TERM", Process.pid)
+			'<html><head><meta http-equiv="refresh" content="5; url=/"></head><body>restarting...</body></html>'
+		end
+		# shutdown kamishibai
+		get '/shutdown' do
+			$RERUN = false
+			Process.kill("TERM", Process.pid)
+		end
+	end
+end

data/lib/kamishibai/webserver_config.rb ADDED

@@ -0,0 +1,91 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		# configuration page, get mode
+		get '/config' do
+			if request['get']
+				case request['get']
+					when 'srcs'
+						# get list of sources
+						content_type :javascript
+						$settings.srcs.to_s
+					when 'prefs'
+						content_type :javascript
+						"g_prefs['port'] = #{ $settings.port };\n" +
+						"g_prefs['new_book_days'] = #{ $settings.new_book_days };\n" +
+						"g_prefs['user'] = \"#{ $settings.username }\";\n" +
+						"g_prefs['pass'] = \"#{ $settings.password }\";\n" +
+						"g_prefs['resize'] = #{ $settings.image_resize };\n" +
+						"g_prefs['quality'] = #{ $settings.default_image_quality };\n"
+					when 'total_books'
+						# get number of books in db
+						content_type :javascript
+						$db.books.length.to_s
+				end
+			else
+				haml :config, :layout => false
+			end
+		end
+		# configuration page, set mode
+		post '/config' do
+			if request['set']
+				case request['set']
+					when 'srcs'
+						# save book sources
+						old_srcs = $settings.srcs.collect { |d|
+							if d[-1..-1] == '/'
+								d[0..-2]
+							else
+								d[0..-1]
+							end
+						}.sort
+						srcs = request['srcs'].split('||||').compact
+						srcs = srcs.collect { |d|
+							if d[-1..-1] == '/'
+								d[0..-2]
+							else
+								d[0..-1]
+							end
+						}.sort
+						$settings.srcs = srcs
+						$settings.save
+						# srcs has changed, reload the whole kamishibai, to reload the db
+						if old_srcs != srcs
+							init_database
+						end
+					when 'prefs'
+						# save settings
+						r = request
+						old_port = $settings.port
+						$settings.port = r['port'].to_i
+						$settings.image_resize = r['resize'] == 'on' ? true : false
+						$settings.username = r['user']
+						$settings.password = r['pass']
+						$settings.new_book_days = r['new_book_days'].to_i
+						$settings.default_image_quality = r['quality'].to_i
+						$settings.save
+						if $settings.port != old_port
+							# restart webserver if port is different from old port
+							$RERUN = true
+							Process.kill("TERM", Process.pid)
+						end
+				end
+			end
+		end
+	end
+end

data/lib/kamishibai/webserver_filemanager.rb ADDED

@@ -0,0 +1,29 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		post '/delete_book' do
+			bookcode = request['bookcode'].untaint
+			fp = $db.get_book(bookcode).fullpath
+			trash_dir = File.dirname( fp ) + '/Trash'
+			unless FileTest.directory?( trash_dir )
+				unless File.stat( File.dirname(fp) ).writable?
+					halt "Error. Directory is read only! #{ File.dirname(fp) }"
+				end
+				Dir.mkdir( trash_dir )
+			end
+			# "#{fp}  ...   #{trash_dir}"
+			File.rename( fp, trash_dir + '/' + File.basename(fp) )
+			"deleted #{File.basename(fp)}"
+		end
+	end
+end

data/lib/kamishibai/webserver_tablet.rb ADDED

@@ -0,0 +1,259 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+module Kamishibai
+	class Webserver
+		helpers do
+		end
+		# show all unique titles
+		post '/lists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by title alphabetically
+			titles = titles.sort { |a, b| a[0] <=> b[0] }
+			c = '  ' # double space instead of 0 byte, so book without title or obscure filename can be group and have divider
+			html = ''
+			titles.each { |title, bookcodes|
+				if c != title[0..0]
+					# add divider
+					c = title[0..0] == '' ? '-' : title[0..0]
+					html << "<li class=\"ui-li-divider\">#{c}</li>\n"
+				end
+				# html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists containing newly imported books
+		post '/nlists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.itime
+				next unless Time.now.to_i - book.itime < 3600*24*$settings.new_book_days
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last imported
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).itime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).itime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists books that are unfinish reading
+		post '/rlists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.page
+				next unless book.page < book.pages
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last read
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# lists books that are finish reading
+		post '/flists' do
+			content_type :text
+			titles = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.page
+				next unless book.page == book.pages
+				next unless book.title
+				next unless pregex.match( book.title )
+				if titles[ book.title ]
+					titles[ book.title ] << book.bookcode
+				else
+					titles[ book.title ] = [ book.bookcode ]
+				end
+			}
+			# sort by time last read
+			titles = titles.sort { |a, b|
+				newest_a = 0
+				a[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_a = rtime if rtime and rtime > newest_a
+				}
+				newest_b = 0
+				b[1].each { |bookcode|
+					rtime = $db.get_book(bookcode).rtime
+					newest_b = rtime if rtime and rtime > newest_b
+				}
+				newest_b <=> newest_a
+			}
+			html = ''
+			titles.each { |title, bookcodes|
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\">#{title.escape_html}</li>\n"
+			}
+			html
+		end
+		# show all unique titles
+		post '/alists' do
+			content_type :text
+			authors = {}
+			$db.books.each { |bookcode, book|
+				next unless book.fullpath_valid
+				next unless book.author
+				next unless pregex.match( book.author )
+				if authors[ book.author ]
+					authors[ book.author ] << book.bookcode
+				else
+					authors[ book.author ] = [ book.bookcode ]
+				end
+			}
+			# sort by author alphabetically
+			authors = authors.sort { |a, b| a[0] <=> b[0] }
+			c = '  ' # double space instead of 0 byte, so book without title or obscure filename can be group and have divider
+			html = ''
+			authors.each { |author, bookcodes|
+				if c != author[0..0]
+					# add divider
+					c = author[0..0] == '' ? '-' : author[0..0]
+					html << "<li class=\"ui-li-divider\">#{c}</li>"
+				end
+				html << "<li class=\"li-title\" bookcodes=\"#{bookcodes.join(',')}\" options=\"sortbyauthor\">#{author.escape_html}</li>\n"
+			}
+			html
+		end
+		# new, combined browse and reader
+		get '/tablet' do
+			cache_control :public, :must_revalidate, :max_age => 1
+			haml :tablet3, :layout => false
+		end
+		# list books ver2
+		get '/listbooks' do
+			content_type :json
+			bookcodes = request['bookcodes'] ? request['bookcodes'].split(',') : []
+			options   = request['options']   ? request['options'].split(',') : []
+			books = {}
+			for bookcode in bookcodes
+				if $db.has_bookcode?( bookcode )
+					book = $db.get_book( bookcode )
+					# book volume/chapter/etc info
+					bn = File.basename( book.fullpath )
+					bn = bn.gsub( File.extname(bn), '' )
+					bn = bn.gsub( book.title, '' )
+					# bn = bn.gsub( bn.replace(/\'/,'&#39;'), '' )
+					bn = bn.gsub( /(\(.+?\))/, '' )
+					bn = bn.gsub( /(\[.+?\])/, '' )
+					bn = bn.gsub( /(\[\])/, '' )
+					bn = bn.gsub( / +/, ' ' )
+					bn.strip!
+					books[bookcode] = {
+						:title  => book.title,
+						:sname  => bn,
+						:author => book.author,
+						:size   => book.size,
+						:mtime  => book.mtime,
+						:itime  => book.itime,
+						:rtime  => book.rtime,
+						:page   => book.page,
+						:pages  => book.pages
+					}
+				end
+			end
+			JSON.pretty_generate( books )
+		end
+	end
+end

data/lib/kamishibai/workers.rb ADDED

@@ -0,0 +1,39 @@
+# encoding: utf-8
+# License: refer to LICENSE file
+require 'thread'
+# worker thread for saving database and bookmarks
+def start_auto_save
+	# run save every 60 seconds
+	Thread.new {
+		while true
+			$db.save
+			$db.save_bookmarks
+			sleep 60
+		end
+	}
+end
+# worker thread for generating thumbnails
+def start_auto_gen_thumbnail
+	$open_cbz_ltime = Time.now - 61 # holds the last time the open_cbz is called
+	Thread.new {
+		puts "************* Start Generating Thumbnails *************"
+		for bookcode, obj in $db.books
+			# if the call to open_cbz has elasped more than 60 seconds, allow to resume generating
+			if $open_cbz_ltime + 60 < Time.now
+				mk_thumb( obj.fullpath, true )
+			else
+				puts "Thumbnail generating paused."
+				sleep 60
+			end
+		end
+		puts "************* Finish Generating Thumbnails *************"
+	}
+end

data/public/css/browse.css ADDED

@@ -0,0 +1,390 @@
+body {
+	/*background-color: #eee !important;*/
+}
+.hidden {
+	visibility: hidden;
+}
+#navtop {
+	/*position: fixed;*/
+	z-index: 999;
+}
+#navcollapse {
+	z-index: 100;
+	background-color: #fafafa;
+}
+#container2 {
+	z-index: 1;
+	top: 51px;
+	left: 0px;
+	position: absolute;
+	width: 100%;
+	padding: 0px;
+	margin: 0px;
+}
+#ul-lists {
+	left: 0px;
+	position: absolute;
+	width: 100%;
+	margin: 0px;
+	padding: 0px;
+}
+.lazy img {
+	display: block;
+}
+li {
+	position: relative;
+}
+/* Portrait tablet to landscape and desktop */
+@media (min-width: 768px) {
+/*@media all and (min-width: 801px) {*/
+	.directory, .file {
+		width: 160px;
+		height: 220px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		min-height: 220px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		bottom: 5px;
+		font-size: smaller;
+		height: 52px;
+		width: 95%;
+		padding: 5px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+	}
+	.directory img, .file img {
+		min-height: 100px;
+		min-width: 50px;
+		max-width: 140px;
+		max-height: 140px;
+		position: relative;
+		top: 5px;
+		margin-left: auto;
+		margin-right: auto;
+		display: block;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		box-shadow: 0px 0px 5px #999;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		font-size: 14em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+/* Landscape phone to portrait tablet */
+@media (max-width: 767px) {
+	#navtop2 {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	#searchbox2 {
+		width: 93%;
+	}
+	.directory, .file {
+		min-width: 24.9%;
+		height: 220px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		height: 220px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		margin-left: auto;
+		margin-right: auto;
+		bottom: 5px;
+		font-size: smaller;
+		height: 52px;
+		width: 95%;
+		padding: 5px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+	}
+	.directory img, .file img {
+		min-height: 100px;
+		min-width: 50px;
+		max-width: 140px;
+		max-height: 140px;
+		position: relative;
+		top: 5px;
+		/* too small, just let image move itself */
+		/*margin-left: auto;*/
+		/*margin-right: auto;*/
+		display: block;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		box-shadow: 0px 0px 5px #999;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 0px;
+		bottom: 0px;
+		font-size: 14em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+/* Landscape phones and down */
+@media (max-width: 480px) {
+	#navtop2 {
+		padding-left: 20px;
+		padding-right: 20px;
+	}
+	#searchbox2 {
+		width: 93%;
+	}
+	.directory, .file {
+		min-width: 100%;
+		height: 60px;
+	}
+	.directory a, .file a {
+		min-width: 100%;
+		height: 60px;
+	}
+	.directory span, .file a span:first-of-type {
+		position: absolute;
+		top: 0px;
+		font-size: smaller;
+		width: 85%;
+		height: 55px;
+		left: 50px;
+		overflow: hidden;
+		display: block;
+		color: #000;
+		/* covers up the .last-selected-item bg-color, so disabled */
+		/*background-color: #eee;*/
+	}
+	.directory img, .file img {
+		min-height: 10px;
+		min-width: 10px;
+		max-width: 50px;
+		max-height: 50px;
+		position: relative;
+		border-style: solid;
+		border-width: 1px;
+		border-color: #000;
+		transition: max-width 0.2s ease, max-height 0.2s ease;
+	}
+	.bookpages {
+		position: absolute;
+		top: 0px;
+		right: 0px;
+	}
+	.file .countdown p {
+		position: absolute;
+		right: 50px;
+		bottom: 0px;
+		font-size: 3em;
+		line-height: 1em;
+		text-align: center;
+		color: black;
+	}
+}
+.last-selected-item {
+	/* make the last selected browse item dark lighted */
+	background-color: #cdcdcd !important;
+}
+.directory, .file {
+	float: left;
+	/*width: 160px;*/
+	/*height: 220px;*/
+	/*margin: 10px;*/
+	margin: 0px;
+	padding: 0px;
+	list-style: none;
+	/*background-color: #ccc;*/
+}
+.directory a, .file a {
+	/*width: 160px;*/
+	/*height: 220px;*/
+	display: inline-block;
+	position: relative;
+	background-color: #eee;
+}
+.directory img {
+	border: none !important;
+	box-shadow: none !important;
+}
+.file .countdown {
+	position: absolute;
+	bottom: 0px;
+	right: 0px;
+	width: 80%;
+	height: 80%;
+	opacity: 0.3;
+	z-index: 10;
+}
+.file .countdown:hover {
+	text-decoration: none;
+};
+/*
+ * Read Progress Indicator
+ * generated from http://www.colorzilla.com/gradient-editor/
+ */
+.read0 {
+	/*background-color: #ffece6;*/
+}
+.read5 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 5%, rgba(234,234,234,1) 6%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(5%,rgba(51,204,102,1)), color-stop(6%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 5%,rgba(234,234,234,1) 6%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read10 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 10%, rgba(234,234,234,1) 11%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(10%,rgba(51,204,102,1)), color-stop(11%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 10%,rgba(234,234,234,1) 11%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read20 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 20%, rgba(234,234,234,1) 21%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(20%,rgba(51,204,102,1)), color-stop(21%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 20%,rgba(234,234,234,1) 21%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read30 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 30%, rgba(234,234,234,1) 31%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(30%,rgba(51,204,102,1)), color-stop(31%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 30%,rgba(234,234,234,1) 31%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read40 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 40%, rgba(234,234,234,1) 41%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(40%,rgba(51,204,102,1)), color-stop(41%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 40%,rgba(234,234,234,1) 41%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read50 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 50%, rgba(234,234,234,1) 51%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(50%,rgba(51,204,102,1)), color-stop(51%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 50%,rgba(234,234,234,1) 51%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read60 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 60%, rgba(234,234,234,1) 61%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(60%,rgba(51,204,102,1)), color-stop(61%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 60%,rgba(234,234,234,1) 61%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read70 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 70%, rgba(234,234,234,1) 71%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(70%,rgba(51,204,102,1)), color-stop(71%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 70%,rgba(234,234,234,1) 71%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read80 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 80%, rgba(234,234,234,1) 81%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(80%,rgba(51,204,102,1)), color-stop(81%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 80%,rgba(234,234,234,1) 81%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read90 {
+	background: rgb(51,204,102); /* Old browsers */
+	background: -moz-linear-gradient(left, rgba(51,204,102,1) 90%, rgba(234,234,234,1) 91%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, right top, color-stop(90%,rgba(51,204,102,1)), color-stop(91%,rgba(234,234,234,1))); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(left, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* IE10+ */
+	background: linear-gradient(to right, rgba(51,204,102,1) 90%,rgba(234,234,234,1) 91%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33cc66', endColorstr='#eaeaea',GradientType=1 ); /* IE6-9 */
+}
+.read100 {
+	background-color: #33cc66 !important;
+}
+.breadcrumb2 {
+	line-height: 40px;
+	padding: 0;
+	margin: 0;
+	float: left;
+	/* make background almost transparent, use #fafafa as base and 0.5 for opacity */
+	background-color:rgba(250, 250, 250, 0.5);
+	/*background-color: #fafafa;*/
+}