Code:
<script language="javascript">
// Display an external page using an iframe
function modalDialog(x){
links = ['./IocInfoOverlay.html','./IocInfoBrowser.html','./IocInfoText.html','IocInfoDataUsage.html'];
var src = links[x];
$.modal('<iframe src="' + src + '" height="600" width="750" style="border:0">', {
close: true,
containerCss:{
backgroundColor:"#fff",
height:360,
padding:20,
width:800
},
overlayClose:true,
onOpen: function (dialog) {
dialog.overlay.fadeIn(function () {
dialog.data.hide();
dialog.container.fadeIn(function () {
dialog.data.fadeIn();
});
});
},
onClose: function (dialog) {
dialog.data.fadeOut(function () {
dialog.container.fadeOut(function () {
dialog.overlay.fadeOut(function () {
$.modal.close();
});
});
});
}
});
}
var imageTypes = {
"Chl_IOP": "Chlorophyl Concentration IOP-NN Product (1/7)",
"ChlBG": "Chlorophyl Concentration OC3 (3/7)",
"Chl": "Chlorophyl Concentration NN Product (2/7)",
"bbp443": "Particulate Backscatter at 443nm (4/7)",
"aph443": "Absorption due to Phytoplankton at 443nm (6/7)",
"ag443": "Absorption due to Gelbstoff at 443nm (5/7)",
"adm443": "Absorption due to Non-Algal Particulates at 443nm (7/7)"
};
var x1,y1,x2,y2,distX,distY;
var imageMagnify, imageCrosshair = true;
var refLeft, refTop, startmagnifierLeft, startmagnifierTop;
$(window).load(function(){
refLeft = Math.floor($("#field").offset().left);
refTop = Math.floor($("#field").offset().top);
startmagnifierLeft = refLeft +8 -130;
startmagnifierTop = refTop -2 +130;
$(window).resize(function() { // this may not be complete?
refLeft = Math.floor($("#field").offset().left);
refTop = Math.floor($("#field").offset().top);
startmagnifierLeft = refLeft +8 -130;
startmagnifierTop = refTop -2 +130;
});
// define draggable entity
$("#detail").draggable({
cursor: "move",
scroll: false,
drag: function(event) {
showDetailPos();
},
dragstart: function(event){
event.preventDefault();
}
});
// define an arrow key handler
$('body').on('keydown', handleKeys);
// show magnifier in starting position and not over map, with position info
var originalPos = { left: startmagnifierLeft, top: startmagnifierTop };
$('#detail').show().offset(originalPos);
showDetailPos();
$('#detail').mouseover(function(){
$(this).draggable("option", "stack", "#detail");
});
// call for initial default (recent) image title
changeDetail();
// call for initial page overlay
modalDialog(0);
});
function prevdate(){
for (var i=2; i < document.listmenu0.fourthlevel.length; i++) {
if (document.listmenu0.fourthlevel[i].selected == true) {
document.listmenu0.fourthlevel[i].selected = false;
document.listmenu0.fourthlevel[i-1].selected = true;
}
}
goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel);
}
function nextdate(){
for (var i=document.listmenu0.fourthlevel.length-1; i > 0; i--) {
if (document.listmenu0.fourthlevel[i].selected == true) {
document.listmenu0.fourthlevel[i+1].selected = true;
document.listmenu0.fourthlevel[i].selected = false;
}
}
goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel, document.listmenu0.fourthlevel);
}
function getmagnifiedimage() {
// toggle magnifier
if(imageMagnify) {
imageMagnify = false;
$('.bigimagefileMagnify').prop('value', 'Enable Magnifier');
$('#detail').hide('slow');
} else {
imageMagnify = true;
$('.bigimagefileMagnify').prop('value', 'Disable Magnifier');
// set original magnifier position to the left of the map
var originalPos = { left: startmagnifierLeft, top: startmagnifierTop };
$('#detail').show('slow').offset(originalPos);
// get new image
changeDetail();
showDetailPos();
}
}
function getcrosshair() {
// toggle crosshair central block
if(imageCrosshair) {
imageCrosshair = false;
$('.crosshairMagnify').prop('value', 'Enable Crosshair');
$('#picdetail').hide('slow');
// show coordinates
$('#count').hide('slow');
} else {
imageCrosshair = true;
$('.crosshairMagnify').prop('value', 'Disable Crosshair');
$('#picdetail').show('slow');
// get rid of coordinates
$('#count').show('slow');
}
}
function viewBigImage() {
imageURL=document.getElementById("pic").src;
bigimageURL=imageURL.replace(/images/, "bigimages");
window.open(bigimageURL);
}
function changeDetail() {
var imageURL=document.getElementById("pic").src;
bigimageURL=imageURL.replace(/images/, "bigimages");
linkbigimageURL = 'url(' + bigimageURL + ')';
$('#detail').css("background-image", linkbigimageURL);
h = imageURL.indexOf("20");
if(h<0) {
g = "Recent ";
} else {
g = imageURL.substr(h+4,2) + "/" + imageURL.substr(h+6,2) + "/" + imageURL.substr(h,4) + " ";
}
for (i in imageTypes) {
j = imageURL.indexOf(i);
if (j>1) {
k = imageTypes[i];
$('#imagetitle').html(g + k);
break;
}
};
}
function hideDetail() {
$('#detail').fadeOut('slow');
}
function showDetailPos() {
var $newPosX = Math.floor($('#detail').offset().left);
var $newPosY = Math.floor($('#detail').offset().top);
detailTop = $newPosY - refTop +4;
detailLeft = $newPosX - refLeft +4;
// calculate the map's positions with Mercator projection, lat = atan(sinh(y)), so 90° is at infinity. backgrounds (bigimages) are 8640 x 4320 px
detailLat = (-180*((detailTop+48)*2*12)/8640) + 90;
detailLon = (((detailLeft+48)*12/8640)*360) -180;
$('#count').html(' Lat: ' + detailLat.toFixed(2) + '<br> Lon: ' + detailLon.toFixed(2));
// move background
backgroundposition = "-" + ((detailLeft + 50)*8) + "px -" + ((detailTop + 50)*8) + "px";
$('#detail').css("background-position", backgroundposition);
}
function getDataImage() {
imageURL=document.getElementById("pic").src;
var c = imageURL.indexOf("Recent") > -1;
if(c>0) {alert("This object does not have an associated data resource"); return;}
temp0URL=imageURL.replace(/images/, "dataimages");
re=new RegExp("_[\\d\\D]*?png","gi");
href=temp0URL.replace(re,"_all.7z");
$.fileDownload($(this).attr('href'), {
preparingMessageHtml: "We are preparing your report, please wait...",
failMessageHtml: "There was a problem generating your report, please try again."
});
return false;
}
function handleKeys(e) {
var position,
draggable = $('#detail'),
container = $('#imagedisplay'),
distance = 1; // Distance in pixels the draggable should be moved
position = draggable.position();
// reposition if one of the directional keys is pressed
switch (e.keyCode) {
case 37: position.left -= distance; break; // Left
case 38: position.top -= distance; break; // Up
case 39: position.left += distance; break; // Right
case 40: position.top += distance; break; // Down
default: return true; // Exit and bubble
}
// keep draggable within container
if (position.left >= 0 && position.top >= 0 &&
position.left + draggable.width() <= container.width() &&
position.top + draggable.height() <= container.height()) {
draggable.css(position);
}
// update background map
showDetailPos();
// don't scroll page
e.preventDefault();
}
</script>
Bookmarks