// WB's Magnifying Popups
// Copyright (c) 2010 Broomfield Associates

autooffset = 30;

// Object to link a magnifying popup to an image
function Magnifier(thumbid, fullid, fullsrc, fullwidth, fullheight, numsteps, steptime) {

    // Store the parameter values in the object
    this.thumbid = thumbid;
    this.fullid = fullid;
    this.fullsrc = fullsrc;
    this.fullwidth = fullwidth;
    this.fullheight = fullheight;
    this.numsteps = numsteps;
    this.steptime = steptime;

    // Select features for this object
    this.dimbackground = false;
    this.dimlevel = 0.6;
    this.residualimage = false;
    this.residualclass = "";
    this.frameselect = false;
    this.frameclass = "";
    this.framedeltaleft = 0;
    this.framedeltatop = 0;
    this.annoteselect = false;
    this.annoteclass = "";
    this.annotedeltaleft = 0;
    this.annotedeltatop = 0;
    this.annotecontents = "";
    this.shadowselect = false;

    // Variables for use in sizing and positioning
    this.currwidth = 0;
    this.currheight = 0;
    this.currdw = 0;
    this.currdh = 0;
    this.currleft = 0;
    this.currtop = 0;
    this.currdl = 0;
    this.currdt = 0;
    this.currstep = 0;
        
    // Calculate absolute position of the thumbnail image
    this.thumbimg = document.getElementById(this.thumbid);
    this.thumbwidth = this.thumbimg.offsetWidth;
    this.thumbheight = this.thumbimg.offsetHeight;
    tmpnode = this.thumbimg;
    this.thumbleft = tmpnode.offsetLeft;
    this.thumbtop = tmpnode.offsetTop;
	while(tmpnode.offsetParent) {
		this.thumbleft += tmpnode.offsetParent.offsetLeft;
		this.thumbtop += tmpnode.offsetParent.offsetTop;
		tmpnode = tmpnode.offsetParent;
	};

    // Create a new image node (not yet linked into the DOM) for the full size image, but do not pre-load
    this.fullimg = new Image(0, 0);
//    this.fullimg.src = this.fullsrc;
//    this.fullimg.title = "Click to shrink";
    
    // Create empty divs for framing the full image, marking residual of thumbnail and background dimmer
    this.dimmer = document.createElement("div");
    this.residual = document.createElement("div");
    this.framediv = document.createElement("div");
    this.annote = document.createElement("div");
    
    // Select background dimmer for this object
    this.SetDimmer = function(opacity) {
        this.dimbackground = true;
        this.dimlevel = opacity;
    }

    // Select residual image for this object
    this.SetResidual = function(classname) {
        this.residualimage = true;
        this.residualclass = classname;
    }

    // Select enclosing frame for this object
    this.SetFrame = function(classname, dleft, dtop) {
        this.frameselect = true;
        this.frameclass = classname;
        this.framedeltaleft = dleft;
        this.framedeltatop = dtop;
    }

    // Select frame annotation for this object
    this.SetAnnotation = function(classname, dleft, dtop, contents) {
        this.annoteselect = true;
        this.annoteclass = classname;
        this.annotedeltaleft = dleft;
        this.annotedeltatop = dtop;
        this.annotecontents = contents;
    }

    // Select whether drop shadow wanted for this object
    this.SetShadow = function() {
        this.shadowselect = true;
    }

    // Object now established, complete set up in separate function
    // Needed for the asynch "onclick" handler function to be able to refer to the correct object
    MagSetPopup(this);

}

// Complete the set up by adding an "onclick" handler for the thumbnail image
// Note: newdiv["onclick"] form needed for IE - would have preferred: newdiv.setAttribute("onClick", "MagPopdown()")
function MagSetPopup(magobj) {
    magobj.thumbimg['onmouseup'] = function(){MagPopup(magobj); return false;};
}

