// Website Deprez.org Deprez.info
// Webmaster : Jean-Pierre DEPREZ
// File : popbox.js
// Purpose : Miscellaneous for images enlarging

// ****** Parameters of script popbox.js - begin ****************************************************************************************************
// Init the following variables in the head of your (x)html document or keep the default
// example of <img> tag in the (x)html document :
// <img class="popbox" id="popbox0039" alt="Deprez_SynchroDir.jpg" style="width: 300px;" src="./lightpict/0039.jpg"  onclick="EnlargeImg(this);" >

// Path for the gif image of the spinner
var spinnerPath = 'index_fichiers/spinnerbig.gif';

// Class parameter for the img tag (must be single for the document)
var popClass = 'popbox';

// Prefix for the id of the bigpict
var prefixId = 'big';

// Note that : bigpict and lightpict are not in the same directory but must have the same file name (mandatory)
// Directories lighpictPath and lightpictPath must have the same parent directory (mandatory)

// Directory lightpictPath
var lightpictPath = 'lightpict';
// Directory for bigpict
var bigpictPath = 'bigpict';
// ****** Parameters of script pobox.js - end *******************************************************************************************************

// Array of all images of the current browser document
var imgs = null;
// array of bigpict images
var bigImg = new Array();
// Variable for the spinner
var waitImg = null;
// variable with parameters of the image to pop
var pImg = null;
// variable with parameters of the image to reduce
var rImg = null;
// Enlarging or reducing action
var isMoving = false;

// Initialization by window.onload
// Notice : the load() function is define in googlemap.js and is only useful for the googlemap.js script
if (typeof window.onload == 'function')
{
    var func = window.onload;
    window.onload = function(){func();GetBigImg();load();};
}
else
{
    window.onload = function(){GetBigImg();load();};
}

// To load big images
function GetBigImg()
{
    waitImg = new Image();
    waitImg.src = spinnerPath;
    if (document.body)
    {
	if (document.body.getElementsByTagName)
	    imgs = document.body.getElementsByTagName("img");
	else if (document.body.all)
	    imgs = document.body.all.tags("img");
    }
    
    if (imgs != null)
    {
	for (var i = 0; i < imgs.length; i++)
	{
            // Use of classname instead of getAttribute for ie
            if(imgs[i].className == popClass)
            {
                var imgPath = imgs[i].getAttribute('src');
                var regex = new RegExp(lightpictPath,'g');
                imgPath = imgPath.replace(regex,bigpictPath);
                var id = imgs[i].getAttribute('id');
                bigImg[id] = new Image();
                bigImg[id].src = imgPath;
            }
	}
    }
}

// Change the size of big image on resize of browser window
// Notice : the resize() function is define in googlemap.js and is only useful for the googlemap.js script

if (typeof window.onresize == 'function')
{
    var func = window.onresize;
    window.onresize = function(){func();Reset();resize();};
}
else
{
    window.onresize = function(){Reset();resize();};
}

// Change the position of spinner of browser window scrolling
if (typeof window.onscroll == 'function')
{
    var func = window.onscroll;
    window.onscroll = function(){func();ResetSpinner();};
}
else
{
    window.onscroll = function(){ResetSpinner();};
}

// Reset position of big image or spinner image after the browser resizing or scrolling
function Reset()
{
    if(rImg != null)
    {
        var posBig = new posBigPict(rImg.src, rImg.maxwidth);
        var posLight = new GetPosImg(rImg.objLight);
        rImg.style.width = posBig.width + "px";
        rImg.style.height = posBig.height + "px";
        rImg.style.top = posBig.top + "px";
        rImg.style.left = posBig.left + "px";
        rImg.origWidth = posLight.width;
        rImg.origHeight = posLight.height;
        rImg.origTop = posLight.top;
        rImg.origLeft = posLight.left;
        rImg.finalWidth = posBig.width;
        rImg.finalHeigth = posBig.height;
        rImg.finalTop = posBig.top;
        rImg.finalLeft = posBig.left;
        rImg.step = 15;
        rImg.index = 1;
        rImg.stepWidth = (rImg.finalWidth - rImg.origWidth) / rImg.step ;
        rImg.stepHeight = (rImg.finalHeight - rImg.origHeight) / rImg.step ;
        rImg.stepTop = (rImg.finalTop - rImg.origTop)  / rImg.step;
        rImg.stepLeft = (rImg.finalLeft - rImg.origLeft)  / rImg.step;
        
    }
    ResetSpinner();
}

