﻿
// Image PopUp II (29-May-2006)
// by Vic Phillips http://www.vicsjavascripts.org.uk

// An alternative to the Standard PopUp to display an Image
// The PopUp is sizes to the displayed image and cannot be blocked.
// An optional TitleBar displays a default or specified  title
// and allows the PopUp to be Drag and Dropped to a new position
//
// An optional message panel may display a message below the image.
//
// The appearance of the PopUp may be customised using Customising Variables.
// The PopUp Image may be its natural or a specified size.
//
// The PopUp is normally populated with an image and displayed by an onclick event
// and hidden be clicking outside the event object or the title 'X' box.

// Optional Code allows:
// Positioning a opaque mask under the Image PopUp
// To Center the Image PopUp in the window


// Application Notes

// **** Initialisation
//
// The Image PopUp is initialised from a <BODY> or window onload event
// e.g.
// <body onload="zxcInitImgPopUpII();" >
//

// Activating the Image PopUp
//
// The PopUp is normally populated with an image and displayed by an onclick event
//
// <img src="Three.gif" width="50" height="50"
// onClick="zxcImgPopUpII(this,-160,-100,'WinterPalace.jpg','The Winter Palace',[300,225],['mess1','the message']);" />
// where:
// parameter 0 = The PopUp position anchor object or unique ID name.                                      (string or object)
// parameter 1 = the horizontal(X) offset from the anchor object.                                         (digits)
// parameter 2 = the vertical(Y)   offset from the anchor object.                                         (digits)
// parameter 3 = the directory path and file name of the image to be displayed.                           (string)
// parameter 4 = (optional) the text to be displayed in the title(null if the title bar is not required). (string or null)
// parameter 5 = (optional) an array to force the image to a specified.                                   (an array of two digits or null)
//                 field 0 = width,
//                 field 1 = height.
// parameter 6 = (optional) an array to define a message panel.                                           (an array of two strings or null)
//                 field 0 = the style class name to apply to the message panel,
//                 field 1 = the message HTML code.
//

// **** The Title Bar
//
// The optional Title Bar is displayed if parameter 5 of function call to 'zxcImgPopUpII(' is completed.
// The string specified in parameter 5 will be displayed in the title bar
// unless only one character is specified, in which case the Default Title will be displayed.


// **** Drag and Drop
//
// The Image may be Dragged and Dropped from the Title Bar
// The Initial position is specified by the event call to display the image.
// Once repositioned this position is updated for the next time the image is displayed.
//


// ***** Opacity Mask
//
// Image PopUp II Part 2 is required for this options
//
// An  Opacity Mask may be placed under the Image PopUp.
// This 'Mask' is dimensioned to the current window and the opacity, color and background image specified.
//
// The 'Mask' will not be displayed in browsers which do not support opacity
//
// ** A Default 'Mask'
//
// A default 'Mask' is initialised from a <BODY> or window onload event
// and called after the 'zxcInitImgPopUpII()' call.
// e.g.
// <body onload=" zxcInitImgPopUpII();zxcInitMask(10,'#CCFFFF','WinterPalace.jpg');" >
// where function 'zxcInitMask('
// parameter 0 = the opacity.                      (digits 1 to 99)
// parameter 1 = (optional) the back ground color. (string, a valid color or '' if not required)
// parameter 2 = (optional) the back ground image. (string, a valid image file name or omit if not required)
//
// An Object 'Mask'
//
// Specific instances of an Image PopUp may be assigned a 'Mask'
// This 'Object Mask' will have precedence over the 'Default Mask'
// The 'Object Mask' is activated be the same call as the Image PopUp call
// e.g.
// <img src="Two.gif" width="50" height="50" title="Click Me" onClick="zxcImgPopUpII('C',-160,-100,'WinterPalace.jpg','The Winter Palace');zxcObjMask(this,50,'red','WinterPalace.jpg')" />
// where function 'zxcInitMask('
// parameter 0 = The PopUp position anchor object or unique ID name. (string or object)
// parameter 1 = the opacity.                                        (digits 1 to 99)
// parameter 2 = (optional) the back ground color.                   (string, a valid color or '' if not required)
// parameter 3 = (optional) the back ground image.                   (string, a valid image file name or omit if not required)
//

