/*
 * Ext JS Library 2.2
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 *
 * http://extjs.com/license
 */

Ext.BLANK_IMAGE_URL = '/ext/resources/images/default/s.gif';
	
var global = {
	width: 200,
	buttonWidth: 120
};


Ext.onReady(function(){
	if ($.browser.msie && $.browser.version < 7 && !(/Trident\/4\.0/.test(navigator.userAgent))) {
		$('.noscript').append('<p><b>The Editor does not support Internet Explorer < 7</b>');
		return;
	}
	
	// save and reload to remove the querystring
	if (querystringConfig) {
		saveState();
		location.href = 'http://' + location.host +'/editor';
	}
	
	if (Ext.state.Manager.get('showsplash', true)) winSplash();
	
	Ext.QuickTips.init();
	//Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
	Ext.form.Field.prototype.msgTarget = 'side';
	
	$('#bodycontent').hide();
	
	var viewport = new Ext.Viewport({
        layout:'border',
		title: 'Highslide Editor',
		items: [{
			region: 'north',
			height: '15',
			html: '<h1 style="float:left">Highslide Editor</h1>'+
				'<a class="floright" href="/">Highslide JS Home</a> '+
				'<a class="floright" href="javascript:;" onclick="winSplash()">Show splash screen</a>',
			border: false,
			id: 'north'
		
		}, new Ext.FormPanel({
			id: 'frm',
			title: 'Options',
	        region: 'west',
	        collapsible: true,
	        margins: '5 0 5 5',
	        width: 450,
	        defaults: {
				border: false
			},
			layout: 'border',
			autoScroll: true,
	        items: [{
	        	//--- Start options toolbar
	        	xtype: 'toolbar',
	        	region: 'north',
	        	id: 'tlbOptions',
	        	items: [/*{
	        		text: 'Undo',
	        		id: 'undo',
	        		iconCls: 'arrow_undo',
	        		disabled: true,
	        		handler: function() {
	        			optionsHistory.go(-1);
	        		}
	        	}, {
	        		text: 'Redo',
	        		id: 'redo',
	        		iconCls: 'arrow_redo',
	        		disabled: true,
	        		handler: function() {
	        			//viewCode('viewCSS', 1);
	        		}
	        	}, */{
	        		text: 'Reset',
	        		id: 'reset',
	        		tooltip: 'Reset all options to default values',
	        		iconCls: 'layout_delete',
	        		//disabled: true,
	        		handler: resetAll
	        	}, {
	        		text: 'Get link',
	        		id: 'getLink',
	        		tooltip: 'Get the link to the current options',
	        		iconCls: 'link',
	        		//disabled: true,
	        		handler: getLink
	        	}/*, {
	        		text: 'View config',
	        		id: 'viewConfig',
	        		tooltip: 'View current config',
	        		//iconCls: 'layout_delete',
	        		//disabled: true,
	        		handler: viewConfig
	        	}*/]
	        	//--- End options toolbar
	        }, {
	        	//--- Start options tab panel
			    //xtype: 'uxtabpanel',
				//tabPosition: 'left',
				//tabWidth: 80,
				xtype: 'tabpanel',
			    region: 'center',
			    width: '100%',
			    id: 'tabPanel',
			    layoutOnTabChange:true,
			    deferredRender: false,
		        activeTab: 0,
		        //plain:true,
		        listeners: {
		        	tabchange: function(tp, tab){
				    	Ext.state.Manager.set(tp.id+'-active', tab.id);
					},
					beforerender: function(tp) {
						tp.activate(Ext.state.Manager.get(tp.id+'-active', 'tab-general'));
					},
					render: function(tp) {
						tp.doLayout(true); // active tab rendered too small initially
					}
		        },
		        defaults: {
		        	collapsible: true,
		        	bodyStyle: 'padding: 5px',
		        	autoScroll: true
		        },
				//labelWidth: 200,
		        items:[{ 	
		        	//--- Start General tab
		        	title: 'General',
		        	id: 'tab-general',
		        	layout: 'form',
		    		defaultType: 'textfield',                        
		    		iconCls: 'folder_wrench',
		        	items: [{
		        		xtype:'uxfieldset',
						id: 'fsLanguage',
						title: 'Language',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
			            items:[{
							columnWidth: 0.69,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								anchor: '-25',
			                    fieldLabel: 'Language',
			                    id: 'lang',
			                    store: langStore,
			                    displayField: 'name',
			                    valueField: 'code',
								hiddenName: 'langValue',
			                    editable: false,
			                    forceSelection: true,
							   	mode: 'local',
							    triggerAction: 'all',
							    value: cfg.lang.value
							}]
						}]
	                }, {
		        		xtype:'uxfieldset',
						id: 'fsPresets',
						title: 'Load example',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
			            items:[{
							columnWidth: 1,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								anchor: '-25',
			                    fieldLabel: 'Example',
			                    id: 'preset',
			                    store: presetStore,
			                    valueField: 'value',
								hiddenName: 'presetValue',
				                displayField: 'name',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.preset.value
							}]
						}]


					}]
					//--- End General tab
				}, {
		        	//--- Start Gallery tab		        
		            title: 'Gallery',
					id: 'tab-gallery',
		            layout: 'form',
		            defaultType: 'textfield',                     
		    		iconCls: 'application_view_tile',
		    		items: [{
						xtype: 'uxfieldset',
						id: 'fsGalleryGeneral',
		    			title: 'General',
		    			height: 'auto',
						layout: 'column',
		    			defaults: {
		    				border: false,
			            	bodyStyle: 'padding: 0'
		    			},
						items: [{
							columnWidth: 0.69,
							layout: 'form', 
							items: [{
								xtype: 'uxcheckbox',
								
								id: 'enableGallery',
								hideLabel: true,
								boxLabel: 'Enable gallery',
								checked: cfg.enableGallery.value,
					    		listeners: {
						    		check: function(obj, checked) {
						    			//update(obj);
						    			Ext.getCmp('fsController').setDisabled(!checked);
						    			Ext.getCmp('fsNumbers').setDisabled(!checked);
						    			Ext.getCmp('fsThumbstrip').setDisabled(!checked);
						    			Ext.getCmp('fsSlideshowBehaviour').setDisabled(!checked);
						    		}
						    	}
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
			    				minWidth: global.buttonWidth,
								text: 'Image manager',
								handler: winImageManager
							}]
						}]
					}, {
		    			xtype: 'uxfieldset',
						id: 'fsController',
						disabled: !cfg.enableGallery.value,
		    			title: 'Controls',
		    			height: 'auto',
						layout: 'column',
						//checkboxName: 'useController',
						//checkboxToggle: true,
		    			defaults: {
		    				border: false,
			            	bodyStyle: 'padding: 0'
		    			},
		    			items: [{
							columnWidth: 0.69,
							layout: 'form',
							items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Preset style',
								id: 'controlsPreset',
								anchor: '-25',
								store: controlsStore,
								valueField: 'value',
								hiddenName: 'controlsPresetValue',
				                displayField: 'name',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.controlsPreset.value,
					    		listeners: {
						    		select: function(obj) {
										var disable = (obj.value == 'none');
						    			//Ext.getCmp('controlsPosition').setDisabled(disable);
									}
						    	}    			
			    			}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Options',
								handler: winSlideshowController
							}]	
		    			}]
		    		}, {
		    			xtype: 'uxfieldset',
		    			title: 'Numbers',
						id: 'fsNumbers',
						disabled: !cfg.enableGallery.value,
		    			height: 'auto',
						layout: 'column',
		    			defaults: {
		    				border: false,
			            	bodyStyle: 'padding: 0'
		    			},
		    			items: [{
							columnWidth: .69,
							layout: 'form',
							items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Position',
								id: 'numberPosition',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value'],
								    data : [
								    	['none'],
								    	['heading'],
								    	['caption']
								    ]
								}),
								displayField: 'value',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.numberPosition.value		    			
			    			}]
						}, {
		    				columnWidth: .31,
		    				items: [{
		    					xtype: 'button',
		    					text: 'Styles',
		    					minWidth: global.buttonWidth,
		    					handler: function() {
		    						winStyleEditor('numberStyles');
		    					}
		    				}]	
		    			}]
		    			
					}, {
		    			xtype: 'uxfieldset',
		    			title: 'Thumbstrip',
						id: 'fsThumbstrip',
						disabled: !cfg.enableGallery.value,
		    			height: 'auto',
						layout: 'column',
		    			defaults: {
		    				border: false,
			            	bodyStyle: 'padding: 0'
		    			},
		    			items: [{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcheckbox',
								id: 'enableThumbstrip',
								boxLabel: 'Enable',
								fieldLabel: 'Thumbstrip',
								checked: cfg.enableThumbstrip.value
				    		}, {
			    				xtype: 'uxcombo',
								fieldLabel: 'Mode',
								id: 'thumbstripMode',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value'],
								    data : [
								    	['horizontal'],
								    	['vertical'],
								    	['float']
								    ]
								}),
								displayField: 'value',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.thumbstripMode.value		    			
			    			}, {
			    				layout: 'column',
								border: false,
								bodyStyle: 'padding: 0',
		    					defaults: {
		    						border: false,
		    						layout: 'form',
			            			bodyStyle: 'padding: 0'
		    					},
								items: [{
									columnWidth: .368,
									items: [{
										xtype: 'label',
										text: 'Position:'
									}]
								}, {	
			    					xtype: 'uxcombo',
									columnWidth: .33,
									fieldLabel: 'Position',
									id: 'thumbstripPosition',
									listWidth: 120,
									store: positionStore,
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.thumbstripPosition.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = record.data.value,
												relativeTo = Ext.getCmp('thumbstripRelativeTo').value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}, {
				    				xtype: 'uxcombo',
									columnWidth: .225,
									fieldLabel: 'Relative to',
									id: 'thumbstripRelativeTo',
									//width: 30,
									store: new Ext.data.SimpleStore({
									    fields: ['value'],
									    data : [
									    	['image'],
									    	['viewport']
									    ]
									}),
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.thumbstripRelativeTo.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = Ext.getCmp('thumbstripPosition').value,
												relativeTo = record.data.value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}]	    			
			    			}, {
								xtype: 'incrementalfield',
								fieldLabel: 'Thumb size',
								id: 'thumbstripSize',
								value: cfg.thumbstripSize.value,
				            	anchor: '-25', 
				            	increment: 5,
				            	maxValue: 300,
				            	minValue: 30,
				            	allowDecimals: false
							}/*, {
								xtype: 'incrementalfield',
								fieldLabel: 'Panel width',
								id: 'thumbstripPanelWidth',
								value: cfg.thumbstripPanelWidth.value,
				            	anchor: '-25', 
				            	increment: 10,
				            	maxValue: 500,
				            	minValue: 30,
				            	allowDecimals: false
							}*/]
						}, {
		    				columnWidth: .31,
		    				items: [{
		    					xtype: 'label',
		    					text: ' '
		    				}]	
		    			}]
		    			
					}, {
		    			xtype: 'uxfieldset',
		    			title: 'Behaviour',
						id: 'fsSlideshowBehaviour',
						disabled: !cfg.enableGallery.value,
		    			height: 'auto',
						layout: 'column',
		    			defaults: {
		    				border: false,
			            	bodyStyle: 'padding: 0'
		    			},
		    			items: [{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcheckbox',
								id: 'fixedControls',
								fieldLabel: 'Image position',
								boxLabel: 'Keep controls fixed',
								checked: cfg.fixedControls.value
				    		}, {
								xtype: 'uxcheckbox',
								id: 'slideshowRepeat',
								fieldLabel: 'Repeat slideshow',
								boxLabel: 'Yes',
								checked: cfg.slideshowRepeat.value
				    		}]
						}, {
		    				columnWidth: .31,
		    				items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Advanced',
								handler: winAdvancedSlideshow
							}]	
		    			}]
		    			
					}]
		        	//--- End Slideshow tab		        
		        }, {
		        	//--- Start HTML tab		        
		            title: 'HTML',
					id: 'tab-html',
		            layout: 'form',
		            defaultType: 'textfield',                     
		    		iconCls: 'application_view_list',
		    		items: [{
		    			xtype: 'uxfieldset',
		    			height: 'auto',
		    			title: 'Enable',
		    			layout: 'table',
						layoutConfig: {
							columns: 4
						},
		    			defaults: {
		    				border: false,
		    				layout: 'form',
			            	bodyStyle: 'padding: 0',
							width: '90px'
		    			},	
		    			//items: [{
		    				//columnWidth: .69,
	    				items: [{
							xtype: 'uxcheckbox',
							id: 'htmlInline',
							boxLabel: 'Inline HTML',
							hideLabel: true,
							checked: cfg.htmlInline.value
						}, {
							xtype: 'uxcheckbox',
							id: 'htmlAjax',
							boxLabel: 'Ajax',
							hideLabel: true,
							checked: cfg.htmlAjax.value,
							listeners: {
								check: toggleHtmlEnabled
							}
						}, {
							xtype: 'uxcheckbox',
							id: 'htmlIframe',
							boxLabel: 'Iframe',
							hideLabel: true,
							checked: cfg.htmlIframe.value,
							listeners: {
								check: toggleHtmlEnabled
							}
						}, {
							xtype: 'uxcheckbox',
							id: 'htmlFlash',
							boxLabel: 'Flash',
							hideLabel: true,
							checked: cfg.htmlFlash.value,
							listeners: {
								check: toggleHtmlEnabled
							}
						}]
		    		}, {
		    			xtype: 'uxfieldset',
						id: 'fsHtmlSize',
		    			height: 'auto',
		    			title: 'Size',
						layout: 'form',
		    			defaults: {
		    				border: false,
							
							bodyStyle: 'padding: 0'
		    			},	
	    				layout: 'column',
						items: [{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'incrementalfield',
								anchor: '-25',
								fieldLabel: 'Width',
								id: 'htmlWidth',
								value: cfg.htmlWidth.value,
								increment: 25,
								maxValue: 5000,
								minValue: 0,
								allowDecimals: false
							}]
						}/*, { Problem with preview due to preserveContent
							xtype: 'uxcheckbox',
							id: 'allowWidthReduction',
							boxLabel: 'Allow fitting to viewport width',
							hideLabel: true,
							checked: cfg.allowWidthReduction.value
						}*/
						]
		    		}, {
						xtype: 'uxfieldset',
						id: 'fsHtmlControls',
						height: 'auto',
						title: 'Controls',
						defaults: {
							border: false,
							bodyStyle: 'padding: 0'
						},
						layout: 'column',
						items: [{
							columnWidth: .69,
							defaults: {
								layout: 'form'
							},
							items: [{
								layout: 'table',
								layoutConfig: {
									columns: 3
								},
								border: false,
								bodyStyle: 'padding: 0',
								defaults: {
									border: false,
									layout: 'form',
									bodyStyle: 'padding: 0',
									width: '90px'
								},
								items: [{
									xtype: 'uxcheckbox',
									id: 'htmlPrevious',
									boxLabel: 'Previous',
									hideLabel: true,
									checked: cfg.htmlPrevious.value
								}, {
									xtype: 'uxcheckbox',
									id: 'htmlNext',
									boxLabel: 'Next',
									hideLabel: true,
									checked: cfg.htmlNext.value
								}, /*{
									xtype: 'uxcheckbox',
									id: 'htmlPrint',
									boxLabel: 'Print',
									hideLabel: true,
									checked: cfg.htmlPrint.value
								}, */{
									xtype: 'uxcheckbox',
									id: 'htmlMove',
									boxLabel: 'Move',
									hideLabel: true,
									checked: cfg.htmlMove.value
								}, {
									xtype: 'uxcheckbox',
									id: 'htmlClose',
									boxLabel: 'Close',
									hideLabel: true,
									checked: cfg.htmlClose.value
								}, {
									xtype: 'uxcheckbox',
									id: 'htmlResize',
									boxLabel: 'Resize',
									hideLabel: true,
									checked: cfg.htmlResize.value
								}]	
							}, {
								xtype: 'panel',
								bodyStyle: 'padding: 15px 0 0 0',
								border: false,
								defaults: {
									layout: 'form'
								},
								items: [{
									xtype: 'uxcombo',
									fieldLabel: 'Layout',
									id: 'htmlControlsLayout',
									anchor: '-25',
									store: new Ext.data.SimpleStore({
									    fields: ['value', 'text'],
									    data : [
									    	['icon', 'Icons only'],
									    	['text', 'Text only'],				    	
									    	['icon-text', 'Icons and text']
									    ]
									}),
									valueField: 'value',
									hiddenName: 'htmlControlsLayoutValue',
					                displayField: 'text',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.htmlControlsLayout.value
								}]
							}]
						}/*, {
							columnWidth: .31,
							defaults: {
								layout: 'form'
							},
							items: [{
		    					xtype: 'button',
								text: 'Styles',
		    					minWidth: global.buttonWidth,
		    					handler: function() {
		    						winStyleEditor('htmlControlStyles');
		    					}
							}]
						}*/]
					}, {
						xtype: 'uxfieldset',
						height: 'auto',
						title: 'Title bar',
						layout: 'column',
						id: 'useTitleBar',
						checkboxToggle: true,
						collapsed: !cfg.useTitleBar.value,
						defaults: {
							border: false,
							bodyStyle: 'padding: 0',
							layout: 'form'
						},
						items: [{
							columnWidth: .69,

							items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Title source',
								id: 'htmlHeadingSource',
								hiddenName: 'htmlHeadingSourceValue',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [				    	
								    	['headingText', 'A given string'],
								    	['a.title', 'Anchor\'s title attribute'],			    	
								    	['a.innerHTML', 'Anchor\'s inner HTML']
								    ]
								}),
								valueField: 'value',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.htmlHeadingSource.value
							}, {
								xtype: 'label',
								html: '<small>To edit the appearance of the Title bar, go to Overlays -> Heading -> Styles</small>'
							}]
						}]
					}]
		        	//--- End HTML tab		        
		        }, {
					//--- Start Style tab
					title: 'Style',
					id: 'tab-thumbs',
					layout: 'form',
					iconCls: 'palette',
					items: [{
						//--- Start thumbnail border fieldset
						xtype:'uxfieldset',
						id: 'fsThumbButton',
						title: 'Thumbnail',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
			            items:[{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								fieldLabel: 'Explanation label',
								id: 'thumbnailExplanation',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [
								    	['none', 'None'],
								    	['text-below', 'Text below'],				    	
								    	['both-below', 'Icon and text below']
								    ]
								}),
								valueField: 'value',
								hiddenName: 'thumbnailExplanationValue',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.thumbnailExplanation.value
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Thumbnail border',
								handler: winThumbnail
							}]
						}]
						//--- End thumbnail border fieldset
					}, {
						//--- Start loading label
						xtype:'uxfieldset',
						id: 'fsLoadingLabel',
						title: 'Loading label',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
			            items:[{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								fieldLabel: 'Label style',
								id: 'loadingStyle',
								anchor: '-25',
						        store: new Ext.data.SimpleStore({
								    fields: ['name'],
								    data : [
								    	['White: icon and text'],
								    	['White: text only'],
								    	['White: small icon'],
								    	['White: big icon'],
								    	['Black: icon and text'],
								    	['Black: text only'],
								    	['Black: small icon'],
								    	['Black: big icon']
								    ]
								}),
				                displayField: 'name',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.loadingStyle.value
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'uxcheckbox',
								id: 'loadingPreview',
					    		boxLabel: 'Preview',
					    		hideLabel: true,
					    		checked: false,
					    		listeners: {
						    		check: function(obj, checked) {
						    			if (checked) loading.show();
						    			else loading.hide();
						    		}
						    	}
							}]
						}]
						//--- End loading label
					}, {
						//--- Start popup border fieldset
						xtype: 'uxfieldset',
						title: 'Popup styles',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
						items:[{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'colorpicker',
								fieldLabel: 'Background',
								id: 'popupBackground',
								value: cfg.popupBackground.value,
								anchor: '-25'
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Border and outline',
								handler: winOutline
							}]
						}]
						//--- End popup border fieldset
					}, { 
						//--- Start Dimmed page fieldset
	                    xtype:'uxfieldset',
						title: 'Dimming',
			            height: 'auto',
			            layout: 'column',
					    defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
						items :[{
					    	columnWidth: .69,
					    	layout: 'form',
					    	items:[{
					    		xtype: 'uxcheckbox',
					    		id: 'applyDimming',
					    		boxLabel: 'Apply page dimming mask',
					    		hideLabel: true,
					    		checked: cfg.applyDimming.value,
					    		listeners: {
						    		check: function(obj, checked) {
						    			//update(obj);
						    			Ext.getCmp('dimmingOptions').setDisabled(!checked);
						    		}
						    	}
					    	}]
					    	
					    }, {
					    	columnWidth: .31,
					    	layout: 'form',
					    	items:[{
					    		xtype: 'button',
					    		minWidth: global.buttonWidth,
					    		id: 'dimmingOptions',
					    		text: 'Dimming options',
					    		disabled: !cfg.applyDimming.value,
					    		handler: winDimming
					    	}]					    	
					    }]
						//--- End Dimmed page fieldset
					}]
					
					//-- End Style tab
	            }, { 
	            	//-- Start Behaviour tab
		            title: 'Behavior',
					id: 'tab-behaviour',
		            layout: 'form',
		            defaultType: 'textfield',                     
		    		iconCls: 'images',	
		            items: [{
						//--- Start animation fieldset
						xtype: 'uxfieldset',
						title: 'Animation',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
						items:[{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								fieldLabel: 'Easing',
								id: 'easing',
								anchor: '-25',
						        store: easingStore,
				                displayField: 'name',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.easing.value
							    //listeners: { valid: validator }
							}, {
								xtype: 'uxcheckbox',
								id: 'hideThumbOnExpand',
								boxLabel: 'Hide thumbnail on expand (not gallery)',
								hideLabel: true,
								checked: cfg.hideThumbOnExpand.value
								//listeners: { check: validator }
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Advanced animation',
								handler: winAnimation
							}]
						}]
						//--- End animation fieldset
					}, {
						//--- Start Alignment fieldset
						xtype: 'uxfieldset',
						title: 'Popup size and alignment',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
						items:[{
							columnWidth: .69,
							layout: 'form',
							items: [{
								xtype: 'uxcombo',
								fieldLabel: 'Alignment',
								id: 'alignment',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [
								    	['auto', 'Auto'],
								    	['center', 'Center'],				    	
								    	['anchor-top', 'Thumbnail top'],				    	
								    	['anchor-top-right', 'Thumbnail top right'],   	
								    	['anchor-right', 'Thumbnail right'], 	
								    	['anchor-bottom-right', 'Thumbnail bottom right'],	    	
								    	['anchor-bottom', 'Thumbnail bottom'],	    	
								    	['anchor-bottom-left', 'Thumbnail bottom left'],	    	
								    	['anchor-left', 'Thumbnail left'],	    	
								    	['anchor-top-left', 'Thumbnail top left']
								    ]
								}),
								valueField: 'value',
								hiddenName: 'alignmentValue',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.alignment.value
							}, {
								xtype: 'uxcheckbox',
								id: 'allowSizeReduction',
								boxLabel: 'Allow size reduction',
								fieldLabel: 'Fit viewport',
								
								checked: cfg.allowSizeReduction.value
								//listeners: { check: validator }
							}, {
								xtype: 'uxcheckbox',
								id: 'padToMinWidth',
								fieldLabel: 'Small images',
								boxLabel: 'Pad to minimum width',
								
								checked: cfg.padToMinWidth.value
								//listeners: { check: validator }
							}]
						}, {
							columnWidth: .31,
							layout: 'form',
							items: [{
								xtype: 'button',
					    		minWidth: global.buttonWidth,
								text: 'Advanced align',
								handler: winAlignment
							}]
						}]
						//--- End Alignment fieldset
					}, {
						//--- Start Advanced fieldset
						xtype: 'uxfieldset',
						title: 'Advanced behaviour',
						height: 'auto',
						layout: 'column',
						defaults:{
			            	border:false,
			            	bodyStyle: 'padding: 0'
			            },
						items:[{
							columnWidth: .69,
							layout: 'form',
							labelWidth: 200,
							items: [{
								xtype: 'uxcheckbox',
								id: 'allowMultipleInstances',
								hideLabel: true,
								boxLabel: 'Allow multiple popups at the same time',
								checked: cfg.allowMultipleInstances.value
							}, {
								xtype: 'uxcheckbox',
								id: 'blockRightClick',
								hideLabel: true,
								boxLabel: 'Block right clicks on the popup image',
								checked: cfg.blockRightClick.value
							}, {
								xtype: 'uxcheckbox',
								id: 'enableKeyListener',
								hideLabel: true,
								boxLabel: 'Enable shortcut keys',
								checked: cfg.enableKeyListener.value
							}, {								
								xtype: 'incrementalfield',
								fieldLabel: 'Number of images to preload',
								id: 'numberOfImagesToPreload',
								value: cfg.numberOfImagesToPreload.value,
								increment: 5,
								maxValue: 5000,
								minValue: 0,
								allowDecimals: false,
								anchor: '-25'
							}]
						}]
						//--- End Advanced fieldset
					}]
					//--- End Behaviour tab
		        }, {
		        	//--- Start Overlays tab		        
		            title: 'Overlays',
					id: 'tab-overlays',
		            layout: 'form',
		            defaultType: 'textfield',                     
		    		iconCls: 'comments',
		    		items: [{
		    			xtype: 'uxfieldset',
		    			height: 'auto',
						id: 'useCaption',
						checkboxToggle: true,
						collapsed: !cfg.useCaption.value,
		    			title: 'Caption',
		    			layout: 'column',
		    			defaults: {
		    				border: false,
		    				layout: 'form',
			            	bodyStyle: 'padding: 0'
		    			},	
		    			items: [{
		    				columnWidth: .69,
		    				items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Source',
								id: 'captionSource',
								hiddenName: 'captionSourceValue',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [
								    	['a.title', 'Anchor\'s title'],
										['thumb.alt', 'Thumbnail\'s alt'],
								    	['thumb.title', 'Thumbnail\'s title'],
								    	['subsequent', 'Subsequent div (allows rich content)']
								    ]
								}),
								valueField: 'value',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.captionSource.value
							}, {
			    				layout: 'column',
								border: false,
								bodyStyle: 'padding: 0',
		    					defaults: {
		    						border: false,
		    						layout: 'form',
			            			bodyStyle: 'padding: 0'
		    					},
								items: [{
									columnWidth: .368,
									items: [{
										xtype: 'label',
										text: 'Position:'
									}]
								}, {	
			    					xtype: 'uxcombo',
									columnWidth: .33,
									fieldLabel: 'Position',
									id: 'captionPosition',
									listWidth: 120,
									store: captionPositionStore,
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.captionPosition.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = record.data.value,
												relativeTo = Ext.getCmp('captionRelativeTo').value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}, {
				    				xtype: 'uxcombo',
									columnWidth: .225,
									fieldLabel: 'Relative to',
									id: 'captionRelativeTo',
									//width: 30,
									store: new Ext.data.SimpleStore({
									    fields: ['value'],
									    data : [
									    	['image'],
									    	['viewport']
									    ]
									}),
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.captionRelativeTo.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = Ext.getCmp('captionPosition').value,
												relativeTo = record.data.value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}]	    			
			    			}]    				
		    			}, {
		    				columnWidth: .31,
		    				items: [{
		    					xtype: 'button',
		    					text: 'Styles',
		    					minWidth: global.buttonWidth,
		    					handler: function() {
		    						winStyleEditor('captionStyles');
		    					}
		    				}]	
		    			}]
		    		}, {
		    			xtype: 'uxfieldset',
		    			id: 'useHeading',
						checkboxToggle: true,
						collapsed: !cfg.useHeading.value,
		    			height: 'auto',
		    			title: 'Heading',
		    			layout: 'column',
		    			defaults: {
		    				border: false,
		    				layout: 'form',
			            	bodyStyle: 'padding: 0'
		    			},	
		    			items: [{
		    				columnWidth: .69,
		    				items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Source',
								id: 'headingSource',
								hiddenName: 'headingSourceValue',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [
								    	['a.title', 'Anchor\'s title'],
								    	['thumb.alt', 'Thumbnail\'s alt'],
								    	['thumb.title', 'Thumbnail\'s title'],				    	
								    	['subsequent', 'Subsequent div (allows rich content)']
								    ]
								}),
								valueField: 'value',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.headingSource.value
							}, {
			    				layout: 'column',
								border: false,
								bodyStyle: 'padding: 0',
		    					defaults: {
		    						border: false,
		    						layout: 'form',
			            			bodyStyle: 'padding: 0'
		    					},
								items: [{
									columnWidth: .368,
									items: [{
										xtype: 'label',
										text: 'Position:'
									}]
								}, {	
			    					xtype: 'uxcombo',
									columnWidth: .33,
									fieldLabel: 'Position',
									id: 'headingPosition',
									listWidth: 120,
									store: positionStore,
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.headingPosition.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = record.data.value,
												relativeTo = Ext.getCmp('headingRelativeTo').value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}, {
				    				xtype: 'uxcombo',
									columnWidth: .225,
									fieldLabel: 'Relative to',
									id: 'headingRelativeTo',
									//width: 30,
									store: new Ext.data.SimpleStore({
									    fields: ['value'],
									    data : [
									    	['image'],
									    	['viewport']
									    ]
									}),
									displayField: 'value',
					                editable: false,
					                forceSelection: true,
								    mode: 'local',
								    triggerAction: 'all',
								    value: cfg.headingRelativeTo.value,
					    			listeners: {
						    			beforeselect: function(obj, record) {

											var position = Ext.getCmp('headingPosition').value,
												relativeTo = record.data.value;
												
											return validateOverlayPositionPair(obj, position, relativeTo);
										}
						    		}
								}]	    			
			    			}, {
								xtype: 'uxcheckbox',
								id: 'dragByHeading',
								boxLabel: 'Allow',
								fieldLabel: 'Drag by heading',
								checked: cfg.dragByHeading.value
							}]    				
		    			}, {
		    				columnWidth: .31,
		    				items: [{
		    					xtype: 'button',
		    					text: 'Styles',
		    					minWidth: global.buttonWidth,
		    					handler: function() {
		    						winStyleEditor('headingStyles');
		    					}
		    				}]	
		    			}]
		    		}, {
		    			xtype: 'uxfieldset',
		    			height: 'auto',
		    			title: 'Close button',
		    			layout: 'column',
						checkboxToggle: true,
						//checkboxName: 'useCloseButton',
						id: 'useCloseButton',
						collapsed: !cfg.useCloseButton.value,
		    			defaults: {
		    				border: false,
		    				layout: 'form',
			            	bodyStyle: 'padding: 0'
		    			},	
		    			items: [{
		    				columnWidth: .69,
		    				items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Style',
								id: 'closeButtonStyle',
								hiddenName: 'closeButtonStyleValue',
								anchor: '-25',
								store: new Ext.data.SimpleStore({
								    fields: ['value', 'text'],
								    data : [
								    	['macstyle', 'Mac style'],
								    	['simplewhite', 'Simple white']
								    ]
								}),
								valueField: 'value',
				                displayField: 'text',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.closeButtonStyle.value
							}]    				
		    			}]
		    		}, {
		    			xtype: 'uxfieldset',
		    			height: 'auto',
		    			title: 'Show credits',
		    			layout: 'column',
						checkboxToggle: true,
						id: 'showCredits',
						collapsed: !cfg.showCredits.value,
		    			defaults: {
		    				border: false,
		    				layout: 'form',
			            	bodyStyle: 'padding: 0'
		    			},	
		    			items: [{
		    				columnWidth: .69,
		    				items: [{
			    				xtype: 'uxcombo',
								fieldLabel: 'Position',
								id: 'creditsPosition',
								anchor: '-25',
								store: positionStore,
				                displayField: 'value',
				                editable: false,
				                forceSelection: true,
							    mode: 'local',
							    triggerAction: 'all',
							    value: cfg.creditsPosition.value
							}]    				
		    			}]
		    		}]
		        	//--- End Overlays tab		        
		        }]
		        
		    }, {
	        	region: 'south',
	        	collapsible: true,
	        	title: 'Help',
	        	height: 100,
	        	border: false,
	        	id: 'help',
	        	cls: 'help',
	        	bodyStyle: 'padding: 5px',
	        	autoScroll: true,
				html: 'Select any item to view a help description'
	        }]
		          
        }), 
        
        {	
        	//xtype: 'panel',
        	region: 'center',
        	title: 'Preview',
        	layout: 'border',
	        margins: '5 5 5 5',
	        items: [{
	        	xtype: 'toolbar',
	        	region: 'north',
	        	
	        	items: [{
		    		id: 'btnPageStyles',
		    		text: 'Page styles',
	        		iconCls: 'palette',
		    		handler: winPageStyles
		    	}, {
					xtype: 'tbseparator'
				}, {
	        		text: 'View HTML',
	        		id: 'viewHTML',
	        		iconCls: 'html',
	        		handler: function() {
	        			winViewCode('viewHTML', 0);
	        		}
	        	}, {
	        		text: 'View CSS',
	        		id: 'viewCSS',
	        		iconCls: 'css',
	        		handler: function() {
	        			winViewCode('viewCSS', 1);
	        		}
	        	}, {
	        		text: 'View JavaScript',
	        		id: 'viewJavaScript',
	        		iconCls: 'script',
	        		handler: function() {
	        			winViewCode('viewJavaScript', 2);
	        		}
	        	}, {
					xtype: 'tbseparator'
				}, {
	        		text: 'Publish',
	        		id: 'publish',
	        		iconCls: 'world_go',
	        		handler: winPublish
	        	}]
	        }, {
	        	region: 'center',
	        	layout: 'fit',
	        	border: false,
	        	items: [new Ext.ux.IFrameComponent({
	        		id: 'preview',
	        		url: 'preview.htm?dummy='+ (new Date()).getTime()
	        	})]
	        }]
        }]

	});
});

