Index: /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageContainer.mxml
===================================================================
--- /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageContainer.mxml	(revision 15)
+++ /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageContainer.mxml	(revision 88)
@@ -23,11 +23,10 @@
 			}
 			
-			private const ZOOM_STEP : Number = 5/6;
-			private const MAX_ZOOM : Number = 2;
-			private const MIN_ZOOM : Number = 0.1;
+			private const MAXIMUM_ZOOM_VALUE : Number = 2;
+			private const MINIMUM_ZOOM_VALUE : Number = 0.1;
 			
 			private function init() : void
 			{
-				//this.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelEventHandler);
+				this.addEventListener(MouseEvent.MOUSE_WHEEL, mouseWheelEventHandler);
 				var hScrollbar : HScrollBar = new HScrollBar();
 				hScrollbar.viewport = this;
@@ -36,5 +35,5 @@
 			}
 			
-			public override function get width() : Number
+			public function get maximumWidth() : Number
 			{
 				var max : Number = 0;
@@ -46,5 +45,5 @@
 			}
 			
-			public override function get height() : Number
+			public function get maximumHeight() : Number
 			{
 				var max : Number = 0;
@@ -79,4 +78,47 @@
 			}
 			
+			private function validatePosition() : void
+			{
+				var matrix : Matrix = this.transform.matrix;
+				if (this.x != 0)
+				{
+					this.x = 0;	
+				}
+				if (this.y != 0)
+				{
+					this.y = 0;	
+				}
+				//if (this.x < -(this.width*matrix.a)+parent.width) this.x = -(this.width*matrix.a)+parent.width;
+				//if (this.y < -(this.height*matrix.d)+parent.height) this.y = -(this.height*matrix.d)+parent.height;
+				//dispatchEvent(new Event(CANVAS_MOVED));
+			}
+			
+			private function mouseWheelEventHandler(event : MouseEvent) : void
+			{
+				zoom(event.delta, event.stageX, event.stageY);
+			}
+			
+			public function zoom(delta : Number, stageX : Number, stageY : Number) : void
+			{
+				var matrix : Matrix = this.transform.matrix;
+				var sign : Number = 1;
+				if (delta > 0) sign = 6/5;
+				if (delta < 0) sign = 5/6;
+				if (matrix.a * sign < MINIMUM_ZOOM_VALUE) return;
+				if (matrix.a * sign > MAXIMUM_ZOOM_VALUE) return;
+				this.applyZoom(sign, stageX, stageY);
+				this.validatePosition();
+			}
+			
+			public function applyZoom(value : Number, pos_x : Number, pos_y : Number) : void
+			{
+				var matrix : Matrix = this.transform.matrix;
+				matrix.translate(-pos_x, -pos_y);
+				matrix.scale(value, value);
+				matrix.translate(pos_x, pos_y);
+				this.transform.matrix = matrix;
+				dispatchEvent(new Event("scaled"));
+			}
+			
 		]]>
 	</fx:Script>
Index: /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageNavigator.mxml
===================================================================
--- /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageNavigator.mxml	(revision 15)
+++ /gssim_ui/branches/vine/gssimstudio/src/web/ui/flex/app/gssim/gssimstudio/editor/gssim/components/MultiImageNavigator.mxml	(revision 88)
@@ -26,4 +26,5 @@
 			{
 				_container = container;
+				_container.addEventListener("scaled", scaleChanged);
 				updateDisplay();
 				addEventListeners();
@@ -76,17 +77,18 @@
 			private function updateContainerPosition() : void
 			{
-				_container.scroll(((visibleRectangleGroup.x) / (this.width - visibleRectangleGroup.width)) * (_container.width - _container.parent.width)
-					,((visibleRectangleGroup.y) / (this.height - visibleRectangleGroup.height)) * (_container.height - _container.parent.height));
+				var matrix : Matrix = _container.transform.matrix;
+				_container.scroll(((visibleRectangleGroup.x) / (this.width - visibleRectangleGroup.width)) * (matrix.a * _container.width - _container.parent.width)
+					,((visibleRectangleGroup.y) / (this.height - visibleRectangleGroup.height)) * (matrix.d * _container.height - _container.parent.height));
 			}
 			
 			private function updateDisplay() : void
 			{
-				var ratio : Number = _container.width / _container.height;
+				var ratio : Number = _container.maximumWidth / _container.maximumHeight;
 				if (ratio < 1)
 					this.width = this.height * ratio;
 				else
 					this.height = this.width / ratio;
-				var xScale : Number = _container.width / this.width;
-				var yScale : Number = _container.height / this.height;
+				var xScale : Number = _container.maximumWidth / this.width;
+				var yScale : Number = _container.maximumHeight / this.height;
 				for each (var img : Image in _container.gallery)
 				{
@@ -99,6 +101,6 @@
 					this.addElement(temp);
 				}
-				rectangle.width = this.width *  _container.parent.width / _container.width;
-				rectangle.height = this.height * _container.parent.height / _container.height;
+				rectangle.width = this.width *  _container.parent.width / _container.maximumWidth;
+				rectangle.height = this.height * _container.parent.height / _container.maximumHeight;
 				this.setElementIndex(visibleRectangleGroup, _container.gallery.length);
 			}
@@ -113,6 +115,21 @@
 			{
 				var tmp : Container = _container.parent as Container;
-				visibleRectangleGroup.x = tmp.horizontalScrollPosition * (this.width - visibleRectangleGroup.width) / (_container.width - _container.parent.width);
-				visibleRectangleGroup.y = tmp.verticalScrollPosition * (this.height - visibleRectangleGroup.height) / (_container.height - _container.parent.height);
+				var matrix : Matrix = _container.transform.matrix;
+				visibleRectangleGroup.x = tmp.horizontalScrollPosition * (this.width - visibleRectangleGroup.width) / (matrix.a * _container.width - _container.parent.width);
+				visibleRectangleGroup.y = tmp.verticalScrollPosition * (this.height - visibleRectangleGroup.height) / (matrix.d * _container.height - _container.parent.height);
+			}
+			
+			/**
+			 * Handle canvas size change
+			 */
+			public function scaleChanged(event : Event) : void
+			{
+				var matrix : Matrix = _container.transform.matrix;
+				var numberOfScreensHorizontal : Number= (_container.width * matrix.a) / _container.parent.width;
+				var numberOfScreensVertical : Number = (_container.height * matrix.d) / _container.parent.height;
+				var currentMaxWidth : Number = _container.width * matrix.a;
+				var currentMaxHeight : Number = _container.height * matrix.d;
+				rectangle.width = this.width/numberOfScreensHorizontal;
+				rectangle.height = this.height/numberOfScreensVertical;
 			}
 			
