/***************************************************************************

* Automatic Image Popup

* Copyright 2003 by David Schontzler | www.stilleye.com

* Free to use under GNU General Public License as long as this message

* remains intact.

* Description: Automate your image popup windows (centered and sized)

* Compatibility: Win/IE5+, Mozilla/Netscape, degrades otherwise

* URI: http://www.stilleye.com/projects/dhtml/iPop/

***************************************************************************

* Version: 2.0.4 + AutoApply

***************************************************************************/

///////////////// USER SETTINGS /////////////////

// Absolute path of *this* file on your server. This must be set for the

// script to function!!!

iPop.ScriptPath = "ipop.js";

// Set the target for browsers that don't support the script. By default,

// target is "_self" which will open in the same window as the link. Change

// it to whatever target you like. The built in targets (_blank, _self,

// _top, and _parent) are supported.

iPop.DegradeTarget = "_self";

// Set this to true if you want to be able to click on the image to close

// the popup window

iPop.ClickImageToClose = true;

// Set this to true if you want to close the last open popup image when you click

// on a new popup (like window reuse)

iPop.CloseOpenWindows = false;

///////////////// FUNCTIONALITY /////////////////

///////////////// DO NOT EDIT /////////////////

iPop.Version = 2.04;

iPop.imgWin = null;

