The first part of Pedro's tagging code

5 files changed, 1247 insertions, 10 deletions

diff --git a/languages/en.php b/languages/en.php
index 6b2d51374..20c1f3cee 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -53,6 +53,12 @@
 			'image:none' => "No images have been added yet.",

 			'image:back' => "Back",

 			'image:next' => "Next",

+			

+		// tagging

+			'image:doclickfortag' => 'Click on the faces of people to label them.',

+			'image:finish_tagging' => 'Stop labeling',

+			'image:tagthisphoto' => 'Tag this photo',

+			'image:actiontag' => 'Tag',

 		

 		//widgets

 		

diff --git a/vendors/jquery.imgareaselect-0.6.2.js b/vendors/jquery.imgareaselect-0.6.2.js
new file mode 100644
index 000000000..76f77ee98
--- /dev/null
+++ b/vendors/jquery.imgareaselect-0.6.2.js
@@ -0,0 +1,554 @@
+/*

+ * imgAreaSelect jQuery plugin

+ * version 0.6.2

+ *

+ * Copyright (c) 2008 Michal Wojciechowski (odyniec.net)

+ *

+ * Dual licensed under the MIT (MIT-LICENSE.txt) 

+ * and GPL (GPL-LICENSE.txt) licenses.

+ *

+ * http://odyniec.net/projects/imgareaselect/

+ *

+ */

+

+jQuery.imgAreaSelect = { onKeyPress: null };

+

