sproutcore 1.4.5-java → 1.5.0-java

data/lib/frameworks/sproutcore/frameworks/foundation/validators/date_time.js

@@ -1,11 +1,11 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-require('validators/validator');
+sc_require('validators/validator');
 
 /**
   This validates a SC.DateTime, used in SC.DateFieldView.

data/lib/frameworks/sproutcore/frameworks/foundation/validators/email.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -23,7 +23,7 @@ SC.Validator.Email = SC.Validator.extend(
   
   validateError: function(form, field) {
     var label = field.get('errorLabel') || 'Field' ;
-    return SC.$error("Invalid.Email(%@)".loc(label), label) ;
+    return SC.$error(SC.String.loc("Invalid.Email(%@)", label), label) ;
   }  
     
 }) ;

data/lib/frameworks/sproutcore/frameworks/foundation/validators/not_empty.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -19,19 +19,15 @@ SC.Validator.NotEmpty = SC.Validator.extend(
 /** @scope SC.Validator.NotEmpty.prototype */ {
   
   validate: function(form, field) {
-    var value = field.get('fieldValue'); 
-    if (SC.none(value))
-      return NO;
-
-    if (! SC.none(value.length))
-      return value.length > 0;
-
+    var value = field.get('fieldValue');
+    if (SC.none(value)) { return NO; }
+    if (! SC.none(value.length)) { return value.length > 0; }
     return YES;
   },
   
   validateError: function(form, field) {
     var label = field.get('errorLabel') || 'Field' ;
-    return SC.$error("Invalid.NotEmpty(%@)".loc(label.capitalize()), field.get('errorLabel'));
+    return SC.$error(SC.String.loc("Invalid.NotEmpty(%@)", SC.String.capitalize(label)), field.get('errorLabel'));
   }
-    
+
 }) ;

data/lib/frameworks/sproutcore/frameworks/foundation/validators/number.js

@@ -1,11 +1,12 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
 sc_require('validators/validator') ;
+sc_require('system/utils/misc');
 
 /**
   Handles parsing and validating of numbers.
@@ -76,7 +77,7 @@ SC.Validator.Number = SC.Validator.extend(
   
   validateError: function(form, field) {
     var label = field.get('errorLabel') || 'Field' ;
-    return SC.$error("Invalid.Number(%@)".loc(label), label) ;
+    return SC.$error(SC.String.loc("Invalid.Number(%@)", label), label) ;
   },
   
   /** 

data/lib/frameworks/sproutcore/frameworks/foundation/validators/password.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -51,7 +51,7 @@ SC.Validator.Password = SC.Validator.extend(
   // update field states
   updateFields: function(form,valid) {
     if (!this.fields || this.fields.length === 0) return true ;
-    var err = "Invalid.Password".loc();
+    var err = SC.String.loc("Invalid.Password");
     var topField = this._field ;
     this.fields.forEach(function(f) {
       var msg = (valid) ? null : ((f == topField) ? err : '') ;

data/lib/frameworks/sproutcore/frameworks/foundation/validators/positive_integer.js

@@ -1,7 +1,7 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
@@ -57,6 +57,7 @@ SC.Validator.PositiveInteger = SC.Validator.extend(
         value = this.get('defaultValue') ;
         break ;
     }
+    if(isNaN(value)) return this.get('defaultValue');
     return value ;
   },
 
@@ -67,7 +68,7 @@ SC.Validator.PositiveInteger = SC.Validator.extend(
   
   validateError: function(form, field) {
     var label = field.get('errorLabel') || 'Field' ;
-    return SC.$error("Invalid.Number(%@)".loc(label), label) ;
+    return SC.$error(SC.String.loc("Invalid.Number(%@)", label), label) ;
   },
   
   /** 

data/lib/frameworks/sproutcore/frameworks/foundation/validators/validator.js

@@ -1,10 +1,12 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
+sc_require('system/string');
+
 SC.VALIDATE_OK = YES;
 SC.VALIDATE_NO_CHANGE = NO;
 
@@ -116,7 +118,7 @@ SC.Validator = SC.Object.extend(
   */
   validateError: function(form, field) { 
     return SC.$error(
-      "Invalid.General(%@)".loc(field.get('fieldValue')),
+      SC.String.loc("Invalid.General(%@)", field.get('fieldValue')),
       field.get('fieldKey')) ; 
   },
 