// Onclick handler to magnify the thumbnail image to full size
function MagPopup(magobj) {

    // Avoid multiple clicks on the thumbnail
    magobj.thumbimg['onmouseup'] = null;
    
    // Load image now to avoid too much pre-loading
    magobj.fullimg.src = magobj.fullsrc;
    magobj.fullimg.title = "Click to shrink";

    // Convenient position for full image, coping with IE deficiency
    if(typeof(window.pageXOffset) == "number") {
        magobj.fullleft = window.pageXOffset + autooffset;
        magobj.fulltop = window.pageYOffset + autooffset;
    } else {
        magobj.fullleft = document.documentElement.scrollLeft + autooffset;
        magobj.fulltop = document.documentElement.scrollTop + autooffset;
    };
    autooffset += 10;

    // Calculate the resizing increments
    magobj.currdw = (magobj.fullwidth - magobj.thumbwidth) / magobj.numsteps;
    magobj.currdh = (magobj.fullheight - magobj.thumbheight) / magobj.numsteps;
    magobj.currdl = (magobj.fullleft - magobj.thumbleft) / magobj.numsteps;
    magobj.currdt = (magobj.fulltop - magobj.thumbtop) / magobj.numsteps;

    // The full image initially on top of the thumbnail
    magobj.fullimg.style.position = "absolute";
    magobj.currwidth = magobj.thumbwidth;
    magobj.currheight = magobj.thumbheight;
    magobj.currleft = magobj.thumbleft;
    magobj.currtop = magobj.thumbtop;
    magobj.currstep = magobj.numsteps;
    ImageSet(magobj);

    // Establish full image in the body and set its style
    bodynode = (document.getElementsByTagName("body"))[0];
    bodynode.appendChild(magobj.fullimg);
    magobj.fullimg.setAttribute("id", magobj.fullid);
    magobj.fullimg.style.visibility = "visible";

    // Establish the residual image and hide the thumbnail
    if(magobj.residualimage) {
        magobj.residual.className = magobj.residualclass;
        magobj.residual.style.position = "absolute";
        magobj.residual.style.width = magobj.thumbwidth + "px";
        magobj.residual.style.height = magobj.thumbheight + "px";
        magobj.residual.style.left = magobj.thumbleft + "px";
        magobj.residual.style.top = magobj.thumbtop + "px";
        magobj.thumbimg.parentNode.insertBefore(magobj.residual, magobj.thumbimg);
        magobj.residual.style.visibility = "visible";
    };
    magobj.thumbimg.style.visibility = "hidden"; 

    // Start the magnification
    magup(magobj);

}

// Clock routine to expand the image
function magup(magobj) {

    if(magobj.currstep-- > 0) {

        // Expand and move the full size image in steps
        magobj.currwidth += magobj.currdw;
        magobj.currheight += magobj.currdh;
        magobj.currleft += magobj.currdl;
        magobj.currtop += magobj.currdt;
        ImageSet(magobj);
        setTimeout(function(){magup(magobj)}, magobj.steptime);
        return;
    };

    // Establish background dimmer to overlap full screen below the full image and make clickable
    if(magobj.dimbackground) {
        magobj.dimmer.style.position = "absolute";
        magobj.dimmer.style.width = screen.width + "px";
        magobj.dimmer.style.height = screen.height + "px";
        magobj.dimmer.style.left = "0px";
        magobj.dimmer.style.top = "0px";
        bodynode.insertBefore(magobj.dimmer, magobj.fullimg);
        magobj.dimmer.style.backgroundColor = "black";
        fadeopacity(magobj.dimmer, magobj.dimlevel);
        magobj.dimmer.style.visibility = "visible";
        magobj.dimmer['onmouseup'] = function(){MagPopdown(magobj); return false;};
    };
    
    // Establish frame for the full image, relocate the image under it and replace full image by the frame
    if(magobj.frameselect) {
        magobj.fullimg.parentNode.insertBefore(magobj.framediv, magobj.fullimg);
        magobj.fullimg.parentNode.removeChild(magobj.fullimg);
        magobj.framediv.className = magobj.frameclass;
        magobj.framediv.style.position = "absolute";
        magobj.framediv.style.left = magobj.fullleft - magobj.framedeltaleft + "px";
        magobj.framediv.style.top = magobj.fulltop - magobj.framedeltatop + "px";
        magobj.framediv.appendChild(magobj.fullimg);
        magobj.fullimg.style.position = "absolute";
        magobj.fullimg.style.left = magobj.framedeltaleft + "px";
        magobj.fullimg.style.top = magobj.framedeltatop + "px";
        if(magobj.annoteselect) {
            magobj.annote.className = magobj.annoteclass;
            magobj.annote.style.position = "absolute";
            magobj.annote.style.left = magobj.annotedeltaleft + "px";
            magobj.annote.style.top = magobj.annotedeltatop + "px";
            magobj.annote.innerHTML = magobj.annotecontents;
            magobj.framediv.appendChild(magobj.annote);
// How to make annotation into an active link
//            magobj.annote['onmousedown'] = function(ev){
//            ev  = ev || window.event; ev.cancelBubble = true; if(ev.stopPropagation) ev.stopPropagation();
//            window.open("/images/williams1.jpg", "_blank");
//            return false;};
        };
        magobj.fullimg = magobj.framediv;
    };

    // Add a drop shadow if required
    if(magobj.shadowselect) {magobj.fullimg = AddShadow(magobj.fullimg); };

    // Set handler for contracting the image again and make draggable
    magobj.fullimg['onmouseup'] = function(){MagPopdown(magobj); return false;};
    MakeDraggable(magobj.fullimg);

}