// Reset the spinner position
function ResetSpinner()
{
    if(document.getElementById("spinner"))
    {
        var elem = document.getElementById("spinner");
        var pos = new GetPosWaitImg(waitImg.objLight);
        elem.setAttribute('style','width: '+ '40' + 'px; position:absolute; top: '+ pos.top +'px; left: '+ pos.left +'px; z-index: 10; visibility: visible;');
        elem.style.visibility ='visible'
        elem.style.position = "absolute";
        elem.style.width = "40px";
        elem.style.height = "40px";
        elem.style.top = pos.top + "px";
        elem.style.left = pos.left + "px";
    }
}

function deleteSpinner()
{
    if(document.getElementById("spinner"))
    {
        var elemSpinner = document.getElementById("spinner");
        var node = elemSpinner.parentNode;
        node.removeChild(elemSpinner);
    }
}

// Show the spinner
function wait(objLight)
{   
    if(document.getElementById("spinner"))
    {
        var elemSpinner = document.getElementById("spinner");
        var node = elemSpinner.parentNode;
        node.removeChild(elemSpinner);
    }
    waitImg.objLight = objLight;
    var pos = new GetPosWaitImg(objLight);
    var elem = document.createElement("img");
    elem.setAttribute("id","spinner");
    elem.setAttribute("src",waitImg.src);
    elem.style.visibility ='visible'
    elem.style.position = "absolute";
    elem.style.width = "40px";
    elem.style.height = "40px";
    elem.style.top = pos.top + "px";
    elem.style.left = pos.left + "px";
    var whereToAdd = document.getElementsByTagName("body");
    whereToAdd[0].appendChild(elem);
}

// Enlarge the lithtpict to bigpict
function EnlargeImg(objLight, maxWidth)
{
    if(isMoving == true) return;
    isMoving = true;
    // reduce the last popped image if any
    if(rImg != null)
    {
        Reduce(rImg);
    }
    
    // Find the id of the lightpict
    var id = objLight.getAttribute('id');
    
    // Image loading not complete
    if(bigImg[id] == null)
    {
	isMoving = false;
        return;
    }
    if(!bigImg[id].complete)
    {
        wait(objLight);
        var str = "var again = deleteSpinner(); ";
        bigImg[id].onload = new Function("", str);
	isMoving = false;
        return;
    }
    else
    {
        deleteSpinner();
    }
    
    // Create the dom element for the bigpict
    var objBig = document.createElement("img");
    pImg = objBig;
    // Create the id of the bigpict : prefixId + "id of lightpic"
    objBig.setAttribute("id",prefixId + id);
    objBig.setAttribute("src",bigImg[id].src);
    // Syntaxe for IE insted of setAttribute
    objBig.onclick = Reduce;
    // add the bigpict to the document body
    var whereToAdd = document.getElementsByTagName("body");
    whereToAdd[0].appendChild(objBig);
    objBig.style.visibility ='hidden';
    objBig.style.position = "absolute";
        
    // Position of big and light image
    var posBig = new posBigPict(bigImg[id].src, maxWidth);
    var posLight = new GetPosImg(objLight);
    
    // Set the pImg variable
    pImg.src = bigImg[id].src;
    pImg.objLight = objLight;
    pImg.idLight = id;
    pImg.idBig = prefixId + id;
    pImg.alt = objLight.getAttribute('alt');
    pImg.maxwidth = maxWidth;
    pImg.origWidth = posLight.width;
    pImg.origHeight = posLight.height;
    pImg.origTop = posLight.top;
    pImg.origLeft = posLight.left;
    pImg.finalWidth = posBig.width;
    pImg.finalHeight = posBig.height;
    pImg.finalTop = posBig.top;
    pImg.finalLeft = posBig.left;
    pImg.step = 22; // 15
    pImg.index = 1;
    pImg.stepWidth = (pImg.finalWidth - pImg.origWidth) / pImg.step ;
    pImg.stepHeight = (pImg.finalHeight - pImg.origHeight) / pImg.step ;
    pImg.stepTop = (pImg.finalTop - pImg.origTop)  / pImg.step;
    pImg.stepLeft = (pImg.finalLeft - pImg.origLeft)  / pImg.step;
    
    // Hide the he lightpict
    objLight.style.visibility='hidden';
    Enlarge();
    isMoving = false;
}

// Pop the bigpict
function Enlarge()
{
    isMoving = true;
    var width, height, top, left;
    pImg.style.visibility ='visible';
    if(pImg.index <= pImg.step )
    {
        setTimeout("Enlarge()",6); //10
        width = pImg.origWidth + pImg.index * pImg.stepWidth;
        height = pImg.origHeight + pImg.index * pImg.stepHeight;
        top = pImg.origTop + pImg.index * pImg.stepTop;
        left = pImg.origLeft + pImg.index * pImg.stepLeft;
        pImg.style.width = width + "px";
        pImg.style.height = height + "px";
        pImg.style.top = top + "px";
        pImg.style.left = left + "px";
        pImg.index++;
    }
    else
    {
        // Set the rImg variable
        rImg = CopyImg(pImg);
        pImg = null;
	isMoving = false;
    }
}

