/*----------------------------------------------------------
      _        _       _              _      _
 _ __| |_  ___| |_ ___| |__  ___  ___| |__  (_)___
| '_ \ ' \/ _ \  _/ _ \ '_ \/ _ \/ _ \ / /_ | (_-<
| .__/_||_\___/\__\___/_.__/\___/\___/_\_(_)/ /__/
|_|                                       |__/
------------------------------------------------------------
File      : photobook.js
Author    : Richard Lewis
Project   : /mnt/web/localhost/htdocs/roi/js/
Syntax    : javascript
Date      : Thu 19 Jul 2007
Copyright : Richard Lewis 2007
------------------------------------------------------------
ROI Photobook
----------------------------------------------------------*/

function photobook() {
    // setup photobook

    // Set globals
    G.holderID = "";
    G.sure;
    G.photoGate;
    G.old = false;

    // Photos
    G.photos = new Array(16);

    G.photos[0]  = "Sister Anupama Joseph, Mother Superior - Bodhgaya";
    G.photos[1]  = "Attentive students - Uganda";
    G.photos[2]  = "Victoria Memorial Hall - Kolkata";
    G.photos[3]  = "Bob with Nuns at Bodhgaya";
    G.photos[4]  = "Community washing facilities in Bodhgaya";
    G.photos[5]  = "Tibetan Temple in Bodhgaya";
    G.photos[6]  = "Mari with group at makondo with Rosemary Mohan.";
    G.photos[7]  = "John, Marilyn and Maggi taking afternoon cha";
    G.photos[8]  = "Great Buddha Statue in Bodhgaya";
    G.photos[9]  = "John teaching Nuns at convent in Bodhgaya";
    G.photos[10] = "Alison with friends in Tororo";
    G.photos[11] = "Happy smiles";
    G.photos[12] = "Trainers and students at TASO Mbale";
    G.photos[13] = "Mari and Rosemary with students at Makondo";
    G.photos[14] = "Never too young to learn!";
    G.photos[15] = "Statue of Goddess Durga - Bodhgaya";

    // Layout photobook thumbnails
    for (var k = 0; k < G.photos.length; ++k) {
        createHolder(k);
    }
}
//----------------------------------------------------------

function createHolder(id) {
    // Return an image holder

    var holder = createEle('div');
    holder.id  = "holder" + id;

    holder.style.cssFloat        = "left";
    holder.style.styleFloat      = "left";
    holder.style.width           = "130px";
    holder.style.height          = "130px";
    holder.style.margin          = "0px 16px 16px 0px";
    holder.style.border          = "1px solid #000000";
    holder.style.textAlign       = "center";
    holder.style.cursor          = "pointer";
    //holder.style.backgroundColor = "#e0dcff";
    holder.style.backgroundColor = "#000000";
    holder.title = "Enlarge Image";
    holder.alt   = "Enlarge Image";

    holder.onmouseover =
        function(evt) { overHolder(this, evt); };

    holder.onmouseout =
        function(evt) { outHolder(this, evt); };

    holder.onclick =
        function(evt) { clickHolder(this, evt); };

    // add holder to book
    var book = getEle('book');
    book.appendChild(holder);

    // add thumbnail image to holder
    var img = new Image();
    img.id  = "thumb" + id;

    holder.appendChild(img);

    img.onload =
        function(evt) { tnloaded(this, evt); };
    img.src = "photo/tnphoto" + id + ".jpg"

    img.style.border = "1px solid #000000";
}
//----------------------------------------------------------

function overHolder(ele, evt) {
    // Over an image holder

    if (G.photoGate) return;

    G.holderID = ele.id.substr(6);

    G.sure = setTimeout(imgGrow, 1000);
}

function outHolder(ele, evt) {
    // Mouse out of image holder

    clearTimeout(G.sure);
    if (G.photoGate) return;
    G.holderID = "";
}

function clickHolder(ele, evt) {
    // Image holder clicked

    if (G.photoGate) return;

    clearTimeout(G.sure);
    G.holderID = ele.id.substr(6);
    imgGrow();
}
//----------------------------------------------------------

