// ==========================================================================
// Project:   SproutCore - JavaScript Application Framework
// Copyright: ©2006-2011 Strobe Inc. and contributors.
//            Portions ©2008-2011 Apple Inc. All rights reserved.
// License:   Licensed under MIT license (see license.js)
// ==========================================================================
sc_require("theme");
/**
  Renders and updates the HTML representation of a button.
*/
SC.LegacyTheme.buttonRenderDelegate = SC.RenderDelegate.create({
  name: 'button',
  
  /**
    Called when we need to create the HTML that represents the button.

    @param {SC.Object} dataSource the object containing the information on how to render the button
    @param {SC.RenderContext} context the render context instance
  */
  render: function(dataSource, context) {
    this.addSizeClassName(dataSource, context);

    var theme             = dataSource.get('theme'),
        minWidth          = dataSource.get('titleMinWidth'),
        toolTip           = dataSource.get('toolTip'),
        isSelected        = dataSource.get('isSelected'),
        isActive          = dataSource.get('isActive');

    var labelContent;

    context.setClass('icon', !!dataSource.get('icon') || 0);
    context.setClass('def', dataSource.get('isDefault') || 0);
    context.setClass('cancel', dataSource.get('isCancel') || 0);

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

    // addressing accessibility
    context.attr('aria-pressed', isActive);

    // Specify a minimum width for the inner part of the button.
    minWidth = (minWidth ? "style='min-width: " + minWidth + "px'" : '');
    context = context.push("<span class='sc-button-inner' " + minWidth + ">");

    // Create the inner label element that contains the text and, optionally,
    // an icon.
    context = context.begin('label').addClass('sc-button-label');
    
    // NOTE: we don't add the label class names because button styles its own label.
    theme.labelRenderDelegate.render(dataSource, context);
    context = context.end();
    
    context.push("</span>");

    if (dataSource.get('supportFocusRing')) {
      context.push('<div class="focus-ring">',
                    '<div class="focus-left"></div>',
                    '<div class="focus-middle"></div>',
                    '<div class="focus-right"></div></div>');
    }
  },

  /**
    Called when one or more display properties have changed and we need to
    update the HTML representation with the new values.

    @param {SC.Object} dataSource the object containing the information on how to render the button
    @param {SC.RenderContext} jquery the jQuery object representing the HTML representation of the button
  */
  update: function(dataSource, jquery) {
    this.updateSizeClassName(dataSource, jquery);

    var theme         = dataSource.get('theme'),
        isSelected    = dataSource.get('isSelected'),
        isActive      = dataSource.get('isActive');

    if (dataSource.get('isActive')) jquery.addClass('active');
    if (dataSource.get('isDefault')) jquery.addClass('default');
    if (dataSource.get('isCancel')) jquery.addClass('cancel');
    if (dataSource.get('icon')) jquery.addClass('icon');

    // addressing accessibility
    jquery.attr('aria-pressed', isActive);
    theme.labelRenderDelegate.update(dataSource, jquery.find('label'));
  }
  
});