$(document).ready(function() {
console.log("ready");
var _win = {
w:$(document).width(),
h:$(document).height()
},
_$root = $('#root'),
_total_dp_len = 58,
_active_pages_keys = [],
_current_dp_key = "0", _current_dp_ob, _first_dp = true, _last_dp = false,
_$page_left = $('#page-left'), _$page_right = $('#page-right'),
_$overlay_left = $('#page-left .overlay'), _$overlay_right = $('#page-right .overlay'),
_$maps_left = $('#page-left .maps'), _$maps_right = $('#page-right .maps'),
_bgs_prefix = "images/pages/",
_$railway = $('#railway'),
_$pagination = $('#pagination'),
_$pagi_l_arrow = $('.wrapper-l .l', _$pagination), _$pagi_r_arrow = $('.wrapper-r .l', _$pagination),
_$pagi_l_txt = $('.wrapper-l .p', _$pagination), _$pagi_r_txt = $('.wrapper-r .p', _$pagination);
// ____ _ __
// / _/___ (_) /_
// / // __ \/ / __/
// _/ // / / / / /_
// /___/_/ /_/_/\__/
function init(){
// console.log("init", _ACTIVE_PAGES[0].bg);
initLayout();
initData();
initRailway();
initkeyboard();
initPagination();
initHashNav();
changePages();
};
function initLayout(){
_$root.css({
'margin-top':(_win.h-_$root.height())/2
});
};
function initData(){
_active_pages_keys = Object.keys(_ACTIVE_PAGES);
console.log("_active_pages_keys", _active_pages_keys);
// for (var p = 0; p < _ACTIVE_PAGES.length; p++) {
// if(typeof _ACTIVE_PAGES[p][0].page !== "undefined"){
// _active_pages[(_ACTIVE_PAGES[p][0].page+1)/2] = p;
// }
// else if(typeof _ACTIVE_PAGES[p][1].page !== "undefined"){
// _active_pages[_ACTIVE_PAGES[p][1].page/2] = p;
// }
// }
};
// _ __
// / | / /___ __ __
// / |/ / __ `/ | / /
// / /| / /_/ /| |/ /
// /_/ |_/\__,_/ |___/
function initRailway(){
var $ul = $('
').appendTo(_$railway);
var $li, adp, bgl, bgr, pl, pr;
// loop through double pages
for (var dp = 0; dp <= _total_dp_len; dp++) {
// console.log("-- DOUBLE PAGE --", dp);
$li = $('- ')
.addClass('double-page-'+dp)
.appendTo($ul);
// check if current double page is active or not by checking if we have info for it in pages.json
// adp = typeof _active_pages[dp] !== "undefined" ? _active_pages[dp] : false;
adp = typeof _ACTIVE_PAGES[dp] !== "undefined" ? dp : false;
// console.log("adp",adp);
if(adp !== false){
// if active double page
$li.addClass('active');
// find for left and right pages if we have background info
bgl = typeof _ACTIVE_PAGES[adp][0].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][0].bg : false;
bgr = typeof _ACTIVE_PAGES[adp][1].bg !== "undefined" ? _bgs_prefix+"thumbs/"+_ACTIVE_PAGES[adp][1].bg : false;
}else{
// if not active double page, no background
bgl = bgr = false;
}
// get the real page left and right numbers from double page number
pr = dp*2;
pl = pr -1;
// add left page only if not first page (cover)
if(dp!=0)
$('')
.addClass('page page-'+(pl)+' double-page-'+dp+' page-left')
.addClass(bgl ? 'active' : 0)
.css({'background-image': bgl ? "url("+bgl+")" : "none"})
.appendTo($li);
// add right page only if not last page (backcover)
if(dp<_total_dp_len)
$('')
.addClass('page page-'+pr+' double-page-'+dp+' page-right')
.addClass(bgr ? 'active' : 0)
.css({'background-image': bgr ? "url("+bgr+")" : "none"})
.appendTo($li);
}
$('li.active', _$railway).on('click', function(event) {
dp = $(this).attr('class').match(/double-page-(\d+)/)[1];
_current_dp_key = dp; //_active_pages[dp];
changePages();
});
}
// ____
// / __ \____ _____ ____ _____
// / /_/ / __ `/ __ `/ _ \/ ___/
// / ____/ /_/ / /_/ / __(__ )
// /_/ \__,_/\__, /\___/____/
// /____/
function nextPages(){
var i = _active_pages_keys.indexOf(_current_dp_key) +1;
if(i <= _active_pages_keys.length-1){
_current_dp_key = _active_pages_keys[i];
changePages();
}
};
function prevPages(){
var i = _active_pages_keys.indexOf(_current_dp_key)-1;
if(i >= 0){
_current_dp_key = _active_pages_keys[i];
changePages();
}
};
function changePages(){
console.log("changePages", _current_dp_key);
$('li',_$railway).removeClass('current');
if(typeof _ACTIVE_PAGES[_current_dp_key] !== "undefined"){
_current_dp_ob = _ACTIVE_PAGES[_current_dp_key];
updatePagesDisplay();
updatePaginationDisplay();
updateRailwayDisplay();
updateHash();
updatePagesOverlays();
}
};
function updatePagesDisplay(){
if (typeof _current_dp_ob[0].bg !== "undefined") {
var pl = _current_dp_ob[0];
// change display of main page left
_$page_left
.css({'background-image': "url("+_bgs_prefix+pl.bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+pl.page);
// change pagination
_$pagi_l_txt.text(pl.page);
}else{
_$page_left.css({'background-image': "none"});
_$pagi_l_txt.text("");
}
if (typeof _current_dp_ob[1].bg !== "undefined") {
var pr = _current_dp_ob[1];
_$page_right
.css({'background-image': "url("+_bgs_prefix+pr.bg+")"})
.removeClass(pageClassToRemove)
.addClass('page-'+pr.page);
_$pagi_r_txt.text(pr.page);
}else{
_$page_right.css({'background-image': "none"});
_$pagi_r_txt.text("");
}
};
function pageClassToRemove(){
var c = $(this).attr('class').match(/page-+\d+/);
if(c && c.length)
return c[0];
};
function updatePaginationDisplay(){
// hide or show nav arrows for first annd last double page
var i = _active_pages_keys.indexOf(_current_dp_key);
if( i == 0){
_$pagi_l_arrow.addClass('hidden');
}else{
_$pagi_l_arrow.removeClass('hidden')
}
if(i == _active_pages_keys.length-1){
_$pagi_r_arrow.addClass('hidden');
}else{
_$pagi_r_arrow.removeClass('hidden')
}
};
function updateRailwayDisplay(){
// make railway db thumb current
$('li.double-page-'+_current_dp_key).addClass('current');
};
// ____ __
// / __ \_ _____ _____/ /___ ___ _______
// / / / / | / / _ \/ ___/ / __ `/ / / / ___/
// / /_/ /| |/ / __/ / / / /_/ / /_/ (__ )
// \____/ |___/\___/_/ /_/\__,_/\__, /____/
// /____/
function updatePagesOverlays(){
console.log("updatePagesOverlays");
// remove all pages overlays
resetOverlays();
// loop through left and right pages from the current double page
var lr = 0,
p_ob,
$p,
map;
for(var i in _current_dp_ob){
p_ob = _current_dp_ob[i];
console.log("p_ob", p_ob);
// first left, then right
$p = lr == 0 ? _$maps_left : _$maps_right;
// loop through overlays from each page
for(var m in p_ob.overlays){
map = p_ob.overlays[m];
console.log('map', map);
$p.append(
$('
')
.addClass("map")
.attr('overlay', map.over)
.attr('debug', map.debug)
.css({
"left":map.x+"mm",
"top":map.y+"mm",
"width":map.w+"mm",
"height":map.h+"mm"
})
.bind("mouseover", function(e){
$(this)
.parents('.page').find('.overlay')
.css({
'background-image':'url(images/overlays/'+$(this).attr('overlay')+')'
});
})
.bind("mouseout", function(e){
$(this)
.parents('.page').find('.overlay')
.css({'background-image':'none'});
})
);
}
lr++;
}
};
function resetOverlays(){
$('.overlay, .maps','.page').css({'background-image':'none'}).children().remove();
}
// ___ __
// / | ____ _____/ /_ ____ __________
// / /| | / __ \/ ___/ __ \/ __ \/ ___/ ___/
// / ___ |/ / / / /__/ / / / /_/ / / (__ )
// /_/ |_/_/ /_/\___/_/ /_/\____/_/ /____/
function initHashNav(){
h = window.location.hash;
console.log('hash',h);
_current_dp_key = h.match(/^#(\d+)$/)[1];
}
function updateHash(){
window.location.hash = _current_dp_key;
};
// __ __ __ __
// / //_/__ __ __/ /_ ____ ____ __________/ /
// / ,< / _ \/ / / / __ \/ __ \/ __ `/ ___/ __ /
// / /| / __/ /_/ / /_/ / /_/ / /_/ / / / /_/ /
// /_/ |_\___/\__, /_.___/\____/\__,_/_/ \__,_/
// /____/
function initkeyboard(){
keyboardJS.bind('right', function(event) {
// console.log(event);
nextPages();
});
keyboardJS.bind('left', function(event) {
// console.log(event);
prevPages();
});
};
// ____ _ __ _
// / __ \____ _____ _(_)___ ____ _/ /_(_)___ ____
// / /_/ / __ `/ __ `/ / __ \/ __ `/ __/ / __ \/ __ \
// / ____/ /_/ / /_/ / / / / / /_/ / /_/ / /_/ / / / /
// /_/ \__,_/\__, /_/_/ /_/\__,_/\__/_/\____/_/ /_/
// /____/
function initPagination(){
$('.wrapper-l .l', _$pagination).on('click', function(event) {
prevPages();
});
$('.wrapper-r .l', _$pagination).on('click', function(event) {
nextPages();
});
};
init();
});