(function($) { $.fn.zoommap = function(settings) { var sts = $.extend({}, $.fn.zoommap.defaults, settings); $(this).each(function() { var map = $(this); $(this).data('currentId', ''); var findRegion = function(root, id) { if (root.id == id) { return root } else { if (root.maps != undefined) { for (var i = 0; i < root.maps.length; i++) { var possible = findRegion(root.maps[i], id); if (possible != -1) return possible } } } return -1 }; var displayMap = function(region) { $(this).data('currentId', region.id); map.empty().css({ backgroundImage: 'url(' + region.image + ')', width: settings.width, height: settings.height }); var check = map.css('background-image'); loadRegionData(region) }; var showReturnLink = function(region) { map.append('<a href="javascript:void(0);" id="' + settings.returnId + '">' + settings.returnText + '</a>'); var returnLink = $('#' + settings.returnId, map); if (settings.returnLocation == 'TopLeft') { returnLink.css({ top: '0px', left: '0px' }) } else if (settings.returnLocation == 'BottomRight') { returnLink.css({ bottom: '0px', right: '0px' }) } else if (settings.returnLocation == 'BottomLeft') { returnLink.css({ bottom: '0px', left: '0px' }) } else if (settings.returnLocation == 'TopRight') { returnLink.css({ top: '0px', right: '0px' }) } else { returnLink.css({ bottom: '0px', right: '0px' }) } returnLink.hide().fadeIn('slow').click(function() { $(this).slideUp('normal'); $.fn.zoommap.showMapById(region.parent) }) }; var loadRegionData = function(region) { var url = region.data; map.load(url, {}, function() { $(this).children('a.bullet', map).each(function() { var thsBllt = $(this); var coords = thsBllt.attr('rel').split('-'); thsBllt.css({ left: addpx(Number(coords[0]) - rempx(settings.bulletWidthOffset)), top: addpx(Number(coords[1]) - rempx(settings.bulletHeightOffset)) }).hide().fadeIn('fast') }); if (region.maps != undefined) { for (var i = 0; i < region.maps.length; i++) { addZoom(region.maps[i]) } } if (settings.showReturnLink && region.parent != undefined) { showReturnLink(region) } }); map.click(function(e) { var tgt = $(e.target).parent(); if (tgt.is('a')) { showPopup(tgt.attr('id')) } return false }) }; var showPopup = function(id, leftbul, topbul) { map.find(settings.popupSelector).fadeOut(); var boxid = '#' + id + '-box'; $(boxid, map).fadeIn(); $(settings.popupCloseSelector).click(function() { $(this).parent().fadeOut(); return false }) }; var addZoom = function(region) { $('<img />').addClass(settings.zoomClass).attr({ src: settings.blankImage, id: region.id, title: "Zoom In! : " + region.id }).css({ position: 'absolute', width: region.width, height: region.height, top: region.top, left: region.left, cursor: 'pointer' }).appendTo(map).click(function() { var width = settings.width; var height = settings.height; if (region.scan) { width = region.scanwidth; height = region.scanheight } var thsZoom = $(this); thsZoom.load(function() { thsZoom.fadeIn('slow').animate({ width: width, height: height, top: '0px', left: '0px' }, settings.zoomDuration, '', function() { displayMap(region) }) }); thsZoom.siblings().slideUp('normal'); thsZoom.hide().attr('src', region.image); return false }) }; var rempx = function(string) { return Number(string.substring(0, (string.length - 2))) }; var addpx = function(string) { return string + 'px' }; var showHash = function(string) { string = string.replace('#', ''); $.fn.zoommap.showMapById(string) }; $.fn.zoommap.defaults = { zoomDuration: 1000, zoomClass: 'zoomable', popupSelector: 'div.popup', popupCloseSelector: 'a.close', bulletWidthOffset: '10px', bulletHeightOffset: '10px', showReturnLink: true, returnId: 'returnlink', returnText: 'Return to Previous Map', returnLocation: 'BottomRight' }; $.fn.zoommap.showMapById = function(id) { var region = findRegion(settings.map, id); if (region != -1) { displayMap(region) } }; var hash = self.document.location.hash; if (hash.length > 0) showHash(hash); else { displayMap(settings.map) } return this }) } })(jQuery);