/**
 *
 * BoxLite v1.0
 * A lighter lightbox script
 *
 * Script Name: boxlite.js
 * Script Author: Nick Sagona, III
 * Script Version: 1.0
 *
 * Moc 10 Media
 * A Division of The Working Man Group, L.L.C.
 * http://www.moc10media.com/
 *
 */

// Function to initialize the lightbox.
function initLightBox() {

    // Begin creating all of the lightbox elements.
    var pageBody = document.getElementsByTagName("body").item(0);

    // Create main lightbox background div and set attributes.
    var lightBox = document.createElement("div");
    lightBox.setAttribute("id", "lightBox");
    lightBox.style.top = "0";
    lightBox.style.left = "0";
    lightBox.style.width = "100%";

    // Set the height of the lightbox and insert it into the page.
    setLightBoxHeight(lightBox);
    pageBody.insertBefore(lightBox, pageBody.lastChild);

    // Create main lightbox image placeholder div, set attributes and insert into the page.
    var lightBoxImagePlace = document.createElement("div");
    lightBoxImagePlace.setAttribute("id", "lightBoxImagePlace");
    pageBody.insertBefore(lightBoxImagePlace, pageBody.lastChild);

    // Create close link for image, set attributes and append to the lightbox image placeholder div element.
    var closeAnchor = document.createElement("a");
    closeAnchor.setAttribute("id", "closeAnchor");
    closeAnchor.setAttribute("href", "#");
    closeAnchor.onclick = function () {
        closeLightBox();
        return false;
    }
    closeAnchor.setAttribute("title", "Click to Close");
    lightBoxImagePlace.appendChild(closeAnchor);

    // Create main lightbox image, set attributes and append to the close link element.
    var lightBoxImage = document.createElement("img");
    lightBoxImage.setAttribute("id", "lightBoxImage");
    lightBoxImage.setAttribute("alt", "Click to Close");
    closeAnchor.appendChild(lightBoxImage);

    // Create caption holder, set attributes and append to the lightbox image placeholder div element.
    var captionHolder = document.createElement("div");
    captionHolder.setAttribute("id", "captionHolder");    
    lightBoxImagePlace.appendChild(captionHolder);

    // Create close link, set attributes and text, and append to the caption holder div element.
    var closeCaptionAnchor = document.createElement("a");
    closeCaptionAnchor.setAttribute("id", "closeCaptionAnchor");
    closeCaptionAnchor.setAttribute("href", "#");
    closeCaptionAnchor.onclick = function () {
        closeLightBox();
        return false;
    }

    captionHolder.appendChild(closeCaptionAnchor);

    // Create caption div, set attributes and text, and append to the caption holder div element.
    var captionDiv = document.createElement("div");
    captionDiv.setAttribute("id", "captionDiv");

    // Add loading text to caption div element.
    if (navigator.appName.indexOf("Microsoft") != -1) {
        captionDiv.innerHTML = "Loading...";
    } else {
        captionDiv.textContent = "Loading...";
    }

    captionHolder.appendChild(captionDiv);

    // Hide the primary lightbox div elements.
    lightBox.style.display = "none";
    lightBoxImagePlace.style.display = "none";

    // Grab all the anchor tags with the "rel" attribute and assign the onclick function.
    var ahrefs = document.getElementsByTagName("a");

    for (var i = 0; i < ahrefs.length; i++){
        var ahref = ahrefs[i];

        if (ahref.getAttribute("href") && (ahref.getAttribute("rel") == "lightbox")){
            ahref.imgTitle = (ahref.getAttribute("title")) ? ahref.title : 'Image';
            ahref.onclick = function () {
                openLightBox(this.href, this.imgTitle);
                return false;
            }
        }
    }

}

