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

//STEP 1: Replace Scrollbar w/ your controls' name 
//STEP  2: Move Constants.Scrollbar to shared.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.VerticalScrollbar = function ( ) 
{ 
    var template = SLx.Application.Current.get_resources().findName ( SLx.Constants.Scrollbar); 
    if ( template  != "" ) 
    {     
        var Scrollbar= new SLx.Scrollbar ( null,  template , SLx.Scrollbar.DefaultTemplate );          
        return Scrollbar ; 
        
    } 
    Sys.Debug.assert( false , "this should not fail");     
    return null ; 
} 

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

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

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


SLx.Scrollbar = function ( visual , xamlTemplate , templateParts )
{    
    this._upButton = null ; 
    this._downButton = null ; 
    this._slider = null ; 
    this._panel = null ; 
    this._valueChangeListeners = []; 
    
    SLx.Scrollbar.initializeBase (this , [ visual , xamlTemplate , templateParts ] );   
    
    Sys.Debug.assert ( this._upButton != null ) ; 
    Sys.Debug.assert ( this._downButton != null ); 
    Sys.Debug.assert ( this._slider != null ); 
    
    this._upButton.add_Click ( $delegate ( this, this._onUpButtonClick )) ; 
    this._downButton.add_Click ( $delegate ( this, this._onDownButtonClick )) ; 
    this._slider.set_valueChanged ( $delegate ( this, this._onSliderValueChanged )); 
    this._slider.set_valueUpdated ( $delegate ( this, this._onSliderValueChanged )); 
    
    if ( this._panel != null )  
    { 
        var isvertical = this._visualElement.Width < this._visualElement.Height ; 
        if( isvertical ) 
        { 
            this._upButton.setAttachedProperty ( "Dock" , SLx.Dock.Bottom ); 
            this._downButton.setAttachedProperty ( "Dock" , SLx.Dock.Top );          
        } 
        else 
        { 
            this._upButton.setAttachedProperty ( "Dock" , SLx.Dock.Right); 
            this._downButton.setAttachedProperty ( "Dock" , SLx.Dock.Left);                         
        } 
        this._slider.setAttachedProperty ( "Dock" , SLx.Dock.Fill ) ; 
        this._slider.set_sizeToParent(true); 
        
        this._panel.get_children().add ( this._upButton ) ; 
        this._panel.get_children().add ( this._downButton ); 
        this._panel.get_children().add ( this._slider); 
            
    } 
}, 

SLx.Scrollbar.DefaultTemplate = [ 
{ name: "Scrollbar" , ref: "_visualElement", type: "element"  } , 
{ name: "PART_UpButton" , ref: "_upButton", type: "RepeatButton"  } , 
{ name: "PART_DownButton" , ref: "_downButton", type: "RepeatButton"  } , 
{ name: "PART_Slider" , ref: "_slider", type: "Slider"  }   
]; 


SLx.Scrollbar.ResizableTemplate = [ 
{ name: "Scrollbar" , ref: "_visualElement", type: "element"  } , 
{ name: "Scrollbar" , ref: "_panel", type: "BasicDockPanel"  } , 
{ name: "PART_UpButton" , ref: "_upButton", type: "RepeatButton"  } , 
{ name: "PART_DownButton" , ref: "_downButton", type: "RepeatButton"  } , 
{ name: "PART_Slider" , ref: "_slider", type: "Slider"  }   
]; 