// **** To Center the Image PopUp in the window
//
// Image PopUp II Part 2 is required for this options
//
// The Image PopUp would normally be positioned relative to the object specified
// in parameter 0 of the activating call 'zxcImgPopUpII('
//
// To center the Image PopUp in the current window this parameter must be specified a 'C'
// e.g.
// <img src="Two.gif" width="50" height="50" title="Click Me" onClick="zxcImgPopUpII('C',-160,-100,'WinterPalace.jpg','The Winter Palace');" />
//


// **** General
//
// All variable, function etc. names are prefixed with 'zxc' to minimise conflicts with other JavaScripts
// These characters may be changed to characters of choice using global find and replace
//
// The Functional Code Part 1 (about 7K) and  Part 2 (about 2.5K) are best as External JavaScripts.
// The Functional Code size may be reduced by including only the required functions.
//
// Tested with IE6 and Mozilla FireFox

<!--
function InitScripts(){
 if (self.location.toString().toLowerCase().match('vicsjavascripts')){
  pnInitSearchPanel();
 }
 var imgs=document.getElementsByTagName('BODY')[0].getElementsByTagName('IMG')
 for (var zxc0=0;zxc0<imgs.length;zxc0++){
  imgs[zxc0].style.cursor=document.all?'hand':'pointer';
 }
 zxcInitImgPopUpII();
 zxcInitMask(10,'','');
}

// **** Customising Variables

var zxcExitImage='http://www.vicsjavascripts.org.uk/StdImages/Exit1.gif'; // The image to use as the exit button (string or null if not required)
var zxcDefaultTitle='Default Title (Resized Image)';  // The default title                                         (string)
var zxcFrameSize=5;                   // The size of the frame surrounding the image               (digits)
var zxcFrameColor='#ffffff';          // the background color of the frame(Must be a valid color). (string)
var zxcFrameBorder='#3f76bc';         // the border color of the frame(Must be a valid color).     (string)
var zxcZIndex=1000;                   // the Image PopUp must be above other page element.         (digits)
var zxcBarBGColor='#c2d6f7';          // The Title Bar Background Color (Must be a valid color).   (string)
var zxcBarTxColor='#000000';          // The Title Bar Text       Color (Must be a valid color).   (string)
var zxcBarTxtSize=18;                 // The Title Bar Font(Text) Size (in px).                    (digits)

// **** Functional Code - No Need to Change

var zxcBdy,zxcIPU,zxcObj,zxcTObj,zxcMask;
var zxcCursor=document.all?'hand':'pointer';
var zxcEvt=0;

function zxcInitImgPopUpII(){
 zxcBdy=document.getElementsByTagName('BODY')[0];
 var zxcpu=zxcStyle('DIV',{position:'absolute',overflow:'hidden',zIndex:zxcZIndex+'',visibility:'hidden',backgroundColor:zxcFrameColor,border:'solid '+zxcFrameBorder+' 1px',textAlign:'center'});
 zxcpu.imgtop=zxcDefaultTitle?(zxcBarTxtSize+zxcFrameSize+6):0;
 zxcpu.img=zxcStyle('IMG');
 zxcpu.img.src='http://www.vicsjavascripts.org.uk/StdImages/One.gif';
 zxcpu.appendChild(zxcpu.img);
 zxcBdy.appendChild(zxcpu);
 if (!zxcDefaultTitle){ return; }
 zxcd=zxcStyle('DIV',{position:'absolute',left:'0px',top:'0px',width:'100%',height:(zxcBarTxtSize+8)+'px',color:zxcBarTxColor,backgroundColor:zxcBarBGColor,borderBottom:'solid '+zxcFrameBorder+' 1px',textAlign:'center',fontSize:zxcBarTxtSize+'px',cursor:'move'});
 zxcpu.appendChild(zxcd);
 zxcpu.d=zxcStyle('DIV',{position:'absolute',left:'0px',top:'2px',width:'100%',height:(zxcBarTxtSize+10)+'px',color:zxcBarTxColor,textAlign:'center',fontSize:zxcBarTxtSize+'px',cursor:'move'},' ');
 zxcpu.d.onmousedown=function(event){ zxcMseDown(event); }
 zxcd.appendChild(zxcpu.d);
 zxcpu.d.pu=true;
 zxcpu.x=zxcStyle('DIV',{position:'absolute',overflow:'hidden',top:'1px',width:(zxcBarTxtSize+4)+'px',height:(zxcBarTxtSize+4)+'px',color:'#000000',backgroundColor:'silver',textAlign:'center',border:'solid black 1px',cursor:zxcCursor,fontFamily:'Courier New, Courier, monospace'},'X');
 zxcd.appendChild(zxcpu.x);
 zxcpu.x.onclick=function(){ this.parentNode.parentNode.style.visibility='hidden'; }
 zxcpu.ximg=zxcStyle('IMG',{position:'absolute',left:'0px',top:'0px',width:(zxcBarTxtSize+5)+'px',height:(zxcBarTxtSize+5)+'px'});
 if (zxcExitImage){ zxcStyle(zxcpu.x,{overflow:'visible',border:'0px'}); zxcpu.ximg.src=zxcExitImage; zxcpu.x.appendChild(zxcpu.ximg); }
 zxcIPU=zxcpu;
}

