";
$(bigDiv).appendTo('#dmMainImage');
// Create the nav divs for collision detection
littleDiv = "";
$(littleDiv).appendTo('#dmThumbnail').addClass('collision');
// Builds the Array of images to load, and an array for the width and height of those
tileImageSrc[tileNum] = devUrlPrefix + "/cgi-bin/getimage.exe?CISOROOT=" + CISOROOT + "&CISOPTR=" + CISOPTR + "&DMSCALE=" + dmScale + "&DMWIDTH=" + tileWidth + "&DMHEIGHT=" + tileHeight + "&DMROTATE=" + lvlRotation + "&DMX=" + bigImageCoordsX + "&DMY=" + bigImageCoordsY + "&DMCROP=" + bigImageCoordsX + "," + bigImageCoordsY + "," + x2 + "," + y2;
tileImageWidth[tileNum] = bigTileOutputWidth;
tileImageHeight[tileNum] = bigTileOutputHeight;
// Progress tileNum
tileNum++;
} // End Y Loop
} // End X Loop
} // End Rotation IF
containerWidth = parseInt(((imageWidth) + (imageWidth) - viewerWidth), 10) + "px";
containerHeight = ($('#dmMainImage').height() + $('#dmMainImage').height() - viewerHeight) + "px";
var containerX = "-" + ($('#dmMainImage').width() - viewerWidth) + "px";
var containerY = "-" + ($('#dmMainImage').height() - viewerHeight) + "px";
var imagePositionX = ($('#dmMainImage').width() - viewerWidth - imageOffsetX) + "px";
var imagePositionY = ($('#dmMainImage').height() - viewerHeight - imageOffsetY) + "px";
$('#dmMainImageContainer')
.css('position', 'absolute')
.css('width', containerWidth)
.css('height', containerHeight)
.css('left', containerX)
.css('top', containerY);
imagePositionMoveX = (imageWidth - viewerWidth);
imagePositionMoveY = (imageHeight - viewerHeight);
containerSendX = $('#dmMainImageContainer').offset().left;
containerSendY = $('#dmMainImageContainer').offset().top;
mainImageWidth = $('#dmMainImage').width();
mainImageHeight = $('#dmMainImage').height();
thumbMainWidthRatio = $('#dmThumbnail img').width() / $('#dmMainImage').width();
thumbMainHeightRatio = $('#dmThumbnail img').height() / $('#dmMainImage').height();
$('#dmMainImage')
.css('position', 'absolute')
.css('left', imagePositionX)
.css('top', imagePositionY)
.bind('dragstart', function() { $(this).toggleClass("dmDragging"); })
.bind('drag', function(event){ moveImage(event); })
.bind('dragend', function() { $(this).toggleClass("dmDragging"); loadImages(); })
.bind("dblclick", function(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
dblClickMove(posx, posy);
});
buildNav(offsetRatioX, offsetRatioY);
})
.attr('class', 'thumbImage')
.attr('src', thumbSrc);
}
} // end BuildImage
/*****************************************
*
* BUILDING NAV
*
******************************************/
function buildNav(navRatioPosX, navRatioPosY) {
// Calculates the width and Height of the navigator
var navigatorWidth = (($('#dmThumbnail img').width() / $('#dmMainImage').width()) * viewerWidth);
var navigatorHeight = (($('#dmThumbnail img').height() / $('#dmMainImage').height()) * viewerHeight);
if (navigatorWidth > $('#dmThumbnail img').width()) {
navigatorWidth = $('#dmThumbnail img').width();
}
if (navigatorHeight > $('#dmThumbnail img').height()) {
navigatorHeight = $('#dmThumbnail img').height();
}
// Calculates the default nav position
navOffsetX = (navRatioPosX * $('#dmThumbnail img').width()) - (navigatorWidth / 2);
navOffsetY = (navRatioPosY * $('#dmThumbnail img').height()) - (navigatorHeight / 2);
if (navOffsetX < 0) {
navOffsetX = 0;
} else if ((navOffsetX + navigatorWidth) > $('#dmThumbnail img').width()) {
navOffsetX = $('#dmThumbnail img').width() - navigatorWidth;
}
if (navOffsetY < 0) {
navOffsetY = 0;
} else if ((navOffsetY + navigatorHeight) > $('#dmThumbnail img').height()) {
navOffsetY = $('#dmThumbnail img').height() - navigatorHeight;
}
// Binds a click to the nav
$('#dmThumbnail .dmClickNavLayer')
.bind("click", function(e){
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
clickNav(posx, posy);
});
// Adds the navigator to the thumbnail
$('')
.appendTo('#dmThumbnail')
.width(navigatorWidth)
.height(navigatorHeight)
.css('z-index', '20')
.css('left', navOffsetX + "px")
.css('top', navOffsetY + "px")
.bind('dragstart', function() { $(this).toggleClass("dmDragging"); })
.bind('drag', function(event){ moveNav(event); })
.bind('dragend', function() { $(this).toggleClass("dmDragging"); loadImages(); });
// After building the nav load the images touching it
loadImagesTimer = setTimeout(function() {
loadImages();
},750);
}
/*****************************************
*
* BUILDING MENU
*
******************************************/
function buildMenu(initZoomLevel, initRotationLevel) {
/*******************************
* CONSTRUCT & BIND THE PARTS
*******************************/
// Build the Menu Div
$('').insertBefore('#dmMonocle');
// Hide Nav
var hideNavButton = "Hide Navigator
";
$(hideNavButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerHideNavigator(); });
// Fit Window
var fitWindowButton = "Fit Document to Viewer
";
$(fitWindowButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerFitWindow(); });
// Fit Width
var fitWidthButton = "Fit Image to Viewer Width
";
$(fitWidthButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerFitWidth(); });
// Maximum Resolution
var maxResButton = "Maximum Resolution
";
$(maxResButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerMaxRes(); });
// Rotate Counterclockwise
var rotateCounterclockwiseButton = "Rotate Counterclockwise
";
$(rotateCounterclockwiseButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerRotateCounterclockwise(); });
// Rotate Clockwise
var rotateClockwiseButton = "Rotate Clockwise
";
$(rotateClockwiseButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerRotateClockwise(); });
// Zoom Out
var zoomOutButton = "Zoom Out
";
$(zoomOutButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerZoomOut(); });
// Zoom Level Gague
var zoomLevelGague = "
";
$(zoomLevelGague)
.appendTo("#dmMonocleMenu")
.slider({
animate: true,
max: 100,
min: (minZoomLevel * 100),
change: function(event, ui) { sliderZoomInOut(); }
});
// Zoom In
var zoomInButton = "Zoom In
";
$(zoomInButton).appendTo("#dmMonocleMenu").bind('click', function() { viewerZoomIn(); });
// If dmBridge is enabled, append the "search text" field to the viewer
if($('#dmObjectSearch').width() > 0) { $('#dmObjectSearch').appendTo('#dmMonocleMenu'); }
// Clear
var menuClearDiv = "
";
$(menuClearDiv).appendTo("#dmMonocleMenu");
}
/*****************************************
*
* LOADING FUNCTIONALITY!
*
******************************************/
function loadImages() {
// Grabs the area coordinates of the navigator
var navCollisionY1 = parseFloat($('.dmNavigator').css('top'));
var navCollisionY2 = navCollisionY1 + $('.dmNavigator').height();
var navCollisionX1 = parseFloat($('.dmNavigator').css('left'));
var navCollisionX2 = navCollisionX1 + $('.dmNavigator').width();
// Check each div w/o an image yet to see if it is touching the navigator
$('.collision').each(function() {
// Grabs the area coordinates of the div
var collisionTop = parseFloat($(this).css('top'));
var collisionBottom = collisionTop + $(this).height();
var collisionLeft = parseFloat($(this).css('left'));
var collisionRight = collisionLeft + $(this).width();
// Checks to see if the div & nav are touching
if (((navCollisionY1 >= collisionTop && navCollisionY1 <= collisionBottom) || (navCollisionY2 >= collisionTop && navCollisionY2 <= collisionBottom) || (navCollisionY1 < collisionTop && navCollisionY2 > collisionBottom)) && ((navCollisionX1 >= collisionLeft && navCollisionX1 <= collisionRight) || (navCollisionX2 >= collisionLeft && navCollisionX2 <= collisionRight) || (navCollisionX1 < collisionLeft && navCollisionX2 > collisionRight))) {
// If they're touching, load and place the image.
var newImageClasses = $(this).attr('class').toString().split(" ");
var newImageNum = newImageClasses[0];
var newImageDiv = "#dmMainImageContainer .tile-" + newImageNum;
$(this).removeClass('collision');
$(newImageDiv).toggleClass('dmImgTileLoading');
var newImageTile = new Image();
$(newImageTile)
.load(function () {
$(newImageDiv).append(this);
$(newImageDiv).toggleClass('dmImgTileLoading');
if(($(this).width() < tileImageWidth[newImageNum] && $(this).width() > 10) || ($(this).height() < tileImageHeight[newImageNum] && $(this).height() > 10)) {
$(this).width(tileImageWidth[newImageNum]);
$(this).height(tileImageHeight[newImageNum]);
}
})
.attr('class', 'tileimage')
.attr('src', tileImageSrc[newImageNum])
// By design, the program tries to load an image slightly larger than needed. This is due to getimage.exe oftentimes outputting the incorrect image size, mostly 1x1 smaller.
// This causes Firefox to resize the image within the browser, dramatically slowing down Firefox's performance
// However, the slightly larger image doesn't always load properly, leaving blank tiles.
// If it does this, the program will revert to the exactly sized image which always loads consistently.
.error(function () {
var newImageErrorTile = new Image();
$(newImageErrorTile)
.load(function () {
$(newImageDiv).append(this);
$(newImageDiv).toggleClass('dmImgTileLoading');
if(($(this).width() < tileImageWidth[newImageNum] && $(this).width() > 10) || ($(this).height() < tileImageHeight[newImageNum] && $(this).height() > 10)) {
$(this).width(tileImageWidth[newImageNum]);
$(this).height(tileImageHeight[newImageNum]);
}
})
.attr('class', 'tileimage')
.attr('src', tileImageErrorSrc[newImageNum]);
});
}
});
}
/*****************************************
*
* MOVEMENT FUNCTIONALITY!
*
******************************************/
// When the main image window is dragged, move it and the navigator as well
function moveImageNav(mainImageWidth, mainImageHeight, imagePositionX, imagePositionY, thumbImgMoveWidth, thumbImgMoveHeight) {
var mainLeft = $('#dmMainImage').position().left;
var mainTop = $('#dmMainImage').position().top;
$('#feedback').html(mainLeft);
// Convert the inverted difference into the Thumbnail / MainImage ratios
var navLeft = -1 * ((mainLeft - imagePositionX) * ( thumbImgMoveWidth / mainImageWidth));
var navTop = -1 * ((mainTop - imagePositionY) * ( thumbImgMoveHeight / mainImageHeight));
// Converts the Position to the Thumnail Ratio
$('div.dmNavigator').css('left', navLeft).css('top', navTop);
}
function moveImage(event) {
// Get the container dimensions
var container = $('div#dmMainImageContainer');
var containerX = $(container).offset().left;
var containerY = $(container).offset().top;
var containerWidth = $(container).width();
var containerHeight = $(container).height();
// Get the nav dimensions
var mainImage = $('div#dmMainImage');
var mainImageWidth = $(mainImage).width();
var mainImageHeight = $(mainImage).height();
// Get the proper nav positioning
tempX = (event.offsetX) - containerX;
tempY = (event.offsetY) - containerY;
// $('#feedback').html(tempX + ", " + tempY);
// Create Proper containment
var mainImageX = tempX + mainImageWidth;
var mainImageY = tempY + mainImageHeight;
// Max width the container can go
var containerMaxX = containerWidth - mainImageWidth;
var containerMaxY = containerHeight - mainImageHeight;
// If the box is in the proper container, move the Nav
if (tempX < 0){
tempX = 0;
} else if (mainImageX > containerWidth) {
tempX = containerMaxX;
}
if (tempY < 0){
tempY = 0;
} else if (mainImageY > containerHeight) {
tempY = containerMaxY;
}
//if (tempX >= 0 && navX <= containerWidth && tempY >= 0 && navY <= containerHeight) { $('div.dmNavigator').css({ left:tempX, top:tempY }); };
$(mainImage).css({ left:tempX, top:tempY });
// Grabs the current boundaries of the container
var imagePositionX = ($('#dmMainImage').width() - viewerWidth);
var imagePositionY = ($('#dmMainImage').height() - viewerHeight);
// Convert the inverted difference into the Thumbnail / MainImage ratios
var navLeft = -1 * ((tempX - imagePositionMoveX) * thumbMainWidthRatio);
var navTop = -1 * ((tempY - imagePositionMoveY) * thumbMainHeightRatio);
// Converts the Position to the Thumnail Ratio
$('div.dmNavigator').css('left', navLeft).css('top', navTop);
}
// When the thumbnail is double clicked, move the navigator & main image
function dblClickMove(xPos, yPos) {
// Grabs viewer dimensions
var viewerWidth = $('#dmMonocle').width();
var viewerHeight = $('#dmMonocle').height();
// Grabs
var mainTempLeft = parseFloat($('#dmMainImage').css('left'));
var mainTempTop = parseFloat($('#dmMainImage').css('top'));
// Checks to see which side of the viewer is clicked (left/right), then horizontally moves the image
if ((xPos - $('#dmMonocle').offset().left) > (viewerWidth / 2)) {
var mainLeft = (mainTempLeft + viewerWidth / 2) - (xPos - $('#dmMonocle').offset().left);
// Bounds Checking
if (mainLeft < 0) {
mainLeft = 0;
}
} else if ((xPos - $('#dmMonocle').offset().left) < (viewerWidth / 2)) {
mainLeft = mainTempLeft + (viewerWidth / 2 - (xPos - $('#dmMonocle').offset().left));
// Bounds Checking
if (mainLeft > $('#dmMainImage').width() - viewerWidth) {
mainLeft = $('#dmMainImage').width() - viewerWidth;
}
} else if ((xPos - $('#dmMonocle').offset().left) == (viewerWidth / 2)) {
mainLeft = mainTempLeft;
}
// Checks to see which half of the viewer is clicked (top/bottom), then vertically moves the image
if ((yPos - $('#dmMonocle').offset().top) > (viewerHeight / 2)) {
var mainTop = (mainTempTop + viewerHeight / 2) - (yPos - $('#dmMonocle').offset().top);
// Bounds Checking
if (mainTop < 0) {
mainTop = 0;
}
} else if ((yPos - $('#dmMonocle').offset().top) < (viewerHeight / 2)) {
mainTop = mainTempTop + (viewerHeight / 2 - (yPos - $('#dmMonocle').offset().top));
// Bounds Checking
if (mainTop > $('#dmMainImage').height() - viewerHeight) {
mainTop = $('#dmMainImage').height() - viewerHeight;
}
} else if ((yPos - $('#dmMonocle').offset().top) == (viewerHeight / 2)) {
mainTop = mainTempTop;
}
// Grabs the current boundaries of the container
var imagePositionX = ($('#dmMainImage').width() - viewerWidth);
var imagePositionY = ($('#dmMainImage').height() - viewerHeight);
// Convert the inverted difference into the Thumbnail / MainImage ratios
var navLeft = -1 * ((mainLeft - imagePositionX) * ($('#dmThumbnail img').width() / $('#dmMainImage').width()));
var navTop = -1 * ((mainTop - imagePositionY) * ($('#dmThumbnail img').height() / $('#dmMainImage').height()));
// Converts the Position to the Thumnail Ratio
$('#dmMainImage').animate(
{
top: mainTop,
left: mainLeft
}, "normal", "swing");
// Converts the Position to the Thumnail Ratio
$('div.dmNavigator').animate(
{
top: navTop,
left: navLeft
}, "normal", "swing",
function() {
loadImages();
});
}
// When the nav is dragged, move it and the main image window as well
function moveNav(event) {
// Get the container dimensions
var container = $('div#dmThumbnail img');
var containerX = $(container).offset().left;
var containerY = $(container).offset().top;
var containerWidth = $(container).width();
var containerHeight = $(container).height();
// Get the nav dimensions
var nav = $('div.dmNavigator');
var navWidth = $(nav).width();
var navHeight = $(nav).height();
// Get the proper nav positioning
tempX = (event.offsetX) - containerX;
tempY = (event.offsetY) - containerY;
// Create Proper containment
var navX = tempX + navWidth;
var navY = tempY + navHeight;
// If the box is in the proper container, move the Nav
// Max width the container can go
var containerMaxX = containerWidth - navWidth;
var containerMaxY = containerHeight - navHeight;
// If the box is in the proper container, move the Nav
if (tempX < 0) {
tempX = 0;
} else if (navX > containerWidth) {
tempX = containerMaxX;
}
if (tempY < 0) {
tempY = 0;
} else if (navY > containerHeight) {
tempY = containerMaxY;
}
$(nav).css({ left:tempX, top:tempY });
// Get MainImage Position Information
var navLeft = ($('.dmNavigator').offset().left - $('#dmThumbnail').offset().left);
var navTop = ($('.dmNavigator').offset().top - $('#dmThumbnail').offset().top);
// Grabs the current boundaries of the container
var imagePositionX = ($('#dmMainImage').width() - viewerWidth);
var imagePositionY = ($('#dmMainImage').height() - viewerHeight);
// Convert the inverted difference into the Thumbnail / MainImage ratios
var mainLeft = imagePositionX + -1 * (($('#dmMainImage').width() / $('#dmThumbnail img').width()) * navLeft);
var mainTop = imagePositionY + -1 * (($('#dmMainImage').height() / $('#dmThumbnail img').height()) * navTop);
// Converts the Position to the Thumnail Ratio
$('#dmMainImage').css('left', mainLeft).css('top', mainTop);
}
// When the thumbnail is double clicked, move the navigator & main image
function clickNav(xPos, yPos) {
var navigatorTempWidth = $('div.dmNavigator').width();
var navigatorTempHeight = $('div.dmNavigator').height();
var navTop = (yPos - $('#dmThumbnail').offset().top) - (navigatorTempHeight / 2);
var navLeft = (xPos - $('#dmThumbnail').offset().left) - (navigatorTempWidth / 2);
if ((navTop + navigatorTempHeight) > $('#dmThumbnail img').height()) {
navTop = $('#dmThumbnail img').height() - navigatorTempHeight;
}
else if (navTop < 0) {
navTop = 0;
}
if ((navLeft + navigatorTempWidth) > $('#dmThumbnail img').width()) {
navLeft = $('#dmThumbnail img').width() - navigatorTempWidth;
}
else if (navLeft < 0) {
navLeft = 0;
}
// Grabs the current boundaries of the container
var imagePositionX = ($('#dmMainImage').width() - viewerWidth);
var imagePositionY = ($('#dmMainImage').height() - viewerHeight);
// Convert the inverted difference into the Thumbnail / MainImage ratios
var mainLeft = imagePositionX + -1 * (($('#dmMainImage').width() / $('#dmThumbnail img').width()) * navLeft);
var mainTop = imagePositionY + -1 * (($('#dmMainImage').height() / $('#dmThumbnail img').height()) * navTop);
// Converts the Position to the Thumnail Ratio
$('#dmMainImage').animate(
{
top: mainTop,
left: mainLeft
}, "normal", "swing");
// Converts the Position to the Thumnail Ratio
$('div.dmNavigator').animate(
{
top: navTop,
left: navLeft
}, "normal", "swing",
function() {
loadImages();
});
}
/*****************************************
*
* ZOOMING FUNCTIONALITY
*
******************************************/
function dblClickZoom(xScrollPos, yScrollPos, scrollZoomLvl) {
if (scrollZoomLvl + 0.1 > 1) {
var newScrollZoomLvl = 1;
} else {
newScrollZoomLvl = Math.round((scrollZoomLvl + 0.1)*100) / 100;
zoomLevel = newScrollZoomLvl;
}
// Grabs viewer dimensions
var viewerWidth = $('#dmMonocle').width();
var viewerHeight = $('#dmMonocle').height();
// Grabs default position of the main image
var defaultMainLeft = $('#dmMainImage').width() - viewerWidth;
var defaultMainTop = $('#dmMainImage').height() - viewerHeight;
// Grabs current position of the main image
var mainTempLeft = parseFloat($('#dmMainImage').css('left'));
var mainTempTop = parseFloat($('#dmMainImage').css('top'));
var tempImageWidth = $('#dmMainImage').width() / scrollZoomLvl;
var tempImageHeight = $('#dmMainImage').height() / scrollZoomLvl;
// Get the Ratio of the zoomed spot to the top, left corner of the image
var zoomOffsetRatioX = ((defaultMainLeft - mainTempLeft) + (xScrollPos - $('#dmMonocle').offset().left)) / (tempImageWidth * scrollZoomLvl);
var zoomOffsetRatioY = ((defaultMainTop - mainTempTop) + (yScrollPos - $('#dmMonocle').offset().top)) / (tempImageHeight * scrollZoomLvl);
var checkMathX = (bigHeight * newScrollZoomLvl * zoomOffsetRatioX);
var checkMathY = (bigWidth * newScrollZoomLvl * zoomOffsetRatioY);
buildImage(newScrollZoomLvl, rotationLevel, zoomOffsetRatioX, zoomOffsetRatioY);
}
/*****************************************
*
* MENU FUNCTIONALITY!
*
******************************************/
function viewerZoomIn() {
if (zoomLevel + 0.05 < 1) {
zoomLevel = Math.round((zoomLevel + 0.05)*100) / 100;
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
} else if (zoomLevel + 0.1 >= 1) {
if (zoomLevel == 1) {
zoomLevel = 1;
} else {
zoomLevel = 1;
navTempLeft = parseFloat($('.dmNavigator').css('left'));
navTempTop = parseFloat($('.dmNavigator').css('top'));
navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
}
}
function viewerZoomOut() {
if (zoomLevel - 0.05 > minZoomLevel) {
zoomLevel = Math.round((zoomLevel - 0.05)*100) / 100;
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
} else if (zoomLevel - 0.05 <= minZoomLevel) {
if (zoomLevel == minZoomLevel) {
zoomLevel = minZoomLevel;
} else {
zoomLevel = minZoomLevel;
navTempLeft = parseFloat($('.dmNavigator').css('left'));
navTempTop = parseFloat($('.dmNavigator').css('top'));
navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
}
}
function sliderZoomInOut() {
zoomLevel = $('#dmZoomLevelGague').slider('option', 'value') / 100;
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerMaxRes() {
zoomLevel = 1;
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerFitWindow() {
switch(rotationLevel)
{
case 0:
var viewerWidthRatio = viewerWidth / bigWidth;
var viewerHeightRatio = viewerHeight / bigHeight;
break;
case 90:
viewerWidthRatio = viewerWidth / bigHeight;
viewerHeightRatio = viewerHeight / bigWidth;
break;
case 180:
viewerWidthRatio = viewerWidth / bigWidth;
viewerHeightRatio = viewerHeight / bigHeight;
break;
case 270:
viewerWidthRatio = viewerWidth / bigHeight;
viewerHeightRatio = viewerHeight / bigWidth;
break;
}
if (viewerWidthRatio >= viewerHeightRatio) {
zoomLevel = viewerHeightRatio;
} else {
zoomLevel = viewerWidthRatio;
}
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerFitWidth() {
switch(rotationLevel)
{
case 0:
zoomLevel = viewerWidth / bigWidth;
break;
case 90:
zoomLevel = viewerWidth / bigHeight;
break;
case 180:
zoomLevel = viewerWidth / bigWidth;
break;
case 270:
zoomLevel = viewerWidth / bigHeight;
break;
}
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
$('#dmZoomLevelGague').slider('option', 'value', (zoomLevel * 100));
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerRotateCounterclockwise() {
switch(rotationLevel)
{
case 0:
rotationLevel = 90;
break;
case 90:
rotationLevel = 180;
break;
case 180:
rotationLevel = 270;
break;
case 270:
rotationLevel = 0;
break;
}
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerRotateClockwise() {
switch(rotationLevel)
{
case 0:
rotationLevel = 270;
break;
case 90:
rotationLevel = 0;
break;
case 180:
rotationLevel = 90;
break;
case 270:
rotationLevel = 180;
break;
}
var navTempLeft = parseFloat($('.dmNavigator').css('left'));
var navTempTop = parseFloat($('.dmNavigator').css('top'));
var navOffsetRatioX = (navTempLeft + ($('.dmNavigator').width() / 2)) / $('#dmThumbnail').width();
var navOffsetRatioY = (navTempTop + ($('.dmNavigator').height() / 2)) / $('#dmThumbnail').height();
buildImage(zoomLevel, rotationLevel, navOffsetRatioX, navOffsetRatioY);
}
function viewerHideNavigator() {
thumbDivTempWidth = (thumbWidth + 10) * -1;
thumbDivTempHeight = (thumbHeight + 10) * -1;
if (hideNav === true) {
hideNav = false;
$('#dmThumbnail').animate({ top: 0, left: 0 }, 200).animate({ top:-30, left: 0 }, 200).animate({ top: 0, left: 0 }, 200);
} else {
hideNav = true;
$('#dmThumbnail').animate({ top: -60, left: 0 }, 200).animate({ top: 0, left: 0 }, 200).animate({ top: thumbDivTempHeight, left: 0 }, 200);
}
}
/*****************************************
*
* IT'S ALIVE!!!
*
******************************************/
buildImage(zoomLevel, rotationLevel, 0, 0);
}