AJAX Image Editor for Imagefield - kinda already working

I was originally looking for someone to make an image editor for the imagefield module, and posted the request here - http://drupal.org/node/442034 But I found an existing editor at http://www.ajax-image-editor.com . I found it pretty simple to add a bit of code to an imagefield function to link the preview thumbnails to this editor, so I wanted to share what I've learned so far in case someone wants to make a proper module out of it for the (incredibly awesome) imagefield module.

Download links

1.) AIE Editor - http://sourceforge.net/project/showfiles.php?group_id=199663&package_id=...
2.) Ext JS - http://extjs.com/products/extjs/download.php (choose 2.2.1 SDK download links)

The AIE folders should be extracted directly to your main drupal directory, as well as the ext js files. Your drupal folder should look like this:

drupalfolder
- all your root drupal folders +
- aie
- fonts
- images
- temp
- ext
test.html
installation.txt

You will need to add the following javascript to your pages. Take note of the aie/imageeditor.php path, as you will probably need to make that the root path to your AIE install (/drupalfolder/aie/imageeditor etc)

<script language="javascript1.2" type="text/javascript">
function showimageeditor( bild ) {
	LeftPosition = ( screen.width ) ? ( screen.width - 660 ) / 2 : 0;
	TopPosition = ( screen.height ) ? ( screen.height - 700 ) / 2 : 0;
	settings = 'height=700, width=660, top=' + TopPosition + ', left=' + LeftPosition + ', scrollbars=no, resizable=no, menubar=no, dependent=yes, status=no, toolbar=no'
	win = window.open( "aie/imageeditor.php?img=" + encodeURIComponent(bild), "imageeditorwin", settings )
	
}

function imagesaved(){
  window.location.reload();  
}
</script>

You need to set up the config.inc.php file in the AIE folder (I set this up for my local xampp install), and make sure you have the right path to imagemagick for your server.

  $web_root_dir="/xampp/htdocs/drupal6/"; 	             //the root directory of the webpage
  $server_temp_dir=$web_root_dir."temp/";      //the directory for temporary files and thumbnails cache
  $ffmpeg_location="";                         //the location of ffmpeg for video preview eg. "/usr/bin/ffmpeg". leave blank if ffmpeg is not installed.
  $fonts_dir=$web_root_dir."/fonts/";          //the fonts-directory
  $imagemagick_dir="/xampp/IM/";                //the ImageMagick installation directory
  $language="en";                              //the Language, en and de for now...
  $ext_dir="../ext/";                       //the relative path to the ext-js-library
  $default_theme="black";                      //the default ext-js-theme

Lastly you need a link to call the imageeditor when you're editing your node and viewing your imagefields. I just quickly modified the actual imagefield module on line 314 instead of doing it properly, as shown below :P

function theme_imagefield_admin_thumbnail($item = NULL) {
  if (is_null($item) || empty($item['filepath'])) {
    return '<!-- link to default admin thumb -->';
  }
  $thumb_path = imagefield_file_admin_thumb_path($item);
  return '<a href="/drupal6/'.$item['filepath'].'"><img src="'. file_create_url($thumb_path) .'" /></a>'; //add link here to the image thumbnail to call the editor
}

And there you go... after you've uploaded your images you should be able to just click on the thumbnails while editing the node and bring up the editor, so that you can modify the main file.