Load infos and notices via ping and show them with js popup

22 files changed, 222 insertions, 12 deletions

diff --git a/boot.php b/boot.php
index 13e1eff11..c13116012 100644
--- a/boot.php
+++ b/boot.php
@@ -721,14 +721,16 @@ function remote_user() {
 if(! function_exists('notice')) {
 function notice($s) {
 	$a = get_app();
+	if(! x($_SESSION,'sysmsg'))	$_SESSION['sysmsg'] = array();
 	if($a->interactive)
-		$_SESSION['sysmsg'] .= $s;
+		$_SESSION['sysmsg'][] = $s;
 }}
 if(! function_exists('info')) {
 function info($s) {
 	$a = get_app();
+	if(! x($_SESSION,'sysmsg_info')) $_SESSION['sysmsg_info'] = array();
 	if($a->interactive)
-		$_SESSION['sysmsg_info'] .= $s;
+		$_SESSION['sysmsg_info'][] = $s;
 }}
 
 
diff --git a/images/icons/10/info.png b/images/icons/10/info.png
new file mode 100644
index 000000000..8097733f3
--- /dev/null
+++ b/images/icons/10/info.png
diff --git a/images/icons/10/notice.png b/images/icons/10/notice.png
new file mode 100644
index 000000000..327d5834e
--- /dev/null
+++ b/images/icons/10/notice.png
diff --git a/images/icons/16/info.png b/images/icons/16/info.png
new file mode 100644
index 000000000..dcd501f93
--- /dev/null
+++ b/images/icons/16/info.png
diff --git a/images/icons/16/notice.png b/images/icons/16/notice.png
new file mode 100644
index 000000000..8e551ad05
--- /dev/null
+++ b/images/icons/16/notice.png
diff --git a/images/icons/22/info.png b/images/icons/22/info.png
new file mode 100644
index 000000000..c3cc715dc
--- /dev/null
+++ b/images/icons/22/info.png
diff --git a/images/icons/22/notice.png b/images/icons/22/notice.png
new file mode 100644
index 000000000..e45b18c4c
--- /dev/null
+++ b/images/icons/22/notice.png
diff --git a/images/icons/48/info.png b/images/icons/48/info.png
new file mode 100644
index 000000000..a66ae388b
--- /dev/null
+++ b/images/icons/48/info.png
diff --git a/images/icons/48/notice.png b/images/icons/48/notice.png
new file mode 100644
index 000000000..a44548527
--- /dev/null
+++ b/images/icons/48/notice.png
diff --git a/images/icons/info.png b/images/icons/info.png
new file mode 100644
index 000000000..ea2b0ffa4
--- /dev/null
+++ b/images/icons/info.png
diff --git a/images/icons/notice.png b/images/icons/notice.png
new file mode 100644
index 000000000..b6017c8de
--- /dev/null
+++ b/images/icons/notice.png
diff --git a/index.php b/index.php
index 51c87cae6..3db8170ef 100644
--- a/index.php
+++ b/index.php
@@ -112,10 +112,10 @@ if(! x($_SESSION,'authenticated'))
 	header('X-Account-Management-Status: none');
 
 if(! x($_SESSION,'sysmsg'))
-	$_SESSION['sysmsg'] = '';
+	$_SESSION['sysmsg'] = array();
 
 if(! x($_SESSION,'sysmsg_info'))
-	$_SESSION['sysmsg_info'] = '';
+	$_SESSION['sysmsg_info'] = array();
 
 /*
  * check_config() is responsible for running update scripts. These automatically 
@@ -262,7 +262,7 @@ if(isset($homebase))
 // now that we've been through the module content, see if the page reported
 // a permission problem and if so, a 403 response would seem to be in order.
 
-if(stristr($_SESSION['sysmsg'], t('Permission denied'))) {
+if(stristr( implode("",$_SESSION['sysmsg']), t('Permission denied'))) {
 	header($_SERVER["SERVER_PROTOCOL"] . ' 403 ' . t('Permission denied.'));
 }
 
@@ -272,7 +272,7 @@ if(stristr($_SESSION['sysmsg'], t('Permission denied'))) {
  *
  */
 	
-if(x($_SESSION,'sysmsg')) {
+/*if(x($_SESSION,'sysmsg')) {
 	$a->page['content'] = "<div id=\"sysmsg\" class=\"error-message\">{$_SESSION['sysmsg']}</div>\r\n"
 		. ((x($a->page,'content')) ? $a->page['content'] : '');
 	$_SESSION['sysmsg']="";
@@ -283,7 +283,7 @@ if(x($_SESSION,'sysmsg_info')) {
 		. ((x($a->page,'content')) ? $a->page['content'] : '');
 	$_SESSION['sysmsg_info']="";
 	unset($_SESSION['sysmsg_info']);
-}
+}*/
 
 
 
diff --git a/js/main.js b/js/main.js
index 30bf8a3b7..328b1f231 100644
--- a/js/main.js
+++ b/js/main.js
@@ -112,6 +112,16 @@
 			if(notif == 0) { notif = ''; $('#notify-update').removeClass('show') } else { $('#notify-update').addClass('show') }
 			$('#notify-update').html(notif);
 			
+			var eSysmsg = $(data).find('sysmsgs');
+			eSysmsg.children("notice").each(function(){
+				text = $(this).text();
+				$.jGrowl(text, { sticky: true, theme: 'notice' });
+			});
+			eSysmsg.children("info").each(function(){
+				text = $(this).text();
+				$.jGrowl(text, { sticky: false, theme: 'info' });
+			});
+			
 		});
 		
 		
