$.fn.square = function (opt) {
      var def = {
            onChange: null
      }

      $.extend(def, opt);

      $(this).each(function () {
            var parent = $(this);

            var pos = parent.position();
            var dim = {
                  width: parent.css('width').indexOf('%') !== false ? parent.css('width') : parent.width() + 'px',
                  height: parent.css('height').indexOf('%') !== false ? parent.css('width') : parent.height() + 'px'
            }

            if((typeof parent.attr('src')).toLowerCase() != 'undefined') {
                  var aux = $()

                  parent
                        .css({
                              width: '100%',
                              height: '100%'
                        })
                        .wrap('<div style=" \
                                    position: absolute; \
                                    top: ' + pos.top + 'px;  \
                                    left: ' + pos.left + 'px; \
                                    width: ' + dim.width + '; \
                                    height: ' + dim.height + '; \"></div> \
                        ')

                parent = $(parent[0].parentNode);
            }

            var __getP = function (target, relation) {
                  return 100 * (target / relation);
            }

            // boton de cambio de tamanno
            var cursor = $(' \
                        <div style=" \
                              position: absolute; \
                              bottom: 0px; \
                              right: 0px; \
                              width: 12px; \
                              height: 12px; \
                              overflow: hidden; \
                              cursor: NW-resize; \
                              background: url(scripts/mini_tamanno.gif) no-repeat top left #75FD1A; \
                              border: 1px solid #fff; "> \
                        </div> \
                  ')
                  .mousedown(function (e) {
                        if($(this).data('ready'))
                            return false;

                        var cursor = $(this.parentNode)
                        var pos = cursor.position();

                        var original = {
                            left: e.pageX,
                            top: e.pageY,
                            width_px: cursor.outerWidth(),
                            width: __getP(cursor.outerWidth(), $(this.parentNode.parentNode).innerWidth()),
                            height: __getP(cursor.outerHeight(), $(this.parentNode.parentNode).innerHeight()),
                            relation: __getP($(this.parentNode.parentNode).innerWidth(), $('body').innerWidth())
                        }

                        $(this).data('ready', true);

                        var innerWidth = $('body').innerWidth();

                        $(document)
                              .mousemove(function (e) {
                                    var factor = e.pageX - original.left;

                                    // tamanno minimo
                                    if(original.width_px + factor < 50)
                                          return false;

                                    var nuevo = original.width + __getP(__getP(factor, innerWidth), original.relation);

                                    cursor
                                        .css('width', nuevo + '%')
                                        .css('height', Math.round(original.height *  nuevo / original.width) + '%')

                                    return false;
                              })
                              .mouseup((function (pestanna, cursor) { return function () {
                                    $(this)
                                          .unbind('mousemove')
                                          .unbind('mouseup')

                                    $(pestanna).data('ready', false);

                                    if(def.onChange)
                                          def.onChange.apply(
                                                parent,
                                                [{
                                                      top: cursor.css('top').replace('px', ''),
                                                      left: cursor.css('left').replace('px', ''),
                                                      width: cursor.width(),
                                                      height: cursor.height()
                                                }]
                                          )

                                    return false;
                              }})(this, $(this.parentNode)))

                        return false;
                  })

            parent
                  .append(cursor)
                  .css({
                        'cursor': 'pointer',
                        'z-index' : '200'
                  })
                  .mousedown(function (e) {
                        // no dispara el evento si la accion fue sobre algun elemento hijo
                       
                        parent.css('z-index', parseInt($(parent).css('z-index'), 10) + 1);

                        if(parent.data('ready'))
                            return false;

                        var relative = {
                              top: e.pageY,
                              left: e.pageX
                        }

                        var inner = {
                              width: $(window).width(),
                              height: $(window).height()
                        }

                        var relation = {
                              width: __getP($(this.parentNode).innerWidth(), inner.width),
                              height: __getP($(this.parentNode).innerHeight(), inner.height)
                        }

                        var pos = parent.position();
                        pos.top = __getP(pos.top, $(this.parentNode).innerHeight());
                        pos.left = __getP(pos.left, $(this.parentNode).innerWidth());

                        parent.data('ready', true);
                        parent.data('change', false)

                        $(document)
                              .mousemove(function (e) {
                                    parent.data('change', true)
                                    
                                    var top = pos.top + __getP(__getP(e.pageY - relative.top, inner.height), relation.height);
                                    var left = pos.left + __getP(__getP(e.pageX - relative.left, inner.width), relation.width);

                                    parent
                                        .css('top', top + '%')
                                        .css('left', left + '%')

                                    return false;
                              })
                              .mouseup(function () {
                                    $(this)
                                          .unbind('mousemove')
                                          .unbind('mouseup')

                                    parent.data('ready', false);

                                    if(def.onChange && parent.data('change'))
                                          def.onChange.apply(
                                                parent,
                                                [{
                                                      top: parent.css('top').replace('px', ''),
                                                      left: parent.css('left').replace('px', ''),
                                                      width: parent.width(),
                                                      height: parent.height()
                                                }]
                                          )

                                    return false;
                              })

                        return false;
                  })

      })
      
      return this;
}