var debugON=false;

var modal = {

    // Popup code
    mask: null,
    container: null,
    body: null,
    rounded: true,
    maskId: 'popupMask',
    containerId: 'popupContainer',
    bodyId: 'popupBody',
    selectoff: false,
    isShown: false,
    opacity: 6,
    background: 'Black',
    tabindexes: new Array(),
    /*
    * @id:
    */
    init: function(id) {

        // ie 6.0 selects fix
        var brsVersion = parseInt(window.navigator.appVersion.charAt(0), 10);
        if (brsVersion <= 6 && window.navigator.userAgent.indexOf("MSIE") > -1) {
                  modal.selectoff = true;
        }
        modal.body = document.getElementById(id);
        modal.bodyId = id;
        modal.container = document.createElement('div');
        modal.container.id = modal.containerId;
        modal.mask = document.createElement('div');
        modal.mask.id = modal.maskId;

        modal.style(modal.mask, 'filter', 'alpha(opacity=' + parseInt(modal.opacity) * 10 + ')');
        modal.style(modal.mask, '-moz-opacity', parseInt(modal.opacity) / 10);
        modal.style(modal.mask, 'opacity', parseInt(modal.opacity) / 10);
        modal.style(modal.mask, 'z-index', '499');
            modal.style(modal.mask,'background-color',modal.background)
        modal.style(modal.mask, 'display', 'block');
        modal.style(modal.container, 'position', 'absolute');
            modal.style(modal.container,'z-index','500')
        modal.style(modal.container, 'display', 'block');
        modal.style(modal.body, 'display', 'block');

        if (modal.rounded)
            modal.surround();

        // ajout du div cible dans le container  
            if(document.all)
            {
            //ie, opera 9
            modal.container.insertAdjacentElement('beforeEnd', modal.body);
            document.body.insertAdjacentElement('afterBegin', modal.container);
            document.body.insertAdjacentElement('afterBegin', modal.mask);
        } else {
            // firefox
            modal.container.appendChild(modal.body);
            document.body.appendChild(modal.container);
            document.body.appendChild(modal.mask);
        }
    },
    /*
    * show
    */
    show: function(id, rounded, color, opacity) {
        modal.isShown = true;
        if (color)
            modal.background = color;
        if (opacity)
            modal.opacity = opacity;
        modal.rounded = rounded;

        modal.init(id);
        // center
        modal.center();
        //ie fixes
			if(modal.selectoff)
	        {
            modal.selects(false);
            modal.tabindex(false);
        }
        // scroll & resize events
        modal.addEvent(window, "resize", "modal.center(false);");
        modal.addEvent(window, "scroll", "modal.center(false);");
        debug('INFO\ncontainer-size:' + modal.style(modal.container, 'width') + ' x ' + modal.style(modal.container, 'height'));
        //return modal.mask;
    },
    /*
    * hide
    */
    hide: function() {
        if(modal.isShown == true)
        {
            modal.style(modal.mask, 'display', 'none');
            modal.style(modal.container, 'display', 'none');
            modal.style(modal.body, 'display', 'none');

            document.body.appendChild(modal.body);
            document.body.removeChild(modal.mask);
            document.body.removeChild(modal.container);

            //ie fixes
            if(modal.selectoff)
            {
                modal.selects(true);
                modal.tabindex(true);
            }
            modal.isShown = false;
        }
    },

    center: function() {
        if (modal.isShown == true) {
            var scLeft, scTop;

            if (self.pageYOffset) {
                scLeft = self.pageXOffset;
                scTop = self.pageYOffset;
            } else if (document.documentElement && document.documentElement.scrollTop) {
                scLeft = document.documentElement.scrollLeft;
                scTop = document.documentElement.scrollTop;
            } else if (document.body) {
                scLeft = document.body.scrollLeft;
                scTop = document.body.scrollTop;
            }

            var fullWidth, fullHeight;
            var inner = viewportInnerWidth();
            var page = viewportPageHeight();
            var offser = viewportSrollOffset();

            fullWidth = inner[0];
            fullHeight = inner[1];

            modal.style(modal.mask, 'top', scTop + 'px');
            modal.style(modal.mask, 'left', scLeft + 'px');
            modal.style(modal.mask, 'position', 'absolute');
            modal.style(modal.mask, 'height', fullHeight + 'px');
            modal.style(modal.mask, 'width', fullWidth + 'px');

            debug('INFO\nmask-size:' + modal.style(modal.mask, 'width') + ' x ' + modal.style(modal.mask, 'height'));

            // align center container
            var bodywidth = parseInt(modal.style(modal.body, 'width'));
            var bodyheight = parseInt(modal.style(modal.body, 'height'));

            var containerleft = fullWidth - bodywidth;
            var containertop = fullHeight - bodyheight;

                if(containertop > 0 && containerleft > 0)
                {
                     if(containertop < 0)
                     {
                    containertop = '20%';
                    modal.style(modal.container, 'left', containerleft);
                } else {
                    containertop = parseInt(containertop / 2);
                    modal.style(modal.container, 'top', containertop + 'px');
                }
                if (containerleft < 0) {
                    containerleft = '33%';
                    modal.style(modal.container, 'left', containerleft);
                } else {
                    containerleft = parseInt(containerleft / 2);
                    modal.style(modal.container, 'left', containerleft + 'px');
                }
            }
        }
    },
    /**
    * body with corners
    */
    surround:function()
    {
        try
        {
            debug('INFO\nbody-size:' + modal.style(modal.body, 'width') + ' x ' + modal.style(modal.body, 'height'));

            var barHeight = parseInt(modal.style(modal.body, 'height')) - 20;
            var barWidth = parseInt(modal.style(modal.body, 'width')) - 20;

                if(barHeight > 0 && barWidth > 0)
                {
                modal.style(modal.container, 'background-color', 'transparent');
                modal.style(modal.container, 'margin', '3px');
                modal.style(modal.container, 'position', 'absolute');
                modal.style(modal.container, 'padding', '8px');
                modal.style(modal.body, 'background-color', '');
                modal.style(modal.body, 'position', 'relative');

                debug('barHeight:' + barHeight + ' / ' + 'barWidth:' + barWidth);

                var top_right_corner = top_left_corner = bottom_left_corner = bottom_right_corner = 'position:absolute; width:20px; height:20px;background-color:transparent; overflow:hidden;';
                var top_right_inside = top_left_inside = bottom_left_inside = bottom_right_inside = 'position:relative; font-size:150px; font-family:arial;color:' + modal.style(modal.body, 'background-color') + '; line-height: 40px;';

                top_right_corner += 'top: 0px; right:0px;';
                top_left_corner += 'top: 0px; left:0px;';
                bottom_left_corner += 'bottom: 0px; left:0px;';
                bottom_right_corner += 'bottom: 0px; right:0px;';
                top_left_inside += 'left:-8px;';
                top_right_inside += 'left:-25px;';
                bottom_left_inside += 'left:-8px; top:-17px;';
                bottom_right_inside += 'left:-25px; top:-17px;';

                var bar_right = bar_left = 'position:absolute;height:' + barHeight + 'px;width:20px;background-color:' + modal.style(modal.body, 'background-color') + '; overflow:hidden;';
                var bar_bottom = bar_top = 'position:absolute;height:20px;width:' + barWidth + 'px;background-color:' + modal.style(modal.body, 'background-color') + '; overflow:hidden;';

                bar_left += 'left:0px;top:20px;'
                bar_right += 'right:0px;top:20px;'
                bar_bottom += 'bottom:0px;left:20px;';
                bar_top += 'top:0px;left:20px;';

                var topLeft = document.createElement('div');
                topLeft.style.cssText = top_left_corner;
                topLeft.innerHTML = '<div style=\"' + top_left_inside + '\">&bull;</div>';

                var topRight = document.createElement('div');
                topRight.style.cssText = top_right_corner;
                topRight.innerHTML = '<div style=\"' + top_right_inside + '\">&bull;</div>';

                var bottomLeft = document.createElement('div');
                bottomLeft.style.cssText = bottom_left_corner;
                bottomLeft.innerHTML = '<div style=\"' + bottom_left_inside + '\">&bull;</div>';

                var bottomRight = document.createElement('div');
                bottomRight.style.cssText = bottom_right_corner;
                bottomRight.innerHTML = '<div style=\"' + bottom_right_inside + '\">&bull;</div>';

                var right = document.createElement('div');
                right.id = modal.body.id + '_right';
                right.style.cssText = bar_right;

                var left = document.createElement('div');
                left.id = modal.body.id + '_left';
                left.style.cssText = bar_left;

                var bottom = document.createElement('div');
                bottom.id = modal.body.id + '_bottom';
                bottom.style.cssText = bar_bottom;

                var top = document.createElement('div');
                top.id = modal.body.id + '_top';
                top.style.cssText = bar_top;

                modal.container.appendChild(topLeft);
                modal.container.appendChild(topRight);
                modal.container.appendChild(bottomLeft);
                modal.container.appendChild(bottomRight);
                modal.container.appendChild(right);
                modal.container.appendChild(left);
                modal.container.appendChild(top);
                modal.container.appendChild(bottom);
            }
        }catch(err)
        {
            debug('ERROR\nsurround:' + err.toString());
        }
    },
    /**
    * @value == null -> getter
    * @value != null -> setter
    */
    style:function(element, property, value)
    {
            if(value == null)
            {
            var val = "";

            if (document.defaultView && document.defaultView.getComputedStyle) {
                val = document.defaultView.getComputedStyle(element, "").getPropertyValue(property);
            } else if (element.currentStyle) {
                property = property.replace(/\-(\w)/g, function(match, p1) {
                    return p1.toUpperCase();
                });
                val = element.currentStyle[property];
            }
            return val;
        } else {
              if(document.all)
			  {
                property = property.replace(/\-(\w)/g, function(match, p1) {
                    return p1.toUpperCase();
                });
                eval('element.style.' + property + ' = \"' + value + '\"');
            } else {
                element.style.setProperty(property, value, null);
            }
        }
    },
    /*
    * IE fix
    */
    tabindex: function(value) {
        if(value == false)
        {
            if (document.all) {
                var i = 0;
                for (var j = 0; j < gTabbableTags.length; j++) {
                    var tagElements = document.getElementsByTagName(gTabbableTags[j]);
                    for (var k = 0; k < tagElements.length; k++) {
                        modal.tabindexes[i] = tagElements[k].tabIndex;
                        tagElements[k].tabIndex = "-1";
                        i++;
                    }
                }
            }
        } else {
            if (document.all) {
                var i = 0;
                for (var j = 0; j < gTabbableTags.length; j++) {
                    var tagElements = document.getElementsByTagName(gTabbableTags[j]);
                    for (var k = 0; k < tagElements.length; k++) {
                        tagElements[k].tabIndex = modal.tabindexes[i];
                        tagElements[k].tabEnabled = true;
                        i++;
                    }
                }
            }
        }
    },
    selects: function(value) {
		if(value == false)
		{
            selects = document.getElementsByTagName('select');
				for(var i = 0; i < selects.length;i++)
				{
                selects[i].style.visibility = "hidden";
            }
        } else {
            selects = document.getElementsByTagName('select');
				for(var i = 0; i < selects.length;i++)
				{
                selects[i].style.visibility = "visible";
            }
        }
    },

    addEvent: function(obj, event, func) {
        if (obj.addEventListener) {
            obj.addEventListener(event, function() { eval(func); }, false);
            return true;
        } else if (obj.attachEvent) {
            var r = obj.attachEvent("on" + event, function() { eval(func); });
            return r;
        } else {
            return false;
        }
    }
}; 

