// OverVIEW (build 1.6) - popup image preview mod
// Designed for ImageFolio Pro v4
// by Mark Torrance
// mark.torrance@cox.net
// copyright 2008
// Feel free to distribute this software but please leave the above notice intact
// Download the most current version at ( http://www.bwstudios.biz/downloads/OverVIEW.zip )

//////////////////////////////////////

// OverVIEW User Configuration

var maxDim = 350; 				// Largest dimension of the popup image in pixels
var divPad = 5;					// Distance between the popup and the image in pixels
var fixedWidth = 0; 			// ( 1=Yes  0=No) Keep the div a fixed width(1) or collapse the width to fit the image(0)

var divBkgColor = '#232323'; 	// Background color in the pop up
var divBorderSize = 1; 			// Border size of the pop up in pixels
var divBorderType = 'solid';	// Border type of the pop up (solid, dotted, dashed, double, groove,inset, outset, ridge, hidden)
var divBorderColor = '#888888'; // Border color for the pop up

var imgBorderSize = 0;			// Border size of the image in pixels
var imgBorderType = 'solid';	// Border type of the image (solid, dotted, dashed, double, groove,inset, outset, ridge, hidden)
var imgBorderColor = '#999999';	// Border color of the image
var imgBorderPad = 2;			// Distance between the image and it's border in pixels

var divFontColor = '#DDDDDD';	// Font color in the pop up
var cursorPadX = 15; 			// Space between the pop up and cursor horizontally
var cursorPadY = 15; 			// Space between the pop up and cursor vertically
var msgText = '';	// User defined text message

// Select what information to display - Note: Only information that shows up with the thumbnail will show.
// For the following 1=Yes  0=No
var display_Filename = 1;
var display_Filetype = 0;
var display_Filesize = 0;
var display_Date = 0;
var display_Rating = 0;
var display_Downloads = 0;
var display_IPTC = 1;
var display_msgText = 1;

// End User Configuration

//////////////////////////////////////

