// ========================================================================== // Project: Greenhouse.PlistItemView // Copyright: ©2010 Mike Ball // ========================================================================== /*globals Greenhouse */ /**

This class is here to receive custom editor events
@extends SC.View

*/ Greenhouse.PlistItemView = SC.View.extend(SC.Control, /** @scope Greenhouse.ListItem.prototype */ {

classNames: ['sc-list-item-view'],

contentValueKey: 'key',

_valueStyle: {position: 'absolute', right: 5, top: '50%', height: 18, marginTop: -9, left: 'auto'},

render: function(context, firstTime){
  var content = this.get('content'),
     key, propertyKey, value, displayValue;

  if(firstTime){
    // handle label -- always invoke
    key = this.get('contentValueKey');
    propertyKey = (key && content) ? (content.get ? content.get(key) : content[key]) : content ;
    value = content.get('value');
    //do the label
    context.begin('label').addStyle({paddingLeft: 5}).text(propertyKey).end();
    if(value !== undefined){
     if(SC.typeOf(value) === SC.T_STRING){
        context.begin('span').addStyle(this._valueStyle).text(value).end();
     }
     else if(SC.typeOf(value) === SC.T_BOOL){
       this.renderCheckbox(context,content.get('value'));
       //context.begin('span').addStyle(this._valueStyle).text("bool").end();
     }
     else if(value.isBinding){
       context.begin('span').addStyle(this._valueStyle).text(value.displayValue()).end();
     }
     else{
       value = value.toString();
       context.begin('span').addStyle(this._valueStyle).text(value).end();

     }
    }
    else{
      console.log(value);
      context.begin('span').addStyle(this._valueStyle).text("unknown").end();
    }

  }
  else{
    if(this._checkboxRenderSource){
      var source = this._checkboxRenderSource;
      this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
    }
  }
},

mouseDown: function(evt){
  if (this._isInsideElementWithClassName('sc-checkbox-view',evt)) {
    this._addCheckboxActiveState() ;
    this._isMouseDownOnCheckbox = YES ;
    this._isMouseInsideCheckbox = YES ;
    return true ;
  }
  return false;
},

mouseUp: function(evt) {
  var ret= false,  content, state, idx, set;

  // if mouse was down in checkbox -- then handle mouse up, otherwise
  // allow parent view to handle event.
  if (this._isMouseDownOnCheckbox) {

    // update only if mouse inside on mouse up...
    if (this._isInsideElementWithClassName('sc-checkbox-view',evt)) {
      content = this.get('content') ;
      if (content && content.view && content.view.get) {
        var value = content.view.get(content.get('key')) ;
        value = (value === SC.MIXED_STATE) ? YES : !value ;
        content.view.set(content.get('key'), value); // update view
        this._checkboxRenderSource.set('isSelected', value);

        this.displayDidChange(); // repaint view...
      }
      ret = true;
    }
    this._removeCheckboxActiveState() ;

  }
  this._isMouseDownOnCheckbox = this._isMouseInsideCheckbox = false;
  return ret;
},
// ..........................................................
// adapted from list item view
//
renderCheckbox: function(context, state) {
  var renderer = this.get('theme').checkboxRenderDelegate;

  // note: checkbox-view is really not the best thing to do here; we should do
  // sc-list-item-checkbox; however, themes expect something different, unfortunately.
  context = context.begin('div')
   .addStyle(this._valueStyle)
   .addClass('sc-checkbox-view')
   .addClass('sc-regular-size')
   .addClass(this.get('theme').classNames)
   .addClass(renderer.get('name'));

  var source = this._checkboxRenderSource;
  if (!source) {
    source = this._checkboxRenderSource =
    SC.Object.create({ renderState: {}, theme: this.get('theme')});
  }

  source
   .set('isSelected', state && (state !== SC.MIXED_STATE))
   .set('isEnabled', this.get('isEnabled'))
   .set('isActive', this._checkboxIsActive)
   .set('title', '');

  renderer.render(source, context);
  context = context.end();

  this._checkboxRenderDelegate = renderer;
},
/**
  Determines if the event occurred inside an element with the specified
  classname or not.
*/
_isInsideElementWithClassName: function(className, evt) {
  var layer = this.get('layer');
  if (!layer) return NO ; // no layer yet -- nothing to do

  var el = SC.$(evt.target) ;
  var ret = NO, classNames ;
  while(!ret && el.length>0 && (el[0] !== layer)) {
    if (el.hasClass(className)) ret = YES ;
    el = el.parent() ;
  }
  el = layer = null; //avoid memory leaks
  return ret ;
},
// ..........................................................
// checkbox helpers...
//
_addCheckboxActiveState: function() {
  if (this.get('isEnabled')) {
    if (this._checkboxRenderDelegate) {
      var source = this._checkboxRenderSource;

      source.set('isActive', YES);

      this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
    } else {
      // for backwards-compatibility.
      this.$('.sc-checkbox-view').addClass('active');
    }
  }
},

_removeCheckboxActiveState: function() {
  if (this._checkboxRenderSource) {
    var source = this._checkboxRenderSource;

    source.set('isActive', NO);

    this._checkboxRenderDelegate.update(source, this.$('.sc-checkbox-view'));
  } else {
    // for backwards-compatibility.
    this.$('.sc-checkbox-view').removeClass('active');
  }
}

});