Team:Calgary/epicjava
From 2013.igem.org
var elements = {
detector: { hitboxes: [ { tl_x: 212, tl_y: 128, w: 266, h: 40 } ], link_url: 'https://2013.igem.org/Team:Calgary/Project/OurSensor/Detector', //image_url: 'img/detector.png' image_url: 'https://static.igem.org/mediawiki/2013/8/84/CalgaryDetector.png' },
linker: { hitboxes: [ { tl_x: 276, tl_y: 61, w: 39, h: 71 }, { tl_x: 356, tl_y: 164, w: 79, h: 128 }, ], link_url: 'https://2013.igem.org/Team:Calgary/Project/OurSensor/Linker', //image_url: 'img/linker.png' image_url: 'https://static.igem.org/mediawiki/2013/5/5f/CalgaryLinker.png'
},
modelling: { hitboxes: [ { tl_x: 0, tl_y: 266, w: 210, h: 163 } ], link_url: 'https://2013.igem.org/Team:Calgary/Project/OurSensor/Modeling', //image_url: 'img/modelling.png' image_url: 'https://static.igem.org/mediawiki/2013/a/af/20130927204336!Modelling.png' },
prototype: { hitboxes: [ { tl_x: 453, tl_y: 296, w: 243, h: 96 } ], link_url: 'https://2013.igem.org/Team:Calgary/Project/OurSensor/Prototype', //image_url: 'img/prototype.png' image_url: 'https://static.igem.org/mediawiki/2013/5/56/CalgaryPrototype.png' },
reporter: { hitboxes: [ { tl_x: 252, tl_y: 1, w: 66, h: 63 } ], link_url: 'https://2013.igem.org/Team:Calgary/Project/OurSensor/Reporter', //image_url: 'img/reporter.png' image_url: 'https://static.igem.org/mediawiki/2013/2/24/Calgary_Reporter.png' },
};
var all_elem_names = ; $.each(elements, function(elem_name) {
all_elem_names += (elem_name + ' ');
});
//=====================================
function is_within(x, y, box) {
return x >= box.tl_x && y >= box.tl_y && x <= box.tl_x + box.w && y <= box.tl_y + box.h;
}
function find_target(x, y) {
var under_cursor = null;
$.each(elements, function(elem_name, elem) { $.each(elem.hitboxes, function(idx, hitbox) { if(is_within(x, y, hitbox)) { under_cursor = elem_name; return false; // Stop iterating } });
if(under_cursor !== null) { return false; // Stop iterating } });
return under_cursor;
}
function get_rel_cursor_pos(elem, event) {
if ('pageX' in event) { // all browsers except IE before version 9 var pageX = event.pageX; var pageY = event.pageY; } else { // IE before version 9 var pageX = event.clientX + document.documentElement.scrollLeft; var pageY = event.clientY + document.documentElement.scrollTop; }
return { rel_x: pageX - $(elem).offset().left, rel_y: pageY - $(elem).offset().top, };
}
function preload_images() {
$.each(elements, function(elem_name, elem) { var img = new Image(); img.src = elem.image_url; });
}
function configure_mousemove(container) {
var default_image_url = container.css('backgroundImage'); var prev_target = null;
var on_deactivate = function() { container.removeClass('active'); container.css('backgroundImage', default_image_url); };
container.mousemove(function(event) { var cursor_pos = get_rel_cursor_pos(this, event); var target = find_target(cursor_pos.rel_x, cursor_pos.rel_y); if(target === prev_target) return;
if(target === null) { on_deactivate(); } else { container.addClass('active'); var image_url = "url('" + elements[target].image_url + "')"; container.css('backgroundImage', image_url); }
prev_target = target; }).mouseleave(function() { on_deactivate(); });
}
function configure_click(container) {
container.click(function(evt) { evt.preventDefault();
var cursor_pos = get_rel_cursor_pos(this, evt); var target = find_target(cursor_pos.rel_x, cursor_pos.rel_y); if(target === null) { return; } window.location = elements[target].link_url; });
}
function init_tale_image() {
preload_images();
var container = $('#tales-img'); configure_mousemove(container); configure_click(container);
}
init_tale_image();