/* Copyright 2009 Palm, Inc.  All rights reserved. */

WidgetUtility = {};

WidgetUtility.setupHintTextDep = function(element){
    var hintText = element.getAttribute("x-mojo-hintText");
    element.value = hintText;
    element.addClassName("hinted");
    element.observe('focus', function(e){
        if (element.value == hintText) {
            element.value = "";
            element.removeClassName("hinted");
        }
    });
    
    element.observe('blur', function(e){
        if (element.value == "") {
            element.value = hintText;
            element.addClassName("hinted");
        }
    });
}

WidgetUtility.setupHintText = function(element){
  var hintText = element.getAttribute("x-mojo-hintText");
  
  /**********************************
   * Extra methods for the element
   **********************************/
  element.resetHintText = function(){
    element.addClassName('hinted');
    element.value = hintText;
    element.setSelectionRange(0,0);
  };

  // Do not return the hint text as a value.  
  // Hint text should be the same as an empty string
  element.getValue = function(){
    if(element.hasClassName("hinted"))
      return "";
    else
      return element.value;
  }
  
  /**********************************
   * keyup/keydown handlers
   **********************************/
  var _handleKeyDownEvent = function(element){
    if(element.hasClassName('hinted')){
      element.removeClassName('hinted');
      element.value = '';
    }
  }
  var _handleKeyUpEvent = function(element){
    if(element.value == '')
     element.resetHintText();     
  }
  var _handleMouseUpEvent = function(element){
    if(element.hasClassName('hinted'))
      element.setSelectionRange(0,0);
  }
  /**********************************
   * Oobserve the textarea
   **********************************/
  element.observe('focus', function(e){
    if(element.hasClassName("hinted"))
      element.setSelectionRange(0,0);  
  });  
  element.observe('keydown', _handleKeyDownEvent.curry(element));
  element.observe('keyup', _handleKeyUpEvent.curry(element));
  element.observe('mouseup', _handleMouseUpEvent.curry(element));
  
  /**********************************
   * Perform setup on the texarea
   **********************************/
  // If the textarea already has a value, don't insert the hint text
  if (element.value.length == 0) {
    element.value = hintText;
    element.addClassName("hinted");
    element.setSelectionRange(0,0);
  }
  
  return element;
}

WidgetUtility.makeGrowable = function(element){
    //$(element); //Make sure the element is Prototype extended
    var shill = new Element('div');
    shill.className = "TextAreaShill";
    shill.id = element.id + "_shill";
    element.parentNode.appendChild(shill);
    var that = this;
    ['width', 'font-size', 'line-height', 'font'].each(function(style){
        var styleSetter = {}
        styleSetter[style] = element.getStyle(style);
        shill.setStyle(styleSetter);
    });
    
    var calculateTextAreaHeight = function(element, shill){
      shill.update(element.value);
      element.setStyle({
        height: shill.getStyle('height')
      });
    }    
    
    /**********************************
     * Extra methods for the element
     **********************************/
    element.setMaxHeight = function(shill,maxHeight){
      if (maxHeight && maxHeight > 0) {
        shill.setStyle({
          'max-height': maxHeight + "px"
        });    
      }
    }.curry(shill);    
    
    element.resetGrowable = function(shill,maxHeight,calculateHeightFn){
      shill.setStyle({
        'max-height': maxHeight
      });
      calculateHeightFn();
    }.curry(shill,shill.getStyle("max-height"),calculateTextAreaHeight.curry(element, shill));        

    //Maybe this should be on change somehow, though i think change is only triggered
    //with a blur
    element.observe('keydown', calculateTextAreaHeight.curry(element, shill));
    element.initialGrow = calculateTextAreaHeight.curry(element, shill);
}