function iPop(img, imgTitle) {

function degrade() {

switch(iPop.DegradeTarget) {

case "_blank" : open(img); break;

case "_self" : location = img; break;

case "_top" : top.location = img; break;

case "_parent" : parent.location = img; break;

default : open(img, iPop.DegradeTarget);

}

return false;

}


// just follow the link in browsers that do not support images or the DOM

// or launch in specified target if that's what you wanted it to do

if(!document.images || !document.getElementById) return degrade();


// check to close open popups (if set to do so)

if(iPop.CloseOpenWindows && iPop.imgWin) {

if(iPop.imgWin.close) iPop.imgWin.close();

iPop.imgWin = null;

}


// initial (small) window with loading screen

var width = 150, height = 100;

var left = (screen.availWidth - width)/2, top = (screen.availHeight - height)/ 2;

var imgWin = window.open("about:blank", "", "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top);

// when moz disables all popups, imgWin will be false

if(!imgWin) return degrade();


// user can pass an image title if they wish. by default,

// window title will display: "Image (img source)"

imgTitle = imgTitle || "Image (" + img + ")";


// html generated for use in our popup

// note on the javascript functions:

// wrapper functions with timeouts because sometimes the image is loaded

// before the script is loaded, at least in Win/IE when doing local testing;

// timeout should (presumably) prevent that

var html = '<!--\niPop Script (http://stilleye.com/projects/dhtml/iPop/)\niPop.Version = ' + iPop.Version + '\n-->';

html += '\n<html><head><title>Loading</title>';

html += '\n<script type="text/javascript" src="' + iPop.ScriptPath + '"></script>';

html += '\n<script type="text/javascript">\nvar _e = null;';

html += '\nvar _title = "' + imgTitle + '"';

html += '\nfunction iloaded(e) { _e = e; setTimeout("iPop.ImageLoaded(_e)", 10); };';

html += '\nfunction ierror(e) { _e = e; setTimeout("iPop.ErrorLoading(_e)", 10); };';

html += '\nfunction iview(e) { iPop.ImageLoadedManualPopup(e); };';

html += '</script>';

html += '<style type="text/css">';

html += 'html, body { font : 12px Arial; margin : 0; } h1 { font-size : 1.5em; }';

html += ' h2 { font-size : 1.2em; } a { color : blue; } img { border-color : black; }';

html += ' .message { position : absolute; left : 0px; top : 0px; width : 150px; height : 100px; background : white; text-align : center; }';

html += ' .message .main-message { font-weight : bold; display : block; }';

html += ' .message .secondary-message { color : #999; font-size : 11px; }';

html += ' .main-message.loading { margin-top : 35px; } .main-message.loaded { margin-top : 33px; } .main-message.error { margin-top : 25px; }';

html += ' #loading { z-index : 50; } #resize { z-index : 30; } #error { z-index : 40; }';

html += ' #image { position : absolute; left : 0px; top : 0px; width : 100%; height : 100%; z-index : 20; padding : 10px; background : white; }';

html += '</style>';

html += '\n</head>\n<body>';

html += '\n<div id="loading" class="message"><span class="main-message loading">Loading image.</span> <span class="secondary-message">Please wait...</span></div>';

html += '\n<div id="error" class="message"><span class="main-message error">Image not found.</span> <span class="secondary-message">Could not load image.<br><a href="javascript:window.close()">Close window</a></span></div>';

html += '\n<div id="resize" class="message"><span class="main-message error">Image loaded.</span> <span class="secondary-message">Your browser does not allow for window resizing.<br><a href="javascript:iview(_e)">View Image</a></span></div>';

html += '\n<div id="image">';

if(iPop.ClickImageToClose) html += '<a href="javascript:window.close()" title="Click to Close">';

html += '<img src="' + img + '" border="1" onload="iloaded(this)" onerror="ierror(this)">';

if(iPop.ClickImageToClose) html += '</a>';

html += '</div>';

html += '\n</body></html>';


imgWin.document.open();

imgWin.document.write(html);

imgWin.document.close();


iPop.imgWin = imgWin;


return false;

}

iPop.ImageLoaded = function(e) {

if(!e) return;

e.onload = null; e.onerror = null;


var width = e.width + 30, height = e.height + 70;

var tooLarge = false;


if(width > screen.availWidth) {

width = screen.availWidth - 20;

tooLarge = true;

}

if(height > screen.availHeight) {

height = screen.availHeight - 20;

tooLarge = true;

}

if(tooLarge) {

document.getElementById("image").style.overflow = "auto";

}


var tooSmall = false;

if( e.width < document.body.clientWidth && e.height < document.body.clientHeight ) tooSmall = true;


var left = (screen.availWidth - width)/2, top = (screen.availHeight - height)/ 2;

window.resizeTo(width, height);

window.moveTo(left, top);


var winWidth = document.body.clientWidth, winHeight = document.body.clientHeight;

if( (tooLarge && (winWidth < 200 || winHeight < 200) )

|| !tooLarge && !tooSmall && (e.width > 150 && winWidth <= 150 || e.height > 100 && winHeight <= 100) ) {

_e = {

src : e.src,

width : e.width,

height : e.height,

tooLarge : tooLarge

}

document.getElementById("loading").style.display = "none";

document.getElementById("error").style.display = "none";

document.getElementById("image").style.display = "none";

document.title = "Image Loaded";

} else { // can resize

document.getElementById("loading").style.display = "none";

document.getElementById("error").style.display = "none";

document.getElementById("resize").style.display = "none";

document.title = _title;

}

}

iPop.ErrorLoading = function(e) {

if(!e) return;

e.onload = null; e.onerror = null;


document.getElementById("loading").style.display = "none";

document.getElementById("resize").style.display = "none";

document.getElementById("image").style.display = "none";

document.title = "Image not found";

}

iPop.ImageLoadedManualPopup = function(e) {

if(!e) return;

var width = e.width + 20, height = e.height + 20;

if(width > screen.availWidth) width = screen.availWidth - 20;

if(height > screen.availHeight) height = screen.availHeight - 100;

var left = (screen.availWidth - width)/2, top = (screen.availHeight - height)/ 2;

window.open(e.src, "ManualImageViewer", "width=" + width + ",height=" + height + ",left=" + left + ",top=" + top + (e.tooLarge ? ",scrollbars" : ""));

window.close();

}

///////////////// EXTENSIONS /////////////////

// AutoApply 1.0

iPop.AutoApply = function(container) {

if(!container) container = document;

var a = container.getElementsByTagName("A");

for(var i = 0; i < a.length; i++) {

if( a[i].href.match(/\.(gif|jpg|png|jpeg)$/i) ) {

applyPopup(a[i]);

}

}


function applyPopup(link) {

// check to see if link holds *just* a thumbnail and get

// the thumbnail's alternate text for image popup title

var n, imgs = 0, whitespace = 0, alt = null;

for(var i = 0; n = link.childNodes[i]; i++) {

if(n.tagName == "IMG") {

imgs++;

alt = n.alt;

} else if(n.nodeValue) {

var val = n.nodeValue;

if( val.replace(/\s+/g, "") == "" ) whitespace++;

}

}

n = null;


// apply iPop to link

link.onclick = function(e) { return iPop(this.href, alt); }

}

}

