// ========================================================================== // Project: SproutCore - JavaScript Application Framework // Copyright: ©2006-2009 Sprout Systems, Inc. and contributors. // Portions ©2010-2011 Strobe Inc. All rights reserved. // License: Licensed under MIT license (see license.js) // ==========================================================================

sc_require('render_delegates/render_delegate');

/**

@class
Renders and updates DOM representations of an image.

Parameters
--------------------------
Expects these properties on the data source:

- image: An Image object which has completed loading

If any of these are not present in the data source, the render delegate
will throw an error.

Optional Parameters:
---------------------------
If present, these properties will be used.

- imageValue: A String which represents the src or CSS class of the image
- displayToolTip: A String which is rendered as a toolTip on the element
- type: The type of image being rendered. One of:
            - SC.IMAGE_TYPE_NONE
            - SC.IMAGE_TYPE_URL
            - SC.IMAGE_TYPE_CSS_CLASS
        If not provided, SC.IMAGE_TYPE_URL is the default

*/

SC.BaseTheme.imageRenderDelegate = SC.RenderDelegate.create({

className: 'image',

render: function (dataSource, context) {
  var image = dataSource.get('image'),
    value = dataSource.get('value'),
    type = dataSource.get('type') || SC.IMAGE_TYPE_URL,
    toolTip = dataSource.get('toolTip');

  // Place the img within a div, so that we may scale & offset the img
  context = context.begin('img');
  context.setAttr('src', image.src);

  // Support for CSS sprites (TODO: Remove this)
  if (value && type === SC.IMAGE_TYPE_CSS_CLASS) {
    context.addClass(value);
    dataSource.renderState._last_class = value;
  }

  if (toolTip) {
    context.setAttr('title', toolTip);
    context.setAttr('alt', toolTip);
  }

  // Adjust the layout of the img
  context.addStyle(this.imageStyles(dataSource));

  context = context.end();
},

update: function (dataSource, jquery) {
  var image = dataSource.get('image'),
    lastClass = dataSource.renderState._last_class,
    value = dataSource.get('value'),
    type = dataSource.get('type') || SC.IMAGE_TYPE_URL,
    toolTip = dataSource.get('toolTip');

  jquery = jquery.find('img');

  jquery.attr('src', image.src);

  // Support for CSS sprites (TODO: Remove this)
  if (lastClass) jquery.removeClass(lastClass);
  if (value && type === SC.IMAGE_TYPE_CSS_CLASS) {
    jquery.addClass(value);
    dataSource.renderState._last_class = value;
  }

  if (toolTip) {
    jquery.attr('title', toolTip);
    jquery.attr('alt', toolTip);
  }

  // Adjust the layout of the img
  jquery.css(this.imageStyles(dataSource));
},

imageStyles: function (dataSource) {
  var innerFrame = dataSource.get('innerFrame');
  return {
    'position': 'absolute',
    'left': Math.round(innerFrame.x),
    'top': Math.round(innerFrame.y),
    'width': Math.round(innerFrame.width),
    'height': Math.round(innerFrame.height)
  };
}

});