mujma: ENHANCEMENTS: Added new design for ImageEditor?.

(merged from branches/gsoc)


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

code/ImageEditor.php

@@ -8,6 +8,8 @@
 		
 		public $fileToEdit = "";
 		
+		public $fileToEditOnlyName = "";
+		
 		/**
 		 * Includes all JS required for ImageEditor. This method requires setting
 		 * a fileToEdit URL in POST.
@@ -39,6 +41,7 @@
 			if(!isset($this->requestParams['fileToEdit'])) $this->raiseError();
 			$fileWithPath = $this->requestParams['fileToEdit'];
 			$this->fileToEdit = $this->file2Origin($fileWithPath);
+			$this->fileToEditOnlyName = $this->urlToFilename($this->fileToEdit);  
 			return $this->renderWith(__CLASS__);
 		}
 		
@@ -220,4 +223,16 @@
 			echo "parent.parent.parent.statusMessage('Error: " . $message . "','bad',false);";
 			exit();	
 		}
+		
+		/**
+         * Method converts retrieves filename from url
+         *
+         * @param url
+         * 
+        */ 
+		
+		private function urlToFilename($url) {
+		    $path = pathinfo($url);
+		    return $path['filename'] . "." . substr($path['extension'],0,strpos($path['extension'],'?'));  	
+		}
 	}

css/ImageEditor/ImageEditor.css

@@ -1,14 +1,21 @@
 *
 {
-    margin: 0px;
+    margin: 0;
-    padding: 0px;
+    padding: 0;
+}
+a, a:visited
+{
+	text-decoration: none;
+	width: 0;
+	height: 0;
+	position: absolute;
 }
 
 .clickBox
 {   
     width: 7px;
     height: 7px;
-    background-color: red;
+    background-image: url(../../images/ImageEditor/clickBox.png);
     position: absolute;     
     overflow: hidden;
 }
@@ -64,18 +71,32 @@
 {
     position: absolute;
 }
-#menuBarContainer
+#MenuBar
 {
-    border-bottom: 1px solid;
+    height: 132px;
-    height: 100px;
+    background-image: url(../../images/ImageEditor/topLeft.png);
 }
+#TopLeft {
+    float: left;
+    width: 584px;
+    height: 132px;
+    background-image: url(../../images/ImageEditor/topLeft.png);
+    display: inline;
+}
+#TopRight {
+	position: absolute;
+	width: 180px;
+	height: 132px;
+	background-image: url(../../images/ImageEditor/topRight.png);
+}
+
 #image
 {
     display: block;
 }
-.floatRight
+.floatLeft
 {
-    float: right;
+    float: left;
 }
 #loadingIndicatorContainer
 {
@@ -112,19 +133,290 @@ body
 	height: 100%;
 	width: 100%;
 }
