var Motion = eightyTwoProtons.Motion;
var HOVER_EFFECT_FADE_RATE = 0.1;
var POPUP_FADE_RATE = 0.2;

// open a pop-up div showing an image, centered on the browser window
// the div opens and closes with a gestural zooming animation

function showImagePopup(imageUrl, imageHeight, imageWidth, captionText)
{
    var popupContainer = $("popupContainer");
    var imageContainer = $("imageContainer");
    var dropShadowS = $("dropShadowS");
    var dropShadowE = $("dropShadowE");
    var popupImage = $("popupImage");
    var captionDiv = $("caption");

    popupImage.src = imageUrl;
    popupImage.alt = captionText;
    popupImage.width = imageWidth;
    popupImage.height = imageHeight;
    captionDiv.innerHTML = captionText;
    
    // resize elements to fit image
    $("ruleAboveCaption").style.width = imageWidth + "px";
    captionDiv.style.width = imageWidth + "px";
    
    var cachedMetric = imageContainer.offsetHeight + "px";
    $("dropShadowSW").style.top = cachedMetric;
    $("dropShadowSE").style.top = cachedMetric;
    dropShadowS.style.top = cachedMetric;

    cachedMetric = imageContainer.offsetWidth + "px";
    $("dropShadowNE").style.left = cachedMetric;
    $("dropShadowSE").style.left = cachedMetric;
    dropShadowE.style.left = cachedMetric;
    
    dropShadowE.style.height = imageContainer.offsetHeight - dropShadowS.offsetHeight + 21 + "px";
    dropShadowS.style.width = imageContainer.offsetWidth - dropShadowE.offsetWidth + "px";
    $("closeButton").style.left = imageContainer.offsetWidth - $("imgCloseButton").offsetWidth + "px";
    
    // position popupContainer on screen
    if (window.innerWidth)
    {
        var windowWidth = window.innerWidth;
        var windowHeight = window.innerHeight;
    }
    else if (document.documentElement.clientWidth > 0)
    {
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
    }
    else
    {
        var windowWidth = document.body.clientWidth;
        var windowHeight = document.body.clientHeight;
    }
   
    var tentativeLeft = (windowWidth >> 1) - (imageContainer.offsetWidth >> 1);
    var tentativeHeight = (windowHeight >> 1) - (imageContainer.offsetHeight >> 1);
    popupContainer.style.left = ((tentativeLeft < 0) ? 0 : tentativeLeft) + "px";
    popupContainer.style.top = ((tentativeHeight < 20) ? 20 : tentativeHeight) + "px"; // 20 to allow for close button

    // show container
    // TODO: add animation
    popupContainer.style.visibility = "visible";
}

function hideImagePopup()
{
    $("popupContainer").style.visibility = "hidden";
    $("imgCloseButtonHover").style.visibility = "hidden";
}

function makePopupHidden() {
    $("popupContainer").style.visibility = "hidden";
}

function mouseOverEffect(img) {
    Motion.deleteAnimationsForElement(img);
    var temp = new Motion.Animation(img, "alpha", 1.0, HOVER_EFFECT_FADE_RATE, false);     
}

function mouseOutEffect(img) {
    var temp = new Motion.Animation(img, "alpha", 0.7, HOVER_EFFECT_FADE_RATE, false);
}