var cmbPosition = new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'Position'
    ,tooltipText : 'the label position (top, left, right, bottom)'
        ,valueField: 'id'
            ,store: new Ext.data.SimpleStore({
                fields: ['id', 'value']
                         ,data : [
                                  ['top', 'Top']
                                   ,['left', 'Left']
                                     ,['bottom', 'Bottom']
                                       ,['right', 'Right']
                                         ]
            })
,mode: 'local'
    ,fieldLabel: 'Position'
        ,editable : false
        ,value: 'left'
            ,listeners: {
    beforequery : function(query){query.forceAll = true;}
}
});
var cmbAnimation = new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'Animation'
    ,tooltipText : 'The type of animation (slidein, fadein)'
    ,valueField: 'id'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     ['slidein', 'Slide']
                     ,['fadein', 'Fade']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'Animation'
    ,editable : false
    ,value: 'slidein'
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

var cmbAnimationAnchor = new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'Animation Anchor'
    ,tooltipText : 'Any valid Ext.Fx anchor'    
    ,valueField: 'id'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     ['tl', 'top left corner']
                     ,['t', 'center of the top edge']
                     ,['tr', 'top right corner']
                     ,['l', 'center of the left edge']
                     ,['r', 'center of the right edge']
                     ,['bl', 'bottom left corner']
                     ,['b', 'center of the bottom edge']
                     ,['br', 'bottom right corner']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'Anchor'
    ,editable : false
    ,value: 'l'
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

var cmbAnimateOnStart= new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'Animate On Start'
    ,tooltipText : 'Will the label start animated ?<br> hideLabel must be false'
    ,valueField: 'id'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     [true, 'Yes']
                     ,[false, 'No']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'Animate on start'
    ,editable : false
    ,value: true
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

var cmbAnimateOnOver= new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'Animate on Mouse Over'
    ,tooltipText : 'Animate the label on mouse over / out'
    ,valueField: 'id'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     [true, 'Yes']
                     ,[false, 'No']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'Animate on Mouse Over'
    ,editable : false
    ,value: true
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