function zxcImgPopUpII(zxcobj,zxcosx,zxcosy,zxcimg,zxctitle,zxcwh,zxcmes){
 var zxcobj=zxcCkObject(zxcobj);
 var zxcnewimg=zxcStyle('IMG',{position:'relative',zIndex:'1'});
 zxcnewimg.src=zxcimg;
 zxcIPU.replaceChild(zxcnewimg,zxcIPU.img);
 zxcIPU.img=zxcnewimg;
 zxcIPU.obj=zxcobj;
 zxcTObj=zxcobj;
 zxcosx=zxcosx||0; zxcosy=zxcosy||0;
 if (typeof(zxcobj)=='string'){ zxcobj=zxcobj.toUpperCase(); }
 else { zxcStyle(zxcIPU,{left:(zxcobj.xos||(zxcPos(zxcobj)[0]+zxcosx))+'px',top:(zxcobj.yos||(zxcPos(zxcobj)[1]+zxcosy))+'px'}); }
 var imgtop=zxctitle?(zxcIPU.imgtop):zxcFrameSize-2;
 zxcStyle(zxcIPU.img,{top:(imgtop)+'px'});
 zxcStyle(zxcIPU.x,{left:'0px'});
 zxcStyle(zxcIPU.d.parentNode,{visibility:'hidden'});
 zxcIPU.stitle=false;
 if (zxctitle){
  zxcIPU.stitle=true;
  zxcIPU.d.firstChild.data=(zxctitle.length>1)?zxctitle:zxcDefaultTitle;
 }
 zxcIPU.mes=zxcmes;
 zxcRemoveMess();
 zxcPUSize();
 zxcCkLoad(zxcimg,zxcwh);
}

function zxcCkLoad(zxcimg,zxcwh){
 var zxcimgsrc=(zxcwh)?new Image(zxcwh[0],zxcwh[1]):new Image();
 zxcimgsrc.onload=function(){ zxcIPU.img.width=this.width; zxcIPU.img.height=this.height; zxcPUSize(); }
 zxcimgsrc.src=zxcimg
}

function zxcPUSize(){
 zxcStyle(zxcIPU,{width:(zxcIPU.img.offsetWidth+zxcFrameSize*2)+'px',height:(zxcIPU.img.offsetTop+zxcIPU.img.offsetHeight+zxcFrameSize)+'px'});
 zxcStyle(zxcIPU.x,{left:(zxcIPU.offsetWidth-zxcBarTxtSize-10)+'px'});
 if (zxcIPU.mes){ zxcMessagePanel(); }
 if (zxcMask){ zxcShowMask(zxcMask); }
 if (typeof(zxcIPU.obj)!='string'){ zxcStyle(zxcIPU,{visibility:'visible'}); if ( zxcIPU.stitle){ zxcStyle(zxcIPU.d.parentNode,{visibility:'visible'}); } }
 else if (window['zxcCenter']){ zxcCenter(); }
}

function zxcMessagePanel(){
 zxcIPU.mess=zxcStyle('DIV',{position:'absolute',zIndex:'10',left:(zxcFrameSize-1)+'px',top:(zxcIPU.img.offsetTop+zxcIPU.img.offsetHeight+zxcFrameSize)+'px',width:zxcIPU.img.offsetWidth+'px'});
 zxcIPU.appendChild(zxcIPU.mess);
 zxcIPU.mess.className=zxcIPU.mes[0];
 zxcIPU.mess.innerHTML=zxcIPU.mes[1];
 zxcStyle(zxcIPU,{height:(zxcIPU.mess.offsetTop+zxcIPU.mess.offsetHeight+zxcFrameSize)+'px'});
}