function changeHandler() {
	update(this);
};

// Set the help text according to the cfg help object
function focusHandler() {
	if (!cfg[this.id]) return;
	if (handlingPreset) return; // checkboxes fire the check event on updating presets.
	var s = '', 
		h = cfg[this.id].help, 
		cmp = Ext.getCmp('help'),
		header = cmp.el.dom.getElementsByTagName('span')[0],
		body = cmp.el.dom.getElementsByTagName('div')[3];
		
	if (h) {		
		if (h.title) header.innerHTML = 'Help - '+ h.title;
		if (h.text) s += '<p>'+ h.text +'</p>';
		if (h.api) {
			var api = h.api.replace(/([a-zA-Z]+\.[a-zA-Z]+)/g, '<a target="_new" href="/ref/$1">$1</a>');
			s += '<i>See also '+ api +'.</i>';
			
		}
		
		body.innerHTML = s;
	} else {
		header.innerHTML = 'Help';
		body.innerHTML = s;
	}
};

function update(arr) {
	if (!Ext.isArray(arr)) {
		update([arr]);
		return;
	}
	// add to history
	var writeWhat = {}, changed = false, changedItems = {};
	
	for (var i = 0; i < arr.length; i++) {
		var el = arr[i], changedItem = true, inWindow = false, parent = el.ownerCt, applyButton, val;
		if (typeof el == 'string') el = Ext.getCmp(el);
		
		if (el.xtype == 'textarea') el.setValue(el.el.dom.value);
		
		// Get value
		if (el.xtype == 'uxcheckbox') val = el.checked;
		else if (el.xtype == 'uxcombo' && el.hiddenField) val = el.hiddenField.value;
		else if (el.xtype == 'uxfieldset') val = !el.disabled;
		else val = el.value;
		
		
		
		// Page load or value not changed
		if (!cfg[el.id] || val == cfg[el.id].value) changedItem = false;
		//if (el.id == 'preset') console.log(val, cfg[el.id].value);
		
		// if the element is within a window, dont update until the apply button is clicked
		if (changedItem) {
			while (parent) {
				if (parent.baseCls == 'x-window') {
					inWindow = true;
					break;
				} else parent = parent.ownerCt;
			}
			// Moved to changeHandler
			if (inWindow) {
				for (var i = 0; i < parent.buttons.length; i++) {
					if (parent.buttons[i].text == 'Apply') {
						parent.buttons[i].setDisabled(false);
					}
				}
			}
		}
		if (changedItem && !inWindow) {
			// set the value
			cfg[el.id].value = val;
			 
			changedItems[el.id] = val;
			changed = true;
						
			for (var i = 0; i < cfg[el.id].write.length; i++) {
				writeWhat[cfg[el.id].write[i]] = true;
			}
			if (cfg[el.id].reOpen) writeWhat.reOpen = true;
		}
	}
	if (changed) {
		if (el.id == 'preset') updatePreset(el.id);
		
		// save state
		saveState();
		
		// do the update
		var write = function() {
			if (writeWhat['html']) tpl.writeHTML();
			if (writeWhat['css']) tpl.writeCSS();
			if (writeWhat['js']) tpl.writeJS();
		}
		if (writeWhat.reOpen) closeAndReopen(write);			
		else write();
		
		// save history
		optionsHistory.save(changedItems);
	}	
	
};