function imgGrow() {
    // Setup image grow animation.

    if (G.holderID == "") return;
    G.photoGate = true;

    if (G.old) {
        // tidy up display first
        closeAnim();
    }
    G.old = true;

    G.photoLarge        = new Image();
    G.photoLarge.id     = "largePhoto";
    G.photoLargeLoaded  = false;
    G.photoLarge.onload =
        function(evt) { photoLoaded(this, evt); };

    G.photoLarge.src = "photo/photo" +
        G.holderID + ".jpg";

    var imgCurrent = getEle("thumb" + G.holderID);

    var pos  = getPos(imgCurrent);
    pos.y   += parseInt(imgCurrent.style.padding.substring(0,
        imgCurrent.style.padding.indexOf("px")));

    var size = getImgSize(imgCurrent.id);

    var animHolder = createEle('div');
    animHolder.id  = "animHolder";

    animHolder.style.position = "absolute";
    animHolder.style.left     = pos.x + "px";
    animHolder.style.top      = pos.y + "px";
    animHolder.style.width    = size.width   + "px";
    animHolder.style.height   = size.height  + "px";
    animHolder.style.border   = "1px solid #ffffff";
    animHolder.style.zIndex   = "9";

    var animImg  = new Image();
    animImg.id   = "animImg";
    animImg.src  = imgCurrent.src;
    animImg.style.width  = size.width  + "px";
    animImg.style.height = size.height + "px";

    G.ratio = size.height / size.width;

    animHolder.appendChild(animImg);
    document.body.appendChild(animHolder);

    G.border = 255;

    animImgGrow();
}

function animImgGrow() {
    // Animate an image growing.

    var winSize = getWinSize();

    var centerX = Math.floor((winSize.width - 384) / 2);

    var centerY = Math.floor((winSize.height -
        (384 * G.ratio)) / 2);

    // take into account scroll
    var scroll = getScroll();
    centerX   += scroll.x;
    centerY   += scroll.y;

    var animHolder = getEle('animHolder');

    var x = animHolder.style.left.substring(0,
        animHolder.style.left.length - 2);
    var y = animHolder.style.top.substring(0,
        animHolder.style.top.length - 2);

    x = parseInt(x);
    y = parseInt(y);

    var animImg = getEle('animImg');

    // Grow holder and image
    var grow = 7;

    var hWidth  = parseInt(animHolder.style.width);
    var hHeight = parseInt(animHolder.style.height);

    var iWidth  = parseInt(animImg.style.width);
    var iHeight = parseInt(animImg.style.height);

    if (Math.abs(384 - iWidth) <= grow) {
        iWidth = 384;
    }

    if (iWidth != 384) {
        hWidth += grow;
        iWidth += grow;

        hHeight = Math.floor(hWidth * G.ratio);
        iHeight = Math.floor(iWidth * G.ratio);

        animHolder.style.width  = hWidth  + "px";
        animHolder.style.height = hHeight + "px";
        animImg.style.width     = iWidth  + "px";
        animImg.style.height    = iHeight + "px";
    }

    // Move to central position
    var step = 7;

    if (centerX - x != 0) {
        x += ((centerX - x) /
            Math.abs(centerX - x)) * step;
    }
    if (centerY - y != 0) {
        y += ((centerY - y) /
             Math.abs(centerY - y)) * step;
    }

    if (Math.abs(centerX - x) <= step) {
        x = centerX;
    }
    if (Math.abs(centerY - y) <= step) {
        y = centerY;
    }

    animHolder.style.left  = x + "px";
    animHolder.style.top   = y + "px";

    G.border -= step;
    if (G.border < 0) G.border = 0;

    bhex = dec2hex(G.border);

    bhex = bhex + bhex + bhex;;

    animHolder.style.border = "1px solid #" + bhex;

    if (iWidth != 384 || (x != centerX || y != centerY) ) {
        setTimeout(animImgGrow, 50);
    }
    else {
        checkPhoto();
    }
}

function closeAnim() {
    // close Animation

    var oldHolder = getEle('animHolder');
    document.body.removeChild(oldHolder);
}
//----------------------------------------------------------

function photoLoaded() {
    // Photo large has been loaded

    G.photoLargeLoaded = true;
}

function checkPhoto() {
    // Check if large photo has loaded.

    if (G.photoLargeLoaded) displayPhoto();
    else setTimeout(checkPhoto, 50);
}

