var cropper, slider, loadingimg, processing;
		
		function onEndCrop(coords, dimensions) 
		{
			$('x1').value = coords.x1;
			$('y1').value = coords.y1;
			$('x2').value = coords.x2;
			$('y2').value = coords.y2;
			$('image_width').value = dimensions.width;
			$('image_height').value = dimensions.height;
		}
		
		function removeTools()
		{
			if (cropper != null)
				 cropper.remove(); 
		}
		
		
		function init()
		{
			$('imgpanel').setStyle({background: '#fff'});
			
			if ($('userimage'))
			{
				resizeTool();
				Event.observe($('button_crop'), 'click', crop);
				Event.observe($('button_resize'), 'click', resize);
				Event.observe($('button_lucky'), 'click', lucky);
				Event.observe($('button_hflip'), 'click', hflip);
				Event.observe($('button_vflip'), 'click', vflip);
				Event.observe($('button_rotatei'), 'click', rotatei);
				Event.observe($('button_rotated'), 'click', rotated);
			}
			
		}
		
		function request(url, methodrequest, asyn, params, finish, loading)
		{
			if ($('userimage') && !processing)
			{
				new Ajax.Request(url+'?v='+(new Date()).getMilliseconds(),
				{
					method: methodrequest,
					asynchronous: asyn,
					parameters: params,
					onComplete: finish,
					onFailure: function() {} ,
					onLoading: loading
				});
				processing = true;
			}
		}		

				function hflip()
				{
					request('/hflip', 'get', true, {img: $('form_image').value}, updateImage, loading);
				}

				function vflip()
				{
					request('/vflip', 'get', true, {img: $('form_image').value}, updateImage, loading);
				}
												
				function crop()
				{
					if ($('x1').value !=  $('x2').value && $('y1').value !=  $('y2').value)
					{
						request('/crop', 'get', true, 
												{
													img: $('form_image').value, 
												 	x1: $('x1').value,
												 	y1: $('y1').value,
												 	x2: $('x2').value,
												 	y2: $('y2').value
												}
												, updateImage, loading);
						removeTools();
					}
				}

				function resize()
				{
					request('/resize', 'get', true, { img: $('form_image').value, width: $('userimage').width, height: $('userimage').height}, updateImage, loading);
				}
				
				function loading()
				{
				
					if (loadingimg)
					{
						loadingimg.toggle();
					}
					else
					{
						loadingimg = new Element("div");
						loadingimg.appendChild(new Element("img", {src: '/static/loading.gif'}));
						$('imgpanel').appendChild(loadingimg);
					}
					
					$('userimage').toggle();
				}

				function lucky()
				{
					request('/lucky', 'get', true, {img: $('form_image').value}, updateImage, loading);
				}
				
				function rotatei()
				{
					request('/rotatei', 'get', true, {img: $('form_image').value}, updateImage, loading);
				}
				
				function rotated()
				{
					request('/rotated', 'get', true, {img: $('form_image').value}, updateImage, loading);
				}
								
				function save(format)
				{
					location.href = '/save?img='+$('form_image').value+'&format='+format;
				}
					
				function updateImage(response)
				{
					var dimensions = response.responseText.evalJSON(true);
					$('span_width').update(dimensions.width);
					$('span_height').update(dimensions.height);
					$('userimage').width = dimensions.width;
					$('userimage').setAttribute('src', 'img?img_id='+$('form_image').value+'&v='+(new Date()).getMilliseconds());
					$('userimage').toggle();
					$('imgpanel').setStyle({background: '#fff'});
					removeTools();
					loadingimg.toggle();
					mitoggle('ok');
					processing  = false;
				}
				
				function mitoggle(id)
				{
					if (!$('userimage'))
						return;
						
					removeTools();
					
				 	divs = $('info_option', 'ok_option', 'save_option', 'resize_option', 'flip_option', 'rotate_option', 'crop_option', 'adjust_option');
			
				 	for (i = 0; i < divs.length; i++)
				 	{
				 		if (divs[i])
					 		if (id != divs[i].identify() && $(divs[i]).visible())
					 		{
								Effect.toggle(divs[i], 'slide');	
							}
					}
					
					if ($(id+'_option'))
						Effect.toggle(id+'_option', 'slide');
					
					if (id == 'resize' && $(id+'_option'))
						resizeTool();
						
					if (id == 'crop' && $(id+'_option'))
						cropTool();
					
					return false;
				}

				function cropTool()
				{
					if (cropper != null)
						 cropper.remove();
						
					if ($('userimage'))
						cropper = new Cropper.Img('userimage', {onEndCrop: onEndCrop});   
				}
			
				function resizeTool()
				{
					if (cropper != null)
						 cropper.remove();
						 
					if (slider == null && $('userimage'))
					{
						slider = new Control.Slider($('zoomslider').down('.handle'), $('zoomslider'), 
						{increment: 1, range: $R(0, $('userimage').width*2), sliderValue: $('userimage').width, 
						onSlide: function(value) { $('userimage').width = value; $('span_width').update($('userimage').width);  $('span_height').update($('userimage').height); }, 
						onChange: function(value) { $('userimage').width =  value; $('span_width').update($('userimage').width);  $('span_height').update($('userimage').height); }
					    });
				    }
				    else if ($('userimage'))
				    {
				    	slider.range =  $R(0, $('userimage').width*2);
				    	slider.setValue($('userimage').width);
				    }
				    
				}

		Event.observe(window, 'load', init);