Icons as CSS classes, hide net/home/mail/notify-update divs with no value

16 files changed, 133 insertions, 42 deletions

diff --git a/boot.php b/boot.php
index b0412e051..4e2379469 100644
--- a/boot.php
+++ b/boot.php
@@ -2631,7 +2631,7 @@ if(! function_exists('get_plink')) {
 function get_plink($item) {
 	$a = get_app();	
 	$plink = (((x($item,'plink')) && (! $item['private'])) ? '<div class="wall-item-links-wrapper"><a href="' 
-			. $item['plink'] . '" title="' . t('link to source') . '" target="external-link" ><img src="' . $a->get_baseurl() . '/images/remote-link.gif" alt="' . t('link to source') . '" /></a></div>' : '');
+			. $item['plink'] . '" title="' . t('link to source') . '" target="external-link" class="icon remote-link"></a></div>' : '');
 	return $plink;
 }}
 
diff --git a/images/icons.png b/images/icons.png
new file mode 100644
index 000000000..734c75f73
--- /dev/null
+++ b/images/icons.png
diff --git a/include/main.js b/include/main.js
index a251d8e3a..c7a3aea48 100644
--- a/include/main.js
+++ b/include/main.js
@@ -91,19 +91,20 @@
 			$.get("ping",function(data) {
 				$(data).find('result').each(function() {
 					var net = $(this).find('net').text();
-					if(net == 0) { net = ''; }
+					if(net == 0) { net = ''; $('#net-update').hide() } else { $('#net-update').show() }
 					$('#net-update').html(net);
 					var home = $(this).find('home').text();
-					if(home == 0) { home = ''; }
+					if(home == 0) { home = '';  $('#home-update').hide() } else { $('#home-update').show() }
 					$('#home-update').html(home);
 					var mail = $(this).find('mail').text();
-					if(mail == 0) { mail = ''; }
+					if(mail == 0) { mail = '';  $('#mail-update').hide() } else { $('#mail-update').show() }
 					$('#mail-update').html(mail);
 					var intro = $(this).find('intro').text();
 					var register = $(this).find('register').text();
 					if(intro == 0) { intro = ''; }
 					if(register != 0 && intro != '') { intro = intro+'/'+register; }
 					if(register != 0 && intro == '') { intro = '0/'+register; }
+					if (intro == '') { $('#notify-update').hide() } else { $('#notify-update').show() }
 					$('#notify-update').html(intro);
 
 				});
@@ -161,15 +162,11 @@
 	}
 
 	function imgbright(node) {
-		$(node).attr("src",$(node).attr("src").replace('hide','show'));
-		$(node).css('width',24);
-		$(node).css('height',24);
+		$(node).removeClass("drophide").addClass("drop");
 	}
 
 	function imgdull(node) {
-		$(node).attr("src",$(node).attr("src").replace('show','hide'));
-		$(node).css('width',16);
-		$(node).css('height',16);
+		$(node).removeClass("drop").addClass("drophide");
 	}
 
 	// Since our ajax calls are asynchronous, we will give a few 
diff --git a/view/contact_edit.tpl b/view/contact_edit.tpl
index 039c8d235..97134aedd 100644
--- a/view/contact_edit.tpl
+++ b/view/contact_edit.tpl
@@ -18,13 +18,13 @@
 	<div id="contact-edit-nav-wrapper" >
 
 		<div id="contact-edit-links" >
-			<a href="contacts/$contact_id/block" id="contact-edit-block-link" ><img src="images/b_block.gif" alt="$blockunblock" title="$block_text"/></a>
-			<a href="contacts/$contact_id/ignore" id="contact-edit-ignore-link" ><img src="images/no.gif" alt="$ignorecont" title="$ignore_text"/></a>
-			<a href="crepair/$contact_id" id="contact-edit-repair" ><img src="images/tools.png" alt="$altcrepair" title="$lblcrepair"/></a>
+			<a href="contacts/$contact_id/block" class="icon block" id="contact-edit-block-link" title="$block_text"></a>
+			<a href="contacts/$contact_id/ignore" class="icon no" id="contact-edit-ignore-link" title="$ignore_text"></a>
+			<a href="crepair/$contact_id" class="icon tools" id="contact-edit-repair" title="$lblcrepair"></a>
 
 		</div>
 		<div id="contact-drop-links" >
-			<a href="contacts/$contact_id/drop" id="contact-edit-drop-link" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);" /></a>
+			<a href="contacts/$contact_id/drop" class="icon drophide" id="contact-edit-drop-link" onclick="return confirmDelete();"  title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);"></a>
 		</div>
 		<div id="contact-edit-nav-end"></div>
 