var htmlEnabled = (cfg.htmlInline.value || cfg.htmlAjax.value || cfg.htmlIframe.value || cfg.htmlFlash.value);
function toggleHtmlEnabled() {
	

}
function saveState() {
	var json = $.toJSON(getConfig());
	if (json.length > 4095) alert ("Couldn't save config");
	Ext.state.Manager.set('config', json);
}
/*window.onunload = function() {
	//viewConfig();
	/*var s = '';
	$.each(cfg, function(name) {
		//if (this.value != Ext.state.Manager.get(name))
		s += name +': '+ this.value +', '+ Ext.state.Manager.get(name) +'\n';
	});
	alert (s);* /
	//alert('Get state: '+ Ext.state.Manager.get('preset'));
};*/
var handlingPreset = false;
function updatePreset(id) {
	var key = cfg[id].value;
	var values = presets[key];
	handlingPreset = true;
	
	$.each(cfg, function(name) {
		var val;
		if (typeof values[name] != 'undefined') val = values[name];
		else if (name == id) val = cfg[name].value;
		else val = this.startValue;
		
		if (name != id && !this.abovePreset) { // don't set back the preset switcher
			this.value = val;
			var cmp = Ext.getCmp(name);
			if (cmp) cmp.setValue(val);
		}
	})
	handlingPreset = false;
}

function closeAll() {
	var hs = window.frames['preview'].hs;
	for (var i = 0; i < hs.expanders.length; i++) {
		if (hs.expanders[i]) hs.expanders[i].close();
	}
};

function resetAll() {
	//Ext.state.Manager.clear('config');
	$.each(cfg, function(name) {
		if (name != 'userdir' && name != 'captionData')
			this.value = this.startValue;
	});
	saveState();
	window.location.reload();
};

