//this module is used in two cases:
//1. when a small image in the gallery display is clicked
//   a large image is then displayed with a cinema effect (dark background and slow fade in)
//2. when a large image is already displayed and the user asks for the next large image
//   (using the little red arrows in the large image display) the display remains and
//   only the image is changed
//---------------------------------------------------------------------------------------------------
//I am using two global variables which are declared on the containing page - one for the large image
//and one for the table containing it. they are sometimes needed to get attributes from the dom
//---------------------------------------------------------------------------------------------------
//this is the main function that is the manager of the whole module. it is triggerd by an onclick
//event on a small image or on the little red arrows (prev,next) in the large image display
//
//1. the background is darkened if there is no large image currently displayed. otherwise not
//2. the percent of page height available for the large image to occupy is computed based
//   on the browser window size and zoom and the large image attributes are set
//3. the attributes of the white table surrounding the image, the image and the text it contains are set
//4. the opacity of the above is slowly enlarged for a gradual display. unfortunately testing
//   has shown that the browsers fail if a for loop is used
 
function showLargeImage()
{
    var theLargeImage;
    var largeImagesTableId;
    var largeImagesTableObj;
    var largeImagePercentile;

    var OpacityValue = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
    var millisecs = [300, 400, 450, 500, 550, 600, 650, 700, 750, 800];

    //1
    darkenIfNeeded();
    
    //2
    largeImagePercentile = calcLargeImagePercentile();
    setWhiteTableHeights(largeImagePercentile);

    //3
    setLargeImageInline();
    setAttrLargeImageTable(largeImagePercentile);
    
    //4
    setTimeout(function() { OpacLargeImage(OpacityValue[0]) }, millisecs[0]);
    setTimeout(function() { OpacLargeImage(OpacityValue[1]) }, millisecs[1]);
    setTimeout(function() { OpacLargeImage(OpacityValue[2]) }, millisecs[2]);
    setTimeout(function() { OpacLargeImage(OpacityValue[3]) }, millisecs[3]);
    setTimeout(function() { OpacLargeImage(OpacityValue[4]) }, millisecs[4]);
    setTimeout(function() { OpacLargeImage(OpacityValue[5]) }, millisecs[5]);
    setTimeout(function() { OpacLargeImage(OpacityValue[6]) }, millisecs[6]);
    setTimeout(function() { OpacLargeImage(OpacityValue[7]) }, millisecs[7]);
    setTimeout(function() { OpacLargeImage(OpacityValue[8]) }, millisecs[8]);
    setTimeout(function() { OpacLargeImage(OpacityValue[9]) }, millisecs[9]);
}

//------------------------ Percentile Calculation ---------------------------------//

//calculate the percent of page height that the image can occupy
//this calculation allows to have the largest image possible for different 
//window sizes and different resolutions. 
//for each page height given below in pixels the percentile differs
//all constants were derived empirically for IE FF Chrome, and unfortunately 
//a simple function is not easily created from them, so we have a long if-else

function calcLargeImagePercentile()
{
    var percentile;
    var pageH = pageHeight();

    if      (pageH < 300) { percentile = setPercentile(5000); }
    else if (pageH < 450) { percentile = setPercentile(20000); }
    else if (pageH < 700) { percentile = setPercentile(7000); }
    else if (pageH < 1000){ percentile = setPercentile(10000); }
    else if (pageH < 1300){ percentile = setPercentile(15000); }
    else if (pageH < 2000){ percentile = setPercentile(20000); }
    else if (pageH < 3000){ percentile = setPercentile(40000); }
    else                  { percentile = setPercentile(80000); }
    return percentile;
}

//the percent of page height is calculated based on empirical values
//which are different in IE and in FF/chrome

function setPercentile(factor)
{
    // FF and chrome:
    var base = 0.8; 
    
    //IE:
    if (typeof document.body.style.filter != 'undefined')
    {
        base += 0.03;
    }
    return (base + ((pageHeight() - 400) / factor));
}

//------------------------------- Height Calculation ---------------------------------//

//set the height of all elements in the white table so that it occupies the whole
//window height and the image is the largest possible

//1. get the objects from the dom using regular expressions
//2. compute the height and size of each element based on an 
//   empirical number. e.g. 0.02 is 2% etc.

function setWhiteTableHeights(largeImagePercentile)
{
    var reLargeImage = new RegExp("theLargeImage");
    var reTitle = new RegExp("theLargeTitle");
    var reclose = new RegExp("closeLink");
    var rePrev = new RegExp("prev");
    var reNext = new RegExp("next");
    var reRow0 = new RegExp("iRow0");
    var rerow2 = new RegExp("iRow2");
    var rerow5 = new RegExp("iRow5");

    //1
    var theLargeImage = getSingleDomObj("img", reLargeImage);
    var theLargeTitle = getSingleDomObj("span", reTitle);
    var close = getSingleDomObj("a", reclose);
    var prev = getSingleDomObj("input", rePrev);
    var next = getSingleDomObj("input", reNext);
    var row0 = getSingleDomObj("tr", reRow0);
    var row2 = getSingleDomObj("tr", rerow2);
    var row5 = getSingleDomObj("tr", rerow5);

    //2
    theLargeImage.style.height = setHeight(largeImagePercentile);
    theLargeTitle.style.fontSize = setHeight(0.02);
    
    row0.style.height = setHeight(0.003);
    row0.style.fontSize = setHeight(0.003);

    if (row2 != null)
    {
        row2.style.height = setHeight(0.003);
        row2.style.fontSize = setHeight(0.003);
    }
    if (row5 != null)
    {
        row5.style.height = setHeight(0.02);
        row5.style.fontSize = setHeight(0.015);
    }
    close.style.fontSize = setHeight(0.02);
    prev.style.height = setHeight(0.015);
    next.style.height = setHeight(0.015);
}