function zxcRemoveMess(){
 if (zxcIPU.mess){zxcIPU.removeChild(zxcIPU.mess); }
 zxcIPU.mess=null;
}

function zxcMseDown(event){
 if (zxcObj){ return; }
 document.onselectstart=function(event){window.event.returnValue=false; }
 zxcObj=zxcIPU;
 zxcObj.pos=[zxcPos(zxcObj)[0],zxcPos(zxcObj)[1]];
 zxcObj.osx=zxcMse(event)[0]-zxcObj.offsetLeft;
 zxcObj.osy=zxcMse(event)[1]-zxcObj.offsetTop;
}

function zxcDrag(event){
 if (!zxcObj){ return; }
 zxcObj.style.left=(zxcMse(event)[0]-zxcObj.osx)+'px';
 zxcObj.style.top=(zxcMse(event)[1]-zxcObj.osy)+'px';
}

function zxcMse(event){
 if(!event) var event=window.event;
 if (document.all){ return [event.clientX+zxcDocS()[0],event.clientY+zxcDocS()[1]]; }
 else { return[event.pageX,zxcMseY=event.pageY]; }
}

function zxcDocS(){
 var zxcsx,zxcsy;
 if (!document.body.scrollTop){ zxcsx=document.documentElement.scrollLeft; zxcsy=document.documentElement.scrollTop; }
 else { zxcsx=document.body.scrollLeft; zxcsy=document.body.scrollTop; }
 return [zxcsx,zxcsy];
}

function zxcMseUp(event){
 if (!zxcEventObj(event).pu||!zxcObj){
  zxcStyle(zxcIPU.d.parentNode,{visibility:'hidden'});
  zxcStyle(zxcIPU,{visibility:'hidden'});
  zxcStyle(zxcMask,{visibility:'hidden'});
  if (zxcIPU.mask){ zxcStyle(zxcIPU.mask,{visibility:'hidden'}); }
  return;
 }
 document.onselectstart=null;
 if (zxcTObj){
  zxcTObj.xos=zxcPos(zxcObj)[0];
  zxcTObj.yos=zxcPos(zxcObj)[1];
 }
 zxcRemoveMess();
 zxcObj=null;
 zxcTObj=null;
}

function zxcEventObj(zxce){
 if (!zxce) var zxce=window.event;
 if (zxce.target) zxceobj=zxce.target;
 else if (zxce.srcElement) zxceobj=zxce.srcElement;
 if (zxceobj.nodeType==3) zxceobj=zxceobj.parentNode;
 return zxceobj;
}

function zxcPos(zxc){
 zxcObjLeft = zxc.offsetLeft;
 zxcObjTop = zxc.offsetTop;
 while(zxc.offsetParent!=null){
  zxcObjParent=zxc.offsetParent;
  zxcObjLeft+=zxcObjParent.offsetLeft;
  zxcObjTop+=zxcObjParent.offsetTop;
  zxc=zxcObjParent;
 }
 return [zxcObjLeft,zxcObjTop];
}

function zxcCkObject(zxcid){
 if (typeof(zxcid)=='string'){ zxcp=document.getElementById(zxcid); }
 return zxcid;
}

function zxcStyle(zxcele,zxcstyle,zxctxt){
 if (!zxcele){ return; }
 if (typeof(zxcele)=='string'){ zxcele=document.createElement(zxcele); }
 for (key in zxcstyle){ zxcele.style[key]=zxcstyle[key]; }
 if (zxctxt){ zxcele.appendChild(document.createTextNode(zxctxt)); }
 return zxcele;
}

