A #javascript #widget to share on Diaspora

eraser.css

/*! eraser.css 2012-01-20T12:53 UTC - http://github.com/necolas/eraser.css */

/*
 * TODO?:
 * :after, :before, :first-letter, :first-line
 * any other critical proprietary properties (within reason)
 */

.x-widget,

/* Type */
.x-widget h1,
.x-widget h2,
.x-widget h3,
.x-widget h4,
.x-widget h5,
.x-widget h6,
.x-widget a,
.x-widget abbr,
.x-widget address,
.x-widget b,
.x-widget blockquote,
.x-widget cite,
.x-widget code,
.x-widget del,
.x-widget dfn,
.x-widget div,
.x-widget em,
.x-widget hr,
.x-widget i,
.x-widget ins,
.x-widget kbd,
.x-widget p,
.x-widget pre,
.x-widget q,
.x-widget s,
.x-widget samp,
.x-widget small,
.x-widget span,
.x-widget strong,
.x-widget sub,
.x-widget sup,
.x-widget u,
.x-widget var,

/* Lists */
.x-widget ul,
.x-widget ol,
.x-widget li,
.x-widget dl,
.x-widget dt,
.x-widget dd,

/* Tables */
.x-widget table,
.x-widget thead,
.x-widget tbody,
.x-widget tfoot,
.x-widget caption,
.x-widget tr,
.x-widget th,
.x-widget td,

/* Forms */
.x-widget form,
.x-widget legend,
.x-widget fieldset,
.x-widget select,
.x-widget option,
.x-widget input,
.x-widget textarea,
.x-widget button,
.x-widget label,

/* Embeds */
.x-widget embed,
.x-widget iframe,
.x-widget img,
.x-widget object,

/* HTML5 */
.x-widget article,
.x-widget audio,
.x-widget aside,
.x-widget bdi,
.x-widget bdo,
.x-widget canvas,
.x-widget details,
.x-widget figure,
.x-widget figcaption,
.x-widget footer,
.x-widget header,
.x-widget hgroup,
.x-widget mark,
.x-widget menu,
.x-widget nav,
.x-widget section,
.x-widget summary,
.x-widget time,
.x-widget video {
    background: transparent !important;
    -webkit-background-size: auto auto !important;
    -moz-background-size: auto auto !important;
    background-size: auto auto !important;
    border: 0 !important;
    -webkit-border-image: none !important;
    -moz-border-image: none !important;
    -o-border-image: none !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    -moz-border-top-colors: none !important;
    -moz-border-right-colors: none !important;
    -moz-border-bottom-colors: none !important;
    -moz-border-left-colors: none !important;
    bottom: auto !important;
    -webkit-box-shadow: none !important;
    -moz-box-shadow: none !important;
    box-shadow: none !important;
    -webkit-box-sizing: content-box !important;
    -moz-box-sizing: content-box !important;
    box-sizing: content-box !important;
    clear: none !important;
    clip: auto !important;
    color: black !important;
    counter-increment: none !important;
    counter-reset: none !important;
    cursor: auto !important;
    direction: ltr !important;
    display: inline !important;
    -ms-filter: !important;
    filter: !important;
    float: none !important;
    font: normal normal normal 16px/1 sans-serif !important;
    height: auto !important;
    left: auto !important;
    letter-spacing: normal !important;
    list-style: none !important;
    list-style-image: none !important; /* IE8: for lists in 'nav' */
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    min-height: 0 !important;
    min-width: 0 !important;
    -webkit-opacity: 1 !important;
    -moz-opacity: 1 !important;
    opacity: 1 !important;
    outline: 0 !important;
    outline-offset: 0 !important;
    -moz-outline-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    page: auto!important;
    position: static !important;
    right: auto !important;
    text-align: left !important;
    text-decoration: none !important;
    text-indent: 0 !important;
    -ms-text-overflow: clip !important;
    -o-text-overflow: clip !important;
    text-overflow: clip !important;
    text-shadow: none !important;
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-transform: none !important;
    -webkit-transform: none !important;
    -webkit-transform-origin: 50% 50% !important;
    -moz-transform: none !important;
    -moz-transform-origin: 50% 50% !important;
    -ms-transform: none !important;
    -ms-transform-origin: 50% 50% !important;
    -o-transform: none !important;
    -o-transform-origin: 50% 50% !important;
    transform: none !important;
    transform-origin: none !important;
    -webkit-transition: all 0s !important;
    -moz-transition: all 0s !important;
    -ms-transition: all 0s !important;
    -o-transition: all 0s !important;
    top: auto !important;
    unicode-bidi: normal !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
    vertical-align: baseline !important;
    visibility: visible !important;
    white-space: normal !important;
    width: auto !important;
    word-break: normal !important;
    word-spacing: normal !important;
    word-wrap: normal !important;
    z-index: auto !important;
}