function setHeight(percentile)
{
    return ((Math.floor(pageHeight() * percentile)) + "px");
}

//--------------------- Set Attributes of Image & Title & White Table ----------------------//

//make the image visible by changing the display property to inline
function setLargeImageInline()
{
    var reLargeImage = new RegExp("theLargeImage");
    theLargeImage = getSingleDomObj("img", reLargeImage);
    
    theLargeImage.style.display = "inline";
    theLargeImage.style.cursor = "pointer";
}

//make the title visible by changing the display property to inline. not in use
function setTitleInline()
{
    var reTitle = new RegExp("theLargeTitle");
    var largeTitle = getSingleDomObj("span", reTitle);
    largeTitle.style.display = "inline";
}

//prepare attributes of white table which contains the image and the title
//1. set the location of the table in the page
//2. set the table to invisible (opacity = 0)

function setAttrLargeImageTable(largeImagePercentile)
{
    var reLargeImagesTable = new RegExp("largeImagesTable");
    largeImagesTableObj = getSingleDomObj("table", reLargeImagesTable);

    //1
    largeImagesTableObj.style.position = "absolute";
    largeImagesTableObj.style.top = "1%";
    largeImagesTableObj.style.left = calcOffsetLeft(largeImagePercentile) + "px";

    //2
    largeImagesTableObj.style.opacity = "0.0";
    largeImagesTableObj.style.filter = "alpha(opacity=0)";
    
    largeImagesTableObj.style.zIndex = 100;
    largeImagesTableObj.style.textAlign = "center";
    largeImagesTableObj.style.backgroundColor = "#ffffff";
    largeImagesTableObj.style.visibility = "visible";
    largeImagesTableObj.style.display = "inline";
}

//calculte the offset of the table from the left of the window
//so that the image is horizontally centered on the page

function calcOffsetLeft(largeImagePercentile)
{
    var factoredWidth, offsetLeft;
    factoredWidth = calcImageWidth(largeImagePercentile);
    offsetLeft = ((pageWidth() - factoredWidth - 20) / 2 - 15);
    return offsetLeft;
}

//calculate the image width based on the height that was calculated for
//if so that the offset-left of the image can be determined accurately
//I am using a simple triangular ratio on the original height and width of the image

function calcImageWidth(largeImagePercentile)
{
    return Math.floor(theLargeImage.width * ((pageHeight() * largeImagePercentile) / theLargeImage.height));
}

//hide everything and return to the gallery display
//1. get the objects from the dom using regular expressions
//2. change display and visibility attributes of the elements
//3. delete the dark div from the current dom

function hideLargeImagesTable()
{
    var darkDiv = document.getElementById("darkDiv");

    var reImage = new RegExp("theLargeImage");
    var reTable = new RegExp("largeImagesTable");
    var reTitle = new RegExp("theLargeTitle");

    //1
    theLargeImage = getSingleDomObj("img", reImage);
    largeImagesTable = getSingleDomObj("table", reTable);
    var theLargeTitle = getSingleDomObj("span", reTitle);

    //2
    theLargeImage.style.display = "none";
    theLargeTitle.style.display = "none";
    largeImagesTable.style.visibility = "hidden";

    document.body.removeChild(darkDiv);
}

//this function is used in the function OpacLargeImage() in jUtilities.js

function getWhiteTable()
{
    var i, j;
    var tables = document.getElementsByTagName("table");
    var regexpTables = /largeImagesTable/;

    for (i = 0; i < tables.length; i++)
    {
        if (regexpTables.test(tables[i].getAttribute("ID")))
        {
            largeImagesTableObj = tables[i];
        }
    }
}

//---------------------------- Darken The Background ------------------------------------//

function darkenIfNeeded()
{
    darkDivObj = document.getElementById("darkDiv");
    if (darkDivObj == null)
    {
        darken();
    }
}

// darken the page to create cinema effect

function darken()
{
    var darkDivObj;
    var opacityValue = [10, 20, 30, 40, 50, 60, 80];
    var millisecs = [50, 100, 150, 200, 250, 300, 350];

    darkDivObj = createDarkDiv();
    
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[0]) }, millisecs[0]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[1]) }, millisecs[1]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[2]) }, millisecs[2]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[3]) }, millisecs[3]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[4]) }, millisecs[4]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[5]) }, millisecs[5]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[6]) }, millisecs[6]);
    setTimeout(function() { OpacAnyObj(darkDivObj, opacityValue[7]) }, millisecs[7]);
}

//create the dark div element which will occupy the whole window and
//which will be the background of the image display
//1. function pointers are added to the onclick and ondblclick events so
//   that if a user clicks the dark div the whole display is hidden

function createDarkDiv()
{
    var darkDiv = document.createElement('div');
    darkDiv.id = "darkDiv";

    darkDiv.style.opacity = "0.0";
    darkDiv.style.filter = "alpha(opacity=0)";
    darkDiv.style.zIndex = 90;
    darkDiv.style.position = "absolute";
    darkDiv.style.top = "0";
    darkDiv.style.left = "0";
    darkDiv.style.width = "200%";
    darkDiv.style.height = "200%";
    darkDiv.style.backgroundColor = "#000000";
    darkDiv.style.cursor = "pointer";
    
    //1
    darkDiv.onclick = function() { hideLargeImagesTable() };
    darkDiv.ondblclick = function() { hideLargeImagesTable() };

    document.body.appendChild(darkDiv);
    return darkDiv;
}