var modalcontainer = 'bakomatic-container';

        var Modal = {

            display : function( htmlFrag, width, height ) {

                if( !width ) width = 300;

                var bodyNode = document.getElementsByTagName( 'body' )[0];

                var overlayNode = document.getElementById( 'bakomatic-overlay' );
                if( !overlayNode ) {

                    overlayNode = document.createElement( 'div' );
                    overlayNode.id = 'bakomatic-overlay';

                    overlayNode.style.position = 'absolute';
                    overlayNode.style.left = 0;
                    overlayNode.style.top = 0;
                    overlayNode.style.width = '100%';
                    overlayNode.style.height = '100%';
                    overlayNode.style.zIndex = 200;
                    overlayNode.style.backgroundColor = '#000';
                    overlayNode.style.opacity = '0.60';                 //mozilla
                    overlayNode.style.filter = 'alpha( opacity=60 )';   //ie

                    bodyNode.appendChild( overlayNode );
                }

                if( htmlFrag.charAt( 0 ) == '#' ) {

                  htmlFrag = htmlFrag.substr( 1 );
                  modalcontainer = htmlFrag;
                  var containerNode = document.getElementById( htmlFrag );
                  if( containerNode ) {

                    containerNode.style.display = 'block';
                    containerNode.style.position = 'absolute';  
                    containerNode.style.left = 0;
                    containerNode.style.top = 0;
                    containerNode.style.zIndex = 201;
                    containerNode.style.backgroundColor = '#fff';
                    containerNode.style.border = '1px solid #000';
                    containerNode.style.textAlign = 'left';

                    containerNode.style.width = width + 'px';
                    if( height ) containerNode.style.height = height + 'px';
                  }
                } else {

                  var containerNode = document.getElementById( 'bakomatic-container' );
                  if( !containerNode ) {
  
                      containerNode = document.createElement( 'div' );
                      containerNode.id = 'bakomatic-container';
  
                      containerNode.style.position = 'absolute';  
                      containerNode.style.left = 0;
                      containerNode.style.top = 0;
                      containerNode.style.zIndex = 201;
                      containerNode.style.backgroundColor = '#fff';
                      containerNode.style.border = '1px solid #000';
                      containerNode.style.textAlign = 'left';
  
                      containerNode.style.width = width + 'px';
                      if( height ) containerNode.style.height = height + 'px';
  
                      bodyNode.appendChild( containerNode );
                      containerNode.innerHTML = htmlFrag;
                  }
                }

                if( this.isIE6() ) {

                    this._hideSelects();
                }

                this._center( containerNode );
                this._fullscreen( overlayNode );
                this._addEvent( window, 'resize', this._handleEvent );
                this._addEvent( window, 'scroll', this._handleEvent );
            },

            clean : function( container ) {

                var bodyNode = document.getElementsByTagName( 'body' )[0];

                var overlayNode = document.getElementById( 'bakomatic-overlay' );
                if( overlayNode ) {
    
                    bodyNode.removeChild( overlayNode );
                    overlayNode = null;
                }

                if( container == undefined ) {

                  container = 'bakomatic-container';
                }

                var containerNode = document.getElementById( container );
                if( containerNode ) {
  
                    var containerParent = jQuery( containerNode ).parent();
                    //jQuery.each( containerParent, function() {
                    //  this.removeChild( containerNode );
                    //});
                    //containerNode = null;
                    containerNode.style.display = 'none';
                }

                if( this.isIE6() ) {
                    
                    this._showSelects();
                }
            },

            _center : function( node ) {

                if( !node ) return;

                var bodyNode = document.getElementsByTagName( 'body' )[0];

                var windowWidth = document.body.clientWidth;
                var windowHeight = this._displayHeight();
                var scrollWidth = parseInt( bodyNode.scrollLeft, 10 );
                var scrollHeight = 0;//parseInt( bodyNode.scrollTop, 10 );

                if( typeof( window.pageYOffset ) == 'number' ) {

                  scrollHeight = window.pageYOffset;
                } else if( document.body && ( document.body.scrollTop ) ) {

                  scrollHeight = document.body.scrollTop;
                } else if( document.documentElement && document.documentElement.scrollTop ) {

                  scrollHeight = document.documentElement.scrollTop;
                }

                node.style.left = Math.max( scrollWidth + (windowWidth - node.offsetWidth) / 2, 0 ) + 'px';
                node.style.top  = Math.max( scrollHeight + (windowHeight - node.offsetHeight) / 2, 0 ) + 'px';
            },

            _fullscreen : function( node ) {

                if( !node ) return;

                var bodyNode = document.getElementsByTagName( 'body' )[0];

                node.style.width = 0;
                node.style.height = 0;

                var windowWidth = Math.max( bodyNode.clientWidth, bodyNode.scrollWidth );
                var windowHeight = Math.max( bodyNode.clientHeight, bodyNode.scrollHeight );

                node.style.width = windowWidth + 'px';
                node.style.height = windowHeight + 'px';
            },

            //http://ejohn.org/projects/flexible-javascript-events/
            _addEvent : function( obj, type, fn ) {

                if ( obj.attachEvent ) {

                    obj['e'+type+fn] = fn;
                    obj[type+fn] = function(){ obj['e'+type+fn]( window.event ); }
                    obj.attachEvent( 'on'+type, obj[type+fn] );
                } else {

                    obj.addEventListener( type, fn, false );
                }
            },

            _removeEvent : function( obj, type, fn ) {

                if ( obj.detachEvent ) {

                    obj.detachEvent( 'on'+type, obj[type+fn] );
                    obj[type+fn] = null;
                } else {

                    obj.removeEventListener( type, fn, false );
                }
            },

            _handleEvent : function( event ) {

                var overlayNode = document.getElementById( 'bakomatic-overlay' );
                var containerNode = document.getElementById( modalcontainer );

                Modal._fullscreen( overlayNode );
                Modal._center( containerNode );
            },

            _hideSelects : function() {

                var selects = document.getElementsByTagName( 'select' );
                for( var i = 0; i < selects.length; i++ ) {

                    selects[i].style.visibility = 'hidden';
                }
            },

            _showSelects : function() {

                var selects = document.getElementsByTagName( 'select' );
                for( var i = 0; i < selects.length; i++ ) {

                    selects[i].style.visibility = 'visible';
                }
            },

            _displayHeight : function() {

              var viewportwidth;
              var viewportheight;
              
              // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
              
              if (typeof window.innerWidth != 'undefined')
              {
                    viewportwidth = window.innerWidth,
                    viewportheight = window.innerHeight
              }
              
              // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
              
              else if (typeof document.documentElement != 'undefined'
                  && typeof document.documentElement.clientWidth !=
                  'undefined' && document.documentElement.clientWidth != 0)
              {
                    viewportwidth = document.documentElement.clientWidth,
                    viewportheight = document.documentElement.clientHeight
              }
              
              // older versions of IE
              
              else
              {
                    viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
                    viewportheight = document.getElementsByTagName('body')[0].clientHeight
              }

              return viewportheight;
            },

            isIE6 : function() {

                return (navigator.appVersion.indexOf( 'MSIE 6' ) != -1 && navigator.appName == 'Microsoft Internet Explorer');
            }
        }