/* Photo square thumbnail selector */

/* 
 * 1 - Savoir si la photo est en portrait ou paysage
 * 2 - Selon 1, calculer la largeur du carré (soit la hauteur pour le paysage, soit la largeur pour le portrait)
 * 3 - Positionner le cadre selon l'axe invariable ainsi que les 2 obstructeurs
 * 4 - Le débattement maximal doit être de 480-(largeur du cadre de redim)
 */

var LANDSCAPE_ORIENT = 1;
var PORTRAIT_ORIENT = 2;

 function squarePhotoEditor(obj) {
 	var photo;
 	var photo_dim;
 	var photo_orient; 	
 	
 	var overlay1;
 	var overlay2;
 	var frame;
 	var size_form;
 	 	
 	var frame_border_size = 5;
 	
 	var first_pointer_pos = 0;
 	var last_frame_pos = 0;
 	var landscape_margin_gap = 0;
 	
 	var no_frame_size = false;
 	var frame_size = { width : 500, height : 480 };
 	var photo_max_size = 480;
 	var auto_compute_max_photo_size = false;
 	
 	function constructor(obj) {
 		if( !(photo = $(obj.photo)) || !(overlay1 = $(obj.overlay1)) || !(overlay2 = $(obj.overlay2)) || !(frame = $(obj.frame)) || !(size_form = $(obj.size_form)) ) {
 			return;
 		}
 		
 		if(obj.no_frame_size == true) {
 			no_frame_size = true;
 		}
 		
 		if(obj.auto_compute_max_photo_size == true) {
 			auto_compute_max_photo_size = true;
 		}
 		
 		if(Object.isNumber(obj.frame_border_size)) {
 			frame_border_size = obj.frame_border_size;
 		}
 		
 		photo_dim = photo.getDimensions();
 		if(photo_dim.height > photo_dim.width) {
 			photo_orient = PORTRAIT_ORIENT;
 			
 			if(auto_compute_max_photo_size) {
 				photo_max_size = photo_dim.height;
 			}
 			
 			if(!no_frame_size) {
 				var css_left = Math.round((frame_size.width-photo_dim.width)/2);
 			}
 			else {
 				var css_left = 0;
 			}
 			overlay1.setStyle({ width : photo_dim.width.toString()+"px", left : css_left.toString()+"px"  });
 			overlay2.setStyle({ width : photo_dim.width.toString()+"px", left : css_left.toString()+"px" });
 			frame.setStyle({ width : photo_dim.width.toString()+"px", height : photo_dim.width.toString()+"px", left : (css_left-frame_border_size).toString()+"px", top : "0px" });
 		}
 		else {
 			photo_orient = LANDSCAPE_ORIENT;
 			
 			if(auto_compute_max_photo_size) {
 				photo_max_size = photo_dim.width;
 			}
 			
 			if(!no_frame_size) {
 				landscape_margin_gap = (frame_size.width-photo_dim.width)/2;
 				var css_top = Math.round((frame_size.height-photo_dim.height)/2);
 			}
 			else {
 				landscape_margin_gap = 0;
 				var css_top = 0;
 			}
 			overlay1.setStyle({ height : photo_dim.height.toString()+"px", top : css_top.toString()+"px", left : landscape_margin_gap+"px" });
 			overlay2.setStyle({ height : photo_dim.height.toString()+"px", top : css_top.toString()+"px" });
 			frame.setStyle({ width : photo_dim.height.toString()+"px", height : photo_dim.height.toString()+"px", top : (css_top-frame_border_size).toString()+"px", left : "5px" });
 			if(!no_frame_size) {
 				photo.setStyle({ marginTop : ((frame_size.height-photo_dim.height)/2)+"px" });
 			}
 		}
 		moveFrame(0,0);
 		
 		frame.onmousedown = function() { return false }; /* to disable img drag & drop */
 		
 		frame.observe('mousedown', mouseDownFrame);
 		document.observe('mouseup', mouseUpFrame); 	
 		
 	}
 	
 	function mouseDownFrame(e) {
 		if(photo_orient == PORTRAIT_ORIENT) {
 			first_pointer_pos = e.pointerY();
 			last_frame_pos = frame.offsetTop;
 		}
 		else {
 			first_pointer_pos = e.pointerX();
 			last_frame_pos = frame.offsetLeft;
 		}
 		
 		document.observe('mousemove', mouseMoveFrame);
 		return false;
 	}
 	
 	function mouseUpFrame() {
 		document.stopObserving('mousemove', mouseMoveFrame);
 		return false;
 	}
 	
 	function mouseMoveFrame(e) {
 		e.stop(); /* stop propagation - useless here but it's a test */
 		moveFrame(e.pointerX(), e.pointerY());
 		return false;
 	}
 	
 	function moveFrame(mouse_x, mouse_y) {
 		var css_pos;
 		var pointer_gap;
 		var css_overlay2_pos;
 		
 		if(photo_orient == PORTRAIT_ORIENT) {
 			/* Computing the position of the resize frame (and overlays that depend of resize frame position) */
 			pointer_gap = first_pointer_pos-mouse_y;
 			css_pos = last_frame_pos-pointer_gap;
 			
 			if(css_pos < -frame_border_size) {
 				css_pos = -frame_border_size;
 			}
 			else if(css_pos > photo_max_size-photo_dim.width-frame_border_size) {
 				css_pos = photo_max_size-photo_dim.width-frame_border_size;
 			}
 			
 			/* setting frame position */
 			frame.setStyle({ top : css_pos+"px"  });
 			size_form.writeAttribute("value", css_pos+frame_border_size);
 			
 			/* setting top (1) and bottom (2) overlays */
 			overlay1.setStyle({ height : (css_pos < 0 ? 0 : css_pos)+"px" });
 			css_overlay2_pos = css_pos+photo_dim.width+frame_border_size;
 			overlay2.setStyle({ top : css_overlay2_pos+"px", height : (photo_max_size-css_overlay2_pos)+"px"  }); 
 		}
 		else {
 			/* Computing the position of the resize frame (and overlays that depend of resize frame position) */
 			pointer_gap = first_pointer_pos-mouse_x;
 			css_pos = last_frame_pos-pointer_gap;
 			
 			if( (css_pos-landscape_margin_gap) < -frame_border_size) {
 				css_pos = landscape_margin_gap-frame_border_size;
 			}
 			else if(css_pos > photo_max_size-photo_dim.height-frame_border_size+landscape_margin_gap) {
 				css_pos = photo_max_size-photo_dim.height-frame_border_size+landscape_margin_gap;
 			}
 			
 			/* setting frame position */
 			frame.setStyle({ left : css_pos+"px"  }); 			
 			size_form.writeAttribute("value", css_pos+frame_border_size-landscape_margin_gap);
 			
 			/* setting left (1) and right (2) overlays */
 			css_pos = css_pos-landscape_margin_gap;
 			overlay1.setStyle({ width : (css_pos < 0 ? 0 : css_pos)+"px" });
 			css_overlay2_pos = css_pos+photo_dim.height+landscape_margin_gap+frame_border_size;
 			overlay2.setStyle({ left : css_overlay2_pos+"px", width : (photo_max_size-css_overlay2_pos+landscape_margin_gap)+"px"  }); 
 		} 		
 	}
 	
 	this.show = function() {
 		overlay1.show();
 		overlay2.show();
 		frame.show();
 	}
 	
 	this.hide = function() {
 		overlay1.hide();
 		overlay2.hide();
 		frame.hide();
 	}
 	
 	constructor(obj);
 	
 }