-#mainContainer
+#Main
 {
     position: absolute;
     border-color: black;
     border-style: solid;
-    height: 97%;
+    height: 95%;
-    width: 98%;
+    width: 99%;
-    left: 1%;
-    top: 1%;
     background-color: white;
 }
 #imageEditorContainer
 {
     position: relative;
+    top: 15px;
+    left: 15px;
+    overflow: auto;
+    background-image: url(../../images/ImageEditor/back.png);
+}
+#Actions
+{
+    position: absolute;
+    left: 10px;
+    top: 38px;
+    width: 211px;
+    height: 73px;
+    background-image: url(../../images/ImageEditor/c1.png);
+}
+#SaveText
+{
+    position: absolute;
+    top: 40px;
+    left: 13px;
+}
+#SaveIcon
+{
+    position: absolute;
+    left: 33px; 
+    top: 10px;
+    width: 30px;
+    height: 30px;
+    background-image: url(../../images/ImageEditor/c1Save.png);
+    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
+}
+#ExitText
+{
+    position: absolute;
+    top: 40px;
+    left: 95px;
+}
+#ExitIcon
+{
+    position: absolute;
+    left: 97px; 
+    top: 15px;
+    width: 26px;
+    height: 26px;
+    background-image: url(../../images/ImageEditor/c1Exit.png);
+    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/
+}
+#UndoText
+{
+    position: absolute;
+    top: 14px;
+    left: 175px;
+}
+#UndoIcon
+{
+    position: absolute;
+    left: 145px;
+    top: 15px;
+    width: 24px;
+    height: 14px;
+    background-image: url(../../images/ImageEditor/c1Undo.png);
+    background-repeat: no-repeat;/* IE hack */
+    cursor: hand;/* IE Hack, because <a> have 0 width/height.*/	
+}
+#RedoText
+{
+    position: absolute;
+    top: 38px;
+    left: 175px;
+}
+#RedoIcon
+{
+	position: absolute;
+    left: 143px;
+    top: 38px;
+    width: 25px;
+    height: 13px;
+    background-image: url(../../images/ImageEditor/c1Redo.png);
+    background-repeat: no-repeat;/* IE hack */
+    cursor: hand;/* IE Hack, because <a> have width/height.*/    
+}
+#ActionsDescription
+{
+	position: absolute;
+    top: 57px;
+    left: 85px;
+}
+.menuText
+{
+    color: #6C889E;
+    font-family: sans-serif;
+    font-size: 13px;
+}
+#Functions
+{
+    position: absolute;
+    left: 240px;
+    top: 38px;
+    height: 73px;
+    width: 220px;
+    background-image: url(../../images/ImageEditor/c2.png);
+}
+#RotateIcon
+{
+    position: absolute;
+    left: 17px;
+    top: 11px;
+    height: 26px;
+    width: 30px;	
+    background-image: url(../../images/ImageEditor/c2Rotate.png);
+    cursor: hand;/* IE Hack, because <a> have width/height.*/
+}
+#RotateText
+{
+    position: absolute;
+    top: 39px;
+    left: 15px;    	
+}
+#CropIcon
+{
+    position: absolute;
+    left: 66px;
+    top: 11px;
+    height: 28px;
+    width: 31px;    
+    background-image: url(../../images/ImageEditor/c2Crop.png);
+    cursor: hand;/* IE Hack, because <a> have width/height.*/
+    	
+}
+#CropText
+{
+    position: absolute;
+    top: 38px;
+    left: 67px;	
+}
+#ImageWidthLabel
+{
+    position: absolute;
+    top: 11px;
+    left: 114px;
+}
+#ImageHeightLabel
+{
+    position: absolute;
+    top: 33px;
+    left: 114px;
+}
+#ImageWidth
+{
+    position: absolute;
+    top: 14px;
+    left: 157px;
+    color: #7A7D80;
+    font-size: 9px;
+    	
+}
+#ImageHeight
+{
+	position: absolute;
+    top: 36px;
+    left: 157px;
+	color: #7A7D80;
+	font-size: 9px;
+}
+#FunctionsDescription
+{
+    position: absolute;
+    top: 57px;
+    left: 70px;
+}
+
+#TopRuler
+{
+    position: absolute;
+    width: 100%;
+    height: 15px;
+    background-image: url(../../images/ImageEditor/topRuler.png);
+    overflow: hidden;   
+}
+#LeftRuler
+{
+    position: absolute;
+    width: 15px;
+    height: 100%;
+    top: 147px;
+    background-image: url(../../images/ImageEditor/leftRuler.png);
+}
+#Filename p
+{
+    position: absolute;
+    color: white;
+    left: 20px;
+    top: 7px;
+    font-family: sans-serif;
+    font-size: 14px;
+}
+
+#CurrentAction
+{
+    position: absolute;
+    top: 38px;
+    left: 479px;
+    width: 106px;
+    height: 73px;
+    background-image: url(../../images/ImageEditor/c3.png);
+}
+#ApplyIcon
+{
+    position: absolute;
+    left:59px;
+    top: 14px;
+    width: 24px;
+    height: 23px;
+    background-image: url(../../images/ImageEditor/c3Apply.png);
+}
+#ApplyText
+{
+    position: absolute;
+    top: 39px;
+    left: 57px; 
+}
+
+#CancelIcon
+{
+    position: absolute;
+    left:18px;
+    top: 13px;
+    width: 26px;
+    height: 25px;
+    background-image: url(../../images/ImageEditor/c3Cancel.png);
+}
+#CancelText
+{
+    position: absolute;
+    top: 39px;
+    left: 12px; 
+}
+#CurrentActionDescription
+{
+	position: absolute;
+    top: 57px;
+    left: 12px;
+}
+
+/*
+ * Status, Directly copied from cms_right.css
+ */
+
+#statusMessage {
+    position: absolute;
+    z-index: 500;
+    bottom: 30px;
+    left: 30px;
+    text-align: left;
+    padding: 1px 1px 1px 40px;
+    
+    font-size: 16px;
+    font-weight: bold;  
+    
+    /* border: 1px solid #cc9; */
+    color: #660;
+    /* background-color: #F9F9E3; */
+    margin: 2px;
+}
+#statusMessage.good {
+    border-color: #9c9;
+    color: #060;
+    background: url(../../images/alert-good.gif) /*#E2F9E3*/ 7px no-repeat;
+}
+#statusMessage.bad {
+    border-color: #c99;
+    color: #c00;
+    background: url(../../images/alert-bad.gif) #fff 7px no-repeat;
+    max-height: 300px;
     overflow: auto;
 }