diff --git a/library/jgrowl/README b/library/jgrowl/README
new file mode 100644
index 000000000..3c94f7508
--- /dev/null
+++ b/library/jgrowl/README
@@ -0,0 +1,3 @@
+http://stanlemon.net/projects/jgrowl.html
+
+jGrowl is free and open source, it's distributed under the MIT and GPL licenses
diff --git a/library/jgrowl/jquery.jgrowl.css b/library/jgrowl/jquery.jgrowl.css
new file mode 100755
index 000000000..b4deb978c
--- /dev/null
+++ b/library/jgrowl/jquery.jgrowl.css
@@ -0,0 +1,136 @@
+
+div.jGrowl {
+	z-index: 			9999;
+	color: 				#fff;
+	font-size: 			12px;
+}
+
+/** Special IE6 Style Positioning **/
+div.ie6 {
+	position: 			absolute;
+}
+
+div.ie6.top-right {
+	right: 				auto;
+	bottom: 			auto;
+	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.top-left {
+	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.bottom-right {
+	left: 				expression( ( 0 - jGrowl.offsetWidth + ( document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body.clientWidth ) + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.bottom-left {
+	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+	top: 				expression( ( 0 - jGrowl.offsetHeight + ( document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight ) + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+}
+
+div.ie6.center {
+	left: 				expression( ( 0 + ( ignoreMe2 = document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft ) ) + 'px' );
+	top: 				expression( ( 0 + ( ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop ) ) + 'px' );
+	width: 				100%;
+}
+
+/** Normal Style Positions **/
+div.jGrowl {
+	position:			absolute;
+}
+
+body > div.jGrowl {
+	position:			fixed;
+}
+
+div.jGrowl.top-left {
+	left: 				0px;
+	top: 				0px;
+}
+
+div.jGrowl.top-right {
+	right: 				0px;
+	top: 				0px;
+}
+
+div.jGrowl.bottom-left {
+	left: 				0px;
+	bottom:				0px;
+}
+
+div.jGrowl.bottom-right {
+	right: 				0px;
+	bottom: 			0px;
+}
+
+div.jGrowl.center {
+	top: 				0px;
+	width: 				50%;
+	left: 				25%;
+}
+
+/** Cross Browser Styling **/
+div.center div.jGrowl-notification, div.center div.jGrowl-closer {
+	margin-left: 		auto;
+	margin-right: 		auto;
+}
+
+div.jGrowl div.jGrowl-notification, div.jGrowl div.jGrowl-closer {
+	background-color: 		#000;
+	opacity: 				.85;
+	-ms-filter: 			"progid:DXImageTransform.Microsoft.Alpha(Opacity=85)"; 
+	filter: 				progid:DXImageTransform.Microsoft.Alpha(Opacity=85); 
+	zoom: 					1;
+	width: 					235px;
+	padding: 				10px;
+	margin-top: 			5px;
+	margin-bottom: 			5px;
+	font-family: 			Tahoma, Arial, Helvetica, sans-serif;
+	font-size: 				1em;
+	text-align: 			left;
+	display: 				none;
+	-moz-border-radius: 	5px;
+	-webkit-border-radius:	5px;
+}
+
+div.jGrowl div.jGrowl-notification {
+	min-height: 			40px;
+}
+
+div.jGrowl div.jGrowl-notification,
+div.jGrowl div.jGrowl-closer {
+	margin: 				10px;
+}
+
+div.jGrowl div.jGrowl-notification div.jGrowl-header {
+	font-weight: 			bold;
+	font-size:				.85em;
+}
+
+div.jGrowl div.jGrowl-notification div.jGrowl-close {
+	z-index:				99;
+	float: 					right;
+	font-weight: 			bold;
+	font-size: 				1em;
+	cursor:					pointer;
+}
+
+div.jGrowl div.jGrowl-closer {
+	padding-top: 			4px;
+	padding-bottom: 		4px;
+	cursor: 				pointer;
+	font-size:				.9em;
+	font-weight: 			bold;
+	text-align: 			center;
+}
+
+/** Hide jGrowl when printing **/
+@media print {
+	div.jGrowl {
+		display: 			none;
+	}
+}
diff --git a/library/jgrowl/jquery.jgrowl_minimized.js b/library/jgrowl/jquery.jgrowl_minimized.js
new file mode 100644
index 000000000..782898098
--- /dev/null
+++ b/library/jgrowl/jquery.jgrowl_minimized.js
@@ -0,0 +1,11 @@
+(function($){$.jGrowl=function(m,o){if($('#jGrowl').size()==0)
+$('<div id="jGrowl"></div>').addClass((o&&o.position)?o.position:$.jGrowl.defaults.position).appendTo('body');$('#jGrowl').jGrowl(m,o);};$.fn.jGrowl=function(m,o){if($.isFunction(this.each)){var args=arguments;return this.each(function(){var self=this;if($(this).data('jGrowl.instance')==undefined){$(this).data('jGrowl.instance',$.extend(new $.fn.jGrowl(),{notifications:[],element:null,interval:null}));$(this).data('jGrowl.instance').startup(this);}
+if($.isFunction($(this).data('jGrowl.instance')[m])){$(this).data('jGrowl.instance')[m].apply($(this).data('jGrowl.instance'),$.makeArray(args).slice(1));}else{$(this).data('jGrowl.instance').create(m,o);}});};};$.extend($.fn.jGrowl.prototype,{defaults:{pool:0,header:'',group:'',sticky:false,position:'top-right',glue:'after',theme:'default',themeState:'highlight',corners:'10px',check:250,life:3000,closeDuration:'normal',openDuration:'normal',easing:'swing',closer:true,closeTemplate:'&times;',closerTemplate:'<div>[ close all ]</div>',log:function(e,m,o){},beforeOpen:function(e,m,o){},afterOpen:function(e,m,o){},open:function(e,m,o){},beforeClose:function(e,m,o){},close:function(e,m,o){},animateOpen:{opacity:'show'},animateClose:{opacity:'hide'}},notifications:[],element:null,interval:null,create:function(message,o){var o=$.extend({},this.defaults,o);if(typeof o.speed!=='undefined'){o.openDuration=o.speed;o.closeDuration=o.speed;}
+this.notifications.push({message:message,options:o});o.log.apply(this.element,[this.element,message,o]);},render:function(notification){var self=this;var message=notification.message;var o=notification.options;var notification=$('<div class="jGrowl-notification '+o.themeState+' ui-corner-all'+
+((o.group!=undefined&&o.group!='')?' '+o.group:'')+'">'+'<div class="jGrowl-close">'+o.closeTemplate+'</div>'+'<div class="jGrowl-header">'+o.header+'</div>'+'<div class="jGrowl-message">'+message+'</div></div>').data("jGrowl",o).addClass(o.theme).children('div.jGrowl-close').bind("click.jGrowl",function(){$(this).parent().trigger('jGrowl.close');}).parent();$(notification).bind("mouseover.jGrowl",function(){$('div.jGrowl-notification',self.element).data("jGrowl.pause",true);}).bind("mouseout.jGrowl",function(){$('div.jGrowl-notification',self.element).data("jGrowl.pause",false);}).bind('jGrowl.beforeOpen',function(){if(o.beforeOpen.apply(notification,[notification,message,o,self.element])!=false){$(this).trigger('jGrowl.open');}}).bind('jGrowl.open',function(){if(o.open.apply(notification,[notification,message,o,self.element])!=false){if(o.glue=='after'){$('div.jGrowl-notification:last',self.element).after(notification);}else{$('div.jGrowl-notification:first',self.element).before(notification);}
+$(this).animate(o.animateOpen,o.openDuration,o.easing,function(){if($.browser.msie&&(parseInt($(this).css('opacity'),10)===1||parseInt($(this).css('opacity'),10)===0))
+this.style.removeAttribute('filter');if($(this).data("jGrowl")!=null)
+$(this).data("jGrowl").created=new Date();$(this).trigger('jGrowl.afterOpen');});}}).bind('jGrowl.afterOpen',function(){o.afterOpen.apply(notification,[notification,message,o,self.element]);}).bind('jGrowl.beforeClose',function(){if(o.beforeClose.apply(notification,[notification,message,o,self.element])!=false)
+$(this).trigger('jGrowl.close');}).bind('jGrowl.close',function(){$(this).data('jGrowl.pause',true);$(this).animate(o.animateClose,o.closeDuration,o.easing,function(){if($.isFunction(o.close)){if(o.close.apply(notification,[notification,message,o,self.element])!==false)
+$(this).remove();}else{$(this).remove();}});}).trigger('jGrowl.beforeOpen');if(o.corners!=''&&$.fn.corner!=undefined)$(notification).corner(o.corners);if($('div.jGrowl-notification:parent',self.element).size()>1&&$('div.jGrowl-closer',self.element).size()==0&&this.defaults.closer!=false){$(this.defaults.closerTemplate).addClass('jGrowl-closer ui-state-highlight ui-corner-all').addClass(this.defaults.theme).appendTo(self.element).animate(this.defaults.animateOpen,this.defaults.speed,this.defaults.easing).bind("click.jGrowl",function(){$(this).siblings().trigger("jGrowl.beforeClose");if($.isFunction(self.defaults.closer)){self.defaults.closer.apply($(this).parent()[0],[$(this).parent()[0]]);}});};},update:function(){$(this.element).find('div.jGrowl-notification:parent').each(function(){if($(this).data("jGrowl")!=undefined&&$(this).data("jGrowl").created!=undefined&&($(this).data("jGrowl").created.getTime()+parseInt($(this).data("jGrowl").life))<(new Date()).getTime()&&$(this).data("jGrowl").sticky!=true&&($(this).data("jGrowl.pause")==undefined||$(this).data("jGrowl.pause")!=true)){$(this).trigger('jGrowl.beforeClose');}});if(this.notifications.length>0&&(this.defaults.pool==0||$(this.element).find('div.jGrowl-notification:parent').size()<this.defaults.pool))
+this.render(this.notifications.shift());if($(this.element).find('div.jGrowl-notification:parent').size()<2){$(this.element).find('div.jGrowl-closer').animate(this.defaults.animateClose,this.defaults.speed,this.defaults.easing,function(){$(this).remove();});}},startup:function(e){this.element=$(e).addClass('jGrowl').append('<div class="jGrowl-notification"></div>');this.interval=setInterval(function(){$(e).data('jGrowl.instance').update();},parseInt(this.defaults.check));if($.browser.msie&&parseInt($.browser.version)<7&&!window["XMLHttpRequest"]){$(this.element).addClass('ie6');}},shutdown:function(){$(this.element).removeClass('jGrowl').find('div.jGrowl-notification').remove();clearInterval(this.interval);},close:function(){$(this.element).find('div.jGrowl-notification').each(function(){$(this).trigger('jGrowl.beforeClose');});}});$.jGrowl.defaults=$.fn.jGrowl.prototype.defaults;})(jQuery);
\ No newline at end of file
diff --git a/library/stanlemon-jgrowl-tip.tar.gz b/library/stanlemon-jgrowl-tip.tar.gz
new file mode 100644
index 000000000..07a5fb097
--- /dev/null
+++ b/library/stanlemon-jgrowl-tip.tar.gz
diff --git a/mod/ping.php b/mod/ping.php
index 8a3d284af..38a32744d 100644
--- a/mod/ping.php
+++ b/mod/ping.php
@@ -159,8 +159,26 @@ function ping_init(&$a) {
 	}
 
 
-	echo "  </notif>
-		</result>
+	echo "  </notif>";
+	
+	echo " <sysmsgs>";
+		if(x($_SESSION,'sysmsg')){
+			foreach ($_SESSION['sysmsg'] as $m){
+				echo "<notice>".($m)."</notice>";
+			}
+			$_SESSION['sysmsg']=array();
+			unset($_SESSION['sysmsg']);
+		}
+		if(x($_SESSION,'sysmsg_info')){
+			foreach ($_SESSION['sysmsg_info'] as $m){
+				echo "<info>".($m)."</info>";
+			}
+			$_SESSION['sysmsg_info']=array();
+			unset($_SESSION['sysmsg_info']);
+		}
+	
+	echo " </sysmsgs>";
+	echo"</result>
 	";
 
 	killme();
diff --git a/view/head.tpl b/view/head.tpl
index a18bcdd5e..b6d78da39 100644
--- a/view/head.tpl
+++ b/view/head.tpl
@@ -1,9 +1,12 @@
 <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
 <base href="$baseurl/" />
 <meta name="generator" content="$generator" />
-<link rel="stylesheet" type="text/css" href="$stylesheet" media="all" />
 <link rel="stylesheet" href="$baseurl/library/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="$baseurl/library/tiptip/tipTip.css" type="text/css" media="screen" />
+<link rel="stylesheet" href="$baseurl/library/jgrowl/jquery.jgrowl.css" type="text/css" media="screen" />
+
+<link rel="stylesheet" type="text/css" href="$stylesheet" media="all" />
+
 <link rel="shortcut icon" href="$baseurl/images/friendika-32.png" />
 <link rel="search"
          href="$baseurl/opensearch" 
@@ -16,6 +19,7 @@
 <script type="text/javascript" src="$baseurl/js/jquery.js" ></script>
 <script type="text/javascript" src="$baseurl/library/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
 <script type="text/javascript" src="$baseurl/library/tiptip/jquery.tipTip.minified.js"></script>
+<script type="text/javascript" src="$baseurl/library/jgrowl/jquery.jgrowl_minimized.js"></script>
 <script type="text/javascript" src="$baseurl/library/tinymce/jscripts/tiny_mce/tiny_mce_src.js" ></script>
 <script type="text/javascript" src="$baseurl/js/acl.js" ></script>
 <script type="text/javascript" src="$baseurl/js/main.js" ></script>
diff --git a/view/theme/quattro/colors.less b/view/theme/quattro/colors.less
index 6015c61ee..3d3074d60 100644
--- a/view/theme/quattro/colors.less
+++ b/view/theme/quattro/colors.less
@@ -59,5 +59,8 @@
 @AsideConnectBg: @Blue3;
 @AsideConnectHoverBg: @Blue1;
 
+@InfoColor: @Grey1;
+@InfoBackgroundColor: @Metalic3;
 
-
+@NoticeColor: @Grey1;
+@NoticeBackgroundColor: #511919;
diff --git a/view/theme/quattro/quattro.less b/view/theme/quattro/quattro.less
index c7cbe7ebb..2c4e0464a 100644
--- a/view/theme/quattro/quattro.less
+++ b/view/theme/quattro/quattro.less
@@ -38,6 +38,19 @@ a:hover {color: @LinkHover; text-decoration: underline; }
 	.icon { float: right; }
 }
 
+/* popup notifications */
+div.jGrowl div.notice {
+	background: @NoticeBackgroundColor url("../../../images/icons/48/notice.png") no-repeat 5px center;
+	color: 	@NoticeColor;
+	padding-left: 58px;
+}
+div.jGrowl div.info {
+	background: @InfoBackgroundColor url("../../../images/icons/48/info.png") no-repeat 5px center;
+	color: 	@InfoColor;
+	padding-left: 58px;
+}
+
+
 
 /* header */
 header {
@@ -237,4 +250,3 @@ section {
 }
 
 
-
diff --git a/view/theme/quattro/style.css b/view/theme/quattro/style.css
index 2b950c3ef..0fce02f03 100644
--- a/view/theme/quattro/style.css
+++ b/view/theme/quattro/style.css
@@ -95,6 +95,17 @@ a:hover {
 .tool .icon {
   float: right;
 }
+/* popup notifications */
+div.jGrowl div.notice {
+  background: #511919 url("../../../images/icons/48/notice.png") no-repeat 5px center;
+  color: #ffffff;
+  padding-left: 58px;
+}
+div.jGrowl div.info {
+  background: #364e59 url("../../../images/icons/48/info.png") no-repeat 5px center;
+  color: #ffffff;
+  padding-left: 58px;
+}
 /* header */
 header {
   position: fixed;