Crop_Test = new Class({
		
		preset : [
			[235,140,505,340],
			[120,130,470,430]
		],

		initialize : function(){
			var ns = 'control-';
			this.ratio = $(ns+'ratio').addEvent('change',this.changed.bind(this,'ratio'));
			this.defined = $(ns+'default').addEvent('change',this.changed.bind(this,'defined'));
			this.minx = $(ns+'minx').addEvent('blur',this.changed.bind(this,'minx'));
			this.miny = $(ns+'miny').addEvent('blur',this.changed.bind(this,'miny'));
			this.maxx = $(ns+'maxx').addEvent('blur',this.changed.bind(this,'maxx'));
			this.maxy = $(ns+'maxy').addEvent('blur',this.changed.bind(this,'maxy'));
			this.hsize = $(ns+'handleSize').addEvent('change',this.changed.bind(this,'handleSize'));
			this.color = $(ns+'maskColor').addEvent('change',this.changed.bind(this,'maskColor'));
			this.opacity = $(ns+'opacity').addEvent('change',this.changed.bind(this,'opacity'));
			this.ants = $(ns+'ants').addEvent('change',this.changed.bind(this,'ants'));
			
			this.locx = $('locx');
			this.locy = $('locy');
			this.locw = $('locw');
			this.loch = $('loch');
 
			this.notes = $('notes');

			this.cropper = new Lasso.Crop('bee',{
				ratio : false,
				preset : [235,140,505,340],
				min : [50,50],
				handleSize : 8,
				opacity : .6,
				color : '#7389AE',
				border : '/images/crop.gif',
				onResize : this.updateCoords.bind(this)
//				border : '#000'
			});

		},
		
		updateCoords : function(pos){
			this.locx.set('html',pos.x);
			this.locy.set('html',pos.y);
			this.locw.set('html',pos.w);
			this.loch.set('html',pos.h);
		},

		changed : function(flag){
			var notes = [];
			switch(flag){
				case 'ratio' :
					var v = this.ratio.get('value');
					if(v == 'false') {
						this.cropper.options.ratio = false;
						notes.push('notice when ratio is off all handlers are visible');
					}
					else {
						this.cropper.options.ratio = v.split(':');
						notes.push('notice when ratio is set handlers that don\'t apply are removed');
					}
					break;
				case 'defined' :
					var v = this.defined.get('value');
					if(v == 'false'){
						this.cropper.options.preset = false;
						notes.push('when default is false no preset crop area is selected');
					}
					else {
						this.cropper.options.preset = this.preset[v.toInt()];
						notes.push('when a default is set preset crop is applied when invalid crop exists');
					}
					break;
				case 'minx' : case 'miny' :
					var mx = this.minx.get('value').trim(), my = this.miny.get('value').trim();
					if(mx == '' || my == '') this.cropper.options.min = false;
					else {
						this.cropper.options.min = [mx.toInt(),my.toInt()];
						notes.push('notice how handlers are removed when resized below min. If released goes to default if present else empty');
					}
					break;
				case 'maxx' : case 'maxy' :
					var mx = this.maxx.get('value').trim(), my = this.maxy.get('value').trim();
					if(mx == '' || my == '') this.cropper.options.max = false;
					else {
						this.cropper.options.max = [mx.toInt(),my.toInt()];
						notes.push('try setting a max property to the same value as min. Handlers are removed');
					}
					break;
				case 'handleSize' :
					var v = this.hsize.get('value').toInt();
					for(var i in this.cropper.handles){
						this.cropper.handles[i].setStyles({'width' : v, 'height' : v});
					}
					break;
				case 'maskColor' :
					var v = this.color.get('value');
					this.cropper.mask.setStyle('background-color',v);
					break;
				case 'opacity' :
					var v = this.opacity.get('value').toFloat();
					this.cropper.mask.setStyle('opacity', v);
					break;
				case 'ants' : 
					var v = this.ants.get('value');
					if(v.test(/\.(jpe?g|gif|png)/)){
						for(var side in this.cropper.marchingAnts){
							this.cropper.marchingAnts[side].setStyle(
								'background-image' , 'url('+v+')').setStyle('border-'+side, 'none');
						}
					} else {
						for(var side in this.cropper.marchingAnts){
							this.cropper.marchingAnts[side].setStyle(
								'background-image' , 'none').setStyle('border-'+side, '1px dashed '+v);
						}						
					}
					break;
			}
			this.cropper.resetCoords();
			this.cropper.setDefault();
			this.notes.empty();
			var noteHTML = '';
			notes.each(function(note){
				noteHTML += note + '<br />';
			},this);
			this.notes.set('html',noteHTML);
		}


	});

window.addEvent('load',function(){

	new Crop_Test();
		
	
});