From 373474d088ee6f7073e0ad9c13f136124393e747 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=BCrg=20Lehni?= <juerg@scratchdisk.com>
Date: Wed, 21 Nov 2012 10:39:26 -0800
Subject: [PATCH] Implement loading Rasters from external sources and notify
 using a 'load' callback.

---
 examples/Rasters/Raster.html |  8 +++++++-
 src/item/Item.js             |  5 ++++-
 src/item/Raster.js           | 28 ++++++++++++++++++++++++++--
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/examples/Rasters/Raster.html b/examples/Rasters/Raster.html
index 101f3e47..0372fe86 100644
--- a/examples/Rasters/Raster.html
+++ b/examples/Rasters/Raster.html
@@ -7,7 +7,13 @@
 	<script type="text/javascript" src="../../dist/paper.js"></script>
 	<script type="text/paperscript" canvas="canvas">
 		// http://en.wikipedia.org/wiki/Lenna
-		var raster = new Raster('lenna');
+		// Load from Server:
+		var raster = new Raster('http://upload.wikimedia.org/wikipedia/zh/3/34/Lenna.jpg');
+		// Load from DOM image:
+		// var raster = new Raster('lenna');
+		raster.onLoad = function() {
+			console.log('Successfully loaded image!');
+		};
 		var lastScale = 1;
 		var center = view.center;
 		function onFrame(event) {
diff --git a/src/item/Item.js b/src/item/Item.js
index 6ee28d87..05dd46bc 100644
--- a/src/item/Item.js
+++ b/src/item/Item.js
@@ -97,7 +97,10 @@ var Item = this.Item = Base.extend(Callback, /** @lends Item# */{
 						if (!onFrameItems.length)
 							this._project.view.detach('frame', onFrame);
 					}
-				}
+				},
+
+				// Only for external sources, e.g. Raster
+				onLoad: {}
 			});
 	},
 
diff --git a/src/item/Raster.js b/src/item/Raster.js
index e872a606..ef8944a8 100644
--- a/src/item/Raster.js
+++ b/src/item/Raster.js
@@ -42,8 +42,32 @@ var Raster = this.Raster = PlacedItem.extend(/** @lends Raster# */{
 		} else {
 /*#*/ if (options.browser) {
 			// If it's a string, get the element with this id first.
-			if (typeof object === 'string')
-				object = document.getElementById(object);
+			if (typeof object === 'string') {
+				var str = object,
+					that = this;
+				object = document.getElementById(str);
+				if (!object) {
+					// str could be a URL to load the image from?
+					object = new Image();
+					object.src = str;
+				}
+				// Trigger the onLoad event on the image once it's loaded
+				DomEvent.add(object, {
+					load: function() {
+						that.setImage(object);
+						that.fire('load');
+					}
+				});
+				// If the image is already loaded, fire a 'load' event anyway,
+				// so code does not need to make the distinction, and cachig is
+				// transparently handled too.
+				if (object.naturalWidth) {
+					setTimeout(function() {
+						that.fire('load');
+					}, 0);
+				}
+
+			}
 /*#*/ } else if (options.server) {
 			// If we're running on the server and it's a string,
 			// load it from disk: