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);
}

 
