pulling the avatar code out of the profile plugin - just some minor icon related code left

git-svn-id: http://code.elgg.org/elgg/trunk@7671 36083f99-b078-4883-b0ff-0f9b5a30f544

15 files changed, 202 insertions, 763 deletions

diff --git a/engine/lib/users.php b/engine/lib/users.php
index b9bf2058f..ee3814fd2 100644
--- a/engine/lib/users.php
+++ b/engine/lib/users.php
@@ -1463,6 +1463,39 @@ function user_create_hook_add_site_relationship($event, $object_type, $object) {
 }
 
 /**
+ * Serves the user's avatar
+ *
+ * @param string $hook
+ * @param string $entity_type
+ * @param string $returnvalue
+ * @param array $params
+ * @return string
+ */
+function user_avatar_hook($hook, $entity_type, $returnvalue, $params){
+	$entity = $params['entity'];
+	$size = $params['size'];
+	return "pg/avatar/view/{$entity->username}?size=$size";
+}
+
+/**
+ * Avatar page handler
+ *
+ * @param array $page
+ */
+function elgg_avatar_page_handler($page) {
+	global $CONFIG;
+
+	$user = get_user_by_username($page[1]);
+	elgg_set_page_owner_guid($user->guid);
+
+	if ($page[0] == 'edit') {
+		require_once("{$CONFIG->path}pages/avatar/edit.php");
+	} else {
+		require_once("{$CONFIG->path}pages/avatar/view.php");
+	}
+}
+
+/**
  * Members page handler
  * 
  * @param array $page url segments
@@ -1526,11 +1559,24 @@ function users_init() {
 	register_page_handler('resetpassword', 'elgg_user_resetpassword_page_handler');
 	register_page_handler('login', 'elgg_user_login_page_handler');
 	register_page_handler('members', 'elgg_members_page_handler');
+	register_page_handler('avatar', 'elgg_avatar_page_handler');
+
 	//register_page_handler('collections', 'collections_page_handler');
 
 	$item = new ElggMenuItem('members', elgg_echo('members'), 'pg/members');
 	elgg_register_menu_item('site', $item);
 
+	$user = get_loggedin_user();
+	if ($user) {
+		$params = array(
+			'name' => 'edit_avatar',
+			'url' => "pg/avatar/edit/{$user->username}",
+			'title' => elgg_echo('avatar:edit'),
+			'contexts' => array('avatar'),
+		);
+		elgg_register_menu_item('page', $params);
+	}
+
 	elgg_register_action("register", '', 'public');
 	elgg_register_action("useradd", '', 'public');
 	elgg_register_action("friends/add");
@@ -1543,6 +1589,8 @@ function users_init() {
 	//elgg_register_action('friends/editcollection');
 	//elgg_register_action("user/spotlight");
 
+	elgg_register_plugin_hook_handler('entity:icon:url', 'user', 'user_avatar_hook');
+
 	elgg_register_action("usersettings/save");
 
 	elgg_register_action("user/passwordreset", '', 'public');
diff --git a/languages/en.php b/languages/en.php
index 2168845b4..9cde25c18 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -366,7 +366,12 @@ $english = array(
 
 	'avatar' => 'Avatar',
 	'avatar:create' => 'Create your avatar',
+	'avatar:edit' => 'Edit avatar',
 	'avatar:preview' => 'Preview',
+	'avatar:upload' => 'Upload a new avatar',
+	'avatar:current' => 'Current avatar',
+	'avatar:crop:title' => 'Avatar cropping tool',
+	'avatar:upload:instructions' => "Your avatar is displayed throughout the site. You can change it as often as you'd like. (File formats accepted: GIF, JPG or PNG)",
 	'avatar:create:instructions' => 'Click and drag a square below to match how you want your avatar cropped. A preview will appear in the box on the right. When you are happy with the preview, click \'Create your avatar\'. This cropped version will be used throughout the site as your avatar.',
 	'avatar:upload:success' => 'Avatar successfully uploaded',
 	'avatar:upload:fail' => 'Avatar upload failed',
diff --git a/mod/profile/editicon.php b/mod/profile/editicon.php
deleted file mode 100644
index 85b06cc17..000000000
--- a/mod/profile/editicon.php
+++ /dev/null
@@ -1,39 +0,0 @@
-<?php
-/**
- * Elgg upload new profile icon
- * 
- * @package ElggProfile
- */
-
-// Load the Elgg framework
-require_once(dirname(dirname(dirname(__FILE__))) . "/engine/start.php");
-
-// Make sure we're logged in
-if (!isloggedin()) {
-	forward();
-}
-
-// Get owner of profile - set in page handler
-$user = elgg_get_page_owner();
-if (!$user) {
-	register_error(elgg_echo("profile:notfound"));
-	forward();
-}
-
-// check if logged in user can edit this profile icon
-if (!$user->canEdit()) {
-	register_error(elgg_echo("profile:icon:noaccess"));
-	forward();
-}
-
-// set title
-$area1 = elgg_view_title(elgg_echo('profile:createicon:header'));
-$area1 .= elgg_view("profile/edit_icon", array('user' => $user));
-
-elgg_set_context('profile_edit');
-
-// Get the form and correct canvas area
-$body = elgg_view_layout("one_column_with_sidebar", array('content' => $area1));
-	
-// Draw the page
-echo elgg_view_page(elgg_echo("profile:editicon"), $body);
diff --git a/mod/profile/views/default/js/jquery.imgareaselect-0.8.js b/mod/profile/views/default/js/jquery.imgareaselect-0.8.js
deleted file mode 100644
index 456114755..000000000
--- a/mod/profile/views/default/js/jquery.imgareaselect-0.8.js
+++ /dev/null
@@ -1,635 +0,0 @@
-/*
- * imgAreaSelect jQuery plugin
- * version 0.8
- *
- * Copyright (c) 2008-2009 Michal Wojciechowski (odyniec.net)
- *
- * Dual licensed under the MIT (MIT-LICENSE.txt) 
- * and GPL (GPL-LICENSE.txt) licenses.
- *
- * http://odyniec.net/projects/imgareaselect/
- *
- */
-
-(function($) {
-
-$.imgAreaSelect = { onKeyPress: null };
-
-$.imgAreaSelect.init = function (img, options) {
-    var $img = $(img), imgLoaded, $box = $('<div />'), $area = $('<div />'),
-        $border1 = $('<div />'), $border2 = $('<div />'), $areaOpera,
-        $outLeft = $('<div />'), $outTop = $('<div />'),
-        $outRight = $('<div />'), $outBottom = $('<div />'),
-        $handles = $([]), handleWidth, handles = [ ], left, top, M = Math,
-        imgOfs, imgWidth, imgHeight, $parent, parOfs,
-        zIndex = 0, position = 'absolute', $p, startX, startY,
-        scaleX = 1, scaleY = 1, resizeMargin = 10, resize = [ ], V = 0, H = 1,
-        d, aspectRatio, x1, x2, y1, y2, x, y, adjusted, shown, i,
-        selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 };
-
-    var $o = $outLeft.add($outTop).add($outRight).add($outBottom);
-
-    function viewX(x)
-    {
-        return x + imgOfs.left - parOfs.left;
-    }
-
-    function viewY(y)
-    {
-        return y + imgOfs.top - parOfs.top;
-    }
-
-    function selX(x)
-    {
-        return x - imgOfs.left + parOfs.left;
-    }
-
-    function selY(y)
-    {
-        return y - imgOfs.top + parOfs.top;
-    }
-
-    function evX(event)
-    {
-        return event.pageX - parOfs.left;
-    }
-
-    function evY(event)
-    {
-        return event.pageY - parOfs.top;
-    }
-
-    function trueSelection()
-    {
-        return { x1: M.round(selection.x1 * scaleX),
-            y1: M.round(selection.y1 * scaleY),
-            x2: M.round(selection.x2 * scaleX),
-            y2: M.round(selection.y2 * scaleY),
-            width: M.round(selection.x2 * scaleX) - M.round(selection.x1 * scaleX),
-            height: M.round(selection.y2 * scaleY) - M.round(selection.y1 * scaleY) };
-    }
-
-    function getZIndex()
-    {
-        $p = $img;
-
-        while ($p.length && !$p.is('body')) {
-            if (!isNaN($p.css('z-index')) && $p.css('z-index') > zIndex)
-                zIndex = $p.css('z-index');
-            if ($p.css('position') == 'fixed')
-                position = 'fixed';
-
-            $p = $p.parent();
-        }
-
-        if (!isNaN(options.zIndex))
-            zIndex = options.zIndex;
-    }
-
-    function adjust()
-    {
-        imgOfs = { left: M.round($img.offset().left), top: M.round($img.offset().top) };
-        imgWidth = $img.width();
-        imgHeight = $img.height();
-
-        if ($().jquery == '1.3.2' && $.browser.safari && position == 'fixed') {
-            imgOfs.top += M.max(document.documentElement.scrollTop, $('body').scrollTop()); 
-            imgOfs.left += M.max(document.documentElement.scrollLeft, $('body').scrollLeft());
-        }
-
-        parOfs = $.inArray($parent.css('position'), ['absolute', 'relative']) != -1 ? 
-            { left: M.round($parent.offset().left) - $parent.scrollLeft(),
-                top: M.round($parent.offset().top) - $parent.scrollTop() } :
-            position == 'fixed' ?
-                { left: $(document).scrollLeft(), top: $(document).scrollTop() } :
-                { left: 0, top: 0 };
-
-        left = viewX(0);
-        top = viewY(0);
-    }
-
-    function update(resetKeyPress)
-    {
-        if (!shown) return;
-
-        $box.css({
-            left: viewX(selection.x1) + 'px', top: viewY(selection.y1) + 'px',
-            width: selection.width + 'px', height: selection.height + 'px'
-        });
-        $area.add($border1).add($border2).css({
-            left: '0px', top: '0px',
-            width: M.max(selection.width - options.borderWidth * 2, 0) + 'px',
-            height: M.max(selection.height - options.borderWidth * 2, 0) + 'px'
-        });
-        $border1.css({ borderStyle: 'solid', borderColor: options.borderColor1 });
-        $border2.css({ borderStyle: 'dashed', borderColor: options.borderColor2 });
-        $border1.add($border2).css({ opacity: options.borderOpacity });
-        $outLeft.css({ left: left + 'px', top: top + 'px',
-            width: selection.x1 + 'px', height: imgHeight + 'px' });
-        $outTop.css({ left: left + selection.x1 + 'px', top: top + 'px',
-            width: selection.width + 'px', height: selection.y1 + 'px' });
-        $outRight.css({ left: left + selection.x2 + 'px', top: top + 'px',
-            width: imgWidth - selection.x2 + 'px', height: imgHeight + 'px' });
-        $outBottom.css({ left: left + selection.x1 + 'px', top: top + selection.y2 + 'px',
-            width: selection.width + 'px', height: imgHeight - selection.y2 + 'px' });
-
-        if (handles.length) {
-            handles[1].css({ left: selection.width - handleWidth + 'px' });
-            handles[2].css({ left: selection.width - handleWidth + 'px',
-                top: selection.height - handleWidth + 'px' });
-            handles[3].css({ top: selection.height - handleWidth + 'px' });
-
-            if (handles.length == 8) {
-                handles[4].css({ left: (selection.width - handleWidth) / 2 + 'px' });
-                handles[5].css({ left: selection.width - handleWidth + 'px',
-                    top: (selection.height - handleWidth) / 2 + 'px' });
-                handles[6].css({ left: (selection.width - handleWidth) / 2 + 'px',
-                    top: selection.height - handleWidth + 'px' });
-                handles[7].css({ top: (selection.height - handleWidth) / 2 + 'px' });
-            }
-        }
-
-        if (resetKeyPress !== false) {
-            if ($.imgAreaSelect.keyPress != docKeyPress)
-                $(document).unbind($.imgAreaSelect.keyPress,
-                    $.imgAreaSelect.onKeyPress);
-
-            if (options.keys)
-                $(document).bind($.imgAreaSelect.keyPress,
-                    $.imgAreaSelect.onKeyPress = docKeyPress);
-        }
-
-        if ($.browser.msie && options.borderWidth == 1 && options.borderOpacity < 1) {
-            $border1.add($border2).css('margin', '0');
-            setTimeout(function () { $border1.add($border2).css('margin', 'auto'); }, 0);
-        }
-    }
-
-    function areaMouseMove(event)
-    {
-        if (!adjusted) {
-            adjust();
-            adjusted = true;
-
-            $box.one('mouseout', function () { adjusted = false; });
-        }
-
-        x = selX(evX(event)) - selection.x1;
-        y = selY(evY(event)) - selection.y1;
-
-        resize = [ ];
-
-        if (options.resizable) {
-            if (y <= resizeMargin)
-                resize[V] = 'n';
-            else if (y >= selection.height - resizeMargin)
-                resize[V] = 's';
-            if (x <= resizeMargin)
-                resize[H] = 'w';
-            else if (x >= selection.width - resizeMargin)
-                resize[H] = 'e';
-        }
-
-        $box.css('cursor', resize.length ? resize.join('') + '-resize' :
-            options.movable ? 'move' : '');
-        if ($areaOpera)
-            $areaOpera.toggle();
-    }
-
-    function docMouseUp(event)
-    {
-        resize = [ ];
-
-        $('body').css('cursor', '');
-
-        if (options.autoHide || selection.width * selection.height == 0)
-            $box.add($o).hide();
-
-        options.onSelectEnd(img, trueSelection());
-
-        $(document).unbind('mousemove', selectingMouseMove);
-        $box.mousemove(areaMouseMove);
-    }
-
-    function areaMouseDown(event)
-    {
-        if (event.which != 1) return false;
-
-        adjust();
-
-        if (options.resizable && resize.length > 0) {
-            $('body').css('cursor', resize.join('') + '-resize');
-
-            x1 = viewX(selection[resize[H] == 'w' ? 'x2' : 'x1']);
-            y1 = viewY(selection[resize[V] == 'n' ? 'y2' : 'y1']);
-
-            $(document).mousemove(selectingMouseMove)
-                .one('mouseup', docMouseUp);
-            $box.unbind('mousemove', areaMouseMove);
-        }
-        else if (options.movable) {
-            startX = left + selection.x1 - evX(event);
-            startY = top + selection.y1 - evY(event);
-
-            $box.unbind('mousemove', areaMouseMove);
-
-            $(document).mousemove(movingMouseMove)
-                .one('mouseup', function () {
-                    options.onSelectEnd(img, trueSelection());
-
-                    $(document).unbind('mousemove', movingMouseMove);
-                    $box.mousemove(areaMouseMove);
-                });
-        }
-        else
-            $img.mousedown(event);
-
-        return false;
-    }
-
-    function aspectRatioXY()
-    {
-        x2 = M.max(left, M.min(left + imgWidth,
-            x1 + M.abs(y2 - y1) * aspectRatio * (x2 < x1 ? -1 : 1)));
-        y2 = M.round(M.max(top, M.min(top + imgHeight,
-            y1 + M.abs(x2 - x1) / aspectRatio * (y2 < y1 ? -1 : 1))));
-        x2 = M.round(x2);
-    }
-
-    function aspectRatioYX()
-    {
-        y2 = M.max(top, M.min(top + imgHeight,
-            y1 + M.abs(x2 - x1) / aspectRatio * (y2 < y1 ? -1 : 1)));
-        x2 = M.round(M.max(left, M.min(left + imgWidth,
-            x1 + M.abs(y2 - y1) * aspectRatio * (x2 < x1 ? -1 : 1))));
-        y2 = M.round(y2);
-    }
-
-    function doResize()
-    {
-        if (options.minWidth && M.abs(x2 - x1) < options.minWidth) {
-            x2 = x1 - options.minWidth * (x2 < x1 ? 1 : -1);
-
-            if (x2 < left)
-                x1 = left + options.minWidth;
-            else if (x2 > left + imgWidth)
-                x1 = left + imgWidth - options.minWidth;
-        }
-
-        if (options.minHeight && M.abs(y2 - y1) < options.minHeight) {
-            y2 = y1 - options.minHeight * (y2 < y1 ? 1 : -1);
-
-            if (y2 < top)
-                y1 = top + options.minHeight;
-            else if (y2 > top + imgHeight)
-                y1 = top + imgHeight - options.minHeight;
-        }
-
-        x2 = M.max(left, M.min(x2, left + imgWidth));
-        y2 = M.max(top, M.min(y2, top + imgHeight));
-
-        if (aspectRatio)
-            if (M.abs(x2 - x1) / aspectRatio > M.abs(y2 - y1))
-                aspectRatioYX();
-            else
-                aspectRatioXY();
-
-        if (options.maxWidth && M.abs(x2 - x1) > options.maxWidth) {
-            x2 = x1 - options.maxWidth * (x2 < x1 ? 1 : -1);
-            if (aspectRatio) aspectRatioYX();
-        }
-
-        if (options.maxHeight && M.abs(y2 - y1) > options.maxHeight) {
-            y2 = y1 - options.maxHeight * (y2 < y1 ? 1 : -1);
-            if (aspectRatio) aspectRatioXY();
-        }
-
-        selection = { x1: selX(M.min(x1, x2)), x2: selX(M.max(x1, x2)),
-            y1: selY(M.min(y1, y2)), y2: selY(M.max(y1, y2)),
-            width: M.abs(x2 - x1), height: M.abs(y2 - y1) };
-
-        update();
-
-        options.onSelectChange(img, trueSelection());
-    }
-
-    function selectingMouseMove(event)
-    {
-        x2 = !resize.length || resize[H] || aspectRatio ? evX(event) : viewX(selection.x2);
-        y2 = !resize.length || resize[V] || aspectRatio ? evY(event) : viewY(selection.y2);
-
-        doResize();
-
-        return false;        
-    }
-
-    function doMove(newX1, newY1)
-    {
-        x2 = (x1 = newX1) + selection.width;
-        y2 = (y1 = newY1) + selection.height;
-
-        selection = $.extend(selection, { x1: selX(x1), y1: selY(y1),
-            x2: selX(x2), y2: selY(y2) });
-
-        update();
-
-        options.onSelectChange(img, trueSelection());
-    }
-
-    function movingMouseMove(event)
-    {
-        x1 = M.max(left, M.min(startX + evX(event), left + imgWidth - selection.width));
-        y1 = M.max(top, M.min(startY + evY(event), top + imgHeight - selection.height));
-
-        doMove(x1, y1);
-
-        event.preventDefault();     
-        return false;
-    }
-
-    function startSelection(event)
-    {
-        adjust();
-
-        x2 = x1;
-        y2 = y1;       
-        doResize();
-
-        resize = [ ];
-
-        $box.add($o.is(':visible') ? null : $o).show();
-        shown = true;
-
-        $(document).unbind('mouseup', cancelSelection)
-            .mousemove(selectingMouseMove).one('mouseup', docMouseUp);
-        $box.unbind('mousemove', areaMouseMove);
-
-        options.onSelectStart(img, trueSelection());
-    }
-
-    function cancelSelection()
-    {
-        $(document).unbind('mousemove', startSelection);
-        $box.add($o).hide();
-
-        selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 };
-
-        options.onSelectChange(img, selection);
-        options.onSelectEnd(img, selection);
-    }
-
-    function imgMouseDown(event)
-    {
-        if (event.which != 1) return false;
-
-        adjust();
-        startX = x1 = evX(event);
-        startY = y1 = evY(event);
-
-        $(document).one('mousemove', startSelection)
-            .one('mouseup', cancelSelection);
-
-        return false;
-    }
-
-    function parentScroll()
-    {
-        adjust();
-        update(false);
-        x1 = viewX(selection.x1); y1 = viewY(selection.y1);
-        x2 = viewX(selection.x2); y2 = viewY(selection.y2);
-    }
-
-    function imgLoad()
-    {
-        imgLoaded = true;
-
-        if (options.show) {
-            shown = true;
-            adjust();
-            update();
-            $box.add($o).show();
-        }
-
-        $box.add($o).css({ visibility: '' });
-    }
-
-    var docKeyPress = function(event) {
-        var k = options.keys, d, t, key = event.keyCode || event.which;
-
-        d = !isNaN(k.alt) && (event.altKey || event.originalEvent.altKey) ? k.alt :
-            !isNaN(k.ctrl) && event.ctrlKey ? k.ctrl :
-            !isNaN(k.shift) && event.shiftKey ? k.shift :
-            !isNaN(k.arrows) ? k.arrows : 10;
-
-        if (k.arrows == 'resize' || (k.shift == 'resize' && event.shiftKey) ||
-            (k.ctrl == 'resize' && event.ctrlKey) ||
-            (k.alt == 'resize' && (event.altKey || event.originalEvent.altKey)))
-        {
-            switch (key) {
-            case 37:
-                d = -d;
-            case 39:
-                t = M.max(x1, x2);
-                x1 = M.min(x1, x2);
-                x2 = M.max(t + d, x1);
-                if (aspectRatio) aspectRatioYX();
-                break;
-            case 38:
-                d = -d;
-            case 40:
-                t = M.max(y1, y2);
-                y1 = M.min(y1, y2);
-                y2 = M.max(t + d, y1);
-                if (aspectRatio) aspectRatioXY();
-                break;
-            default:
-                return;
-            }
-
-            doResize();
-        }
-        else {
-            x1 = M.min(x1, x2);
-            y1 = M.min(y1, y2);
-
-            switch (key) {
-            case 37:
-                doMove(M.max(x1 - d, left), y1);
-                break;
-            case 38:
-                doMove(x1, M.max(y1 - d, top));
-                break;
-            case 39:
-                doMove(x1 + M.min(d, imgWidth - selX(x2)), y1);
-                break;
-            case 40:
-                doMove(x1, y1 + M.min(d, imgHeight - selY(y2)));
-                break;
-            default:
-                return;
-            }
-        }
-
-        return false;
-    };
-
-    this.setOptions = function(newOptions)
-    {
-        if (newOptions.parent)
-            ($parent = $(newOptions.parent)).append($box.add($o));
-
-        adjust();
-        getZIndex();
-
-        if (newOptions.x1 != null) {
-            selection = { x1: newOptions.x1, y1: newOptions.y1,
-                x2: newOptions.x2, y2: newOptions.y2 };
-            newOptions.show = !newOptions.hide;
-
-            x1 = viewX(selection.x1); y1 = viewY(selection.y1);
-            x2 = viewX(selection.x2); y2 = viewY(selection.y2);
-            selection.width = x2 - x1;
-            selection.height = y2 - y1;
-        }
-
-        if (newOptions.handles != null) {
-            $handles.remove();
-            $handles = $(handles = [ ]);
-
-            i = newOptions.handles ? newOptions.handles == 'corners' ? 4 : 8 : 0;
-
-            while (i--)
-                $handles = $handles.add(handles[i] = $('<div />'));
-
-            handleWidth = 4 + options.borderWidth;
-
-            $handles.css({ position: 'absolute', borderWidth: options.borderWidth + 'px',
-                borderStyle: 'solid', borderColor: options.borderColor1, 
-                opacity: options.borderOpacity, backgroundColor: options.borderColor2,
-                width: handleWidth + 'px', height: handleWidth + 'px',
-                fontSize: '0px', zIndex: zIndex > 0 ? zIndex + 1 : '1' })
-                .addClass(options.classPrefix + '-handle');
-
-            handleWidth += options.borderWidth * 2;
-        }
-
-        update();
-
-        options = $.extend(options, newOptions);
-
-        if (options.imageWidth || options.imageHeight) {
-            scaleX = (parseInt(options.imageWidth) || imgWidth) / imgWidth;
-            scaleY = (parseInt(options.imageHeight) || imgHeight) / imgHeight;
-        }
-
-        if (newOptions.keys)
-            options.keys = $.extend({ shift: 1, ctrl: 'resize' },
-                newOptions.keys === true ? { } : newOptions.keys);
-
-        $o.addClass(options.classPrefix + '-outer');
-        $area.addClass(options.classPrefix + '-selection');
-        $border1.addClass(options.classPrefix + '-border1');
-        $border2.addClass(options.classPrefix + '-border2');
-
-        $box.add($area).add($border1).add($border2).css({ borderWidth: options.borderWidth + 'px' });
-        $area.css({ backgroundColor: options.selectionColor, opacity: options.selectionOpacity });       
-        $border1.css({ borderStyle: 'solid', borderColor: options.borderColor1 });
-        $border2.css({ borderStyle: 'dashed', borderColor: options.borderColor2 });
-        $border1.add($border2).css({ opacity: options.borderOpacity });
-        $o.css({ opacity: options.outerOpacity, backgroundColor: options.outerColor });
-
-        $box.append($area.add($border1).add($border2).add($handles).add($areaOpera));
-
-        if (newOptions.hide)
-            $box.add($o).hide();
-        else if (newOptions.show && imgLoaded) {
-            shown = true;
-            update();
-            $box.add($o).show();
-        }
-
-        aspectRatio = options.aspectRatio && (d = options.aspectRatio.split(/:/)) ?
-            d[0] / d[1] : null;
-
-        if (aspectRatio)
-            if (options.minWidth)
-                options.minHeight = parseInt(options.minWidth / aspectRatio);
-            else if (options.minHeight)
-                options.minWidth = parseInt(options.minHeight * aspectRatio);
-
-        if (options.disable || options.enable === false) {
-            $box.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);
-            $img.add($o).unbind('mousedown', imgMouseDown);
-            $(window).unbind('resize', parentScroll);
-            $img.add($img.parents()).unbind('scroll', parentScroll);
-        }
-        else if (options.enable || options.disable === false) {
-            if (options.resizable || options.movable)
-                $box.mousemove(areaMouseMove).mousedown(areaMouseDown);
-
-            if (!options.persistent)
-                $img.add($o).mousedown(imgMouseDown);
-            $(window).resize(parentScroll);
-            $img.add($img.parents()).scroll(parentScroll);
-        }
-
-        options.enable = options.disable = undefined;
-    };
-
-    if ($.browser.msie)
-        $img.attr('unselectable', 'on');
-
-    $.imgAreaSelect.keyPress = $.browser.msie ||
-        $.browser.safari ? 'keydown' : 'keypress';
-
-    if ($.browser.opera)
-        ($areaOpera = $('<div style="width: 100%; height: 100%; position: absolute;" />'))
-            .css({ zIndex: zIndex > 0 ? zIndex + 2 : '2' });
-
-    this.setOptions(options = $.extend({
-        borderColor1: '#000',
-        borderColor2: '#fff',
-        borderWidth: 1,
-        borderOpacity: .5,
-        classPrefix: 'imgareaselect',
-        movable: true,
-        resizable: true,
-        selectionColor: '#fff',
-        selectionOpacity: 0,
-        outerColor: '#000',
-        outerOpacity: .4,
-        parent: 'body',
-        onSelectStart: function () {},
-        onSelectChange: function () {},
-        onSelectEnd: function () {}
-    }, options));
-
-    $box.add($o).css({ visibility: 'hidden', position: position,
-        overflow: 'hidden', zIndex: zIndex > 0 ? zIndex : '0' });
-    $area.css({ borderStyle: 'solid' });
-    $box.css({ position: position, zIndex: zIndex > 0 ? zIndex + 2 : '2' });
-    $area.add($border1).add($border2).css({ position: 'absolute' });
-
-    img.complete || img.readyState == 'complete' || !$img.is('img') ?
-        imgLoad() : $img.one('load', imgLoad);
-};
-
-$.fn.imgAreaSelect = function (options) {
-    options = options || {};
-
-    this.each(function () {
-        if ($(this).data('imgAreaSelect'))
-            $(this).data('imgAreaSelect').setOptions(options);
-        else {
-            if (options.enable === undefined && options.disable === undefined)
-                options.enable = true;
-
-            $(this).data('imgAreaSelect', new $.imgAreaSelect.init(this, options));
-        }
-    });
-
-    return this;
-};
-
-})(jQuery);
diff --git a/mod/profile/views/default/profile/css.php b/mod/profile/views/default/profile/css.php
index 537d9261e..812daf16d 100644
--- a/mod/profile/views/default/profile/css.php
+++ b/mod/profile/views/default/profile/css.php
@@ -308,38 +308,6 @@ p.visit_twitter a {
 	border-top:1px solid #dedede;
 }
 
