//
// Handles Actual cropping of image.
// Usually called inside an iFrame.
//
// Options
//  thumbWidth : width of thumbnail
//  thumbHeight : height of thumbnail
//  showThumb : show the thumb? (not implemented)
//  bigImage : Selector to big image
//  thumbnailImage : selector to thumbnail
//  submitButton : selector to submit button
//  dimensionInputMap : { // map imgareaselect object to form widgets
//		x1 : '#x1',
//		x2 : '#x2',
//		y1 : '#y1',
//		y2 : '#y2',
//		width : '#w',
//		height : '#h'
//  }
//  containerFrame : are you in an Iframe? provide selector to iframe here
//
ImageCropper = new Class({
	options : {
		thumbWidth : 100,
		thumbHeight : 100,
		showThumb : true,
		bigImage : '#CropLargeThumbnail',
		thumbnailImage : "#imageCropperPreview img",
		submitButton : '#SaveCropping',
		dimensionInputMap : {
			x1 : '#x1',
			x2 : '#x2',
			y1 : '#y1',
			y2 : '#y2',
			width : '#w',
			height : '#h'
		},
		area : {
		},
		containerFrame : null
	},

//
// Constructor
//
	init : function (options) {
		if (jQuery.fn.ajaxSubmit === undefined || jQuery.fn.imgAreaSelect === undefined) {
			throw('Requires jQuery.form and imgAreaSelect plugins');
		}
		this.options = options = jQuery.extend({}, this.options, options);
		this.bigImage = $(options.bigImage);
		this.submitButton = $(options.submitButton);
		this.thumbnail = $(options.thumbnailImage);
		$(this.bigImage).imgAreaSelect(jQuery.extend({}, this.options.area, {
			aspectRatio: '1:' + (options.thumbWidth / options.thumbHeight),
			onSelectChange: this.preview.bind(this)
		}));

		var ajaxOptions = {
			beforeSubmit : this.beforeSubmit.bind(this),
			dataType : 'json',
			success : this.doSuccess.bind(this),
			method : 'post'
		};
		this.submitButton.bind('click', function (event){
                
			event.stopPropagation();
			event.preventDefault();
			
			$(this.form).ajaxSubmit(ajaxOptions);
			 
		});
	},
//
// Handle updating the preview image.
//
	preview : function (img, selection) {
		var scaleX = this.options.thumbWidth / selection.width;
		var scaleY = this.options.thumbHeight / selection.height;

		$(this.options.thumbnailImage).css({
			width: Math.round(scaleX * this.bigImage.width()) + 'px',
			height: Math.round(scaleY * this.bigImage.height()) + 'px',
			marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
			marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
		});

		//set preview sizes.
		var inputMap = this.options.dimensionInputMap;
		for (var element in inputMap) {
			$(inputMap[element]).val(selection[element]);
		}
	},
//
// Validate inputs.
//
	beforeSubmit : function (event) {
		var inputMap = this.options.dimensionInputMap,
			element,
			curValue;

		for (element in inputMap) {
			curValue = $(inputMap[element]).val();
			if (curValue === '' || curValue == '#' + element) {
				alert(YouFoot.i18n.get('selectionRequired'));
				return false;
			}
		}
		return true;
	},
//
// Handle form completion
//
	doSuccess : function (responseText, statusText) {
		if (statusText != 'success' || responseText.status == 'fail') {
			alert(YouFoot.i18n.get('error'));
			return;
		}
		$('.imgareaselect-selection, .imgareaselect-border1, .imgareaselect-border2, .imgareaselect-outer').remove();
		var container = this.bigImage.parents('body');
		container.empty()
			.append('<p style="height:25px;" class="' + responseText.status + '-message">' + responseText.data.message + '</p>');
		if (this.options.containerFrame) {
			$(this.options.containerFrame).height(container.height());
		}
		$('#UserAddForm,#UserEditForm',window.parent.document).ajaxSubmit(function(){
			var mediaId = $('#MediaMediaId',window.parent.document).val();
			parent.photoChange(mediaId);
			$('.infobox-images',window.parent.document).load('/feeds/getImage','',function(){
				$('.ui-dialog,.ui-dialog-overlay,.closeDialog,.profile-form',window.parent.document).remove();	
			});
			
		});
		
		$('#ProfileSetupForm',window.parent.document).ajaxSubmit(function(){
			var mediaId = $('#MediaMediaId',window.parent.document).val();
			$('.myDefaultPicture',window.parent.document).load('/feeds/getImage','',function(){
				//$('.myDefaultRecherche',window.parent.document).html('');
			});
			
		});
		$('#MediaImageCropped',window.parent.document).val('1');
		
		//window.parent.document.getElementById('UserAddForm').submit();
	}
});