///<reference path="MicrosoftAjax.debug.js" > 
///<reference path="shared.js" > 
///<reference path="control.js" > 


//STEP 3: Modify your DefaultTemplate so it matches 
//STEP 4: Update manifest.xaml ... 
//STEP 5:  Add this JS file as a reference in default.html  (or your entry point) 


SLx.ControlFactory.TextEdit = function () 
{ 
    var template = SLx.Application.Current.get_resources().findName ( SLx.Constants.TextEdit); 
    
    if ( template  != "" ) 
    {     
        var TextEdit= new SLx.TextEdit ( null,  template , SLx.TextEdit.DefaultTemplate );          
        return TextEdit ; 
        
    } 
    Sys.Debug.assert( false , "this should not fail");     
    
  
    return null ; 
} 



SLx.TextEdit = function ( _visualElement , xamlTemplate , templateParts , cssStyle, useBorder, deferVisible, isMultiline )
{   
    this._border = ( useBorder === undefined) ? true : useBorder;
    this._outline = null ; 
    this._cssStyle = cssStyle || "" ; 
    this._multiline = !!isMultiline; 
    this._deferVisible = !!deferVisible ; 
    this._textPlaceHolder = "" ; 
    SLx.TextEdit.initializeBase (this , [ _visualElement , xamlTemplate , templateParts ] );   
}, 

SLx.TextEdit.DefaultTemplate = [ 
{ name: "TextEdit" , ref: "_visualElement", type: "element"  } ,
{ name: "PART_Outline" , ref: "_outline", type: "element"  } 
]; 


SLx.TextEdit.prototype = 
{   
    set_useBorder : function ( value ) 
    {
        this._border = value;  
    },  
    
    get_useBorder : function ( ) 
    { 
        return this._border ; 
    } , 
    
    set_multiline : function ( value ) 
    { 
        this._multiline = value ; 
    }, 
    
    get_multiline : function ( ) 
    { 
        return this._multiline ; 
    }, 
    
    set_cssStyle : function ( value )  
    {  
        if (this._input) 
        {
            for (var attr in styles)
                this._input.style[attr] = styles[attr];
        } 
    } , 
    
    set_parent : function  ( value ) 
    { 
        //base getParent .. 
        SLx.Control.prototype.set_parent ( this, value ); 
        
        if ( this._input ) 
        { 
            document.body.removeChild ( this._input ); 
            this._input = null ; 
        }  
    }, 
    
     
    get_cssStyle : function ( value )  
    { 
        return this._cssStyle ; 
    } , 
    
    arrange : function ( left, top , width , height ) 
    { 
        this._visualElement["Canvas.Left"] = left; 
        this._visualElement["Canvas.Top"] = top; 
        this._visualElement.width = width ; 
        this._visualElement.height = height ; 
        
    
        if (this._outline) 
        {
            this._outline.Width = this._visualElement.Width;
            this._outline.Height = this._visualElement.Height;
        }
        if (!this._input) 
        {
            if (this._multiline)
                this._input = document.createElement("textarea");
            else
                this._input = document.createElement("input");
            this._input.value = this._textPlaceHolder; 
            
            this._input.style.cssText = (this._border ? "border: 1px solid #ddd;" : "") + this.cssStyle;
            this._input.style.position = "absolute";
           if (this._deferVisible)
             this._input.style.display = "none";
            this._input.style.zIndex=15;
            document.body.appendChild(this._input);
        }
    
        
        var browserPos = SLx.VisualTreeHelper.findBrowserPosition ( this._visualElement ) ; 
        
        this._input.style.left = browserPos.left;
        this._input.style.top = browserPos.top;
        this._input.style.width = this._visualElement.Width;
        this._input.style.height = this._visualElement.Height;
    
    }, 
   
    measure: function ( width , height ) 
    {
        this._desiredSize = new SLx.Size ( this._visualElement.width , this._visualElement.height );         
    } , 
    
    set_inputVisible : function  ( value ) 
    { 
         if (this._input)
        this._input.style.display = value ? "" : "none";

    } , 
    
    get_inputVisible : function  ( ) 
    {
        return this._input ? this._input.style.display == "" : false; 
    } , 
    
    get_text : function ( ) 
    { 
       if (this._input)
            return this._input.value;
        else
            return this._textPlaceHolder;
    }, 
    
    set_text : function ( value )
    { 
        if (this._input)
            this._input.value = value ;
        else 
            this._textPlaceHolder = value ; 
    }     
    
   
} 



SLx.TextEdit.registerClass('SLx.TextEdit', SLx.Control );