var cmbHideLabel= new Ext.form.ComboBox({
    displayField: 'value'
    ,tooltipTitle: 'label starts hidden'
    ,tooltipText : 'The label starts hidden (invisible), you shuld set animateOnOver = true'
    ,valueField: 'id'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     [true, 'Yes']
                     ,[false, 'No']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'label starts hidden'
    ,editable : false
    ,value: false
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

var txtText = new Ext.form.TextArea({
    fieldLabel: 'Text'
    ,tooltipTitle: 'label text'
    ,tooltipText : 'Use valid HTML markup'
    ,value: '<h1>The frog</h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada. Donec placerat'
    ,width: 200
    ,height: 100
});

var txtHideTimeout = new Ext.form.TextField({
    fieldLabel: 'Hide label after (ms)'
    ,tooltipTitle: 'Hide label after x mili seconds'
    ,tooltipText : 'The label will be hidden after the specified mili seconds, use 0 to disable'
    ,value: '0'
});
var txtAnimOptions = new Ext.form.TextArea({
    fieldLabel: 'Animation Options'
    ,tooltipTitle: 'Animation Options'
    ,tooltipText : 'Any valid Ext.fx options for the specified animation type'
    ,value: '{\n//any valid Ext.fx option \n}'
    ,width: 200
    ,height: 100
});

var cmbBaseClass= new Ext.form.ComboBox({
    displayField: 'value'
    ,valueField: 'id'
    ,tooltipTitle: 'Base Class'
    ,tooltipText : 'The Css class to apply to this objet'
    ,store: new Ext.data.SimpleStore({
        fields: ['id', 'value']
        ,data : [
                     ['', 'default']
                     ,['green', 'Green']
               ]
    })
    ,mode: 'local'
    ,fieldLabel: 'Style'
    ,editable : false
    ,value: ''
    ,listeners: {
        beforequery : function(query){query.forceAll = true;}
     }
});

Ext.onReady(function(){
    var frm = new Ext.form.FormPanel({
        monitorResize :true,
        border :false,
        autoScroll: true,
        applyTo: 'settings',
        items : [
                     cmbPosition
                     ,cmbAnimation
                     ,cmbAnimationAnchor
                     ,txtAnimOptions
                     ,cmbAnimateOnStart
                     ,cmbAnimateOnOver
                     ,cmbHideLabel
                     ,txtHideTimeout
                     ,txtText
                     ,cmbBaseClass
                ]
        ,buttons:[new Ext.Button({
                    text :'Apply',
                    listeners : {
                        click : function() {
                            l.reset(il);
                            cfg={
                                    position: cmbPosition.getValue()
                                    ,animation: cmbAnimation.getValue()
                                    ,animateOnStart: cmbAnimateOnStart.getValue()
                                    ,animateOnOver: cmbAnimateOnOver.getValue()
                                    ,animationAnchor: cmbAnimationAnchor.getValue()
                                    ,animationOptions : txtAnimOptions.getValue()
                                    ,hideTimeout : txtHideTimeout.getValue()
                                    ,hideLabel: cmbHideLabel.getValue()
                                    ,width : null
                                    ,height : null
                                    ,text: txtText.getValue()
                                    ,baseClass: cmbBaseClass.getValue()
                                }
                            
                            il = l.applyTo('il', cfg);
                        }
                      }
                  })
        
        ,new Ext.Button({
            text :'See Js Code',
            listeners : {
                click : function() {
txtCode.setRawValue('\
var cfg={\
\n    position: \''+cmbPosition.getValue()+'\'\
\n    ,animation: \''+cmbAnimation.getValue()+'\'\
\n    ,animateOnStart: '+cmbAnimateOnStart.getValue()+'\
\n    ,animateOnOver: '+cmbAnimateOnOver.getValue()+'\
\n    ,animationAnchor: \''+cmbAnimationAnchor.getValue()+'\'\
\n    ,animationOptions :'+ txtAnimOptions.getValue() +'\
\n    ,hideTimeout :'+  txtHideTimeout.getValue()+'\
\n    ,hideLabel: '+cmbHideLabel.getValue()+'\
\n    \/\/ use width or height if having problens with  \
\n    \/\/ automatic width or height detection \
\n    ,width : null \
\n    ,height : null \
\n    ,text: \''+txtText.getValue()+'\'\
\n    ,baseClass: \''+cmbBaseClass.getValue()+'\'\
\n}\
\n    \
\n   var l = new Ext.fc.labeler();\
\n   var obj = l.applyTo("html Element Id", cfg);\
\
');
                }
              }
          })
        
        ,new Ext.Button({
            text :'See HTML Markup code',
            listeners : {
                click : function() {
                    
                cfg = 'position: '+cmbPosition.getValue()+ ';'
                cfg += 'animation: '+cmbAnimation.getValue()+ ';'
                cfg += 'animationAnchor: '+cmbAnimationAnchor.getValue()+ ';'
                cfg += 'animateOnStart: '+ cmbAnimateOnStart.getValue()+ ';'
                cfg += 'animateOnOver: '+ cmbAnimateOnOver.getValue()+ ';'
                cfg += 'hideTimeout: '+ txtHideTimeout.getValue()+ ';'
                cfg += 'hideLabel: '+ cmbHideLabel.getValue()+ ';'
                if ( cmbAnimationAnchor.getValue() != '') {
                    cfg += 'baseClass: ' +  cmbAnimationAnchor.getValue() + ';'
                }
                cfg += 'animationOptions:' +  txtAnimOptions.getValue();
                    
            
                   txtCode.setRawValue('\
\n<img src="frog.jpg" rel="il; '+ cfg +' " title="'+ txtText.getValue()+'">\
\n \
 \n<script type="text/javascript">\
\n      l = new Ext.fc.labeler();\
\n      l.init();\
\n  </script>\
                   ');
                }
              }
          })
                ]
    });
    
    
    
    var txtCode = new Ext.form.TextArea({
        fieldLabel: ''
        ,value: ''
        ,width: 300
        ,height: 300
    });
    txtCode.render('code');
})