// Reduce the bigpict
function Reduce()
{
    var width, height, top, left;
    if(rImg.index <= rImg.step )
    {
        setTimeout("Reduce()",6);
        width = rImg.finalWidth - rImg.index * rImg.stepWidth;
        height = rImg.finalHeight - rImg.index * rImg.stepHeight;
        top = rImg.finalTop - rImg.index * rImg.stepTop;
        left = rImg.finalLeft - rImg.index * rImg.stepLeft;
        rImg.style.width = width + "px";
        rImg.style.height = height + "px";
        rImg.style.top = top + "px";
        rImg.style.left = left + "px";
        rImg.index++;
    }
    else
    {
        rImg.objLight.style.visibility='visible';
        // Delete the bigpict
        rImg.style.visibility='hidden';
        var node = document.getElementById(rImg.idBig).parentNode;
        node.removeChild(rImg);
        rImg = null;
    }
}

// Find the good method for the browser user
function filterMtd(winMtd, docMtd, bodyMtd)
{
	var result = winMtd ? winMtd : 0;
	if (docMtd && (!result || (result > docMtd)))
        {
	    result = docMtd;
        }
	return bodyMtd && (!result || (result > bodyMtd)) ? bodyMtd : result;
}


// Find the dimension of the browser window
// See http://www.softcomplex.com/docs/get_window_size_and_scrollbar_position.html
function browserWin()
{
    this.browserWidth = filterMtd   (window.innerWidth ? window.innerWidth : 0,
                                    document.documentElement ? document.documentElement.clientWidth : 0,
                                    document.body ? document.body.clientWidth : 0);

    this.browserHeight = filterMtd  (window.innerHeight ? window.innerHeight : 0,
                                    document.documentElement ? document.documentElement.clientHeight : 0,
                                    document.body ? document.body.clientHeight : 0);

    this.scrollLeft =   filterMtd  (window.pageXOffset ? window.pageXOffset : 0,
                                    document.documentElement ? document.documentElement.scrollLeft : 0,
                                    document.body ? document.body.scrollLeft : 0);

    this.scrollTop =    filterMtd  (window.pageYOffset ? window.pageYOffset : 0,
                                    document.documentElement ? document.documentElement.scrollTop : 0,
                                    document.body ? document.body.scrollTop : 0);
}

// Calcul the position of a bigpict
function posBigPict(imgPath, maxWidth)
{
    this.left = 0;
    this.top = 0;
    
    var brw = new browserWin();
        
    var img = new Image();
    img.src = imgPath;
    this.width = img.width;
    this.height = img.height;
       
    if( this.width >= brw.browserWidth )
    {  
        this.width = brw.browserWidth - 15;
        this.height = img.height/img.width*this.width;
    }
    if(this.width > maxWidth)
    {
            this.width = maxWidth;
            this.height = img.height/img.width*this.width;
    }
    this.left = brw.browserWidth/2 + brw.scrollLeft - this.width/2;
    this.top = brw.browserHeight/2 + brw.scrollTop- this.height/2;
    
}

// Calcul the position of spinner
function GetPosWaitImg(objLight)
{
    this.width = objLight.width;
    this.height = objLight.height;
    this.left = objLight.offsetLeft;
    this.top = objLight.offsetTop;

    //Set objLight to its offsetParent
    objLight = objLight.offsetParent;

    while(objLight != null)
    {
        this.left = parseInt(this.left) + parseInt(objLight.offsetLeft);
        this.top = parseInt(this.top) + parseInt(objLight.offsetTop);
        objLight = objLight.offsetParent;
    }
    
    // Center of the wait img
    this.left += - 20 + this.width / 2;
    this.top += - 20 + this.height / 2;
}

// Get the position of an dom objet
function GetPosImg(obj)
{
    this.width = obj.width;
    this.height = obj.height;
    this.left = obj.offsetLeft;
    this.top = obj.offsetTop;

    // Set obj to its offsetParent
    obj = obj.offsetParent;

    while(obj != null)
    {
        this.left = parseInt(this.left) + parseInt(obj.offsetLeft);
        this.top = parseInt(this.top) + parseInt(obj.offsetTop);
        obj = obj.offsetParent;
    }
}

// Copy an pImg var to an rImg var
function CopyImg(pImg)
{
    var rImg = pImg;
    rImg.index = 1;
    return rImg;
}