mujma: Fixed various browser compatibility problems. Now should work on Safari 3.0.2 /Windows, FF 1.5/2.0 Windows/Linux.

(merged from branches/gsoc)


git-svn-id: svn://svn.silverstripe.com/silverstripe/open/modules/cms/trunk@41891 467b73ca-7a2a-4603-9d3b-597d59a354a9

code/AssetTableField.php

@@ -12,6 +12,7 @@ class AssetTableField extends ComplexTableField {
 		$this->sourceSort = "Title";		
 		$this->Markable = true;
 		Requirements::javascript("cms/javascript/ImageEditor/Activator.js");
+
 	}
 	
 	function setFolder($folder) {
@@ -86,7 +87,7 @@ class AssetTableField extends ComplexTableField {
 			$detailFormFields->addFieldToTab("BottomRoot", 
 				new Tab("Image",
 					new LiteralField("ImageFull",
-						'<a id="ImageEditorActivator" href="javascript: void(0)">' . "<img id='thumbnailImage' src='{$thumbnail}' alt='{$childData->Name}' />" . '</a>' .
+						'<a id="ImageEditorActivator" href="javascript: void(0)">' . "<img id='thumbnailImage' src='{$thumbnail}?r=" . rand(1,100000)  . "' alt='{$childData->Name}' />" . '</a>' .
 						'<script type="text/javascript" src="cms/javascript/ImageEditor/Activator.js"></script><script type="text/javascript">imageActivator = new ImageEditorActivator.initialize();Event.observe("ImageEditorActivator","click",imageActivator.onOpen);</script>'
 					)
 				),

code/ImageEditor.php

@@ -18,8 +18,18 @@
 			Requirements::clear();
 			Requirements::javascript("jsparty/prototype.js");
 			Requirements::javascript("jsparty/scriptaculous/scriptaculous.js");
-			Requirements::javascript("/cms/javascript/ImageEditor/Require.js");
+            Requirements::javascript('cms/javascript/ImageEditor/Utils.js');
+            Requirements::javascript('cms/javascript/ImageEditor/ImageHistory.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Image.js');
+            Requirements::javascript('cms/javascript/ImageEditor/ImageTransformation.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Resizeable.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Effects.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Environment.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Crop.js');
+            Requirements::javascript('cms/javascript/ImageEditor/Resize.js');
+            Requirements::javascript('cms/javascript/ImageEditor/ImageBox.js');
 			Requirements::javascript("cms/javascript/ImageEditor/ImageEditor.js");
+
 			Requirements::javascript("jsparty/loader.js");
 			Requirements::javascript("jsparty/behaviour.js");
 			Requirements::javascript("cms/javascript/LeftAndMain.js");
@@ -44,6 +54,7 @@
 		*/ 
 		public function manipulate() {
 			$fileName = $this->requestParams['file'];
+			if(strpos($fileName,'?') !== false) $fileName = substr($fileName,0,strpos($fileName,'?'));
 			$command = $this->requestParams['command'];
 			$this->checkFileExists($fileName);
 			$gd = new GD($fileName);
@@ -85,6 +96,7 @@
 			if(isset($this->requestParams['originalFile']) && isset($this->requestParams['editedFile'])) {
 				$originalFile = $this->requestParams['originalFile'];
 				$editedFile = $this->requestParams['editedFile'];
+				if(strpos($originalFile,'?') !== false) $originalFile = substr($originalFile,0,strpos($originalFile,'?'));
 				if($this->checkFileExists($originalFile) && $this->checkFileExists($editedFile)) {
 					if($editedFile != $originalFile && copy($this->url2File($editedFile),$this->url2File($originalFile))) {
 						$image = DataObject::get_one('File',"Filename = '" . substr($this->url2File($originalFile),3) . "'");
@@ -166,8 +178,9 @@
 		*/ 
 		
 		private function checkFileExists($url) {
+			if(strpos($url,'?') !== false) $url = substr($url,0,strpos($url,'?'));
 			$pathInfo = pathinfo($url);
-			if(count($pathInfo) <= 3) $this->raiseError();
+			if(count($pathInfo) < 3) $this->raiseError();
 			if(!in_array($pathInfo['extension'],array('jpeg','jpg','jpe','png','gif'))) $this->raiseError();
 			$path = explode('/',$pathInfo['dirname']);
 			if(count($path) > 1) {

css/ImageEditor/ImageEditor.css

@@ -10,6 +10,7 @@
     height: 7px;
     background-color: red;
     position: absolute;     
+    overflow: hidden;
 }
 .leftUpperClickBox
 {
@@ -54,11 +55,11 @@
 {
     display: inline;
 }
-#mainContainer
+.displayNone
 {
-	width: 100%;
+    display: none;
-	height:600px;	
 }
+
 #imageContainer
 {
     position: absolute;
@@ -68,6 +69,10 @@
     border-bottom: 1px solid;
     height: 100px;
 }
+#image
+{
+    display: block;
+}
 .floatRight
 {
     float: right;
@@ -75,18 +80,13 @@
 #loadingIndicatorContainer
 {
     display: none;
-	z-index: 1000;
     position: absolute;
+    z-index: 1000;
 }
 #fakeImg
 {
     display: none;
 }
-#image
-{
-	width: 100%;
-	height: 100%;
-}
 #cropBox
 {
     position: absolute;
@@ -95,15 +95,17 @@
 {
     background-color: black;
     position: absolute;
-	opacity: 0.5;
+    opacity: .5;
+    filter: alpha(opacity=50);
 }
 #mainContainer
 {
+    position: absolute;
     border-color: black;
     border-style: solid;
+    height: 40%;
+    width: 100%;
+    left: 1%;
+    top: 1%;
     background-color: white;
-	margin: 0px;
-	position: absolute;
-	top: 20px;
-	padding: 0px;
 }

javascript/ImageEditor/Activator.js

@@ -8,7 +8,7 @@ var ImageEditorActivator = {
 		if(iframe != null) {
 			iframe.parentNode.removeChild(iframe);
 		}
-		iframe = document.createElement('iframe');
+		iframe = window.top.document.createElement('iframe');
 		fileToEdit = $('ImageEditorActivator').firstChild.src;
 		iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
 		iframe.id = 'imageEditorIframe';
@@ -19,6 +19,8 @@ var ImageEditorActivator = {
 		iframe.style.top = "-2%";
 		iframe.style.left = "1.5%";
 		window.top.document.body.appendChild(iframe);
+		
+		
 	}
 		
 }

javascript/ImageEditor/Crop.js

@@ -11,12 +11,6 @@ var Crop = {
 		this.rightGreyBox = $('rightGreyBox');
 		this.upperGreyBox = $('upperGreyBox');
 		this.lowerGreyBox = $('lowerGreyBox');		
-		options = {
-			resizeStop: Crop.resizeStop.bind(this),
-			onDrag: Crop.onDrag.bind(this),
-			onResize: Crop.onResize.bind(this),
-			getMousePos: Crop.getMousePos.bind(this)
-		};				
 		this.centerCropBox = Crop.centerCropBox.bind(this);
 		this.placeGreyBox = Crop.placeGreyBox.bind(this);
 		this.setListeners = Crop.setListeners.bind(this);
@@ -27,8 +21,14 @@ var Crop = {
 		this.doCrop = Crop.doCrop.bind(this);
 		this.setVisible = Crop.setVisible.bind(this);
 		Event.observe('image','load',this.centerCropBox);
+		options = {
+			resizeStop: Crop.resizeStop.bind(this),
+			onDrag: Crop.onDrag.bind(this),
+			onResize: Crop.onResize.bind(this),
+			getMousePos: Crop.getMousePos.bind(this)
+		};	
 		this.resizeCropBox = new Resizeable.initialize(this.cropBox,options);
-		Event.observe(this.cropBox,'dblclick',this.onCropStop);
+		Event.observe(this.cropBox,'dblclick',this.onCropStop.bind(this));
 		this.setListeners();
 		this.setVisible(false);
 	},
@@ -39,12 +39,12 @@ var Crop = {
 		this.resizeCropBox.originalWidth = this.cropBox.getWidth();
 	},
 	
-	onDrag: function() {
+	onDrag: function(event) {
 		if(this.cropBox.getLeft() <= 0 ) this.cropBox.style.left = '0px';
 		if(this.cropBox.getTop() <= 0 ) this.cropBox.style.top = '0px';
 		if(this.cropBox.getLeft() + this.cropBox.getWidth() > this.cropBox.getParentWidth()) this.cropBox.style.left = this.cropBox.getParentWidth()- this.cropBox.getWidth() + 'px';
 		if(this.cropBox.getTop() + this.cropBox.getHeight() > this.cropBox.getParentHeight()) this.cropBox.style.top = this.cropBox.getParentHeight() - this.cropBox.getHeight() + 'px';
-		this.placeGreyBox();
+		this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
 	},
 	
 	centerCropBox: function() {
@@ -52,32 +52,30 @@ var Crop = {
 		this.cropBox.style.height = this.cropBox.getParentHeight()/2 + 'px';
 		this.cropBox.style.left = (this.cropBox.getParentWidth() - this.cropBox.getWidth())/2 + "px";
 		this.cropBox.style.top = (this.cropBox.getParentHeight() - this.cropBox.getHeight())/2 + "px";
-		this.placeGreyBox();
+		this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
 		this.leftBoxConstraint = this.cropBox.getParentLeft();
 		this.topBoxConstraint = this.cropBox.getParentTop();
 		this.rightBoxConstraint = this.cropBox.getParentLeft() + this.cropBox.getParentWidth();
 		this.bottomBoxConstraint = this.cropBox.getParentTop() + this.cropBox.getParentHeight()-1;//hack without 1 doesn't work;
 	},
 	
-	placeGreyBox: function() {
+	placeGreyBox: function(width,height) {
+		this.lowerGreyBox.style.left = this.cropBox.getLeft()  + 'px';				
+		this.lowerGreyBox.style.width = width + 'px';
+		this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - height + "px";
+		this.lowerGreyBox.style.top = this.cropBox.getTop() + height + "px";
 		this.leftGreyBox.style.width = this.cropBox.getLeft() + "px";		
-		this.leftGreyBox.style.height = "100%";
+		this.leftGreyBox.style.height = $('imageContainer').getHeight() + 'px';
-		this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - this.cropBox.getWidth() + "px";
+		this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - width + "px";
-		this.rightGreyBox.style.height = "100%";
+		this.rightGreyBox.style.height = $('imageContainer').getHeight() + 'px';
-		this.rightGreyBox.style.left = this.cropBox.getLeft()  + this.cropBox.getWidth()  + "px";
+		this.rightGreyBox.style.left = this.cropBox.getLeft()  + width  + "px";
-		this.upperGreyBox.style.width = this.cropBox.getWidth() + 'px';
+		this.upperGreyBox.style.width = width + 'px';
 		this.upperGreyBox.style.left = this.cropBox.getLeft()  + 'px';				
 		this.upperGreyBox.style.height = this.cropBox.getTop()  + 'px';
-		this.lowerGreyBox.style.width = "100%";
-		this.lowerGreyBox.style.height = this.cropBox.getParentHeight() - this.cropBox.getTop() - this.cropBox.getHeight()  + "px";
-		this.lowerGreyBox.style.top = this.cropBox.getTop() + this.cropBox.getHeight()  + "px";
-		this.lowerGreyBox.style.width = this.cropBox.getWidth()  + 'px';
-		this.lowerGreyBox.style.left = this.cropBox.getLeft()  + 'px';				
 	},
 	
-	onResize: function(event) {
+	onResize: function(width,height) {
-		x = Event.pointerX(event);
+		this.placeGreyBox(width,height);
-		this.placeGreyBox();
 	},
 	getMousePos: function(event) {
 		x = Event.pointerX(event);
@@ -98,7 +96,7 @@ var Crop = {
 		newHeight = this.cropBox.getHeight() ;
 		startTop = this.cropBox.getTop() ;
 		startLeft = this.cropBox.getLeft() ;
-		if(newWidth > 30 && newHeight > 30) {
+		if(newWidth > 35 && newHeight > 35) {
 			imageTransformation.crop(startTop,startLeft,newWidth,newHeight);
 			imageHistory.enable();
 		} else {
@@ -133,7 +131,7 @@ var Crop = {
 		if(setVisible) {
 			Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox);			
 			this.centerCropBox();
-			this.placeGreyBox();
+			this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
 		} else {
 			Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));							
 		}

javascript/ImageEditor/Environment.js

@@ -4,6 +4,6 @@
 var Environment = {
 	initialize: function (imageFile) {
 		imageBox = new ImageBox.initialize();
-		image = new Image.initialize(imageFile);		
+		imageToResize = new Image.initialize(imageFile);		
-	},		
+	}		
 }

javascript/ImageEditor/Image.js

@@ -7,7 +7,7 @@ var Image = {
 		this.image.src = imageFile;
 		this.reportSize = Image.reportSize.bind(this);
 		this.onImageLoad = Image.onImageLoad.bind(this);
-		Event.observe('image','load',this.onImageLoad);
+		Event.observe(this.image,'load',this.onImageLoad);
 		imageHistory.add('initialize',this.image.src);
 	},
 	
@@ -16,15 +16,15 @@ var Image = {
 		$('imageHeight').innerHTML = this.image.height + "px";	
 	},
 	
-	onImageLoad: function() {
+	onImageLoad: function(event) {
 		this.reportSize();
+		$('imageContainer').style.width = this.image.width + 'px';
+		$('imageContainer').style.height = this.image.height + 'px';
 		if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
 			imageBox.center();
 		}
-		$('imageContainer').style.width = this.image.width + 'px';
-		$('imageContainer').style.height = this.image.height + 'px';
 		resize.imageContainerResize.originalWidth = this.image.width;
 		resize.imageContainerResize.originalHeight = this.image.height;
-
+		imageBox.checkOutOfDrawingArea($('imageContainer').getWidth(),$('imageContainer').getHeight());
-	},
+	}
 };

javascript/ImageEditor/ImageBox.js

@@ -8,6 +8,7 @@ var ImageBox = {
 		this.hideIndicator = ImageBox.hideIndicator.bind(this);
 		this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
 		this.centerIndicator = ImageBox.centerIndicator.bind(this);					
+		this.checkOutOfDrawingArea = ImageBox.checkOutOfDrawingArea.bind(this);
 		this.center = ImageBox.center.bind(this);
 		this.imageContainer = $('imageContainer');
 		Element.hide(this.imageContainer);
@@ -19,19 +20,20 @@ var ImageBox = {
 	},
 	
 	hideIndicator: function() {
-		indicator = $('loadingIndicatorContainer');
+		Element.hide($('loadingIndicatorContainer'));
-		indicator.style.display = 'none';		
 	},	
 	
 	centerIndicator: function() {
 		indicator = $('loadingIndicatorContainer');
 		indicatorImage = $('loadingIndicator');
-		top = this.imageContainer.getTop();
+		var top = this.imageContainer.getTop();
-		left = this.imageContainer.getLeft();
+		var left = this.imageContainer.getLeft();
-		width = this.imageContainer.getWidth();
+		var width = this.imageContainer.getWidth();
-		height = this.imageContainer.getHeight();
+		var height = this.imageContainer.getHeight();
-		indicator.style.left = left + width/2 - indicatorImage.width/2 + "px"; 
+		var parentTop =  this.imageContainer.getParentTop();
-		indicator.style.top = top + height/2 - indicatorImage.height/2 + "px";		
+		var parentLeft = this.imageContainer.getParentLeft();
+		indicator.style.left = parentLeft + left + width/2 - indicatorImage.width/2 + 2 + "px"; 
+		indicator.style.top = parentTop + top + height/2 - indicatorImage.height/2 + 2 + "px";		
 	},
 	
 	reCenterIndicator: function() {
@@ -44,6 +46,21 @@ var ImageBox = {
 		$('imageContainer').style.left = this.imageContainer.getParentWidth()/2 - this.imageContainer.getWidth()/2 + 'px';
 		$('imageContainer').style.top = this.imageContainer.getParentHeight()/2 - this.imageContainer.getHeight()/2 + 'px';
 		Element.show(this.imageContainer);
+	},
+	
+	checkOutOfDrawingArea: function(width,height) {
+		var left =  this.imageContainer.getLeft();
+		var top  =  this.imageContainer.getTop();
+		var parentLeft = this.imageContainer.getParentLeft();
+		var parentTop = this.imageContainer.getParentTop();
+		var parentWidth = this.imageContainer.getParentWidth(); 
+		var parentHeight = this.imageContainer.getParentHeight(); 
+		if(left + width > parentWidth) {
+			$('imageContainer').style.left = left - (left + width - parentWidth) - 3+ 'px';
+		}
+		if(top + height > parentHeight) {
+			$('imageContainer').style.top = top - (top + height - parentHeight) - 3 + 'px';
+		}	 
 	}
 	
 	

javascript/ImageEditor/ImageEditor.js

@@ -2,18 +2,10 @@
  * @author Mateusz
  */
  
-Scriptaculous.require('cms/javascript/ImageEditor/Utils.js');
-Scriptaculous.require('cms/javascript/ImageEditor/ImageHistory.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Image.js"');
-Scriptaculous.require('cms/javascript/ImageEditor/ImageTransformation.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Resizeable.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Effects.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Environment.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Crop.js');
-Scriptaculous.require('cms/javascript/ImageEditor/Resize.js');
-Scriptaculous.require('cms/javascript/ImageEditor/ImageBox.js');
 var ImageEditor = {
 	initialize: function(imageFile) {
+		imageFile += '1234';
+		crop = null;
 		imageHistory = new ImageHistory.initialize();
 		environment = new Environment.initialize(imageFile);		
 		imageTransformation = new ImageTransformation.initialize();
@@ -26,6 +18,8 @@ var ImageEditor = {
 		this.onClose = ImageEditor.onClose.bind(this);
 		Event.observe($('saveButton'),'click',this.onSave);
 		Event.observe($('closeButton'),'click',this.onClose);				
+		imageToResize.onImageLoad();
+		resize.imageContainerResize.placeClickBox();
 	}, 
 	onSave: function() {
 		if(this.tottalyOriginalImageFile != $('image').src) {
@@ -41,3 +35,4 @@ var ImageEditor = {
 		imageTransformation.close();
 	}		
 }
+

javascript/ImageEditor/ImageHistory.js

@@ -70,11 +70,15 @@ ImageHistory = {
 	},
 	
 	onFakeImageLoad: function() {
+		imageBox.checkOutOfDrawingArea(fakeImage.width,fakeImage.height);
+		$('image').style.width = fakeImage.width + 'px';
+		$('image').style.height = fakeImage.height + 'px';
 		$('imageContainer').style.width = fakeImage.width + 'px';
 		$('imageContainer').style.height = fakeImage.height + 'px';
 		resize.imageContainerResize.originalWidth = fakeImage.width;			
 		resize.imageContainerResize.originalHeight = fakeImage.height;				
 		resize.imageContainerResize.placeClickBox();
+		imageToResize.onImageLoad();
 	},
 	
 	enable: function() {
@@ -84,5 +88,5 @@ ImageHistory = {
 	disable: function() {
 		Event.stopObserving($('undoButton'),'click', this.undo);			
 		Event.stopObserving($('redoButton'),'click', this.redo);
-	},
+	}
 };

javascript/ImageEditor/ImageTransformation.js

@@ -24,7 +24,7 @@ var ImageTransformation = {
 				response = eval('(' + transport.responseText + ')');
 				$('image').src = response.fileName;
 				imageHistory.add('resize',$('image').src);				
-			},
+			}
 		 };
 		 imageBox.showIndicator();
 		 new Ajax.Request('admin/ImageEditor/manipulate', options);
@@ -37,7 +37,10 @@ var ImageTransformation = {
 			onSuccess: function(transport) {
 				imageBox.hideIndicator();
 				response = eval('(' + transport.responseText + ')');
+				imageBox.checkOutOfDrawingArea(response.width,response.height);
 				$('image').src = response.fileName;
+				$('image').style.width = response.width + 'px';
+				$('image').style.height = response.height + 'px';
 				$('imageContainer').style.width = response.width + 'px';
 				$('imageContainer').style.height = response.height + 'px';
 				imageHistory.add('rotate',$('image').src);	
@@ -45,6 +48,7 @@ var ImageTransformation = {
 			}			
 		 };
 		 imageBox.showIndicator();
+
 		 new Ajax.Request('admin/ImageEditor/manipulate', options);		
 	},
 	
@@ -56,14 +60,16 @@ var ImageTransformation = {
 				imageBox.hideIndicator();
 				response = eval('(' + transport.responseText + ')');
 				$('image').src = response.fileName;
+				$('image').style.width = response.width + 'px';
+				$('image').style.height = response.height + 'px';
 				$('imageContainer').style.width = response.width + 'px';
 				$('imageContainer').style.height = response.height + 'px';
 				imageHistory.add('crop',$('image').src);	
 				crop.setVisible(false);
-			},
+			}
 		 };
 		 imageBox.showIndicator();
-		 new Ajax.Request('admin/ImageEditor/manipulate', options);			
+		 new Ajax.Request('/admin/ImageEditor/manipulate', options);			
 	},
 	
 	save: function(originalFile,editedFile) {
@@ -73,7 +79,7 @@ var ImageTransformation = {
 			onSuccess: function(transport) {
 				eval(transport.responseText);
 				imageEditor.onClose();
-			},
+			}
 		 };
 		 new Ajax.Request('admin/ImageEditor/save', options);
 	},
@@ -84,7 +90,7 @@ var ImageTransformation = {
 			postBody: '',
 			onSuccess: function(transport) {
 				eval(transport.responseText);
-			},
+			}
 		 };
 		 new Ajax.Request('admin/ImageEditor/close', options);
 	}

javascript/ImageEditor/Resize.js

@@ -11,7 +11,7 @@ var Resize = {
 		options = {
 				resizeStop: Resize.resizeStop.bind(this),
 				onDrag: Resize.onDrag.bind(this),
-				onResize: Resize.onResize,
+				onResize: Resize.onResize.bind(this),
 				getMousePos: Resize.getMousePos.bind(this)
 			};		
 		new Positioning.addBehaviour(this.element);
@@ -20,13 +20,11 @@ var Resize = {
 	},
 	
 	resizeStop: function(event) {
-		if(EventStack.getLastEvent() != null) {
 		imageElement = $('image');
 		EventStack.clearStack();
 		if(this.imageContainerResize.originalWidth != imageElement.width || this.imageContainerResize.originalHeight != imageElement.height) {
 			imageTransformation.resize(imageElement.width,imageElement.height);
 		}	
-		}
 	},
 	
 	onDrag: function()
@@ -38,7 +36,9 @@ var Resize = {
 		imageBox.reCenterIndicator();		
 	},
 	
- 	onResize: function() {
+ 	onResize: function(width,height) {
+		$('image').style.width = width + "px";
+		$('image').style.height = height + "px"; 
 	},
 	getMousePos: function(event) {
 		relativeMouseX = this.getRelativeMousePos(event).x;

javascript/ImageEditor/Resizeable.js

@@ -19,8 +19,10 @@ Resizeable = {
 	},
 	
 	resizeStart: function(event) {
+		if(Element.hasClassName(Event.element(event),'clickBox')) {
 			EventStack.addEvent(event);
 			Event.stop(event);
+		}
 	},
 	
 	leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
@@ -73,8 +75,8 @@ Resizeable = {
 	},
 	
 	onResize: function(event) {		
-		if(EventStack.getLastEvent() != null && this.isVisible) {					
+		if(EventStack.getLastEventElement() != null && this.isVisible) {					
-			lastEventElement = Event.element(EventStack.getLastEvent());
+			lastEventElement = EventStack.getLastEventElement();
 			var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
 			var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
 			if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) {
@@ -102,31 +104,30 @@ Resizeable = {
 				this.lowerMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
 			}
 			this.placeClickBox();
+			this.customOnResize(this.element.getWidth(),this.element.getHeight());		
 			imageBox.reCenterIndicator();			
-			this.customOnResize();
 		}	
 	},
 	
 	resize: function(width,height) {
-		if(width < 30 && height == -1000) {
+		if(width < 35 && height == -1000) {
 			return false;
 		}
-		if(height < 30 && width == -1000) {
+		if(height < 35 && width == -1000) {
 			return false;
 		}
-		if((width < 30 || height < 30) && (width != -1000 && height != -1000)) {
+		if((width < 35 || height < 35) && (width != -1000 && height != -1000)) {
 			return false;
 		}		
-		if(width != -1000)	{ 			
+		if(width == -1000)	{ 			
+			width = this.originalWidth;
+		}
+		if(height == -1000) {			
+			height = this.originalHeight;
+		}	
+		
 		this.element.style.width = width + "px";	
-		} else {			
-			this.element.style.width = this.originalWidth + "px";
-		}
-		if(height != -1000) {			
 		this.element.style.height = height + "px";
-		} else {
-			this.element.style.height = this.originalHeight + "px";
-		}		
 		return true;		
 	},
 	
@@ -141,8 +142,7 @@ Resizeable = {
 		}
 		width = Element.getDimensions(this.element).width;
 		height = Element.getDimensions(this.element).height;
-		
+		clickBoxHalfWidth =  Math.floor(Element.getDimensions(this.leftUpperClickBox2).width/2)+1;
-		clickBoxHalfWidth =  Math.floor(Element.getDimensions(this.leftUpperClickBox).width/2);
 		
 		leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
 		leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
@@ -155,6 +155,8 @@ Resizeable = {
 		
 		this.leftUpperClickBox.style.left = leftUpper.x + 'px';
 		this.leftUpperClickBox.style.top = leftUpper.y + 'px';
+		this.leftUpperClickBox2.style.left = leftUpper.x + 'px';
+		this.leftUpperClickBox2.style.top = leftUpper.y + 'px';
 		this.leftMiddleClickBox.style.left = leftMiddle.x + 'px';
 		this.leftMiddleClickBox.style.top = leftMiddle.y + 'px';
 		this.leftLowerClickBox.style.left = leftLower.x + 'px';
@@ -171,17 +173,23 @@ Resizeable = {
 		this.upperMiddleClickBox.style.top = upperMiddle.y + 'px';
 		this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px';
 		this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px';	
+		if(crop != null) {
+			crop.placeGreyBox();
+		}
 	},
 	
 	createClickBoxes: function() {
-		this.leftUpperClickBox = this.createElement('div',Math.random(),["leftUpperClickBox","clickBox"]);
+		this.leftUpperClickBox = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]);
-		this.leftMiddleClickBox = this.createElement('div',Math.random(),["leftMiddleClickBox","clickBox"]);
+		this.leftMiddleClickBox = this.createElement('div',Random.string(5),["leftMiddleClickBox","clickBox"]);
-		this.leftLowerClickBox = this.createElement('div',Math.random(),["leftLowerClickBox","clickBox"]);
+		this.leftLowerClickBox = this.createElement('div',Random.string(5),["leftLowerClickBox","clickBox"]);
-		this.rightUpperClickBox = this.createElement('div',Math.random(),["rightUpperClickBox","clickBox"]);
+		this.rightUpperClickBox = this.createElement('div',Random.string(5),["rightUpperClickBox","clickBox"]);
-		this.rightMiddleClickBox = this.createElement('div',Math.random(),["rightMiddleClickBox","clickBox"]);
+		this.rightMiddleClickBox = this.createElement('div',Random.string(5),["rightMiddleClickBox","clickBox"]);
-		this.rightLowerClickBox = this.createElement('div',Math.random(),["rightLowerClickBox","clickBox"]);
+		this.rightLowerClickBox = this.createElement('div',Random.string(5),["rightLowerClickBox","clickBox"]);
-		this.upperMiddleClickBox = this.createElement('div',Math.random(),["upperMiddleClickBox","clickBox"]);
+		this.upperMiddleClickBox = this.createElement('div',Random.string(5),["upperMiddleClickBox","clickBox"]);
-		this.lowerMiddleClickBox = this.createElement('div',Math.random(),["lowerMiddleClickBox","clickBox"]);		
+		this.lowerMiddleClickBox = this.createElement('div',Random.string(5),["lowerMiddleClickBox","clickBox"]);		
+		this.leftUpperClickBox2 = this.createElement('div',Random.string(5),["leftUpperClickBox","clickBox"]);		
+		//Safarai requires creating another clickbox because leftUppperClickBox is hidden (hack)
+		
 	},
 	
 	createElement: function(tag,id,classes) {
@@ -236,7 +244,7 @@ Resizeable = {
 		var options =  {
 			starteffect: function() {},
 			endeffect: function() {},
-			change: this.onDrag,
+			change: this.onDrag
 		};		
 		this.draggableImage = new Draggable(this.element,options);
 	},
@@ -253,6 +261,7 @@ Resizeable = {
 		if(setVisible) {
 			Element.show(
 				this.leftUpperClickBox,
+				this.leftUpperClickBox2,
 				this.leftMiddleClickBox,
 				this.leftLowerClickBox,
 				this.rightUpperClickBox,
@@ -265,6 +274,7 @@ Resizeable = {
 		} else {
 			Element.hide(
 				this.leftUpperClickBox,
+				this.leftUpperClickBox2,
 				this.leftMiddleClickBox,
 				this.leftLowerClickBox,
 				this.rightUpperClickBox,

javascript/ImageEditor/Utils.js

@@ -9,17 +9,17 @@ Point = {
 }
 
 EventStack = {
-	lastEvent: null,
+	lastEventElement: null,
-	getLastEvent: function(){		
+	getLastEventElement: function(){		
-		return EventStack.lastEvent
+		return EventStack.lastEventElement;
 	},
 	
 	addEvent: function(event) {
-		EventStack.lastEvent = event;
+		EventStack.lastEventElement = Event.element(event);
 	},
 	
 	clearStack: function() {
-		this.lastEvent = null;
+		this.lastEventElement  = null;
 	}
 }
 
@@ -70,3 +70,15 @@ Positioning = {
 		return Element.getDimensions(Position.offsetParent(this.element)).width
 	}
 }
+
+Random = {
+	string: function(length) {
+		chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+		string = "";
+		for(x=0;x<length;x++) {
+			i = Math.floor(Math.random() * 57);
+			string += chars.charAt(i);
+		}	
+		return string;
+	}
+}

templates/ImageEditor.ss

@@ -1,12 +1,11 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" debug=true>
     <head>
         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
         <% base_tag %>
         <title>Untitled Document</title>
-		<link rel="stylesheet" type="text/css" media="all" href="css/main.css" />								
     </head>
-	<body id="body">
+    <body id="body" onload="setTimeout(function() { imageEditor = new ImageEditor.initialize('$fileToEdit'); }, 0);">
         <div id="mainContainer">
             <div id="menuBarContainer">
                 <div id="photoInfoContainer" class="floatRight">
@@ -37,17 +36,16 @@
                     <div id="rightGreyBox" class="greyBox"></div>
                     <div id="upperGreyBox" class="greyBox"></div>
                     <div id="lowerGreyBox" class="greyBox"></div>   
-					<img id="image" src="#" alt="We have encountered an error"/>						
+                    <img id="image" src="#" alt=""/>                        
                     <div id="cropBox"></div>
                 </div>  
-				<div id="loadingIndicatorContainer">
-					<img id="loadingIndicator" alt="indicator" src="cms/images/ImageEditor/indicator.gif">
-				</div>												
             </div>          
         </div>
         <div id="fakeImgContainer">
-			<img id="fakeImg" src="#" alt="fakeImg"/>
+            <img id="fakeImg" src="#" alt=""/>
+        </div>
+        <div id="loadingIndicatorContainer">
+            <img id="loadingIndicator" alt="" src="cms/images/ImageEditor/indicator.gif">
         </div>  
-		<script type="text/javascript">imageEditor = new ImageEditor.initialize("$fileToEdit")</script>		
     </body> 
 </html>