// vim: ts=4:sw=4:nu:fdc=4:nospell
/**
  * Form to Accordions Transform Example Application
  *
  * @author  Ing. Jozef Sakalos
  *
  */

// set blank image to local file
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';


Ext.onReady(function() {
	// {{{
	var form2accordion = function(form, configs) {
		configs = 'object' === typeof configs && configs.length ? configs : [];
		var formEl = 'string' === typeof form ? Ext.get(form) : form.el;
		var accs = [];
		var cols = formEl.select('div.x-form-column');
		var i = 0;

		cols.each(function(col) {
			var config = configs[i] || {};
			var accId = col.dom.id || Ext.id();
			Ext.applyIf(config, {
				  id:accId
				, independent:true
				, draggable:false
				, undockable:false
			});
			var acc = new Ext.ux.Accordion(col, config || {});
			var fsets = col.select('fieldset');
			var panelsCfg = config.panelsCfg || [];
			try {delete config.panelsCfg;} catch(e) {};
			var j = 0;
			fsets.each(function(fset) {
				var panelConfig = panelsCfg[j] || {};
				var panelId = fset.dom.id || Ext.id();
				fset.dom.id = '';
				var legend = fset.select('legend').item(0);
				var title = legend.dom.innerHTML;
				legend.remove();
				Ext.applyIf(panelConfig, {
					  title:title
					, id:panelId
					, useShadow:false
					, autoCreate: {tag:'div', children:[{tag:'div', cls:'x-dock-panel-body-content'}]}
				});
				var panel = acc.add(new Ext.ux.InfoPanel(panelConfig));
				var cont = panel.body.select('div.x-dock-panel-body-content').item(0);
				fset.clean();
				var el;
				while(el = fset.down('*')) {
					cont.appendChild(el);
				}
				fset.remove();
				j++;
			})
			col.select('div.x-form-clear').remove();
			accs.push(acc);
			i++;
		});
		return accs;
	};
	// }}}

	var dh = Ext.DomHelper;
	var frm = new Ext.form.Form({
		  url:'form2acc.php'
		, buttonAlign:'center'
	});

	Ext.QuickTips.init();

	// first column
	// {{{
	frm.column({id:'acc1', width:240, labelWidth:75, labelAlign:'right', style:'margin-right:10px'});
	// first fieldset
	frm.fieldset(
		  {id:'panel1', hideLabels:true, legend:'Column 1 Legend 1 to Panel 1 Title'}
		, new Ext.form.Checkbox({
			  id: 'cb1'
			, boxLabel: 'Check to show Panel 2'
		})
		, new Ext.form.Checkbox({
			  id: 'cb2'
			, boxLabel: 'Checkbox 2'
		})
	);
	// second fieldset
	frm.fieldset(
		  {id:'panel2', labelSeparator:'', legend:'Column 1 Legend 2 to Panel 2 Title'}
		, new Ext.form.Checkbox({
			  id: 'cb3'
			, boxLabel: 'Checkbox 3'
		})
		, new Ext.form.Checkbox({
			  id: 'cb4'
			, boxLabel: 'Checkbox 4'
		})
		, new Ext.form.TextField({
			  fieldLabel: 'Describe'
			, labelSeparator: ':'
			, id: 'txt1'
		})
	);
	// ends column
	frm.end();
	// }}}

	// second column
	// {{{
	frm.column({id:'acc2', width:240, labelWidth:75, labelAlign:'right', style:'min-height:24px'});
	// first fieldset
	frm.fieldset(
		  {id:'panel3', hideLabels:true, legend:'Column 2 Legend 1 to Panel 1 Title'}
		, new Ext.form.Checkbox({
			  id: 'cb5'
			, boxLabel: 'Checkbox 5'
		})
		, new Ext.form.Checkbox({
			  id: 'cb6'
			, boxLabel: 'Checkbox 6'
		})
	);
	// second fieldset
	frm.fieldset(
		  {id:'panel4', labelSeparator:'', legend:'Column 2 Legend 2 to Panel 2 Title'}
		, new Ext.form.Checkbox({
			  id: 'cb7'
			, boxLabel: 'Checkbox 7'
		})
		, new Ext.form.Checkbox({
			  id: 'cb8'
			, boxLabel: 'Checkbox 8'
		})
		, new Ext.form.TextField({
			  fieldLabel: 'Describe'
			, labelSeparator: ':'
			, id: 'txt2'
		})
	);
	// ends column
	frm.end();
	// }}}


	frm.addButton('Save', function() {
		frm.el.dom.submit();
	});
	frm.addButton('Reset');
	frm.render('med-form-ct');

	var accs;
	var transBtn = new Ext.Button('transform-btn-ct', {
		  text: 'Transform this form to accordions'
		, handler: function() {
			accs = form2accordion(frm, [{
					panelsCfg: [{
						  icon: '../img/silk/icons/lightbulb.png'
						, collapsed: false
					},{
						  icon: '../img/silk/icons/lightbulb_off.png'
					}]
				},{
					  independent: true
					, undockable: false
					, draggable: false
					, panelsCfg: [{
						  icon: '../img/silk/icons/add.png'
						, collapsed: false
					},{
						  icon: '../img/silk/icons/delete.png'
					}]
				}
			]);
			transBtn.destroy();
			installShowHide();
		}
	});

	// form from Ext Examples
	// {{{
	    /*
     * ================  Form 4  =======================
     */
    var form = new Ext.form.Form({
        labelAlign: 'right',
        labelWidth: 75,
		url:'form2acc.php'
    });

    form.column({width:342, labelWidth:75}); // open column, without auto close
    form.fieldset(
        {legend:'Contact Information'},
        new Ext.form.TextField({
            fieldLabel: 'Full Name',
            name: 'fullName',
            allowBlank:false,
            value: 'Jack Slocum'
        }),

        new Ext.form.TextField({
            fieldLabel: 'Job Title',
            name: 'title',
            value: 'Jr. Developer'
        }),

        new Ext.form.TextField({
            fieldLabel: 'Company',
            name: 'company',
            value: 'Ext JS'
        }),

        new Ext.form.TextArea({
            fieldLabel: 'Address',
            name: 'address',
            grow: true,
            preventScrollbars:true,
            value: '4 Redbulls Drive'
        })
    );
    form.fieldset(
        {legend:'Phone Numbers'},
        new Ext.form.TextField({
            fieldLabel: 'Home',
            name: 'home',
            value: '(888) 555-1212'
        }),

        new Ext.form.TextField({
            fieldLabel: 'Business',
            name: 'business'
        }),

        new Ext.form.TextField({
            fieldLabel: 'Mobile',
            name: 'mobile'
        }),

        new Ext.form.TextField({
            fieldLabel: 'Fax',
            name: 'fax'
        })
    );
    form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack

    
    form.column(
        {width:202, style:'margin-left:10px', clear:true}
    );

    form.fieldset(
        {id:'photo', legend:'Photo'}
    );
    form.end();

    form.fieldset(
        {legend:'Options', hideLabels:true},
        new Ext.form.Checkbox({
            boxLabel:'Ext 1.0 User',
            name:'extuser',
            width:'auto'
        }),
        new Ext.form.Checkbox({
            boxLabel:'Ext Commercial User',
            name:'extcomm',
            width:'auto'
        }),
        new Ext.form.Checkbox({
            boxLabel:'Ext Premium Member',
            name:'extprem',
            width:'auto'
        }),
        new Ext.form.Checkbox({
            boxLabel:'Ext Team Member',
            name:'extteam',
            checked:true,
            width:'auto'
        })
    );

    form.end(); // close the column

    
    form.applyIfToFields({
        width:230
    });

	form.addButton('Save', function() {
		form.el.dom.submit();
	});
    form.addButton('Cancel');

    form.render('form-ct4');

    // The form elements are standard HTML elements. By assigning an id (as we did above)
    // we can manipulate them like any other element
    var photo = Ext.get('photo');
    var c = photo.createChild({
        tag:'center', 
        cn: {
            tag:'img',
            src: 'http://extjs.com/forum/image.php?u=2&dateline=1175747336',
            style:'margin-bottom:5px;'
        }
    });
    new Ext.Button(c, {
        text: 'Change Photo'
    });
// }}}

	var accs2;
	var transBtn2 = new Ext.Button('transform2-btn-ct', {
		  text: 'Transform this form to accordions'
		, handler: function() {
			accs = form2accordion(form, [{
					  independent: true
					, undockable: false
					, draggable: false
					, panelsCfg: [{
						collapsed:false
					},{
						collapsed:true
					}]
				},{
					  independent: true
					, undockable: false
					, draggable: false
					, panelsCfg: [{
						collapsed:false
					},{
						collapsed:true
					}]
				}
			]);
			transBtn2.destroy();
		}
	});

	// Show/Hide handling function
	var installShowHide = function() {
		var cb1 = frm.findField('cb1');
		var panel2 = Ext.ux.AccordionManager.getPanel('panel2');
		cb1.on({
			check:{fn:function(checkbox, checked) {
				if(checked) {
					panel2.show();
					panel2.expand();
				}
				else {
					panel2.collapse();
					panel2.hide();
				}
			}}
		});
		cb1.fireEvent('check', cb1, cb1.getValue());
	};
});

// end of file