// Onclick handler to shrink the full size image back to a thumbnail again
function MagPopdown(magobj) {

    // Avoid multiple clicks on the full image
    magobj.fullimg['onmouseup'] = "";

    // Remove the shadow if selected
    if(magobj.shadowselect) {magobj.fullimg = RemoveShadow(magobj.fullimg); };

    // Relocate the image out of its frame in preparation for shrinking
    if(magobj.frameselect) {
        tmpleft = magobj.fullimg.offsetLeft;
        tmptop = magobj.fullimg.offsetTop;
        tmpnode = magobj.fullimg.firstChild;
        magobj.fullimg.removeChild(tmpnode);
        magobj.fullimg.parentNode.appendChild(tmpnode);
        tmpnode.style.left = tmpleft + "px";
        tmpnode.style.top = tmptop + "px";
        magobj.fullimg.parentNode.removeChild(magobj.fullimg);
        tmpnode.style.visibility = "hidden"; tmpnode.style.visibility = "visible"; //Needed for IE!
        magobj.fullimg = tmpnode;
    };

    // Re-calculate the resizing increments as the full image may have been moved
    // Note that the full image is position: absolute, therefore simple left and top calculations
    magobj.currleft = magobj.fullimg.offsetLeft;
    magobj.currtop = magobj.fullimg.offsetTop;
    fullleft = magobj.currleft;
    fulltop = magobj.currtop;
    magobj.currdw = (magobj.fullwidth - magobj.thumbwidth) / magobj.numsteps;
    magobj.currdh = (magobj.fullheight - magobj.thumbheight) / magobj.numsteps;
    magobj.currdl = (fullleft - magobj.thumbleft) / magobj.numsteps;
    magobj.currdt = (fulltop - magobj.thumbtop) / magobj.numsteps;

    // Set up the variables for the shrinking
    magobj.currwidth = magobj.fullwidth;
    magobj.currheight = magobj.fullheight;
    magobj.currleft = fullleft;
    magobj.currtop = fulltop;
    magobj.currstep = magobj.numsteps;
    autooffset -= 10;

    // Start the shrinking
    magdown(magobj);

}

// Clock routine to shrink the image
function magdown(magobj) {

    if(magobj.currstep-- > 0) {

        // Contract and move the full size image in steps
        magobj.currwidth -= magobj.currdw;
        magobj.currheight -= magobj.currdh;
        magobj.currleft -= magobj.currdl;
        magobj.currtop -= magobj.currdt;
        ImageSet(magobj);
        setTimeout(function(){magdown(magobj)}, magobj.steptime);
        return;
        
    };

    // Hide all of the added bits and reset the popup handler on the thumbnail
    MakeUnDraggable(magobj.fullimg);
    if(magobj.dimbackground) magobj.dimmer.parentNode.removeChild(magobj.dimmer);
    if(magobj.residualimage) magobj.residual.parentNode.removeChild(magobj.residual);
    magobj.fullimg.parentNode.removeChild(magobj.fullimg);
    magobj.thumbimg.style.visibility = "visible";
    magobj.thumbimg['onmouseup'] = function(){MagPopup(magobj); return false;};
    
}

// Set full size image size and position
// Note: need to make dimensions into textual form and add "px": for Forefox and Safari
// Debug line: alert(magobj.currstep + ":" + magobj.currwidth + "+" + magobj.currheight + "+" + magobj.currleft + "+" + magobj.currtop);
function ImageSet(magobj) {
    magobj.fullimg.style.width = magobj.currwidth + "px";
    magobj.fullimg.style.height = magobj.currheight + "px";
    magobj.fullimg.style.left = magobj.currleft + "px";
    magobj.fullimg.style.top = magobj.currtop + "px";
}

// Set opacity of elem to value op
// Takes account of IE v CSS "standard"
function fadeopacity(elem, op) {
    elem.style.opacity = op; opn = 100.0 * op;
    elem.style.filter = 'alpha(opacity=' + opn + ')';
}