function onsubmitfoto(target,url,hash,w_thumb,h_thumb,w_min,h_min,callback) {  

   
    if (w_thumb>w_min || h_thumb>h_min) { // mostramos el diálogo de recorte
        target_img=target;
        callback_docrop = callback;
        var l = new formOverlay(false,null,'/controls/Libreria/Ajax.ashx?accion=renderizarControl&id=/controls/Libreria/CropImage.ascx&hash='+hash+'&docrop=1&url='+url+'&w='+w_min+'&h='+h_min,cancelcrop,null,null,'Recortar imagen');
        l.activate();
    }
    else {
        // no hace falta recortar, mostramos la imagen previa
        
        var l = new formOverlay(false,null,'/controls/Libreria/Ajax.ashx?accion=renderizarControl&id=/controls/Libreria/ImagePreview.ascx&url='+url, null,null,null,'Imagen cargada',function() { callback(target,url); return false;  }.bind(this));
       
        l.activate();
        
    }       
    
}


using.register('dragdrop', true, 2000, '/js/dragdrop.js').requires('scriptaculous');
using.register('imagecropper',true,2000,'/js/cropper/cropper.js').requires('dragdrop');
var cropper=null;
var target_img=null;
var callback_docrop=null;
var crop_info=null;
// recibe la url y el hash de seguridad emitido que garantiza que la imagen se modifique solo por el usuario autorizado
function docrop(btn) { 

    var args = buildPOST('cropimage');  
    llamadaAJAX('/controls/Libreria/Ajax.ashx',btn,'accion=renderizarControl&id=/controls/Libreria/CropImage.ascx&docrop=1&'+args,null,ret_docrop,null,true);
    
}

// abre una ventana de recorte para una imagen en 'url', guarda el recorte en tmp
// hash es la clave emitida para permitir la edición al usuario actual sobre la url
function init_cropimage(target,url,hash,w_min,h_min,callback,docrop,generar_temp) {


        target_img=target;
        callback_docrop = callback;              

        var l = new formOverlay(false,null,'/controls/Libreria/Ajax.ashx?accion=renderizarControl&id=/controls/Libreria/CropImage.ascx&docrop='+(docrop?'1':'0')+'&gen_temp='+(generar_temp?'1':'0')+'&hash='+hash+'&url='+url+'&w='+w_min+'&h='+h_min,cancelcrop,null,null,'Recortar imagen');
        l.activate();
        
}

function ret_docrop(url) {
   
    //mostrarOverlay('','Recorte finalizado',document.Form.submit());   
  
    callback_docrop(target_img,url,crop_info);
    cropper=null;
    Dialogs.close();
}


function cancelcrop() {
    cropper=null;
}

function cropimage(img,w,h) {
               
         using('imagecropper',
                function()
                {            
                    if (cropper)
                        cropper.reset();
                    else 
                        cropper = new Cropper.ImgWithPreview(
                        img
                        ,{
                            ratioDim: { // mantenemos el mismo ratio que la imagen original
                                x: w,
                                y: h
                            },
                            previewWrap: 'previewWrap',                            
                            minWidth: w,
                            minHeight: h,
                            onEndCrop: onEndCrop
                        }
                    );
                }
             );
}

function error(msg) {
    mostrarOverlay('Hay un problema con la imagen',msg);
}


function onEndCrop( coords, dimensions ) {
      crop_info=coords;
      
      if($('x1')) {
          $( 'x1' ).value = coords.x1;
          $( 'y1' ).value = coords.y1;
          $( 'x2' ).value = coords.x2;
          $( 'y2' ).value = coords.y2;
          $( 'width' ).value = dimensions.width;
          $( 'height' ).value = dimensions.height;
      }

  }



// un objeto que, aplicado a un div que aloja una imagen de un tamaño mayor que
// sus dimensiones, permite arrastrar la imagen y almacena el desplazamiento 
// (en porcentaje sobre las dimensiones de la imagen) en unos inputs

// 'margen' : margen de movimiento en el eje menor
// las imágenes estarán guardadas en un tamaño que conserva su aspecto original. Las queremos mostrar
// en marcos menores, pero de distintos tamaños (50x50, 80x80, etc) Como vamos a editar este desplazamiento
// en un marco de unas determinadas dimensiones, vamos a escalar la imagen hasta un tamaño algo mayor que el marco 
// que usemos (que será de 'tammarcoXtammarco') y daremos un margen a ambos lados del lado menor