function zxcEventAdd(zxco,zxct,zxcf){
 if (zxco.addEventListener){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
 else if (zxco.attachEvent){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
 else {
  var zxcPrev=zxco['on'+zxct];
  if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
  else { zxco['on'+zxct]=zxco[zxcf]; }
 }
}

function zxcAddEvt(zxcobj,zxcfun,zxcevt){
 if (zxcobj[zxcevt+'add']){ return; }
 zxcobj['zxcaddEvt'+zxcEvt]=window[zxcfun];
 zxcobj[zxcevt+'add']=true;
 zxcEventAdd(zxcobj,zxcevt,'zxcaddEvt'+zxcEvt);
 zxcEvt++;
}

zxcAddEvt(document,'zxcDrag','mousemove');
zxcAddEvt(document,'zxcMseUp','mouseup');

// ***** Functional Code - NO NEED TO CHANGE

function zxcInitMask(zxcopc,zxccol,zxcimg){
 zxcMask=zxcStyle('DIV',{position:'absolute',zIndex:(zxcZIndex)+'',visibility:'hidden',backgroundColor:zxccol,backgroundImage:'url('+zxcimg+')'});
 zxcStyle(zxcIPU,{zIndex:(zxcZIndex+1)+''});
 zxcBdy.appendChild(zxcMask);
 if (!zxcOpacity(zxcMask,zxcopc)){ zxcMask=null; }
}

function zxcObjMask(zxcobj,zxcopc,zxccol,zxcimg){
 var zxcobj=zxcCkObject(zxcobj);
 if (!zxcobj.mask){
  zxcobj.mask=zxcStyle('DIV',{position:'absolute',zIndex:(zxcZIndex)+'',backgroundColor:zxccol,backgroundImage:'url('+zxcimg+')'});
  zxcBdy.appendChild(zxcobj.mask);
 }
 zxcStyle(zxcIPU,{zIndex:(zxcZIndex+1)+''});
 zxcStyle(zxcMask,{visibility:'hidden'});
 setTimeout('zxcStyle(zxcMask,{visibility:\'hidden\'});',50);
 zxcIPU.mask=zxcobj.mask;
 zxcStyle(zxcobj.mask,{ backgroundColor:zxccol,backgroundImage:'url('+zxcimg+')'});
 zxcOpacity(zxcobj.mask,zxcopc);
 zxcShowMask(zxcobj.mask)
}

function zxcOpacity(zxcobj,zxcopc) {
 if (zxcopc<0||zxcopc>100){ return; }
 if (zxcobj.style.MozOpacity!=null){ zxcobj.style.MozOpacity=(zxcopc/100)-.001; return true;}
 else if (zxcobj.style.opacity!=null){ zxcobj.style.opacity=(zxcopc/100)-.001; return true; }
 else if (zxcobj.style.filter!=null){ zxcobj.style.filter = 'alpha(opacity='+zxcopc+')'; return true; }
 else if (zxcobj.KHTMLOpacity!=null){ zxcobj.KHTMLOpacity=(zxcopc/100)-.001; return true; }
 return false;
}

function zxcShowMask(zxcmsk){
 zxcStyle(zxcmsk,{visibility:'visible',left:zxcWWHS()[2]+'px',top:zxcWWHS()[3]+'px',width:zxcWWHS()[0]+'px',height:zxcWWHS()[1]+'px'})
}

function zxcCenter(){
 zxcStyle(zxcIPU,{visibility:'visible',left:((zxcWWHS()[0]-parseInt(zxcIPU.style.width))/2+zxcWWHS()[2])+'px',top:((zxcWWHS()[1]-parseInt(zxcIPU.style.height))/2+zxcWWHS()[3])+'px'});
 if ( zxcIPU.stitle){ zxcStyle(zxcIPU.d.parentNode,{visibility:'visible'}); }
}

function zxcWWHS(){
 var winww,zxcwh,zxcsl,zxcst,zxcwc;
 if (window.innerHeight){
  zxcwh=window.innerHeight;
  zxcww=window.innerWidth-20;
  zxcsl=window.pageXOffset;
  zxcst=window.pageYOffset;
 }
 else if (document.documentElement.clientHeight){
  zxcwh=document.documentElement.clientHeight;
  zxcww=document.documentElement.clientWidth;
  zxcsl=document.documentElement.scrollLeft;
  zxcst=document.documentElement.scrollTop;
 }
 else if (document.body.clientHeight){
   zxcwh=document.body.clientHeight;
   zxcww=document.body.clientWidth;
   zxcsl=document.body.scrollLeft;
   zxcst=document.body.scrollTop;
  }
 return [zxcww,zxcwh,zxcsl,zxcst];
}

-->



