/*
	Multifaceted Lightbox
	by Greg Neustaetter - http://www.gregphoto.net
	
	INSPIRED BY (AND CODE TAKEN FROM)
	==================================
	The Lightbox Effect without Lightbox
	PJ Hyett
	http://pjhyett.com/articles/2006/02/09/the-lightbox-effect-without-lightbox
	

	Lightbox JS: Fullsize Image Overlays 
	by Lokesh Dhakar - http://www.huddletogether.com

	For more information on this script, visit:
	http://huddletogether.com/projects/lightbox/

	Licensend under:
	Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/
	(basically, do anything you want, just leave my name and link)
	
*/

var Lightbox = {
    lightboxType: null,
    lightboxCurrentContentID: null,

    showBoxString: function(content, boxWidth, boxHeight) {
        this.setLightboxDimensions(boxWidth, boxHeight);
        this.lightboxType = 'string';
        var contents = document.getElementById('boxContents');
        contents.innerHTML = content;
        this.showBox();
        return false;
    },


    showBoxByID: function(id, boxWidth, boxHeight) {
        this.lightboxType = 'id';
        this.lightboxCurrentContentID = id;
        if (id == 'Pietrasanta') {
            this.setLightboxDimensions(480, 640);
        }
        else {
            this.setLightboxDimensions(boxWidth, boxHeight);
        }
        var element = document.getElementById(id);
        var contents = document.getElementById('boxContents');
        contents.appendChild(element);
        document.getElementById(id).style.display = '';
        this.showBox();
        return false;
    },


    setLightboxDimensions: function(width, height) {
        var windowSize = this.getPageDimensions();
        var theBox = document.getElementById('lightbox');
        if (width) {
            if (width < windowSize[0]) {
                theBox.style.width = width + 'px';
            } else {
                theBox.style.width = (windowSize[0] - 50) + 'px';
            }
        }
        if (height) {
            if (height < windowSize[1]) {
                theBox.style.height = height + 'px';
            } else {
                theBox.style.height = (windowSize[1] - 50) + 'px';
            }
        }
    },


    showBox: function() {
        document.getElementById('overlay').style.display = '';
        this.center('lightbox');
        return false;
    },


    hideBox: function() {
        var contents = document.getElementById('boxContents');
        if (this.lightboxType == 'id') {
            var body = document.getElementsByTagName('body')[0];
            document.getElementById(this.lightboxCurrentContentID).style.display = 'none';
            body.appendChild(document.getElementById(this.lightboxCurrentContentID));
        }
        contents.innerHTML = '';
        document.getElementById('lightbox').style.width = null;
        document.getElementById('lightbox').style.height = null;
        document.getElementById('lightbox').style.display = 'none';
        document.getElementById('overlay').style.display = 'none';
        return false;
    },

    getDimensions: function(element) {
        if (typeof element == 'string')
            element = document.getElementById(element);
        if (element.style.display != 'none')
            return { width: element.offsetWidth, height: element.offsetHeight };

        // All *Width and *Height properties give 0 on elements with display none,
        // so enable the element temporarily
        var els = element.style;
        var originalVisibility = els.visibility;
        var originalPosition = els.position;
        els.visibility = 'hidden';
        els.position = 'absolute';
        els.display = '';
        var originalWidth = element.clientWidth;
        var originalHeight = element.clientHeight;
        els.display = 'none';
        els.position = originalPosition;
        els.visibility = originalVisibility;
        return { width: originalWidth, height: originalHeight };
    },


    // taken from lightbox js, modified argument return order
    getPageDimensions: function() {
        var xScroll, yScroll, pageHeight, pageWidth, arrayPageSize;

        if (window.innerHeight && window.scrollMaxY) {
            xScroll = document.body.scrollWidth;
            yScroll = window.innerHeight + window.scrollMaxY;
        } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
            xScroll = document.body.scrollWidth;
            yScroll = document.body.scrollHeight;
        } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
            xScroll = document.body.offsetWidth;
            yScroll = document.body.offsetHeight;
        }

        var windowWidth, windowHeight;
        if (self.innerHeight) {	// all except Explorer
            windowWidth = self.innerWidth;
            windowHeight = self.innerHeight;
        } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
            windowWidth = document.documentElement.clientWidth;
            windowHeight = document.documentElement.clientHeight;
        } else if (document.body) { // other Explorers
            windowWidth = document.body.clientWidth;
            windowHeight = document.body.clientHeight;
        }

        // for small pages with total height less then height of the viewport
        if (yScroll < windowHeight) {
            pageHeight = windowHeight;
        } else {
            pageHeight = yScroll;
        }

        // for small pages with total width less then width of the viewport
        if (xScroll < windowWidth) {
            pageWidth = windowWidth;
        } else {
            pageWidth = xScroll;
        }
        arrayPageSize = new Array(pageWidth, pageHeight, windowWidth, windowHeight)
        return arrayPageSize;
    },

    center: function(element) {
        try {
            element = document.getElementById(element);
        } catch (e) {
            return;
        }
        var windowSize = this.getPageDimensions();
        var window_width = windowSize[2];
        var window_height = windowSize[3];

        //alert(windowSize[0] +', '+ windowSize[1] +', '+ windowSize[2] +', '+ windowSize[3]);

        document.getElementById('overlay').style.height = windowSize[1] + 'px';

        element.style.position = 'absolute';
        element.style.zIndex = 99;

        var scrollY = 0;

        if (document.documentElement && document.documentElement.scrollTop) {
            scrollY = document.documentElement.scrollTop;
        } else if (document.body && document.body.scrollTop) {
            scrollY = document.body.scrollTop;
        } else if (window.pageYOffset) {
            scrollY = window.pageYOffset;
        } else if (window.scrollY) {
            scrollY = window.scrollY;
        }

        var elementDimensions = this.getDimensions(element);
        var setX = (window_width - elementDimensions.width) / 2;
        var setY = (window_height - elementDimensions.height) / 2 + scrollY;

        setX = (setX < 0) ? 0 : setX;
        setY = (setY < 0) ? 0 : setY;

        element.style.left = setX + 'px';
        element.style.top = setY + 'px';
        element.style.display = '';
    },

    init: function() {
        var body = document.getElementsByTagName('body')[0];
        var overlay = document.createElement("div");
        overlay.setAttribute('id', 'overlay');
        overlay.style.display = 'none';
        overlay.onclick = function() { Lightbox.hideBox(); }
        body.appendChild(overlay);

        var lightboxtext = '<img id="close" src="/media/app/btn/close.gif" onClick="Lightbox.hideBox()" alt="Close" title="Close this window" />';
        lightboxtext += '<div id="boxContents"></div>';

        var lightbox = document.createElement("div");
        lightbox.setAttribute('id', 'lightbox');
        lightbox.style.display = 'none';
        lightbox.innerHTML = lightboxtext;
        body.appendChild(lightbox);

        var head = document.getElementsByTagName("head")[0];
        var cssNode = document.createElement('link');
        cssNode.type = 'text/css';
        cssNode.rel = 'stylesheet';
        cssNode.href = '/css/lightbox.css'; // need full path to lightbox.css
        cssNode.media = 'screen';
        head.appendChild(cssNode);
    }
}