OffsetThumb = Class.create({

    mouseDown:false,
    desplX:null,
    desplY:null,
    downMouseX:null,
    downMouseY:null,
    newtargetPosX:0,
    newtargetPosY:0,
    tammarco:null,
    margen:null,
    squareSwitched:null,
    cargado:true,

	initialize: function(options) {
		var e = Prototype.emptyFunction;
		
		this.options = Object.extend({
			target: null, // imagen a desplazar
			tammarco:null,
			margen:8
			},arguments[0] || { });
				
	    
        this.target=$(this.options.target);
        this.target.style.cursor='move';
        this.target.style.position='relative';
       
        this.posmarco = Position.cumulativeOffset(this.target.parentNode);
        
        
        // creamos los inputs para guardar el porcentaje del desplazamiento
                
        this.desplX=document.createElement('input');
        this.desplX.type='hidden';
        this.desplY=document.createElement('input');
        this.desplY.type='hidden';
        
     
        new Insertion.Before(this.target,this.desplX);
        new Insertion.Before(this.target,this.desplY);
       
        this.margen=this.options.margen;
        this.tammarco = this.options.tammarco;
        this.halfmargen=this.margen*-0.5;
        
    
        
        
        if(this.target.height>this.target.width) {
            this.target.width=this.tammarco+this.margen;
            this.newtargetPosX=this.halfmargen;
            this.newtargetPosY=this.tammarco*0.5-this.target.height*0.3;
            
            if(this.newtargetPosY>this.halfmargen)
                this.newtargetPosY=this.halfmargen;
        }           
        else{
        
            this.target.height=this.tammarco+this.margen;
            this.newtargetPosY=this.halfmargen;
            this.newtargetPosX=(this.tammarco-this.target.width)*0.5;
        }
        
        this.target.style.left=this.newtargetPosX+'px';
        this.target.style.top=this.newtargetPosY+'px';
        Event.observe(document.body,'mousemove',this.targetMouseMove.bindAsEventListener(this));
        Event.observe(document.body,'mouseup',this.targetMouseUp.bindAsEventListener(this));
        Event.observe(this.target.parentNode,'mousedown',this.targetMouseDown.bindAsEventListener(this));
        this.mouseDown=true;
        this.targetMouseUp();
//        this.targetStart=ge('targetstart');
//        this.targetStart.style.display='none';
//        this.target.style.visibility='visible';  

			
	    
    },
    
       
    
    targetOnLoad : function() {
        this.cargado=true;
    },
   

  
    
    targetMouseDown : function(event) {
        if(this.cargado==false) return;
//        
//        if(squareSwitched==false) {
//            targetInit();
//            squareSwitched=true;
//        }
        
        this.mouseDown=true;
    
        this.downMouseX=Event.pointerX(event)-this.posmarco[0];      

        this.downMouseY=Event.pointerY(event)-this.posmarco[1];
        this.targetMouseMove(event);
        
    },

    targetMouseOver :function()
    {
        if(this.mouseDown==false) return;
        this.targetMouseUp();
    },

    targetMouseUp : function ()
    {
        if(this.mouseDown==false) return;
        this.mouseDown=false;
        this.desplX.value=parseFloat(-100*this.newtargetPosX/this.target.width);
        if(this.desplX.value<0.1) this.desplX.value=0;
        this.desplY.value=parseFloat(-100*this.newtargetPosY/this.target.height);
        if(this.desplY.value<0.1) this.desplY.value=0;
    },


    targetMouseMove :function (event) {
        if(this.mouseDown==false){return;}
        
        event.stop();
        
        diffMouseX=Event.pointerX(event)-this.posmarco[0]-this.downMouseX;
        diffMouseY=Event.pointerY(event)-this.posmarco[1]-this.downMouseY;
        
        
        posX=diffMouseX-parseFloat(this.desplX.value*this.target.width*0.01);
        posY=diffMouseY-parseFloat(this.desplY.value*this.target.height*0.01);
        
           
        if(posY>0){posY=0;}
        else if(posY+this.target.height<this.tammarco) {
            posY=-1*this.target.height+this.tammarco;
        }
        
        if(posX>0){posX=0;}
        else if(posX+this.target.width<this.tammarco) { 
            posX=-1*this.target.width+this.tammarco;
        }
        
        this.newtargetPosX=posX;
        this.newtargetPosY=posY;
        this.target.style.left=posX+'px';
        this.target.style.top=posY+'px';
        
    }

    
})