-
-/* ***************************************
-	user avatar upload & crop page
-*************************************** */
-#avatar_upload {
-	height:145px;
-}	
-#current_user_avatar {
-	float:left;
-	width:160px;
-	height:130px;
-	border-right:1px solid #cccccc;
-	margin:0 20px 0 0;
-}	
-#avatar_croppingtool {
-	border-top: 1px solid #cccccc;
-	margin:20px 0 0 0;
-	padding:10px 0 0 0;
-}	
-#user_avatar {
-	float: left;
-	margin-right: 20px;
-}	
-#user_avatar_preview {
-	float: left;
-	position: relative;
-	overflow: hidden;
-	width: 100px;
-	height: 100px;
-}
-
-
 /* ***************************************
 	banned user
 *************************************** */
diff --git a/mod/profile/views/default/profile/editicon.php b/mod/profile/views/default/profile/editicon.php
deleted file mode 100644
index 878ec504b..000000000
--- a/mod/profile/views/default/profile/editicon.php
+++ /dev/null
@@ -1,43 +0,0 @@
-<?php
-/**
- * Elgg profile icon edit form
- * 
- * @package ElggProfile
- * 
- * @uses $vars['entity'] The user entity
- * @uses $vars['profile'] Profile items from $CONFIG->profile, defined in profile/start.php for now 
- */
-
-// user is passed to view and set by caller (normally the page editicon)
-$currentuser = get_loggedin_user();
-?>
-<div id="edit_profile_avatar">
-
-<p class="margin-top"><?php echo elgg_echo('profile:profilepictureinstructions'); ?></p>
-
-<div id="current_user_avatar">
-
-	<label><?php echo elgg_echo('profile:currentavatar'); ?></label>
-	<?php 
-		
-		$user_avatar = $currentuser->getIcon('medium');
-		echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />";
-
-	?>
-
-</div>
-
-<div id="avatar_upload">
-<?php
-	echo elgg_view_form('avatar/upload', array('enctype' => 'multipart/form-data'), array('entity' => $currentuser));
-?>
-</div>
-	
-<div id="avatar_croppingtool">	
-<label><?php echo elgg_echo('profile:profilepicturecroppingtool'); ?></label><br />
-
-<?php echo elgg_view_form('avatar/crop', array(), array('entity' => get_loggedin_user()));
-?>
-
-</div>
-</div>
diff --git a/mod/profile/views/default/profile/profile_ownerblock.php b/mod/profile/views/default/profile/profile_ownerblock.php
index 216734aa5..3fb5f509e 100755
--- a/mod/profile/views/default/profile/profile_ownerblock.php
+++ b/mod/profile/views/default/profile/profile_ownerblock.php
@@ -39,7 +39,7 @@ $profile_actions = "";
 if (isloggedin() && (get_loggedin_userid() == elgg_get_page_owner_guid())) {
 	$profile_actions = "<div class='clearfix profile_actions'>";
 	$profile_actions .= "<a href='".elgg_get_site_url()."pg/profile/{$user->username}/edit/details' class='action-button'>". elgg_echo('profile:edit') ."</a>";
-	$profile_actions .= "<a href='".elgg_get_site_url()."pg/profile/{$user->username}/edit/icon' class='action-button'>". elgg_echo('profile:editicon') ."</a>";
+	$profile_actions .= "<a href='".elgg_get_site_url()."pg/avatar/edit/{$user->username}' class='action-button'>". elgg_echo('avatar:edit') ."</a>";
 	$profile_actions .= "</div>";
 } else {
 	$profile_actions = "<div class='profile_actions'>";
diff --git a/pages/avatar/edit.php b/pages/avatar/edit.php
new file mode 100644
index 000000000..a577170a0
--- /dev/null
+++ b/pages/avatar/edit.php
@@ -0,0 +1,20 @@
+<?php
+/**
+ * Upload and crop an avatar page
+ */
+
+// Only logged in users
+gatekeeper();
+
+$title = elgg_echo('avatar:edit');
+
+$content = elgg_view('core/avatar/upload', array('entity' => elgg_get_page_owner()));
+$content .= elgg_view('core/avatar/crop', array('entity' => elgg_get_page_owner()));
+
+$params = array(
+	'content' => $content,
+	'title' => $title,
+);
+$body = elgg_view_layout('one_sidebar', $params);
+
+echo elgg_view_page($title, $body);
diff --git a/pages/avatar/view.php b/pages/avatar/view.php
new file mode 100644
index 000000000..ed8a47d59
--- /dev/null
+++ b/pages/avatar/view.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * View an avatar
+ */
+
+$user = elgg_get_page_owner();
+
+// Get the size
+$size = strtolower(get_input('size'));
+if (!in_array($size, array('master', 'large', 'medium', 'small', 'tiny', 'topbar'))) {
+	$size = 'medium';
+}
+
+// If user doesn't exist, return default icon
+if (!$user) {
+	$path = elgg_view("icon/user/default/$size");
+	header("Location: $path");
+	exit;
+}
+
+// Try and get the icon
+$filehandler = new ElggFile();
+$filehandler->owner_guid = $user->getGUID();
+$filehandler->setFilename("profile/" .  $user->getGUID() . $size . ".jpg");
+
+$success = false;
+if ($filehandler->open("read")) {
+	if ($contents = $filehandler->read($filehandler->size())) {
+		$success = true;
+	}
+}
+
+if (!$success) {
+	global $CONFIG;
+	$path = elgg_view('icon/user/default/'.$size);
+	header("Location: {$path}");
+	exit;
+}
+
+header("Content-type: image/jpeg");
+header('Expires: ' . date('r', time() + 864000));
+header("Pragma: public");
+header("Cache-Control: public");
+header("Content-Length: " . strlen($contents));
+
+echo $contents;
diff --git a/mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js b/vendors/jquery/jquery.imgareaselect-0.8.min.js
index d9605de1d..d9605de1d 100644
--- a/mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js
+++ b/vendors/jquery/jquery.imgareaselect-0.8.min.js
diff --git a/views/default/core/avatar/crop.php b/views/default/core/avatar/crop.php
new file mode 100644
index 000000000..499e2af4e
--- /dev/null
+++ b/views/default/core/avatar/crop.php
@@ -0,0 +1,16 @@
+<?php
+/**
+ * Avatar cropping view
+ *
+ * @uses vars['entity']
+ */
+
+?>
+<div id="avatar-croppingtool">
+	<label><?php echo elgg_echo('avatar:crop:title'); ?></label>
+	<br />
+	<p>
+		<?php echo elgg_echo("avatar:create:instructions"); ?>
+	</p>
+	<?php echo elgg_view_form('avatar/crop', array(), $vars); ?>
+</div>
diff --git a/views/default/core/avatar/upload.php b/views/default/core/avatar/upload.php
new file mode 100644
index 000000000..8d920a900
--- /dev/null
+++ b/views/default/core/avatar/upload.php
@@ -0,0 +1,26 @@
+<?php
+/**
+ * Avatar upload view
+ *
+ * @uses $vars['entity']
+ */
+
+$user_avatar = $vars['entity']->getIcon('medium');
+
+?>
+
+<p class="mtm">
+	<?php echo elgg_echo('avatar:upload:instructions'); ?>
+</p>
+
+<div id="current-user-avatar">
+	<label><?php echo elgg_echo('avatar:current'); ?></label>
+	<?php echo "<img src=\"{$user_avatar}\" alt=\"avatar\" />"; ?>
+</div>
+
+<div id="avatar-upload">
+<?php
+	$form_params = array('enctype' => 'multipart/form-data');
+	echo elgg_view_form('avatar/upload', $form_params, $vars);
+?>
+</div>
diff --git a/views/default/css/screen.php b/views/default/css/screen.php
index e75fea1ec..cbf4e2b2d 100644
--- a/views/default/css/screen.php
+++ b/views/default/css/screen.php
@@ -107,6 +107,36 @@ echo elgg_view('css/elements/skin', $vars);
 }
 
 /* ***************************************
+	AVATAR
+*************************************** */
+#avatar-upload {
+	height:145px;
+}
+#current-user-avatar {
+	float:left;
+	width:160px;
+	height:130px;
+	border-right:1px solid #cccccc;
+	margin:0 20px 0 0;
+}
+#avatar-croppingtool {
+	border-top: 1px solid #cccccc;
+	margin:20px 0 0 0;
+	padding:10px 0 0 0;
+}
+#user-avatar {
+	float: left;
+	margin-right: 20px;
+}
+#user-avatar-preview {
+	float: left;
+	position: relative;
+	overflow: hidden;
+	width: 100px;
+	height: 100px;
+}
+
+/* ***************************************
 	WIDGETS
 *************************************** */
 .widget-column {
diff --git a/views/default/forms/avatar/crop.php b/views/default/forms/avatar/crop.php
index 1082ab803..856546020 100644
--- a/views/default/forms/avatar/crop.php
+++ b/views/default/forms/avatar/crop.php
@@ -9,10 +9,7 @@ $master_image = $vars['entity']->getIcon('master');
 
 ?>
 <p>
-	<?php echo elgg_echo("avatar:create:instructions"); ?>
-</p>
-<p>
-	<img id="user_avatar" src="<?php echo $master_image; ?>" alt="<?php echo elgg_echo('avatar'); ?>" />
+	<img id="user-avatar" src="<?php echo $master_image; ?>" alt="<?php echo elgg_echo('avatar'); ?>" />
 </p>
 
 <div class="clearfloat"></div>
@@ -28,7 +25,7 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 
 ?>
 <!-- grab the required js for icon cropping -->
-<script type="text/javascript" src="<?php echo elgg_get_site_url(); ?>mod/profile/views/default/js/jquery.imgareaselect-0.8.min.js"></script>
+<script type="text/javascript" src="<?php echo elgg_get_site_url(); ?>vendors/jquery/jquery.imgareaselect-0.8.min.js"></script>
 
 <script type="text/javascript">
 
@@ -39,11 +36,11 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 			return;
 		}
 