+jQuery.imgAreaSelect.init = function (img, options) {

+    var $area = jQuery('<div></div>'),

+        $border1 = jQuery('<div></div>'),

+        $border2 = jQuery('<div></div>'),

+        $outLeft = jQuery('<div></div>'),

+        $outTop = jQuery('<div></div>'),

+        $outRight = jQuery('<div></div>'),

+        $outBottom = jQuery('<div></div>'),

+        left, top, imgOfs, imgWidth, imgHeight, parent, parOfs, parScroll,

+        adjusted, zIndex = 0, fixed, $p, startX, startY, moveX, moveY,

+        resizeMargin = 10, resize = [ ], V = 0, H = 1,

+        keyDown, d, aspectRatio, x1, x2, y1, y2, x, y,

+        selection = { x1: 0, y1: 0, x2: 0, y2: 0, width: 0, height: 0 };

+

+    var $a = $area.add($border1).add($border2);

+    var $o = $outLeft.add($outTop).add($outRight).add($outBottom);

+

+    function viewX(x)

+    {

+        return x + imgOfs.left + parScroll.left - parOfs.left;

+    }

+

+    function viewY(y)

+    {

+        return y + imgOfs.top + parScroll.top - parOfs.top;

+    }

+

+    function selX(x)

+    {

+        return x - imgOfs.left - parScroll.left + parOfs.left;

+    }

+

+    function selY(y)

+    {

+        return y - imgOfs.top - parScroll.top + parOfs.top;

+    }

+

+    function evX(event)

+    {

+        return event.pageX + parScroll.left - parOfs.left;

+    }

+

+    function evY(event)

+    {

+        return event.pageY + parScroll.top - parOfs.top;

+    }

+

+    function adjust()

+    {

+        imgOfs = jQuery(img).offset();

+        imgWidth = jQuery(img).width();

+        imgHeight = jQuery(img).height(); 

+

+        if (jQuery(parent).is('body'))

+            parOfs = parScroll = { left: 0, top: 0 };

+        else {

+            parOfs = jQuery(parent).offset();

+            parScroll = { left: parent.scrollLeft, top: parent.scrollTop };

+        }

+

+        left = viewX(0);

+        top = viewY(0);

+    }

+

+    function update(resetKeyPress)

+    {

+        $a.css({

+            left: viewX(selection.x1) + 'px',

+            top: viewY(selection.y1) + 'px',

+            width: Math.max(selection.width - options.borderWidth * 2, 0) + 'px',

+            height: Math.max(selection.height - options.borderWidth * 2, 0) + 'px'

+        });

+        $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 (resetKeyPress !== false) {

+            if (jQuery.imgAreaSelect.keyPress != docKeyPress)

+                jQuery(document).unbind(jQuery.imgAreaSelect.keyPress,

+                    jQuery.imgAreaSelect.onKeyPress);

+

+            if (options.keys)

+                jQuery(document).bind(jQuery.imgAreaSelect.keyPress,

+                    jQuery.imgAreaSelect.onKeyPress = docKeyPress);

+        }

+    }

+

+    function areaMouseMove(event)

+    {

+        if (!adjusted) {

+            adjust();

+            adjusted = true;

+

+            $a.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';

+        }

+

+        $border2.css('cursor', resize.length ? resize.join('') + '-resize' :

+            options.movable ? 'move' : '');

+    }

+

+    function areaMouseDown(event)

+    {

+        if (event.which != 1) return false;

+

+        adjust();

+

+        if (options.resizable && resize.length > 0) {

+            jQuery('body').css('cursor', resize.join('') + '-resize');

+

+            x1 = viewX(resize[H] == 'w' ? selection.x2 : selection.x1);

+            y1 = viewY(resize[V] == 'n' ? selection.y2 : selection.y1);

+

+            jQuery(document).mousemove(selectingMouseMove);

+            $border2.unbind('mousemove', areaMouseMove);

+

+            jQuery(document).one('mouseup', function () {

+                resize = [ ];

+

+                jQuery('body').css('cursor', '');

+

+                if (options.autoHide)

+                    $a.add($o).hide();

+

+                options.onSelectEnd(img, selection);

+

+                jQuery(document).unbind('mousemove', selectingMouseMove);

+                $border2.mousemove(areaMouseMove);

+            });

+        }

+        else if (options.movable) {

+            moveX = selection.x1 + left;

+            moveY = selection.y1 + top;

+            startX = evX(event);

+            startY = evY(event);

+

+            jQuery(document).mousemove(movingMouseMove)

+                .one('mouseup', function () {

+                    options.onSelectEnd(img, selection);

+

+                    jQuery(document).unbind('mousemove', movingMouseMove);

+                });

+        }

+        else

+            jQuery(img).mousedown(event);

+

+        return false;

+    }

+

+    function aspectRatioXY()

+    {

+        x2 = Math.max(left, Math.min(left + imgWidth,

+            x1 + Math.abs(y2 - y1) * aspectRatio * (x2 >= x1 ? 1 : -1)));

+        y2 = Math.round(Math.max(top, Math.min(top + imgHeight,

+            y1 + Math.abs(x2 - x1) / aspectRatio * (y2 >= y1 ? 1 : -1))));

+        x2 = Math.round(x2);

+    }

+

+    function aspectRatioYX()

+    {

+        y2 = Math.max(top, Math.min(top + imgHeight,

+            y1 + Math.abs(x2 - x1) / aspectRatio * (y2 >= y1 ? 1 : -1)));

+        x2 = Math.round(Math.max(left, Math.min(left + imgWidth,

+            x1 + Math.abs(y2 - y1) * aspectRatio * (x2 >= x1 ? 1 : -1))));

+        y2 = Math.round(y2);

+    }

+

+    function doResize(newX2, newY2)

+    {

+        x2 = newX2;

+        y2 = newY2;

+

+        if (options.minWidth && Math.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 && Math.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 = Math.max(left, Math.min(x2, left + imgWidth));

+        y2 = Math.max(top, Math.min(y2, top + imgHeight));

+

+        if (aspectRatio)

+            if (Math.abs(x2 - x1) / aspectRatio > Math.abs(y2 - y1))

+                aspectRatioYX();

+            else

+                aspectRatioXY();

+

+        if (options.maxWidth && Math.abs(x2 - x1) > options.maxWidth) {

+            x2 = x1 - options.maxWidth * (x2 < x1 ? 1 : -1);

+            if (aspectRatio) aspectRatioYX();

+        }

+

+        if (options.maxHeight && Math.abs(y2 - y1) > options.maxHeight) {

+            y2 = y1 - options.maxHeight * (y2 < y1 ? 1 : -1);

+            if (aspectRatio) aspectRatioXY();

+        }

+

+        selection.x1 = selX(Math.min(x1, x2));

+        selection.x2 = selX(Math.max(x1, x2));

+        selection.y1 = selY(Math.min(y1, y2));

+        selection.y2 = selY(Math.max(y1, y2));

+        selection.width = Math.abs(x2 - x1);

+        selection.height = Math.abs(y2 - y1);

+

+        update();

+

+        options.onSelectChange(img, selection);

+    }

+

+    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(x2, y2);

+

+        return false;        

+    }

+

+    function doMove(newX1, newY1)

+    {

+        x2 = (x1 = newX1) + selection.width;

+        y2 = (y1 = newY1) + selection.height;

+

+        selection.x1 = selX(x1);

+        selection.y1 = selY(y1);

+        selection.x2 = selX(x2);

+        selection.y2 = selY(y2);

+

+        update();

+

+        options.onSelectChange(img, selection);

+    }

+

+    function movingMouseMove(event)

+    {

+        var newX1 = Math.max(left, Math.min(moveX + evX(event) - startX,

+            left + imgWidth - selection.width));

+        var newY1 = Math.max(top, Math.min(moveY + evY(event) - startY,

+            top + imgHeight - selection.height));

+

+        doMove(newX1, newY1);

+

+        event.preventDefault();     

+        return false;

+    }

+

+    function startSelection(event)

+    {

+    		sizePredef = 70;

+    		

+    		adjust();

+        

+        selection.x1 =  selX(startX = x1 = x2 = evX(event)) - parseInt(sizePredef/2);

+        selection.y1 =  selY(startY = y1 = y2 = evY(event)) - parseInt(sizePredef/2);

+        

+        selection.x2 = selection.x1 + sizePredef; 

+        selection.y2 = selection.y1 + sizePredef;

+        

+        selection.width = 70;

+        selection.height = 70;

+        

+        console.log(selection);

+

+        resize = [ ];

+

+        update();

+        $a.add($o).show();

+

+        jQuery(document).unbind('mouseup', cancelSelection)

+            .mousemove(selectingMouseMove);

+        $border2.unbind('mousemove', areaMouseMove);

+

+        options.onSelectStart(img, selection);

+

+        jQuery(document).one('mouseup', function () {

+            if (options.autoHide || (selection.width * selection.height == 0))

+                $a.add($o).hide();

+

+            options.onSelectEnd(img, selection);

+

+            jQuery(document).unbind('mousemove', selectingMouseMove);

+            $border2.mousemove(areaMouseMove);

+        });

+    }

+

+    function cancelSelection()

+    {

+		//Ocultamos cualquier menu

+		jQuery('#cont-menu').hide();

+        jQuery(document).unbind('mousemove', startSelection);

+        $a.add($o).hide();

+        

+        selection.x1 = selection.y1 = selection.x2 = selection.y2 = 

+            selection.width = selection.height = 0;

+

+        options.onSelectChange(img, selection);

+        options.onSelectEnd(img, selection);

+    }

+

+    function imgMouseDown(event)

+    {

+        if (event.which != 1) return false;

+

+        jQuery(document).one('mousemove', startSelection)

+            .one('mouseup', cancelSelection);

+        

+        jQuery(document).trigger('mousemove',event);

+

+        return false;

+    }

+

+    function windowResize()

+    {

+        adjust();

+        update(false);

+        x1 = viewX(selection.x1);

+        y1 = viewY(selection.y1);

+        x2 = viewX(selection.x2);

+        y2 = viewY(selection.y2);

+    }

+

+    var docKeyPress = function(event) {

+        var k = options.keys, d = 10, t,

+            key = event.keyCode || event.which;

+

+        if (!isNaN(k.arrows)) d = k.arrows;

+        if (!isNaN(k.shift) && event.shiftKey) d = k.shift;

+        if (!isNaN(k.ctrl) && event.ctrlKey) d = k.ctrl;

+        if (!isNaN(k.alt) && (event.altKey || event.originalEvent.altKey)) d = k.alt;

+

+        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 = Math.max(x1, x2);

+                x1 = Math.min(x1, x2);

+                x2 = Math.max(t + d, x1);

+                if (aspectRatio) aspectRatioYX();

+                break;

+            case 38:

+                d = -d;

+            case 40:

+                t = Math.max(y1, y2);

+                y1 = Math.min(y1, y2);

+                y2 = Math.max(t + d, y1);

+                if (aspectRatio) aspectRatioXY();

+                break;

+            default:

+                return;

+            }

+

+            doResize(x2, y2);

+        }

