﻿function openPopWindow(url, height, width) {

    if ((navigator.appName == "Netscape" && parseInt(navigator.appVersion) > 3) || (navigator.appName.indexOf("Microsoft") != -1 && parseInt(navigator.appVersion) > 3)) {
        loupe = window.open(url, "smallPop", 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=' + width + ',height=' + height);
        loupe.focus();
    }
    return false;
}

var lightbox = function(trigger, target, close) {

    this.modal = false;

    this.documentSize = function() {
        var windowSize = this.windowSize();
        var scrollHeight = (document.compatMode != 'CSS1Compat') ? document.body.scrollHeight : document.documentElement.scrollHeight;
        var scrollWidth = (document.compatMode != 'CSS1Compat') ? document.body.scrollWidth : document.documentElement.scrollWidth;
        return { width: Math.max(scrollWidth, windowSize.width), height: Math.max(scrollHeight, windowSize.height) };
    };

    this.windowCenter = function() {
        var viewport = this.windowSize();
        return { left: Math.round(viewport.width / 2), top: Math.round(viewport.height / 2) };
    };

    this.windowOffset = function() {
        if (typeof (window.pageYOffset) == 'number') {
            return { left: window.pageXOffset, top: window.pageYOffset };
        }
        return { left: document.documentElement.scrollLeft, top: document.documentElement.scrollTop };
    };

    this.windowSize = function() {
        // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
        if (typeof window.innerWidth != 'undefined') {
            return { width: window.innerWidth, height: window.innerHeight };
        }

        // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
        if (typeof document.documentElement != 'undefined' &&
			typeof document.documentElement.clientWidth != 'undefined' &&
			document.documentElement.clientWidth !== 0) {
            return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight };
        }

        // older versions of IE
        return { width: document.getElementsByTagName('body')[0].clientWidth, height: document.getElementsByTagName('body')[0].clientHeight };
    };

    this.trueCoordinates = function(el) {
        var position = this.truePosition(el),
			size = this.trueSize(el);

        return [{ left: position.left, top: position.top },
				{ top: position.top + size.height, left: position.left + size.width}];
    };

    this.truePosition = function(el) {
        var size = this.trueSize(el),
			windowSize = $.windowSize();
        curleft = 0,
			curtop = 0;

        do {
            curleft += el.offsetLeft;
            curtop += el.offsetTop;
        } while (el = el.offsetParent);

        return {
            left: curleft, top: curtop,
            right: windowSize.width - (curleft + size.width),
            bottom: windowSize.height - (curtop + size.height)
        };
    };

    this.trueSize = function(el) {
        var display = el.style.display, originalWidth, originalHeight;
        if (display != 'none' && display !== null) // Safari bug
        {
            originalHeight = el.style.offsetHeight;
            originalWidth = el.style.offsetWidth;
            if (originalWidth && originalHeight) {
                return { width: originalWidth, height: originalHeight };
            }

            return { width: el.clientWidth, height: el.clientHeight };
        }

        // All *Width *Height properties give 0 on elements with display none,
        // so enable the element temporarily
        var originalVisibility = el.style.visibility;
        var originalPosition = el.style.position;
        var originalDisplay = el.style.display;

        el.style.visibility = 'visible';
        el.style.position = 'absolute';
        el.style.display = 'block';

        originalHeight = el.clientHeight;
        originalWidth = el.clientWidth;

        this.css('visibility', originalVisibility);
        this.css('position', originalPosition);
        this.css('display', originalDisplay);

        return { width: originalWidth, height: originalHeight };
    };

    this.center = function(el) {
        var windowCenter = this.windowCenter(),
			windowOffset = this.windowOffset(),
			size = this.trueSize(el);
        el.style.position = 'absolute';
        el.style.margin = 0;
        el.style.top = (windowCenter.top + windowOffset.top - (size.height / 2)) + 'px';
        el.style.left = (windowCenter.left + windowOffset.left - (size.width / 2)) + 'px';

        return this;
    };

    this.opacity = function(el, value) {
        el.style.opacity = value / 10;
        el.style.filter = 'alpha(opacity=' + value * 10 + ')';

        return this;
    };

    this.buildModal = function() {
        var modal = document.createElement('div');
        this.opacity(modal, 4);
        modal.style.position = 'absolute';
        modal.style.top = 0;
        modal.style.left = 0;
        modal.style.background = 'black';
        modal.style.zIndex = '0';
        return modal;
    };

    this.open = function() {
        var first = !this.modal;
        if (first) {
            this.modal = this.buildModal();
            document.body.appendChild(this.modal);
            document.body.appendChild(target);
        }

        var pageSize = this.documentSize();
        this.modal.style.width = pageSize.width + 'px';
        this.modal.style.height = pageSize.height + 'px';

        target.style.display = 'block';
        this.modal.style.display = 'block';
        this.center(target);

        if (first) {
            this.close();
            this.open();
        }
    };

    this.close = function() {
        target.style.display = 'none';
        this.modal.style.display = 'none';
    };

    var _this = this;

    //contruct
    Element.observe(trigger, 'click', function(e) {
        Event.stop(e);
        _this.open();
    });

    Element.observe(close, 'click', function(e) {
        Event.stop(e);
        _this.close();
    });

    Element.observe(window, 'resize', function(e) {
        var pageSize = _this.documentSize();
        if (_this.modal) {
            _this.modal.style.width = pageSize.width + 'px';
            _this.modal.style.height = pageSize.height + 'px';
        }
    });
}