function buildLink() {
	var config = getConfig();
	delete config.captionData;
	config = $.toJSON(config).
		replace(/"/g, '%22').
		replace(/ /g, '+').
		replace(/:/g, '%3A').
		replace(/{/g, '%7B').
		replace(/}/g, '%7D').
		replace(/#/g, '%23').
		replace(/\//g, '%2F').
		replace(/\\/g, '%5C');
	var s = 'http://'+ location.hostname +'/editor/?config='+ config;
	return s;
	
}

function getLink() {
	var s = buildLink();
	s = '<a href='+ s +'>'+ s +'</a>';
	var win = new Ext.ux.Window({
	    title : 'Direct link to the current configuration',
	    width : 500,
	    modal : true,
	    x: 20,
		y: 100,
	    resizable: false,
	    	bodyStyle: 'padding: 10px; background: white',
		items: [{
			xtype: 'label',
			html: '<p>Right click and copy this URL to save or share your config:</p>'+ s
		}],
		buttons: [{
	        text     : 'Close',
	        handler  : function() {
				win.close();
			}
	    }]
	});
	win.show();
	
};

function viewConfig() {
	alert ($.toJSON(getConfig()));
};

function getConfig() {
	var currentConfig = {};
	$.each(cfg, function(name) {
		if (this.value != this.startValue || 
				(name == 'captionData' && this.value != {}) ||
				(name == 'userdir' && userImages)) {
			currentConfig[name] = this.value;
		}
	});
	return currentConfig;
};

function getImageOptionsQuery() {
	
	return '?userdir='+ cfg.userdir.value +
		'&applyOptions=true'+
		'&thumbWidth='+ Ext.getCmp('thumbWidth').getValue() +
		'&thumbHeight='+ Ext.getCmp('thumbHeight').getValue() +
		'&clipThumbs='+ Ext.getCmp('clipThumbs').getValue() +
		'&largeWidth='+ Ext.getCmp('largeWidth').getValue() +
		'&largeHeight='+ Ext.getCmp('largeHeight').getValue();
}
function closeAndReopen(callback) {
	var holdCallback = false;
	for (var i = 0; i < hs.expanders.length; i++) {
		if (hs && hs.expanders[i]) {
			var exp = hs.expanders[i];
			var a = exp.a;
			holdCallback = true;
			exp.onAfterClose = function() {
				callback();
				exp.onAfterClose = null;
				setTimeout(function() {
					var reopened = false;
					try { // ie fails on accessing a non-existant offsetParent
						if (a.offsetParent) { // HTML is unchanged
							
							// purge sleeping to make changes take effect
							hs.sleeping = [];
						
							a.onclick();
							reopened = true;
						}
					} catch (e) {  }
					if (!reopened) { // HTML overwritten
						var anchors = window.frames['preview'].document.getElementsByTagName('A');
						Ext.each(anchors, function() {
							if (this.href == a.href && this.onclick) {
								this.onclick();
								return;
							}
						})
					}
				}, 100);
			}
			exp.close();
			//break;
		}
	}
	if (!holdCallback) callback();
};

function saveFtpSettings() {
	// get values
	ftpSettings.server = Ext.getCmp('ftpServer').getValue();
	ftpSettings.userName = Ext.getCmp('ftpUserName').getValue();
	ftpSettings.userPass = Ext.getCmp('ftpUserPass').getValue();
	ftpSettings.rememberPass = Ext.getCmp('ftpRememberPass').checked;
	ftpSettings.uploadDir = Ext.getCmp('ftpUploadDir').getValue();
	
	if (!ftpSettings.rememberPass) ftpSettings.userPass = '';

	// save state
	var json = $.toJSON(ftpSettings);
	if (json.length > 4095) alert ("Couldn't save ftpSettings");
	Ext.state.Manager.set('ftpSettings', json);
}

function winAnimation() {
	var win = new Ext.ux.Window({
	    title : 'Animation',
	    id: 'winAnimation',
	    resizable: false,
		modal: true,
	    width : 400,
	    x: 100,
	    height: 180,
	    layout : 'fit',
		border: false,
	    items: [new Ext.FormPanel({
	    layout: 'form',
		labelWidth: 200,
	    	bodyStyle: 'padding-top: 10px',
	    	defaults: {
	    		anchor: '-25'
	    	},
	    	id: 'frmAnimation',
	        items: [{
				xtype: 'incrementalfield',
				fieldLabel: 'Open duration (ms)',
				id: 'expandDuration',
				value: cfg.expandDuration.value,
				increment: 25,
				maxValue: 5000,
				minValue: 0,
				allowDecimals: false
			}, {
				xtype: 'incrementalfield',
				fieldLabel: 'Close duration (ms)',
				id: 'restoreDuration',
				value: cfg.restoreDuration.value,
				maxValue: 5000,
				minValue: 0,
				increment: 25,
				allowDecimals: false
			}, {
				xtype: 'uxcombo',
				fieldLabel: 'Show outline during animation',
				id: 'outlineWhileAnimating',
				store: new Ext.data.SimpleStore({
				    fields: ['value', 'name'],
				    data : [
				    	[0, 'Never'],
				    	[1, 'Always'],				    	
				    	[2, 'HTML expanders only']
				    ]
				}),
				valueField: 'value',
                displayField: 'name',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: cfg.outlineWhileAnimating.value
			}]
		})],
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};

function winAdvancedSlideshow() {
	var win = new Ext.ux.Window({
	    title : 'Advanced Gallery Options',
	    id: 'winAdvancedSlideshow',
	    resizable: false,
	    width : 400,
	    x: 100,
	    height: 240,
		modal: true,
	    layout : 'fit',
		border: false,
	    items: [new Ext.FormPanel({
		    layout: 'form',
			labelWidth: 150,
	    	bodyStyle: 'padding-top: 10px',
	    	defaults: {
	    		anchor: '-25'
	    	},
	    	id: 'frmAnimation',
	        items: [{
				xtype: 'incrementalfield',
				fieldLabel: 'Image interval (ms)',
				id: 'slideshowInterval',
				value: cfg.slideshowInterval.value,
				increment: 500,
				maxValue: 100000,
				minValue: 500,
				allowDecimals: false
			}, {			
				xtype: 'uxcombo',
				fieldLabel: 'Autoplay slideshow',
				id: 'slideshowAutoplay',
				anchor: '-25',
				store: new Ext.data.SimpleStore({
				    fields: ['value', 'text'],
				    data : [
				    	['none', 'None'],
				    	['all', 'All thumbnails']
				    ]
				}),
				valueField: 'value',
				hiddenName: 'slideshowAutoplayValue',
                displayField: 'text',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: cfg.slideshowAutoplay.value
			
			}, {			
				xtype: 'uxcombo',
				fieldLabel: 'Transition effect',
				id: 'slideshowTransition',
				anchor: '-25',
				store: new Ext.data.SimpleStore({
				    fields: ['value', 'text'],
				    data : [
				    	['none', 'None'],
				    	['crossfade', 'Crossfade']
				    ]
				}),
				valueField: 'value',
				hiddenName: 'slideshowTransitionValue',
                displayField: 'text',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: cfg.slideshowTransition.value			
			}, {
				xtype: 'incrementalfield',
				fieldLabel: 'Transition duration',
				id: 'transitionDuration',
				value: cfg.transitionDuration.value,
				increment: 50,
				maxValue: 5000,
				minValue: 0,
				allowDecimals: false
			}, {/*
				xtype: 'uxcheckbox',
				autoWidth: true,
				id: 'minigallery',
				hideLabel: true,
				boxLabel: 'Show first thumbnail only',
				checked: cfg.minigallery.value
				*/
				xtype: 'uxcombo',
				fieldLabel: 'Visible thumbnails',
				id: 'minigallery',
				anchor: '-25',
				store: new Ext.data.SimpleStore({
				    fields: ['value', 'text'],
				    data : [
				    	['all', 'All thumbs'],
				    	['first', 'First thumb only'],
				    	['none', 'None - open from link']
				    ]
				}),
				valueField: 'value',
				hiddenName: 'minigalleryValue',
                displayField: 'text',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: cfg.minigallery.value
			}, {
				xtype: 'uxcheckbox',
				autoWidth: true,
				id: 'showSingleImage',
				hideLabel: true,
				boxLabel: 'Show single image preview even if Gallery is enabled',
				checked: cfg.showSingleImage.value
			}]
		})],
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};

function winAlignment() {
	var win = new Ext.ux.Window({
	    title : 'Advanced size and alignment',
	    width : 440,
		modal: true,
	    height: 350,
	    resizable: false,
	    x: 20,
		id: 'winAlignment',
		bodyStyle: 'background: white; padding: 5px',
		autoScroll: true,
		items: [{
			layout: 'column',
			border: false,
			items: [{
				//--- Start content min/max size fieldset
				columnWidth: .49,
				border: false,
				items: [{
		            xtype:'uxfieldset',
					title: 'Content size (0 disables)',
		            height: 140,
		            id: 'fsOutline',
		            defaults:{
		            	border:false,
		            	anchor: '-25',
		            	increment: 25,
		            	allowDecimals: false,
		            	minValue: 0,
		            	maxValue: 10000
		            },
					items: [{
						xtype: 'incrementalfield',
						fieldLabel: 'Min width',
						id: 'minWidth',
						value: cfg.minWidth.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Min height',
						id: 'minHeight',
						value: cfg.minHeight.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Max width',
						id: 'maxWidth',
						value: cfg.maxWidth.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Max height',
						id: 'maxHeight',
						value: cfg.maxHeight.value
					}]
				}]
				//--- End content min/max size fieldset
			}, {
				columnWidth: .02,
				border: false,
				items: [{
					border: false,
					html: "<div><img src='"+ Ext.BLANK_IMAGE_URL +"'/></div>"
				}]
			}, {
				columnWidth: .49,
				border: false,
				items: [{
					//--- Start page margins fieldset
		            xtype: 'uxfieldset',
					title: 'Page margins',
		            height: 140,
		            id: 'fsPageMargins',
		            defaults:{
		            	border:false,
		            	anchor: '-25', 
		            	increment: 5,
		            	maxValue: 1000,
		            	minValue: 0,
		            	allowDecimals: false
		            },
					items: [{
						xtype: 'incrementalfield',
						fieldLabel: 'Top',
						id: 'marginTop',
						value: cfg.marginTop.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Right',
						id: 'marginRight',
						value: cfg.marginRight.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Bottom',
						id: 'marginBottom',
						value: cfg.marginBottom.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Left',
						id: 'marginLeft',
						value: cfg.marginLeft.value
					}]
				
				//--- End page margins fieldset
				}]
			}]
		}, {
			xtype:'uxfieldset',
			title: 'Constraining box',
			id: 'useBox',
			checkboxToggle: true,
			collapsed: !cfg.useBox.value,
		    autoHeight: true,
			//layout: 'column',
			defaults: {
				layout: 'form',
				border: false,
				anchor: '-213'
			},
				
				items: [{
					xtype: 'incrementalfield',
					fieldLabel: 'Width',
					id: 'width',
					value: cfg.width.value
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Height',
					id: 'height',
					value: cfg.height.value
				
			}]				
		          
		}],	
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler: buttonHandlers.apply

	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};


function winDimming() {
	var win = new Ext.ux.Window({
	    title : 'Dimming options',
	    id: 'winDimming',
	    width : 300,
	    height: 180,
	    resizable: false,
	    modal : true,
	    layout : 'fit',
		border: false,
	    items: [new Ext.FormPanel({
	    	layout: 'form',
	    	bodyStyle: 'padding-top: 10px',
	    	defaults: {
	    		anchor: '-20'
	    	},
	    	id: 'frmDimming',
	        items: [{
				xtype: 'colorpicker',
				fieldLabel: 'Color',
				id: 'dimmingColor',
				value: cfg.dimmingColor.value
	
			}, {
				xtype: 'incrementalfield',
				fieldLabel: 'Opacity',
				id: 'dimmingOpacity',
				value: cfg.dimmingOpacity.value,
				increment: .05,
				allowDecimals: true,
				maxValue: 1,
				minValue: 0
			}, {
				xtype: 'incrementalfield',
				fieldLabel: 'Fading duration',
				id: 'dimmingDuration',
				value: cfg.dimmingDuration.value,
				maxValue: 5000,
				minValue: 0,
				increment: 25,
				allowDecimals: false
			}]
		})],
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};

function winSlideshowController() {
	var win = new Ext.ux.Window({
	    title : 'Slideshow Controller options',
		modal: true,
	    id: 'winSlideshowController',
	    width : 400,
	    height: 'auto',
	    x: 60,
	    y: 200,
	    resizable: false,
	    //layout : 'ta',
		border: false,
	    items: [new Ext.FormPanel({
	    	layout: 'column',
	    	bodyStyle: 'padding: 10px',
	    	id: 'frmSlideshowController',
	    	defaults: {
	    		anchor: '-35',
				border: false
	    	},
	        items: [{
				columnWidth: 0.69,
				layout: 'form',
				items: [{
    				xtype: 'uxcombo',
					fieldLabel: 'Position',
					id: 'controlsPosition',
					anchor: '-25',
					store: positionStore,
					displayField: 'value',
	                editable: false,
	                forceSelection: true,
				    mode: 'local',
				    triggerAction: 'all',
				    value: cfg.controlsPosition.value,
	    			listeners: {
		    			beforeselect: function(obj, record) {

							var position = record.data.value,
								relativeTo = Ext.getCmp('controlsRelativeTo').value;
								
							return validateOverlayPositionPair(obj, position, relativeTo);
						}
		    		}	    			
    			}, {
    				xtype: 'uxcombo',
					fieldLabel: 'Relative to',
					id: 'controlsRelativeTo',
					anchor: '-25',
					store: new Ext.data.SimpleStore({
					    fields: ['value'],
					    data : [
					    	['image'],
					    	['viewport']
					    ]
					}),
					displayField: 'value',
	                editable: false,
	                forceSelection: true,
				    mode: 'local',
				    triggerAction: 'all',
				    value: cfg.controlsRelativeTo.value,
	    			listeners: {
		    			beforeselect: function(obj, record) {

							var position = Ext.getCmp('controlsPosition').value,
								relativeTo = record.data.value;
								
							return validateOverlayPositionPair(obj, position, relativeTo);
						}
		    		}    			
    			}, {								
					xtype: 'incrementalfield',
					fieldLabel: 'Opacity',
					id: 'controlsOpacity',
					value: cfg.controlsOpacity.value,
					increment: .05,
					maxValue: 1,
					minValue: 0,
					allowDecimals: true,
					anchor: '-25'
				}, {								
					xtype: 'incrementalfield',
					fieldLabel: 'X offset',
					id: 'controlsOffsetX',
					value: cfg.controlsOffsetX.value,
					increment: 5,
					maxValue: 500,
					minValue: -500,
					allowDecimals: false,
					anchor: '-25'
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Y offset',
					id: 'controlsOffsetY',
					value: cfg.controlsOffsetY.value,
					increment: 5,
					maxValue: 500,
					minValue: -500,
					allowDecimals: false,
					anchor: '-25'
				}, {
					xtype: 'uxcheckbox',
					id: 'controlsHideOnMouseOut',
					hideLabel: true,
					boxLabel: 'Hide controls on mouse out',
					checked: cfg.controlsHideOnMouseOut.value
				}]
			}, {
				columnWidth: .31,
				layout: 'form',
				bodyStyle: 'border-left: 1px solid silver; padding-left: 3px',
				items: [{
    				xtype: 'label',
    				text: 'Buttons:'
    			}, {
					xtype: 'uxcheckbox',
					id: 'buttonPrevious',
					boxLabel: 'Previous',
					hideLabel: true,
					checked: cfg.buttonPrevious.value
				}, {
					xtype: 'uxcheckbox',
					id: 'buttonPlayPause',
					boxLabel: 'Play / Pause',
					hideLabel: true,
					checked: cfg.buttonPlayPause.value
				}, {
					xtype: 'uxcheckbox',
					id: 'buttonNext',
					boxLabel: 'Next',
					hideLabel: true,
					checked: cfg.buttonNext.value
				}, {
					xtype: 'uxcheckbox',
					id: 'buttonMove',
					boxLabel: 'Move',
					hideLabel: true,
					checked: cfg.buttonMove.value
				}, {
					xtype: 'uxcheckbox',
					id: 'buttonFullExpand',
					boxLabel: 'Full expand',
					hideLabel: true,
					checked: cfg.buttonFullExpand.value
				}, {
					xtype: 'uxcheckbox',
					id: 'buttonClose',
					boxLabel: 'Close',
					hideLabel: true,
					checked: cfg.buttonClose.value
				}]	
			}]
		})],
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};


function winStyleEditor(id) {
	function parseStyle(s) {
		var i, nameValue, style = {}, arr = s.split(';'), key, val;
		for (i = 0; i < arr.length; i++) {
			nameValue = arr[i].split(':');
			if (nameValue.length == 2) {
				key = trim(nameValue[0]);
				val = trim(nameValue[1]);
				switch (key) {
					case 'font-family':
					case 'font-size':
						val = val.replace(' !important', '')
						break;
				}
				style[key] = val;
			}
		}
		return style;
	}
	function concatenateStyles() {
		var s = '', val, key;
		win.cascade(function() {
			if (!this.disabled && this.name) {
				key = this.name;
				switch (this.name) {
					case 'font-family':
					case 'font-size':
						val = this.value + ' !important';
						break;
					case 'font-weight':
						val = this.pressed ? 'bold' : null;
						break;
					case 'font-style':
						val = this.pressed ? 'italic' : null;
						break;
					case 'text-align-left':
					case 'text-align-center':
					case 'text-align-right':
					case 'text-align-justify':
						if (this.pressed) {
							key = 'text-align';
							val = this.name.replace('text-align-', '');
						} else {
							val = null;
						}
						break;
					default:
						val = this.value;
				
				}
				if (val) s += '\t'+ key +': '+ val +';';
			}
		});
		Ext.getCmp(id).setValue(s);
	}
	var style = parseStyle(cfg[id].value);
	
	var borderStyleStore = new Ext.data.SimpleStore({
	    fields: ['value'],
	    data : [
	    	['solid'],
	    	['dashed'],
	    	['dotted'],
	    	['inset'],
	    	['outset']
	    ]
	});
	var win = new Ext.ux.Window({
	    title : 'Style editor',
	    id: 'win'+ id,
	    width : 500,
	    height: 'auto',
	    resizable: false,
		modal: true,
	    x: 50,
	    y: 70,
		bodyStyle: 'background: white; padding: 5px',
	    items: [{
	    	xtype: 'hidden',
	    	id: id,
	    	value: cfg[id].value
	    }, {
	    	xtype: 'uxfieldset',
	    	autoHeight: true,
	    	title: 'Background',
	    	layout: 'column',
	    	items: [{
	    		columnWidth: .5,
	    		border: false,
	    		items: [{
	    			xtype: 'uxcheckbox',
	    			boxLabel: 'Colour',
	    			checked: (style['background-color'] != null),
	    			listeners: {
	    				check: function(obj, checked) {
	    					Ext.getCmp(id +'backgroundColor').setDisabled(!checked);
	    				}
	    			}
	    		}]
	    	}, {
	    		columnWidth: .5,
	    		border: false,
	    		items: [{
	    			xtype: 'colorpicker',
					hideLabel: true,
					value: style['background-color'] || '#FFFFFF',
					disabled: (style['background-color'] == null),
					id: id +'backgroundColor',
					name: 'background-color'
	    		}]
	    	}]
	    }, {
	    	xtype: 'uxfieldset',
	    	title: 'Text',
	    	autoHeight: true,
			layout: 'table',
	    	layoutConfig: {
	    		columns: 4
	    	},
	    	items: [{
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Colour',
    			checked: (style['color'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					Ext.getCmp(id +'color').setDisabled(!checked);
    				}
    			}
	    	}, {
	    		xtype: 'colorpicker',
	    		hideLabel: true,
				value: style['color'] || '#333333',
				disabled: (style['color'] == null),
				id: id +'color',
				name: 'color',
				width: 110
	    	}, {
	    		xtype: 'label',
	    		text: 'Style'
	    		/*xtype: 'uxcheckbox',
	    		boxLabel: 'Style',
    			checked: (style['font-weight'] != null && style['font-style'] == null),
    			listeners: {
    				check: function(obj, checked) {
    					Ext.getCmp(id +'font-weight').setDisabled(!checked);
    					Ext.getCmp(id +'font-style').setDisabled(!checked);
    				}
    			}*/
	    	}, {
				layout: 'table',
				border: false,
				layoutConfig: {
					columns: 2
				},
				items: [{
	    			xtype: 'button',
	    			iconCls: 'text_bold',
	    			enableToggle: true,	    			
					pressed: (style['font-weight'] != null),
	    			id: id +'font-weight',
	    			name: 'font-weight'
				}, {
		    		xtype: 'button',
		    		iconCls: 'text_italic',
		    		enableToggle: true,
					pressed: (style['font-style'] != null),
		    		id: id +'font-style',
		    		name: 'font-style'
		    	}]
	    	}, {
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Font',
    			checked: (style['font-family'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					Ext.getCmp(id +'fontFamily').setDisabled(!checked);
    				}
    			}
	    	}, {
				xtype: 'uxcombo',
				width: 110,
				hideLabel: true,
				width: 110,
				store: new Ext.data.SimpleStore({
				    fields: ['value'],
				    data : [
				    	['sans-serif'],
				    	['serif'],
				    	['monospace']
				    ]
				}),
				displayField: 'value',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: style['font-family'] || 'sans-serif',
				disabled: (style['font-family'] == null),
				id: id +'fontFamily',
				name: 'font-family'
	    	}, {
	    	
	    		xtype: 'label',
	    		text: 'Align'
	    	}, {
				layout: 'table',
				border: false,
				layoutConfig: {
					columns: 4
				},
				items: [{
	    			xtype: 'button',
	    			iconCls: 'text_align_left',
	    			enableToggle: true,
					pressed: (style['text-align'] == 'left'),
	    			id: id +'text-align-left',
	    			name: 'text-align-left',
	    			handler: function() {
	    				if (this.pressed) {
	    					Ext.getCmp(id +'text-align-center').toggle(false);
	    					Ext.getCmp(id +'text-align-right').toggle(false);
	    					Ext.getCmp(id +'text-align-justify').toggle(false);
	    				}
	    			}	
				}, {
		    		xtype: 'button',
		    		iconCls: 'text_align_center',
		    		enableToggle: true,
					pressed: (style['text-align'] == 'center'),
	    			id: id +'text-align-center',
	    			name: 'text-align-center',
	    			handler: function() {
	    				if (this.pressed) {
	    					Ext.getCmp(id +'text-align-left').toggle(false);
	    					Ext.getCmp(id +'text-align-right').toggle(false);
	    					Ext.getCmp(id +'text-align-justify').toggle(false);
	    				}
	    			}	
		    	}, {
		    		xtype: 'button',
		    		iconCls: 'text_align_right',
		    		enableToggle: true,
					pressed: (style['text-align'] == 'right'),
	    			id: id +'text-align-right',
	    			name: 'text-align-right',
	    			handler: function() {
	    				if (this.pressed) {
	    					Ext.getCmp(id +'text-align-left').toggle(false);
	    					Ext.getCmp(id +'text-align-center').toggle(false);
	    					Ext.getCmp(id +'text-align-justify').toggle(false);
	    				}
	    			}
		    	}, {
		    		xtype: 'button',
		    		iconCls: 'text_align_justify',
		    		enableToggle: true,
					pressed: (style['text-align'] == 'justify'),
	    			id: id +'text-align-justify',
	    			name: 'text-align-justify',
	    			handler: function() {
	    				if (this.pressed) {
	    					Ext.getCmp(id +'text-align-left').toggle(false);
	    					Ext.getCmp(id +'text-align-center').toggle(false);
	    					Ext.getCmp(id +'text-align-right').toggle(false);
	    				}
	    			}	
		    	}]
	    	}, {
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Size',
    			checked: (style['font-size'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					Ext.getCmp(id +'fontSize').setDisabled(!checked);
    				}
    			}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'pt',
				width: 110,
				maxValue: 96,
				minValue: 0,
				allowDecimals: false,
				value: style['font-size'] || '10pt',
				disabled: (style['font-size'] == null),
				id: id +'fontSize',
				name: 'font-size'
	    	}]
	    }, {
	    	xtype: 'uxfieldset',
	    	title: 'Padding, borders and margin',
	    	autoHeight: true,
			layout: 'table',
	    	layoutConfig: {
	    		columns: 6
	    	},
	    	defaults: {
	    		border: false
	    	},
	    	items: [{
	    		html: '&nbsp;'
	    	}, {
	    		html: 'General / Top',
	    		colspan: 2
	    	}, {
	    		html: 'Right'
	    	}, {
	    		html: 'Bottom'
	    	}, {
	    		html: 'Left'
	    	}, {
	    		
	    		
	    		
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Padding',
    			checked: (style['padding'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					var toggleBtn = Ext.getCmp(id +'padding-toggle'),
    						disableSides = !checked || (checked && toggleBtn.pressed);
    					Ext.getCmp(id +'padding').setDisabled(!checked);
    					toggleBtn.setDisabled(!checked);
    					Ext.getCmp(id +'padding-right').setDisabled(disableSides);
    					Ext.getCmp(id +'padding-bottom').setDisabled(disableSides);
    					Ext.getCmp(id +'padding-left').setDisabled(disableSides);
    				}
    			}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['padding'] || '2px',
				disabled: (style['padding'] == null),
				id: id +'padding',
				name: 'padding', 
				listeners: {
					valid: function() {
						if (!Ext.getCmp(id +'padding-toggle').pressed) return;
    					var children = [id +'padding-right', id +'padding-bottom', id +'padding-left'];
    						pThis = this;
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setValue(pThis.value);    						
    					});						
					}
				}
	    	}, {
	    		xtype: 'button',
	    		iconCls: 'link',
	    		enableToggle: true,
	    		pressed: (style['padding-left'] == null),
	    		id: id +'padding-toggle',
				disabled: (style['padding'] == null),
	    		listeners: {
    				toggle: function(obj) {
    					var children = [id +'padding-right', id +'padding-bottom', id +'padding-left'];
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setDisabled(obj.pressed);
    						cmp.setValue(Ext.getCmp(id +'padding').value);    						
    					});
    				}	    		
	    		}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['padding-right'] || '2px',
				disabled: (style['padding-left'] == null),
				id: id +'padding-right',
				name: 'padding-right'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['padding-bottom'] || '2px',
				disabled: (style['padding-left'] == null),
				id: id +'padding-bottom',
				name: 'padding-bottom'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['padding-left'] || '2px',
				disabled: (style['padding-left'] == null),
				id: id +'padding-left',
				name: 'padding-left'
	    	}, {
	    	
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Border width',
    			checked: (style['border-width'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					var toggleBtn = Ext.getCmp(id +'border-width-toggle'),
    						disableSides = !checked || (checked && toggleBtn.pressed);
    					Ext.getCmp(id +'border-width').setDisabled(!checked);
    					toggleBtn.setDisabled(!checked);
    					Ext.getCmp(id +'border-right-width').setDisabled(disableSides);
    					Ext.getCmp(id +'border-bottom-width').setDisabled(disableSides);
    					Ext.getCmp(id +'border-left-width').setDisabled(disableSides);
    				}
    			}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['border-width'] || '1px',
				disabled: (style['border-width'] == null),
				id: id +'border-width',
				name: 'border-width', 
				listeners: {
					valid: function() {
						if (!Ext.getCmp(id +'border-width-toggle').pressed) return;
    					var children = [id +'border-right-width', id +'border-bottom-width', id +'border-left-width'];
    						pThis = this;
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setValue(pThis.value);    						
    					});						
					}
				}
	    	}, {
	    		xtype: 'button',
	    		iconCls: 'link',
	    		enableToggle: true,
	    		pressed: (style['border-left-width'] == null),
	    		id: id +'border-width-toggle',
				disabled: (style['border-width'] == null),
	    		listeners: {
    				toggle: function(obj) {
    					var children = [id +'border-right-width', id +'border-bottom-width', id +'border-left-width'];
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setDisabled(obj.pressed);
    						cmp.setValue(Ext.getCmp(id +'border-width').value);    						
    					});
    				}	    		
	    		}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['border-right-width'] || '1px',
				disabled: (style['border-left-width'] == null),
				id: id +'border-right-width',
				name: 'border-right-width'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['border-bottom-width'] || '1px',
				disabled: (style['border-left-width'] == null),
				id: id +'border-bottom-width',
				name: 'border-bottom-width'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['border-left-width'] || '1px',
				disabled: (style['border-left-width'] == null),
				id: id +'border-left-width',
				name: 'border-left-width'
	    	}, {
	    	
	    	
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Border colour',
    			checked: (style['border-color'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					var toggleBtn = Ext.getCmp(id +'border-color-toggle'),
    						disableSides = !checked || (checked && toggleBtn.pressed);
    					Ext.getCmp(id +'border-color').setDisabled(!checked);
    					toggleBtn.setDisabled(!checked);
    					Ext.getCmp(id +'border-right-color').setDisabled(disableSides);
    					Ext.getCmp(id +'border-bottom-color').setDisabled(disableSides);
    					Ext.getCmp(id +'border-left-color').setDisabled(disableSides);
    				}
    			}
	    	}, {
	    		xtype: 'colorpicker',
	    		hideLabel: true,
	    		value: style['border-color'] || '#FFFFFF',
				disabled: (style['border-color'] == null),
				id: id +'border-color',
				name: 'border-color', 
	    		width: 78,
				listeners: {
					valid: function() {
						if (!Ext.getCmp(id +'border-color-toggle').pressed) return;
    					var children = [id +'border-right-color', id +'border-bottom-color', id +'border-left-color'];
    						pThis = this;
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setValue(pThis.value);    						
    					});						
					}
				}
	    	}, {
	    		xtype: 'button',
	    		iconCls: 'link',
	    		enableToggle: true,
	    		pressed: (style['border-left-color'] == null),
	    		id: id +'border-color-toggle',
				disabled: (style['border-color'] == null),
	    		listeners: {
    				toggle: function(obj) {
    					var children = [id +'border-right-color', id +'border-bottom-color', id +'border-left-color'];
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setDisabled(obj.pressed);
    						cmp.setValue(Ext.getCmp(id +'border-color').value);    						
    					});
    				}	    		
	    		}
	    	}, {
	    		xtype: 'colorpicker',
	    		hideLabel: true,
	    		width: 78,
	    		value: style['border-right-color'] || '#FFFFFF',
				disabled: (style['border-left-color'] == null),
				id: id +'border-right-color',
				name: 'border-right-color'
	    	}, {
	    		xtype: 'colorpicker',
	    		hideLabel: true,
	    		width: 78,
	    		value: style['border-bottom-color'] || '#FFFFFF',
				disabled: (style['border-left-color'] == null),
				id: id +'border-bottom-color',
				name: 'border-bottom-color'
	    	}, {
	    		xtype: 'colorpicker',
	    		hideLabel: true,
	    		width: 78,
	    		value: style['border-left-color'] || '#FFFFFF',
				disabled: (style['border-left-color'] == null),
				id: id +'border-left-color',
				name: 'border-left-color'
	    	}, {
	    	
	    	
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Border style',
    			checked: (style['border-style'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					var toggleBtn = Ext.getCmp(id +'border-style-toggle'),
    						disableSides = !checked || (checked && toggleBtn.pressed);
    					Ext.getCmp(id +'border-style').setDisabled(!checked);
    					toggleBtn.setDisabled(!checked);
    					Ext.getCmp(id +'border-right-style').setDisabled(disableSides);
    					Ext.getCmp(id +'border-bottom-style').setDisabled(disableSides);
    					Ext.getCmp(id +'border-left-style').setDisabled(disableSides);
    				}
    			}
	    	}, {
	    		xtype: 'uxcombo',
				hideLabel: true,
				width: 78,
				store: borderStyleStore,
				displayField: 'value',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: style['border-style'] || 'solid',
				disabled: (style['border-style'] == null),
				id: id +'border-style',
				name: 'border-style', 
				listeners: {
					valid: function() {
						if (!Ext.getCmp(id +'border-style-toggle').pressed) return;
    					var children = [id +'border-right-style', id +'border-bottom-style', 
    							id +'border-left-style'];
    						pThis = this;
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setValue(pThis.value);    						
    					});						
					}
				}
	    	}, {
	    		xtype: 'button',
	    		iconCls: 'link',
	    		enableToggle: true,
	    		pressed: (style['border-left-style'] == null),
	    		id: id +'border-style-toggle',
				disabled: (style['border-style'] == null),
	    		listeners: {
    				toggle: function(obj) {
    					var children = [id +'border-right-style', 
    							id +'border-bottom-style', id +'border-left-style'];
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setDisabled(obj.pressed);
    						cmp.setValue(Ext.getCmp(id +'border-style').value);    						
    					});
    				}	    		
	    		}
	    	}, {
	    		xtype: 'uxcombo',
				hideLabel: true,
				width: 78,
				store: borderStyleStore,
				displayField: 'value',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: style['border-right-style'] || 'solid',
				disabled: (style['border-left-style'] == null),
				id: id +'border-right-style',
				name: 'border-right-style'
	    	}, {
	    		xtype: 'uxcombo',
				hideLabel: true,
				width: 78,
				store: borderStyleStore,
				displayField: 'value',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: style['border-bottom-style'] || 'solid',
				disabled: (style['border-left-style'] == null),
				id: id +'border-bottom-style',
				name: 'border-bottom-style'
	    	}, {
	    		xtype: 'uxcombo',
				hideLabel: true,
				width: 78,
				store: borderStyleStore,
				displayField: 'value',
                editable: false,
                forceSelection: true,
			    mode: 'local',
			    triggerAction: 'all',
			    value: style['border-left-style'] || 'solid',
				disabled: (style['border-left-style'] == null),
				id: id +'border-left-style',
				name: 'border-left-style'
	    	}, {
	    	
	    	
	    	
	    		xtype: 'uxcheckbox',
	    		boxLabel: 'Margin',
    			checked: (style['margin'] != null),
    			listeners: {
    				check: function(obj, checked) {
    					var toggleBtn = Ext.getCmp(id +'margin-toggle'),
    						disableSides = !checked || (checked && toggleBtn.pressed);
    					Ext.getCmp(id +'margin').setDisabled(!checked);
    					toggleBtn.setDisabled(!checked);
    					Ext.getCmp(id +'margin-right').setDisabled(disableSides);
    					Ext.getCmp(id +'margin-bottom').setDisabled(disableSides);
    					Ext.getCmp(id +'margin-left').setDisabled(disableSides);
    				}
    			}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['margin'] || '2px',
				disabled: (style['margin'] == null),
				id: id +'margin',
				name: 'margin', 
				listeners: {
					valid: function() {
						if (!Ext.getCmp(id +'margin-toggle').pressed) return;
    					var children = [id +'margin-right', id +'margin-bottom', id +'margin-left'];
    						pThis = this;
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setValue(pThis.value);    						
    					});						
					}
				}
	    	}, {
	    		xtype: 'button',
	    		iconCls: 'link',
	    		enableToggle: true,
	    		pressed: (style['margin-left'] == null),
	    		id: id +'margin-toggle',
				disabled: (style['margin'] == null),
	    		listeners: {
    				toggle: function(obj) {
    					var children = [id +'margin-right', id +'margin-bottom', id +'margin-left'];
    					Ext.each(children, function() {
    						var cmp = Ext.getCmp(this);
    						cmp.setDisabled(obj.pressed);
    						cmp.setValue(Ext.getCmp(id +'margin').value);    						
    					});
    				}	    		
	    		}
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['margin-right'] || '2px',
				disabled: (style['margin-left'] == null),
				id: id +'margin-right',
				name: 'margin-right'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['margin-bottom'] || '2px',
				disabled: (style['margin-left'] == null),
				id: id +'margin-bottom',
				name: 'margin-bottom'
	    	}, {
	    		xtype: 'incrementalfield',
	    		unit: 'px',
				width: 78,
				maxValue: 30,
				minValue: 0,
				allowDecimals: false,
				value: style['margin-left'] || '2px',
				disabled: (style['margin-left'] == null),
				id: id +'margin-left',
				name: 'margin-left'
	    	}]
	    }],
	    buttons: [{
	        text     : 'OK',
	        handler  : function() {
	        	concatenateStyles();
	        	update(id);
				this.ownerCt.close();
			}
	    }, {
	        text     : 'Apply',
	        //disabled: true,
	        handler  : function() {
	        	concatenateStyles();
				//this.setDisabled(true);
				update(id);
			}
	    }, {
	        text     : 'Cancel',
	        handler  : function() {
				this.ownerCt.close();
			}
	    }]
	});
	win.show();
};