-		var origWidth = $("#user_avatar").width(); //get the width of the users master photo
-		var origHeight = $("#user_avatar").height(); //get the height of the users master photo
+		var origWidth = $("#user-avatar").width(); //get the width of the users master photo
+		var origHeight = $("#user-avatar").height(); //get the height of the users master photo
 		var scaleX = 100 / selection.width;
 		var scaleY = 100 / selection.height;
-		$('#user_avatar_preview > img').css({
+		$('#user-avatar-preview > img').css({
 			width: Math.round(scaleX * origWidth) + 'px',
 			height: Math.round(scaleY * origHeight) + 'px',
 			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
@@ -60,12 +57,12 @@ echo elgg_view('input/submit', array('value' => elgg_echo('avatar:create')));
 	}
 
 	$(document).ready(function() {
-		$('<div id="user_avatar_preview"><img src="<?php echo $master_image; ?>" /></div>').insertAfter($('#user_avatar'));
-        $('<div id="user_avatar_preview_title"><label><?php echo elgg_echo('avatar:preview'); ?></label></div>').insertBefore($('#user_avatar_preview'));
+		$('<div id="user-avatar-preview"><img src="<?php echo $master_image; ?>" /></div>').insertAfter($('#user-avatar'));
+        $('<div id="user-avatar-preview-title"><label><?php echo elgg_echo('avatar:preview'); ?></label></div>').insertBefore($('#user-avatar-preview'));
 
 		// this produces the coordinates
-		$('#user_avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
+		$('#user-avatar').imgAreaSelect({ selectionOpacity: 0, onSelectEnd: selectChange });
 		// show the preview
-		$('#user_avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
+		$('#user-avatar').imgAreaSelect({ aspectRatio: '1:1', onSelectChange: preview });
 	});
 </script>
diff --git a/views/default/forms/avatar/upload.php b/views/default/forms/avatar/upload.php
index 733e2996c..4354d691a 100644
--- a/views/default/forms/avatar/upload.php
+++ b/views/default/forms/avatar/upload.php
@@ -8,7 +8,7 @@
 echo elgg_view('input/hidden', array('internalname' => 'guid', 'value' => $vars['entity']->guid));
 ?>
 <p>
-	<label><?php echo elgg_echo("profile:editicon"); ?></label><br />
+	<label><?php echo elgg_echo("avatar:upload"); ?></label><br />
 	<?php echo elgg_view("input/file",array('internalname' => 'avatar')); ?>
 <br />
 	<?php echo elgg_view('input/submit', array('value' => elgg_echo('upload'))); ?>