diff --git a/javascript/ImageEditor/Crop.js b/javascript/ImageEditor/Crop.js
new file mode 100644
index 000000000..9afa07d79
--- /dev/null
+++ b/javascript/ImageEditor/Crop.js
@@ -0,0 +1,143 @@
+/**
+ * @author Mateusz
+ */
+var Crop = {
+	
+	initialize: function() {
+		this.cropBox = $('cropBox');
+		new Positioning.addBehaviour(this.cropBox);
+		this.imageContainer = $('imageContainer');
+		this.leftGreyBox = $('leftGreyBox');
+		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);
+		this.onCropStop = Crop.onCropStop.bind(this);
+		this.onCropStart = Crop.onCropStart.bind(this);
+		this.onCropOk = Crop.onCropOk.bind(this);
+		this.onCropCancel = Crop.onCropCancel.bind(this);
+		this.doCrop = Crop.doCrop.bind(this);
+		this.setVisible = Crop.setVisible.bind(this);
+		Event.observe('image','load',this.centerCropBox);
+		this.resizeCropBox = new Resizeable.initialize(this.cropBox,options);
+		Event.observe(this.cropBox,'dblclick',this.onCropStop);
+		this.setListeners();
+		this.setVisible(false);
+	},
+	
+	resizeStop: function(event) {
+		EventStack.clearStack();
+		this.resizeCropBox.originalHeight = this.cropBox.getHeight();
+		this.resizeCropBox.originalWidth = this.cropBox.getWidth();
+	},
+	
+	onDrag: function() {
+		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();
+	},
+	
+	centerCropBox: function() {
+		this.cropBox.style.width = this.cropBox.getParentWidth()/2 + 'px';
+		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.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() {
+		this.leftGreyBox.style.width = this.cropBox.getLeft() + "px";		
+		this.leftGreyBox.style.height = "100%";
+		this.rightGreyBox.style.width = this.cropBox.getParentWidth() - this.cropBox.getLeft() - this.cropBox.getWidth() + "px";
+		this.rightGreyBox.style.height = "100%";
+		this.rightGreyBox.style.left = this.cropBox.getLeft()  + this.cropBox.getWidth()  + "px";
+		this.upperGreyBox.style.width = this.cropBox.getWidth() + '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) {
+		x = Event.pointerX(event);
+		this.placeGreyBox();
+	},
+	getMousePos: function(event) {
+		x = Event.pointerX(event);
+		y = Event.pointerY(event);
+		if(x <= this.leftBoxConstraint) x = this.leftBoxConstraint;
+		if(y <= this.topBoxConstraint) y = this.topBoxConstraint;
+		if(x >= this.rightBoxConstraint) x = this.rightBoxConstraint;
+		if(y >= this.bottomBoxConstraint) y = this.bottomBoxConstraint;
+		return {x: x,y: y};		
+	},
+	
+	onCropStop: function(event) {
+		this.doCrop();
+	},
+	
+	doCrop: function() {
+		newWidth = this.cropBox.getWidth() 
+		newHeight = this.cropBox.getHeight() ;
+		startTop = this.cropBox.getTop() ;
+		startLeft = this.cropBox.getLeft() ;
+		if(newWidth > 30 && newHeight > 30) {
+			imageTransformation.crop(startTop,startLeft,newWidth,newHeight);
+			imageHistory.enable();
+		} else {
+			alert('Crop area too small');
+		}
+	},
+	
+	setListeners: function() {
+		Event.observe('cropStart','click',this.onCropStart);
+		Event.observe('cropOk','click',this.onCropOk);
+		Event.observe('cropCancel','click',this.onCropCancel);		
+	},
+	
+	onCropStart: function()	 {
+		this.setVisible(true);	
+		Element.show($('cropOk'),$('cropCancel'));
+		imageHistory.disable();
+	},
+	
+	onCropOk: function() {
+		Element.hide($('cropOk'),$('cropCancel'));
+		this.doCrop();	
+	},
+	
+	onCropCancel: function() {
+		Element.hide($('cropOk'),$('cropCancel'));
+		this.setVisible(false);
+		imageHistory.enable();
+	},
+	
+	setVisible: function(setVisible) {
+		if(setVisible) {
+			Element.show(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox);			
+			this.centerCropBox();
+			this.placeGreyBox();
+		} else {
+			Element.hide(this.cropBox,this.leftGreyBox,this.rightGreyBox,this.upperGreyBox,this.lowerGreyBox,$('cropOk'),$('cropCancel'));							
+		}
+		resize.imageContainerResize.setVisible(!setVisible);
+		this.resizeCropBox.setVisible(setVisible);
+	}
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Effects.js b/javascript/ImageEditor/Effects.js
new file mode 100644
index 000000000..e1b3df40e
--- /dev/null
+++ b/javascript/ImageEditor/Effects.js
@@ -0,0 +1,18 @@
+/**
+ * @author Mateusz
+ */
+var Effects = {
+	initialize: function() {
+		this.setListeners = Effects.setListeners.bind(this);
+		this.rotate = Effects.rotate.bind(this);
+		this.setListeners();	
+	},
+	
+	rotate: function() {
+		imageTransformation.rotate(90);
+	},
+	
+	setListeners: function() {
+		Event.observe('rotateButton','click',this.rotate);
+	}	
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Environment.js b/javascript/ImageEditor/Environment.js
new file mode 100644
index 000000000..8a8b2c0cc
--- /dev/null
+++ b/javascript/ImageEditor/Environment.js
@@ -0,0 +1,9 @@
+/**
+ * @author Mateusz
+ */
+var Environment = {
+	initialize: function (imageFile) {
+		imageBox = new ImageBox.initialize();
+		image = new Image.initialize(imageFile);		
+	},		
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Image.js b/javascript/ImageEditor/Image.js
new file mode 100644
index 000000000..ee2149b9b
--- /dev/null
+++ b/javascript/ImageEditor/Image.js
@@ -0,0 +1,30 @@
+/**
+ * @author Mateusz
+ */
+var Image = {	
+	initialize: function(imageFile) {
+		this.image = $('image');
+		this.image.src = imageFile;
+		this.reportSize = Image.reportSize.bind(this);
+		this.onImageLoad = Image.onImageLoad.bind(this);
+		Event.observe('image','load',this.onImageLoad);
+		imageHistory.add('initialize',this.image.src);
+	},
+	
+	reportSize: function() {
+		$('imageWidth').innerHTML = this.image.width + "px";
+		$('imageHeight').innerHTML = this.image.height + "px";	
+	},
+	
+	onImageLoad: function() {
+		this.reportSize();
+		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;
+
+	},
+};
diff --git a/javascript/ImageEditor/ImageBox.js b/javascript/ImageEditor/ImageBox.js
new file mode 100644
index 000000000..a8a44c8aa
--- /dev/null
+++ b/javascript/ImageEditor/ImageBox.js
@@ -0,0 +1,51 @@
+/**
+ * @author Mateusz
+ */
+var ImageBox = {
+	
+	initialize: function() {
+		this.showIndicator = ImageBox.showIndicator.bind(this);
+		this.hideIndicator = ImageBox.hideIndicator.bind(this);
+		this.reCenterIndicator = ImageBox.reCenterIndicator.bind(this);
+		this.centerIndicator = ImageBox.centerIndicator.bind(this);					
+		this.center = ImageBox.center.bind(this);
+		this.imageContainer = $('imageContainer');
+		Element.hide(this.imageContainer);
+	},
+		
+	showIndicator: function() {
+		this.centerIndicator();
+		indicator.style.display = 'inline';	
+	},
+	
+	hideIndicator: function() {
+		indicator = $('loadingIndicatorContainer');
+		indicator.style.display = 'none';		
+	},	
+	
+	centerIndicator: function() {
+		indicator = $('loadingIndicatorContainer');
+		indicatorImage = $('loadingIndicator');
+		top = this.imageContainer.getTop();
+		left = this.imageContainer.getLeft();
+		width = this.imageContainer.getWidth();
+		height = this.imageContainer.getHeight();
+		indicator.style.left = left + width/2 - indicatorImage.width/2 + "px"; 
+		indicator.style.top = top + height/2 - indicatorImage.height/2 + "px";		
+	},
+	
+	reCenterIndicator: function() {
+		if($('loadingIndicatorContainer').style.display == 'inline') {
+			this.centerIndicator();
+		}		
+	},
+	
+	center: function() {
+		document.title = this.imageContainer.getParentWidth();
+		$('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);
+	}
+	
+	
+};
diff --git a/javascript/ImageEditor/ImageHistory.js b/javascript/ImageEditor/ImageHistory.js
new file mode 100644
index 000000000..0ce045f7e
--- /dev/null
+++ b/javascript/ImageEditor/ImageHistory.js
@@ -0,0 +1,88 @@
+/**
+ * @author Mateusz
+ */
+var ImageHistory = {
+	
+	initialize: function() {
+		this.history = new Array();
+		this.historyPointer = -1;
+		this.modifiedOriginalImage = false;		
+		this.undo = ImageHistory.undo.bind(this);
+		this.redo = ImageHistory.redo.bind(this);
+		this.add = ImageHistory.add.bind(this);
+		this.addLinsteners = ImageHistory.addLinsteners.bind(this);
+		this.addLinsteners();	
+		this.operationMade = ImageHistory.operationMade.bind(this);		
+		this.onFakeImageLoad = ImageHistory.onFakeImageLoad.bind(this);
+		this.enable = ImageHistory.enable.bind(this);
+		this.disable = ImageHistory.disable.bind(this);
+	},
+		
+	undo: function() {
+		if(this.historyPointer >= 1) {
+			image = $('image');
+			fakeImage = $('fakeImg');
+			operation = this.history[this.historyPointer].operation;
+			if(operation == 'rotate' || operation == 'crop') {
+				if(this.operationMade(this.historyPointer-1,'rotate') || this.operationMade(this.historyPointer-1,'crop')) 
+					this.modifiedOriginalImage = true; else this.modifiedOriginalImage = false;
+			}
+			image.src = this.history[this.historyPointer-1].fileUrl;
+			fakeImage.src = this.history[this.historyPointer-1].fileUrl; 
+			Event.observe('fakeImg','load',this.onFakeImageLoad);
+			this.historyPointer--;
+		} else {
+			alert("No more undo");
+		}
+	},
+	
+	redo: function() {
+		if(this.historyPointer < this.history.length-1) {
+			operation = this.history[this.historyPointer+1].operation;
+			if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
+			$('image').src = this.history[this.historyPointer+1].fileUrl;
+			$('fakeImg').src = $('image').src; 
+			Event.observe('fakeImg','load',this.onFakeImageLoad);	
+			this.historyPointer++;
+		} else {
+			alert("No more redo");
+		}
+	},
+	
+	add: function(operation,url) {
+		this.historyPointer++;
+		this.history[this.historyPointer] = {'operation': operation,'fileUrl' : url};
+		if(operation == 'rotate' || operation == 'crop') this.modifiedOriginalImage = true;
+	},
+	
+	addLinsteners: function() {
+		this.undoListener = Event.observe('undoButton','click',this.undo);	
+		this.redoListener = Event.observe('redoButton','click',this.redo);
+	},
+	
+	operationMade: function(historyPointer,operation) {
+		for(i=historyPointer;i>=0;i--) {
+			if(this.history[i].operation == operation) {
+				return true;
+			}
+		}
+		return false;
+	},
+	
+	onFakeImageLoad: function() {
+		$('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();
+	},
+	
+	enable: function() {
+		this.addLinsteners();
+	},
+	
+	disable: function() {
+		Event.stopObserving($('undoButton'),'click', this.undo);			
+		Event.stopObserving($('redoButton'),'click', this.redo);
+	},
+};
\ No newline at end of file
diff --git a/javascript/ImageEditor/ImageTransformation.js b/javascript/ImageEditor/ImageTransformation.js
new file mode 100644
index 000000000..c19e38bbd
--- /dev/null
+++ b/javascript/ImageEditor/ImageTransformation.js
@@ -0,0 +1,67 @@
+/**
+ * @author Mateusz
+ */
+var ImageTransformation = {
+	initialize: function() {
+		this.resize = ImageTransformation.resize.bind(this);
+		this.rotate = ImageTransformation.rotate.bind(this);
+		this.crop = ImageTransformation.crop.bind(this);	
+	},
+		
+	resize: function(width,height) {
+		if(imageHistory.modifiedOriginalImage) {
+			fileToResize = $('image').src;
+		} else {
+			fileToResize = imageEditor.originalImageFile;
+		}	
+		var options = {
+		 	method: 'post',
+			postBody: 'command=resize&file=' + fileToResize + '&newImageWidth=' + width + '&newImageHeight=' + height,
+			onSuccess: function(transport) {
+				imageBox.hideIndicator();
+				response = eval('(' + transport.responseText + ')');
+				$('image').src = response.fileName;
+				imageHistory.add('resize',$('image').src);				
+			}			
+		 };
+		 imageBox.showIndicator();
+		 new Ajax.Request('/ajax.php', options);	
+	},
+	
+	rotate: function(angle) {
+		var options = {
+		 	method: 'post',
+			postBody: 'command=rotate&file=' + $('image').src + '&angle=' + angle ,
+			onSuccess: function(transport) {
+				imageBox.hideIndicator();
+				response = eval('(' + transport.responseText + ')');
+				$('image').src = response.fileName;
+				$('imageContainer').style.width = response.width + 'px';
+				$('imageContainer').style.height = response.height + 'px';
+				imageHistory.add('rotate',$('image').src);	
+				resize.imageContainerResize.placeClickBox();			
+			}			
+		 };
+		 imageBox.showIndicator();
+		 new Ajax.Request('/ajax.php', options);		
+	},
+	
+	crop: function(top,left,width,height) {
+		var options = {
+		 	method: 'post',
+			postBody: 'command=crop&file=' + $('image').src + '&top=' + top + '&left=' + left + '&width=' + width + '&height=' + height,
+			onSuccess: function(transport) {
+				imageBox.hideIndicator();
+				response = eval('(' + transport.responseText + ')');
+				$('image').src = response.fileName;
+				$('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('/ajax.php', options);			
+	}
+}
+	
diff --git a/javascript/ImageEditor/Resize.js b/javascript/ImageEditor/Resize.js
new file mode 100644
index 000000000..baed4ab92
--- /dev/null
+++ b/javascript/ImageEditor/Resize.js
@@ -0,0 +1,60 @@
+/**
+ * @author Mateusz
+ */
+var Resize = {
+	
+	initialize: function(element) {		
+		this.element = element;
+		this.leftBoxConstraint =  20;
+		this.topBoxConstraint =  100;
+		this.getRelativeMousePos = Resize.getRelativeMousePos.bind(this);
+		options = {
+				resizeStop: Resize.resizeStop.bind(this),
+				onDrag: Resize.onDrag.bind(this),
+				onResize: Resize.onResize,
+				getMousePos: Resize.getMousePos.bind(this)
+			};		
+		new Positioning.addBehaviour(this.element);
+		this.imageContainerResize = new Resizeable.initialize(element,options);
+		this.imageContainerResize.setVisible(true);
+	},
+	
+	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()
+	{
+		if(this.element.getTop() < this.topBoxConstraint) this.element.style.top = this.topBoxConstraint + "px";
+		if(this.element.getLeft() < this.leftBoxConstraint) this.element.style.left = this.leftBoxConstraint + "px";
+		if(this.element.getTop() + this.element.getHeight() >= this.element.getParentHeight()) this.element.style.top = this.element.getParentHeight() - this.element.getHeight() - 3 + 'px';
+		if(this.element.getLeft() + this.element.getWidth() > this.element.getParentWidth()) this.element.style.left = this.element.getParentWidth() - this.element.getWidth() - 3 + 'px';
+		imageBox.reCenterIndicator();		
+	},
+	
+ 	onResize: function() {
+	},
+	getMousePos: function(event) {
+		relativeMouseX = this.getRelativeMousePos(event).x;
+		relativeMouseY = this.getRelativeMousePos(event).y;
+		if(relativeMouseX <= this.leftBoxConstraint) x = this.leftBoxConstraint + this.element.getParentLeft(); else x = relativeMouseX + this.element.getParentLeft();
+		if(relativeMouseY <= this.topBoxConstraint) y = this.topBoxConstraint + this.element.getParentTop(); else y = relativeMouseY + this.element.getParentTop();
+		if(relativeMouseX >= this.element.getParentWidth()) {
+			x = this.element.getParentLeft() + this.element.getParentWidth();
+		}
+		if(relativeMouseY >= this.element.getParentHeight()) y = this.element.getParentTop() + this.element.getParentHeight();
+		return {x: x,y: y};				
+	},
+	
+	getRelativeMousePos: function(event) {
+		relativeMouseX = Event.pointerX(event) - this.element.getParentLeft();
+		relativeMouseY = Event.pointerY(event) - this.element.getParentTop();
+		return {x: relativeMouseX,y: relativeMouseY};				
+	}
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Resizeable.js b/javascript/ImageEditor/Resizeable.js
new file mode 100644
index 000000000..b174b83d8
--- /dev/null
+++ b/javascript/ImageEditor/Resizeable.js
@@ -0,0 +1,278 @@
+/**
+ * @author Mateusz
+ */
+Resizeable = {
+	
+	initialize: function(element,options) {		
+		this.resizeStop = options.resizeStop.bind(this);
+		this.onDrag = options.onDrag.bind(this);
+		this.customOnResize = options.onResize.bind(this);
+		this.getMousePos = options.getMousePos.bind(this);
+		this.bindAll = Resizeable.bindAll.bind(this);
+		this.bindAll();
+		this.element = element;
+		this.createClickBoxes();
+		this.setListeners();
+		this.placeClickBoxOnImageLoad();
+		this.originalHeight = 0;
+		this.originalWidth = 0;
+	},
+	
+	resizeStart: function(event) {
+		EventStack.addEvent(event);
+		Event.stop(event);
+	},
+	
+	leftUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = left - relativeMouseX + width;
+		newHeight = top - relativeMouseY + height;
+		if(this.resize(newWidth,newHeight)) { 
+			this.element.style.top = top - (newHeight - height) + "px";
+			this.element.style.left = left - (newWidth - width) + "px";			
+		}		
+	},
+	
+	leftMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = left - relativeMouseX + width;											 
+		if(this.resize(newWidth,-1000)) this.element.style.left = left - (left - relativeMouseX) + "px";	
+	},
+	
+	leftLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = left - relativeMouseX + width;											 
+		newHeight = relativeMouseY - (top + height) + height;
+		if(this.resize(newWidth,newHeight)) this.element.style.left = left - (left - relativeMouseX) + "px";
+	},
+	
+	rightUpperDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = relativeMouseX - left - width + width;
+		newHeight = top - relativeMouseY + height; 
+		if(this.resize(newWidth,newHeight)) this.element.style.top = (top - (newHeight - height) ) + 'px';	
+	},
+	
+	rightMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = relativeMouseX - left; 
+		this.resize(newWidth,-1000);	
+	},
+	
+	rightLowerDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newWidth = relativeMouseX - left;
+		newHeight = relativeMouseY - top;
+		this.resize(newWidth,newHeight);	
+	},
+	
+	upperMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newHeight = top - relativeMouseY + height; 
+		if(this.resize(-1000,newHeight)) {
+			this.element.style.top = (top - (newHeight - height)) + 'px';								
+		}
+	},
+	
+	lowerMiddleDrag: function(event,top,left,height,width,parentTop,parentLeft,relativeMouseX,relativeMouseY) {
+		newHeight = relativeMouseY - (top + height) + height;						
+		this.resize(-1000,newHeight);
+	},
+	
+	onResize: function(event) {		
+		if(EventStack.getLastEvent() != null && this.isVisible) {					
+			lastEventElement = Event.element(EventStack.getLastEvent());
+			var relativeMouseX = this.getMousePos(event).x - this.element.getParentLeft();
+			var relativeMouseY = this.getMousePos(event).y - this.element.getParentTop();
+			if(Element.hasClassName(lastEventElement,'leftUpperClickBox')) {
+				this.leftUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'leftMiddleClickBox')) {
+				this.leftMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'leftLowerClickBox')) {
+				this.leftLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'rightUpperClickBox')) {
+				this.rightUpperDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'rightMiddleClickBox')) {
+				this.rightMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'rightLowerClickBox')) {
+				this.rightLowerDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'upperMiddleClickBox')) {
+				this.upperMiddleDrag(event,this.element.getTop(),this.element.getLeft(),this.element.getHeight(),this.element.getWidth(),this.element.getParentTop(),this.element.getParentLeft(),relativeMouseX,relativeMouseY);						
+			}
+			if(Element.hasClassName(lastEventElement,'lowerMiddleClickBox')) {
+				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();
+			imageBox.reCenterIndicator();			
+			this.customOnResize();
+		}		
+	},
+	
+	resize: function(width,height) {
+		if(width < 30 && height == -1000) {
+			return false;
+		}
+		if(height < 30 && width == -1000) {
+			return false;
+		}
+		if((width < 30 || height < 30) && (width != -1000 && height != -1000)) {
+			return false;
+		}		
+		if(width != -1000)	{ 			
+			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;		
+	},
+	
+	placeClickBoxOnImageLoad: function() {
+		Event.observe('image','load',this.placeClickBox);
+	},
+	
+	placeClickBox: function(event) {
+		if(event != null) {
+			this.originalHeight = Element.getDimensions(this.element).height;
+			this.originalWidth = Element.getDimensions(this.element).width;
+		}
+		width = Element.getDimensions(this.element).width;
+		height = Element.getDimensions(this.element).height;
+		
+		clickBoxHalfWidth =  Math.floor(Element.getDimensions(this.leftUpperClickBox).width/2);
+		
+		leftUpper = new Point.initialize(-clickBoxHalfWidth,-clickBoxHalfWidth);
+		leftMiddle = new Point.initialize(-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
+		leftLower = new Point.initialize(-clickBoxHalfWidth,height-clickBoxHalfWidth);
+		rightUpper = new Point.initialize(width-clickBoxHalfWidth,-clickBoxHalfWidth);
+		rightMiddle = new Point.initialize(width-clickBoxHalfWidth,height/2-clickBoxHalfWidth);
+		rightLower = new Point.initialize(width-clickBoxHalfWidth,height-clickBoxHalfWidth);
+		upperMiddle = new Point.initialize(width/2-clickBoxHalfWidth,-clickBoxHalfWidth);
+		lowerMiddle = new Point.initialize(width/2-clickBoxHalfWidth,height-clickBoxHalfWidth);
+		
+		this.leftUpperClickBox.style.left = leftUpper.x + 'px';
+		this.leftUpperClickBox.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';
+		this.leftLowerClickBox.style.top = leftLower.y + 'px';		
+		
+		this.rightUpperClickBox.style.left = rightUpper.x + 'px';
+		this.rightUpperClickBox.style.top = rightUpper.y + 'px';
+		this.rightMiddleClickBox.style.left = rightMiddle.x + 'px';
+		this.rightMiddleClickBox.style.top = rightMiddle.y + 'px';
+		this.rightLowerClickBox.style.left = rightLower.x + 'px';
+		this.rightLowerClickBox.style.top = rightLower.y + 'px';
+		
+		this.upperMiddleClickBox.style.left = upperMiddle.x + 'px';
+		this.upperMiddleClickBox.style.top = upperMiddle.y + 'px';
+		this.lowerMiddleClickBox.style.left = lowerMiddle.x + 'px';
+		this.lowerMiddleClickBox.style.top = lowerMiddle.y + 'px';				
+	},
+	
+	createClickBoxes: function() {
+		this.leftUpperClickBox = this.createElement('div',Math.random(),["leftUpperClickBox","clickBox"]);
+		this.leftMiddleClickBox = this.createElement('div',Math.random(),["leftMiddleClickBox","clickBox"]);
+		this.leftLowerClickBox = this.createElement('div',Math.random(),["leftLowerClickBox","clickBox"]);
+		this.rightUpperClickBox = this.createElement('div',Math.random(),["rightUpperClickBox","clickBox"]);
+		this.rightMiddleClickBox = this.createElement('div',Math.random(),["rightMiddleClickBox","clickBox"]);
+		this.rightLowerClickBox = this.createElement('div',Math.random(),["rightLowerClickBox","clickBox"]);
+		this.upperMiddleClickBox = this.createElement('div',Math.random(),["upperMiddleClickBox","clickBox"]);
+		this.lowerMiddleClickBox = this.createElement('div',Math.random(),["lowerMiddleClickBox","clickBox"]);		
+	},
+	
+	createElement: function(tag,id,classes) {
+		newElement = document.createElement(tag);
+		newElement.id = id;
+		classes.each(function(item) {
+				Element.addClassName(newElement,item);		
+			}
+		);
+		this.addListener(newElement);
+		this.element.appendChild(newElement);
+		return newElement;		
+	},
+	
+	bindAll: function() {
+		this.setListeners = Resizeable.setListeners.bind(this);
+		this.placeClickBox = Resizeable.placeClickBox.bind(this);
+		this.resizeStart = Resizeable.resizeStart.bind(this);	
+		this.onResize = Resizeable.onResize.bind(this);
+		this.resize = Resizeable.resize.bind(this);
+		this.placeClickBoxOnImageLoad = Resizeable.placeClickBoxOnImageLoad.bind(this);
+		this.createClickBoxes = Resizeable.createClickBoxes.bind(this);
+		this.createElement = Resizeable.createElement.bind(this);
+		this.addListener = Resizeable.addListener.bind(this);
+		this.addDraging = Resizeable.addDraging.bind(this);
+		this.setVisible = Resizeable.setVisible.bind(this);
+		this.removeDraging = Resizeable.removeDraging.bind(this);
+		
+		this.leftUpperDrag = Resizeable.leftUpperDrag.bind(this);
+		this.leftMiddleDrag = Resizeable.leftMiddleDrag.bind(this);
+		this.leftLowerDrag = Resizeable.leftLowerDrag.bind(this);		
+		this.rightUpperDrag = Resizeable.rightUpperDrag.bind(this);
+		this.rightMiddleDrag = Resizeable.rightMiddleDrag.bind(this);
+		this.rightLowerDrag = Resizeable.rightLowerDrag.bind(this);
+		this.upperMiddleDrag = Resizeable.upperMiddleDrag.bind(this);
+		this.lowerMiddleDrag = Resizeable.lowerMiddleDrag.bind(this);		
+	},
+	
+	setListeners: function() {
+		Event.observe('mainContainer','mousemove',this.onResize);
+		Event.observe('mainContainer','mouseup',this.resizeStop);
+	},
+	
+	addListener: function(element) {
+		Event.observe(element,'mousedown',this.resizeStart);		
+		Event.observe(element,'mousemove',this.onResize);		
+		
+	},	
+	
+	addDraging: function() {
+		if(this.draggableImage) this.removeDraging();
+		var options =  {
+			starteffect: function() {},
+			endeffect: function() {},
+			change: this.onDrag,
+		};		
+		this.draggableImage = new Draggable(this.element,options);
+	},
+	
+	removeDraging: function() {
+		if(this.draggableImage) {
+			this.draggableImage.destroy();
+			this.draggableImage = null;
+		}
+	},
+	
+	setVisible: function(setVisible) {
+		this.isVisible = setVisible;
+		if(setVisible) {
+			Element.show(
+				this.leftUpperClickBox,
+				this.leftMiddleClickBox,
+				this.leftLowerClickBox,
+				this.rightUpperClickBox,
+				this.rightMiddleClickBox,
+				this.rightLowerClickBox,
+				this.upperMiddleClickBox,
+				this.lowerMiddleClickBox);
+			this.addDraging();
+			this.placeClickBox();
+		} else {
+			Element.hide(
+				this.leftUpperClickBox,
+				this.leftMiddleClickBox,
+				this.leftLowerClickBox,
+				this.rightUpperClickBox,
+				this.rightMiddleClickBox,
+				this.rightLowerClickBox,
+				this.upperMiddleClickBox,
+				this.lowerMiddleClickBox);					
+			this.removeDraging();
+		}
+	}
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/Utils.js b/javascript/ImageEditor/Utils.js
new file mode 100644
index 000000000..502fd9d76
--- /dev/null
+++ b/javascript/ImageEditor/Utils.js
@@ -0,0 +1,72 @@
+/**
+ * @author Mateusz
+ */
+Point = {
+	initialize: function(x,y) {
+		this.x = x;
+		this.y = y;
+	}
+}
+
+EventStack = {
+	lastEvent: null,
+	getLastEvent: function(){		
+		return EventStack.lastEvent
+	},
+	
+	addEvent: function(event) {
+		EventStack.lastEvent = event;
+	},
+	
+	clearStack: function() {
+		this.lastEvent = null;
+	}
+}
+
+Positioning = {
+	addBehaviour: function(element) {
+		this.element = element;		
+		this.element.getTop = Positioning.getTop.bind(this);
+		this.element.getLeft = Positioning.getLeft.bind(this);
+		this.element.getWidth = Positioning.getWidth.bind(this);
+		this.element.getHeight = Positioning.getHeight.bind(this);
+		this.element.getParentLeft = Positioning.getParentLeft.bind(this);
+		this.element.getParentTop = Positioning.getParentTop.bind(this);
+		this.element.getParentHeight = Positioning.getParentHeight.bind(this);
+		this.element.getParentWidth = Positioning.getParentWidth.bind(this);
+	},
+	
+	getTop: function() {
+		return Position.positionedOffset(this.element)[1];
+	},
+	
+	getLeft: function() {
+		return Position.positionedOffset(this.element)[0];
+	},
+	
+	getWidth: function() {
+		return Element.getDimensions(this.element).width;
+	},
+	
+	getHeight: function() {
+		return Element.getDimensions(this.element).height;
+	}, 
+	
+	getParentLeft: function() {
+		parentLeft = Position.cumulativeOffset(Position.offsetParent(this.element))[0];
+		return parentLeft;
+	},
+	
+	getParentTop: function() {
+		parentTop = Position.cumulativeOffset(Position.offsetParent(this.element))[1];
+		return parentTop;
+	},
+	
+	getParentHeight: function() {
+		return Element.getDimensions(Position.offsetParent(this.element)).height;
+	},
+	
+	getParentWidth: function() {
+		return Element.getDimensions(Position.offsetParent(this.element)).width
+	}
+}
\ No newline at end of file
diff --git a/javascript/ImageEditor/main.js b/javascript/ImageEditor/main.js
new file mode 100644
index 000000000..28d1bda34
--- /dev/null
+++ b/javascript/ImageEditor/main.js
@@ -0,0 +1,19 @@
+/**
+ * @author Mateusz
+ */
+var ImageEditor = {
+	initialize: function(imageFile) {
+		imageHistory = new ImageHistory.initialize();
+		environment = new Environment.initialize(imageFile);		
+		imageTransformation = new ImageTransformation.initialize();
+		resize = new Resize.initialize($('imageContainer'));
+		effects = new Effects.initialize();	
+		crop = new Crop.initialize();
+		this.originalImageFile = imageFile;		
+	}		
+}
+imageEditor = new ImageEditor.initialize('/img/test.jpg');
+
+
+	
+	
\ No newline at end of file