+        else {

+            x1 = Math.min(x1, x2);

+            y1 = Math.min(y1, y2);

+

+            switch (key) {

+            case 37:

+                doMove(Math.max(x1 - d, left), y1);

+                break;

+            case 38:

+                doMove(x1, Math.max(y1 - d, top));

+                break;

+            case 39:

+                doMove(x1 + Math.min(d, imgWidth - selX(x2)), y1);

+                break;

+            case 40:

+                doMove(x1, y1 + Math.min(d, imgHeight - selY(y2)));

+                break;

+            default:

+                return;

+            }

+        }

+

+        return false;

+    };

+

+    this.setOptions = function(newOptions)

+    {

+        options = jQuery.extend(options, newOptions);

+

+        if (newOptions.x1 != null) {

+            selection.x1 = newOptions.x1;

+            selection.y1 = newOptions.y1;

+            selection.x2 = newOptions.x2;

+            selection.y2 = newOptions.y2;

+            newOptions.show = true;

+        }

+

+        if (newOptions.keys)

+            options.keys = jQuery.extend({ shift: 1, ctrl: 'resize' },

+                newOptions.keys === true ? { } : newOptions.keys);

+

+        parent = jQuery(options.parent).get(0);

+

+        adjust();

+

+        $p = jQuery(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') fixed = true;

+

+            $p = $p.parent();

+        }

+

+        x1 = viewX(selection.x1);

+        y1 = viewY(selection.y1);

+        x2 = viewX(selection.x2);

+        y2 = viewY(selection.y2);

+        selection.width = x2 - x1;

+        selection.height = y2 - y1;

+

+        update();

+

+        if (newOptions.hide)

+            $a.add($o).hide();

+        else if (newOptions.show)

+            $a.add($o).show();

+

+        $o.addClass(options.classPrefix + '-outer');

+        $area.addClass(options.classPrefix + '-selection');

+        $border1.addClass(options.classPrefix + '-border1');

+        $border2.addClass(options.classPrefix + '-border2');

+

+        $a.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 });

+        $o.css({ opacity: options.outerOpacity, backgroundColor: options.outerColor });

+

+        aspectRatio = options.aspectRatio && (d = options.aspectRatio.split(/:/)) ?

+            d[0] / d[1] : null;

+

+        if (options.disable || options.enable === false) {

+            $a.unbind('mousemove', areaMouseMove).unbind('mousedown', areaMouseDown);

+            jQuery(img).add($o).unbind('mousedown', imgMouseDown);

+            jQuery(window).unbind('resize', windowResize);

+        }