function displayPhoto() {
    // Display Large Photo

    var animHolder = getEle('animHolder');

    animHolder.style.width  = "";
    animHolder.style.height = "";
    animHolder.style.border = "1px solid #000000";

    animHolder.removeChild(animHolder.childNodes[0]);
    animHolder.appendChild(G.photoLarge);

    pos  = getPos(animHolder);
    size = getImgSize(G.photoLarge.id);

    // Controls
    var controls = createEle('div');
    controls.id = "controls";

    controls.style.padding         = "5px 0px 0px 0px";
    controls.style.height          = "20px";
    controls.style.width           = size.width + "px";
    controls.style.backgroundColor = "#3d3677";
    controls.style.verticalAlign   = "middle";

    controls.style.cursor = "pointer"
    controls.style.color  = "#ffffff";
    controls.title = "Click to close";
    controls.alt   = "Click to close";
    controls.onclick =
        function(evt) { closePhoto(this, evt); };

    controls.appendChild(createTxt('close'));

    // Grow animHolder and add controls div
    pos.y       -= 25;
    size.height += 25;

    animHolder.style.top    = pos.y + "px";
    animHolder.style.height = size.height + "px";

    animHolder.removeChild(animHolder.childNodes[0]);

    animHolder.appendChild(controls);

    animHolder.appendChild(G.photoLarge);

    // decription paragraph
    var description = createEle('p');
    description.id  = "description";

    var descWidth = size.width - 8;

    description.style.padding   = "4px";
    description.style.height    = "52px";
    description.style.minHeight = "52px";
    description.style.width     = descWidth + "px";
    description.style.color           = "#000000"
    description.style.backgroundColor = "#e0dcff";
    description.style.overflow        = "auto";

    var txt = "Copyright \u00a9 2007 ROI";

    G.holderID = parseInt(G.holderID);
    if (G.photos[G.holderID]) {
        txt = G.photos[G.holderID];
    }

    description.appendChild(createTxt(txt));

    size.height += 60;
    animHolder.style.height = size.height + "px";

    animHolder.appendChild(description);

    document.body.focus();

    // Release the gates
    G.photoGate = false;
    G.holderID  = "";
}

function closePhoto() {
    // Close photo
    closeAnim();
    G.old = false;
}
//----------------------------------------------------------

function tnloaded(ele, evt) {
    // Thumbnail loaded

    var size = getImgSize(ele.id);

    var padding  = parseInt((130 - size.height) / 2);
    var paddingB = padding;


    if (((130 - size.height) % 2) != 0) ++paddingB;

    ele.style.padding = padding + "px 0px " + paddingB + "px 0px";
}
//----------------------------------------------------------

// DOM helpers
function getEle(id) {
    return document.getElementById(id);
}

function createEle(tag) {
    return document.createElement(tag);
}

function createTxt(txt) {
    return document.createTextNode(txt);
}
//----------------------------------------------------------

function getWinSize() {
    // Cross Browser Get Window Size

    var size = new Object();

    size.width  = -1;
    size.height = -1;

    if (typeof(window.innerWidth) == "number") {
        // Standard Compliant
        size.width  = window.innerWidth;
        size.height = window.innerHeight;
    }
    else if (document.documentElement &&
        document.documentElement.clientWidth) {
        // IE 6+
        size.width  = document.documentElement.clientWidth;
        size.height = document.documentElement.clientHeight;
    }
    else if (document.body && document.body.clientWidth) {
        // IE 4
        size.width  = document.body.clientWidth;
        size.height = document.body.clientHeight;
    }

    return size;
}
//----------------------------------------------------------

function getImgSize(id) {
    // Get Image Size

    var img = getEle(id);

    var size = new Object();

    if (typeof(img.width) == "number") {
        size.width  = img.width;
        size.height = img.height;
    }

    return size;
}
//----------------------------------------------------------

function getPos(ele) {
    // get position of an element

    var pos = new Object;

    pos.x = 0;
    pos.y = 0;

    if (ele.offsetParent) {
        pos.x  = ele.offsetLeft;
        pos.y  = ele.offsetTop;
        while (ele = ele.offsetParent) {
            pos.x += ele.offsetLeft;
            pos.y += ele.offsetTop;
        }
    }

    return pos;
}
//----------------------------------------------------------

function getScroll() {
    // Get scroll amount

    var scroll = new Object();
    scroll.x   = 0;
    scroll.y   = 0;

    if( typeof( window.pageYOffset ) == 'number' ) {
        scroll.y = window.pageYOffset;
        scroll.x = window.pageXOffset;
    } else if( document.body &&
        ( document.body.scrollLeft ||
        document.body.scrollTop ) ) {
        scroll.y = document.body.scrollTop;
        scroll.x = document.body.scrollLeft;
    } else if( document.documentElement &&
        ( document.documentElement.scrollLeft ||
         document.documentElement.scrollTop ) ) {
        scroll.y = document.documentElement.scrollTop;
        scroll.x = document.documentElement.scrollLeft;
    }

  return scroll;
}
//----------------------------------------------------------

function dec2hex(n) {
    // decimal to hexadecimal

    var s = n.toString(16);
    if (s.length < 2) s = "0"  + s;
    return s;
}
//----------------------------------------------------------