profile editing and cover photo

2014-06-01 21:51:28 +02:00 · 2014-06-01 21:51:28 +02:00 · 0ab31ff1e3
commit 0ab31ff1e3
parent 13b8de40c7
15 changed files with 2206 additions and 1243 deletions
--- a/QvitterPlugin.php
+++ b/QvitterPlugin.php
@ -86,6 +86,8 @@ class QvitterPlugin extends Plugin {
 		$m->connect('api/qvitter/allfollowing/:id.json',
 					array('action' => 'apiqvitterallfollowing',
 						  'id' => Nickname::INPUT_FMT));							
+		$m->connect('api/qvitter/update_cover_photo.json',
+					array('action' => 'ApiUpdateCoverPhoto'));	
 		$m->connect('api/qvitter/statuses/friends_timeline.json',
 					array('action' => 'apiqvitterfriends'));	
 		$m->connect('api/qvitter/statuses/friends_timeline/:id.json',
@ -101,7 +103,6 @@ class QvitterPlugin extends Plugin {
        $m->connect('main/qlogin',
                    array('action' => 'qvitterlogin'));                    		
 		
-		
 		// check if we should reroute UI to qvitter
 		$logged_in_user = common_current_user();
 		$qvitter_enabled_by_user = false;
--- a/README.md
+++ b/README.md
@ -43,21 +43,21 @@ Extras
 1. There is a bug in GNUsocial that won't let you see groups' members lists. Replace your
 actions/apigroupmembership.php file with the one supplied to fix it.

-2. If you want notice headers to show which group a notice is posted in, replace your
-lib/apiaction.php file.
+2. If you want notice headers to show which group a notice is posted in, and if you want 
+cover photos to work, replace your lib/apiaction.php file.


 TODO
 ----

+1. "following you" badge on other peoples profiles
+
 1. Join _new_ external groups and follow _new_ external users ("New" meaning users/groups that the server don't know yet) 

 2. Creating groups, make admin, block user

 3. Background image uploading/editing

-4. Auto suggest mentions 
-
 6. Auto url-shortening setting under queet box

 7. Settings (e.g. don't show replies to people I don't follow)
--- a/actions/apiupdatecoverphoto.php
+++ b/actions/apiupdatecoverphoto.php
@ -0,0 +1,110 @@
+<?php
+ /* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+  ·                                                                             · 
+  ·  Update the cover photo                                                     ·
+  ·                                                                             ·         
+  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -   
+  ·                                                                             ·
+  ·                                                                             ·
+  ·                             Q V I T T E R                                   ·
+  ·                                                                             ·
+  ·              http://github.com/hannesmannerheim/qvitter                     ·
+  ·                                                                             ·
+  ·                                                                             ·
+  ·                                                                             ·
+  ·                                 <o)                                         ·
+  ·                                  /_////                                     ·
+  ·                                 (____/                                      ·
+  ·                                          (o<                                ·
+  ·                                   o> \\\\_\                                 ·
+  ·                                 \\)   \____)                                ·   
+  ·                                                                             ·
+  ·                                                                             ·  
+  ·  Qvitter is free  software:  you can  redistribute it  and / or  modify it  ·
+  ·  under the  terms of the GNU Affero General Public License as published by  ·
+  ·  the Free Software Foundation,  either version three of the License or (at  ·
+  ·  your option) any later version.                                            ·
+  ·                                                                             ·
+  ·  Qvitter is distributed  in hope that  it will be  useful but  WITHOUT ANY  ·
+  ·  WARRANTY;  without even the implied warranty of MERCHANTABILTY or FITNESS  ·
+  ·  FOR A PARTICULAR PURPOSE.  See the  GNU Affero General Public License for  ·
+  ·  more details.                                                              ·
+  ·                                                                             ·
+  ·  You should have received a copy of the  GNU Affero General Public License  ·
+  ·  along with Qvitter. If not, see <http://www.gnu.org/licenses/>.            ·
+  ·                                                                             ·
+  ·  Contact h@nnesmannerhe.im if you have any questions.                       ·
+  ·                                                                             · 
+  · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · */
+
+
+if (!defined('GNUSOCIAL')) {
+    exit(1);
+}
+
+class ApiUpdateCoverPhotoAction extends ApiAuthAction
+{
+    protected $needPost = true;
+
+    /**
+     * Take arguments for running
+     *
+     * @param array $args $_REQUEST args
+     *
+     * @return boolean success flag
+     */
+    protected function prepare(array $args=array())
+    {
+        parent::prepare($args);
+
+        $this->user = $this->auth_user;
+
+        $this->cropW = $this->trimmed('cropW');
+        $this->cropH = $this->trimmed('cropH');
+        $this->cropX = $this->trimmed('cropX');
+        $this->cropY = $this->trimmed('cropY');
+        $this->img   = $this->trimmed('img');        
+        
+        return true;
+    }
+
+    /**
+     * Handle the request
+     *
+     * @return void
+     */
+    protected function handle()
+    {
+        parent::handle();
+
+		$profile = $this->user->getProfile();
+		$base64img = $this->img;
+		if(stristr($base64img, 'image/jpeg')) {
+			$base64img_mime = 'image/jpeg';
+			}
+		elseif(stristr($base64img, 'image/png')) {
+			// should convert to jpg here!!
+			$base64img_mime = 'image/png';
+			}
+		$base64img = str_replace('data:image/jpeg;base64,', '', $base64img);
+		$base64img = str_replace('data:image/png;base64,', '', $base64img); 			 			
+		$base64img = str_replace(' ', '+', $base64img);
+		$base64img_hash = md5($base64img);
+		$base64img = base64_decode($base64img);
+		$base64img_basename = basename('cover');
+		$base64img_filename = File::filename($profile, $base64img_basename, $base64img_mime);
+		$base64img_path = File::path($base64img_filename);
+		$base64img_success = file_put_contents($base64img_path, $base64img);
+		$base64img_mimetype = MediaFile::getUploadedMimeType($base64img_path, $base64img_filename);
+		$mediafile = new MediaFile($profile, $base64img_filename, $base64img_mimetype);
+ 		$imagefile = new ImageFile($mediafile->fileRecord->id, File::path($mediafile->filename));
+  		$imagefile->resizeTo(File::path($mediafile->filename), $this->cropW, $this->cropH, $this->cropX, $this->cropY, $this->cropW, $this->cropH);			
+		$result['url'] = File::url($mediafile->filename);
+		
+		Profile_prefs::setData($profile, 'qvitter', 'cover_photo', $result['url']);			
+					
+        $this->initDocument('json');
+        $this->showJsonObjects($result);
+        $this->endDocument('json');		
+    }
+}
--- a/actions/qvitter.php
+++ b/actions/qvitter.php
@ -102,7 +102,7 @@ class QvitterAction extends ApiAction
 				<title><?php print $sitetitle; ?></title>
 				<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 				<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">		
-				<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/qvitter.css?v=15" />
+				<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/qvitter.css?v=16" />
 				<link rel="stylesheet" type="text/css" href="<?php print $qvitterpath; ?>css/jquery.minicolors.css" />		
 				<link rel="shortcut icon" type="image/x-icon" href="<?php print $qvitterpath; ?>favicon.ico?v=2">
 				<?php
@ -226,7 +226,6 @@ class QvitterAction extends ApiAction
 						<li class="language"><a class="language-link" title="Italian" data-lang-code="it">Italiano</a></li>													
 						<li class="language"><a class="language-link" title="Swedish" data-lang-code="sv">svenska</a></li>					
 					</ul>			
-					<div id="birds-top"></div>
 					<div class="global-nav">
 						<div class="global-nav-inner">
 							<div class="container">				
@ -358,11 +357,13 @@ class QvitterAction extends ApiAction
 				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery-ui-1.10.3.min.js"></script>
 				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.easing.1.3.js"></script>	    
 				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.minicolors.min.js"></script>	    	    
-				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/dom-functions.js?v=20"></script>		    	
-				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/misc-functions.js?v=14"></script>		    		    
-				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/ajax-functions.js?v=8"></script>		    		    	    
-				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lan.js?v=17"></script>	
-				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter.js?v=16"></script>		
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/jquery.jWindowCrop.js"></script>	
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lib/load-image.min.js"></script>	
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/dom-functions.js?v=21"></script>		    	
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/misc-functions.js?v=15"></script>		    		    
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/ajax-functions.js?v=9"></script>		    		    	    
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/lan.js?v=19"></script>	
+				<script type="text/javascript" src="<?php print $qvitterpath; ?>js/qvitter.js?v=17"></script>		
 			</body>
 		</html>

--- a/classes/apiqvitteraction.php
+++ b/classes/apiqvitteraction.php
@ -112,6 +112,7 @@ class ApiQvitterAction extends ApiAction
 			$simplified_statuses->u[$s['user']['id']][14] = $s['user']['following'];
 			$simplified_statuses->u[$s['user']['id']][15] = $s['user']['statusnet_blocking'];
 			$simplified_statuses->u[$s['user']['id']][16] = $s['user']['statusnet_profile_url'];
+			$simplified_statuses->u[$s['user']['id']][17] = $s['user']['cover_photo'];			
 			
        	if(isset($s['retweeted_status'])) {
 				$simplified_statuses->s[$i][13][0] = $s['retweeted_status']['id'];
@ -145,14 +146,11 @@ class ApiQvitterAction extends ApiAction
 				$simplified_statuses->u[$s['retweeted_status']['user']['id']][14] = $s['retweeted_status']['user']['following'];
 				$simplified_statuses->u[$s['retweeted_status']['user']['id']][15] = $s['retweeted_status']['user']['statusnet_blocking'];
 				$simplified_statuses->u[$s['retweeted_status']['user']['id']][16] = $s['retweeted_status']['user']['statusnet_profile_url'];				
+				$simplified_statuses->u[$s['retweeted_status']['user']['id']][17] = $s['retweeted_status']['user']['cover_photo'];								
        		}																		

        	$i++;
        }
-        
-// 		print_r($simplified_statuses);
-//        print_r($statuses);        
-//         

        $this->showJsonObjects($simplified_statuses);

--- a/css/qvitter.css
+++ b/css/qvitter.css
@ -35,6 +35,10 @@
 html {
    overflow-y: scroll;
 	}
+html.fixed {
+	position:fixed;
+	width:100%;
+	}

 a:active {
    outline: none;
@ -75,8 +79,9 @@ button.icon.nav-search,
 .follow-button .follow-text i,
 #birds-top,
 #logo,
-.topbar .global-nav {	
-	background-image: url("../img/sprite.png");	
+.topbar .global-nav,
+.upload-cover-photo {	
+	background-image: url("../img/sprite.png?v=2");	
 	background-size: 500px 1329px;
 	}
 	
@ -2563,7 +2568,8 @@ div.syntax-middle {
 button.signup-btn.disabled:hover,
 button.signup-btn.disabled:focus,
 button.signup-btn.disabled,
-.queet-toolbar button.disabled {	
+.queet-toolbar button.disabled,
+.save-profile-button.disabled {	
 	background-color: #DDDDDD;
    background-image: none;
    border-color: #CCCCCC;
@ -2696,15 +2702,18 @@ button.signup-btn.disabled,
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    width: 85%;        	
 	}
-.profile-header-inner .profile-card-inner h1.fullname {
+.profile-header-inner .profile-card-inner .fullname {
 	text-rendering: optimizelegibility;
 	font-weight: bold;
 	line-height: 1;
-    margin-bottom: 2px;
+    margin: 0 auto 2px auto;
    color: #FFFFFF;
    font-size: 24px;
    white-space: nowrap;
-    margin-top:0;
+    padding:0;
+    height:24px;
+    line-height:24px;    
+	display:block;	
 	}
 .profile-header-inner .profile-card-inner h1.fullname span {	
    font-size: 24px;
@ -2723,7 +2732,8 @@ button.signup-btn.disabled,
 .profile-header-inner .profile-card-inner h2.username a {
 	color:#fff;	
 	}	
-.profile-header-inner .profile-card-inner .bio-container {
+.profile-header-inner .profile-card-inner .bio-container,
+.profile-header-inner .profile-card-inner .bio-container textarea {
    line-height: 18px;
    margin-bottom: 4px;
    font-size: 14px;	
@ -2732,7 +2742,8 @@ button.signup-btn.disabled,
 	color: #FFFFFF;
 	margin:0;
 	}
-.profile-header-inner .profile-card-inner .location-and-url	{
+.profile-header-inner .profile-card-inner .location-and-url,
+.profile-header-inner .profile-card-inner .location-and-url input {
 	font-size: 14px;	
 	color: #FFFFFF;	
 	line-height: 18px;	
@ -2783,7 +2794,10 @@ div.clearfix {
 .member-button,
 .external-member-button,
 .external-follow-button,
-.follow-button {
+.follow-button,
+.edit-profile-button,
+.save-profile-button,
+.abort-edit-profile-button {
 	font-family: "Helvetica Neue",Arial,sans-serif;	
    margin: 0;
    position: relative;
@ -2810,7 +2824,9 @@ div.clearfix {
 .external-member-button.disabled,
 .member-button.disabled,
 .external-follow-button.disabled,
-.follow-button.disabled {
+.follow-button.disabled,
+.edit-profile-button.disabled,
+.save-profile-button.disabled {
 	color:#ccc;
 	}
 .external-member-button.disabled i,
@ -2822,7 +2838,9 @@ div.clearfix {
 .external-member-button:not(.disabled):not(.member):hover,
 .member-button:not(.disabled):not(.member):hover,
 .external-follow-button:not(.disabled):not(.following):hover,
-.follow-button:not(.disabled):not(.following):hover {	
+.follow-button:not(.disabled):not(.following):hover,
+.edit-profile-button:hover,
+.abort-edit-profile-button:hover {	
    background-color: #D8D8D8;
 	background: -moz-linear-gradient(top, rgba(248,248,248,1) 0%, rgba(216,216,216,1) 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,248,248,1)), color-stop(100%,rgba(216,216,216,1)));
@ -2845,7 +2863,10 @@ div.clearfix {
 .external-member-button .button-text,
 .member-button .button-text,
 .external-follow-button .button-text,
-.follow-button .button-text {
+.follow-button .button-text,
+.edit-profile-button .button-text,
+.save-profile-button .button-text,
+.abort-edit-profile-button .button-text {
 	display:none;
    font-family: "Helvetica Neue",Arial,sans-serif;	
    min-width: 70px;
@ -2874,7 +2895,8 @@ div.clearfix {
 	}	
 .member-button.member,
 .external-follow-button.following,
-.follow-button.following {
+.follow-button.following,
+.save-profile-button {
    background-color: #019AD2;
 	background: -moz-linear-gradient(top, rgba(51,188,239,1) 0%, rgba(1,154,210,1) 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(51,188,239,1)), color-stop(100%,rgba(1,154,210,1)));
@ -2888,9 +2910,13 @@ div.clearfix {
    color: #FFFFFF;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);	
 	}	
+.save-profile-button {
+	margin-left:10px;
+	}	
 .member-button.member:hover,
 .external-follow-button.following:hover,
-.follow-button.following:hover {
+.follow-button.following:hover,
+.save-profile-button:not(.disabled):hover {
    background-color: #c43c35;
 	background: -moz-linear-gradient(top, rgba(238,95,91,1) 0%, rgba(196,60,53,1) 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,95,91,1)), color-stop(100%,rgba(196,60,53,1)));
@ -2904,7 +2930,10 @@ div.clearfix {
 .external-member-button .join-text,
 .member-button .join-text,
 .external-follow-button .follow-text,
-.follow-button .follow-text {
+.follow-button .follow-text,
+.edit-profile-button .edit-profile-text,
+.save-profile-button .edit-profile-text,
+.abort-edit-profile-button .edit-profile-text {
 	display:block;
 	}	
 .member-button.member .join-text,
@ -3263,8 +3292,106 @@ body.rtl .modal-footer button {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) inset, 0 0 8px rgba(82, 168, 236, 0.6);	
    }

+
+/* edit profile
+------------------------- */
+.edit-profile-container {
+    margin: 53px auto 0 auto;
+    width: 837px;		
+    background:green;
+	text-align: right;    
+	position:relative;
+	}
+.edit-profile-container .profile-header-inner .profile-header-inner-overlay {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.65) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
+    height: 260px;
+    top: 0;	
+    }
+.edit-profile-container .profile-card {
+	float:none;
+	position:absolute;
+	right:0;
+	}
+.profile-header-inner input,
+.profile-header-inner textarea {
+	background:rgba(0,0,0,0.4);
+	border:0 none;
+	text-align:center;
+	width:84%;
+	font-family: "Helvetica Neue",Arial,sans-serif;	
+	}		
+.profile-header-inner input:focus,
+.profile-header-inner textarea:focus {
+	outline: none;	
+	}
+.profile-header-inner input.invalid,
+.profile-header-inner textarea.invalid {
+	background:rgba(217,91,9,0.4);	
+	}	
+.profile-header-inner textarea {
+	height:50px;
+	color:#fff;
+	resize: none;
+	}	
+.profile-header-inner input.location {
+	width:40%;
+	text-align:right;
+	padding-right:5px;
+	}	
+.profile-header-inner input.url {
+	width:40%;
+	text-align:left;
+	padding-left:5px;	
+	}		
+
+.upload-cover-photo {
+	background-position: -245px -45px;
+	width:35px;
+	height:35px;
+	position:absolute;
+	right:5px;
+	top:5px;
+	z-index:1000;
+	cursor:pointer;
+	}
+.upload-cover-photo:hover {
+	background-position: -245px -85px;
+	}	
+input#cover-photo-input {
+	display:none;
+	}
 	
-	
+/* jWindowCrop defaults */
+.jwc_frame {
+} .jwc_image {
+cursor:move;
+} .jwc_controls {
+background-color:#000;
+width:100%; height:26px;
+opacity:0.6; filter:alpha(opacity=6);
+position:absolute; z-index:100; bottom:0px; left:0px;
+} .jwc_controls span {
+display:block; float:left;
+color:#FFF; font-size:11px;
+margin:7px 0px 0px 5px;
+} .jwc_zoom_in, .jwc_zoom_out {
+display:block; background-color:#FFF;
+cursor:pointer;
+border-radius:100px;
+width:18px; height:18px;
+float:right; margin:4px 4px 0px 0px;
+text-decoration:none; text-align:center;
+font-size:16px; font-weight:bold; color:#000;
+} .jwc_zoom_in::after {
+content:"+";
+} .jwc_zoom_out::after {
+content:"-";
+}
+/* end jWindowCrop defaults */
+
+.jwc_frame{
+	z-index:100;
+	}
 	
 /* RTL 
 --------- */
@ -3580,7 +3707,7 @@ body.rtl #feed-header-inner h2  {
 		}

 	#search-query {
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		background-position: -100px -804px;
 		border: 0 none;
@ -3639,7 +3766,7 @@ body.rtl #feed-header-inner h2  {


 	#top-compose {
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		background-position: -55px -800px;
 		cursor: pointer;
@ -3820,7 +3947,7 @@ body.rtl #feed-header-inner h2  {
 		display:none;
 		}		
 	.nav-session {
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		background-position: 0 -800px;
 		height: 49px;
@ -3883,7 +4010,7 @@ body.rtl #feed-header-inner h2  {
 		padding:0;
 		margin:0;
 		border-radius:0 0 0 0 !important;
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		background-position: center -1003px;		
 		}
@ -3917,7 +4044,7 @@ body.rtl #feed-header-inner h2  {
 		margin-left: -35px; 
 		width: 70px; 
 		height: 55px;
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		background-color:#ccc;
 		}
@ -3946,6 +4073,10 @@ body.rtl #feed-header-inner h2  {
 		border-bottom:1px solid #E8E8E8;
 		border-radius:0 0 0 0;
 		}
+	.edit-profile-container {
+		width:100%;
+		margin-top:108px;
+		}
 	.profile-card ul.stats {
 		width:100%;
 		border-bottom:1px solid #E8E8E8;
@ -4063,7 +4194,7 @@ body.rtl #feed-header-inner h2  {
 	ul.queet-actions li .icon.sm-rt,	
 	ul.queet-actions li .icon.sm-trash,		
 	ul.queet-actions li .icon.sm-reply {	
-		background-image: url("../img/sprite.png");
+		background-image: url("../img/sprite.png?v=2");
 		background-size: 500px 1329px;
 		width:35px;
 		height:35px;
--- a/edited-gnu-social-files/lib/apiaction.php
+++ b/edited-gnu-social-files/lib/apiaction.php
@ -231,6 +231,7 @@ class ApiAction extends Action
        foreach (array('linkcolor', 'backgroundcolor') as $key) {
            $twitter_user[$key] = Profile_prefs::getConfigData($profile, 'theme', $key);
        }
+        $twitter_user['cover_photo'] = Profile_prefs::getConfigData($profile, 'qvitter', 'cover_photo');        
        // END introduced by qvitter API, not necessary for StatusNet API

        $twitter_user['url'] = ($profile->homepage) ? $profile->homepage : null;
--- a/img/sprite.png
+++ b/img/sprite.png
--- a/img/sprite.png.ai
+++ b/img/sprite.png.ai
--- a/js/dom-functions.js
+++ b/js/dom-functions.js
@ -154,19 +154,12 @@ function profileCardFromFirstObject(data,screen_name) {
 	
 	if(typeof first.user != 'undefined') {

-		// we don't want to print 'null'
-		first.user.name = first.user.name || '';
-		first.user.profile_image_url = first.user.profile_image_url || '';
-		first.user.profile_image_url_profile_size = first.user.profile_image_url_profile_size || '';
-		first.user.profile_image_url_original = first.user.profile_image_url_original || '';						
-		first.user.screen_name = first.user.screen_name || '';						
-		first.user.description = first.user.description || '';
-		first.user.location = first.user.location || '';
-		first.user.url = first.user.url || '';
-		first.user.statusnet_profile_url = first.user.statusnet_profile_url || '';
-		first.user.statuses_count = first.user.statuses_count || 0;
-		first.user.followers_count = first.user.followers_count || 0;
-		first.user.friends_count = first.user.friends_count || 0;
+		first.user = cleanUpUserObject(first.user);
+		
+		// use avatar if no cover photo
+		if(first.user.cover_photo === false) {
+			first.user.cover_photo = first.user.profile_image_url_original;
+			}
 		
 		// show user actions if logged in
 		var followingClass = '';
@ -183,6 +176,11 @@ function profileCardFromFirstObject(data,screen_name) {
 			var followButton = '<div class="user-actions"><button type="button" class="external-follow-button ' + followingClass + '"><span class="button-text follow-text"><i class="follow"></i>' + window.sL.userExternalFollow + '</span></button></div>';	
 			}
 		
+		// edit profile button if me
+		if(typeof window.loggedIn.screen_name != 'undefined' && window.myUserID == first.user.id) {			
+			var followButton = '<div class="user-actions"><button type="button" class="edit-profile-button"><span class="button-text edit-profile-text">' + window.sL.editMyProfile + '</span></button></div>';	
+			}		
+		
 			
 		// change design
 		changeDesign(first.user);			
@ -191,26 +189,19 @@ function profileCardFromFirstObject(data,screen_name) {
 		$('#feed').siblings('.profile-card').remove();

 		// insert profile card into dom
-		$('#feed').before('<div class="profile-card"><div class="profile-header-inner" style="background-image:url(' + first.user.profile_image_url_original + ')"><div class="profile-header-inner-overlay"></div><a class="profile-picture" href="' + first.user.profile_image_url_original + '"><img src="' + first.user.profile_image_url_profile_size + '" /></a><div class="profile-card-inner"><h1 class="fullname">' + first.user.name + '<span></span></h1><h2 class="username"><span class="screen-name">@' + first.user.screen_name + '</span><span class="follow-status"></span></h2><div class="bio-container"><p>' + first.user.description + '</p></div><p class="location-and-url"><span class="location">' + first.user.location + '</span><span class="divider"> · </span><span class="url"><a href="' + first.user.url + '">' + first.user.url.replace('http://','').replace('https://','') + '</a></span></p></div></div><div class="profile-banner-footer"><ul class="stats"><li><a class="tweet-stats"><strong>' + first.user.statuses_count + '</strong>' + window.sL.notices + '</a></li><li><a class="following-stats"><strong>' + first.user.friends_count + '</strong>' + window.sL.following + '</a></li><li><a class="follower-stats"><strong>' + first.user.followers_count + '</strong>' + window.sL.followers + '</a></li><li><a class="groups-stats"><strong>' + first.user.groups_count + '</strong>' + window.sL.groups + '</a></li></ul>' + followButton + '<div class="clearfix"></div></div></div>');		
+		$('#feed').before('<div class="profile-card"><div class="profile-header-inner" style="background-image:url(' + first.user.cover_photo + ')"><div class="profile-header-inner-overlay"></div><a class="profile-picture" href="' + first.user.profile_image_url_original + '"><img src="' + first.user.profile_image_url_profile_size + '" /></a><div class="profile-card-inner"><h1 class="fullname">' + first.user.name + '<span></span></h1><h2 class="username"><span class="screen-name">@' + first.user.screen_name + '</span><span class="follow-status"></span></h2><div class="bio-container"><p>' + first.user.description + '</p></div><p class="location-and-url"><span class="location">' + first.user.location + '</span><span class="divider"> · </span><span class="url"><a href="' + first.user.url + '">' + first.user.url.replace('http://','').replace('https://','') + '</a></span></p></div></div><div class="profile-banner-footer"><ul class="stats"><li><a class="tweet-stats"><strong>' + first.user.statuses_count + '</strong>' + window.sL.notices + '</a></li><li><a class="following-stats"><strong>' + first.user.friends_count + '</strong>' + window.sL.following + '</a></li><li><a class="follower-stats"><strong>' + first.user.followers_count + '</strong>' + window.sL.followers + '</a></li><li><a class="groups-stats"><strong>' + first.user.groups_count + '</strong>' + window.sL.groups + '</a></li></ul>' + followButton + '<div class="clearfix"></div></div></div>');		
 		}
 	
 	// if user hasn't queeted or if we're not allowed to read their queets
 	else {
 		getFromAPI('users/show/' + screen_name + '.json', function(data){ if(data){
-			data.name = data.name || '';
-			data.profile_image_url = data.profile_image_url || '';
-			data.profile_image_url_profile_size = data.profile_image_url_profile_size || '';
-			data.profile_image_url_original = data.profile_image_url_original || '';						
-			data.screen_name = data.screen_name || '';						
-			data.description = data.description || '';
-			data.location = data.location || '';
-			data.url = data.url || '';
-			data.statusnet_profile_url = data.statusnet_profile_url || '';
-			data.statuses_count = data.statuses_count || 0;
-			data.followers_count = data.followers_count || 0;
-			data.groups_count = data.groups_count || 0;			
-			data.friends_count = data.friends_count || 0;
+			data = cleanUpUserObject(data);
 			
+			// use avatar if no cover photo
+			if(data.cover_photo === false) {
+				data.cover_photo = data.profile_image_url_original;
+				}
+
 			// show user actions if logged in
 			var followingClass = '';
 			if(data.following) {
@ -221,12 +212,23 @@ function profileCardFromFirstObject(data,screen_name) {
 				var followButton = '<div class="user-actions"><button data-follow-user-id="' + data.id + '" data-follow-user="' + data.statusnet_profile_url + '" type="button" class="follow-button ' + followingClass + '"><span class="button-text follow-text"><i class="follow"></i>' + window.sL.userFollow + '</span><span class="button-text following-text">' + window.sL.userFollowing + '</span><span class="button-text unfollow-text">' + window.sL.userUnfollow + '</span></button></div>';	
 				}
 				
+			// follow from external instance if logged out
+			if(typeof window.loggedIn.screen_name == 'undefined') {			
+				var followButton = '<div class="user-actions"><button type="button" class="external-follow-button ' + followingClass + '"><span class="button-text follow-text"><i class="follow"></i>' + window.sL.userExternalFollow + '</span></button></div>';	
+				}
+		
+			// edit profile button if me
+			if(typeof window.loggedIn.screen_name != 'undefined' && window.myUserID == data.id) {			
+				var followButton = '<div class="user-actions"><button type="button" class="edit-profile-button"><span class="button-text edit-profile-text">' + window.sL.editMyProfile + '</span></button></div>';	
+				}						
+				
+				
 			// change design
 			changeDesign(data);

 			// remove any old profile card and show profile card
 			$('#feed').siblings('.profile-card').remove();
-			$('#feed').before('<div class="profile-card"><div class="profile-header-inner" style="background-image:url(' + data.profile_image_url_original + ')"><div class="profile-header-inner-overlay"></div><a class="profile-picture" href="' + data.profile_image_url_original + '"><img src="' + data.profile_image_url_profile_size + '" /></a><div class="profile-card-inner"><h1 class="fullname">' + data.name + '<span></span></h1><h2 class="username"><span class="screen-name">@' + data.screen_name + '</span><span class="follow-status"></span></h2><div class="bio-container"><p>' + data.description + '</p></div><p class="location-and-url"><span class="location">' + data.location + '</span><span class="divider"> · </span><span class="url"><a href="' + data.url + '">' + data.url.replace('http://','').replace('https://','') + '</a></span></p></div></div><div class="profile-banner-footer"><ul class="stats"><li><a class="tweet-stats"><strong>' + data.statuses_count + '</strong>' + window.sL.notices + '</a></li><li><a class="following-stats"><strong>' + data.friends_count + '</strong>' + window.sL.following + '</a></li><li><a class="follower-stats"><strong>' + data.followers_count + '</strong>' + window.sL.followers + '</a></li><li><a class="groups-stats"><strong>' + data.groups_count + '</strong>' + window.sL.groups + '</a></li></ul>' + followButton + '<div class="clearfix"></div></div></div>');		
+			$('#feed').before('<div class="profile-card"><div class="profile-header-inner" style="background-image:url(' + data.cover_photo + ')"><div class="profile-header-inner-overlay"></div><a class="profile-picture" href="' + data.profile_image_url_original + '"><img src="' + data.profile_image_url_profile_size + '" /></a><div class="profile-card-inner"><h1 class="fullname">' + data.name + '<span></span></h1><h2 class="username"><span class="screen-name">@' + data.screen_name + '</span><span class="follow-status"></span></h2><div class="bio-container"><p>' + data.description + '</p></div><p class="location-and-url"><span class="location">' + data.location + '</span><span class="divider"> · </span><span class="url"><a href="' + data.url + '">' + data.url.replace('http://','').replace('https://','') + '</a></span></p></div></div><div class="profile-banner-footer"><ul class="stats"><li><a class="tweet-stats"><strong>' + data.statuses_count + '</strong>' + window.sL.notices + '</a></li><li><a class="following-stats"><strong>' + data.friends_count + '</strong>' + window.sL.following + '</a></li><li><a class="follower-stats"><strong>' + data.followers_count + '</strong>' + window.sL.followers + '</a></li><li><a class="groups-stats"><strong>' + data.groups_count + '</strong>' + window.sL.groups + '</a></li></ul>' + followButton + '<div class="clearfix"></div></div></div>');		
 			}});		
 		}		
 	}
--- a/js/lan.js
+++ b/js/lan.js
@ -145,12 +145,14 @@ window.l.es.registerLocation        = 'Ubicación';
 window.l.es.registerRepeatPassword  = 'Verificar contraseña';
 window.l.es.moreSettings            = 'Más configuraciones';
 window.l.es.otherServers            = 'De manera alternativa, puedes crear una cuenta en otro servidor de la red GNUsocial. <a href="http://federation.skilledtests.com/select_your_server.html">Comparativa</a>';
+window.l.es.editMyProfile           = 'Editar perfil';
+


 // galician
 window.l.gl = new Object();
 window.l.gl.languageName = 'Galego';
-window.l.gl.loginUsername = 'Nome de usuario o mail';
+window.l.gl.loginUsername = 'Nome de usuario ou mail';
 window.l.gl.loginPassword = 'Clave';
 window.l.gl.loginSignIn = 'Entre';
 window.l.gl.loginRememberMe = 'lembrarme';
@ -162,7 +164,7 @@ window.l.gl.groups = 'Grupos';
 window.l.gl.compose = 'Novo Queet';
 window.l.gl.queetVerb = 'Queet';
 window.l.gl.queetsNounPlural = 'Queets';
-window.l.gl.logout = 'Salir';
+window.l.gl.logout = 'Saír';
 window.l.gl.languageSelected = 'Linguaxe:';
 window.l.gl.viewMyProfilePage = 'Ver o meu perfil';
 window.l.gl.expand = 'Abrir';
@ -187,8 +189,8 @@ window.l.gl.longmonthsFebruary = 'febreiro';
 window.l.gl.longmonthsMars = 'marzo';
 window.l.gl.longmonthsApril = 'abril';
 window.l.gl.longmonthsMay = 'maio';
-window.l.gl.longmonthsJune = 'xunio';
-window.l.gl.longmonthsJuly = 'xulio';
+window.l.gl.longmonthsJune = 'xuño';
+window.l.gl.longmonthsJuly = 'xullo ';
 window.l.gl.longmonthsAugust = 'agosto';
 window.l.gl.longmonthsSeptember = 'setembro';
 window.l.gl.longmonthsOctober = 'outubro';
@ -199,13 +201,13 @@ window.l.gl.shortmonthsFebruary = 'feb';
 window.l.gl.shortmonthsMars = 'marzo';
 window.l.gl.shortmonthsApril = 'abr';
 window.l.gl.shortmonthsMay = 'maio';
-window.l.gl.shortmonthsJune = 'xun';
-window.l.gl.shortmonthsJuly = 'jul';
+window.l.gl.shortmonthsJune = 'xuñ ';
+window.l.gl.shortmonthsJuly = 'xull ';
 window.l.gl.shortmonthsAugust = 'agosto';
 window.l.gl.shortmonthsSeptember = 'set';
 window.l.gl.shortmonthsOctober = 'out';
 window.l.gl.shortmonthsNovember = 'nov';
-window.l.gl.shortmonthsDecember = 'dic';
+window.l.gl.shortmonthsDecember = 'dec ';
 window.l.gl.time12am = '{time} AM';
 window.l.gl.time12pm = '{time} PM';
 window.l.gl.longDateFormat = '{time24} - {day} {month} {year}';
@ -217,11 +219,11 @@ window.l.gl.shortDateFormatDateAndY = '{day} {month} {year}';
 window.l.gl.now = 'agora';
 window.l.gl.posting = 'enviando';
 window.l.gl.viewMoreInConvBefore = '←  Ver máis na conversación';
-window.l.gl.viewMoreInConvAfter = 'Ver más en la conversación →';
+window.l.gl.viewMoreInConvAfter = 'Ver máis na conversación →  ';
 window.l.gl.mentions = 'Menciones';
 window.l.gl.timeline = 'Líña temporal';
 window.l.gl.publicTimeline = 'Líña temporal pública';
-window.l.gl.publicAndExtTimeline    = 'Toda a rede coñecida';
+window.l.gl.publicAndExtTimeline = 'Toda a rede coñecida';
 window.l.gl.searchVerb = 'Buscar';
 window.l.gl.deleteVerb = 'Eliminar';
 window.l.gl.cancelVerb = 'Cancelar';
@ -229,8 +231,8 @@ window.l.gl.deleteConfirmation = 'Estás seguro de que queres eliminar este quee
 window.l.gl.userExternalFollow = 'Seguir';
 window.l.gl.userExternalFollowHelp = 'Identificador da súa conta (p.e. user@rainbowdash.net).';
 window.l.gl.userFollow = 'Seguir';
-window.l.gl.userFollowing = 'Sigendo';
-window.l.gl.userUnfollow = 'Dejar de seguir';
+window.l.gl.userFollowing = 'Seguindo';
+window.l.gl.userUnfollow = 'Deixar de seguir  ';
 window.l.gl.joinGroup = 'Unirse ao grupo';
 window.l.gl.joinExternalGroup = 'Unirse ao grupo ';
 window.l.gl.isMemberOfGroup = 'Membro';
@ -241,7 +243,7 @@ window.l.gl.settings = 'Configuración';
 window.l.gl.saveChanges = 'Gardar cambios';
 window.l.gl.linkColor = 'Cor do enlace';
 window.l.gl.backgroundColor = 'Cor de fondo';
-window.l.gl.newToQuitter = 'Eres n ovo en Quitter?';
+window.l.gl.newToQuitter = 'Eres novo en Quitter? ';
 window.l.gl.signUp = 'Rexístrate';
 window.l.gl.signUpFullName = 'Nome completo';
 window.l.gl.signUpEmail = 'Correo electrónico';
@ -255,6 +257,8 @@ window.l.gl.registerLocation = 'Ubicación';
 window.l.gl.registerRepeatPassword = 'Verificar contrasinal';
 window.l.gl.moreSettings = 'máis opcións';
 window.l.gl.otherServers = 'De maneira alternativa, podes crear unha conta noutro servidor da rede GNUsocial. <a href="http://federation.skilledtests.com/select_your_server.html">Comparativa</a>';
+window.l.gl.editMyProfile = 'Editar o perfil';
+


 // french
@ -365,6 +369,7 @@ window.l.fr.registerLocation        = 'Localisation';
 window.l.fr.registerRepeatPassword  = 'Vérifiez votre mot de passe';
 window.l.fr.moreSettings            = 'Plus de paramètres';
 window.l.fr.otherServers            = '';
+window.l.fr.editMyProfile           = 'Éditer le profil';


 // deutsch
@ -487,6 +492,7 @@ window.l.de.registerLocation        = 'Standort';
 window.l.de.registerRepeatPassword  = 'Passwort bestätigen';
 window.l.de.moreSettings            = 'Weitere Einstellungen';
 window.l.de.otherServers            = 'Du kannst Dir auch gerne ein Konto auf einem anderen Server des GNUsocial-Netzwerks einrichten. <a href="http://federation.skilledtests.com/select_your_server.html">Übersicht</a>';
+window.l.de.editMyProfile           = 'Profil bearbeiten';


 // english
@ -605,7 +611,7 @@ window.l.en.registerLocation        = 'Location';
 window.l.en.registerRepeatPassword  = 'Repeat password';
 window.l.en.moreSettings            = 'More settings';
 window.l.en.otherServers            = 'Alternatively you can create an account on another server of the GNU social network. <a href="http://federation.skilledtests.com/select_your_server.html">Comparison</a>';
-
+window.l.en.editMyProfile           = 'Edit profile';

 // simplified chinese
 window.l.zh_cn = new Object();
@ -715,7 +721,7 @@ window.l.zh_cn.registerLocation        = '地点';
 window.l.zh_cn.registerRepeatPassword  = '重复密码';
 window.l.zh_cn.moreSettings            = '更多的设置';
 window.l.zh_cn.otherServers            = '其他服务器: <a href="http://federation.skilledtests.com/select_your_server.html">对照</a>';
-
+window.l.zh_cn.editMyProfile           = '编辑个人资料';

 // traditional chinese
 window.l.zh_tw = new Object();
@ -825,7 +831,7 @@ window.l.zh_tw.registerLocation        = '地點';
 window.l.zh_tw.registerRepeatPassword  = '重複密碼';
 window.l.zh_tw.moreSettings            = '更多的設置';
 window.l.zh_tw.otherServers            = '其他服務器: <a href="http://federation.skilledtests.com/select_your_server.html">對照</a>';
-
+window.l.zh_tw.editMyProfile     	   = '編輯個人檔案';

 // svenska
 window.l.sv = new Object();
@ -935,7 +941,7 @@ window.l.sv.registerLocation        = 'Plats';
 window.l.sv.registerRepeatPassword  = 'Upprepa lösenord';
 window.l.sv.moreSettings            = 'Fler inställningar';
 window.l.sv.otherServers            = 'Men du kan lika gärna skapa ett konto på en annan server som är del av GNU social-nätverket. <a href="http://federation.skilledtests.com/select_your_server.html">Här är en jämförelse.</a>';
-
+window.l.sv.editMyProfile     	    = 'Redigera profil';


 // farsi/persian
@ -1046,7 +1052,7 @@ window.l.fa.registerLocation        = 'مکان';
 window.l.fa.registerRepeatPassword  = 'تایید گذرواژه';
 window.l.fa.moreSettings            = 'تنظیمات بیشتر';
 window.l.fa.otherServers            = '';
-
+window.l.fa.editMyProfile     	    = 'ویرایش نمایه';

 // arabic
 window.l.ar = new Object();
@ -1156,7 +1162,7 @@ window.l.ar.registerLocation        = 'الموقع الجغرافي';
 window.l.ar.registerRepeatPassword  = 'تأكيد كلمة المرور';
 window.l.ar.moreSettings            = 'مزيد من الإعدادات';
 window.l.ar.otherServers            = '';
-
+window.l.ar.editMyProfile     	    = 'تعديل الملف الشخصي';

 // esperanto
 window.l.eo = new Object();
@ -1275,6 +1281,7 @@ window.l.eo.registerLocation        = 'Loko';
 window.l.eo.registerRepeatPassword  = 'Ripeti pasvorton';
 window.l.eo.moreSettings            = 'Pli agordoj';
 window.l.eo.otherServers            = '';
+window.l.eo.editMyProfile     	    = 'Redaktu profilon';


 // italian
@ -1394,6 +1401,8 @@ window.l.it.registerLocation = 'Posizione';
 window.l.it.registerRepeatPassword = 'Ripetere la password';
 window.l.it.moreSettings = 'Altre opzioni';
 window.l.it.otherServers = 'In alternativa puoi creare un account su un altro server della rete GNU Social. <a href="http://federation.skilledtests.com/select_your_server.html">Confronto</a>';
+window.l.it.editMyProfile = 'Modifica profilo';
+


 // set language, from local storage, else browser language, else english (english also if no localstorage availible)
--- a/js/lib/jquery.jWindowCrop.js
+++ b/js/lib/jquery.jWindowCrop.js
@ -0,0 +1,179 @@
+/*
+ * jWindowCrop v1.0.0
+ *
+ * Copyright (c) 2012 Tyler Brown
+ * Licensed under the MIT license.
+ *
+ */
+
+(function($){
+	function fillContainer(val, targetLength, containerLength) { // ensure that no gaps are between target's edges and container's edges
+		if(val + targetLength < containerLength) val = containerLength-targetLength;
+		if(val > 0) val = 0;
+		return val;
+	}
+
+	$.jWindowCrop = function(image, options){
+		var base = this;
+		base.$image = $(image); // target image jquery element
+		base.image = image; // target image dom element
+		base.$image.data("jWindowCrop", base); // target frame jquery element
+
+		base.namespace = 'jWindowCrop';
+		base.originalWidth = 0;
+		base.isDragging = false;
+		
+		base.init = function(){
+			base.$image.css({display:'none'}); // hide image until loaded
+			base.options = $.extend({},$.jWindowCrop.defaultOptions, options);
+			if(base.options.zoomSteps < 2) base.options.zoomSteps = 2;
+
+			base.$image.addClass('jwc_image').wrap('<div class="jwc_frame" />'); // wrap image in frame
+			base.$frame = base.$image.parent();
+			base.$frame.append('<div class="jwc_loader">' + base.options.loadingText + '</div>');
+			base.$frame.append('<div class="jwc_controls" style="display:'+(base.options.showControlsOnStart ? 'block' : 'none')+';"><span>click to drag</span><a href="#" class="jwc_zoom_in"></a><a href="#" class="jwc_zoom_out"></a></div>');
+			base.$frame.css({'overflow': 'hidden', 'position': 'relative', 'width': base.options.targetWidth, 'height': base.options.targetHeight});
+			base.$image.css({'position': 'absolute', 'top': '0px', 'left': '0px'});
+			initializeDimensions();
+
+			base.$frame.find('.jwc_zoom_in').on('click.'+base.namespace, base.zoomIn);
+			base.$frame.find('.jwc_zoom_out').on('click.'+base.namespace, base.zoomOut);
+			base.$frame.on('mouseenter.'+base.namespace, handleMouseEnter);
+			base.$frame.on('mouseleave.'+base.namespace, handleMouseLeave);
+			base.$image.on('load.'+base.namespace, handeImageLoad);
+			base.$image.on('mousedown.'+base.namespace+' touchstart.'+base.namespace, handleMouseDown);
+			$(document).on('mousemove.'+base.namespace+' touchmove.'+base.namespace, handleMouseMove);
+			$(document).on('mouseup.'+base.namespace+' touchend.'+base.namespace, handleMouseUp);
+		};
+
+		base.destroy = function() {
+			base.$image.removeData("jWindowCrop"); // remove data
+			$(document).unbind(); // remove body binds
+			base.$image.unbind(); // remove image binds
+			base.$frame.unbind(); // remove frame binds
+			base.$frame.find('.jwc_zoom_out').unbind(); // remove zoom triggers
+			base.$frame.find('.jwc_zoom_in').unbind();  // remove zoom triggers
+			$('.jwc_loader').remove();   // remove the added text
+			$('.jwc_controls').remove(); // remove the added controls
+			base.$image.removeAttr( 'style' ); // undo the style
+			base.$image.unwrap(); // undo the wrap
+		};
+		
+		base.setZoom = function(percent) {
+			if(base.minPercent >= 1) {
+				percent = base.minPercent;
+			} else if(percent > 1.0) {
+				percent = 1;
+			} else if(percent < base.minPercent) {
+				percent = base.minPercent;	
+			}
+			base.$image.width(Math.ceil(base.originalWidth*percent));
+			base.workingPercent = percent;
+			focusOnCenter();
+			updateResult();
+		};
+		base.zoomIn = function() {
+			var zoomIncrement = (1.0 - base.minPercent) / (base.options.zoomSteps-1);
+			base.setZoom(base.workingPercent+zoomIncrement);
+			return false;
+		};
+		base.zoomOut = function() {
+			var zoomIncrement = (1.0 - base.minPercent) / (base.options.zoomSteps-1);
+			base.setZoom(base.workingPercent-zoomIncrement);
+			return false;
+		};
+
+		function initializeDimensions() {
+			if(base.originalWidth == 0) {
+				base.originalWidth = base.$image[0].width;
+				base.originalHeight = base.$image[0].height;
+			}
+			if(base.originalWidth > 0) {
+				var widthRatio = base.options.targetWidth / base.originalWidth;
+				var heightRatio = base.options.targetHeight / base.originalHeight;
+				//base.minPercent = (widthRatio >= heightRatio) ? widthRatio : heightRatio;
+				if(widthRatio >= heightRatio) {
+					base.minPercent = (base.originalWidth < base.options.targetWidth) ? (base.options.targetWidth / base.originalWidth) : widthRatio;
+				} else {
+					base.minPercent = (base.originalHeight < base.options.targetHeight) ? (base.options.targetHeight / base.originalHeight) : heightRatio;
+				}
+				base.focalPoint = {'x': Math.round(base.originalWidth/2), 'y': Math.round(base.originalHeight/2)};
+				base.setZoom(base.minPercent);
+				base.$image.show(); //display image now that it has loaded
+			}
+		}
+		function storeFocalPoint() {
+			var x = (parseInt(base.$image.css('left'))*-1 + base.options.targetWidth/2) / base.workingPercent;
+			var y = (parseInt(base.$image.css('top'))*-1 + base.options.targetHeight/2) / base.workingPercent;
+			base.focalPoint = {'x': Math.round(x), 'y': Math.round(y)};
+		}
+		function focusOnCenter() {
+			var left = fillContainer((Math.round((base.focalPoint.x*base.workingPercent) - base.options.targetWidth/2)*-1), base.$image.width(), base.options.targetWidth);
+			var top = fillContainer((Math.round((base.focalPoint.y*base.workingPercent) - base.options.targetHeight/2)*-1), base.$image.height(), base.options.targetHeight);
+			base.$image.css({'left': (left.toString()+'px'), 'top': (top.toString()+'px')})
+			storeFocalPoint();
+		}
+		function updateResult() {
+			base.result = {
+				cropX: Math.floor(parseInt(base.$image.css('left'))/base.workingPercent*-1),
+				cropY: Math.floor(parseInt(base.$image.css('top'))/base.workingPercent*-1),
+				cropW: Math.round(base.options.targetWidth/base.workingPercent),
+				cropH: Math.round(base.options.targetHeight/base.workingPercent),
+				mustStretch: (base.minPercent > 1)
+			};
+			base.options.onChange.call(base.image, base.result);
+		}
+		function handeImageLoad() {
+			initializeDimensions();
+		}
+		function handleMouseDown(event) {
+			event.preventDefault(); //some browsers do image dragging themselves
+			base.isDragging = true;
+			base.dragMouseCoords = {x: event.pageX || event.originalEvent.touches[0].pageX, y: event.pageY || event.originalEvent.touches[0].pageY};
+			base.dragImageCoords = {x: parseInt(base.$image.css('left')), y: parseInt(base.$image.css('top'))}
+		}
+		function handleMouseUp() {
+			base.isDragging = false;
+		}
+		function handleMouseMove(event) {
+			if(base.isDragging) {
+				var xDif = (event.pageX || event.originalEvent.touches[0].pageX) - base.dragMouseCoords.x;
+				var yDif = (event.pageY || event.originalEvent.touches[0].pageY) - base.dragMouseCoords.y;
+				var newLeft = fillContainer((base.dragImageCoords.x + xDif), base.$image.width(), base.options.targetWidth);
+				var newTop = fillContainer((base.dragImageCoords.y + yDif), base.$image.height(), base.options.targetHeight);
+				base.$image.css({'left' : (newLeft.toString()+'px'), 'top' : (newTop.toString()+'px')});
+				storeFocalPoint();
+				updateResult();
+			}
+		}
+		function handleMouseEnter() {
+			if(base.options.smartControls) base.$frame.find('.jwc_controls').fadeIn('fast');
+		}
+		function handleMouseLeave() {
+			if(base.options.smartControls) base.$frame.find('.jwc_controls').fadeOut('fast');
+		}
+		
+		base.init();
+	};
+	
+	$.jWindowCrop.defaultOptions = {
+		targetWidth: 320,
+		targetHeight: 180,
+		zoomSteps: 10,
+		loadingText: 'Loading...',
+		smartControls: true,
+		showControlsOnStart: true,
+		onChange: function() {}
+	};
+	
+	$.fn.jWindowCrop = function(options){
+		return this.each(function(){
+			(new $.jWindowCrop(this, options));
+		});
+	};
+	
+	$.fn.getjWindowCrop = function(){
+		return this.data("jWindowCrop");
+	};
+})(jQuery);
+
--- a/js/lib/load-image.min.js
+++ b/js/lib/load-image.min.js
--- a/js/misc-functions.js
+++ b/js/misc-functions.js
@ -101,6 +101,38 @@ function validateRegisterForm(o) {
 		
 	return allFieldsValid;
 	}	
+
+/* ·  
+   · 
+   ·   Checks if edit profile form is valid
+   · 
+   ·   @returns true or false
+   ·
+   · · · · · · · · · */  
+
+function validateEditProfileForm(o) {
+	
+	var fullname 	= o.find('input.fullname');	
+	var homepage 	= o.find('input.url');
+	var bio 		= o.find('textarea.bio');
+	var loc		 	= o.find('input.location');
+	
+	var allFieldsValid = true;
+
+	if(fullname.val().length < 255) {
+		fullname.removeClass('invalid'); } else { fullname.addClass('invalid'); if(allFieldsValid)allFieldsValid=false; }		
+
+	if($.trim(homepage.val()).length==0 || /^(ftp|http|https):\/\/[^ "]+$/.test(homepage.val())) {
+		homepage.removeClass('invalid'); } else { homepage.addClass('invalid'); if(allFieldsValid)allFieldsValid=false; }		
+
+	if(bio.val().length < 140) {
+		bio.removeClass('invalid'); } else { bio.addClass('invalid'); if(allFieldsValid)allFieldsValid=false; }		
+
+	if(loc.val().length < 255) {
+		loc.removeClass('invalid'); } else { loc.addClass('invalid'); if(allFieldsValid)allFieldsValid=false; }		
+		
+	return allFieldsValid;
+	}	
    

    
@ -345,6 +377,7 @@ function decodeQvitterCompactFormat(data) {
 			users[k].following = (v[14]==0?false:v[14]);																																						
 			users[k].statusnet_blocking = (v[15]==0?false:v[15]);																																						
 			users[k].statusnet_profile_url = v[16];
+			users[k].cover_photo = (v[17]==0?false:v[17]);			
 			i++;
 			});								
 		var unqvitter = Array();	
@ -636,6 +669,32 @@ function backToMyScrollPos(obj,id,animate,callback) {
 	


+/* · 
+   · 
+   ·   Clean up user object, remove null etc
+   ·   
+   · · · · · · · · · · · · · */ 
+
+function cleanUpUserObject(data) {
+	data.name = data.name || '';
+	data.profile_image_url = data.profile_image_url || '';
+	data.profile_image_url_profile_size = data.profile_image_url_profile_size || '';
+	data.profile_image_url_original = data.profile_image_url_original || '';						
+	data.screen_name = data.screen_name || '';						
+	data.description = data.description || '';
+	data.location = data.location || '';
+	data.url = data.url || '';
+	data.statusnet_profile_url = data.statusnet_profile_url || '';
+	data.statuses_count = data.statuses_count || 0;
+	data.followers_count = data.followers_count || 0;
+	data.groups_count = data.groups_count || 0;			
+	data.friends_count = data.friends_count || 0;
+	return data;		
+	}		
+	
+
+
+
 /* · 
   · 
   ·   outerHTML
--- a/js/qvitter.js
+++ b/js/qvitter.js
@ -310,6 +310,7 @@ function doLogin(streamToSet) {
 				$.each(data,function(k,v){
 					if(v[2] === false) { var avatar = window.defaultAvatarStreamSize; }
 					else { 	var avatar = window.avatarRoot + v[2]; }
+					v[0] = v[0] || v[1]; // if name is null we go with username there too
 					window.following[i] = { 'id': k,'name': v[0], 'username': v[1],'avatar': avatar };
 					i++;
 					});
@ -804,18 +805,7 @@ $(document).on('click','a', function(e) {
 					console.log(data);
 					
 					// empty strings and zeros instead of null
-					data.name = data.name || '';
-					data.profile_image_url = data.profile_image_url || '';
-					data.profile_image_url_profile_size = data.profile_image_url_profile_size || '';
-					data.profile_image_url_original = data.profile_image_url_original || '';						
-					data.screen_name = data.screen_name || '';						
-					data.description = data.description || '';
-					data.location = data.location || '';
-					data.url = data.url || '';
-					data.statusnet_profile_url = data.statusnet_profile_url || '';
-					data.statuses_count = data.statuses_count || 0;
-					data.followers_count = data.followers_count || 0;
-					data.friends_count = data.friends_count || 0;
+					data = cleanUpUserObject(data);
 					
 					// profile card
 					var followingClass = '';
@ -1087,7 +1077,6 @@ $('body').on('click','#new-queets-bar',function(){

 $('body').on('click','.queet',function (event) {
 	if(!$(event.target).is('a')
-		&& !$(event.target).is('.CodeMirror-scroll')
 		&& !$(event.target).is('.cm-mention')
 		&& !$(event.target).is('.cm-tag')
 		&& !$(event.target).is('.cm-group')
@ -1341,6 +1330,7 @@ $('body').on('click','.modal-close',function(){
 $(document).keyup(function(e){
 	if(e.keyCode==27) {
 		$('.modal-container').remove();
+		abortEditProfile();
 		}
 	});	

@ -1753,3 +1743,222 @@ $('body').on('click','.show-full-conversation',function(){
 	backToMyScrollPos(this_q,this_qid,false);
 	});

+
+
+/* · 
+   · 
+   ·   Edit profile
+   ·   
+   · · · · · · · · · · · · · */ 	
+
+$('body').on('click','.edit-profile-button',function(){
+	if(!$(this).hasClass('disabled')) {
+		$(this).addClass('disabled');
+		$('html').scrollTop(0);
+		$('html').addClass('fixed');
+		$('body').prepend('<div id="edit-profile-popup" class="modal-container"></div>');	
+		display_spinner();
+		getFromAPI('users/show/' + window.loggedIn.screen_name + '.json', function(data){ 
+			remove_spinner();
+			if(data){
+				data = cleanUpUserObject(data);
+				// use avatar if no cover photo
+				if(data.cover_photo === false) {
+					data.cover_photo = data.profile_image_url_original;
+					}				
+				$('#edit-profile-popup').prepend('\
+					<div class="edit-profile-container">\
+						<div class="profile-card">\
+							<div class="profile-header-inner" style="background-image:url(' + data.cover_photo + ')">\
+							   <input type="file" name="cover-photo-input" id="cover-photo-input" />\
+							   <div class="upload-cover-photo"></div>\
+							   <div class="profile-header-inner-overlay"></div>\
+							   <a class="profile-picture" href="' + data.profile_image_url_original + '"><img src="' + data.profile_image_url_profile_size + '" /></a>\
+							   <div class="profile-card-inner">\
+								   <input class="fullname" id="edit-profile-fullname" placeholder="' + window.sL.signUpFullName + '" value="' + data.name + '" />\
+								   <h2 class="username"><span class="screen-name">@' + data.screen_name + '</span><span class="follow-status"></span></h2>\
+								   <div class="bio-container">\
+									   <textarea class="bio" id="edit-profile-bio" placeholder="' + window.sL.registerBio + '">' + data.description + '</textarea>\
+								   </div>\
+								   <p class="location-and-url">\
+									   <input class="location" id="edit-profile-location" placeholder="' + window.sL.registerLocation + '" value="' + data.location + '" />\
+									   <span class="divider"> · </span>\
+									   <input class="url" id="edit-profile-url" placeholder="' + window.sL.registerHomepage + '" value="' + data.url + '" />\
+								   </p>\
+							   </div>\
+							</div>\
+							<div class="profile-banner-footer">\
+							   <div class="user-actions">\
+							       <button type="button" class="abort-edit-profile-button"><span class="button-text edit-profile-text">' + window.sL.cancelVerb + '</span>\
+								   <button type="button" class="save-profile-button"><span class="button-text edit-profile-text">' + window.sL.saveChanges + '</span>\
+							   </div>\
+							   <div class="clearfix"></div>\
+							</div>\
+						</div>\
+					</div>');
+				}
+			else {
+				abortEditProfile();
+				}
+			});				
+		}	
+	});
+// cancel
+$('body').on('click','.abort-edit-profile-button',function(){
+	// if this is the cover photo
+	if($('#edit-profile-popup .jwc_frame').length>0) {
+		cleanUpAfterCropping();		
+		}
+	// if profile info		
+	else {
+		abortEditProfile();
+		}
+	});
+function abortEditProfile() {
+	$('#edit-profile-popup').remove();
+	$('.edit-profile-button').removeClass('disabled');
+	$('html').removeClass('fixed');
+	}
+// validate
+$('body').on('keyup paste input', '#edit-profile-popup input,#edit-profile-popup textarea', function() {
+	if(validateEditProfileForm($('#edit-profile-popup'))){
+		$('.save-profile-button').removeAttr('disabled');
+		$('.save-profile-button').removeClass('disabled');		
+		}
+	else {
+		$('.save-profile-button').attr('disabled','disabled');		
+		$('.save-profile-button').addClass('disabled');
+		}
+	});
+// submit
+$('body').on('click','.save-profile-button',function(){
+	$('.save-profile-button').attr('disabled','disabled');		
+	$('.save-profile-button').addClass('disabled');
+	display_spinner();
+
+	// if this is the cover photo
+	if($('#edit-profile-popup .jwc_frame').length>0) {
+		$.ajax({ url: window.apiRoot + 'qvitter/update_cover_photo.json', 
+			type: "POST", 
+			data: { 
+				cropH: 	window.jwc.result.cropH,
+				cropW: 	window.jwc.result.cropW,
+				cropX:	window.jwc.result.cropX,
+				cropY: 	window.jwc.result.cropY,
+				img:	$('#cover-photo-to-crop').attr('src')
+				},
+			dataType:"json",
+			error: function(data){ console.log('error'); console.log(data); },
+			success: function(data) {
+				remove_spinner();					 
+				if(typeof data.error == 'undefined') {
+					$('.save-profile-button').removeAttr('disabled');		
+					$('.save-profile-button').removeClass('disabled');
+					cleanUpAfterCropping();
+					$('.profile-header-inner').css('background-image','url(' + data.url + ')');
+					}
+				 else {
+					alert('Try again! ' + data.error);
+					$('.save-profile-button').removeAttr('disabled');		
+					$('.save-profile-button').removeClass('disabled');
+					}
+				 }
+			});							
+		}
+	// if profile info
+	else {
+		if(validateEditProfileForm($('#edit-profile-popup'))) {
+			$.ajax({ url: window.apiRoot + 'account/update_profile.json', 
+				type: "POST", 
+				data: { 
+					name: 			$('#edit-profile-popup input.fullname').val(),
+					url: 			$('#edit-profile-popup input.url').val(),
+					location: 		$('#edit-profile-popup input.location').val(),
+					description:	$('#edit-profile-popup textarea.bio').val(),
+					},
+				dataType:"json",
+				error: function(data){ console.log('error'); console.log(data); },
+				success: function(data) {
+					remove_spinner();					 
+					if(typeof data.error == 'undefined') {
+						location.reload(); // reload, hopefully the new profile is saved	
+						}
+					 else {
+						alert('Try again! ' + data.error);
+						$('.save-profile-button').removeAttr('disabled');		
+						$('.save-profile-button').removeClass('disabled');
+						}
+					 }
+				});		
+			}
+		}
+	});
+// cover photo select and crop
+$('body').on('click','.upload-cover-photo',function(){
+	$('input:file').click(function(){ $(this).one('change',function(e){ // trick to make the change event only fire once when selecting a file		
+		renderFileInput2(e);
+		})});
+	
+	// trigger click for firefox
+	if(navigator.userAgent.toLowerCase().indexOf('firefox') > -1) {
+		$('#cover-photo-input').trigger('click');
+		}
+	// other browsers
+	else {
+		var evt = document.createEvent("HTMLEvents");
+		evt.initEvent("click", true, true); 
+		$('#cover-photo-input')[0].dispatchEvent(evt);		
+		}	
+	});
+
+// load image from file input
+function renderFileInput2(e) {
+	
+	// get orientation
+	loadImage.parseMetaData(e.target.files[0], function (data) {
+		if (data.exif) {
+			var orientation = data.exif.get('Orientation'); 
+			}
+		else {
+			var orientation = 1; 
+			}
+
+		display_spinner();
+
+		// clean up 
+		cleanUpAfterCropping();
+		
+		// create image
+		loadImage(e.target.files[0],
+				function (img) {    
+					if(typeof img.target == 'undefined') {
+						var appendedImg = $('#edit-profile-popup .profile-header-inner').prepend('<img id="cover-photo-to-crop" src="' + img.toDataURL('image/jpeg') +  '" />');
+					
+						// enable cropping
+						$('#cover-photo-to-crop').jWindowCrop({
+							targetWidth:520,
+							targetHeight:260,
+							onChange: function(result) {
+								remove_spinner();    
+								}
+							});
+						window.jwc = $('#cover-photo-to-crop').getjWindowCrop();						
+						}
+					else {
+						remove_spinner();  
+						alert('could not read image');
+						}
+					},
+				{ maxWidth: 1040,
+				  orientation: orientation } // Options
+			);	
+		});						
+	}
+function cleanUpAfterCropping(){
+	if(typeof window.jwc != 'undefined') {
+		window.jwc.destroy();
+		}
+	$('.jwc_frame').remove();
+	$('#cover-photo-to-crop').remove();
+	$('input:file').unbind('click');	
+	}