function winThumbnail() {
	var win = new Ext.ux.Window({
	    title : 'Thumbnail border',
	    id: 'winThumbnail',
	    width : 270,
	    height: 'auto',
		modal: true,
	    x: 160,
	    //y: 230,
	    resizable: false,
	    //layout : 'fit',
		border: false,
	    items: [new Ext.FormPanel({
	    	layout: 'form',
	    	bodyStyle: 'padding: 10px 5px 5px 5px',
	    	id: 'frmThumbnail',
	    	items: [{
				xtype: 'uxfieldset',
				title: 'Inner border',
				defaults: {
		    		anchor: '-35'
		    	},
		        height: 'auto',
				items: [{
					xtype: 'colorpicker',
					fieldLabel: 'Color',
					id: 'borderColor',
					value: cfg.borderColor.value
				}, {
					xtype: 'colorpicker',
					fieldLabel: 'Hover color',
					id: 'borderHoverColor',
					value: cfg.borderHoverColor.value
				}, {
					xtype: 'colorpicker',
					fieldLabel: 'Active color',
					id: 'borderActiveColor',
					value: cfg.borderActiveColor.value
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Width',
					id: 'borderWidth',
					value: cfg.borderWidth.value,
					minValue: 0,
					allowDecimals: false,
					maxValue: 15
				}]
			}, {
				xtype: 'uxfieldset',
				title: 'Outer box for galleries',
				disabled: !cfg.enableGallery.value,
				defaults: {
		    		anchor: '-35'
		    	},
		        height: 'auto',
				items: [{
					xtype: 'incrementalfield',
					fieldLabel: 'Width',
					id: 'thumbBoxWidth',
					value: cfg.thumbBoxWidth.value,
					minValue: 50,
					allowDecimals: false,
					increment: 5,
					maxValue: 500
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Height',
					id: 'thumbBoxHeight',
					value: cfg.thumbBoxHeight.value,
					minValue: 40,
					allowDecimals: false,
					increment: 5,
					maxValue: 500
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Border width',
					id: 'thumbBoxBorderWidth',
					value: cfg.thumbBoxBorderWidth.value,
					minValue: 0,
					allowDecimals: false,
					increment: 1,
					maxValue: 20
				}, {
					xtype: 'colorpicker',
					fieldLabel: 'Border color',
					id: 'thumbBoxBorderColor',
					value: cfg.thumbBoxBorderColor.value
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Margin',
					id: 'thumbBoxMargin',
					value: cfg.thumbBoxMargin.value,
					minValue: 0,
					allowDecimals: false,
					increment: 1,
					maxValue: 20
				}, {
					xtype: 'colorpicker',
					fieldLabel: 'Background color',
					id: 'thumbBoxBackground',
					value: cfg.thumbBoxBackground.value
				}]
			}]
		})],
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};

function winOutline() {
	var win = new Ext.ux.Window({
	    title : 'Border and outline',
	    width : 500,
	    height: 400,
	    modal : true,
	    x: 20,
	    resizable: false,
		
	    //layout : 'fit',
		//border: false,
		id: 'outlineWindow',
		bodyStyle: 'background: white; padding: 5px',
		autoScroll: true,
		items: [{
			layout: 'column',
			border: false,
			items: [{
				columnWidth: .47,
				border: false,
				items: [{
					//--- Start content border fieldset
		            xtype: 'uxfieldset',
					title: 'Image CSS border',
		            //layout: 'column',
		            height: 110,
		            id: 'fsContentBorder',
		            defaults:{
		            	border:false,
		            	anchor: '-25'
		            },
					items: [{
						xtype: 'colorpicker',
						fieldLabel: 'Color',
						id: 'contentBorderColor',
						value: cfg.contentBorderColor.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Width',
						id: 'contentBorderWidth',
						value: cfg.contentBorderWidth.value,
						maxValue: 15,
						minValue: 0,
						allowDecimals: false
					}/*, {
						xtype: 'button',
					    minWidth: global.buttonWidth,
						id: 'btnContentBorderCopy',
						text: 'Use thumbnail hover style',
						anchor: null,
						handler: function() {
							Ext.getCmp('contentBorderColor').setValue(cfg.borderHoverColor.value);
							Ext.getCmp('contentBorderWidth').setValue(cfg.borderWidth.value);
						}
					}*/]
				}]
				//--- End content border fieldset
			}, {
				columnWidth: .06,
				border: false,
				items: [{
					border: false,
					html: "<img src='/ext/resources/images/default/silkicons/arrow_right.png' "
						+ " onclick=\"Ext.getCmp('outlineColor').setValue(Ext.getCmp('contentBorderColor').getValue())\""
						+ " title='Use same colour'"
						+ " style='cursor: hand; cursor:pointer; margin: 26px 0 0 4px' />"
				}]
			}, {
				//--- Start graphic outline fieldset
				columnWidth: .47,
				border: false,
				items: [{
		            xtype:'uxfieldset',
					title: 'Graphic outline',
		            height: 110,
		            id: 'useOutline',
					checkboxToggle: true,
					collapsed: !cfg.useOutline.value,
		    		listeners: {
			    		disable: function(obj) {
			    			Ext.getCmp('fsOutlineEffects').setDisabled(1);
			    		},
			    		enable: function(obj) {
			    			Ext.getCmp('fsOutlineEffects').setDisabled(0);
			    		}
			    	},
		            defaults:{
		            	border:false,
		            	anchor: '-25'
		            },
					items: [{
						xtype: 'colorpicker',
						fieldLabel: 'Color',
						id: 'outlineColor',
						value: cfg.outlineColor.value
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Width',
						id: 'outlineWidth',
						value: cfg.outlineWidth.value,
						maxValue: 15,
						minValue: 0,
						allowDecimals: false
					}, {
						xtype: 'incrementalfield',
						fieldLabel: 'Corner radius',
						id: 'outlineCornerRadius',
						value: cfg.outlineCornerRadius.value,
						maxValue: 15,
						minValue: 0,
						allowDecimals: false
					}]
					//--- End graphic outline fieldset
				}]
			}]
		}, { 
			//--- Start Effects fieldset
            xtype:'uxfieldset',
            id: 'fsOutlineEffects',
			//disabled: !cfg.useOutline.value,
			title: 'Graphic outline effects',
			height:'auto',
			defaults: {
				border: false,
				baseCls: 'x-panel-silverline'
			},
			items: [{
	            layout: 'column',
	            id: 'pnlDropShadow',
	            defaults:{
	            	border:false				
	            },
	            items : [{
					columnWidth: .33,
					id: 'colDropShadowLabel',
					items: [{
						xtype: 'uxcheckbox',
						id: 'dropShadow',
						boxLabel: 'Drop shadow',
						checked: cfg.dropShadow.value,
						listeners: {
							check: function() {
								Ext.getCmp('dropShadowOpacity').setDisabled(!this.checked);
								Ext.getCmp('dropShadowSize').setDisabled(!this.checked);
								Ext.getCmp('dropShadowOffsetX').setDisabled(!this.checked);
								Ext.getCmp('dropShadowOffsetY').setDisabled(!this.checked);
							}
						}
					}]
				
				}, {
					columnWidth:.33,
					layout:'form',
					labelWidth: 50,
					id: 'colDropShadow1',
					defaults: {
						xtype: 'incrementalfield',
						anchor: '-25'
					},
				    items :[{
						fieldLabel: 'Opacity',
						id: 'dropShadowOpacity',
						value: cfg.dropShadowOpacity.value,
						maxValue: 1,
						minValue: 0,
						increment: .05,
						disabled: !cfg.dropShadow.value,
						allowDecimals: true
					}, {
						fieldLabel: 'X offset',
						id: 'dropShadowOffsetX',
						value: cfg.dropShadowOffsetX.value,
						maxValue: 15,
						minValue: -15,
						allowDecimals: false,
						disabled: !cfg.dropShadow.value
					}]
				}, {
					columnWidth: .33,
					layout:'form',
					labelWidth: 50,
					id: 'colDropShadow2',
					defaults: {
						xtype: 'incrementalfield',
						anchor: '-20'
					},
					items: [{
						fieldLabel: 'Size',
						id: 'dropShadowSize',
						value: cfg.dropShadowSize.value,
						maxValue: 50,
						minValue: 0,
						allowDecimals: false,
						disabled: !cfg.dropShadow.value
					}, {
						fieldLabel: 'Y offset',
						id: 'dropShadowOffsetY',
						value: cfg.dropShadowOffsetY.value,
						maxValue: 15,
						minValue: -15,
						allowDecimals: false,
						disabled: !cfg.dropShadow.value
					}]
				}]
			}, {
				id: 'pnlGloss',
				items: [{
					xtype: 'uxcheckbox',
					id: 'outlineGloss',
					boxLabel: 'Glossy 3D for dark outlines',
					checked: cfg.outlineGloss.value
				}]
			}, {
	            layout: 'column',
	            id: 'pnlStroke',
	            defaults:{
	            	border:false
	            },
	            baseCls: 'x-panel-silverline-last',
				items : [{
					columnWidth: .33,
					id: 'colStrokeLabel',
					items: [{
						xtype: 'uxcheckbox',
						id: 'outlineStroke',
						boxLabel: 'Stroke outside',
						checked: cfg.outlineStroke.value,
						listeners: {
							check: function() {
								Ext.getCmp('outlineStrokeColor').setDisabled(!this.checked);
								Ext.getCmp('outlineStrokeWidth').setDisabled(!this.checked);
							}
						}
					}]
				
				}, {
					columnWidth:.33,
					layout:'form',
					labelWidth: 50,
					id: 'colStroke1',
					defaults: {
						anchor: '-25'
					},
				    items :[{
						xtype: 'colorpicker',
						fieldLabel: 'Color',
						id: 'outlineStrokeColor',
						value: cfg.outlineStrokeColor.value,
						disabled: !cfg.outlineStroke.value
					}]
				}, {
					columnWidth: .33,
					layout:'form',
					labelWidth: 50,
					id: 'colStroke2',
					defaults: {
						xtype: 'incrementalfield',
						anchor: '-20'
					},
					items: [{
						fieldLabel: 'Width',
						id: 'outlineStrokeWidth',
						value: cfg.outlineStrokeWidth.value,
						maxValue: 15,
						minValue: 0,
						allowDecimals: true,
						disabled: !cfg.outlineStroke.value,
						increment: .5
					}]
				}]
			}] 
			//-- End effects fieldset
		}
		],	
	    buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler: buttonHandlers.apply

	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
	});
	win.show();
};

function winPageStyles() {
	var win = new Ext.ux.Window({
        title    : 'Page styles',
        id: 'winPageStyles',
        closable : true,
        width    : 400,
        height: 400,
		modal: true,
        plain: true,
        layout: 'fit',
	    resizable: false,
        items    : [{
        	xtype: 'textarea',
        	id: 'pageStyles',
        	value: cfg.pageStyles.value
        }],
        buttons: [{
	        text     : 'OK',
	        handler  : buttonHandlers.ok
	    }, {
	        text     : 'Apply',
	        disabled: true,
	        handler  : buttonHandlers.apply
	    }, {
	        text     : 'Cancel',
	        handler  : buttonHandlers.cancel
	    }]
    });

    win.show();
};

var thumbsRevision = 0;
function winImageManager() {
	if (!hs.page) hs.page = hs.getPageSize();
	var win = new Ext.ux.Window({
	    title : 'Image manager',
		modal: true,
	    id: 'winImageManager',
	    width : 640,
		plain: true,
	    height: hs.page.height,
		stateful: false,
	    resizable: false,
		border: false,
		layout: 'fit',
		items: [{
			layout: 'table',
			bodyStyle: 'padding: 5px',
			layoutConfig: {
				columns: 3
			},
			items: [{
				xtype: 'fieldset',
				id: 'fsThumbs',
				title: 'Thumbnail options',
				height: 110,
				width: 220,
				items: [{
					xtype: 'incrementalfield',
					fieldLabel: 'Width',
					id: 'thumbWidth',
					value: cfg.thumbWidth.value,				
	            	anchor: '-25', 
	            	increment: 5,
	            	maxValue: 500,
	            	minValue: 1,
	            	allowDecimals: false
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Height',
					id: 'thumbHeight',
					value: cfg.thumbHeight.value,				
	            	anchor: '-25', 
	            	increment: 5,
	            	maxValue: 500,
	            	minValue: 1,
	            	allowDecimals: false
				}, {
					xtype: 'uxcheckbox',
					id: 'clipThumbs',
		    		boxLabel: 'Clip to fit',
		    		hideLabel: true,
		    		checked: cfg.clipThumbs.value
				}]	
			}, {
				xtype: 'fieldset',
				width: 220,
				id: 'fsLarge',
				title: 'Large image options',
				height: 110,
				items: [{
					xtype: 'incrementalfield',
					fieldLabel: 'Width',
					id: 'largeWidth',
					value: cfg.largeWidth.value,				
	            	anchor: '-25', 
	            	increment: 5,
	            	maxValue: 5000,
	            	minValue: 1,
	            	allowDecimals: false
				}, {
					xtype: 'incrementalfield',
					fieldLabel: 'Height',
					id: 'largeHeight',
					value: cfg.largeHeight.value,				
	            	anchor: '-25', 
	            	increment: 5,
	            	maxValue: 5000,
	            	minValue: 1,
	            	allowDecimals: false
				}]
			}, {
				xtype: 'panel',
				border: false,
				items: [{
					xtype: 'button',
		    		minWidth: global.buttonWidth,
					text: 'Update uploaded images',
					handler: function() {
						var iframe;
						for (var i = 0; i < window.frames.length; i++ ) {
							if (window.frames[i].name == 'uploadIframe') {
								iframe = window.frames[i];
							}
						}
		
						iframe.location.href = 'upload.php'+ getImageOptionsQuery();
					}
				}]
			}, {
				layout: 'fit',
				colspan: 3,
				border: false,
				height: hs.page.height - 195,
				items: [new Ext.ux.IFrameComponent({
		       		id: 'uploadIframe',
	       			url: 'upload.php' + (cfg.userdir.value ? '?userdir='+ cfg.userdir.value : '')
				})]
			}]
		}],
        buttons: [{
	        text     : 'OK',
	        handler  : function() {
				//$.extend(cfg.captionData.value, captionData);
				cfg.captionData.value = $.extend({}, captionData);
				//captionData = {};
				buttonHandlers.ok.call(this);
				thumbsRevision++;
				tpl.writeHTML();
				saveState();
			}
	    }, {
	        text     : 'Apply',
	        disabled: true,
			id: 'winImageManagerApply',
	        handler  : function() {
				//$.extend(cfg.captionData.value, captionData);
				cfg.captionData.value = $.extend({}, captionData);
				//captionData = {};
				buttonHandlers.apply.call(this);
				tpl.writeHTML();
				saveState();				
			}
	    }, {
	        text     : 'Cancel',
	        handler  : function() {
				captionData = {};
				buttonHandlers.cancel.call(this);
			}
	    }]
	});
	win.show();
};
function winViewCode(button, aTab) {
	//refresh();
	var hs = preview.hs;
	if (!hs.page) hs.page = hs.getPageSize();
	var win = new Ext.ux.Window({
        title    : 'Current code',
        closable : true,
        width    : 800,
        height: hs.page.height,
        constrain: true,
        modal: true,
        plain    : true,
        layout      : 'fit',
        items    : [new Ext.TabPanel({
            activeTab : aTab,
        	defaults  : {
				autoScroll : true
			},
            items     : [{
				title: 'HTML',
				iconCls: 'html',
                html: '<pre>'+ code.html.replace(/</g, '&lt;').replace(/>/g, '&gt;') +'</pre>'
            }, {
            	title: 'CSS',
            	iconCls: 'css',
            	html: '<pre>'+ code.css +'</pre>'
            }, {
            	title: 'JavaScript',
            	iconCls: 'script',
            	html: '<pre>'+ code.js.replace(/</g, '&lt;').replace(/>/g, '&gt;') +'</pre>'
            }]
        })],
        buttons: [{
            text     : 'Close',
            handler  : function(){
                win.hide();
            }
        }]
    });

    win.show(Ext.get(button));
};

function winSplash() {
	//refresh();
	var win = Ext.getCmp('winSplash') || new Ext.ux.Window({
        title    : 'Highslide Editor',
		id: 'winSplash',
        closable : true,
        width    : '90%',
        height: 'auto',
        constrain: true,
		closeAction: 'hide',
        modal: true,
        plain    : true,
        //layout      : 'fit',
		border: false,
        items    : [{
			//autoLoad: 'welcome.php'
			contentEl: 'splashcontent'
		}/*, {
			xtype: 'checkbox',
			boxLabel: 'Show this screen on startup',
			checked: Ext.state.Manager.get('showsplash', true),
			listeners: {
				check: function(obj, checked) {
					Ext.state.Manager.set('showsplash', checked);					
				}
			}
		}*/
		]
		/*,
        buttons: [{
            text     : 'Close',
            handler  : function(){
                win.close();
            }
        }]*/
    });
    win.show();
};

var hasAcceptedLicense = false;
function winLicense() {
	//refresh();
	var win = new Ext.ux.Window({
        title    : 'License',
		id: 'winLicense',
        closable : true,
        width    : 680,
        height: 500,
        constrain: true,
		closeAction: 'hide',
		autoScroll: true,
        modal: true,
        plain    : true,
        //layout      : 'fit',
		border: false,
        items    : [{
			bodyStyle: 'padding: 10px',
			autoLoad: '/licence-section.inc'
		}, {
			layout: 'column',
			defaults: {
				border: false,
				bodyStyle: 'padding: 10px'
			},
			items: [{
				columnWidth: .7,
				html: 'Do you accept the license conditions above?'
			}, {
				columWidth: .15,
				items: [{
					xtype: 'button',
					text: 'Yes',
					minWidth: global.buttonWidth,
					handler: function() {
						hasAcceptedLicense = true;
						win.close();
						winPublish();
					}
				}]
			}, {
				columWidth: .15,
				items: [{
					xtype: 'button',
					text: 'No',
					minWidth: global.buttonWidth,
					handler: function() {
						win.close();
					}
				}]
			}]
			
		}]/*,
        buttons: [{
            text     : 'Close',
            handler  : function(){
                win.close();
            }
        }]*/
    });

    win.show();
};

function winPublish() {
	if (!hasAcceptedLicense) {
		winLicense();
		return false;
	}
	var win = new Ext.ux.Window({
        title    : 'Publish',
		cls: 'window-publish',
        closable : true,
        width    : 680,
        height: 'auto',
        constrain: true,
        modal: true,
        plain    : true,
        //layout      : 'fit',
		autoScroll: true,
        items    : [{
			defaults: {
				border: false,
				bodyStyle: 'padding: 5px'
			},
			
			items: [{
				layout: 'table',
				defaults: {
					border: false
				},
				layoutConfig: {
					columns: 2
				},
				items: [{
					xtype: 'panel',
					colspan: 2,
					html: '<h2>Step 1</h2>'
				}, {
					xtype: 'panel',
					html: '<p>You have two options for uploading the Highslide files to your web server.</p>'+
						'<ul>\n'+
						'<li style="margin: 5px 0 5px 20px; list-style-type: disc">'+
						'<a href="javascript:winFTP()">Upload your files via FTP</a> directly from this web application, or...</li>'+
						'<li style="margin: 5px 0 5px 20px; list-style-type: disc">'+
						'<a href="javascript:publish(\'zip\')">Download a zip archive</a> and unzip it to the root of your web folder, '+
						'then upload the files using an FTP program of your choice.</li>\n'+
						'</ul>'
				}, {
					xtype: 'form',
					id: 'frmPublish',
					standardSubmit: true,
					items: [{
						xtype: 'hidden',
						name: 'html',
						value: code.html
					}, {
						xtype: 'hidden',
						name: 'css',
						value: code.css
					}, {
						xtype: 'hidden',
						name: 'js',
						value: code.js
					}, {
						xtype: 'hidden',
						name: 'config',
						value: $.toJSON(getConfig())
					}, {
						xtype: 'hidden',
						name: 'link',
						value: buildLink()
					}, {
						xtype: 'hidden',
						name: 'outline',
						value: preview.hs.outlineType
					}, {
						xtype: 'hidden',
						name: 'mode',
						value: 'zip'
					}]
				}]
			}, {
				xtype: 'panel',
				html: '<h2>Step 2</h2><p>Copy this code and paste it between the &lt;head&gt; and &lt;/head&gt; tags of your webpage:</p>'+
					'<pre class="copycode">'+ code.headHtml.replace(/</g, '&lt;').replace(/>/g, '&gt;') +'</pre>'
			}, {
				xtype: 'panel',
				html: '<h2>Step 3</h2><p>Copy this code and paste it between the &lt;body&gt; and &lt;/body&gt; '+
					'tags of your webpage. Change the paths in the code below to match the locations of your files.</p>'+
					'<pre class="copycode">'+ code.bodyHtml.replace(/</g, '&lt;').replace(/>/g, '&gt;') +'</pre>'
			}]
		}],
        buttons: [{
            text     : 'Close',
            handler  : function(){
                win.hide();
            }
        }]
    });

    win.show();
};


function winFTP() {
	var win = new Ext.ux.Window({
	    title : 'FTP',
		modal: true,
	    id: 'winFTP',
	    width : 430,
	    height: 400,
	    resizable: false,
		border: false,
	    items: [new Ext.FormPanel({
	    	layout: 'column',
	    	bodyStyle: 'padding-top: 10px',
	    	id: 'frmFTP',
	    	defaults: {
	    		layout: 'form',
				border: false
	    	},
	        items: [{
				columnWidth: .7,
				defaults: {
					anchor: '-35'
				},
				items: [{
					xtype: 'textfield',
					id: 'ftpServer',
					name: 'ftpServer',
					fieldLabel: 'Server',
					allowBlank: false,
					value: ftpSettings.server
				}, {
					xtype: 'textfield',
					id: 'ftpUserName',
					name: 'ftpUserName',
					fieldLabel: 'Username',
					value: ftpSettings.userName
				}, {
					xtype: 'textfield',
					id: 'ftpUserPass',
					name: 'ftpUserPass',
					fieldLabel: 'Password',
					inputType: 'password',
					value: ftpSettings.userPass
				}, {
					xtype: 'textfield',
					id: 'ftpUploadDir',
					name: 'ftpUploadDir',
					fieldLabel: 'Upload directory',
					value: ftpSettings.uploadDir
				}]
			}, {
				columnWidth: .3,
				bodyStyle: 'padding-top: 50px',
				items: [{
					xtype: 'uxcheckbox',
					id: 'ftpRememberPass',
					name: 'ftpRememberPass',
					fieldLabel: 'Remember',
					boxLabel: 'Remember',
					hideLabel: true,
					checked: ftpSettings.rememberPass
				}]
			}, {
				xtype: 'hidden',
				id: 'ftpWarned',
				name: 'ftpWarned',
				value: false
			}],
			buttons: [{
				text: 'Test connection',
				handler: function() {
					saveFtpSettings();
					var frmFTP = Ext.getCmp('frmFTP').el.dom.getElementsByTagName('form')[0];

					if (!frmFTP.hasSubmitted) { // get values from frmPublish
						var frmPublish = Ext.getCmp('frmPublish').el.dom.getElementsByTagName('form')[0];
						$.each(frmPublish.elements, function() {
							$(frmFTP).append($(this).clone());
						});
						frmFTP.hasSubmitted = true;
					}
					frmFTP.mode.value = 'ftptest';
					frmFTP.target = 'publishIframe';
					frmFTP.action = 'publish.php'
					
					frmFTP.submit();
				}
			}, {
				text: 'Publish',
				handler: function() {
					saveFtpSettings();
					var frmFTP = Ext.getCmp('frmFTP').el.dom.getElementsByTagName('form')[0];

					if (!frmFTP.hasSubmitted) { // get values from frmPublish
						var frmPublish = Ext.getCmp('frmPublish').el.dom.getElementsByTagName('form')[0];
						$.each(frmPublish.elements, function() {
							$(frmFTP).append($(this).clone());
						});
						frmFTP.hasSubmitted = true;
					}
					frmFTP.mode.value = 'ftp';
					frmFTP.target = 'publishIframe';
					frmFTP.action = 'publish.php'
					frmFTP.submit();
				}
			}]
			
		}), new Ext.ux.IFrameComponent({
	       	id: 'publishIframe',
	       	url: 'publish.php'
		})],
        buttons: [{
            text     : 'Close',
            handler  : function(){
				saveFtpSettings();
                win.close();
            }
        }]
	});
	win.show();
};

function publish (mode) {
	var form = Ext.getCmp('frmPublish').el.dom.getElementsByTagName('form')[0];
	form.mode.value = mode;
	form.action = 'publish.php';
	form.submit();
};

var buttonHandlers = {
	ok: function() {
		buttonHandlers.apply.call(this);
		this.ownerCt.close();
	},
	apply: function() {
		var collection = [];
		this.ownerCt.cascade(function() {
			if (cfg[this.id]) collection.push(this.id);
		});
		this.setDisabled(true);
		update(collection);	
	},
	cancel: function() {
		this.ownerCt.close();
	}
};

var loading = {
	show: function() {
		var d = this.iDoc = window.frames['preview'].document;
		this.hs = window.frames['preview'].hs;
		this.a = this.hs.anchors.all[0];
		
		closeAll();
		
		var mask = this.mask = d.createElement('div');
		mask.style.position = 'absolute';
		mask.style.left = 0;
		mask.style.top = 0;
		mask.style.width = document.getElementById('preview').style.width;
		mask.style.height = document.getElementById('preview').style.height;
		mask.onclick = function() { loading.hide() };
		
		var lbl = this.lbl = d.createElement('a');
		lbl.className = 'highslide-loading';
		lbl.href = 'javascript:;';
		this.hs.setStyles(lbl, {
			position: 'absolute',
			opacity: this.hs.loadingOpacity
		});
		
		mask.appendChild(lbl);		
		d.body.appendChild (mask);
		this.update();
		
	}, 
	
	setPosition: function() {
		var pos = this.hs.getPosition(this.a);
		this.lbl.style.left = (pos.x + (this.a.offsetWidth - this.lbl.offsetWidth) / 2) +'px';
		this.lbl.style.top = (pos.y + (this.a.offsetHeight - this.lbl.offsetHeight) / 2) +'px';
	},
	
	update: function() {
		if (!Ext.getCmp('loadingPreview').checked) return;
		this.lbl.innerHTML = this.hs.lang.loadingText;
		this.lbl.title = this.hs.lang.loadingTitle;
		this.setPosition();
	},
	
	hide: function() {
		this.hs.discardElement(this.mask);
		Ext.getCmp('loadingPreview').setValue(false);
	}
};

// language array store
var langStore = new Ext.data.SimpleStore({
    fields: ['code', 'name'],
    data : languages
});

var presetStore = new Ext.data.SimpleStore({
	fields: ['value', 'name'],
	data: [
		['white-rounded-outline', 'White rounded outline'],
		['white-10px', 'White border and drop shadow'],
		['no-border', 'No border, simple close button'],
		['no-outline', 'No outline, coloured CSS borders'],
		['gallery-white', 'Gallery: Basic white'],
		['gallery-dark', 'Gallery: Basic dark'],
		['mini-gallery', 'Gallery: Mini gallery'],
		['controls-in-heading', 'Gallery: Small controls in heading'],
		['gallery-floating-caption', 'Gallery: Floating caption'],
		['gallery-in-box', 'Gallery: In constraining box'],
		['gallery-vertical-strip', 'Gallery: Vertical thumbstrip, no border'],
		['gallery-horizontal-strip', 'Gallery: Horizontal thumbstrip, white style'],
		['gallery-thumbstrip-above', 'Gallery: Box with thumbstrip above image'],
		['gallery-floating-thumbs', 'Gallery: Floating thumbstrip to the right'],
		['html-white', 'HTML popups']
	]
});

var presets = {
	'white-rounded-outline': {

	},
	'white-10px':  {
		contentBorderWidth: 10,
		outlineWidth: 0,
		outlineCornerRadius: 0,
		dropShadowSize: 5,
		captionStyles: '	padding: 0px;	padding-right: 2px;	padding-bottom: 10px;	padding-left: 10px;'
		
	},
	'no-border': {
		contentBorderWidth: 0,
		outlineWidth: 0,
		outlineCornerRadius: 0,
		dropShadowSize: 5,
		captionStyles: '	background-color: #DDDDDD;	padding: 5px;	border-width: 1px;	border-right-width: 0px;	border-bottom-width: 1px;	border-left-width: 0px;	border-color: #FFFFFF; border-style: solid;',
		useCloseButton: true
	},
	'no-outline': {
		contentBorderColor: '#008000',
		useOutline: false,
		captionStyles: '	padding: 5px;	border-width: 0px;	border-right-width: 2px;	border-bottom-width: 2px;	border-left-width: 2px;	border-color: #008000;	border-style: solid;'
	},
	'gallery-white': {
		enableGallery: true,	
		hideThumbOnExpand: false,
		alignment: 'center',
		controlsOffsetY: -15,
		enableThumbstrip: false
	},
	'gallery-dark': {
		popupBackground: '#111111',
		hideThumbOnExpand: false,
		contentBorderColor: '#111111',
		alignment: 'center',
		outlineColor: '#111111',
		outlineWidth: 7,
		outlineCornerRadius: 2,
		dropShadowSize: 2,
		outlineGloss: true,
		captionStyles: '	color: #CCCCCC;	padding: 2px;',
		enableGallery: true,
		controlsPreset: 'large-dark',
		controlsOpacity: 0.6,
		controlsOffsetY: -15,
		enableThumbstrip: false
	},
	'mini-gallery': {
		applyDimming: true,
		hideThumbOnExpand: false,
		dimmingOpacity: 0.65,
		alignment: 'center',
		enableGallery: true,
		controlsOffsetY: -15,
		numberPosition: 'caption',
		enableThumbstrip: false,
		minigallery: 'first'
	},
	'controls-in-heading':  {
		hideThumbOnExpand: false,
		alignment: 'center',
		useCaption: false,
		useHeading: true,
		headingStyles: '	color: #666666;	font-weight: bold;	padding: 2px;',
		enableGallery: true,
		controlsPreset: 'controls-in-heading',
		controlsPosition: 'top right',
		controlsOffsetX: 1,
		controlsOffsetY: -22,
		controlsHideOnMouseOut: false,
		enableThumbstrip: false,
		fixedControls: false,
		buttonMove: false,
		creditsPosition: 'bottom right'
	},
	'gallery-floating-caption': {
		//"preset": "no-border",
		"popupBackground": "#111111", 
		"contentBorderWidth": 0, 
		"outlineWidth": 0, 
		"outlineCornerRadius": 0, 
		"dropShadowSize": 5, 
		"applyDimming": true, 
		"dimmingOpacity": 0.75, 
		"alignment": "center", 
		"captionStyles": "\tcolor: #FFFFFF;\tfont-weight: bold;\tpadding: 5px;\tpadding-right: 0px;\tpadding-bottom: 0px;\tpadding-left: 0px;", 
		"captionPosition": "below outside", 
		"enableGallery": true, 
		"controlsPreset": "large-dark", 
		"controlsOpacity": 0.6, 
		"controlsOffsetY": -15, 
		"enableThumbstrip": false
	}, 
	'gallery-in-box': {
		"applyDimming": true, 
		"dimmingOpacity": 0.75, 
		"hideThumbOnExpand": false, 
		"alignment": "center", 
		"useBox": true, 
		"enableGallery": true, 
		"controlsOpacity": 1, 
		"controlsOffsetY": -15, 
		"enableThumbstrip": false
	},
	'gallery-vertical-strip': {
		"popupBackground": "#111111", 
		"contentBorderWidth": 0, 
		"outlineWidth": 0, 
		"outlineCornerRadius": 0, 
		"dropShadowSize": 5, 
		"applyDimming": true, 
		"dimmingOpacity": 0.75, 
		"hideThumbOnExpand": false, 
		"alignment": "center", 
		"marginLeft": 100,
		marginBottom: 70, 
		"captionStyles": "\tcolor: #FFFFFF;\tfont-weight: bold;\ttext-align: center;\tpadding: 5px;\tpadding-right: 0px;\tpadding-bottom: 0px;\tpadding-left: 0px;", 
		"captionPosition": "below outside", 
		"useCloseButton": true, 
		"enableGallery": true, 
		"controlsPreset": "text-controls", 
		"controlsRelativeTo": "viewport", 
		"controlsOpacity": 1, 
		"controlsOffsetX": 50, 
		"controlsOffsetY": -10, 
		"controlsHideOnMouseOut": false, 
		"thumbstripMode": "vertical", 
		"thumbstripPosition": "middle left", 
		"fixedControls": false, 
		"buttonMove": false, 
		"buttonClose": false
	},
	'gallery-horizontal-strip': {
		"applyDimming": true, 
		"dimmingOpacity": 0.75, 
		"hideThumbOnExpand": false, 
		"alignment": "center", 
		"marginBottom": 105,
		"enableGallery": true, 
		"controlsPreset": "text-controls", 
		"controlsRelativeTo": "viewport", 
		"controlsOpacity": 1, 
		"controlsOffsetY": -60, 
		"controlsHideOnMouseOut": false, 
		"numberPosition": "caption", 
		"fixedControls": false, 
		"buttonMove": false
	},
	'gallery-thumbstrip-above': {
		"popupBackground": "#111111", 
		"contentBorderColor": "#111111", 
		"outlineColor": "#111111", 
		"outlineWidth": 7, 
		"outlineCornerRadius": 2, 
		"dropShadowSize": 2, 
		"outlineGloss": true, 
		"hideThumbOnExpand": false, 
		"alignment": "center", 
		"useBox": true, 
		"captionStyles": "\tcolor: #CCCCCC;\tpadding: 2px;", 
		"enableGallery": true, 
		"controlsPreset": "large-dark", 
		"controlsOpacity": 0.6, 
		"controlsOffsetY": -15, 
		"numberPosition": "caption", 
		"thumbstripPosition": "above", 
		"thumbstripRelativeTo": "image",
		"minigallery": 'first'
	},
	'gallery-floating-thumbs': {
		"hideThumbOnExpand": false, 
		"alignment": "center", 
		"useBox": true, 
		"captionSource": "none", 
		useHeading: true,
		creditsPosition: 'bottom left',
		"enableGallery": true, 
		"controlsPosition": "top right", 
		"controlsOffsetX": 190, 
		"controlsOffsetY": -60, 
		"controlsHideOnMouseOut": false, 
		"numberPosition": "heading", 
		"thumbstripMode": "float", 
		"thumbstripPosition": "rightpanel", 
		"thumbstripRelativeTo": "image",
		fixedControls: false,
		minigallery: 'first'
	}, 
	'html-white': {
		creditsPosition: 'bottom left',
		"htmlInline": true, 
		"htmlAjax": true, 
		"htmlIframe": true, 
		"htmlFlash": true
	}
}

var easingStore = new Ext.data.SimpleStore({
	fields: ['name'],
	data: [
		['easeInQuad'],
		['linearTween'],
		['easeInCirc'],
		['easeInBack / easeOutBack']
	]
});

var positionData = [
    	['above'],
    	['top left'],
    	['top'],
    	['top center'],
    	['top right'],
    	['leftpanel'],
    	['left'],
    	['middle left'],
    	['middle center'],
    	['middle right'],
    	['right'],
    	['rightpanel'],
    	['bottom left'],
    	['bottom'],
    	['bottom center'],
    	['bottom right'],
    	['below']
    ];

var positionStore = new Ext.data.SimpleStore({
    fields: ['value'],
    data : positionData
})

function  validateOverlayPositionPair(obj, position, relativeTo) {
	if (relativeTo == 'viewport' &&
			/(above|leftpanel|rightpanel|below)/.test(position)) {
		obj.collapse();
		alert ('Invalid position: "'+ position +' '+ relativeTo+'".\n'+
			'Can\'t place the overlay outside the viewport');
		
		return false;
	}
}

var captionData = {};
var captionPositionData = $.merge([], positionData);
captionPositionData.push(['below outside']);
var captionPositionStore = new Ext.data.SimpleStore({
    fields: ['value'],
	data: captionPositionData
})

var controlsStore = new Ext.data.SimpleStore({
	fields: ['value', 'name'],
	data: [
		['none', 'None (disable controller)'],
		['default', 'Large white buttons'],
		['controls-in-heading', 'Small white buttons'],
		['large-dark', 'Large dark buttons'],
		['text-controls', 'White buttons with text']
	]
});

var optionsHistory = {
	store: [],
	cursor: 0,
	save: function(values) {
		this.store.push(values);
		this.cursor = this.store.length - 1;
		//Ext.getCmp('undo').setDisabled(false);
	},
	go: function(steps) {
		this.cursor += steps;
		var obj = this.store[this.cursor];
		if (obj) {	
			for (var x in obj) {
				var cmp = Ext.getCmp(x);
				if (cmp) {
					cmp.setRawValue(obj[x]);
					update([x]);
				}
			}
		} else {			
			// Ext.getCmp('undo').setDisabled(true);
		}
	}
}

function trim(s) {
	return s.replace(/^\s+|\s+$/g, '')
}

function sortImagesArray() {
	var sorting = cfg.sorting.value;
	//console.log(sorting);
	if (typeof sorting == 'string') { // file, file-desc, date or date-desc
		// Sort the images array
		images.sort(function(a, b) {

			// by date
			if (sorting == 'date')				return a.date - b.date ? 1 : -1;
			else if (sorting == 'date-desc')	return b.date - a.date? 1 : -1;

			// by filename			
			if (sorting == 'file')				return a.file.toLowerCase() > b.file.toLowerCase() ? 1 : -1;
			else if (sorting == 'file-desc')	return b.file.toLowerCase() > a.file.toLowerCase() ? 1 : -1;
			
		});
		

	} else if (typeof sorting == 'object') { // it's an array of manually sorted images
		var newImages = [];
		for (var i = 0; i < sorting.length; i++) {
			for (var j = images.length - 1; j >= 0; j--) {
				if (sorting[i] == images[j].file) {
					// add it to newImages
					newImages.push(images[j]);
					// remove it from images
					images.splice(j, 1);
				}
				//break;
			}
		}
		// If there are images left in the images array, they are after the custom sorting
		// was last applied. Append them to the end of newImages
		newImages = newImages.concat(images);
		
		images = newImages;
	}
}