javascript/ImageEditor/Activator.js

@@ -14,15 +14,28 @@ var ImageEditorActivator = {
 		fileToEdit = $('ImageEditorActivator').firstChild.src;
 		iframe.setAttribute("src","admin/ImageEditor?fileToEdit=" + fileToEdit);
 		iframe.id = 'imageEditorIframe';
-		iframe.style.width = windowWidth - 30 + 'px';
+		iframe.style.width = windowWidth - 6 + 'px';
 		iframe.style.height = windowHeight + 10 + 'px';
 		iframe.style.zIndex = "1000";
 		iframe.style.position = "absolute";
-		iframe.style.top = "-2%";
+		iframe.style.top = "8px";
-		iframe.style.left = "1.5%";
+		iframe.style.left = "8px";
 		window.top.document.body.appendChild(iframe);
-		
+		divLeft = window.top.document.createElement('div');
-		
+		divRight = window.top.document.createElement('div');
+        divLeft.style.width = "8px";
+        divLeft.style.height = "300%";
+        divLeft.style.zIndex = "1000";
+        divLeft.style.top = "0";
+        divLeft.style.position = "absolute";
+        divRight.style.width = "10px";
+        divRight.style.height = "300%";
+        divRight.style.zIndex = "1000";
+        divRight.style.top = "0";
+        divRight.style.position = "absolute";
+        divRight.style.left = Element.getDimensions(divLeft).width + Element.getDimensions(iframe).width - 4 + 'px';
+		window.top.document.body.appendChild(divLeft);
+		window.top.document.body.appendChild(divRight);
 	}
 		
 }

javascript/ImageEditor/Crop.js