var gTabbableTags = new Array("A","BUTTON","TEXTAREA","INPUT","IFRAME");
function viewportInnerWidth()
{
    var x,y;
    if (self.innerHeight) // all except Explorer
    {
          x = self.innerWidth;
          y = self.innerHeight;
    }else if (document.documentElement && document.documentElement.clientHeight){// Explorer 6 Strict Mode
          x = document.documentElement.clientWidth;
          y = document.documentElement.clientHeight;
    }
    else if (document.body) // other Explorers
    {
          x = document.body.clientWidth;
          y = document.body.clientHeight;
    }
   return new Array(x,y);
}

function viewportPageHeight()
{
    var x,y;
    var test1 = document.body.scrollHeight;
    var test2 = document.body.offsetHeight
    if (test1 > test2) // all but Explorer Mac
    {
          x = document.body.scrollWidth;
          y = document.body.scrollHeight;
    }else{
         //would also work in Explorer 6 Strict, Mozilla and Safari
          x = document.body.offsetWidth;
          y = document.body.offsetHeight;
    }
   return new Array(x,y);
}

function viewportSrollOffset()
{
    var x,y;
    if (self.pageYOffset) // all except Explorer
    {
          x = self.pageXOffset;
          y = self.pageYOffset;
    }else if (document.documentElement && document.documentElement.scrollTop){// Explorer 6 Strict
          x = document.documentElement.scrollLeft;
          y = document.documentElement.scrollTop;
    }else if (document.body){
		// all other Explorers
          x = document.body.scrollLeft;
          y = document.body.scrollTop;
    }
    return new Array(x,y);
}

function debug(message)
{
      if(debugON)
            alert(message);
}