@@ -279,7 +281,7 @@ SC.Validator.mixin(/** @scope SC.Validator */ {
       }
       
       // convert the validatorKey name into a class.
-      validatorKey = validatorKey.classify() ;
+      validatorKey = SC.String.classify(validatorKey);
       var validatorClass = SC.Validator[validatorKey] ;
       if (SC.none(validatorClass)) {
         throw "validator %@ not found for %@".fmt(validatorKey, field) ;

data/lib/frameworks/sproutcore/frameworks/foundation/views/container.js

@@ -1,12 +1,10 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/view') ;
-
 /** 
   @class
   
@@ -27,13 +25,15 @@ SC.ContainerView = SC.View.extend(
 
   classNames: ['sc-container-view'],
   
+  renderDelegateName: 'containerRenderDelegate',
+  
   /**
-    Optional path name for the content view.  Set this to a property path 
+    Optional path name for the content view.  Set this to a property path
     pointing to the view you want to display.  This will automatically change
-    the content view for you.  If you pass a single property name (e.g.
-    "myView") then the container view will look up the property on its own 
-    page object.  If you pass a full property name 
-    (e.g. "MyApp.anotherPage.anotherView"), then the path will be followed 
+    the content view for you. If you pass a relative property path or a single
+    property name, then the container view will look for it first on its page
+    object then relative to itself. If you pass a full property name
+    (e.g. "MyApp.anotherPage.anotherView"), then the path will be followed
     from the top-level.
     
     @property {String, SC.View}
@@ -63,8 +63,7 @@ SC.ContainerView = SC.View.extend(
     @param {SC.View} newContent the new content view or null.
   */
   replaceContent: function(newContent) {
-    this.removeAllChildren() ;
-    if (newContent) this.appendChild(newContent) ;
+    this.replaceAllChildren(newContent ? [newContent] : []);
   },
 
   /** @private */
@@ -84,7 +83,9 @@ SC.ContainerView = SC.View.extend(
   awake: function() {
     sc_super();
     var nowShowing = this.get('nowShowing') ;
-    if (nowShowing && nowShowing.length>0) this.nowShowingDidChange();
+    if (nowShowing && nowShowing.length>0) {
+      this.nowShowingDidChange();
+    }
   },
   
   /**
@@ -108,19 +109,20 @@ SC.ContainerView = SC.View.extend(
       if (content.indexOf('.') > 0) {
         content = SC.objectForPropertyPath(content);
       } else {
-        content = SC.objectForPropertyPath(content, this.get('page'));
+        var tempContent = this.getPath(content);
+        content = SC.kindOf(tempContent, SC.CoreView) ? tempContent : SC.objectForPropertyPath(content, this.get('page'));
       }
     }
     
     // If it's an uninstantiated view, then attempt to instantiate it.
     // (Uninstantiated views have a create() method; instantiated ones do not.)
     if (SC.typeOf(content) === SC.T_CLASS) {
-      if (content.kindOf(SC.View)) content = content.create();
+      if (content.kindOf(SC.CoreView)) content = content.create();
       else content = null;
     } 
     
     // If content has not been turned into a view by now, it's hopeless.
-    if (content && !(content instanceof SC.View)) content = null;
+    if (content && !(content instanceof SC.CoreView)) content = null;
     
     // Sets the content.
     this.set('contentView', content) ;

data/lib/frameworks/sproutcore/frameworks/foundation/views/field.js

@@ -1,12 +1,10 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/view') ;
-sc_require('mixins/control') ;
 sc_require('mixins/validatable') ;
 
 /** @class
@@ -34,6 +32,14 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   */
   isTextArea: NO,
 
+  /**
+    The WAI-ARIA role for field view. This property's value should not be
+    changed.
+
+    @property {String}
+  */
+  ariaRole: 'textbox',
+
   _field_isMouseDown: NO,
 
   /**
@@ -259,7 +265,7 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   keyDown: function(evt) {
 
     // handle tab key
-    if (evt.which === 9) {
+    if (evt.which === 9 || evt.keyCode===9) {
       var view = evt.shiftKey ? this.get('previousValidKeyView') : this.get('nextValidKeyView');
       if (view) view.becomeFirstResponder();
       else evt.allowDefault();
@@ -279,8 +285,8 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
   
   /** tied to the isEnabled state */
   acceptsFirstResponder: function() {
-    if(!SC.SAFARI_FOCUS_BEHAVIOR) return this.get('isEnabled');
-    else return NO;
+    if (SC.FOCUS_ALL_CONTROLS) { return this.get('isEnabled'); }
+    return NO;
   }.property('isEnabled'),
   
   willBecomeKeyResponderFrom: function(keyView) {
@@ -314,7 +320,18 @@ SC.FieldView = SC.View.extend(SC.Control, SC.Validatable,
     var ret = this.getFieldValue() ;
     if (this.objectForFieldValue) ret = this.objectForFieldValue(ret);
     return ret ;
+  },
+
+  render: function(context, firstTime) {
+    sc_super();
+
+    //addressing accessibility
+    if(firstTime) {
+      context.attr('aria-multiline', this.get('isTextArea'));
+      context.attr('aria-disabled', !this.get('isEnabled'));
+    }
   }
+
   
 });
 

data/lib/frameworks/sproutcore/frameworks/foundation/views/image.js

@@ -1,18 +1,19 @@
 // ==========================================================================
 // Project:   SproutCore - JavaScript Application Framework
 // Copyright: ©2006-2011 Strobe Inc. and contributors.
-//            Portions ©2008-2010 Apple Inc. All rights reserved.
+//            Portions ©2008-2011 Apple Inc. All rights reserved.
+//            Portions ©2010 Strobe Inc.
 // License:   Licensed under MIT license (see license.js)
 // ==========================================================================
 
-sc_require('views/view') ;
-sc_require('mixins/control') ;
-
 SC.IMAGE_STATE_NONE = 'none';
 SC.IMAGE_STATE_LOADING = 'loading';
 SC.IMAGE_STATE_LOADED = 'loaded';
 SC.IMAGE_STATE_FAILED = 'failed';
-SC.IMAGE_STATE_SPRITE = 'sprite';
+
+SC.IMAGE_TYPE_NONE = 'NONE';
+SC.IMAGE_TYPE_URL = 'URL';
+SC.IMAGE_TYPE_CSS_CLASS = 'CSS_CLASS';
 
 /**
   URL to a transparent GIF.  Used for spriting.
@@ -21,153 +22,355 @@ SC.BLANK_IMAGE_DATAURL = "data:image/gif;base64,R0lGODlhAQABAJAAAP///wAAACH5BAUQ
 
 SC.BLANK_IMAGE_URL = SC.browser.msie && SC.browser.msie<8 ? sc_static('blank.gif') : SC.BLANK_IMAGE_DATAURL;
 
+SC.BLANK_IMAGE = new Image();
+SC.BLANK_IMAGE.src = SC.BLANK_IMAGE_URL;
+SC.BLANK_IMAGE.width = SC.BLANK_IMAGE.height = 1;
+
 /**
   @class
 
-  Displays an image in the browser.  
-  
+  Displays an image in the browser.
+
   The ImageView can be used to efficiently display images in the browser.
   It includes a built in support for a number of features that can improve
   your page load time if you use a lot of images including a image loading
-  queue and automatic support for CSS spriting.
+  cache and automatic support for CSS spriting.
 
-  Note that there are actually many controls that will natively include 
+  Note that there are actually many controls that will natively include
   images using an icon property name.
-  
+
   @extends SC.View
   @extends SC.Control
+  @extends SC.InnerFrame
   @since SproutCore 1.0
 */
-SC.ImageView = SC.View.extend(SC.Control, 
+SC.ImageView = SC.View.extend(SC.Control, SC.InnerFrame,
 /** @scope SC.ImageView.prototype */ {
-  
-  /** Image views contain an img tag. */
+
   classNames: 'sc-image-view',
-  tagName: 'img',
-  
+
+  ariaRole: 'img',
+
+  displayProperties: ['frame', 'image', 'innerFrame', 'toolTip', 'imageValue', 'type'],
+
+  renderDelegateName: function() {
+    return (this.get('useCanvas') ? 'canvasImage' : 'image') + "RenderDelegate";
+  }.property('useCanvas').cacheable(),
+
+  tagName: function() {
+    return this.get('useCanvas') ? 'canvas' : 'div';
+  }.property('useCanvas').cacheable(),
+
+
+  // ..........................................................
+  // Properties
+  //
+
+  /**
+    If YES, this image can load in the background.  Otherwise, it is treated
+    as a foreground image.  If the image is not visible on screen, it will
+    always be treated as a background image.
+  */
+  canLoadInBackground: NO,
+
+  /**
+    @property {Image}
+    @default SC.BLANK_IMAGE
+  */
+  image: SC.BLANK_IMAGE,
+
+  /**
+    @property {String}
+    @default null
+  */
+  imageValue: function() {
+    var value = this.get('value');
+    return value && value.isEnumerable ? value.firstObject() : value;
+  }.property('value').cacheable(),
+
+  /**
+    The frame for the inner img element or for the canvas to draw within, altered according to the scale
+    and align properties provided by SC.InnerFrame.
+
+    @property {Object}
+  */
+  innerFrame: function() {
+    var image = this.get('image'),
+        imageWidth = image.width,
+        imageHeight = image.height,
+        frame = this.get('frame');
+
+    if (SC.none(frame)) return {x: 0, y: 0, width: 0, height: 0};  // frame is 'null' until rendered when useStaticLayout === YES
+
+    return this.innerFrameForSize(imageWidth, imageHeight, frame.width, frame.height);
+  }.property('align', 'image', 'scale', 'frame').cacheable(),
+
+  /**
+    If YES, any specified toolTip will be localized before display.
+
+    @property {Boolean}
+    @default YES
+  */
+  localize: YES,
+
   /**
     Current load status of the image.
-    
+
     This status changes as an image is loaded from the server.  If spriting
     is used, this will always be loaded.  Must be one of the following
-    constants: SC.IMAGE_STATE_NONE, SC.IMAGE_STATE_LOADING, 
-    SC.IMAGE_STATE_LOADED, SC.IMAGE_STATE_FAILED, SC.IMAGE_STATE_SPRITE
-    
+    constants: SC.IMAGE_STATE_NONE, SC.IMAGE_STATE_LOADING,
+    SC.IMAGE_STATE_LOADED, SC.IMAGE_STATE_FAILED
+
     @property {String}
   */
   status: SC.IMAGE_STATE_NONE,
-  
+
+  /**
+    Will be one of the following constants: SC.IMAGE_TYPE_URL or
+    SC.IMAGE_TYPE_CSS_CLASS
+
+    @property {String}
+    @observes imageValue
+  */
+  type: function() {
+    var imageValue = this.get('imageValue');
+    if (SC.ImageView.valueIsUrl(imageValue)) return SC.IMAGE_TYPE_URL;
+    else if (!SC.none(imageValue)) return SC.IMAGE_TYPE_CSS_CLASS;
+    return SC.IMAGE_TYPE_NONE;
+  }.property('imageValue').cacheable(),
+
+  /**
+    The canvas element is more performant than the img element, since we can
+    update the canvas image without causing browser reflow.  As an additional
+    benefit, canvas images are less easily copied, which is generally in line
+    with acting as an 'application'.
+
+    @property {Boolean}
+    @default YES if supported
+    @since SproutCore 1.5
+  */
+  useCanvas: function() {
+    return SC.platform.supportsCanvas && !this.get('useStaticLayout') && this.get('type') !== SC.IMAGE_TYPE_CSS_CLASS;
+  }.property('useStaticLayout', 'type').cacheable(),
+
+  /**
+    If YES, image view will use the SC.imageQueue to control loading.  This
+    setting is generally preferred.
+
+    @property {Boolean}
+    @default YES
+  */
+  useImageQueue: YES,
+
   /**
     A url or CSS class name.
-    
+
     This is the image you want the view to display.  It should be either a
-    url or css class name.  You can also set the content and 
-    contentValueKey properties to have this value extracted 
+    url or css class name.  You can also set the content and
+    contentValueKey properties to have this value extracted
     automatically.
-    
+
     If you want to use CSS spriting, set this value to a CSS class name.  If
     you need to use multiple class names to set your icon, separate them by
     spaces.
-    
+
     Note that if you provide a URL, it must contain at least one '/' as this
     is how we autodetect URLs.
-    
+
     @property {String}
   */
   value: null,
 
   /**
-    If YES, image view will use the imageCache to control loading.  This 
-    setting is generally preferred.
-    
-    @property {String}
-  */
-  useImageCache: YES,
-  
-  /**
-    If YES, this image can load in the background.  Otherwise, it is treated
-    as a foreground image.  If the image is not visible on screen, it will
-    always be treated as a background image.
-  */
-  canLoadInBackground: NO,
-  
-  /**
-    If YES, any specified toolTip will be localized before display.
+    Recalculate our innerFrame if the outer frame has changed.
+
+    @returns {void}
   */
-  localize: YES,
-  
-  displayProperties: 'status toolTip'.w(),
-  
-  render: function(context, firstTime) {
-    // the image source is the value if the status is LOADED or blank
-    var status = this.get('status'), value = this.get('value') ;
-    
-    if (status === SC.IMAGE_STATE_NONE && value) this._image_valueDidChange() ; // setup initial state
-    
-    // query the status again, as calling this._image_valueDidChange() may
-    // update status to SC.IMAGE_STATE_LOADED or SC.IMAGE_STATE_SPRITE
-    status = this.get('status');
-
-    var src = (status === SC.IMAGE_STATE_LOADED) ? value : SC.BLANK_IMAGE_URL ;
-    if (status === SC.IMAGE_STATE_SPRITE) context.addClass(value) ;
-    context.attr('src', src) ;
-    
-    // If there is a toolTip set, grab it and localize if necessary.
-    var toolTip = this.get('toolTip') ;
-    if (SC.typeOf(toolTip) === SC.T_STRING) {
-      if (this.get('localize')) toolTip = toolTip.loc() ;
-      context.attr('title', toolTip) ;
-      context.attr('alt', toolTip) ;
+  // Note: SC.View's updateLayer() will call viewDidResize() if useStaticLayout is true.  The result of this
+  // is that since our display depends on the frame, when the view or parent view resizes, viewDidResize
+  // notifies that the frame has changed, so we update our view, which calls viewDidResize, which notifies
+  // that the frame has changed, so we update our view, etc. in an infinite loop.
+  viewDidResize: function() {
+    // 'frame' as a property is cached and won't yet be updated, however calling notifyPropertyChange on 'frame'
+    // causes the aforementioned infinite loop.  Instead, measure the frame ourselves and only notify if it has
+    // changed width or height
+    var layer = this.get('layer'),
+        width,
+        height;
+
+    if (layer) {
+      width = layer.offsetWidth;
+      height = layer.offsetHeight;
+
+      if (this._cachedWidth !== width || this._cachedHeight !== height) {
+        this.notifyPropertyChange('frame');
+        this._cachedWidth = width;
+        this._cachedHeight = height;
+      }
     }
   },
-  
-  /** @private - 
+
+  // ..........................................................
+  // Methods
+  //
+
+  init: function() {
+    sc_super();
+
+    this._image_valueDidChange();
+
+    if (this.get('useImageCache') !== undefined) {
+      SC.Logger.warn("%@ has useImageCache set, please set useImageQueue instead".fmt(this));
+      this.set('useImageQueue', this.get('useImageCache'));
+    }
+  },
+
+
+  // ..........................................................
+  // Rendering
+  //
+
+  /**
+    When the layer changes, we need to tell the view to render its stuff
+    as the canvas won't work without this
+
+    @observes layer
+  */
+  layerDidChange: function() {
+    if (this.get('useCanvas')) this.set('layerNeedsUpdate', YES);
+  }.observes('layer'),
+
+
+  // ..........................................................
+  // Value handling
+  //
+
+  /** @private
     Whenever the value changes, update the image state and possibly schedule
     an image to load.
   */
   _image_valueDidChange: function() {
-    var value = this.get('value'), isUrl;
-    if(value && value.isEnumerable) value = value.firstObject();
-    
-    isUrl = SC.ImageView.valueIsUrl(value);
-
-    // if the old image is still loading, cancel it
-    // if (this._loadingUrl) SC.imageCache.abortImage(this._loadingUrl);
-    
+    var value = this.get('imageValue'),
+        type = this.get('type');
+
+    // check to see if our value has changed
+    if (value !== this._iv_value) {
+      this._iv_value = value;
+
+      this.set('image', SC.BLANK_IMAGE);
+
+      if (type !== SC.IMAGE_TYPE_CSS_CLASS) {
+        // While the new image is loading use SC.BLANK_IMAGE as a placeholder
+        this.set('status', SC.IMAGE_STATE_LOADING);
+
+        // order: image cache, normal load
+        if (!this._loadImageUsingCache()) {
+          this._loadImage();
+        }
+      }
+    }
+  }.observes('imageValue'),
+
+  /** @private
+    Tries to load the image value using the SC.imageQueue object. If the imageValue is not
+    a URL, it won't attempt to load it using this method.
+
+    @returns YES if loading using SC.imageQueue, NO otherwise
+  */
+  _loadImageUsingCache: function() {
+    var value = this.get('imageValue'),
+        type = this.get('type');
+
     // now update local state as needed....
-    if (isUrl && this.get('useImageCache')) {
+    if (type === SC.IMAGE_TYPE_URL && this.get('useImageQueue')) {
       var isBackground = this.get('isVisibleInWindow') || this.get('canLoadInBackground');
-      
-      this._loadingUrl = value ; // note that we're loading...
-      SC.imageCache.loadImage(value, this, this.imageDidLoad, isBackground);
-      
-      // only mark us as loading if we are still loading...
-      if (this._loadingUrl) this.set('status', SC.IMAGE_STATE_LOADING);
-      
-    // otherwise, just set state immediately
-    } else {
-      this._loadingUrl = null ; // not loading...
-      this.set('status', (isUrl) ? SC.IMAGE_STATE_LOADED : SC.IMAGE_STATE_SPRITE);
-      this.displayDidChange(); // call manually in case status did not change
-      // (e.g value changes from one sprite to another)
+
+      SC.imageQueue.loadImage(value, this, this._loadImageUsingCacheDidComplete, isBackground);
+      return YES;
+    }
+
+    return NO;
+  },
+
+  _loadImageUsingCacheDidComplete: function(url, image) {
+    var value = this.get('imageValue');
+
+    if (value === url) {
+      if (SC.ok(image)) {
+        this.didLoad(image);
+      } else {
+        // if loading it using the cache didn't work, it's useless to try loading the image normally
+        this.didError(image);
+      }
     }
-  }.observes('value'),
-  
-  /** 
-    Called when the imageCache indicates that the image has loaded. 
-    Changing the image state will update the display.
+  },
+
+  /** @private
+    Loads an image using a normal Image object, without using the SC.imageQueue.
+
+    @returns YES if it will load, NO otherwise
   */
-  imageDidLoad: function(url, imageOrError) {
-    if (url === this._loadingUrl) this._loadingUrl = null;
-
-    // do nothing if we get this notification by the value of the image has 
-    // since changed.
-    if (this.get('value') === url) {
-      this.set('status', SC.$ok(imageOrError) ? SC.IMAGE_STATE_LOADED : SC.IMAGE_STATE_FAILED);
-      this.displayDidChange();
+  _loadImage: function() {
+    var value = this.get('imageValue'),
+        type = this.get('type'),
+        that = this,
+        image,
+        jqImage;
+
+    if (type === SC.IMAGE_TYPE_URL) {
+      image = new Image();
+
+      var errorFunc = function() {
+        SC.run(function() {
+          that._loadImageDidComplete(value, SC.$error("SC.Image.FailedError", "Image", -101));
+        });
+      };
+
+      var loadFunc = function() {
+        SC.run(function() {
+          that._loadImageDidComplete(value, image);
+        });
+      };
+
+      // Don't grab the jQuery object repeatedly
+      jqImage = $(image);
+
+      // Using bind here instead of setting onabort/onerror/onload directly
+      // fixes an issue with images having 0 width and height
+      jqImage.bind('error', errorFunc);
+      jqImage.bind('abort', errorFunc);
+      jqImage.bind('load', loadFunc);
+
+      image.src = value;
+      return YES;
     }
+
+    return NO;
+  },
+
+  _loadImageDidComplete: function(url, image) {
+    var value = this.get('imageValue');
+
+    if (value === url) {
+      if (SC.ok(image)) {
+        this.didLoad(image);
+      } else {
+        this.didError(image);
+      }
+    }
+  },
+
+  didLoad: function(image) {
+    this.set('status', SC.IMAGE_STATE_LOADED);
+    if (!image) image = SC.BLANK_IMAGE;
+    this.set('image', image);
+  },
+
+  didError: function(error) {
+    this.set('status', SC.IMAGE_STATE_FAILED);
+    this.set('image', SC.BLANK_IMAGE);
   }
-  
+
 }) ;
 
 /**
@@ -177,4 +380,3 @@ SC.ImageView = SC.View.extend(SC.Control,
 SC.ImageView.valueIsUrl = function(value) {
   return value ? value.indexOf('/') >= 0 : NO ;
 } ;
-