/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2007 Visionet GmbH, http://www.visionet.de

   License:
     LGPL: http://www.gnu.org/licenses/lgpl.html
     EPL: http://www.eclipse.org/org/documents/epl-v10.php
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Dietrich Streifert (level420)

************************************************************************ */

/* ************************************************************************

#module(uploadwidget_ui_io)

************************************************************************ */

/**
 * An upload button which allows selection of a file through the browser fileselector.
 *
 */
qx.Class.define("uploadwidget.UploadButton",
{
  extend : qx.ui.form.Button,
  
  /*
  *****************************************************************************
     CONSTRUCTOR
  *****************************************************************************
  */

  construct : function(name, text, icon, iconWidth, iconHeight, flash)
  {
    this.base(arguments, text, icon, iconWidth, iconHeight, flash);
    // This state is needed for proper button CSS themeing
    this.addState( "rwt_PUSH" );
    this.setAppearance( "button" );
    if(name) {
      this.setName(name);
    }

  },
  

  /*
  *****************************************************************************
     PROPERTIES
  *****************************************************************************
  */

  properties :
  {
    /**
     * The name which is assigned to the form
     */
    name :
    {
      check : "String",
      init : "",
      apply : "_applyName"
    },

    /**
     * The value which is assigned to the form
     */
    value :
    {
      check : "String",
      init : "",
      apply : "_applyValue",
      event : "changeValue"
    }
  }, 
  
  /*
  *****************************************************************************
     MEMBERS
  *****************************************************************************
  */

  members :
  {
    /*
    ---------------------------------------------------------------------------
      MODIFIERS
    ---------------------------------------------------------------------------
    */

    /**
     * after the button element is present create the input file tag
     * 
     * @param value {Object} new dom element
     * @param old {Object} old one
     * @type member
     * @return {void}
     */
    _applyElement : function (value, old)
    {
      this.base(arguments, value, old);
      this._createInputFileTag(value);
    },


    /**
     * Modifies the value property of the hidden input type=file element.
     * Only an empty string is accepted for clearing out the value of the
     * selected file.
     * 
     * As a special case for IE the hidden input element is recreated because
     * setting the value is generally not allowed in IE.
     *
     * @type member
     * @param value {var} Current value
     * @param old {var} Previous value
     */
    _applyValue : function(value, old) {
      if(this._valueInputOnChange) {
        delete this._valueInputOnChange;
      }
      else {
        if (!value || value == '') {
          if (qx.core.Variant.isSet("qx.client", "mshtml")) {
            this._createInputFileTag(this.getElement());
          }
          else {
            this._input.value = '';
          }
        }
        else {
          throw new Error("Unable to set value to non null or non empty!");
        }
      }
    },


    /**
     * Modifies the name property of the hidden input type=file element.
     *
     * @type member
     * @param value {var} Current value
     * @param old {var} Previous value
     */
    _applyName : function(value, old) {
      if(this._input) {
        this._input.name = propValue;
      }
    },


    /**
     * Apply the enabled property.
     *
     * @type member
     * @param value {var} Current value
     * @param old {var} Previous value
     */
    _applyEnabled : function(value, old)
    {
      if (this._input) {
        this._input.disabled = value===false;
      }

      return this.base(arguments, value, old);
    },

    /*
    ---------------------------------------------------------------------------
      EVENT-HANDLER
    ---------------------------------------------------------------------------
    */
    
 
    /**
     * Create an input type=file element, and set the onchange event handler which
     * fires if the user selected a file with the fileselector.
     *
     * @type member
     * @param e {Event|null} appear event
     * @return {void}
     */
    _createInputFileTag : function(elem)
    {
      if(this._input)
      {
        this._input.name += "_tmp_";
        if (this._input.parentNode) {
        	this._input.parentNode.removeChild(this._input);
        }
        this._input = null;
      }

      var input  = this._input = document.createElement("input");
      input.type = "file";
      input.name = this.getName();
      input.size = "1"; // make the text area as small as possible
      input.style.position  = "absolute";
      input.style.top		= "-2px"; // make sure to cover the whole area
      input.style.left      = "-100px";
      input.style.height    = "27px";
      input.style.fontSize  = "35px"; // previous value 60 was to small for some systems (depends on used font-family)
      var clipRight = 300 + this.getWidthValue(); //use variable to avoid string concatenation instead of adding
      input.style.clip      = "rect(auto, " + clipRight + "px, auto, 100px)";
      input.style.zIndex    = "100";
      input.style.cursor    = "pointer";
      input.style.filter    = "alpha(opacity=0)";
      input.style.opacity   = "0";
      input.style.MozOutlinestyle   = "none";
      input.style.hidefocus         = "true";
      input.disabled        = this.getEnabled() === false;

      var _this = this;
      input.onchange = function(ev) { return _this._onChange(ev); };

      elem.appendChild(input);
    },


    /**
     * Handle the onchange event of the hidden input type=file element
     *
     * @type member
     * @param e {Event} TODOC
     * @return {void}
     */
    _onChange : function(e) {
      // IE8 returns sth like "C:\fakepath\..." which should not be displayed.
      // Cut off everyhting before the "\", like Firefox does automatically, to have
      // an identical behaviour in all browsers.
      var inputStr = this._input.value;
      if (inputStr) {
        if (inputStr.indexOf("\\") != -1) {
            inputStr = inputStr.substr(inputStr.lastIndexOf("\\") + 1);
        } else if (inputStr.indexOf("/") != -1) {
            inputStr = inputStr.substr(inputStr.lastIndexOf("/") + 1);
        }            
        
        this._valueInputOnChange = true;
	    this.setValue(inputStr);
      }
    }

  },


  /*
  *****************************************************************************
     DESTRUCTOR
  *****************************************************************************
  */

  destruct : function()
  {
    if(this._input) {
      if (this._input.parentNode) {
    	  this._input.parentNode.removeChild(this._input);
      }    	  
      this._input.onchange = null;
      this._input = null;
    } 
  }

});