+        else if (options.enable || options.disable === false) {

+            if (options.resizable || options.movable)

+                $a.mousemove(areaMouseMove).mousedown(areaMouseDown);

+

+            if (!options.persistent)

+                jQuery(img).add($o).mousedown(imgMouseDown);

+            jQuery(window).resize(windowResize);

+        }

+

+        jQuery(options.parent).append($o.add($a));

+

+        options.enable = options.disable = undefined;

+    };

+

+    if (jQuery.browser.msie)   

+        jQuery(img).attr('unselectable', 'on');

+

+    jQuery.imgAreaSelect.keyPress = jQuery.browser.msie ||

+        jQuery.browser.safari ? 'keydown' : 'keypress';

+

+    $a.add($o).css({ display: 'none', position: fixed ? 'fixed' : 'absolute',

+        overflow: 'hidden', zIndex: zIndex > 0 ? zIndex : '0' });

+    $area.css({ borderStyle: 'solid' });

+

+    initOptions = {

+        borderColor1: '#000',

+        borderColor2: '#fff',

+        borderWidth: 1,

+        classPrefix: 'imgareaselect',

+        movable: true,

+        resizable: true,

+        selectionColor: '#fff',

+        selectionOpacity: 0.2,

+        outerColor: '#000',

+        outerOpacity: 0.2,

+        parent: 'body',

+        onSelectStart: function () {},

+        onSelectChange: function () {},

+        onSelectEnd: function () {}

+    };

+

+    options = jQuery.extend(initOptions, options);

+    this.setOptions(options);

+};

+

+jQuery.fn.imgAreaSelect = function (options) {

+    options = options || {};

+

+    this.each(function () {

+        if (jQuery(this).data('imgAreaSelect'))

+            jQuery(this).data('imgAreaSelect').setOptions(options);

+        else {

+            if (options.enable === undefined && options.disable === undefined)

+                options.enable = true;

+

+            jQuery(this).data('imgAreaSelect', new jQuery.imgAreaSelect.init(this, options));

+        }

+    });

+

+    return this;

+};