diff --git a/view/contact_template.tpl b/view/contact_template.tpl
index 5b99f1be1..e9f616760 100644
--- a/view/contact_template.tpl
+++ b/view/contact_template.tpl
@@ -7,7 +7,7 @@
 			</div>
 			<div class="contact-entry-direction-end" ></div>
 			<div class="contact-entry-edit-links" >
-				<a href="contacts/$id" class="contact-entry-edit-link" ><img src="images/b_edit.gif" alt="$edit_hover" title="$edit_hover" /></a>
+				<a class="icon pencil" href="contacts/$id" class="contact-entry-edit-link" title="$edit_hover"></a>
 			</div>
 			<div class="contact-entry-edit-end"></div>
 		</div>
diff --git a/view/group_drop.tpl b/view/group_drop.tpl
index c87ea459f..bd9852b96 100644
--- a/view/group_drop.tpl
+++ b/view/group_drop.tpl
@@ -1 +1,10 @@
-<div class="group-delete-wrapper" id="group-delete-wrapper-$id" ><a href="group/drop/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="group-delete-icon-$id" class="group-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div><div class="group-delete-end"></div>
+<div class="group-delete-wrapper" id="group-delete-wrapper-$id" >
+	<a href="group/drop/$id" 
+		onclick="return confirmDelete();" 
+		title="$delete" 
+		id="group-delete-icon-$id" 
+		class="icon drophide group-delete-icon" 
+		onmouseover="imgbright(this);" 
+		onmouseout="imgdull(this);" ></a>
+</div>
+<div class="group-delete-end"></div>
diff --git a/view/jot-header.tpl b/view/jot-header.tpl
index 94f0f58f8..0fdd30209 100644
--- a/view/jot-header.tpl
+++ b/view/jot-header.tpl
@@ -74,11 +74,11 @@ tinyMCE.init({
 			var selstr;
 			$('#contact_allow option:selected, #contact_deny option:selected, #group_allow option:selected, #group_deny option:selected').each( function() {
 				selstr = $(this).text();
-				$('#profile-jot-perms img').attr('src', 'images/lock_icon.gif');
+				$('#jot-perms-icon').removeClass('unlock').addClass('lock');
 				$('.profile-jot-net input').attr('disabled', 'disabled');
 			});
 			if(selstr == null) { 
-				$('#profile-jot-perms img').attr('src', 'images/unlock_icon.gif');
+				$('#jot-perms-icon').removeClass('lock').addClass('unlock');
 				$('.profile-jot-net input').attr('disabled', false);
 			}
 
diff --git a/view/jot.tpl b/view/jot.tpl
index f5010301f..31f2eff04 100644
--- a/view/jot.tpl
+++ b/view/jot.tpl
@@ -21,28 +21,28 @@
 <div id="profile-jot-submit-wrapper" >
 <input type="submit" id="profile-jot-submit" name="submit" value="$share" />
 	<div id="profile-upload-wrapper" style="display: $visitor;" >
-		<div id="wall-image-upload-div" ><img id="wall-image-upload" src="images/camera-icon.gif" alt="$upload" title="$upload" /></div>
+		<div id="wall-image-upload-div" ><a href="#" onclick="return false;" id="wall-image-upload" class="icon camera" title="$upload"></a></div>
 	</div> 
 	<div id="profile-link-wrapper" style="display: $visitor;" ondragenter="linkdropper(event);" ondragover="linkdropper(event);" ondrop="linkdrop(event);" >
-		<img id="profile-link" src="images/link-icon.gif" alt="$weblink" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink();" />
+		<a id="profile-link" class="icon link" title="$weblink" ondragenter="return linkdropper(event);" ondragover="return linkdropper(event);" ondrop="linkdrop(event);" onclick="jotGetLink(); return false;"></a>
 	</div> 
 	<div id="profile-youtube-wrapper" style="display: $visitor;" >
-		<img id="profile-youtube" src="images/youtube_icon.gif" alt="$youtube" title="$youtube" onclick="jotGetVideo();" />
+		<a id="profile-youtube" class="icon youtube" title="$youtube" onclick="jotGetVideo();return false;"></a>
 	</div> 
 	<div id="profile-video-wrapper" style="display: $visitor;" >
-		<img id="profile-video" src="images/video.gif" alt="$video" title="$video" onclick="jotVideoURL();" />
+		<a id="profile-video" class="icon video" title="$video" onclick="jotVideoURL();return false;"></a>
 	</div> 
 	<div id="profile-audio-wrapper" style="display: $visitor;" >
-		<img id="profile-audio" src="images/audio.gif" alt="$audio" title="$audio" onclick="jotAudioURL();" />
+		<a id="profile-audio" class="icon audio" title="$audio" onclick="jotAudioURL();return false;"></a>
 	</div> 
 	<div id="profile-location-wrapper" style="display: $visitor;" >
-		<img id="profile-location" src="images/globe.gif" alt="$setloc" title="$setloc" onclick="jotGetLocation();" />
+		<a id="profile-location" class="icon globe" title="$setloc" onclick="jotGetLocation();return false;"></a>
 	</div> 
 	<div id="profile-nolocation-wrapper" style="display: none;" >
-		<img id="profile-nolocation" src="images/noglobe.gif" alt="$noloc" title="$noloc" onclick="jotClearLocation();" />
+		<a id="profile-nolocation" class="icon noglobe" title="$noloc" onclick="jotClearLocation();return false;"></a>
 	</div> 
 	<div id="profile-title-wrapper" style="display: $visitor;" >
-		<img id="profile-title" src="images/article.gif" alt="$title" title="$title" onclick="jotTitle();" />
+		<a id="profile-title" class="icon article" title="$title" onclick="jotTitle();return false;"></a>
 	</div> 
 
 	<div id="profile-jot-plugin-wrapper">
@@ -52,14 +52,16 @@
 	<div id="profile-rotator-wrapper" style="display: $visitor;" >
 		<img id="profile-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
 	</div> 
-	<div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" ><img id="jot-perms-icon" src="images/$lockstate_icon.gif"  alt="$permset" title="$permset" onClick="openClose('profile-jot-acl-wrapper'); openClose('profile-jot-email-wrapper'); openClose('profile-jot-networks');" />$bang</div>
+	<div id="profile-jot-perms" class="profile-jot-perms" style="display: $visitor;" >
+		<a id="jot-perms-icon" class="icon $lockstate"  title="$permset" onClick="openClose('profile-jot-acl-wrapper'); openClose('profile-jot-email-wrapper'); openClose('profile-jot-networks');return false;"></a>$bang
+	</div>
 	<div id="profile-jot-perms-end"></div>
 	<div id="profile-jot-email-wrapper" style="display: none;" >
-	<div id="profile-jot-email-label">$emailcc</div><input type="text" name="emailcc" id="profile-jot-email" title="$emtitle">
-	<div id="profile-jot-email-end"></div>
+		<div id="profile-jot-email-label">$emailcc</div><input type="text" name="emailcc" id="profile-jot-email" title="$emtitle">
+		<div id="profile-jot-email-end"></div>
 	</div>
 	<div id="profile-jot-networks" style="display: none;" >
-	$jotnets
+		$jotnets
 	</div>
 	<div id="profile-jot-networks-end"></div>
 	<div id="profile-jot-acl-wrapper" style="display: none;" >$acl</div>
diff --git a/view/like.tpl b/view/like.tpl
index 0a1c6bfe8..ce5af04ce 100644
--- a/view/like.tpl
+++ b/view/like.tpl
@@ -1,6 +1,6 @@
 <div class="wall-item-like-buttons" id="wall-item-like-buttons-$id">
-				<img src="images/like.gif" alt="$likethis" title="$likethis" onclick="dolike($id,'like');" />
-				<img src="images/dislike.gif" alt="$nolike" title="$nolike" onclick="dolike($id,'dislike');" />
-				<img src="images/recycle.gif" alt="$share" title="$share" class="wall-item-share-buttons" onclick="jotShare($id);" />
+				<a href="#" class="icon like"title="$likethis" onclick="dolike($id,'like'); return false"></a>
+				<a href="#" class="icon dislike" title="$nolike" onclick="dolike($id,'dislike'); return false"></a>
+				<a href="#" class="icon recycle wall-item-share-buttons" title="$share"onclick="jotShare($id); return false"></a>
 				<img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
 			</div>
diff --git a/view/like_noshare.tpl b/view/like_noshare.tpl
index e36a624a4..2c467c3c2 100644
--- a/view/like_noshare.tpl
+++ b/view/like_noshare.tpl
@@ -1,5 +1,5 @@
 <div class="wall-item-like-buttons" id="wall-item-like-buttons-$id">
-				<img src="images/like.gif" alt="$likethis" title="$likethis" onclick="dolike($id,'like');" />
-				<img src="images/dislike.gif" alt="$nolike" title="$nolike" onclick="dolike($id,'dislike');" />
+				<a href="#" class="icon like"title="$likethis" onclick="dolike($id,'like'); return false"></a>
+				<a href="#" class="icon dislike" title="$nolike" onclick="dolike($id,'dislike'); return false"></a>
 				<img id="like-rotator-$id" class="like-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
 			</div>
diff --git a/view/mail_list.tpl b/view/mail_list.tpl
index 1ef714f7a..8c8e78276 100644
--- a/view/mail_list.tpl
+++ b/view/mail_list.tpl
@@ -8,6 +8,9 @@
 		<div class="mail-list-subject"><a href="message/$id" class="mail-list-link">$subject</a></div>
 	</div>
 </div>
-<div class="mail-list-delete-wrapper" id="mail-list-delete-wrapper-$id" ><a href="message/dropconv/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="mail-list-delete-icon-$id" class="mail-list-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div><div class="mail-list-delete-end"></div>
+<div class="mail-list-delete-wrapper" id="mail-list-delete-wrapper-$id" >
+	<a href="message/dropconv/$id" onclick="return confirmDelete();"  title="$delete" class="icon drophide mail-list-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a>
+</div>
+<div class="mail-list-delete-end"></div>
 
 <div class="mail-list-outside-wrapper-end"></div>
diff --git a/view/prv_message.tpl b/view/prv_message.tpl
index cf6ff50ee..7c3894145 100644
--- a/view/prv_message.tpl
+++ b/view/prv_message.tpl
@@ -17,12 +17,12 @@ $select
 
 </div>
 <div id="prvmail-submit-wrapper" >
-<input type="submit" id="prvmail-submit" name="submit" value="Submit" />
+	<input type="submit" id="prvmail-submit" name="submit" value="Submit" />
 	<div id="prvmail-upload-wrapper" >
-		<div id="prvmail-upload-div" ><img id="prvmail-upload" src="images/camera-icon.gif" alt="$upload" title="$upload" /></div>
+		<div id="prvmail-upload"class="icon border camera" title="$upload" /></div>
 	</div> 
 	<div id="prvmail-link-wrapper" >
-		<img id="prvmail-link" src="images/link-icon.gif" alt="$insert" title="$insert" onclick="jotGetLink();" />
+		<div id="prvmail-link" class="icon border link" title="$insert" onclick="jotGetLink();" ></div>
 	</div> 
 	<div id="prvmail-rotator-wrapper" >
 		<img id="prvmail-rotator" src="images/rotator.gif" alt="$wait" title="$wait" style="display: none;" />
diff --git a/view/register.tpl b/view/register.tpl
index 131460828..ac8388de4 100644
--- a/view/register.tpl
+++ b/view/register.tpl
@@ -1,6 +1,6 @@
 <h3>$regtitle</h3>
 
-<form action="register" method="post" >
+<form action="register" method="post" id="register-form">
 
 	<input type="hidden" name="photo" value="$photo" />
 
diff --git a/view/theme/duepuntozero/style.css b/view/theme/duepuntozero/style.css
index 0e361ad46..beb89123b 100644
--- a/view/theme/duepuntozero/style.css
+++ b/view/theme/duepuntozero/style.css
@@ -224,6 +224,10 @@ div.wall-item-content-wrapper.shiny {
 	cursor: pointer;
 }
 
+#jot-perms-icon {
+	float: left;
+}
+
 .fakelink, .fakelink:visited, .fakelink:link {
 	color: #3465a4;
 	text-decoration: none;
@@ -2335,3 +2339,38 @@ a.mail-list-link {
 	float: left;
 	width: 300px;
 }
+
+/**
+ * ICONS
+ */
+.icon {
+	display: block; width: 16px; height: 16px;
+	background-image: url('../../../images/icons.png');
+}
+.article { background-position: 0px 0px;}
+.audio { background-position: -16px 0px;}
+.block { background-position: -32px 0px;}
+.drop { background-position: -48px 0px;}
+.drophide { background-position: -64px 0px;}
+.edit { background-position: -80px 0px;}
+.camera { background-position: -96px 0px;}
+.dislike { background-position: -112px 0px;}
+.like { background-position: -128px 0px;}
+.link { background-position: -144px 0px;}
+
+.globe { background-position: 0px -16px;}
+.noglobe { background-position: -16px -16px;}
+.no { background-position: -32px -16px;}
+.pause { background-position: -48px -16px;}
+.play { background-position: -64px -16px;}
+.pencil { background-position: -80px -16px;}
+.small-pencil { background-position: -96px -16px;}
+.recycle { background-position: -112px -16px;}
+.remote-link { background-position: -128px -16px;}
+.share { background-position: -144px -16px;}
+
+.tools { background-position: 0px -32px;}
+.lock { background-position: -16px -32px;}
+.unlock { background-position: -32px -32px;}
+.video { background-position: -48px -32px;}
+.youtube { background-position: -64px -32px;}
diff --git a/view/theme/loozah/style.css b/view/theme/loozah/style.css
index f4d31e93f..5d2f80622 100644
--- a/view/theme/loozah/style.css
+++ b/view/theme/loozah/style.css
@@ -120,6 +120,10 @@ blockquote:before {
 	cursor: pointer;
 }
 
+#jot-perms-icon {
+	float: left;
+}
+
 .fakelink, .fakelink:visited {
 	color: #15607B;
 	text-decoration: none;
@@ -2359,3 +2363,38 @@ a.mail-list-link {
 	float: left;
 	width: 300px;
 }
+
+/**
+ * ICONS
+ */
+.icon {
+	display: block; width: 16px; height: 16px;
+	background-image: url('../../../images/icons.png');
+}
+.article { background-position: 0px 0px;}
+.audio { background-position: -16px 0px;}
+.block { background-position: -32px 0px;}
+.drop { background-position: -48px 0px;}
+.drophide { background-position: -64px 0px;}
+.edit { background-position: -80px 0px;}
+.camera { background-position: -96px 0px;}
+.dislike { background-position: -112px 0px;}
+.like { background-position: -128px 0px;}
+.link { background-position: -144px 0px;}
+
+.globe { background-position: 0px -16px;}
+.noglobe { background-position: -16px -16px;}
+.no { background-position: -32px -16px;}
+.pause { background-position: -48px -16px;}
+.play { background-position: -64px -16px;}
+.pencil { background-position: -80px -16px;}
+.small-pencil { background-position: -96px -16px;}
+.recycle { background-position: -112px -16px;}
+.remote-link { background-position: -128px -16px;}
+.share { background-position: -144px -16px;}
+
+.tools { background-position: 0px -32px;}
+.lock { background-position: -16px -32px;}
+.unlock { background-position: -32px -32px;}
+.video { background-position: -48px -32px;}
+.youtube { background-position: -64px -32px;}
diff --git a/view/wall_item_drop.tpl b/view/wall_item_drop.tpl
index 9aa565f69..b4ea62b45 100644
--- a/view/wall_item_drop.tpl
+++ b/view/wall_item_drop.tpl
@@ -1,2 +1,4 @@
-<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-$id" ><a href="item/drop/$id" onclick="return confirmDelete();" ><img src="images/b_drophide.gif" alt="$delete" title="$delete" id="wall-item-delete-icon-$id" class="wall-item-delete-icon" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a></div>
-		<div class="wall-item-delete-end"></div>
+<div class="wall-item-delete-wrapper" id="wall-item-delete-wrapper-$id" >
+	<a href="item/drop/$id" onclick="return confirmDelete();" class="icon drophide" title="$delete" onmouseover="imgbright(this);" onmouseout="imgdull(this);" ></a>
+</div>
+<div class="wall-item-delete-end"></div>