SLx.Scrollbar.prototype = 
{   

    set_height: function(value ) { 
       //  this._visualElement.height = height; 
        if ( this._panel != null ) 
            this._panel.set_height ( value ); 
        else 
            this._visualElement.height = value ; 
        this.invalidateLayout(); },
    

    set_width: function(value ) { 
       //  this._visualElement.height = height; 
        if ( this._panel != null ) 
        { 
           this._panel.set_width ( value ); 
        } 
        else 
            this._visualElement.width = value ; 
        this.invalidateLayout(); },


    
    _bindParts : function SLx$Scrollbar$_bindParts ( templateParts ) 
    { 
                    
         for ( var i = 0 ; i < templateParts.length ; i++ ) 
        { 
            var item = templateParts [i];  
            
              var element; 
                if ( this._visualElement != null ) 
                    element = this._visualElement.findName ( item.name ) ; 
                
                if ( element == null )  
                    element = SLx.Application.Current.get_host().content.findName ( item.name ) ;  
                    
            if ( item.type == "element" ) 
            { 
                this[item.ref] = element ;                             
            } 
            else if ( item.type == "BasicDockPanel" ) 
            {                 
                this[item.ref]= new SLx.BasicDockPanel  ( element , false );
            } 
            else if ( item.type == "RepeatButton") 
            { 
                var cp = new SLx.RepeatButton ( element ) ;                 
                this[item.ref] = cp ; 
            } 
            else if ( item.type == "Slider" ) 
            { 
                if ( element == null ) 
                { 
                    var slider = new SLx.ControlFactory.Slider (); 
                    this[item.ref] = slider ; 
                } 
                else 
                { 
                    var cp = new SLx.Slider( element, null ,
                    [ { name: "PART_Slider" , ref: "_visualElement", type: "element"} ,  
                      { name: "PART_Slider_Thumb" , ref: "_thumb", type: "element"} , 
                      { name: "PART_Slider_Track" , ref: "_track", type: "element"} ]  ) ;                 
                    this[item.ref] = cp ;             
                } 
            }             
        }         
        
        //TODO: RemOVE this is DEBUG stuff ) 
        if ( this._isLayoutRegistered ) 
        { 
            Sys.Debug.assert ( false, "what's the scenario? applyTemplate, but has not been implemented"); 
            this.invalidateLayout (); 
        } 
    }, 
    
    measure : function SLx$Scrollbar$measure ( width , height ) 
    { 
        if ( this._panel != null ) 
        { 
             //THIS IS A BIG HACK ....             
             // Scrollbar is mostly logic on top of a panel so any set_size, set_width, etc.  should have been 
             // forwarded to panel ... Since I did NOT do that, here we take the minimum between the 
             // scrollbar size and the panels available size... 
       
             var panelWidth = Math.min ( width, this._visualElement.width ); 
             var panelHeight = Math.min ( height, this._visualElement.height ) 
             this._panel.set_size ( panelWidth , 
                                    panelHeight );  
       
              Sys.Debug.assert ( width >= this._visualElement.width , "if you assert here means hack above is not working.. implement the 'forwarding' of sizing ");                           
              Sys.Debug.assert ( height >= this._visualElement.height , "if you assert here means hack above is not working.. implement the 'forwarding' of sizing "); 
              this._panel.measure ( panelWidth, panelHeight ); 
              this._desiredSize = this._panel.get_desiredSize ();       
        }
        else 
        { 
           Sys.Debug.assert ( false, "we are moving to reizable scrollbar") ; 
           SLx.Scrollbar.callBaseMethod ( this, "measure", [width, height] ); 
        }
        this._isMeasureInvalidated = true;  
    }, 
    
    invalidateLayout : function () 
    { 
        if ( ! this._supressInvalidateLayout ) 
        { 
            this._isMeasureInvalidated = true ; 
            this._isArrangeInvalidated = true ;         
            SLx.Application.Current.get_layoutManager().invalidate ( this );         
            
            if ( this._panel != null ) 
                this._panel.invalidateLayout (); 
                
                
           this._fireInvalidateLayout () ; 
        } 
    },
    
    arrange : function SLx$Scrollbar$arrange ( left, top, width, height ) 
    { 
        if ( this._panel != null ) 
            this._panel.arrange ( left, top, width, height ) ; 
        else 
        { 
            Sys.Debug.assert ( false, "we are moving to reizable scrollbar") ; 
            SLx.Scrollbar.callBaseMethod ( this, "arrange", [left, top, width, height] );
        }
        this._isArrangeInvalidated = true;  
    
    }, 
    
    _onSliderValueChanged : function ( sender, args ) 
    { 
        for ( var i = 0 ; i < this._valueChangeListeners.length ; i++ ) 
        { 
            this._valueChangeListeners[i]( this) ; 
        } 
    }, 
    
    _onUpButtonClick : function ( sender ,args ) 
    { 
        this._slider.set_percent( Math.max ( this._slider.get_percent() + .10 , 0 ) ); 
    },  
    
    _onDownButtonClick : function ( sender ,args ) 
    { 
        this._slider.set_percent ( Math.min ( this._slider.get_percent() - .10 , 1 )); 
    }, 
    
    
    add_valueChanged : function ( callback ) 
    { 
        Array.add ( this._valueChangeListeners, callback ); 
    }, 
    
    remove_valueChanged : function ( callback ) 
    { 
        Array.remove ( this._valueChangeListeners, callback ); 
    }, 
    
    get_percent : function  ( ) 
    { 
        return this._slider.get_percent ( ) ; 
    }, 
    
    set_percent : function ( value ) 
    { 
        this._slider.set_percent ( value ); 
    } 
    ,
    
     toString : function  () 
    { 
        return this._uniqueSystemId.toString ()  + "    " + Object.getTypeName(this) + "    " + this._id ; 
    }
    
}  


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



// TODO : PLEASE MOVE to Shared.JS