diff --git a/vendors/jquery.quicksearch.js b/vendors/jquery.quicksearch.js
new file mode 100644
index 000000000..d572514e7
--- /dev/null
+++ b/vendors/jquery.quicksearch.js
@@ -0,0 +1,345 @@
+jQuery(function ($) {

+	$.fn.quicksearch = function (opt) {

+		

+		function is_empty(i) 

+		{

+			return (i === null || i === undefined || i === false) ? true: false;

+		}

+		

+		function strip_html(input)

+		{

+			var regexp = new RegExp(/\<[^\<]+\>/g);

+			var output = input.replace(regexp, "");

+			output = $.trim(output.toLowerCase().replace(/\n/, '').replace(/\s{2,}/, ' '));

+			return output;

+		}

+		

+		function get_key()

+		{

+			var input = strip_html($('input[rel="' + options.randomElement + '"]').val());

+			

+			if (input.indexOf(' ') === -1)

+			{

+				return input;

+			}

+			else

+			{

+				return input.split(" ");

+			}

+		}

+		

+		function test_key(k, value, type)

+		{

+			if (type === "string")

+			{

+				return test_key_string(k, value);

+			}

+			else

+			{

+				return test_key_arr(k, value);

+			}

+		}

+		

+		function test_key_string(k, value)

+		{

+			return (value.indexOf(k) > -1);

+		}

+		

+		function test_key_arr(k, value)

+		{

+			for (var i = 0; i < k.length; i++) {

+				var test = value.indexOf(k[i]);	

+				if (test === -1) {	

+					return false;

+				}

+			}			

+			return true;

+		}

+		

+		function select_element(el) 

+		{

+			if (options.hideElement === "grandparent") 

+			{

+				return $(el).parent().parent();

+			} 

+			else if (options.hideElement === "parent") 

+			{

+				return $(el).parent();

+			} 

+			else

+			{

+				return $(el);

+			}

+		}

+		

+		function stripe(el)

+		{

+			if (doStripe)

+			{

+				var i = 0;

+				select_element(el).filter(':visible').each(function () {

+					

+					for (var j = 0; j < stripeRowLength; j++)

+					{

+						if (i === j)

+						{

+							$(this).addClass(options.stripeRowClass[i]);

+							

+						}

+						else

+						{

+							$(this).removeClass(options.stripeRowClass[j]);

+						}

+					}

+					i = (i + 1) % stripeRowLength;

+				});

+			}

+		}

+		

+		function fix_widths(el)

+		{

+			$(el).find('td').each(function () {

+				$(this).attr('width', parseInt($(this).css('width')));

+			});

+		}

+		

+		function loader(o) {

+			if (options.loaderId) 

+			{

+				var l = $('input[rel="' + options.randomElement + '"]').parent().find('.loader');

+				if (o === 'hide') 

+				{

+					l.hide();

+				} 

+				else 

+				{

+					l.show();

+				}

+			}			

+		}

+		

+		function place_form() {

+			var formPosition = options.position;

+			var formAttached = options.attached;

+

+			if (formPosition === 'before') {

+				$(formAttached).before(make_form());

+			} else if (formPosition === 'prepend') {

+				$(formAttached).prepend(make_form());

+			} else if (formPosition === 'append') {

+				$(formAttached).append(make_form());

+			} else {

+				$(formAttached).after(make_form());

+			}

+		}

+				

+		function make_form_label()

+		{

+			if (!is_empty(options.labelText)) {

+				return '<label for="' + options.randomElement + '" '+

+							'class="' + options.labelClass + '">'

+							+ options.labelText

+							+ '</label> ';	

+			}

+			return '';

+		}

+		

+		function make_form_input()

+		{

+			var val = (!is_empty(options.inputText)) ? options.inputText : ""

+			return '<input type="text" value="' + val + '" rel="' + options.randomElement  + '" class="' + options.inputClass + '" id="' + options.randomElement + '" /> ';

+		}

+		

+		function make_form_loader()

+		{

+			if (!is_empty(options.loaderImg)) {

+				return '<img src="' + options.loaderImg + '" alt="Loading" id="' + options.loaderId + '" class="' + options.loaderClass + '" />';

+			} else {

+				return '<span id="' + options.loaderId + '" class="' + options.loaderClass + '">' + options.loaderText + '</span>';

+			}

+		}

+		

+		function make_form()

+		{

+			var f = (!options.isFieldset) ? 'form' : 'fieldset';

+			/*return '<' + f + ' action="#" ' + 'id="'+ options.formId + '" ' + 'class="quicksearch">' +

+						make_form_label() +	make_form_input() + make_form_loader() +

+					'</' + f + '>';*/

+			return make_form_label() +	make_form_input() + make_form_loader() 

+		}

+			

+		function focus_on_load()

+		{

+			$('input[rel="' + options.randomElement + '"]').get(0).focus();

+		}

+		

+		function toggle_text() {

+			$('input[rel="' + options.randomElement + '"]').focus(function () {

+				if ($(this).val() === options.inputText) {

+					$(this).val('');

+				}

+			});

+			$('input[rel="' + options.randomElement + '"]').blur(function () {

+				if ($(this).val() === "") {

+					$(this).val(options.inputText);

+				}

+			});

+		}

+		

+		function get_cache(el) 

+		{

+			return $(el).map(function(){

+				return strip_html(this.innerHTML);

+			});

+		}

+		

+		function init()

+		{

+			place_form();

+			if (options.fixWidths) fix_widths(el);

+			if (options.focusOnLoad) focus_on_load();

+			if (options.inputText != "" && options.inputText != null) toggle_text();

+			

+			cache = get_cache(el);

+			

+			stripe(el);

+			loader('hide');

+		}

+		

+		function qs() 

+		{

+			clearTimeout(timeout);

+			timeout = setTimeout(function () {

+				

+				loader('show');

+				

+				setTimeout(function () {

+					options.onBefore();

+					

+					var k = get_key();

+					var k_type = (typeof k);

+					var i = 0;

+					

+					k = options.filter(k);

+					

+					if (k != "")

+					{

+						if (typeof score[k] === "undefined")

+						{

+							score[k] = new Array();

+							cache.each(function (i) {

+								if (test_key(k, cache[i], k_type))

+								{

+									score[k][i] = true;

+								}

+							});

+						}

+						

+						if (score[k].length === 0)

+						{

+							select_element(el).hide();

+						}

+						else

+						{

+							/*console.log(score[k].length);

+							if(score[k].length==1)

+							{

+								//$(el).parents('ul').find('li:visible:eq(0) a').addClass('selected');

+							}

+							else

+							{

+								//$(el).parents('ul').find('li:visible:eq(0) a').removeClass('selected')

+							}*/

+							

+							$(el).each(function (i) {

+								if (score[k][i])

+								{

+									select_element(this).show();

+								}

+								else

+								{

+									select_element(this).hide();

+								}

+							}

+							);

+

+							if($(el).parents('ul').find('li:visible').length==1)

+								$(el).parents('ul').find('li:visible:eq(0) a').addClass('selected');

+							else

+								$(el).parents('ul').find('li:visible:eq(0) a').removeClass('selected');

+								

+						}

+					}

+					else

+					{

+						select_element(el).show();

+					}

+				

+					stripe(el);

+				}, options.delay/2);

+				

+				setTimeout( function () { 

+					loader('hide');

+				}, options.delay/2);

+				

+				options.onAfter();

+				

+			}, options.delay/2);

+		}

+		

+		var options = $.extend({

+			position: 'prepend',

+			attached: 'body',

+			formId: 'quicksearch',

+			labelText: 'Quick Search',

+			labelClass: 'qs_label',

+			inputText: null,

+			inputClass: 'qs_input',

+			loaderId: 'loader',

+			loaderClass: 'loader',

+			loaderImg: null,

+			loaderText: 'Loading...',

+			stripeRowClass: null,

+			hideElement: null,

+			delay: 500,

+			focusOnLoad: false,

+			onBefore: function () { },

+			onAfter: function () { },

+			filter: function (i) { 

+				return i;

+			},

+			randomElement: 'qs' + Math.floor(Math.random() * 1000000),

+			isFieldset: false,

+			fixWidths: false

+		}, opt);

+		

+		var timeout;

+		var score = {};

+		var stripeRowLength = (!is_empty(options.stripeRowClass)) ? options.stripeRowClass.length : 0;

+		var doStripe = (stripeRowLength > 0) ? true : false;

+		var el = this;

+		var cache;

+		var selector = $(this).selector;

+		

+		$.fn.extend({

+			reset_cache: function () {

+				el = $(selector);

+				cache = get_cache(el);

+			}

+		});

+		

+		init();

+		

+		$('input[rel="' + options.randomElement + '"]').keydown(function (e) {

+			var keycode = e.keyCode;

+			if (!(keycode === 9 || keycode === 13 || keycode === 16 || keycode === 17 || keycode === 18 || keycode === 38 || keycode === 40 || keycode === 224))

+			{

+				qs();

+			}

+		});

+		

+		//$('#quicksearch').submit( function () { addTag()});

+		

+		return this;

+	};

+});
\ No newline at end of file
diff --git a/views/default/object/image.php b/views/default/object/image.php
index 3aa9bab8e..e4401a950 100644
--- a/views/default/object/image.php
+++ b/views/default/object/image.php
@@ -81,16 +81,147 @@
 			echo '<div id="tidypics_desc">' . autop($desc) . '</div>';		
 			echo '<div id="tidypics_image_full">';
 			echo '<div id="tidypics_image_nav">' . $back . $next . '</div>';	  
