123 lines
3.4 KiB
JavaScript
123 lines
3.4 KiB
JavaScript
$(document).ready(function() {
|
|
console.log("ready");
|
|
|
|
var _current_pages = 0,
|
|
_page_left_bg, _page_right_bg,
|
|
_$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/";
|
|
|
|
// ____ _ __
|
|
// / _/___ (_) /_
|
|
// / // __ \/ / __/
|
|
// _/ // / / / / /_
|
|
// /___/_/ /_/_/\__/
|
|
|
|
function init(){
|
|
console.log("init", _PAGES[0].bg);
|
|
initkeyboard();
|
|
changePages();
|
|
};
|
|
|
|
// ____
|
|
// / __ \____ _____ ____ _____
|
|
// / /_/ / __ `/ __ `/ _ \/ ___/
|
|
// / ____/ /_/ / /_/ / __(__ )
|
|
// /_/ \__,_/\__, /\___/____/
|
|
// /____/
|
|
|
|
function nextPages(){
|
|
if(_current_pages < _PAGES.length-2){
|
|
_current_pages+=2;
|
|
changePages();
|
|
}
|
|
};
|
|
|
|
function prevPages(){
|
|
if(_current_pages > -1){
|
|
_current_pages-=2;
|
|
changePages();
|
|
}
|
|
};
|
|
|
|
function changePages(){
|
|
console.log("changePages");
|
|
_page_left_bg = _bgs_prefix+_PAGES[_current_pages].bg;
|
|
_page_right_bg = _bgs_prefix+_PAGES[_current_pages+1].bg;
|
|
console.log(_page_left_bg+" | "+_page_right_bg);
|
|
|
|
_$page_left
|
|
.css({'background-image': "url("+_page_left_bg+")"})
|
|
.removeClass(pageClassToRemove)
|
|
.addClass('page-'+_current_pages);
|
|
_$page_right
|
|
.css({'background-image': "url("+_page_right_bg+")"})
|
|
.removeClass(pageClassToRemove)
|
|
.addClass('page-'+(_current_pages+1));
|
|
|
|
updatePagesOverlays();
|
|
};
|
|
|
|
function pageClassToRemove(){
|
|
var c = $(this).attr('class').match(/page-+\d+/);
|
|
if(c && c.length)
|
|
return c[0];
|
|
};
|
|
|
|
function updatePagesOverlays(){
|
|
console.log("updatePagesOverlays");
|
|
|
|
// remove all pages overlays
|
|
$('.overlay, .maps',_$page_left).children().remove();
|
|
$('.overlay, .maps',_$page_right).children().remove();
|
|
|
|
console.log("Overlays", _PAGES[_current_pages].overlays);
|
|
// build page_left overlays
|
|
for (var map in _PAGES[_current_pages].overlays) {
|
|
if (_PAGES[_current_pages].overlays.hasOwnProperty(map)) {
|
|
map = _PAGES[_current_pages].overlays[map];
|
|
console.log("Map",map);
|
|
_$maps_left.append(
|
|
$('<div>')
|
|
.addClass("map")
|
|
.attr('overlay', map.over)
|
|
.css({
|
|
"left":map.x,
|
|
"top":map.y,
|
|
"width":map.w,
|
|
"height":map.h
|
|
})
|
|
.bind("mouseover", function(e){
|
|
$(this)
|
|
.parents('.page').find('.overlay')
|
|
.css({
|
|
// 'background-color':"red",
|
|
'background-image':'url(images/vectos/'+$(this).attr('overlay')+')'
|
|
});
|
|
})
|
|
);
|
|
}
|
|
}
|
|
};
|
|
|
|
// __ __ __ __
|
|
// / //_/__ __ __/ /_ ____ ____ __________/ /
|
|
// / ,< / _ \/ / / / __ \/ __ \/ __ `/ ___/ __ /
|
|
// / /| / __/ /_/ / /_/ / /_/ / /_/ / / / /_/ /
|
|
// /_/ |_\___/\__, /_.___/\____/\__,_/_/ \__,_/
|
|
// /____/
|
|
function initkeyboard(){
|
|
keyboardJS.bind('right', function(event) {
|
|
// console.log(event);
|
|
nextPages();
|
|
});
|
|
keyboardJS.bind('left', function(event) {
|
|
// console.log(event);
|
|
prevPages();
|
|
});
|
|
};
|
|
|
|
init();
|
|
});
|