/* =============================================================================
   Inline-block elements
   ========================================================================== */

.x-widget audio,
.x-widget canvas,
.x-widget video {
    display: inline-block !important;
    *display: inline !important;
    *zoom: 1 !important;
}

.x-widget audio:not([controls]) {
    display: none !important;
}


/* =============================================================================
   Block elements
   ========================================================================== */

.x-widget,
.x-widget h1,
.x-widget h2,
.x-widget h3,
.x-widget h4,
.x-widget h5,
.x-widget h6,
.x-widget address,
.x-widget blockquote,
.x-widget caption,
.x-widget div,
.x-widget hr,
.x-widget p,
.x-widget pre,
.x-widget dl,
.x-widget dt,
.x-widget dd,
.x-widget ul,
.x-widget ol,
.x-widget form,
.x-widget fieldset,
.x-widget textarea,

/* HTML5 */
.x-widget article,
.x-widget aside,
.x-widget details,
.x-widget figure,
.x-widget figcaption,
.x-widget footer,
.x-widget header,
.x-widget hgroup,
.x-widget menu,
.x-widget nav,
.x-widget section,
.x-widget summary {
    display: block !important; 
}


/* =============================================================================
   Table elements
   ========================================================================== */

.x-widget table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    display: table !important;
    table-layout: auto !important;
}

.x-widget thead {
    display: table-header-group !important;
}

.x-widget tbody {
    display: table-row-group !important;
}

.x-widget tfoot {
    display: table-footer-group !important;
}

.x-widget tr {
    display: table-row !important;
}

.x-widget th,
.x-widget td {
    display: table-cell !important;
}


/* =============================================================================
   Misc
   ========================================================================== */

.x-widget li {	
    display: list-item !important;
}

.x-widget blockquote:before,
.x-widget blockquote:after,
.x-widget q:before,
.x-widget q:after,
.x-widget [hidden],
.x-widget input[type="hidden"] {
    display: none !important;
}

.x-widget a {
    cursor: pointer !important;
}

.x-widget button,
.x-widget input[type="button"], 
.x-widget input[type="submit"] {
    cursor: pointer !important;
}

.x-widget a:hover {
    text-decoration: underline !important;
}

.x-widget button,
.x-widget input[type="submit"] {
    text-align: center !important;
}

.x-widget abbr[title] {
    border-bottom: 1px dotted !important;
}

.x-widget del {
    text-decoration: line-through !important;
}

.x-widget em {
    font-style: italic !important;
}

.x-widget ins {
    background-color: #ff9 !important;
    color: black !important;
}

.x-widget strong {
    font-weight: bold !important;
}

.x-widget blockquote,
.x-widget q  {
    quotes: none !important;
}

.x-widget input,
.x-widget select,
.x-widget textarea {
    border: 1px solid #ccc !important;
}

.x-widget [dir="rtl"] {
    direction: rtl !important;
}

/*
 * Diaspora Share Button
 */