// Function to open the lightbox.
function openLightBox(img, cap) {

    // Grab the necessary div elements.
    var lightBox = document.getElementById("lightBox");
    var lightBoxImagePlace = document.getElementById("lightBoxImagePlace");
    var lightBoxImage = document.getElementById("lightBoxImage");
    var captionHolder = document.getElementById("captionHolder");
    var captionDiv = document.getElementById("captionDiv");

    // Get the window width and height.
    var winWH = getWindowWH();

    // Set the height of the lightbox.
    setLightBoxHeight(lightBox);

    // Set new image and its onload function.
    var newImg = new Image();

    newImg.onload = function() {

        imgWidth = newImg.width;
        imgHeight = newImg.height;

        // Calculate the top and left positions of the image.
        if (navigator.appName.indexOf("Microsoft") != -1) {
            if ((imgHeight + 60) > document.documentElement.offsetHeight) {
                topMargin = 0;
                lightBox.style.height = ((imgHeight + 60) < document.body.offsetHeight) ? ((document.body.offsetHeight + 60) + "px") : ((imgHeight + 60) + "px");
            } else {
                topMargin = ((winWH[1] - imgHeight) / 2) - 40;
            }
        } else {
            if ((imgHeight + 60) > window.innerHeight) {
                topMargin = 0;
                lightBox.style.height = ((imgHeight + 60) < document.body.clientHeight) ? ((document.body.clientHeight + 60) + "px") : (lightBox.style.height = (imgHeight + 60) + "px");
            } else {
                topMargin = ((winWH[1] - imgHeight) / 2) - 40;
            }
        }

        sideMargin = (winWH[0] - imgWidth) / 2;

        // Compensate for scrolling.
        scrollOffset = ((navigator.platform.indexOf("Mac") != -1) && (navigator.userAgent.indexOf("Safari") != -1)) ? window.pageYOffset : document.documentElement.scrollTop;

        // Set attributes and styles.
        lightBoxImage.src = img;
        lightBoxImage.width = imgWidth;
        lightBoxImage.height = imgHeight;
        lightBoxImagePlace.style.top = topMargin + scrollOffset + "px";
        lightBoxImagePlace.style.left = (sideMargin - 12) + "px";

        // Set caption styles.
        captionHolder.style.width = imgWidth + "px";
        captionDiv.style.width = (imgWidth - 80) + "px";

        // Add caption text to the caption div element.
        if (navigator.appName.indexOf("Microsoft") != -1) {
            captionDiv.innerHTML = cap;
        } else {
            captionDiv.textContent = cap;
        }

        // Show the lightbox div elements.
        lightBox.style.display = "block";
        lightBoxImagePlace.style.display = "block";

    }

    // Set new image source, trigger the onload function when load is complete.
    newImg.src = img;

    return true;

}

// Function to close the lightbox.
function closeLightBox() {

    // Grab the necessary div elements.
    var lightBox = document.getElementById("lightBox");
    var lightBoxImagePlace = document.getElementById("lightBoxImagePlace");
    var lightBoxImage = document.getElementById("lightBoxImage");
    var captionHolder = document.getElementById("captionHolder");
    var captionDiv = document.getElementById("captionDiv");

    // Reset the caption.
    captionHolder.style.width = "200px";
    captionDiv.style.width = "120px";

    // Set the caption back to loading.
    if (navigator.appName.indexOf("Microsoft") != -1) {
        captionDiv.innerHTML = "Loading...";
    } else {
        captionDiv.textContent = "Loading...";
    }

    // Reset the lightbox.
    lightBoxImage.src = null;
    lightBoxImage.width = 0;
    lightBoxImage.height = 0;
    lightBox.style.display = "none";
    lightBoxImagePlace.style.display = "none";   

}

// Function to resize the lightbox.
function resizeLightBox() {

    // Grab the necessary div elements.
    var lightBox = document.getElementById("lightBox");
    var lightBoxImagePlace = document.getElementById("lightBoxImagePlace");
    var lightBoxImage = document.getElementById("lightBoxImage");

    // If the lightbox is currently displayed, resize the elements accordingly.
    if (lightBox.style.display == "block") {

        // Get the window width and height.
        var winWH = getWindowWH();

        // Set the height of the lightbox.
        setLightBoxHeight(lightBox);

        // Calculate the top and left positions of the image.
        topMargin = ((winWH[1] - lightBoxImage.height) / 2) - 40;
        sideMargin = (winWH[0] - lightBoxImage.width) / 2;

        // Set attributes and styles.
        lightBoxImagePlace.style.top = topMargin + "px";
        lightBoxImagePlace.style.left = (sideMargin - 12) + "px";

    }

}

// Function to set the height of the lightbox.
function setLightBoxHeight(lb) {

    if (navigator.appName.indexOf("Microsoft") != -1) {
        lb.style.height = (document.body.offsetHeight > document.documentElement.offsetHeight) ? ((document.body.offsetHeight + 30) + "px") : "100%";
    } else {
        lb.style.height = (document.body.clientHeight > window.innerHeight) ? ((document.body.clientHeight + 30) + "px") : "100%";
    }

}

// Function to get the width and height of the window.
function getWindowWH() {

    var win = new Array();

    // Browser detect, determine width and height, and compensate for the scroll bar if there is one
    if (navigator.appName.indexOf("Microsoft") != -1) {
        winWidth = (document.body.offsetWidth != document.body.clientWidth) ? (document.body.offsetWidth - 16) : document.body.offsetWidth;
        winHeight = document.documentElement.offsetHeight;
    } else {
        winWidth = (window.innerWidth != document.body.clientWidth) ? (window.innerWidth - 16) : window.innerWidth;
        winHeight = window.innerHeight;
    }

    win[0] = winWidth;
    win[1] = winHeight;

    return win;

}

// Window resize event listener.
if (navigator.appName.indexOf("Microsoft") != -1) {
    window.attachEvent("onresize", resizeLightBox);
} else {
    window.addEventListener("resize", resizeLightBox, true);
}

// Add the initLightBox function to the window element's onload.
window.onload = initLightBox;