//Copyright ABC123 IT Inc. All Rights Reserved.  www.abc123it.com
//You may make use of this script or ideas in it but please keep the copyright in your script.
//
var timer;
var widthincrease = 0;
var heightincrease = 1;
var maxwidth = 750;
var maxheight = 1000;
var availablewidth;
var availableheight;

function $(id) {
    return document.getElementById(id);
}

function ShowPopUpImage(theImageID) {
    maxwidth = 512;
    maxheight = 420;
    ShowPopupOutterWrapper();
    var fullpopupinnerdiv = ShowFullPopupInnerWrapper('popupimage');
    var popupinnerdiv = ShowPopupInnerDiv(fullpopupinnerdiv, 'popupimage');

    var popupimage = $("popupimage");
    if (popupimage == null) {
        popupimage = document.createElement('img');
        popupimage.setAttribute('id', "popupimage");
    }
    popupimage.style.display = 'none';
    var theImage = $(theImageID);
    popupimage.setAttribute('src', theImage.src);
    popupinnerdiv.appendChild(popupimage);
    if (navigator.userAgent.indexOf('MSIE 8') == -1)
        timer = setInterval(function() { ExpandDiv(popupinnerdiv, popupimage); }, 10);
    else {
        popupinnerdiv.style.width = maxwidth + 'px';
        popupinnerdiv.style.height = maxheight + 'px'
        popupinnerdiv.style.left = ((availablewidth - maxwidth) / 2).toString() + 'px';
        popupinnerdiv.style.top = ((availableheight - maxheight) / 2).toString() + 'px';
        popupimage.style.display = "block";
    }
}

function ShowPopup(innerdivid) {

    ShowPopupOutterWrapper();
    var fullpopupinnerdiv = ShowFullPopupInnerWrapper(innerdivid);
    var popupinnerdiv = ShowPopupInnerDiv(fullpopupinnerdiv, innerdivid);

    var innerdiv = $(innerdivid);
    popupinnerdiv.appendChild(innerdiv);

    timer = setInterval(function() { ExpandDiv(popupinnerdiv, innerdiv); }, 10);
}

function ShowPopupOutterWrapper() {
    availablewidth = FindClientWidth();
    availableheight = FindClientHeight();
    var popupoutterdiv = $("popupoutterwrapper");
    if (popupoutterdiv == null) {
        popupoutterdiv = document.createElement('div');
        popupoutterdiv.setAttribute('id', "popupoutterwrapper");
        popupoutterdiv.className = "popupoutterwrapper";
        document.body.appendChild(popupoutterdiv);
    }
    else {
        popupoutterdiv.style.display = "block";
    }
    var fullpage = $('thepage');
    if (fullpage != null && fullpage.offsetHeight > availableheight)
        popupoutterdiv.style.height = fullpage.offsetHeight + 'px';
    else
        popupoutterdiv.style.height = availableheight + 'px';
}

function ShowFullPopupInnerWrapper(innerdivid) {
    var fullpopupinnerdiv = $("fullpopupinnerwrapper");
    if (fullpopupinnerdiv == null) {
        fullpopupinnerdiv = document.createElement('div');
        fullpopupinnerdiv.setAttribute('id', "fullpopupinnerwrapper");
        fullpopupinnerdiv.className = "fullpopupinnerwrapper";
        document.body.appendChild(fullpopupinnerdiv);
    }
    else {
        fullpopupinnerdiv.style.display = "block";
    }
    var fullpage = $('thepage');
    if (fullpage != null) {
        fullpopupinnerdiv.style.height = fullpage.offsetHeight + 'px';
    }
    fullpopupinnerdiv.onclick = function() { HidePopup(innerdivid); }
    return fullpopupinnerdiv;
}

function ShowPopupInnerDiv(fullpopupinnerdiv, innerdivid) {
    var popupinnerdiv = $("popupinnerwrapper");
    if (popupinnerdiv == null) {
        popupinnerdiv = document.createElement('div');
        popupinnerdiv.setAttribute('id', "popupinnerwrapper");
        popupinnerdiv.className = "popupinnerwrapper";
        fullpopupinnerdiv.appendChild(popupinnerdiv);
        var popupclosediv = document.createElement('div');
        popupclosediv.setAttribute('id', "closediv");
        popupclosediv.style.height = "20px";
        popupclosediv.style.textAlign = "right";
        popupclosediv.innerHTML = "<a href='javascript:Close()' title='close' id='closebutton'>Close</a>";
        popupinnerdiv.appendChild(popupclosediv);
    }
    else {
        popupinnerdiv.style.display = "block";
    }

    InitializePopupInnerDiv(popupinnerdiv);
    return popupinnerdiv;
}

function InitializePopupInnerDiv(popupinnderdiv) {
    //availablewidth = FindClientWidth();
    //availableheight = FindClientHeight();
    if ((availablewidth - 50) < maxwidth) {
        maxwidth = (availablewidth - 50);
    }
    if ((availableheight - 50) < maxheight) {
        maxheight = (availableheight - 50);
    }
    widthincrease = (maxwidth - 20) / 50;
    if (widthincrease < 2) {
        widthincrease = 2;
    }
    heightincrease = (maxheight - 20) / 50;
    if (heightincrease < 2) {
        heightincrease = 2;
    }

    popupinnderdiv.style.width = '20px';
    popupinnderdiv.style.height = '20px'
    popupinnderdiv.style.left = ((availablewidth - maxwidth) / 2).toString() + 'px';
    popupinnderdiv.style.top = ((availableheight - 20) / 2).toString() + 'px';
    //popupinnderdiv.style.overflow = 'hidden';
}

function HidePopup(innerdivid) {
    var popupoutterdiv = $("popupoutterwrapper");
    popupoutterdiv.style.display = "none";
    var fullpopupinnerdiv = $("fullpopupinnerwrapper");
    fullpopupinnerdiv.style.display = "none";
    fullpopupinnerdiv.onclick = null;
    var popupinnerdiv = $("popupinnerwrapper");
    popupinnerdiv.style.display = "none";
    var innerdiv = $(innerdivid);
    innerdiv.style.display = "none";
}

function ExpandDiv(div, innerdiv) {
    if (widthincrease > 0) {
        var currentWidth = div.offsetWidth;
        var newWidth = currentWidth + widthincrease;
        if (newWidth >= maxwidth) {
            newWidth = maxwidth;
            widthincrease = 0;
        }
        div.style.width = newWidth.toString() + 'px';
        var left = (availablewidth - newWidth) / 2;
        div.style.left = left.toString() + 'px';
    }
    else if (heightincrease > 0) {
        var currentHeight = div.offsetHeight;
        var newHeight = currentHeight + heightincrease;
        if (newHeight >= maxheight) {
            newHeight = maxheight;
            clearInterval(timer);

            innerdiv.style.display = "block";
            //div.appendChild(innerdiv);
            //innerdiv.style.overflow = 'auto';
            //div.style.overflow = 'auto';
        }
        div.style.height = newHeight.toString() + 'px';
        var top = (availableheight - newHeight) / 2;
        div.style.top = top.toString() + 'px';
    }
}

function FindClientWidth() {
    var thewidth = screen.availWidth;
    if (window.innerWidth)
        thewidth = window.innerWidth;
    else if (document.all)
        thewidth = document.body.clientWidth;
    return thewidth;
}

function FindClientHeight() {
    var theheight = screen.availHeight;
    if (window.innerWidth)
        theheight = window.innerHeight;
    else if (document.all)
        theheight = document.body.clientHeight;
    return theheight;
}

function Close() {
    return;
}