function OverVIEW(obj,bigimagesrc,iptcfilename,filetype,filesize,iptcdate,rating,downloads,iptclist) {
// Check if disabled or enabled.
var dd = document.getElementById('displayCaption');
if (dd) {
  if(dd.value == 'Off') return false;
}

// Build Display Text
if (display_Filename == 1) {
iptcfilename = '<font class=ovLarge color=' + divFontColor + '>' + iptcfilename + '</font><br>';
} else {
iptcfilename = '';
}

if (display_Filetype == 1) {
filetype = '<font class=ovSmall color=' + divFontColor + '>' + filetype + '</font><br>';
} else {
filetype = '';
}

if (display_Filesize == 1) {
filesize = '<font class=ovSmall color=' + divFontColor + '>' + filesize + '</font><br>';
} else {
filesize = '';
}

if (display_Date == 1) {
iptcdate = '<font class=ovSmall color=' + divFontColor + '>Added: ' + iptcdate + '</font><br>';
} else {
iptcdate = '';
}

if (display_Rating == 1) {
if (rating) {
rating = '<font class=ovSmall color=' + divFontColor + '>Rated: ' + rating + '</font><br>';
} else {
rating = '';
}
}

if (display_Downloads == 1) {
if (downloads) {
downloads = '<font class=ovSmall color=' + divFontColor + '>Downloads: ' + downloads + '</font><br>';
} else {
downloads = '';
}
}

if (display_IPTC == 1) {
  if (iptclist) {
    iptclist = '<font class=ovSmall color=' + divFontColor + '>' + iptclist + '</font><br>';
  } else {
    iptclist = '';
  }
}

if (display_msgText == 1) {
if (msgText) {
msgtext = '<font class=ovSmall color=' + divFontColor + '>' + msgText + '</font><br>';
} else {
msgtext = '';
}
}

// Get information about the position and size of the thumbnail
var thumbHeight = obj.height;
var thumbWidth = obj.width;
var thumbLeft = thumbTop = 0;
	if (obj.offsetParent) {
		thumbLeft = obj.offsetLeft
		thumbTop = obj.offsetTop
		thumbRight = obj.offsetRight
		while (obj = obj.offsetParent) {
			thumbLeft += obj.offsetLeft
			thumbTop += obj.offsetTop
		}
	}

// Calculate the proportional short dimension of image 
if (thumbWidth < thumbHeight) { // vertical image
var minDim = ((maxDim / thumbHeight) * thumbWidth);
} else if (thumbWidth >= thumbHeight) { // horizontal image
var minDim = ((maxDim / thumbWidth) * thumbHeight);
}

// Create the OverVIEW div
newelement = document.createElement('div');
newelement.setAttribute('id','ovDiv');
newelement.setAttribute('name','ovDiv');

var boxWidth=0;
// Determine image orientation of the image by examining the thumbnail
if (thumbWidth < thumbHeight) { // Vertical Image
	if (fixedWidth == 1) {
	  newelement.innerHTML = '<span style="width:' + maxDim + 'px">' + iptcfilename + iptcdate + filetype + filesize + downloads + rating + iptclist + msgtext + '</span><center><div style="width:' + minDim + 'px; height:' + maxDim + 'px; border: ' + imgBorderSize + 'px ' + imgBorderType + ' ' + imgBorderColor + '; padding: ' + imgBorderPad + 'px;"><img src="' + bigimagesrc + '" alt="Image Loading" width="' + minDim + '" height="' + maxDim + '"></div></center>';
	} else {
	  newelement.innerHTML = '<span>' + iptcfilename + iptcdate + filetype + filesize + downloads + rating + iptclist + msgtext + '</span><center><div style="width:' + minDim + 'px; height:' + maxDim + 'px; border: ' + imgBorderSize + 'px ' + imgBorderType + ' ' + imgBorderColor + '; padding: ' + imgBorderPad + 'px;"><img src="' + bigimagesrc + '" alt="Image Loading" width="' + minDim + '" height="' + maxDim + '"></div></center>';
	}
	boxWidth=minDim;
} else if (thumbWidth >= thumbHeight) { // Square or Horizontal Image
	newelement.innerHTML = '<span style="width:' + maxDim + 'px">' + iptcfilename + iptcdate + filetype + filesize + downloads + rating + iptclist + msgtext +'</span><center><div style="width:' + maxDim + 'px; height:' + minDim + 'px; border: ' + imgBorderSize + 'px ' + imgBorderType + ' ' + imgBorderColor + '; padding: ' + imgBorderPad + 'px;"><img src="' + bigimagesrc + '" alt="Image Loading" width="' + maxDim + '" height="' + minDim + '"></div></center>';
	boxWidth=maxDim;
}

newelement.style.padding = divPad + 'px';
newelement.style.position ='absolute';
newelement.style.top = 0;
newelement.style.left = 0;
newelement.style.border = divBorderSize + 'px ' + divBorderType + ' ' + divBorderColor;
newelement.style.background = divBkgColor;
boxWidth=boxWidth+(divPad*2);
newelement.style.width = boxWidth+'px';

if (document.getElementById) { //IS IE 4 or 5 (or 6 beta) 
newelement.style.visibility="hidden";
} 
if (document.layers) { //IS NETSCAPE 4 or below
document.newelement.style.visibility="hidden";
} 

document.body.appendChild(newelement);


// Get height of the OverVIEW div
var ovDivHeight = document.getElementById('ovDiv').offsetHeight;
var ovDivWidth = document.getElementById('ovDiv').offsetWidth;

// Correct horizontal position of the div
if (thumbWidth < thumbHeight) { // vertical image

// Correct horizontal position if the div will leave the screen for vertical image
	var myOffX = 0;
	if(((thumbLeft - posLeft()) + thumbWidth + ovDivWidth + cursorPadX) >= pageWidth()){
	myOffX = ovDivWidth - ((ovDivWidth * 2) + (cursorPadX));
	} else {
	myOffX = cursorPadX;
	}
} else if (thumbWidth >= thumbHeight) { // horizontal image

// Correct horizontal position if the div will leave the screen for a square or horizontal image
	var myOffX = 0;
	if(((thumbLeft - posLeft()) + thumbWidth + ovDivWidth + cursorPadX) >= pageWidth()){
	myOffX = ovDivWidth - ((ovDivWidth * 2) + (cursorPadX));
	} else {
	myOffX = cursorPadX;
	}
}

// Correct vertical position if the div will leave the screen
var myOffY = 0;
ovDivHeight = document.getElementById('ovDiv').offsetHeight;
if ((ovDivHeight) >= (pageHeight())) {
myOffY = (pageHeight() / 2);
myOffY = '-' + myOffY;
myOffY = Number(myOffY)
} else if (((thumbTop - posTop()) + thumbHeight + ovDivHeight + cursorPadY) >= (pageHeight())) {
myOffY = (((thumbTop - posTop()) + thumbHeight + ovDivHeight) - (pageHeight()));

if (myOffY >= (ovDivHeight + cursorPadY)) {
myOffY = ovDivHeight + cursorPadY;
myOffY = '-' + myOffY;
myOffY = Number(myOffY);
} else {
myOffY = myOffY - (myOffY * 2);
myOffY = Number(myOffY)
}

} else {
myOffY = cursorPadY;

}


// Make div follow mouse
var divName = 'ovDiv'; // div that is to follow the mouse
                       // (must be position:absolute)
var offX = myOffX;     // X offset from mouse position
var offY = myOffY;     // Y offset from mouse position

function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

function follow(evt) {if (document.getElementById(divName)) {var obj = document.getElementById(divName).style;

if (document.getElementById) { //IS IE 4 or 5 (or 6 beta) 
document.getElementById('ovDiv').style.visibility = 'visible';
} 
if (document.layers) { //IS NETSCAPE 4 or below
document.newelement.style.visibility="visible";
} 

obj.left = (parseInt(mouseX(evt))+offX) + 'px';
obj.top = (parseInt(mouseY(evt))+offY) + 'px';}}
document.onmousemove = follow;
}

// Hide OverVIEW
function HideOverVIEW(elem){
var newelement = document.getElementById('ovDiv');
if (newelement) {
  document.body.removeChild(newelement);
}
}

// Browser Window Size and Position //
//// This Section //// copyright Stephen Chapman, 3rd Jan 2005, 8th Dec 2005
//// You may copy these functions but please keep the copyright notice as well
//// For more info on this section visit ( http://javascript.about.com/library/blscreen1.htm )

function pageWidth() {
return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ?
document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
}

function pageHeight() {
return  window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ?
document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
}

function posLeft() {
return typeof window.pageXOffset != 'undefined' ?
window.pageXOffset :document.documentElement && document.documentElement.scrollLeft ?
document.documentElement.scrollLeft : document.body.scrollLeft ? document.body.scrollLeft : 0;
}

function posTop() {
return typeof window.pageYOffset != 'undefined' ?
window.pageYOffset : document.documentElement && document.documentElement.scrollTop ?
document.documentElement.scrollTop : document.body.scrollTop ? document.body.scrollTop : 0;
}

function posRight() {
return posLeft()+pageWidth();} function posBottom() {return posTop()+pageHeight();
}