@@ -117,19 +117,20 @@ var Crop = {
 	cropCallback: function() {
 	   resize.imageContainerResize.placeClickBox();
    	   resize.imageContainerResize.setVisible(true);
-	   Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));							
+	   Element.show($('CropText'));
+	   Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));							
 	},
 	
 	setListeners: function() {
-		Event.observe('cropStart','click',this.onCropStart);
+		Event.observe('CropButton','click',this.onCropStart);
-		Event.observe('cropOk','click',this.onCropOk);
+		Event.observe('CancelButton','click',this.onCropCancel);
-		Event.observe('cropCancel','click',this.onCropCancel);		
+		Event.observe('ApplyButton','click',this.onCropOk);
 	},
 	onCropStart: function()	 {
 		if(this.isEnabled) {
 			$('image').style.visibility = "hidden";//hack for IE for not selecting image during crop
 			this.setVisible(true);	
-			Element.show($('cropOk'),$('cropCancel'));
+			Element.show($('CurrentAction'));
 			imageHistory.disable();
 			effects.disableRotate();
 			this.enable();
@@ -138,13 +139,14 @@ var Crop = {
 	
 	onCropOk: function() {
 		if(this.isEnabled) {
-		    if(this.doCrop()) Element.hide($('cropOk'),$('cropCancel'));
+		    if(this.doCrop()) Element.hide($('CurrentAction'));
 		}	
 	},
 	
-	onCropCancel: function() {
+	onCropCancel: function(event) {
 		if(this.isEnabled) {
-		    Element.hide($('cropOk'),$('cropCancel'));
+		    Element.hide($('CurrentAction'));
+		    Element.show($('CropText'));
 		    this.setVisible(false);
 		    imageHistory.enable();
 		    effects.enableRotate();
@@ -160,7 +162,7 @@ var Crop = {
 			this.centerCropBox();
 			this.placeGreyBox(this.cropBox.getWidth(),this.cropBox.getHeight());
 		} else {
-			Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));							
+			Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('CurrentAction'));							
 		}
 		resize.imageContainerResize.setVisible(!setVisible);
 		this.resizeCropBox.setVisible(setVisible);

javascript/ImageEditor/DocumentBody.js

@@ -3,19 +3,29 @@
  */
 var DocumentBody = {
 	initialize: function() {
-		var windowHeight = Element.getDimensions(window.top.document.body).height;
+		this.placeUI = DocumentBody.placeUI.bind(this);
-		Event.observe(window.top,'resize',DocumentBody.onWindowResize.bind(this));
+		this.placeUI();
-		Event.observe($('imageEditorContainer'),'scroll',DocumentBody.onImageEditorScroll.bind(this));
+		Event.observe(window.top,'resize',DocumentBody.resizeIframe.bind(this));
-		$('imageEditorContainer').style.height = windowHeight - 109 + 'px';
 	},
 	
-	onWindowResize: function() {
+	resizeIframe: function(event) {
 	    var windowWidth = Element.getDimensions(window.top.document.body).width;
         var windowHeight = Element.getDimensions(window.top.document.body).height;
         iframe = window.top.document.getElementById('imageEditorIframe');
-        iframe.style.width = windowWidth - 30 + 'px';
+        iframe.style.width = windowWidth - 6 + 'px';
         iframe.style.height = windowHeight + 10 + 'px';
-        $('imageEditorContainer').style.height = windowHeight - 105 + 'px';		
+        this.placeUI();
+	},
+	
+	placeUI: function() {
+        var iframe = window.top.document.getElementById('imageEditorIframe');
+        $('imageEditorContainer').style.height = Element.getDimensions(iframe).height - Element.getDimensions($('TopRuler')).height - Element.getDimensions($('MenuBar')).height - 32  + 'px';
+        $('imageEditorContainer').style.width = Element.getDimensions(iframe).width - Element.getDimensions($('LeftRuler')).width - 14 + 'px';
+        $('LeftRuler').style.height = $('imageEditorContainer').style.height; 
+        $('TopLeft').style.width = Element.getDimensions($('MenuBar')).width -
+                                   Element.getDimensions($('TopRight')).width + 'px';
+        $('TopRight').style.left = Element.getDimensions($('TopLeft')).width + 'px';
+                                   		
 	},
 	
 	onImageEditorScroll: function() {

javascript/ImageEditor/Effects.js

@@ -27,7 +27,7 @@ var Effects = {
 	},
 	
 	setListeners: function() {
-		Event.observe('rotateButton','click',this.rotate);
+		Event.observe('RotateButton','click',this.rotate);
 	},
 	
 	disableRotate: function() {

javascript/ImageEditor/Image.js

@@ -14,11 +14,11 @@ var ImageToResize = {
 		
 	reportSize: function(width,height) {
 		if(width != null && height != null) {
-			$('imageWidth').innerHTML = width + "px";
+			$('ImageWidth').innerHTML = width + "px";
-            $('imageHeight').innerHTML = height + "px";	
+            $('ImageHeight').innerHTML = height + "px";	
 		} else {
-            $('imageWidth').innerHTML = this.imageToResize.width + "px";
+            $('ImageWidth').innerHTML = this.imageToResize.width + "px";
-            $('imageHeight').innerHTML = this.imageToResize.height + "px";  
+            $('ImageHeight').innerHTML = this.imageToResize.height + "px";  
 		}
 	},
 	
@@ -27,6 +27,10 @@ var ImageToResize = {
 			$('imageContainer').style.backgroundImage = 'url("' + $('image').src + '")';
 			imageBox.hideIndicator();
 			Element.show($('imageContainer'),$('image'));
+            crop.enable();
+            resize.imageContainerResize.enable();
+            effects.enableRotate();
+            imageHistory.enable();
             if(resize.imageContainerResize.originalHeight == 0 && resize.imageContainerResize.originalWidth == 0) {
 				imageHistory.add('initialize',$('image').src);
 				this.resizeOnFirstLoad();
@@ -35,18 +39,14 @@ var ImageToResize = {
 			resize.imageContainerResize.originalWidth = this.imageToResize.width;
 			resize.imageContainerResize.originalHeight = this.imageToResize.height;
 			resize.imageContainerResize.placeClickBox();
-			crop.enable();
-			resize.imageContainerResize.enable();
-			effects.enableRotate();
-			imageHistory.enable();
 			crop.onImageLoadCallback();
 		}
 		this.reportSize();
 	},
 	
 	resizeOnFirstLoad: function() {	
-	   var windowWidth = Element.getDimensions($('mainContainer')).width;
+	   var windowWidth = Element.getDimensions($('Main')).width;
-	   var windowHeight = Element.getDimensions($('mainContainer')).height - 100;
+	   var windowHeight = Element.getDimensions($('Main')).height - 100;
 	   var imageWidth =  Element.getDimensions($('image')).width;
 	   var imageHeight = Element.getDimensions($('image')).height;
 	   if(imageWidth > windowWidth - 40 || imageHeight >  windowHeight - 40) {
@@ -61,6 +61,10 @@ var ImageToResize = {
 	       }
 	       this.reportSize(0,0);
 	       resize.imageContainerResize.setVisible(false);
+	       crop.disable();
+           resize.imageContainerResize.disable();
+           effects.disableRotate();
+           imageHistory.disable();
 	       imageTransformation.resize(imageWidth,imageHeight,ImageToResize.resizeOnFirstLoadCallBack.bind(this),false);
 	   }	
     },

javascript/ImageEditor/ImageBox.js

@@ -15,7 +15,7 @@ var ImageBox = {
 		Element.hide(this.imageContainer);
 		this.indicator = Positioning.addBehaviour($('loadingIndicatorContainer'));
         this.indicatorImage = Positioning.addBehaviour($('loadingIndicator'));
-		Positioning.addBehaviour($('mainContainer'));
+		Positioning.addBehaviour($('Main'));
 	},
 		
 	showIndicator: function(container) {

javascript/ImageEditor/ImageEditor.js

@@ -17,8 +17,9 @@ var ImageEditor = {
 		this.tottalyOriginalImageFile = imageFile;
 		this.onSaveClick = ImageEditor.onSaveClick.bind(this);
 		this.onCloseClick = ImageEditor.onCloseClick.bind(this);
-		Event.observe($('saveButton'),'click',this.onSaveClick);
+		Event.observe($('SaveButton'),'click',this.onSaveClick);
-		Event.observe($('closeButton'),'click',this.onCloseClick);
+		Event.observe($('ExitButton'),'click',this.onCloseClick);
+		Element.hide($('CurrentAction'));
 	}, 
 	onSaveClick: function() {
 		if(this.tottalyOriginalImageFile != $('image').src) {

javascript/ImageEditor/ImageHistory.js

@@ -25,6 +25,7 @@ ImageHistory = {
 		this.disable = ImageHistory.disable.bind(this);
 		this.clear = ImageHistory.clear.bind(this);
 		this.addListeners();
+		statusMessage = new StatusMessage.initialize();	
 	},
 		
 	undo: function() {
@@ -38,7 +39,7 @@ ImageHistory = {
 			this.historyPointer = this.historyPointer - 1;
 			this.image.src = this.history[this.historyPointer].fileUrl;
 		} else {
-			alert("No more undo");
+			statusMessage.statusMessage("No more undo","bad");
 		}
 	},
 	
@@ -50,7 +51,7 @@ ImageHistory = {
 			this.historyPointer = this.historyPointer + 1;
 			this.image.src = this.history[this.historyPointer].fileUrl;
 		} else {
-			alert("No more redo");
+			statusMessage.statusMessage("No more redo","bad");
 		}
 	},
 	
@@ -69,8 +70,8 @@ ImageHistory = {
 	},
 	
 	addListeners: function() {
-		this.undoListener = Event.observe('undoButton','click',this.undo);	
+		this.undoListener = Event.observe('UndoButton','click',this.undo);	
-		this.redoListener = Event.observe('redoButton','click',this.redo);
+		this.redoListener = Event.observe('RedoButton','click',this.redo);
 	},
 	
 	operationMade: function(historyPointer,operation) {
@@ -91,8 +92,8 @@ ImageHistory = {
 	
 	disable: function() {
 		if(this.isEnabled) {
-			Event.stopObserving($('undoButton'),'click', this.undo);			
+			Event.stopObserving($('UndoButton'),'click', this.undo);			
-			Event.stopObserving($('redoButton'),'click', this.redo);
+			Event.stopObserving($('RedoButton'),'click', this.redo);
 			this.isEnabled = false;
 		}
 	},

javascript/ImageEditor/ImageTransformation.js

@@ -30,7 +30,7 @@ var ImageTransformation = {
 		};
 			
 		 if(imageAlreadyChangedSize == false) {
-			 imageBox.showIndicator($('mainContainer'));
+			 imageBox.showIndicator($('Main'));
 	     } else {
 			 imageBox.showIndicator();
 		 }

javascript/ImageEditor/Resize.js

@@ -5,8 +5,8 @@ var Resize = {
 	
 	initialize: function(element) {		
 		this.element = element;
-		this.leftBoxConstraint = 4;
+		this.leftBoxConstraint = 2;
-		this.topBoxConstraint = 4;
+		this.topBoxConstraint = 0;
 		this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
 		options = {
 				resizeStop: Resize.resizeStop.bind(this),

javascript/ImageEditor/Resizeable.js

@@ -228,8 +228,8 @@ Resizeable = {
 	},
 	
 	setListeners: function() {
-		Event.observe('mainContainer','mousemove',this.onResize);
+		Event.observe('Main','mousemove',this.onResize);
-		Event.observe('mainContainer','mouseup',this.resizeStop);
+		Event.observe('Main','mouseup',this.resizeStop);
 	},
 	
 	addListener: function(element) {

javascript/ImageEditor/Utils.js

@@ -83,3 +83,20 @@ Random = {
 		return string;
 	}
 }
+
+StatusMessage = {
+    initialize: function() {
+        this.statusMessage = StatusMessage.statusMessage.bind(this);
+        window.frameElement.statusMessage = statusMessage;
+        var s1 = $('statusMessage');
+        var s2 = window.top.document.getElementById('statusMessage');
+        s1.showMessage = s2.showMessage;
+        s1.clearMessage = s2.clearMessage;
+        s1.fade = s2.fade;
+        s1.afterFade = s2.afterFade;
+    },
+    
+    statusMessage: function(msg, type, clearManually) {
+        window.frameElement.statusMessage(msg, type, clearManually);
+    }
+}

templates/ImageEditor.ss

@@ -7,30 +7,95 @@
         <meta http-equiv="imagetoolbar" content="no">
     </head>
     <body id="body" onload="imageEditor = new ImageEditor.initialize('$fileToEdit');">
-        <div id="mainContainer">
+        <div id="Loading" style="background: #FFF url(cms/images/loading.gif) 50% 50% no-repeat; position: absolute;z-index: 100000;height: 100%;width: 100%;margin: 0;padding: 0;z-index: 100000;position: absolute;">Loading...</div>
-            <div id="menuBarContainer">
+        <div id="Main">
-                <div id="photoInfoContainer" class="floatRight">
+            <script type="text/javascript">
-                    <p>Size</p>
+            </script>
-                    <p class="inline">Width:</p><p id="imageWidth" class="inline">0px</p>                                                           
+            <div id="MenuBar">
-                    <p class="inline">Height:</p><p id="imageHeight" class="inline">0px</p>                     
+                <div id="TopLeft"></div>
+                <div id="TopRight"></div>
+                <div id="Filename">
+                    <p>$fileToEditOnlyName</p>
                 </div>
-                <div id="historyContainer" class="floatRight"> 
+                <div id="Actions">
-                    <p><a id="undoButton" href="#">Undo</a></p>
+                    <a id="SaveButton" href="#">
-                    <p><a id="redoButton" href="#">Redo</a></p>
+                        <div id="SaveIcon">
                         </div>
-                <div id="effectsContainer" class="floatRight">
+                        <p id="SaveText" class="menuText">
-                    <p><a id="rotateButton" href="#">Rotate</a></p>                 
+                            save&nbsp;image
+                        </p>
+                    </a>
+                    <a id="ExitButton" href="#">
+                        <div id="ExitIcon">
                         </div>
-                <div id="cropContainer" class="floatRight"> 
+                        <p id="ExitText" class="menuText">
-                    <p><a id="cropStart" href="#">Crop start</a></p>                    
+                            exit
-                    <p><a id="cropOk" href="#" class="hidden">Ok</a></p>                    
+                        </p>
-                    <p><a id="cropCancel" href="#" class="hidden">Cancel</a></p>                    
+                    </a>
+                    <a id="UndoButton" href="#">
+                        <div id="UndoIcon">
                         </div>
-                <div id="operationContainer" class="floatRight">
+                        <p id="UndoText" class="menuText">
-                    <p><a id="saveButton" href="#">Save</a></p>                 
+                            undo
-                    <p><a id="closeButton" href="#">Cancel</a></p>
+                        </p>
+                    </a>
+                    <a id="RedoButton" href="#">
+                        <div id="RedoIcon">
+                        </div>
+                        <p id="RedoText" class="menuText">
+                            redo
+                        </p>
+                    </a>
+                    <p id="ActionsDescription" class="menuText">
+                        actions
+                    </p>    
+                </div>
+                <div id="Functions">
+                    <a id="RotateButton" href="#">
+                        <div id="RotateIcon">
+                        </div>
+                        <p id="RotateText" class="menuText">
+                            rotate
+                        </p>
+                    </a>
+                    <a id="CropButton" href="#">
+                        <div id="CropIcon"></div>                    
+                        <p id="CropText" class="menuText">
+                            crop
+                        </p>
+                    </a>
+                    <div id="ImageSize">
+                        <p id="ImageWidthLabel" class="menuText">width</p>
+                        <p id="ImageHeightLabel" class="menuText">height</p>
+                        <p id="ImageWidth" class="menuText"></p>
+                        <p id="ImageHeight" class="menuText"></p>
+                    </div>
+                    <p id="FunctionsDescription" class="menuText">
+                        edit&nbsp;functions
+                    </p>    
+                </div>
+                <div id="CurrentAction">
+                    <a id="CancelButton" href="#">
+                        <div id="CancelIcon">
+                        </div>
+                        <p id="CancelText" class="menuText">
+                            cancel
+                        </p>
+                    </a>
+                    <a id="ApplyButton" href="#">
+                        <div id="ApplyIcon">
+                        </div>
+                        <p id="ApplyText" class="menuText">
+                            apply
+                        </p>
+                    </a>
+                    <p id="CurrentActionDescription" class="menuText">
+                        current&nbsp;action
+                    </p>  
                 </div>                
             </div>              
+            <div id="TopRuler"></div>
+            <div id="LeftRuler"></div>
             <div id="imageEditorContainer">             
                 <div id="imageContainer">
                     <div id="leftGreyBox" class="greyBox"></div>
@@ -51,5 +116,14 @@
         <div id="loadingIndicatorContainer2">
             <img id="loadingIndicator2" alt="" src="cms/images/ImageEditor/indicator.gif">
         </div>
+        <p id="statusMessage" style="visibility:hidden"></p>
+        <script type="text/javascript">
+            if(window.onload) old_onload = window.onload;
+            window.onload = function() {
+                Element.hide($('Loading'));
+                old_onload();
+            };
+        </script>
+        
     </body> 
 </html>