-			if ($next) echo '<a href="' . $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] . '">';
-			echo '<img src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>';
-			if ($next) echo '</a>';
-			echo '</div>';
 ?>
-			<div id="tidypics_controls">
-<div class="tidypics_download"><p><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></p></div>
-			</div>
+<div id='tagging_instructions'>
+	<table>
+		<tbody>
+			<tr>
+				<td width='375' align='center'><div id='instructions_default_message'><?php echo elgg_echo('image:doclickfortag'); ?></div></td>
+				<td valign='middle'><button class='submit_button' onclick='closeInfoTag()'><?php echo elgg_echo('image:finish_tagging'); ?></button></td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+
+<?php
+	$viewer = get_loggedin_user();
+	$friends = get_entities_from_relationship('friend', $viewer->getGUID(), false, 'user', '', 0);
 	
-		<div id="tidypics_info">
+?>
+<div id='cont-image'>
+	<div id="cont-menu">
+<?php
+	$content = "<input type='hidden' name='entity_guid' value='$file_guid' />";
+	$content .= "<ul id='phototagging-menu'>";
+	$content .= "<li class='owner'><a href='#' rel='{$viewer->getGUID()}'> {$viewer->name} (" . elgg_echo('me') . ")</a></li>";
+	
+	if($friends) foreach($friends as $friend)
+	{
+		$content .= "<li><a href='#' rel='{$friend->getGUID()}'>{$friend->name}</a></li>"; 
+	}
+	
+	$content .= "</ul>"; 
+
+	$content .= "
+		<fieldset>
+			<button class='submit_button' type='submit'>" . elgg_echo('image:actiontag') . "</button>
+		</fieldset>";
+	
+	echo elgg_view('input/form', array('internalid' => 'quicksearch', 'internalname' => 'form-phototagging', 'class' => 'quicksearch', 'action' => "{$vars['url']}action/tidypics/phototagging", 'body' => $content))
+?>
+	</div>
+<?php
+	$photo_tags = get_annotations($file_guid,'object','image','phototag');
+
+if ($photo_tags) foreach ($photo_tags as $photo_tag)
+{
+	$data_tag = unserialize($photo_tag->value);
+	
+	
+	if($data_tag->type == 'user')
+		$data_tag->data = get_entity($data_tag->value);
+	else
+		$data_tag->data = $data_tag->value;
+		
+	echo "<div class='phototag' rel='{$photo_tag->id}' style='margin-left:{$data_tag->x1}px; margin-top:{$data_tag->y1}px; width:{$data_tag->width}px;'>";
+	if($data_tag->type == 'user')
+		echo "<em>{$data_tag->data->name}</em>";
+	else
+		echo "<em>{$data_tag->data}</em>";
+	echo "<span style='width:" . ((int)$data_tag->width - 2) . "px; height:" . ((int)$data_tag->height - 2) . "px;'></span>";
+	echo "</div>";
+}else 
+{
+	echo "<div class='phototag'></div>";
+}	
+
+	if ($next)
+		$click =  "onclick='toggleLink()'";
+		
+	echo '<img ' . $click . ' src="' . $vars['url'] . 'mod/tidypics/thumbnail.php?file_guid=' . $file_guid . '&size=large" border="0" alt="' . $title . '"/>';
+
+?>
+</div>
+
+</div>
+
+<div id="tidypics_controls">
+<ul>
+	<li><a href="javascript:void(0)" onclick="showInfoTag()"><?= elgg_echo('image:tagthisphoto') ?></a></li>
+	<li><a href="<?php echo $vars['url']; ?>action/tidypics/download?file_guid=<?php echo $file_guid; ?>"><?php echo elgg_echo("image:download"); ?></a></li>
+</ul>
+</div>
+
+<?php	
+		$photo_tags = get_annotations($entity_guid,'object','image','phototag','',0,20,0);
+		
+		if ($photo_tags)
+		{
+?>	
+			<div id="tidypics_phototags">
+				<h3> <?= elgg_echo('image:inthisphoto') ?></h3>
+				<ul>
+<?php
+			$users = array();
+			$objects = array();
+			
+			if ($photo_tags) foreach ($photo_tags as $photo_tag)
+			{
+				$data_tag = unserialize($photo_tag->value);
+				
+				$name = "";
+				
+				$object = new stdClass();
+				
+				if($data_tag->type == 'user')
+				{
+					$data_tag->data = get_entity($data_tag->value);
+					$object->img = elgg_view("profile/icon",array('entity' => $data_tag->data, 'size' => 'topbar',  'override' => true));
+					$object->name = $data_tag->data->name;
+					$object->rel = $data_tag->data->getUrl();
+				}else
+				{
+					$data_tag->data = $data_tag->value;
+					$object->img = "<img border='0' title='object' src='{$vars['url']}mod/tidypics/graphics/tag_yellow.png' />";
+					$object->name = $data_tag->data;
+					$object->rel = "#";
+				}
+				
+				$object->html = "<li><a class='phototag-links' href='{$object->rel}' rel='{$photo_tag->id}'>$object->img<span>{$object->name}</span></a></li>";
+				
+				if($data_tag->type == 'user')
+					$users[] = $object;
+					
+				else
+					$objects[] = $object;
+			}
+			
+			if(!empty($users)) foreach ($users as $user)
+				echo $user->html;
+				
+			if(!empty($objects)) foreach ($objects as $object)
+				echo $object->html;
+			
+?>
+			</ul>
+		</div>
+<?php		
+		}
+
+?>
+
+
+<div id="tidypics_info">
 <?php
 			if (!is_null($tags)) {
 ?>
@@ -107,4 +238,164 @@
 		}
 	
 	} // end of tidypics image display
