// Constructor
  function cPopup(){
    // properties
    this.m_parent = null;
    this.m_element = null;
    this.m_height = 0;
    this.m_width = 0;
    this.m_opacity = null;
    this.m_close = null;
    this.m_is_mousedown = false;
    this.m_clientX = 0;
    this.m_clientY = 0;
    this.m_event = new cEvent();
    this.m_browser = new cBrowser();
    
    // detect a special case of "web browser"
    this.is_ie     = this.m_browser.m_type['msie'];
    this.is_chrome = this.m_browser.m_type['chrome']; 
    
    var m_oSelf = this;
    
    // -----------------------------------------------------           
    // Private method
    this._createElement = function(type, parent) {
    	var el = null;
	    if(document.createElementNS) {
		    // use the XHTML namespace; IE won't normally get here unless
    		// _they_ "fix" the DOM2 implementation.
		    el = document.createElementNS("http://www.w3.org/1999/xhtml", type);
	    } 
	    else{
		    el = document.createElement(type);
	    }
	    if (typeof(parent) != "undefined") {
		    parent.appendChild(el);
	    }
	    return el;
    };   
    // -----------------------------------------------------          
    this._pixel = function(value){
      return value + 'px';  
    }
    // -----------------------------------------------------          
    this._hide = function(event){
      var evt = window.event || event;        

      if(this.m_element != null){
        this.m_close.onclick = null;
        this.m_parent.removeChild(this.m_element);
        this.m_element = null;
      }
      
      if(this.m_opacity != null){
        this.m_parent.removeChild(this.m_opacity);
        this.m_opacity = null;
      }
      
      if(this.m_parent != null){
        with(this.m_parent){
//          onmousemove = null;
//          onmouseup   = null;        
          this.m_event.RemoveEvent(this.m_parent, 'mousemove', this._mousemove);
          this.m_event.RemoveEvent(this.m_parent, 'mouseup'  , this._mouseup);
        }
      }
      
      with(window){
//        onscroll = null;
//        onresize = null;
        this.m_event.RemoveEvent(window, 'scroll', this._onscroll);
        this.m_event.RemoveEvent(window, 'resize', this._onresize);
      }      
    };
    // -----------------------------------------------------          
    this._mousedown = function(event){
      var evt = window.event || event;        
      this.m_is_mousedown = true;
      
      var popup = document.getElementById('popup-cadre');
      this.m_clientX = evt.clientX - popup.offsetLeft;
      this.m_clientY = evt.clientY - popup.offsetTop;
    };
    // -----------------------------------------------------          
    this._mousemove = function(event){
      var evt = window.event || event;        
      if(m_oSelf.m_is_mousedown){
        var popup = document.getElementById('popup-cadre');
        var left  = evt.clientX - m_oSelf.m_clientX;
        var top   = evt.clientY - m_oSelf.m_clientY;
        left = left > 0 ? left : 0;
        top  = top  > 0 ? top  : 0;
        popup.style.left = m_oSelf._pixel(left);
        popup.style.top =  m_oSelf._pixel(top);
      }
    };
    // -----------------------------------------------------          
    this._mouseup = function(event){
      var evt = window.event || event;        
      m_oSelf.m_is_mousedown = false;
    };
    // -----------------------------------------------------          
    this._mouseout = function(event){
      this._mouseup(event);
    };
    // -----------------------------------------------------              
    this._onscroll = function(event){
      var evt = window.event || event;              
      var size = new Array();
      m_oSelf._opacitySize(size);
      with(m_oSelf.m_opacity){
        if(!m_oSelf.is_chrome){
          style.height = m_oSelf._pixel(m_oSelf.m_parent.parentNode.clientHeight + m_oSelf.m_parent.parentNode.scrollTop);
          style.width  = m_oSelf._pixel(m_oSelf.m_parent.parentNode.clientWidth + m_oSelf.m_parent.parentNode.scrollLeft);
        }
        else{
          style.height = m_oSelf._pixel(m_oSelf.m_parent.parentNode.clientHeight + m_oSelf.m_parent.scrollTop);          
          style.width  = m_oSelf._pixel(m_oSelf.m_parent.parentNode.clientWidth + m_oSelf.m_parent.scrollLeft);          
        }
      }
    };
    // -----------------------------------------------------          
    this._onresize = function(event){
      var evt = window.event || event;        
      var size = new Array();
      try{
        m_oSelf._opacitySize(size);
        with(m_oSelf.m_opacity){
          style.height = m_oSelf._pixel(size[0]);
          style.width  = m_oSelf._pixel(size[1]);
        }
      }
      catch(err){
      }
    };
    // -----------------------------------------------------            
    this._opacitySize = function(size){
      if(this.m_element == null) return;
      var html = this.m_element.parentNode.parentNode;  // the html
      var body = this.m_element.parentNode;             // the body

      height = (html.clientHeight > html.offsetHeight ? html.clientHeight : html.offsetHeight) + html.scrollTop;
      width  = (html.clientWidth  > html.offsetWidth  ? html.clientWidth  : html.offsetWidth)  + html.scrollLeft;        

      size[0] = height;
      size[1] = width;
    }
    // ==================================================================================================
    // Public method
    // ==================================================================================================
    this.showAt = function(x,y){

      this.m_element.style.height = this._pixel(this.m_height);
      this.m_element.style.width  = this._pixel(this.m_width);

      this.m_element.style.top  =  this._pixel(y > 0 ? y : 0);
      this.m_element.style.left =  this._pixel(x > 0 ? x : 0);
      
      var size = new Array();
      this._opacitySize(size);
      with(this.m_opacity){
        style.height = this._pixel(size[0]);
        style.width  = this._pixel(size[1]);
        style.display = 'block';        
      }
      this.m_element.style.display = 'block';      
    }
    // -----------------------------------------------------                    
    this.show = function(){
      var html = this.m_element.parentNode.parentNode;  // the html
      var x  = Math.round((html.clientWidth  -  this.m_width)/2);
      var y = Math.round((html.clientHeight -  this.m_height)/2);
      this.showAt(x,y)
    };
    // -----------------------------------------------------        
    this.create = function(height,width, sTextTitle,sText,titleX){
      titleX = typeof(titleX) == 'undefined' ? 0 : titleX;  
      var parent = null;
      var cornerWidth  = 12;
      var cornerHeight = 12;
      var borderWidth = 6;
      var oEvent = this.m_event;
      
      parent = document.getElementsByTagName("body")[0];
      this.m_parent = parent;

      // ------------------------------------
      this.m_opacity = this._createElement("div");
      
      with(this.m_opacity){
        id = 'popup-opacity';
        style.width = '100%';  
        style.height = '100%';  
        style.position = "absolute";
        style.top = this._pixel(0);
        style.left = this._pixel(0);
        style.margin = this._pixel(0);
        style.display = 'none';    
        style.zIndex = 1000;
      } 

      // ------------------------------------
      with(window){
//        onscroll = oEvent.bindEvent(this._onscroll, this);
//        onresize = oEvent.bindEvent(this._onresize, this);
        oEvent.AddEvent(window, 'scroll', this._onscroll,false);        
        oEvent.AddEvent(window, 'resize', this._onresize,false);
      }
      // ------------------------------------      
      with(parent){
        //onmousemove = oEvent.bindEvent(this._mousemove, this);
        //onmouseup   = oEvent.bindEvent(this._mouseup,   this); 
        oEvent.AddEvent(parent, 'mousemove', this._mousemove,false);        
        oEvent.AddEvent(parent, 'mouseup', this._mouseup,false);
      }
      // ------------------------------------
      var cadre = this._createElement("div");
      this.m_element = cadre;

      this.m_height = height;
      this.m_width = width;
      
      with(cadre){
        id = 'popup-cadre';
        style.position = 'absolute';
        style.display  = "none";
        style.borderWidth = this._pixel(0);
        style.margin = this._pixel(0); 
        style.padding = this._pixel(0);               
        style.zIndex = this.m_opacity.style.zIndex + 1;
      }
      
      // ------------------------------------      
      var Toolbar = this._createElement("div",cadre);
      with(Toolbar){
        id = 'popup-toolbar';
        style.position = 'relative';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(this.m_width);
        style.height = this._pixel(cornerHeight + 10);
      }
      
      // ------------------------------------      
      var CornerLeftTop = this._createElement("div",Toolbar);
      with(CornerLeftTop){
        id = 'popup-corner-left-top';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(cornerWidth);
        style.height = this._pixel(cornerHeight);
      }
      // ------------------------------------
      var header = this._createElement("div",Toolbar);
      with(header){
        id = 'popup-header';
        style.position = 'relative';
        style.borderWidth = this._pixel(0);
        style.margin = this._pixel(0);        
        style.padding = this._pixel(0);
        style.textAlign= 'left';
        style.cursor = 'move'; 
        style.width = this._pixel(this.m_width - (2*cornerWidth));
        style.height = this._pixel(cornerHeight);
        onmousedown = oEvent.bindEvent(this._mousedown, this);

      }
      // ------------------------------------
      var CornerRightTop = this._createElement("div",Toolbar);
      with(CornerRightTop){
        id = 'popup-corner-right-top';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(cornerWidth);
        style.height = this._pixel(cornerHeight);
      }

      // ------------------------------------
      var header_title = this._createElement("div",Toolbar);
      with(header_title){
        id = 'popup-header-title';
        style.position = 'relative';
        style.borderWidth = this._pixel(0);
        style.margin = this._pixel(0);        
        style.padding = this._pixel(0);
        style.cursor = 'move';                 
        style.textAlign= 'left';
        style.marginLeft = this._pixel(10);        
        style.marginTop = this._pixel(titleX);
        style.width = this._pixel(this.m_width - 33 - parseInt(style.marginLeft));        
        style.top = this._pixel(-16);
        innerHTML = sTextTitle;        
        onmousedown = oEvent.bindEvent(this._mousedown, this);        
      }      

     // ------------------------------------          
      var btnclose = this._createElement("div",Toolbar);
      this.m_close = btnclose;
      with(btnclose){
        id = 'popup-btn-close';
        style.position = 'relative';
        title = 'Fermer';
        style.cursor = 'pointer'; 
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width  = this._pixel(23);
        style.height = this._pixel(23);
        style.top = this._pixel(-10);
        onclick = oEvent.bindEvent(this._hide, this);        
      }

      // ------------------------------------
      var HeaderBottom = this._createElement("div",Toolbar);
      with(HeaderBottom){
        id = 'popup-header-bottom';
        style.position = 'relative';                
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(this.m_width);
        onmousedown = oEvent.bindEvent(this._mousedown, this);
        style.cursor = 'move';         
        style.height = this._pixel(11);
        style.top = this._pixel(-24);        
        style.zIndex = -1;
      }

      // ------------------------------------      
      var BorderLeft = this._createElement("div",cadre);
      with(BorderLeft){
        id = 'popup-border-left';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(borderWidth);
        style.height = this._pixel(this.m_height - parseInt(HeaderBottom.style.height) - parseInt(header.style.height));
      }
      
      // ------------------------------------            
      var pagecontainer   = this._createElement("div",cadre);
      with(pagecontainer){
        id = 'popup-page-container';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.height = BorderLeft.style.height;
        style.width = this._pixel(this.m_width - (2 * borderWidth));
      }
      
      // ------------------------------------      
      var page   = this._createElement("div",pagecontainer);
      with(page){
        id = 'popup-page';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(5);
        style.margin = this._pixel(0);
        style.width = this._pixel(parseInt(pagecontainer.style.width)  - parseInt(style.paddingLeft) - parseInt(style.paddingRight));
        style.height= this._pixel(parseInt(pagecontainer.style.height) - parseInt(style.paddingTop)  - parseInt(style.paddingBottom));
        innerHTML = sText;
      }
      
      // ------------------------------------
      var BorderRight = this._createElement("div",cadre);
      with(BorderRight){
        id = 'popup-border-right';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(borderWidth);
        style.height = this._pixel(this.m_height -parseInt(HeaderBottom.style.height) - parseInt(header.style.height));
      }

      // ------------------------------------
      var Footer = this._createElement("div",cadre);
      with(Footer){
        id = 'popup-footer';
        style.borderWidth = this._pixel(0);
        style.padding = this._pixel(0);
        style.margin = this._pixel(0);
        style.width = this._pixel(this.m_width);
        style.height = this._pixel(borderWidth);
      }

      // ------------------------------------
      parent.appendChild(this.m_element);            
      parent.appendChild(this.m_opacity);               
    };
  }