Here's a working version of my code - http://jsfiddle.net/sambenson/g3qsa/#base
How can this be improved upon?
$(function(){
var box = {},
island = {},
canvas = {};
box.el = $('#box');
canvas.el = $('#arrow');
function go(el){
if(box.el.css('visibility') == 'hidden'){
reset_name();
$('.island').addClass('inactive');
box.top = box.el.offset().top;
box.corner = {};
box.corner.left = box.el.offset().left;
box.corner.right = box.corner.left + box.el.width();
island.el = el;
island.top = island.el.offset().top;
island.left = island.el.offset().left;
island.el.removeClass('inactive').addClass('active');
canvas.width = island.left - box.corner.left;
canvas.height = island.top - box.top;
canvas.el.css({
top: box.top,
left: box.corner.left
}).attr({
width: canvas.width,
height: canvas.height
});
var context = canvas.el[0].getContext('2d');
context.beginPath();
context.moveTo(0, 0);
context.lineTo(box.el.width(), 0);
context.lineTo(canvas.width, canvas.height);
context.closePath();
context.fillStyle = "#eaeaea";
context.fill();
box.el.css('visibility', 'visible');
canvas.el.show();
}
else {
close();
}
}
function reset_name(){
$('#name_holder').text('').css({
top: -9999,
left: -9999
})
}
function close(){
$('.island').removeClass('inactive active');
box.el.css('visibility', 'hidden');
canvas.el[0].width = canvas.el[0].width;
canvas.el.hide();
}
$('.island').hover(function(){
if(box.el.css('visibility') == 'hidden'){
var t = $(this),
name = t.text(),
holder = $('#name_holder');
top = t.offset().top - 60;
left = t.offset().left - 50;
holder.css({
top: top,
left: left
}).text(name);
}
}, function(){ reset_name(); })
.click(function(){ go($(this)); })
$('.close').click(function(){
close();
})
})
Could it be made faster?
Could it be made more efficient?