-?>
\ No newline at end of file
+?>
+	<script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.imgareaselect-0.6.2.js"></script>
+	<script type="text/javascript" src="<?= $vars['url'] ?>/mod/tidypics/vendors/jquery.quicksearch.js"></script>
+	 
+	<script type="text/javascript">
+	
+		var coordinates;
+	
+		jQuery(document).ready(function(){
+		   
+			jQuery('#cont-menu ul li').quicksearch({
+			  position: 'before',
+			  attached: '#cont-menu ul',
+			  loaderText: '',
+			  inputClass: 'input-filtro',
+			  labelText:"<p><?= elgg_echo('image:inserttag') ?></p>",
+			  delay: 100
+			})
+			
+			jQuery('#cont-menu ul').before("<p> o escoge a una persona:</p>");
+			
+			//avoid submit
+			jQuery('#quicksearch').submit( function () { addTag()});
+			
+			
+			setTimeout("fixContImage()",1000);
+			
+			//fix position
+			jQuery('#cont-image .phototag em').height()
+			
+			//Este evento lo que hace es que cuando hace foco en el input se desmarcan todos
+			jQuery('.input-filtro').focus(function(){jQuery("#cont-menu li a[class*='selected']").removeClass('selected');})
+	
+			});	
+			
+			
+			jQuery('#cont-menu li a').click(function(){
+				//Limpiamos todos
+				jQuery("#cont-menu li a[class*='selected']").removeClass('selected');
+	
+	        	jQuery(this).toggleClass('selected');
+			})
+			
+			
+		
+	
+		
+		var sUrl = "<?= $vars['url'] . 'pg/photos/view/' . $_SESSION['image_sort'][$current+1] ?>";
+		
+		function toggleLink()
+		{
+			if(jQuery('#tagging_instructions:hidden').length)
+				location.href = sUrl;
+		}
+		
+		function showInfoTag()
+		{
+			if(jQuery('#tagging_instructions:hidden').length)
+			{
+				jQuery('#tagging_instructions').show();
+				activeTagSystem();
+			}
+		}
+		
+		function closeInfoTag()
+		{
+			jQuery('#tagging_instructions').hide();
+			jQuery('div[class*=imgareaselect]').remove();
+			jQuery('#cont-menu').hide();
+			jQuery('#cont-image img').unbind('mousedown');
+		}
+		
+		function activeTagSystem()
+		{
+			jQuery('#image_full img').imgAreaSelect({selectionColor: 'white',
+					 									  maxWidth: 200, 
+														  maxHeight: 200,
+														  minWidth: 60, 
+														  minHeight: 60,
+														  borderWidth: 2,
+														  onSelectEnd: mostrarMenu,
+														  onSelectStart: ocultarMenu}); 
+		}
+	
+		function ocultarMenu()
+		{
+			jQuery('#cont-menu').hide();
+			coordinates = "";
+		}
+			
+		function mostrarMenu(oObject, oCoordenates)
+		{
+			constX = -70;
+			constY = 1;
+			//console.log(oCoordenates);
+			//Mostramos el menu
+			if (oCoordenates.width != 0 && oCoordenates.height != 0) {
+				coordinates = oCoordenates;
+				jQuery('#cont-menu').show().css({
+					"margin-top": oCoordenates.y2+constY + "px",
+					"margin-left": oCoordenates.x2+constX + "px"
+				});
+				jQuery(".input-filtro").focus();
+			}
+		}
+		
+		function addTag()
+		{
+			jQuery('#phototagging-menu li:hidden').find('a').removeClass('selected');
+			oForm = jQuery('#quicksearch');
+			oEl = jQuery('#quicksearch ul li:has(.selected)');
+			if(jQuery('#quicksearch ul li:has(.selected)').length == 1)
+				oForm.append("<input type='hidden' name='user_id' value='" + oEl.find('a').attr('rel') + "'")
+			else
+				oForm.append("<input type='hidden' name='word' value='" + oForm.find('input.input-filtro').val() + "'")
+				
+			if(coordinates.x1!=0)
+			{
+				sStr = "";
+				for (x in coordinates)
+				    sStr += x + ':' + coordinates[x] + '/';
+
+				oForm.append("<input type='hidden' name='coordinates' value='" + sStr + "' />");
+			
+			}
+		
+			//Show loading	
+			jQuery("#cont-menu label, #cont-menu input, #cont-menu p, #cont-menu span, #cont-menu button, #cont-menu ul, #cont-menu fieldset").hide();
+			jQuery("#cont-menu ").append('<div align="center" class="ajax_loader"></div>');		
+		
+			
+			return false;
+			//oForm.submit();
+		
+		}
+		
+		jQuery(".phototag span").hover(function() {
+			jQuery(this).prev("em").stop(true, true).animate({opacity: "show"}, "fast").css({'display':'block','-moz-border-radius-topleft':'2px','-moz-border-radius-topright':'2px','-moz-border-radius-bottomleft':'2px','-moz-border-radius-bottomright':'2px'});
+		}, function() {
+		jQuery(this).prev("em").animate({opacity: "hide"}, "fast");
+		});
+		
+		function fixContImage()
+		{
+			jQuery('#cont-image').width(jQuery('#cont-image img').width()); 
+			jQuery('#cont-image').height(jQuery('#cont-image img').height());
+			setTimeout("if(jQuery('#cont-image').width() < jQuery('#cont-image img').width()) setTimeout(\"fixContImage()\",500);",300);
+		}
+		
+		jQuery('a.phototag-links').hover(function() {
+			iRel = jQuery(this).attr('rel');
+			jQuery('div.phototag[rel*='+ iRel + ']').find("em").stop(true, true).animate({opacity: "show"}, "fast").css({'display':'block','-moz-border-radius-topleft':'2px','-moz-border-radius-topright':'2px','-moz-border-radius-bottomleft':'0px','-moz-border-radius-bottomright':'0px'});
+			jQuery('div.phototag[rel*='+ iRel + ']').find("span").css({'border':'1px solid white','border-top':'none'} );
+		}, function() {
+		iRel = jQuery(this).attr('rel');
+		jQuery('div.phototag[rel*='+ iRel + ']').find("em").animate({opacity: "hide"}, "fast");
+		jQuery('div.phototag[rel*='+ iRel + ']').find("span").css("border","none");
+		
+		});
+		
+	</script>
\ No newline at end of file
diff --git a/views/default/tidypics/css.php b/views/default/tidypics/css.php
index 6559ec5be..0f5b8baeb 100644
--- a/views/default/tidypics/css.php
+++ b/views/default/tidypics/css.php
@@ -23,6 +23,18 @@ margin-bottom:10px;
 margin:10px;
 }
 
