A #javascript #bookmarklet : Provide a generic #popin for other bookmarklets

bm_popin.js

function bm_popin( id ) {
	this.id = id;
	this.construct = function() {
		var bm = document.querySelector( '#bm_popin' );
		if ( bm == null ) {
			bm = document.createElement( 'div' );
			bm.setAttribute( 'id', 'bm_popin' );
			bm.setAttribute( 'style', 'position: fixed; bottom:10px; right: 10px; z-index: 9999; width: 200px; font-size: 12px; line-height: 16px; font-weight: normal; color: #EEEEEE;  text-align: left;' );
			document.body.appendChild( bm );
		}
		var popin = document.querySelector( '#bm_popin .popin_' + this.id );
		if ( popin == null ) {
			popin = document.createElement( 'div' );
			popin.setAttribute( 'class', 'popin_' + this.id );
			popin.setAttribute( 'style', 'position: relative; background: rgba(0, 0, 0, 0.8); border-radius: 10px; padding: 10px; margin-bottom: 10px;' );
			bm.appendChild( popin );
		}
		var title =  document.querySelector( '#bm_popin .popin_' + this.id + ' .title' );
		if ( title == null ) {
			title = document.createElement( 'div' );
			title.setAttribute( 'class', 'title');
			title.setAttribute( 'style', 'font-size: 16px; line-height: 20px; font-weight: bold; padding-bottom: 10px; text-align: center;' );
			popin.appendChild( title );
		}
		var content = document.querySelector( '#bm_popin .popin_' + this.id + ' .content' );
		if ( content == null ) {
			content = document.createElement( 'div' );
			content.setAttribute( 'class', 'content');
			popin.appendChild( content );
		}
		var action = document.querySelector( '#bm_popin .popin_' + this.id + ' .action' );
		if ( action == null ) {
			action = document.createElement( 'div' );
			action.setAttribute( 'class', 'action');
			popin.appendChild( action );
		}
		var close =  document.querySelector( '#bm_popin .popin_' + this.id + ' .close' );
		if ( close == null ) {
			close = document.createElement( 'a' );
			close.setAttribute( 'class', 'close');
			close.setAttribute( 'href', '#');
			close.setAttribute( 'style', 'position: absolute; top: 10px; right: 10px; color: #EEEEEE;' );
			close.innerHTML = 'X';
			popin.appendChild( close );
			close.addEventListener( 'click', this.close, false );
		}
	}
	this.title = function( label ) {
		var title = document.querySelector( '#bm_popin .popin_' + this.id + ' .title' );
		if ( title != null ) {
			title.innerHTML = label;
		}
	}
	this.add_text = function( label ) {
		var text = document.createElement('div');
		text.innerHTML = label;
		var content = document.querySelector( '#bm_popin .popin_' + this.id + ' .content' );
		if ( content != null ) {
			content.appendChild( text );
		}
	}
	this.text = function( label ) {
		var content = document.querySelector( '#bm_popin .popin_' + this.id + ' .content' );
		if ( content != null ) {
			content.innerHTML = label;
		}
	}
	this.add_button = function( label, handler ) {
		var button = document.createElement('button');
		button.setAttribute( 'type', 'submit' );
		button.innerHTML = label;
		var action = document.querySelector( '#bm_popin .popin_' + this.id + ' .action' );
		if ( action != null ) {
			action.appendChild( button );
			button.addEventListener( 'click', handler );
		}
	}
	this.clear_button = function( ) {
		var action = document.querySelector( '#bm_popin .popin_' + this.id + ' .action' );
		if ( action != null ) {
			action.innerHTML = '';
		}
	}
	this.close = function( ) {
		var popin;
		if ( typeof(this.parentNode) == 'object' ) {
			popin = this.parentNode;
		} else {
			popin = document.querySelector( '#bm_popin .popin_' + this.id );
		}
		if ( popin != null ) {
			popin.parentNode.removeChild( popin );
		}
	}
	this.construct();
}