﻿/** 
* Lightbox pops up a panel on click.
* [arguments:6] = 0:lightboxId[default:lightbox_panel], 1:filterId[default:filter_panel], 2:enableFading, 3:keepFilterOnClick, 4:interval, 5:isDebug
*/
var Lightbox = {
    Create: function(lightboxId, filterId, enableFading, keepFilterOnClick, interval, isDebug) {

        /* Set the required class variables */
        this.lightboxId = lightboxId || "lightbox_panel";
        this.filterId = filterId || "filter_panel"
        this.enableFading = enableFading;
        this.keepFilterOnClick = keepFilterOnClick;
        this.interval = interval || 10;
        this.isDebug = isDebug;
        this.timer = null;

        /* Initiate the required elements */
        this.Init = function() {

            this.lightboxPanel = document.getElementById(this.lightboxId);
            this.filterPanel = document.getElementById(this.filterId);
            this.errorPanel = document.getElementById(this.lightboxId + "_error_panel");

            if (this.errorPanel) {
                this.initialErrorMessage = this.errorPanel.innerHTML;
            };

            this.InitPanels();
            clearTimeout(this.timer);
        };

        /* Initialise the style of the panels */
        this.InitPanels = function() {
            if (this.lightboxPanel) {
                this.lightboxPanel.style.display = "none";
            };

            if (this.filterPanel) {
                this.filterPanel.style.display = "none";
            };

            if (this.errorPanel) {
                this.errorPanel.style.display = "none";
            };

            Lightbox.isOpened = false;
            clearTimeout(this.timer);
        };

        /* Open the lightbox */
        this.Open = function(message) {
            try {
                /* Make the body static and append the panels */
                var body = document.getElementsByTagName("body")[0];
                body.style.position = "static";

                if (this.filterPanel) {
                    body.appendChild(this.filterPanel);

                    /* Make this filter cover the whole window */
                    this.ResetFilter();
                    this.filterPanel.style.display = "block";

                    /* Add onclick event for closing the lightbox */
                    if (!this.keepFilterOnClick) {
                        var self = this;
                        this.filterPanel.onclick = function() { self.Close(); };
                    };
                };

                /* If fading is enabled, call setTimeout functions *
                * Otherwise pop it up                             */
                if (this.lightboxPanel) {
                    body.appendChild(this.lightboxPanel);

                    Lightbox.isOpened = true;
                    if (this.enableFading) {
                        Gradient(this.lightboxId, 0, this.isDebug);
                        this.FadeIn();
                    }
                    else {
                        this.lightboxPanel.style.display = "block";
                    };

                    /* Set focus on the first input */
                    $("#" + this.lightboxId + " .focused").focus();
                    
                    this.ResetStyles();
                }
                else if (this.isDebug)
                    alert("[Lightbox.Open] No lightbox panel for " + this.lightboxId);

                if (this.errorPanel) {
                    this.ResetErrorMessage(message);
                };
            }
            catch (e) {
                if (this.isDebug)
                    alert("[Lightbox.Open] " + e);
            };
        };

        /* Close the lightbox */
        this.Close = function() {
            try {
                this.InitPanels();
            }
            catch (e) {
                if (this.isDebug)
                    alert("[Lightbox.Close] " + e);
            };
        };

        /* Show the error message */
        this.ShowError = function(message) {

            if (!Lightbox.isOpened) {
                this.Open(message);
            }
            else {
                this.ResetErrorMessage(message);
            };

            if (this.errorPanel) {
                this.errorPanel.style.display = "block";
            }
            else if (this.isDebug) {
                alert("[Lightbox.ShowError] No panel is found for '" + this.lightboxId + "_error_panel'");
            };
        };

        /* Display an element */
        this.Display = function(elementId) {

            var element = document.getElementById(elementId);
            if (element) {
                element.style.display = "block";
                if (!Lightbox.isOpened) {
                    this.Open();
                };
            }
            else if (this.isDebug) {
                alert("[Lightbox.Display] No element is found for '" + elementId + "'");
            };
        };

        /* Rest the error message */
        this.ResetErrorMessage = function(message) {
            if (message) {
                this.errorPanel.innerHTML = message;
            }
            else {
                this.errorPanel.innerHTML = this.initialErrorMessage;
            };
        };

        /* Return the position of the current lightbox */
        this.Position = function() {
            if (this.lightboxPanel) {
                var position = GetWindowDimension();
                var scrollPos = GetScrollPosition();
                return { top: position.height / 5 + scrollPos.top, left: position.width / 3.5 + scrollPos.left };
            }
            else {
                return { top: 0, left: 0 };
            };
        };

        /* Reset the position of the lightbox so that it is centered always */
        /* Recursively reset the position of the lightbox and the size of the filter */
        this.ResetStyles = function(index) {
            index = index || 0;

            var position = this.Position();
            this.lightboxPanel.style.top = position.top + "px";
            this.lightboxPanel.style.left = position.left + 'px';

            this.ResetFilter();
            var self = this;
            this.timer = setTimeout(function() {
                if (Lightbox.isOpened) {
                    self.ResetStyles(index + 1);
                };
            }, this.interval);
        };

        /* Set Timeout for Gradient */
        this.FadeIn = function() {
            try {
                var level = 0;
                while (level <= 1) {
                    this.timer = setTimeout("Gradient('" + this.lightboxId + "'," + level + "," + this.isDebug + ")", level * 300);
                    level += 0.1;
                };
            }
            catch (e) {
                if (this.isDebug)
                    alert("[FadeIn] " + e);
            };
        };

        /* Reset the width and height of filter so that it covers the whole screen */
        this.ResetFilter = function() {
            var winDimension = GetWindowDimension();
            this.filterPanel.style.width = winDimension.width;
            this.filterPanel.style.height = winDimension.height;

            var scrollPos = GetScrollPosition();
            this.filterPanel.style.top = scrollPos.top + "px";
            this.filterPanel.style.left = scrollPos.left + "px";
        };

        /* Postback by __doPostBack with event target and event argument */
        this.ProcessPostBack = function(eventTarget, eventArgId, validationMode) {
            if (__doPostBack) {
                var element = document.getElementById(eventArgId);
                if (validationMode == "email") {
                    if (element && IsValidEmail(element.value)) {
                        __doPostBack(eventTarget, element.value);
                    }
                    else {
                        this.ShowError();
                    };
                }
                else if (validationMode == "valid") {
                    if (element && !IsEmpty(element.value)) {
                        __doPostBack(eventTarget, element.value);
                    }
                    else {
                        this.ShowError();
                    };
                }
                else if (element) {
                    __doPostBack(eventTarget, element.value);
                }
                else {
                    __doPostBack(eventTarget);
                };
            };
        };

        /* Change the opacity by the given level */
        Gradient = function(lightboxId, level, isDebug) {
            try {
                var lightbox = document.getElementById(lightboxId);
                if (lightbox) {
                    if (Lightbox.isOpened) {
                        lightbox.style.opacity = level;
                        lightbox.style.MozOpacity = level;
                        lightbox.style.KhtmlOpacity = level;
                        lightbox.style.filter = "alpha(opacity=" + level * 100 + ")";
                        lightbox.style.display = "block";
                    }
                    else {
                        lightbox.style.display = "none";
                    };
                };
            }
            catch (e) {
                if (isDebug)
                    alert("[Gradient] " + e);
            };
        };

        /* Return the current scroll position */
        GetScrollPosition = function() {
            var coords = { left: 0, top: 0 };
            var left = document.body.scrollLeft;
            var top = document.body.scrollTop;
            if (top == 0) {
                left = window.pageXOffset || (document.body.parentElement ? document.body.parentElement.scrollLeft : 0);
                top = window.pageYOffset || (document.body.parentElement ? document.body.parentElement.scrollTop : 0);
            }

            if (left) {
                coords.left = left;
            }
            if (top) {
                coords.top = top;
            }

            return coords;
        };

        /** Return the dimension of the current window including the scroll area */
        GetWindowDimension = function() {
            var dimension = { width: 0, height: 0 };
            var width = window.innerWidth;
            var height = window.innerHeight;

            if (parseInt(navigator.appVersion) > 3) {
                if (navigator.appName == "Netscape") {
                    width = window.innerWidth - 16;
                };
                if (navigator.appName.indexOf("Microsoft") != -1) {
                    width = document.documentElement.clientWidth;
                    height = document.documentElement.clientHeight;
                };
            };

            if (width) {
                dimension.width = width;
            };

            if (height) {
                dimension.height = height;
            }

            return dimension;
        };

        /** return width and height of the target element as a set */
        GetDimension = function(node) {
            node = typeof (node) == "string" ? document.getElementById(node) : node;
            var dimension = { width: 0, height: 0 };

            if (node) {
                var width = node.style && (node.style.width > 1)
					? node.style.width
					: (node.scrollWidth > 1 ? node.scrollWidth : node.offsetWidth);

                var height = node.style && (node.style.height > 1)
					? node.style.height
					: (node.scrollHeight > 1 ? node.scrollHeight : node.offsetHeight);

                if (width) {
                    dimension.width = width;
                }
                if (height) {
                    dimension.height = height;
                }
            }

            return dimension;
        };

        /** check if the value is a valid email address */
        IsValidEmail = function(emailAddress) {
            if (emailAddress) {
                var emailPat = /^[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]/;
                var matchArray = emailAddress.match(emailPat);
                if (matchArray == null) {
                    return false;
                };
                return true;
            }
            else {
                return false;
            };
        };

        /** check if the value is empty string or array */
        IsEmpty = function(value) {
            if (value == undefined) {
                return true;
            }
            else if (typeof (value) == "string") {
                /** trim before and after string */
                return value.replace(/^\s+|\s+$/g, "") == "";
            }
            else if ((typeof (value) == "object") && value.length) {
                return value.length == 0;
            }
            else {
                return value;
            };
        };
    }
};
/* a global variable flagging if lightbox is open */
Lightbox.isOpened = false;