+#tidypics_controls ul {
+list-style:none; 
+margin:0px; 
+padding:8px;
+}
+
+#tidypics_controls ul li {
+padding:2px 10px 2px 22px;
+margin:2px 0px; 
+display:inline;
+}
+/*
 .tidypics_download a {
 font:12px/100% Arial, Helvetica, sans-serif;
 font-weight:bold;
@@ -43,7 +55,7 @@ background:#0054a7;
 color:white;
 text-decoration:none;
 }
-
+*/
 .tidypics_album_images {
 float:left;
 width:153px; 
@@ -147,4 +159,33 @@ padding:0 0 5px;
 }
 .river_object_album_comment {
 	background: url(<?php echo $vars['url']; ?>_graphics/river_icons/river_icon_comment.gif) no-repeat left -1px;
+}
+
+/* ----------- tagging ---------------- */
+#tagging_instructions {
+background:#FFFBE2 none repeat scroll 0 0; 
+border:1px solid #FFE222; 
+margin:10px; 
+padding:10px;
+display:none;
+}
+
+#cont-image {
+margin:0px auto; 
+background:white none repeat scroll 0 0; 
+border:1px solid #DDDDDD; 
+padding:10px; 
+overflow:hidden;
+}
+
+#cont-menu {
+border:1px solid #3B5999; 
+width:200px; 
+position:absolute;
+z-index:10000; 
+display:none; 
+background:#fff; 
+padding:5px; 
+font-size:12px; 
+text-align:left;
 }
\ No newline at end of file