')); - $.each(data.regions, function(index, region) { - var area = "area:" - + region.x + "/" + region.y + "/" - + region.width + "/" + region.height; - $html.append($('

').text('')); - }); - $html.append($('

').text('

')); - $html.fadeIn(); + regionInfo(data); }, "redraw" : function (data) { @@ -191,6 +182,77 @@ console.debug("regions", data.regions, "regionRect", regionRect); }; + // clickable header + var regionInfoHeader = function (data) { + var $infoDiv = $('

'); + var $h01 = $('

HTML

'); + var $h02 = $('

SVG

'); + var $h03 = $('

Digilib

'); + var $h04 = $('

'); + var bind = function($div, name) { + $div.bind('click.regioninfo', function () { + var $top = $(this).parent().parent(); + $top.find('.info').hide(); + $top.find('.' + name).show(); + }); + }; + bind($h01, 'html'); + bind($h02, 'svgattr'); + bind($h03, 'digilib'); + var $html = data.$htmlDiv; + $h04.bind('click.regioninfo', function () { + data.settings.showRegionInfo = false; + fn.highlightButtons(data, 'regionhtml', false); + $html.fadeOut(function () { + $html.contents().remove(); + }); + }); + $infoDiv.append($h01, $h02, $h03, $h04); + return $infoDiv; + }; + + // html for later insertion + var regionInfoHTML = function (data) { + var $infoDiv = $('

'); + $infoDiv.append($('

').text('

')); + $.each(data.regions, function(index, r) { + var area = [r.x, r.y, r.width, r.height].join(','); + $infoDiv.append($('

').text('')); + }); + $infoDiv.append($('

').text('

')); + return $infoDiv; + }; + + // SVG-style + var regionInfoSVG = function (data) { + var $infoDiv = $('

'); + $.each(data.regions, function(index, r) { + var area = [r.x, r.y, r.width, r.height].join(' '); + $infoDiv.append($('

').text('"' + area + '"')); + }); + return $infoDiv; + }; + + // digilib-style + var regionInfoDigilib = function (data) { + var $infoDiv = $('

'); + $.each(data.regions, function(index, r) { + var area = r.width + 'x' + r.height + '@' + r.x + ',' + r.y; + $infoDiv.append($('

').text(area)); + }); + return $infoDiv; + }; + + // show region info in a window + var regionInfo = function (data) { + var $html = data.$htmlDiv; + $html.append(regionInfoHeader(data)) + $html.append(regionInfoHTML(data)); + $html.append(regionInfoSVG(data)); + $html.append(regionInfoDigilib(data)); + $html.fadeIn(); + }; + // add a region to data.$elem var addRegionDiv = function (data, index, url) { var nr = index + 1; // we count regions from 1 @@ -366,7 +428,7 @@ // regions are defined in the URL } else { createRegionsFromURL(data); - fn.highlightButtons(data, 'regionhtml', data.settings.showRegionHTML); + fn.highlightButtons(data, 'regionhtml', data.settings.showRegionInfo); } }; @@ -376,7 +438,7 @@ console.debug("regions: handleUpdate"); var settings = data.settings; fn.highlightButtons(data, 'regions' , settings.isRegionVisible); - fn.highlightButtons(data, 'regionhtml' , settings.showRegionHTML); + fn.highlightButtons(data, 'regionhtml' , settings.showRegionInfo); renderRegions(data); };