.x-widget a:hover {
    text-decoration: none !important;
}
.x-widget .target {
    display:         block !important;
    width:           50px !important;
    height:          60px !important;
    line-height:     60px !important;
    text-decoration: none !important;
    background:      url( https://github.com/Simounet/Diaspora-Share-Button/raw/jqueryless/images/diaspora-share-button.png ) no-repeat !important;
}
.x-widget .parent_container {
    display:         none !important;
    position:        fixed !important;
    z-index:         998 !important;
    width:           100% !important;
    height:          100% !important;
    _height:         2000px !important;
    top:             0 !important;
    left:            0 !important;
    background:      rgb(0, 0, 0) !important;
    -ms-filter:      "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)" !important;
    filter:          alpha(opacity=60) !important;
    opacity:         0.6 !important;
}
.x-widget .container {
    display:               none !important;
    position:              fixed !important;
    z-index:               999 !important;
    height:                90px !important;
    width:                 700px !important;
    margin:                0 auto 0 -350px !important;
    background-color:      #FFFFFF !important;
    color:                 #000000 !important;
    left:                  50% !important;
    top:                   10px !important;
    -moz-border-radius:    20px !important;
    -webkit-border-radius: 20px !important;
    -khtml-border-radius:  20px !important;
    border-radius:         20px !important;
}
.x-widget .label {
	float:      left !important;
	width:      400px !important;
	margin:     30px 0 10px 110px !important;
    text-align: center !important;
}
.x-widget .label span {
	color:            #FFF !important;
	background-color: #a8a1a8 !important;
}
.x-widget .podname {
    text-align:     left !important;
}
.x-widget .close {
    position:        absolute !important;
    display:         block !important;
    width:           17px !important;
    height:          18px !important;
	margin-top:      5px !important;
	margin-right:    12px !important;
    top:             0 !important;
    right:           0 !important;
    line-height:     18px !important;
    text-decoration: none !important;
    background:      url( ./images/close-button.png ) no-repeat !important;
}
.x-widget .button {
	float:                 left !important;
	margin:                26px 0 10px 30px !important;
	color:                 #fff !important;
	font-size:             14px !important;
	padding-top:           5px !important;
	padding-right:         10px !important;
	padding-bottom:        5px !important;
	padding-left:          10px !important;
	text-decoration:       none !important;
	-webkit-border-radius: 28px !important;
	-moz-border-radius:    28px !important;
	-webkit-box-shadow:    0px 1px 3px #666666 !important;
	-moz-box-shadow:       0px 1px 3px #666666 !important;
	text-shadow:           1px 1px 3px #8f8f8f !important;
	border:                solid #a8a1a8 2px !important;
	background:            #4d4c4d !important;
}
.x-widget .button:hover {
	background: -webkit-gradient(linear, 0 0, 0 100%, from(#ff1f1f), to(#872222)) !important;
	background: -moz-linear-gradient(top, #ff1f1f, #872222) !important;
	border: solid #666666 2px !important;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=undefined, endColorstr=undefined) !important;
}
.x-widget .show {
    display:        block !important;
}
.x-widget .bad-browser {
	position: absolute !important;
	z-index: 998 !important;
	background-color: #FFF !important;
    width:            700px !important;
    margin:           0 auto 0 -350px !important;
    left:             50% !important;
    top:              100px !important;
}
.x-widget .bad-browser p {
	color: #FF3D3D !important;
	margin: 5px !important;
}
.x-widget .bad-browser p a:hover {
	text-decoration: underline !important;
}

index.html

<!DOCTYPE html>
<html lang='fr'>
<head>
	<meta charset='utf-8'>
	<title>Diaspora Share Button</title>
	<style>
		label {
			border: 1px black solid;
		}
	</style>
</head>
<body>
	<div class="article">
		<h1>Titre 1</h1>

		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed ligula in tellus scelerisque elementum. Morbi libero tellus, lacinia nec eleifend et, lobortis vitae magna. Curabitur quis est eget nunc blandit feugiat nec quis enim. Etiam urna massa, scelerisque in lobortis quis, posuere sed tellus. In et adipiscing mi. Mauris vel arcu lacus. Cras tortor justo, elementum sit amet ornare non, imperdiet a odio.</p>
		<script type="text/javascript" src="widget.js"></script>
	</div>
	<div class="article">
		<h1>Titre 2</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed ligula in tellus scelerisque elementum. Morbi libero tellus, lacinia nec eleifend et, lobortis vitae magna. Curabitur quis est eget nunc blandit feugiat nec quis enim. Etiam urna massa, scelerisque in lobortis quis, posuere sed tellus. In et adipiscing mi. Mauris vel arcu lacus. Cras tortor justo, elementum sit amet ornare non, imperdiet a odio.</p>
		<script type="text/javascript" src="widget.js?lang=fr"></script>

	</div>
	<div class="article">
		<h1>Titre 3</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed ligula in tellus scelerisque elementum. Morbi libero tellus, lacinia nec eleifend et, lobortis vitae magna. Curabitur quis est eget nunc blandit feugiat nec quis enim. Etiam urna massa, scelerisque in lobortis quis, posuere sed tellus. In et adipiscing mi. Mauris vel arcu lacus. Cras tortor justo, elementum sit amet ornare non, imperdiet a odio.</p>
		<script type="text/javascript" src="widget.js?param=en&lang=fr&param2=v#coco"></script>

	</div>
	<div class="article">
		<h1>Titre 4</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed ligula in tellus scelerisque elementum. Morbi libero tellus, lacinia nec eleifend et, lobortis vitae magna. Curabitur quis est eget nunc blandit feugiat nec quis enim. Etiam urna massa, scelerisque in lobortis quis, posuere sed tellus. In et adipiscing mi. Mauris vel arcu lacus. Cras tortor justo, elementum sit amet ornare non, imperdiet a odio.</p>
		<script type="text/javascript" src="widget.js?lang=it&lang=fr&param2=v#coco"></script>

	</div>
</body>
</html>

widget.js

(function() {
	// Create HTML element by @tzilliox : https://gist.github.com/1868872
	var createElement = function( str ) {
		var elem = document.createElement('div');
		elem.innerHTML = str;
		if ( elem.childNodes.length > 0 ) {
			return elem.childNodes[0];
		}
		return elem;
	}
	var hasClass = function( el, className ) {
		return ( (" " + el.className + " ").indexOf( " " + className + " " ) !== -1 );
	}
	var addClass = function( el, className ){
		if ( ! hasClass( el, className ) ){
			el.className = el.className + " " + className;
		}
	}
	var removeClass = function( el, className ){
		if ( hasClass( el, className ) ){
			el.className = (" " + el.className + " ").split( " " + className + " " ).join('');
		}
	}
	var get_url_argument_value = function( url, argument_name ) {
		var get_arguments_url_part = function( url ) {
			var indexOf;
			if ( indexOf = url.indexOf( '?' ) + 1 ) {
				url = decodeURIComponent( url.substring( indexOf ) ).replace( new RegExp( '\\+', 'g' ), ' ');
				if ( indexOf = url.indexOf( '#' ) + 1 ) {
					url = url.substring( 0, indexOf - 1 );
				}
				return url;
			}
			return '';
		}
		var get_argument_value = function( url ) {
			var string_reverse = function( string ) {
				return string.split('').reverse().join('');
			}
			url = '&' + url + '&';
			var matches = new RegExp( '&([^=]*)=' + string_reverse( argument_name ) + '&').exec( string_reverse( url ) );
			if( matches != null && matches.length > 1 ) {
				return string_reverse( matches[ 1 ] );
			}
			return '';
		}
		
		// LOGIC
		return get_argument_value( get_arguments_url_part( url ), argument_name );
	}

	// Dectection of Internet Explorer version by @tzilliox : https://gist.github.com/1950913
	// check browser
	var is_valid_navigator = function( ) {

		// UTILS
		var is_internet_explorer = function( ) {
		return ( window.navigator.appName == 'Microsoft Internet Explorer' );
		}
		var get_internet_explorer_version = function( ) {
			var matches = new RegExp( ' MSIE ([0-9]\.[0-9]);' ).exec( window.navigator.userAgent );
			if ( matches != null && matches.length > 1 ) {
				return matches[ 1 ];
			}
			return false;
		}

		// LOGIC
		if ( is_internet_explorer( ) ) {
			return ( get_internet_explorer_version( ) > 7 );
		}
		return true;
	}

	// append global div and set as widget
	var scripts = document.getElementsByTagName( 'script' );
	var script = scripts[ scripts.length - 1 ];
	var widget = createElement( '<div class="x-widget"></div>' );
	script.parentNode.appendChild( widget );
	script.parentNode.removeChild( script );
	var langs = { fr: 'fr', en: 'en' };
	var lang = get_url_argument_value( script.getAttribute( 'src'), 'lang' );
	if ( typeof langs[ lang ] == 'undefined' ) {
		lang = 'en';
	}
	alert( lang );
	
	// check if eraser.css is already set
	var links = document.getElementsByTagName( 'link' );
	var is_eraser_css = false;
	var eraser_css_href = window.location.href + '/eraser.css';
	for ( i=0; i<links.length; i++ ) {
		if ( links[ i ].href == eraser_css_href ) {
			is_eraser_css = true;
		}
	}
	if ( ! is_eraser_css ) {
		if (document.createStyleSheet) {
			document.createStyleSheet( eraser_css_href );
		} else {
			var link = document.createElement( 'link' );
			link.setAttribute( 'type', 'text/css' );
			link.setAttribute( 'href', eraser_css_href );
			link.setAttribute( 'rel', 'stylesheet' );
			var heads = document.getElementsByTagName( 'head' );
			heads[0].appendChild( link );
		}
	}
	
	// img button
	var img_src = 'data:image/png;base64,' +
		'iVBORw0KGgoAAAANSUhEUgAAADIAAAA8CAYAAAAkNenBAAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdB' +
		'TUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAM+UlE' +
		'QVR42mLUUVdnQID/DD9+/ORnZ2ePlZeXCVJQlNXg4ODgBksMJGBkYPz149e3x4+f3b937+GGr1+/zePk' +
		'5HjDyMgIVwIQQIwwj/z794/h189fbo7ONlPj48JUNLVUGbi4OBkYGZkYBgP4//8/w8+fPxlu3brHsGL5' +
		'+udbt+wpZ2JmWszMzAyWBwggsEdAin79+pWcmhYzLTc3hY2NnZXh549fYM8NJsAEjAE2DnaQrxiWLlnL' +
		'0Nk5pQDInMjMzMQAEEDMYiIiDN+//zCMiQleXFGRywNy/M+fv8CeG2wA5KY/v/+AA9jE1IDh+7fvzidO' +
		'nD3Hysp6GyCAmAX4+BhUVJVmt7ZV6bOzszH8Bioc7ADkIZBnjIz1mK9cvq5x//6jJQABxPTv7z/LyMhA' +
		'D3FxUWDy+k01y1hYmBlAAYOMYemZGuDPn78M3DxcDDGxIUYsLCzBAAHEwi/AF2RubsTyC5iRqJaWmRgZ' +
		'nj17yfD+/QcgmwkeiuLiYgyCgvxUy3s/vv9k0NfXZpCSlnQHCCAWWVlpSwkJUbAPqVJSAjMkKysbw4L5' +
		'KxlWrtzAwM3NBStMGOrqihnCwv0ZgMUnVewCBQg/Py+Djra6NkAAsUhLSyiysbFRtYQCFe9//vxh+Pn9' +
		'FwMLMwu06PzF8OfvP1CdQNW8AqzzgDEiIQEQQExs7GycoKRA9ToM6BsmFiYGYFkPxqAiElx//ad6mcwA' +
		'jAgOgABiorScZWVlAWdscmMOWHQC9bNQHDUAAcRCaag/evSUAdhcYJCSkoDmhd8E9YBKL1Ap9u/ff4bH' +
		'j5+Ck7WUlDjD37/kJ2+AAGIhv2SCRGZLcz/Dndv3Gdw8HBnc3OwZtLTUGDh5ecEhjRzZIBaw3QYslzmA' +
		'mf0tw9Ejpxn27D3EsHvXQQZ7e0uGjo5qsMfITSAAAUS2R0DJ6cGDxwzXrt1i+PDhE8PCBSsZ1qzezKCk' +
		'JM9gYWHEcO/eA7BnkJPg8WNnGIAVGMPRo6fBMQlqO4EC5OLFqwwfPn5i4OXlAcYKeaUnQACR7RFQSXfw' +
		'wDGGt2/fg4tYcKgDQ/TGjTsMly9fA4c+KPnAkhMoH2zevBNcerED9bIAPQYrmp88ec5w8uQ5Bm9vF4Zv' +
		'376T5R6AAGIiN1mB6oJDh04CLf4BavqDQ5IRXIKwAh3IjVGLgxwMiiEeHm4GVqAakOdAekB6P3z4yHDk' +
		'8ElwHkFumpMCAAKIhdzyG4TTM+IYdPU0GS5dvMZw4+YdhnfA2AE5BJT5cTkIpA/YSAXLi4gIgfOUHrB2' +
		'trMzB1ea5OYRgAAi2yMgAMoL1tam4OTw5PEzYAydYLgATO8njp8FhzR6/QQqnUD5wN3dkcHQSJfB0tIY' +
		'XNqBPA4q7UAeIRcABBBFxS/IsbC2laKSHIO6ji7D8SNHGY4BMzOknML0CCivZGQnMqiqqzL8/PoZnLy+' +
		'fPlKcb0IEEBU6f6Bik0QePboPkNzYy84/yA3FmExCPLE8+cvGXq6pjD8+PIZ7DGYXkoBQABRxSOg9A7C' +
		'EyfOZrh+4za8tIJ4ggEc6rCkD0pGe/ccZpg3dxm4nUQtABBAVPEIF7AY3bnzIMOG9TsYuIAOhXkC1MxO' +
		'TY1miIoKAibD70itYxaGmTMXM5w5exE8LkANABBAFHsEVKTeApZYPd3T4EUzCICSl4OTFUN2TiJDUXEG' +
		'g6mpIcO3r9/hSQwk39k+meHly9cMzCyUd7gAAogJ0nSjoCcIDN2dOw4w3Lp1F1zbg0wDFQLa2uoMdbVF' +
		'4CQFSmo1NYUM4hLQXigjpKY/c/oiw7Fjp8EVJIXDRQwAAcT06/fv75RkuJ9AR0dFB4FDHtQH+QoMdVA+' +
		'qKktYJCTlwYXqWCP6Wow5OYlgzM4KGZYWFgZqmoKGFxd7cH1CvklzX+G379+/wIIIGY5aakQHx9XWVBN' +
		'TE5lBNIDao7Y2VkyKCrKMVy6dI0hKTmKwT/AA56UQOD3798MurpaDO/efWD4++8vQ09vPYOvrxt0IOE/' +
		'2YUMqJjfsGH7PYAAYnn48MkxYDq1VFCQBYYeec1oUEyASiZvH1cGAwMdBn4+XmBG/4HShwIP5QDV5eWn' +
		'MPwDqhUG1urktquQm0ofgY3Ny5dvXAEIICZgy3XTmdOX/rJRWBSCmx5Ah4mJiYDbUthCGeRZUCnFC/Qo' +
		'RckJCjg42EGeYHj69PkegABiAkbPoZUrN+x9++YdSrOb/GGaP3j7/yA5cpvqyACUFUB5b8Xy9VeABchq' +
		'gABilhIXB/roxV1giIba2lmwI9fEgxWAkhQoZqdPW/B3xYqNucCYuQAQQOAhU6DvngArp7fA5OBrZWUC' +
		'LudhoQqrtemFsbUYYBjkATZgUc4BzAbLl61n6OubUQp0+1yQOEAAwUfjQX2Bf//+Brq5O0xNTIyQVFVV' +
		'Apf19ByNBzkW1pQHsUFNGEQy/Q8ee7t/7xHDkqVrP23etLMc6OYZsIEPgABiRJ4fATcrfvyQ4uHhCdPU' +
		'VPUENrE1mVmZ2YFm0DytAfPNf2D/hDcjPY6bA1gPgdwyf/6KH3fuPvjAysICGtr9/erVm3vXrt/aDuz3' +
		'rADWVfdhrQgQAAggRtSJHkSG/P37DxMw43JSqz1GqNAD2vdLWlpi0cZNC8PFpSUYtmzYwZCfW5MDrHNm' +
		'AB0M6kv/AyajH8BU8hfbGDJAALH8BUYXE3jwjBElMwGbFf+A+Cu9khWwTmExNNRVFBUVZrgD7Pf39kxf' +
		'w8LKPJWLDdyo/Ix3ZB6YLQACiIlfgA+cP0BNjYEsrYCpQFhLW02FCVjQdHRMvvngweNiNjxtMNgwLKjF' +
		'APIDQACxbNq0kOHUqQvAZvUihhvXbzP8BtYDoEYcOP0xMtKo+EQtoSBjuGy6mhqqQqtWrGfYv+9oGTc3' +
		'1yPkpA4LY1Cr4CewQAANwYIKpJjYUGB7zY4BIIBYePh4GLy8nRksLI0YTp48z3D8+BmGs2cvMYAqSFDl' +
		'RouSCVarwzwD8gg/P5/R5y9fgHXDwpnA4n8TaEQGlGRAlR4vL2RUhglYggoKCzAAkyCDmZkhg62tOQMo' +
		'Kf74+ZMBIIAYP7+/A68p2Tkgw5ifPn4GtmK/Mrx//5HqHgE1K3btPMDQ3zeLgZMLMtoCCnGggzaKiYka' +
		'XrhwxZSdjfUlyLOgOiM83J/B188NPpTEB2zegDCo+wBqz8FaCQABBPcIes0JHkWnQR0CMhsU0+VlzQxb' +
		'tuwC1tDgwT0eYOfqArA5Xv3n95+Vf4EeA4V6RkYsg6OzLaRvD6rn/v+Ds9EBQACx4GoP0XJGFxS6jU2l' +
		'wN7hG4YTwKTMw8utCixs1gCT0UoFBTmGlJQohoBAT3CMfSNyUggggLDGCD0AKIndv/+IoaKileHihStS' +
		'fHx8n/383D8nAz0hIysJ7u+T0rgECCDGLx/uQpsijHT3DAswZr5//85w6MBxBlB/SENHk+E/0PF/f/8i' +
		'uikBKs1ARTBAADF+enc78OGDJ+nA3hywWcVI94oElBdBjcA/QA/8BrezSOoDMbKxsTIrKsktBwggljOn' +
		'L0wsLm6UBWVA5LbLUACwSrGmpkATIIBY3rx9x/f582dwBhyI5EUpAA23vnz1hhsggFiYmZghlQ0TE8ke' +
		'SUmJZti6dQ94GHSgAKiGZwG6HyCAKEpLoBJGUlJsUMQMQAAxMQwTABBABKcVQNNhKanRDBISkJAHTX6C' +
		'khNC3pWhs6sWzJ4zZynDyhUbweyCwjSwXlCzAgRWrtwIlv/y+Ss8WRoZ6zJ8BvLt7CzAYnFxuQy3b90D' +
		'6/P2cQHX7ufPX2bo758FFscHAAKIYIyAPHHw4HGGoMAkhvLyFoz8AHJMM9RzBQVpiEwIdCBIHOQ4kD5Q' +
		'm8nezhJFL8ihoAYhSB4UQCBgZ2/JUFNbCF5glp1VAfZobW0RwRgBCCCCHgGFqJqaEoMqEB8Ceujcucso' +
		'8lu37AGLw2LCyEgXHjsgT4P4asDmNqh0kZQUxzC/uakfrB8UELDYAKkFiYHAuXOXgM11Rax6kQFAABFM' +
		'WqBQBSWDzs4asAUTgNGMnLRAFoEAekyBQtHO3oLh9u17DOfOXsZq9u3b9zH0gWIIlhJgAJS8eEDiz3G7' +
		'EyCACHoEFDIgDApZUF4AWYDsEayxCLQU5AmYp0F8UAmHWQd8wRD7DM1DWZkVJGV2gAAimLRAIQtLLs+f' +
		'vwKnXYKVFNAxoNgDpXeQXmLSODypgjwOTM6gQAPpBZlBjH6AACIYI6C8MdW7AxI7h06A0z5ylH9GmshE' +
		'5oNKmkJgyTV1WgdY37ate1GSEYh96xY31hQwYcIscHKGlWYg/YQAQAAxrl0x50NVVRs/aHRxKDZRPn36' +
		'zFBUlPERIICY/kEnLIcyAPUcAQKIBdgM/gPqE3z79n8Itn5B42HfQA3ePwABxPjyyaX2TZt2ZX3+/AXk' +
		'kf9DyyP/GYGdQhYvb5fFAAEGANPsvlfQGVlZAAAAAElFTkSuQmCC';
	// <a> element with the Diaspora*'s img button
	var target = createElement( '<a class="target" href="javascript:;" title="Share this at Diaspora*">&nbsp;</a>' );
	widget.appendChild( target );

	// widget parentContainer
	var parentContainer = createElement( '<div class="parent_container"></div>' );
	widget.appendChild( parentContainer );

	// widget container
	var container = createElement( '<div class="container"></div>' );
	widget.appendChild( container );

	// form
	var form = createElement( '<form method="get" name="widgetform"></form>' );
	container.appendChild( form );

	// handle onclick img to show input text
	target.onclick = function() {
		addClass( parentContainer, 'show' );
		addClass( container, 'show' );

		// label with input and submit button
		var labels = form.getElementsByTagName('label');
		if (labels.length == 0) {
			var label = createElement( '<label class="label" for="podname">Pod Name: <span>http://</span></label>' );
			form.appendChild( label );

			var podname = createElement( '<input class="podname" type="text" name="podname"></input>' );
			label.appendChild( podname );

			// close button
			var close = createElement( '<a class="close" href="javascript:;" title="Close">&nbsp;</a>' );
			var to_close = function () {
				for (var i = 0; i < form.childNodes.length; i++) {
					form.removeChild(form.childNodes[i]);
					i--;
				}
				removeClass( parentContainer, 'show' );
				removeClass( container, 'show' );
				document.body.onkeyup = function(){}
			}
			// esc key handler
			document.body.onkeyup = function( event ) {
				if (window.event) {
					event = window.event;
				}
				var k = ( event.keyCode ) ? event.keyCode : event.which;
				if ( k == 27 ) {
					to_close();
					return false;
				} else {
					return true;
				}
			}
			close.onclick = to_close;
			parentContainer.onclick = to_close;
			form.appendChild( close );

			podname.select();
			var button = createElement( '<button class="button" name="submit" type="submit">Submit</button>' );
			form.appendChild( button );
		} else {
			form.removeChild(labels[0]);
		}
		// checks invalid browser
		if ( ! is_valid_navigator( ) ) {
			var badIE = createElement( '<div class="bad-browser"><p>You are browsing the web with an outdated tool that doesn\'t allow you to feel the full power of the Internet. If you can, pick a best one : <a href="http://www.mozilla.org/firefox/" target="_blank">Firefox</a></p></div>' );
			form.appendChild( badIE );
		}
	}

	// pop up handler
	function popitup(url) {
		newwindow=window.open(url,'name','height=700,width=600');
		if (window.focus) { newwindow.focus(); }
		return false;
	}

	form.onsubmit = function() {
		var label = form.getElementsByTagName('label');
		var podurl = "https://" + label[0].childNodes[2].value + "/bookmarklet?url=" + encodeURIComponent(window.location.href) + "&amp;title=" + encodeURIComponent(document.title) + "&amp;notes=" + encodeURIComponent('' + (window.getSelection ? window.getSelection() : document.getSelection ? document.getSelection() : document.selection.createRange().text)) + "&amp;v=1&amp;";
		// TODO: check if url/bookmarklet and url/.well-known/host-meta exist
		popitup( podurl );
		return false;
	}
}) ();