var styleContainer;
var code = { css: '', html: '', js: ''};



var cfg = {
	lang: {
		value: 'en',
		write: ['js'],
		reOpen: true,
		abovePreset: true,
		help: {
			title: 'Language',
			text: 'Set the language for small texts and tooltips.',
			api: 'hs.lang'
		}
	},
	preset: {
		value: 'white-rounded-outline',
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Load example',
			text: 'Load a pre-configured example into the preview.'
		}
	},
	thumbnailExplanation: {
		value: 'none',
		write: ['css', 'html'],
		help: {
			title: 'Thumbnail explanation label',
			text: 'Display an "Enlarge picture" text below the thumbnail. This doesn\'t apply to the gallery thumbnails in the preview, only the single image example.'
		}
	},
	borderColor: {
		value: '#D0D0D0',
		write: ['css'],
		help: {
			title: 'Thumbnail border colour',
			text: 'The colour of the thumbnail\'s CSS border in the normal state. It is set in the <code>.highslide img</code> CSS rule.'
		}
	},
	borderHoverColor: {
		value: '#A0A0A0',
		write: ['css'],
		help: {
			title: 'Thumbnail border hover colour',
			text: 'The colour of the thumbnail\'s CSS border when the mouse cursor is over it. The colour is set in the <code>highslide:hover img</code> CSS rule.'
		}
	},
	borderActiveColor: {
		value: '#808080',
		write: ['css'],
		help: {
			title: 'Active thumbnail border colour',
			text: 'The colour of the thumbnail\'s CSS border when it\'s content is expanded. It requires that the active thumbnail is visible. The colour is set in the <code>.highslide-active-anchor img</code> CSS rule.'
		}
	},
	borderWidth: {
		value: 1,
		write: ['css'],
		help: {
			title: 'Thumbnail border width',
			text: 'The pixel width of the thumbnail\'s border. It is set in the <code>.highslide img</code> CSS rule.'
		}
	},
	thumbBoxWidth: {
		value: 106,
		write: ['css'],
		help: {
			title: 'Thumbnail box width',
			text: 'The pixel width of the outer box surrounding the thumbnails in gallery mode.'
		}
	},
	thumbBoxHeight: {
		value: 106,
		write: ['css'],
		help: {
			title: 'Thumbnail box height',
			text: 'The pixel height of the outer box surrounding the thumbnails in gallery mode.'
		}
	},
	thumbBoxBorderWidth: {
		value: 1,
		write: ['css'],
		help: {
			title: 'Thumbnail box border width',
			text: 'The border width of the outer box surrounding the thumbnails in gallery mode.'
		}
	},
	thumbBoxMargin: {
		value: 2,
		write: ['css'],
		help: {
			title: 'Thumbnail box margin',
			text: 'The pixel margin of the outer box surrounding the thumbnails in gallery mode. This setting dictates the distance between each thumbnail. The distance equals twice the margin of a single box.'
		}
	},
	thumbBoxBorderColor: {
		value: '#D0D0D0',
		write: ['css'],
		help: {
			title: 'Thumbnail box border color',
			text: 'The border color of the outer box surrounding the thumbnails in gallery mode.'
		}
	},
	thumbBoxBackground: {
		value: '#EDEDED',
		write: ['css'],
		help: {
			title: 'Thumbnail box background color',
			text: 'The background color of the outer box surrounding the thumbnails in gallery mode.'
		}
	},
	pageStyles: {
		value: '/*\n\tAdd styles here for a better view of how your\n\tsetup will look in your actual page\n*/\nbody {\n\tbackground: white;\n}',
		write: ['css']
	},

	loadingStyle: {
		value: 'White: icon and text',
		write: ['css', 'js'],
		help: {
			title: 'Loading label style',
			text: 'Check the "Preview" checkbox to see how your choice affects the label. The styles are all set by changing the background, padding and colour properties in the <code>.highslide-loading</code> CSS rule.'
		}
	},

	popupBackground: {
		value: '#FFFFFF',
		write: ['css'],
		help: {
			title: 'Popup background colour',
			text: 'The background of the entire wrapper. This colour is hidden if a background colour is applied to the caption and heading of an image popup. It is set in the <code>.highslide-wrapper</code> and <code>.highslide-outline</code> CSS rules.'
		}
	},
	contentBorderColor: {
		value: '#FFFFFF',
		write: ['css'],
		help: {
			title: 'Image CSS border colour',
			text: 'The colour of the CSS border around the full size image itself. On the contrary to graphic outlines, this border is always visible during animation. It only surrounds the image or HTML content itself, not captions and headings. The colour is set in the <code>.highslide-image</code> CSS rule.'
		}
	},
	contentBorderWidth: {
		value: 2,
		write: ['css'],
		reOpen: true,
		help: {
			title: 'Image CSS border width',
			text: 'The width of the CSS border around the full size image itself. When using a graphic outline with rounded corners or special effects, it is a good idea to use a CSS border with the same colour as the outline. The animation will look smoother then, as the CSS border is visible during the animation, and the outline is normally not. The width is set in the <code>.highslide-image</code> CSS rule.'
		}
	},
	useOutline: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Use graphic outline',
			text: 'Use a PNG graphic for advanced border effects like rounded corners and drop shadow.',
			api: 'hs.outlineType'
		}
	},
	outlineColor: {
		value: '#FFFFFF',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Graphic outline colour',
			text: 'The colour of the PNG graphic border of the popup. To copy the colour from the CSS border, click the small arrow.',
			api: 'hs.outlineType'
		}
	},
	outlineWidth: {
		value: 5,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Graphic outline width',
			text: 'The width of the graphic outline border, not including drop shadow and other effects. If you use rounded corners, make sure the width is great enough so that there is enough room for the rounding radius.',
			api: 'hs.outlineType'
		}
	},
	outlineCornerRadius: {
		value: 5,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Graphic outline corner radius',
			text: 'The rounding of the graphic outline border, not including drop shadow and other effects. Make sure the width of the graphic outline is great enough so that there is enough room for the rounded corner.',
			api: 'hs.outlineType'
		}
	},
	dropShadow: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Drop shadow',
			text: 'Add a drop shadow effect to the popup. The drop shadow is created in the graphic outline.',
			api: 'hs.outlineType'
		}
	},
	dropShadowOpacity: {
		value: .75,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Drop shadow opacity',
			text: 'The opacity of the drop shadow, ranging from 0 (transparent) to 1 (fully opaque).',
			api: 'hs.outlineType'
		}
	},
	dropShadowSize: {
		value: 3,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Drop shadow size',
			text: 'The size or radius of the drop shadow. 0 gives a sharply defined drop shadow, and increasing values gives an increasing blur and size.',
			api: 'hs.outlineType'
		}
	},
	dropShadowOffsetX: {
		value: 1,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Drop shadow X offset',
			text: 'The horisontal displacement of the drop shadow compared to the popup. A value of 3 creates a drop shadow 3 pixels to the right  of the popup, indicating a light source to the left.',
			api: 'hs.outlineType'
		}
	},
	dropShadowOffsetY: {
		value: 3,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Drop shadow Y offset',
			text: 'The vertical displacement of the drop shadow compared to the popup. A value of 3 creates a drop shadow 3 pixels below the image, indicating a light source above it.',
			api: 'hs.outlineType'
		}
	},
	outlineGloss: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Glossy 3D for dark outlines',
			text: 'Add a glossy 3D effect to the outline. The effect looks best with a dark outline colour and an outline width of 7 pixels or greater.',
			api: 'hs.outlineType'
		}
	},
	outlineStroke: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Stroke outside',
			text: 'Add a line of the specified colour and width outside the graphic outline colour.',
			api: 'hs.outlineType'
		}
	},
	outlineStrokeColor: {
		value: '#000000',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Outside stroke colour',
			text: 'The colour of the simple line outside the graphic outline colour.',
			api: 'hs.outlineType'
		}
	},
	outlineStrokeWidth: {
		value: 1,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Outside stroke width',
			text: 'The width in pixels of the simple line outside the graphic outline colour.',
			api: 'hs.outlineType'
		}
	},

	applyDimming: {
		value: false,
		write: ['html', 'js', 'css'],
		reOpen: true,
		help: {
			title: 'Apply page dimming mask',
			text: 'Add a semitransparent mask above the page behind the Highslide popup.',
			api: 'hs.dimmingOpacity, hs.dimmingDuration'
		}
	},
	dimmingColor: {
		value: '#000000',
		write: ['js', 'css'],
		reOpen: false,
		help: {
			title: 'Dimming mask color',
			text: 'The color of the dimming mask. This color is defined in the <code>.highslide-dimming</code> CSS rule.'
		}
	},
	dimmingOpacity: {
		value: .5,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Dimming mask opacity',
			text: 'The opacity of the dimming mask.',
			api: 'hs.dimmingOpacity'
		}
	},
	dimmingDuration: {
		value: 50,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Dimming mask opacity',
			text: 'The duration of fading in and out of the dimming mask.',
			api: 'hs.dimmingDuration'
		}
	},

	/* Behavior tab */
	easing: {
		value: 'easeInQuad',
		write: ['js', 'html'],
		reOpen: true,
		help: {
			title: 'Easing',
			text: 'The easing or animation style. It is implemented using a commonly used set of equations originally authored by Robert Penner.',
			api: 'hs.easing'
		}
	},
	hideThumbOnExpand: {
		value: true,
		write: ['css', 'js'],
		reOpen: true,
		help: {
			title: 'Hide thumbnail on expand',
			text: 'When true, the full image expands from the thumbnail which is hidden, giving the impression that the thumbnail itself expands to the full size. If false, the full image is faded in when expanded. In gallery mode, the thumbnail is never hidden because it looks bad with crossfading.',
			api: 'hs.fadeInOut'
		}
	},

	expandDuration: {
		value: 250,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Open duration',
			text: 'Defines in milliseconds how long the opening effect should last.',
			api: 'hs.expandDuration'
		}
	},
	restoreDuration: {
		value: 250,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Close duration',
			text: 'Defines in milliseconds how long the closing effect should last.',
			api: 'hs.restoreDuration'
		}
	},
	outlineWhileAnimating: {
		value: 2,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Show outline during animation',
			text: 'Show the graphic outline during the opening and closing of the popup.',
			api: 'hs.outlineWhileAnimating'
		}
	},
	alignment: {
		value: 'auto',
		write: ['html', 'js'],
		reOpen: true,
		help: {
			title: 'Alignment',
			text: 'Alignment of the popup in the viewport.',
			api: 'hs.align, hs.anchor, hs.targetX, hs.targetY'
		}
	},
	allowSizeReduction: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Allow size reduction',
			text: 'Allow the image to shrink to fit a small viewport. If the viewport is small, the expanded pictures by default shrink to fit the area. This behaviour can be avoided by setting hs.allowSizeReduction to false. When the picture is shrinked, an icon appears in the lower right corner that the user can click to see the full size image.',
			api: 'hs.allowSizeReduction'
		}
	},
	padToMinWidth: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Pad to minimum width',
			text: 'On narrow images, pad the width of the expander to the minWidth to make room for the caption. The minimum width can be set in the "Advanced align" window.',
			api: 'hs.padToMinWidth'
		}
	},
	marginTop: {
		value: 15,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Margin top',
			text: 'The top margin of the Highslide popup relative to the viewport',
			api: 'hs.marginTop'
		}
	},
	marginRight: {
		value: 15,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Margin right',
			text: 'The right margin of the Highslide popup relative to the viewport',
			api: 'hs.marginRight'
		}
	},
	marginBottom: {
		value: 15,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Margin bottom',
			text: 'The bottom margin of the Highslide popup relative to the viewport',
			api: 'hs.marginBottom'
		}
	},
	marginLeft: {
		value: 15,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Margin left',
			text: 'The left margin of the Highslide popup relative to the viewport',
			api: 'hs.marginLeft'
		}
	},
	minWidth: {
		value: 200,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Minimum width',
			text: 'The minimum width of the popup',
			api: 'hs.minWidth'
		}
	},
	minHeight: {
		value: 200,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Minimum height',
			text: 'The minimum height of the popup',
			api: 'hs.minHeight'
		}
	},
	maxWidth: {
		value: 0,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Maximum width',
			text: 'The maximum width of the popup',
			api: 'hs.maxWidth'
		}
	},
	maxHeight: {
		value: 0,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Maximum height',
			text: 'The maximum height of the popup',
			api: 'hs.maxHeight'
		}
	},
	useBox: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Use constraining box',
			text: 'Use a constraining box so that the borders, captions etc. don\'t change size from image to image.',
			api: 'hs.useBox'
		}
	},
	width: {
		value: 600,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Constraining box width',
			text: 'The width of the constraining box',
			api: 'hs.useBox, hs.width'
		}
	},
	height: {
		value: 400,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Constraining box height',
			text: 'The height of the constraining box',
			api: 'hs.useBox, hs.height'
		}
	},


	allowMultipleInstances: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Allow multiple instances',
			text: 'Allow more than one popup expander to be open at the same time.',
			api: 'hs.allowMultipleInstances'
		}
	},
	blockRightClick: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Block right click',
			text: 'Block right clicking and context menu on the full size image.',
			api: 'hs.blockRightClick'
		}
	},
	enableKeyListener: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Enable shortcut keys',
			text: 'Listen for keystrokes like left and right arrow to control Highslide.',
			api: 'hs.enableKeyListener'
		}
	},
	numberOfImagesToPreload: {
		value: 5,
		write: ['js'],
		reOpen: false,
		help: {
			title: 'Number of images to preload',
			text: 'Highslide by default preloads the first 5 images in your page.',
			api: 'hs.numberOfImagesToPreload'
		}
	},

	/* The Overlays tab */
	useCaption: {
		value: true,
		write: ['js', 'html'],
		reOpen: true,
		help: {
			title: 'Use caption',
			text: 'Display a caption below the image or in any other position'
		}
	},
	captionSource: {
		value: 'a.title',
		write: ['js', 'html'],
		reOpen: true,
		help: {
			title: 'Caption source',
			text: 'Where to grab the caption text in the HTML code. Please note that when using "Show first thumbnail only" in a gallery, only Anchor\'s title or Subsequent div will give the expected result.',
			api: '<a href="/tutorial#adding-caption">Captions</a>, hs.captionEval'
		}
	},
	captionStyles: {
		value: '\tpadding:2px;', // start with tab, no newlines here due to state manager
		write: ['css'],
		reOpen: true
	},
	captionPosition: {
		value: 'below',
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'Caption position',
			text: 'Where to position the caption',
			api: 'hs.captionOverlay'
		}
	},
	captionRelativeTo: {
		value: 'image',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Caption relative to',
			text: 'Position the caption relative to the image or the viewport. The viewport option doesn\'t support <em>above</em> or <em>below</em> positions.',
			api: 'hs.captionOverlay'
		}
	},
	useHeading: {
		value: false,
		write: ['js', 'html'],
		reOpen: true,
		help: {
			title: 'Use heading',
			text: 'Display a heading above the image or in any other position.'
		}
	},
	headingSource: {
		value: 'thumb.title',
		write: ['js', 'html'],
		reOpen: true,
		help: {
			title: 'Caption source',
			text: 'Where to grab the heading text in the HTML code. Please note that when using "Show first thumbnail only" in a gallery, only Anchor\'s title or Subsequent div will give the expected result.',
			api: '<a href="/tutorial#adding-caption">Captions</a>, hs.headingEval'
		}
	},
	headingStyles: {
		value: '\tpadding:2px;\tfont-weight:bold;', // start with tab, no newlines here due to state manager
		write: ['css'],
		reOpen: true
	},
	headingPosition: {
		value: 'above',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Heading position',
			text: 'Where to position the heading',
			api: 'hs.headingOverlay'
		}
	},
	headingRelativeTo: {
		value: 'image',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Heading relative to',
			text: 'Position the heading relative to the image or the viewport. The viewport option doesn\'t support <em>above</em> or <em>below</em> positions.',
			api: 'hs.headingOverlay'
		}
	},
	dragByHeading: {
		value: true,
		write: ['css', 'js'],
		reOpen: true,
		help: {
			title: 'Allow drag by heading',
			text: 'Allow the image or HTML popup to be dragged by it\'s heading.',
			api: 'hs.dragByHeading'
		}
	},
	useCloseButton: {
		value: false,
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'Use a close button',
			text: 'Overlays a simple close button. This is a simpler alternative to the full navigation controls offered in gallery mode.',
			api: 'hs.registerOverlay'
		}
	},
	closeButtonStyle: {
		value: 'macstyle',
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'Close button style',
			text: 'Overlays a simple close button. This is a simpler alternative to the full navigation controls offered in gallery mode.',
			api: 'hs.registerOverlay'
		}
	},
	showCredits: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Show credits',
			text: 'Whether to overlay a "Powered by..." label on the popup. There are no license considerations in this; both commercial and non-commercial users can freely remove the credits label.',
			api: 'hs.showCredits'
		}
	},
	creditsPosition: {
		value: 'top left',
		write: ['html', 'js'],
		reOpen: true,
		help: {
			title: 'Credits position',
			text: 'Where to display the credits label relative to the popup.',
			api: 'hs.creditsPosition'
		}
	},

	/* Gallery tab */
	enableGallery: {
		value: false,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Enable gallery',
			text: 'Enable gallery options for displaying multiple images. This option by default removes the single image from the preview, but this image can be brought back in the Advanced window under Behavior.'
		}
	},
	userdir: {
		value: session_id,
		write: [],
		abovePreset: true
	},
	captionData: {
		value: {},
		write: [],
		reOpen: false,
		abovePreset: true
	},
	sorting: {
		value: 'date',
		write: [],
		reOpen: false,
		abovePreset: true
	},
	thumbWidth: {
		value: 100,
		write: [],
		abovePreset: true,
		help: {
			title: 'Thumbnail width',
			text: 'The maximal physical width of the thumbnail generated from your uploaded photos.'
		}
	},
	thumbHeight: {
		value: 100,
		write: [],
		abovePreset: true,
		help: {
			title: 'Thumbnail height',
			text: 'The maximal physical height of the thumbnail generated from your uploaded photos.'
		}
	},
	clipThumbs: {
		value: false,
		write: [],
		abovePreset: true,
		help: {
			title: 'Clip thumbs to fit',
			text: 'Clip the thumbnails to fit the given width and height, so that all thumbnails appear equally sized in the grid. This operation is done on the server side to the physical images.'
		}
	},
	largeWidth: {
		value: 800,
		write: [],
		abovePreset: true,
		help: {
			title: 'Large image width',
			text: 'The maximal physical width of the large image generated from your uploaded photos.'
		}
	},
	largeHeight: {
		value: 600,
		write: [],
		abovePreset: true,
		help: {
			title: 'Large image height',
			text: 'The maximal physical height of the large image generated from your uploaded photos.'
		}
	},
	controlsPreset: {
		value: 'default',
		write: ['css', 'js'],
		reOpen: true,
		help: {
			title: 'Controls preset',
			text: 'The style of navigation controls. This option affects which CSS and graphics is used, and has no API counterpart.',
			api: 'hs.addSlideshow'
		}
	},
	controlsPosition: {
		value: 'bottom center',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Controls position',
			text: 'Where to position the controls',
			api: 'hs.addSlideshow'
		}
	},
	controlsRelativeTo: {
		value: 'image',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Controls relative to',
			text: 'The controls can be positioned relative to the viewport or image',
			api: 'hs.addSlideshow'
		}
	},
	controlsOpacity: {
		value: .75,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Controls opacity',
			text: '1 is fully opaque, 0 is fully transparent.',
			api: 'hs.addSlideshow'
		}
	},
	controlsOffsetX: {
		value: 0,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Controls horizontal offset',
			text: 'This option is useful for positioning the controls off the image or applying a margin within the image area.',
			api: 'hs.addSlideshow'
		}
	},
	controlsOffsetY: {
		value: -10,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Controls vertical offset',
			text: 'This option is useful for positioning the controls off the image or applying a margin within the image area.',
			api: 'hs.addSlideshow'
		}
	},
	controlsHideOnMouseOut: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Hide controls on mouse out',
			text: 'This option is useful when the controls are positioned on top of the image.',
			api: 'hs.addSlideshow'
		}
	},
	buttonPrevious: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	buttonNext: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	buttonPlayPause: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	buttonMove: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	buttonFullExpand: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	buttonClose: {
		value: true,
		write: ['css'],
		reOpen: true
	},
	numberPosition: {
		value: 'none',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Number position',
			text: 'Show an image count like "Image 1 of 5" in the given position. The actual text of the label is part of the language strings.',
			api: 'hs.numberPosition, hs.lang'
		}
	},
	numberStyles: {
		value: '\tfont-weight: bold;\tcolor: #666666;\tfont-size: 10pt;', // start with tab, no newlines here due to state manager
		write: ['css'],
		reOpen: true
	},

	enableThumbstrip: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Enable thumbstrip',
			text: 'When a thumbstrip is present, all thumbnails of this slideshowGroup are copied into a table and rendered in one of the overlay positions.',
			api: 'hs.addSlideshow'
		}
	},
	thumbstripMode: {
		value: 'horizontal',
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'Thumbstrip mode',
			text: 'How to display the thumbstrip',
			api: 'hs.addSlideshow'
		}
	},
	thumbstripPosition: {
		value: 'bottom center',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Thumbstrip position',
			text: 'Where to display the thumbstrip',
			api: 'hs.addSlideshow'
		}
	},
	thumbstripRelativeTo: {
		value: 'viewport',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Thumbstrip mode',
			text: 'What should the thumbnail position relate to?',
			api: 'hs.addSlideshow'
		}
	},
	thumbstripSize: {
		value: 40,
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'Thumbstrip size',
			text: 'The height of a thumbstrip item when in horizontal mode. In vertical mode, 20 is added to this value, so that for a thumbnail in 3/2 aspect ratio, the size will be the same.'
		}
	},
	/*thumbstripPanelWidth: {
		value: 200,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Panel width',
			text: 'If the thumbnails are in the <code>leftpanel</code> or <code>rightpanel</code> position, this option sets the width of the panel.'
		}
	},*/

	fixedControls: {
		value: true,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Keep controls fixed',
			text: 'When this is true, Highslide aligns subsequent slides so that the controls are in the same position for the next image. This means the user can browse through the images using the "Next" button without moving the mouse.',
			api: 'hs.addSlideshow'
		}
	},
	slideshowRepeat: {
		value: false,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Repeat slideshow',
			text: 'When this is true, going "Next" from the last image will loop back to the first and vice versa.',
			api: 'hs.addSlideshow'
		}
	},
	slideshowInterval: {
		value: 5000,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Slideshow interval',
			text: 'How long to show each image in the automatic slideshow.',
			api: 'hs.addSlideshow'
		}
	},
	slideshowAutoplay: {
		value: 'none',
		write: ['js'],
		reOpen: false,
		help: {
			title: 'Autoplay slideshow',
			text: 'Start playing the slideshow automatically on opening an image.',
			api: 'hs.addSlideshow'
		}
	},
	slideshowTransition: {
		value: 'crossfade',
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Gallery transition',
			text: 'Transition effect between two images',
			api: 'hs.addSlideshow'
		}
	},
	transitionDuration: {
		value: 250,
		write: ['js'],
		reOpen: true,
		help: {
			title: 'Gallery transition duration',
			text: 'Duration of the transition effect between two images.',
			api: 'hs.addSlideshow'
		}
	},
	minigallery: {
		value: 'all',
		write: ['html', 'js'],
		reOpen: true,
		help: {
			title: 'Visible thumbnails',
			text: 'When <em>First thumb only</em> or <em>None</em>, the subsequent thumbnails are hidden in an invisible <code>div</code>. When opened from a link, the an opener anchor is provided which clicks the first (hidden) gallery thumbnail virtually. The <a href="/ref/hs.thumbnailId">thumbnailId</a> option is used to make the subsequent thumbs animate back to the common thumbnail or the opener anchor.'
		}
	},
	showSingleImage: {
		value: false,
		write: ['html'],
		reOpen: true,
		help: {
			title: 'Show single image',
			text: 'By default the single image is removed from the preview when gallery is enabled. Check this option if you want to use single images on the same page as a gallery.'
		}
	},




	/* HTML Tab */
	htmlInline: {
		value: false,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Inline HTML',
			text: 'Content defined in the source code of the HTML page itself.',
			api: 'hs.htmlExpand'
		}
	},
	htmlAjax: {
		value: false,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Ajax content',
			text: 'Content defined in another text file and included using Ajax techniques.',
			api: 'hs.htmlExpand'
		}
	},
	htmlIframe: {
		value: false,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Irame content',
			text: 'Content defined in another text file and included using an iframe.',
			api: 'hs.htmlExpand'
		}
	},
	htmlFlash: {
		value: false,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Flash content',
			text: 'Use this option to include Flash content.',
			api: 'hs.htmlExpand'
		}
	},
	htmlWidth: {
		value: 400,
		write: ['html'],
		reOpen: true,
		help: {
			title: 'HTML width',
			text: 'The width of the HTML popup',
			api: 'hs.width'
		}
	},
	htmlPrevious: {
		value: false,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlNext: {
		value: false,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlPrint: {
		value: false,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlMove: {
		value: false,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlClose: {
		value: true,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlResize: {
		value: true,
		write: ['js', 'css'],
		reOpen: true
	},
	htmlControlsLayout: {
		value: 'icon',
		write: ['js', 'css'],
		reOpen: true,
		help: {
			title: 'HTML controls layout',
			text: 'The layout of the HTML controls. This is controlled by CSS only, building on the HTML produced by the hs.skin.contentWrapper.',
			api: 'hs.contentWrapper'
		}
	},
	useTitleBar: {
		value: true,
		write: ['html', 'css', 'js'],
		reOpen: true,
		help: {
			title: 'Title bar',
			text: 'Use a draggable title bar. It is implemented using a <a href="/ref/hs.headingEval">heading</a> in combination with CSS collected under the <em>titlebar</em> <a href="ref/hs.wrapperClassName">wrapperClassName</a>.',
			api: 'hs.headingEval, hs.wrapperClassName'
		}
	},
	htmlHeadingSource: {
		value: 'headingText',
		write: ['html', 'js'],
		reOpen: true,
		help: {
			title: 'Title source',
			text: 'Where to pull the title from',
			api: 'hs.headingText, hs.headingEval'
		}
	}

};


// save startValues, get states
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var ftpSettings = Ext.state.Manager.get('ftpSettings');
ftpSettings = $.evalJSON(ftpSettings) || {
	server: 'ftp.example.com',
	userName: '',
	userPass: '',
	rememberPass: false,
	uploadDir: 'public_html'
}

// get stored config
var storedConfig;

if (querystringConfig) {
	storedConfig = querystringConfig;
} else {	
	storedConfig = Ext.state.Manager.get('config');
	storedConfig = $.evalJSON(storedConfig) || {};
}

// save default values in startValue member
for (var x in cfg) {
	cfg[x].startValue = cfg[x].value;
	if (storedConfig[x] !== undefined) cfg[x].value = storedConfig[x];

	//console.log(i++, x, Ext.state.Manager.get(x));
}



// changed defaults 2009.08.24, delete this after 30 days plus
if (cfg.minigallery.value === true) cfg.minigallery.value = 'first';
if (cfg.minigallery.value === false) cfg.minigallery.value = 'all';

var tpl = {
	writeHTML: function() {
		var capSrc = cfg.useCaption.value ? cfg.captionSource.value : '',
			headSrc = cfg.useHeading.value ? cfg.headingSource.value : '',
			s = '',
			thumbAttr = (capSrc || headSrc) ? '' : 'title="Click to enlarge" ',
			anchorAttr = '',
			subDiv = '';
		if (capSrc == 'thumb.alt')
			thumbAttr = '\n			alt="[Caption from the thumbnail\'s title attribute]" ';
		else if (headSrc == 'thumb.alt')
			thumbAttr = '\n			alt="[Heading from the thumbnail\'s alt attribute]" ';
		else
			thumbAttr = ' alt=""';

		if (capSrc == 'thumb.title')
			thumbAttr += '\n			title="[Caption from the thumbnail\'s title attribute]" ';
		else if (headSrc == 'thumb.title')
			thumbAttr += '\n			title="[Heading from the thumbnail\'s title attribute]" ';

		if (capSrc == 'a.title')
			anchorAttr = '\n			title="[Caption from the anchor\'s title attribute]" ';
		else if (headSrc == 'a.title')
			anchorAttr = '\n			title="[Heading from the anchor\'s title attribute]" ';

		if (capSrc == 'subsequent')
			subDiv = '	<span class="highslide-caption">[Caption from a subsequent div]</span>\n';
		if (headSrc == 'subsequent')
			subDiv += '	<span class="highslide-heading">[Heading from a subsequent div]</span>\n';

		var thumb1Id = cfg.minigallery.value != 'all' ? 'id="thumb1" ' : '';

		// Single image
		if (!cfg.enableGallery.value || (cfg.enableGallery.value && cfg.showSingleImage.value)) {
		s +=
		'<h3>Single image</h3>\n'+
		'<div style="text-align: justify">\n\n'+
		'	<a href="/images/full-image.jpg" class="highslide" onclick="return hs.expand(this)"\n'+
		'			'+ anchorAttr.replace(/[\[\]]/g, '') +'style="float:right; margin: 0 0 10px 15px">\n'+
		'		<img src="/images/thumbnail.jpg" '+ thumbAttr.replace(/[\[\]]/g, '') +'\n'+
		'			style="width: 107px;height:120px;" />\n';
		if (cfg.thumbnailExplanation.value != 'none') { s +=
		'		<span>Enlarge picture</span>\n';
		} s +=
		'	</a>\n'+
		subDiv.replace(/[\[\]]/g, '') +
		'\n	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod\n'+
		'	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,\n'+
		'	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\n'+
		'	Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu\n'+
		'	fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa\n'+
		'	qui officia deserunt mollit anim id est laborum.</p>\n'+
		'</div>\n\n';
		}

		// Gallery
		var list = (cfg.minigallery.value == 'all');
		if (cfg.enableGallery.value) { 
		
		if (userImages) sortImagesArray();
		s +=
		'<h3>Gallery</h3>\n'+
		'<div class="highslide-gallery">\n';
		if (list) { s +=
		'	<ul>\n';
		}
		function replaceAttributes(att, caption) {
			if (!caption) caption = '';
			if (userImages || caption) {
				att = att.replace(/\[.*?aption.*?\]/, caption.replace(/"/g, '&quot;'));

			}
			att = att.replace(/[\[\]]/g, '');
			return att;
		}
		function galleryItem(first) {
			first = (first === true);
			var caption = cfg.captionData.value[this.file] || null;
			var thumbId = '';
			if (first && cfg.minigallery.value == 'first') thumbId = 'id="thumb1" ';
			if (cfg.minigallery.value == 'none' && this == images[0]) thumbId = 'id="thumb1" ';
			if (first || this != images[0] || (cfg.minigallery.value == 'none' && this == images[0])) s +=
			(list ? '	<li>\n' : '')+
			'	<a '+ thumbId +'href="'+ this.large +'" class="highslide" '+ replaceAttributes(anchorAttr, caption) +'\n'+
			'			onclick="return hs.expand(this, config1 )">\n'+
			'		<img src="'+ this.thumb +'?rev='+ thumbsRevision +'" '+
						replaceAttributes(thumbAttr, caption) +'/>\n'+
			'	</a>\n'+
			replaceAttributes(subDiv, caption) +
			(list ? '	</li>\n' : '');
		}

		// write the first thumb
		if (cfg.minigallery.value == 'none') s += 
		'	<a id="gallery-opener" href="javascript:;" onclick="document.getElementById(\'thumb1\').onclick()">\n'+
		'		Open gallery\n'+
		'	</a>\n\n';
		else galleryItem.call(images[0], true);
		 
		if (cfg.minigallery.value != 'all') { s +=
		'	<div class="hidden-container">\n';
		}
		$.each(images, galleryItem);

		if (cfg.minigallery.value != 'all') { s +=
		'	</div>\n';
		} else { s +=
		'	</ul>\n	<div style="clear:both"></div>';
		}
		s +=
		'</div>\n\n';
		}
		// HTML
		if (cfg.htmlInline.value || cfg.htmlAjax.value || cfg.htmlIframe.value || cfg.htmlFlash.value) {

		var props = {
			inline: {
				width: cfg.htmlWidth.value
			},
			ajax: {
				objectType: 'ajax',
				width: cfg.htmlWidth.value
			},
			iframe: {
				objectType: 'iframe',
				width: cfg.htmlWidth.value
			},
			flash: {
				objectType: 'swf',
				width: 300,
				objectWidth: 300,
				objectHeight: 250,
				preserveContent: false,
				wrapperClassName: 'no-footer',
				allowSizeReduction: false,
				maincontentText: 'You need to upgrade your Flash player'
			}
		}
		var headingAttr = '';
		var wrapperClassName = '';

		// allow size reduction
		if (cfg.useTitleBar.value && cfg.showCredits.value && cfg.creditsPosition.value == 'top left') {
			props.inline.creditsPosition =
			props.ajax.creditsPosition =
			props.iframe.creditsPosition = 'bottom left'
		}

		// null out height from constraining box
		if (cfg.useBox.value) $.each(props, function() {
			this.height = null;
		});

		// set new headings
		if (cfg.useTitleBar.value) {
			if (cfg.htmlHeadingSource.value == 'headingText') {
				$.each(props, function() {
					this.headingText = 'Title from onclick';
				});
			}
			if (cfg.htmlHeadingSource.value == 'a.title') {
				headingAttr = ' title="Title from anchor title"';
				$.each(props, function() {
					this.headingEval = 'this.a.title';
				});
			}
			else if (cfg.htmlHeadingSource.value == 'a.innerHTML') {
				//headingOpt = ", headingEval: 'this.a.innerHTML'";
				$.each(props, function() {
					this.headingEval = 'this.a.innerHTML';
				});
			}

			$.each(props, function() {
				this.wrapperClassName = this.wrapperClassName ?
					this.wrapperClassName +' titlebar' : 'titlebar';
			});
		}
		// don't inherit heading from image expanders
		else if (cfg.useHeading.value) $.each(props, function() {
			this.headingText = null;
		});

		var options = {};
		$.each(props, function(objectType, i) {
			var s = '', i = 0;
			$.each(this, function(key, val) {
				if (typeof val == 'string') val = "'" + val +"'";
				try { // Chrome error on HTML popups example
				s += ', '+ ((i % 2 == 0) ? '\n			' : '') + key +': '+ val;
				} catch (e) {}
				i++;
			});
			if (s) s = ', {'+ s.substr(1) +' } ';
			options[objectType] = s;
		});


		s += '<h3>HTML</h3>\n'+
		'<div>\n';
		var html = [];
		if (cfg.htmlInline.value) { html.push(
		'	<a href="#" onclick="return hs.htmlExpand(this'+ options.inline +')"' + headingAttr +
		'>Inline HTML</a>\n'+
		'	<div class="highslide-maincontent">\n'+
		'		<h3>Lorem ipsum</h3>\n'+
		'		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam\n'+
		'		dapibus leo quis nisl. In lectus. Vivamus consectetuer pede in nisl.\n'+
		'		Mauris cursus pretium mauris. Suspendisse condimentum mi ac tellus.\n'+
		'		Pellentesque habitant morbi tristique senectus et netus et malesuada\n'+
		'		fames ac turpis egestas. Donec sed enim. Ut vel ipsum. Cras consequat\n'+
		'		velit et justo. Donec mollis, mi at tincidunt vehicula, nisl mi luctus\n'+
		'		risus, quis scelerisque arcu nibh ac nisi. Sed risus. Curabitur urna.\n'+
		'		Aliquam vitae nisl. Quisque imperdiet semper justo. Pellentesque nonummy\n'+
		'		pretium tellus.\n'+
		'	</div>\n'
		)}
		if (cfg.htmlAjax.value) { html.push(
		'	<a href="/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this'+
			options.ajax +')"' + headingAttr +
		'>Ajax</a>\n'
		)}
		if (cfg.htmlIframe.value) { html.push(
		'	<a href="/examples/includes/include-short.htm" onclick="return hs.htmlExpand(this'+
			options.iframe +')"' + headingAttr +
		'>Iframe</a>\n'
		)}
		if (cfg.htmlFlash.value) { html.push(
		'	<a href="/examples/includes/Flash.swf" onclick="return hs.htmlExpand(this'+
			options.flash +')"' + headingAttr +
		'>\n'+
		'		Flash</a>\n'
		)}
		s += html.join('	-\n');
		s += '</div>\n\n';

		}

		//document.getElementById('preview').getElementsByTagName('div')[1].innerHTML = s;
		window.frames['preview'].document.getElementById('preview').innerHTML = s;
		window.frames['preview'].hs.updateAnchors();

		// set HTML to be used in code preview (not live preview) and published code
		var bodyHtml = s
			.replace(/href="userimages\/[0-9a-z]+\/large\//g, 'href="highslide/images/large/')
			.replace(/src="userimages\/[0-9a-z]+\/thumbs\/(.*?)\?rev=[0-9a-z&;=]+/g, 'src="highslide/images/thumbs/$1')
			.replace(/(href|src)="\/images\//g, '$1="highslide/sample-images/')
			.replace(/\?rev=[0-9]+/g, '')
			.replace(/\/examples\/includes\//g, 'highslide/sample-includes/')
			.replace(/&quot;/g, '&amp;quot;');
		code.bodyHtml = bodyHtml;

		// head code
		var headHtml = '';
		if (cfg.htmlFlash.value) { headHtml +=
		'<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.1/swfobject.js"></script>\n'
		}
		if (/(easeInCirc|easeInBack)/.test(cfg.easing.value)) { headHtml +=
		'<script type="text/javascript" src="highslide/easing_equations.js"></script>\n'
		}
		var file = 'highslide.js';
		if (cfg.alignment.value != 'auto' || cfg.applyDimming.value || cfg.enableGallery.value) {
			file = 'highslide-with-gallery.js';
		}
		if (cfg.htmlAjax.value || cfg.htmlInline.value || cfg.htmlIframe.value || cfg.htmlFlash.value) {
			file = (file == 'highslide-with-gallery.js') ? 'highslide-full.js' : 'highslide-with-html.js';
		}

		headHtml += '<script type="text/javascript" src="highslide/'+ file +'"></script>\n'+
		'<script type="text/javascript" src="highslide/highslide.config.js" charset="utf-8"></script>\n'+
		'<link rel="stylesheet" type="text/css" href="highslide/highslide.css" />\n';
		if ((cfg.useCloseButton.value && cfg.closeButtonStyle.value == 'macstyle') ||
			cfg.enableThumbstrip.value || cfg.captionRelativeTo.value == 'viewport' ||
			cfg.headingRelativeTo.value == 'viewport' || cfg.controlsRelativeTo.value == 'viewport') {
		headHtml += '<!--[if lt IE 7]>\n'+
		'<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />\n'+
		'<![endif]-->\n';
		}
		headHtml += '\n';
		code.headHtml = headHtml;


		// code for "View HTML" and downloaded example
		s = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "xhtml11.dtd">\n'+
		'<html>\n'+
		'<head>\n'+
		'<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />\n\n'+
		'<title>Highslide JS - Custom Example</title>\n\n' +
		code.headHtml +
		'</head>\n'+
		'<body>\n'+
		bodyHtml +
		'</body>\n'+
		'</html>';

		code.html = s;

	},

	writeCSS: function() {

		var s = '', lsv = cfg.loadingStyle.value;
		var loadingStyle = {
			iconAndText: (lsv.indexOf('icon and text') != -1),
			textOnly: (lsv.indexOf('text only') != -1),
			smallIcon: (lsv.indexOf('small icon') != -1),
			bigIcon: (lsv.indexOf('big icon') != -1),
			foregroundColor: (lsv.indexOf('White') != -1) ? 'black' : 'white',
			backgroundColor: (lsv.indexOf('White') != -1) ? 'white' : 'black'
		}

		if (cfg.thumbnailExplanation.value == 'text-below') { s +=
		'.highslide span {\n'+
		'	display: block;\n'+
		'}\n';
		} else if (cfg.thumbnailExplanation.value == 'both-below') { s +=
		'.highslide span {\n'+
		'	display: block;\n'+
		'	padding-left: 22px;\n'+
		'	background-image: url(/highslide/graphics/zoom.png);\n'+
		'	background-repeat: no-repeat;\n'+
		'}\n';
		} s +=
		'.highslide-wrapper, .highslide-outline {\n'+
		'	background: '+ cfg.popupBackground.value +';\n'+
		'}\n'
		; if (cfg.borderWidth.value) { s +=
		'.highslide img {\n'+
		'	border: '+ cfg.borderWidth.value +'px solid '+ cfg.borderColor.value +';\n'+
		'}\n'+
		'.highslide:hover img {\n'+
		'	border-color: '+ cfg.borderHoverColor.value +';\n'+
		'}\n'
		; } if (!cfg.hideThumbOnExpand.value || cfg.enableGallery.value) { s +=
		'.highslide-active-anchor img {\n'+
		'	visibility: visible;\n'+
		'	border-color: '+ cfg.borderActiveColor.value +' !important;\n'+
		'}\n'
		; } if (cfg.applyDimming.value) { s +=
		'.highslide-dimming {\n'+
		'	background: '+ cfg.dimmingColor.value +';\n'+
		'}\n'
		; } if (cfg.contentBorderWidth.value > 0) {
		s += '.highslide-image {\n'+
		'	border: '+ cfg.contentBorderWidth.value +'px solid '+ cfg.contentBorderColor.value +';\n'+
		'}\n';
		} else {
		s += '.highslide-image {\n'+
		'	border: none;\n'+
		'}\n';
		}
		if (cfg.useHeading.value) {
		s += '.highslide-heading {\n'+
		'	display: none;\n'+
		'	margin: 0;\n'+
		cfg.headingStyles.value.replace(/;/g, ';\n');
		if (cfg.dragByHeading.value) { s +=
		'	cursor: move;\n';
		} s +=
		'}\n';
		}
		if (cfg.captionStyles.value != cfg.captionStyles.startValue) { s +=
		'.highslide-caption {\n';
		if (cfg.captionPosition.value == 'below outside') s +='	position: absolute;\n';
		if (/(below outside)/.test(cfg.captionPosition.value)) s += '	width: 100%;\n';
		s += cfg.captionStyles.value.replace(/;/g, ';\n') +
		'}\n';
		}
		if (cfg.numberStyles.value != cfg.numberStyles.startValue) { s +=
		'.highslide-number {\n'+
			cfg.numberStyles.value.replace(/;/g, ';\n') +
		'}\n';
		}
		if (loadingStyle.iconAndText) { s +=
		'.highslide-loading {\n'+
		'	color: '+ loadingStyle.foregroundColor +';\n'+
		'	border: 1px solid '+ loadingStyle.foregroundColor +';\n'+
		'	background-color: '+ loadingStyle.backgroundColor +';\n';

		} else if (loadingStyle.textOnly) { s +=
		'.highslide-loading {\n'+
		'	color: '+ loadingStyle.foregroundColor +';\n'+
		'	padding: 2px;\n'+
		'	border: 1px solid '+ loadingStyle.foregroundColor +';\n'+
		'	background-color: '+ loadingStyle.backgroundColor +';\n'

		} else if (loadingStyle.smallIcon) { s +=
		'.highslide-loading {\n'+
		'	display: block;\n'+
		'	padding: 3px 0 3px 22px;\n'+
		'	width: 0;\n'+
		'	height: 16px;\n'+
		'	overflow: hidden;\n'+
		'	background-color: '+ loadingStyle.backgroundColor +';\n'+
		'	background-repeat: no-repeat;\n'+
		'	background-position: 3px 3px;\n';
		} else if (loadingStyle.bigIcon) { s +=
		'.highslide-loading {\n'+
		'	display: block;\n'+
		'	padding: 3px 0 3px 38px;\n'+
		'	width: 0;\n'+
		'	height: 32px;\n'+
		'	overflow: hidden;\n'+
		'	background-color: '+ loadingStyle.backgroundColor +';\n'+
		'	background-repeat: no-repeat;\n'+
		'	background-position: 3px 3px;\n';
		}
		if (loadingStyle.bigIcon) { s +=
		'	background-image: url(/highslide/graphics/loader.big.'+ loadingStyle.backgroundColor +'.gif);\n';
		} else if (!loadingStyle.textOnly) { s +=
		'	background-image: url(/highslide/graphics/loader.'+ loadingStyle.backgroundColor +'.gif);\n';
		} else { s +=
		'	background-image: none;\n';
		}
		s += '}\n\n';

		if (cfg.useCloseButton.value && cfg.closeButtonStyle.value == 'simplewhite') { s +=
		'.close-simple-white {\n'+
		'	width: 16px;\n'+
		'	height: 16px;\n'+
		'	background: white url(/highslide/graphics/controlbar-text-buttons.png) 0 -221px;\n'+
		'	cursor: pointer;\n'+
		'}\n';
		}

		if (cfg.enableGallery.value) {
		var buttonWidth = cfg.controlsPreset.value == 'controls-in-heading' ? 20 : 30,
			buttonMargin = cfg.controlsPreset.value == 'controls-in-heading' ? 0 : 15;
		var controllerWidth = buttonWidth * (cfg.buttonPrevious.value + cfg.buttonPlayPause.value
			+ cfg.buttonNext.value + cfg.buttonMove.value + cfg.buttonFullExpand.value
			+ cfg.buttonClose.value) + buttonMargin;
		controllerWidth = (cfg.controlsPreset.value == 'text-controls') ? '' :
			'	width: '+ controllerWidth +'px !important;\n';
		s += '.highslide-controls {\n'+
		'	position: static !important;\n'+
		(buttonMargin ? '	margin-bottom: 0;\n' : '	margin: 0;\n') + // use offsetY instead
			controllerWidth+
		'}\n';
		if (cfg.controlsPreset.value == 'large-dark') { s+=
		'.large-dark .highslide-controls, .large-dark .highslide-controls ul, .large-dark .highslide-controls a {\n'+
		'	background-image: url(/highslide/graphics/controlbar-black-border.gif);\n'+
		'}\n';
		}
		if (!cfg.buttonPrevious.value) { s +=
		'.highslide-controls .highslide-previous {\n'+
		'	display: none;\n'+
		'}\n';
		}
		if (!cfg.buttonPlayPause.value) { s +=
		'.highslide-controls .highslide-play {\n'+
		'	display: none;\n'+
		'}\n'+
		'.highslide-controls .highslide-pause {\n'+
		'	display: none;\n'+
		'}\n';
		}
		if (!cfg.buttonNext.value) { s +=
		'.highslide-controls .highslide-next {\n'+
		'	display: none;\n'+
		'}\n';
		}
		if (!cfg.buttonMove.value) { s +=
		'.highslide-controls .highslide-move {\n'+
		'	display: none;\n'+
		'}\n';
		}
		if (!cfg.buttonFullExpand.value) { s +=
		'.highslide-controls .highslide-full-expand {\n'+
		'	display: none;\n'+
		'}\n';
		}
		if (!cfg.buttonClose.value) { s +=
		'.highslide-controls .highslide-close {\n'+
		'	display: none;\n'+
		'}\n';
		}
		s +=
		'.highslide-gallery ul li {\n'+
		'	width: '+ cfg.thumbBoxWidth.value +'px;\n'+
		'	height: '+ cfg.thumbBoxHeight.value +'px;\n'+
		'	border: '+ cfg.thumbBoxBorderWidth.value +'px solid '+ cfg.thumbBoxBorderColor.value +';\n'+
		'	background: '+ cfg.thumbBoxBackground.value +';\n'+
		'	margin: '+ cfg.thumbBoxMargin.value +'px;\n'+
		'}\n';
		if (cfg.thumbstripSize.value != cfg.thumbstripSize.startValue) {
		var thumbstripSize = parseInt(cfg.thumbstripSize.value);
		if (cfg.thumbstripMode.value == 'vertical') { s +=
		'.highslide-thumbstrip-vertical img {\n'+
		'	max-width: '+ (thumbstripSize + 20) +'px;\n'+
		'}\n';
		} else if (cfg.thumbstripMode.value == 'horizontal') { s +=
		'.highslide-thumbstrip-horizontal img {\n'+
		'	height: '+ thumbstripSize +'px;\n'+
		'}\n'+
		'.highslide-thumbstrip-horizontal .highslide-marker {\n'+
		'	top: '+ (thumbstripSize + 7) +'px;\n'+
		'}\n'+
		'.highslide-thumbstrip-horizontal .highslide-scroll-up, .highslide-thumbstrip-horizontal .highslide-scroll-down {\n'+
		'	top: '+ Math.round(thumbstripSize / 2 - 17) +'px;\n'+
		'}\n';
		}
		}
		} // if enableGallery

		if (cfg.htmlInline.value || cfg.htmlAjax.value || cfg.htmlIframe.value || cfg.htmlFlash.value) {

		s +=
		'.highslide-html {\n'+
		'	background: none;\n'+
		'}\n';
		if (cfg.htmlControlsLayout.value != 'text') { s +=
		'.highslide-header ul a {\n'+
		'	background-image: url(/highslide/graphics/controlbar-text-buttons.png);\n'+
		'	padding-left: 16px;\n';
		if (cfg.htmlControlsLayout.value == 'icon') { s +=
		'	display: inline-block;\n'+
		'	height: 16px;\n';
		}
		s += '}\n';
		}
		if (cfg.htmlControlsLayout.value == 'icon') { s +=
		'.highslide-header ul li span {\n'+
		'	display: none;\n'+
		'}\n';
		}

		if (cfg.htmlPrevious.value) { s +=
		'.highslide-header ul li.highslide-previous {\n'+
		'	display: inline;\n'+
		'}\n';
		if (cfg.htmlControlsLayout.value != 'text') { s+=
		'.highslide-header .highslide-previous a {\n'+
		'	background-position: 0 -141px;\n'+
		'}\n';
		}
		}
		if (cfg.htmlNext.value) { s +=
		'.highslide-header ul li.highslide-next {\n'+
		'	display: inline;\n'+
		'}\n';
		if (cfg.htmlControlsLayout.value != 'text') { s+=
		'.highslide-header .highslide-next a {\n'+
		'	background-position: 0 -201px;\n'+
		'}\n';
		}
		}
		if (!cfg.htmlMove.value) { s +=
		'.highslide-header .highslide-move {\n'+
		'	display: none;\n'+
		'}\n';
		} else if (cfg.htmlControlsLayout.value != 'text') { s +=
		'.highslide-header .highslide-move a {\n'+
		'	background-position: 0 -281px;\n'+
		'}\n';
		}
		if (!cfg.htmlClose.value) { s +=
		'.highslide-header .highslide-close {\n'+
		'	display: none;\n'+
		'}\n';
		} else if (cfg.htmlControlsLayout.value != 'text') { s +=
		'.highslide-header .highslide-close a {\n'+
		'	background-position: 0 -221px;\n'+
		'}\n';
		}
		if (!cfg.htmlResize.value) { s +=
		'.highslide-footer {\n'+
		'	display: none;\n'+
		'}\n';
		}
		} // if html

		// Prepare for View code and post
		code.css = s.replace(/url\(\/highslide\//g, 'url(');

		s += '\n'+ cfg.pageStyles.value;

		if (!styleContainer) {
			styleContainer = window.frames['preview'].document.createElement('style');
			styleContainer.type = 'text/css';
			styleContainer.id = 'highslide-styles';
			window.frames['preview'].document.getElementsByTagName('head')[0].appendChild(styleContainer);
		}
		if ($.browser.msie) {
			window.frames['preview'].document.styleSheets['highslide-styles'].cssText = s;
		} else if (/webkit/.test(navigator.userAgent.toLowerCase())) {
			styleContainer.innerText = s;
		} else  { // Gecko, Opera
			styleContainer.innerHTML = s;
		}


	},

	writeJS: function() {

		/**
		* Set the JS values, and write them to the preview if non default.
		*/
		var handleJSValues = function (ids) {
			for (var i = 0; i < ids.length; i++) {
				var id = ids[i],
					val = cfg[id].value;

				// make number
				if (typeof cfg[id].startValue == 'number') val = parseFloat(val);

				// set the actual value
				hs[id] = val;


				if (val != cfg[id].startValue) {
					// quote strings
					if (typeof val == 'string') val = "'"+ val +"'";

					try { // Chrome error on constraining box example
					s += "hs."+ id +" = "+ val +";\n";
					} catch (e) {}
				}
			}
		}
		var s = "", hs = window.frames['preview'].hs, hasCaption, hasHeading;

		// set hs.lang
		for (var i = 0; i < languages.length; i++) if (languages[i][0] == cfg.lang.value) {

			// override only existing values
			$.each(languages[i][2], function(name, value) {
				hs.lang[name] = value;
			});
			break;
		}


		s += "hs.graphicsDir = 'highslide/graphics/';\n";

		handleJSValues(['showCredits', 'creditsPosition']);

		// captions
		hs.captionEval = 'this.thumb.alt';

		// custom outline
		if (cfg.useOutline.value) {
			hs.outlineType = 'custom.php?color='+ cfg.outlineColor.value.replace('#', '')
				+'&cornerRadius='+ cfg.outlineCornerRadius.value
				+'&width='+ cfg.outlineWidth.value;
			if (cfg.dropShadow.value) {
				hs.outlineType += '&opacity='+ cfg.dropShadowOpacity.value
				+'&size='+ cfg.dropShadowSize.value
				+'&offsetX='+ cfg.dropShadowOffsetX.value
				+'&offsetY='+ cfg.dropShadowOffsetY.value;
			}
			if (cfg.outlineStroke.value) {
				hs.outlineType += '&strokeWidth='+ cfg.outlineStrokeWidth.value
				+'&strokeColor='+ cfg.outlineStrokeColor.value.replace('#', '');

			}
			hs.outlineType += '&fxGloss='+ (cfg.outlineGloss.value ? 1 : 0);
			s += "hs.outlineType = 'custom';\n";
		} else {
			hs.outlineType = null;
			s += "hs.outlineType = null;\n";
		}

		// dimming
		if (cfg.applyDimming.value && cfg.dimmingOpacity.value > 0) {
			hs.dimmingOpacity = parseFloat(cfg.dimmingOpacity.value);
			hs.dimmingDuration = parseInt(cfg.dimmingDuration.value);
			s += 'hs.dimmingOpacity = '+ cfg.dimmingOpacity.value +';\n';
			if (hs.dimmingDuration != cfg.dimmingDuration.startValue)
				s += 'hs.dimmingDuration = '+ cfg.dimmingDuration.value +';\n';
		} else if (!cfg.applyDimming.value) {
			hs.dimmingOpacity = null;
		}

		// fadeInOut
		hs.fadeInOut = !cfg.hideThumbOnExpand.value;
		if (hs.fadeInOut == cfg.hideThumbOnExpand.startValue) {
			s += 'hs.fadeInOut = true;\n';
		}

		// easing
		hs.easing = null;
		hs.easingClose = null;
		if (!/\//.test(cfg.easing.value)) {
			hs.easing = cfg.easing.value;
		} else {
			var arr = cfg.easing.value.split(' / ');
			hs.easing = arr[0];
			hs.easingClose = arr[1];
		}
		if (hs.easing != cfg.easing.startValue) {
			s += "hs.easing = '"+ hs.easing +"';\n";
		}
		if (hs.easingClose) {
			s += "hs.easingClose = '"+ hs.easingClose +"';\n";
		}

		handleJSValues(['expandDuration', 'restoreDuration', 'transitionDuration', 'outlineWhileAnimating']);


		// alignment
		if (cfg.alignment.value != 'auto') {
			if (cfg.alignment.value == 'center') {
				hs.align = 'center';
				hs.anchor = 'auto';
				s += "hs.align = 'center';\n";
			} else if (/anchor/.test(cfg.alignment.value)) {
				hs.anchor = cfg.alignment.value.replace('anchor-', '');
				hs.align = 'auto';
				s += "hs.anchor = '"+ hs.anchor +"'\n";
			}
		} else {
			hs.align = 'auto';
			hs.anchor = 'auto';
		}

		// allow size reduction
		hs.allowSizeReduction = cfg.allowSizeReduction.value;
		if (hs.allowSizeReduction != cfg.allowSizeReduction.startValue) {
			s += "hs.allowSizeReduction = "+ hs.allowSizeReduction +";\n";
		}
		// pad to min width
		hs.padToMinWidth = cfg.padToMinWidth.value;
		if (hs.padToMinWidth != cfg.padToMinWidth.startValue) {
			s += "hs.padToMinWidth = "+ hs.padToMinWidth +";\n";
		}

		// Margins and extremes
		handleJSValues(['minWidth', 'minHeight', 'maxWidth', 'maxHeight',
			'marginTop', 'marginRight', 'marginBottom', 'marginLeft']);

		// Constraining box
		handleJSValues(['useBox']);
		if (cfg.useBox.value) {
			hs.width = cfg.width.value;
			hs.height = cfg.height.value;
			s += "hs.width = "+ cfg.width.value +";\n"+
			"hs.height = "+ cfg.height.value +";\n";
		} else {
			hs.width = hs.height = null;
		}

		// Advanced behaviour
		handleJSValues(['allowMultipleInstances', 'blockRightClick', 'enableKeyListener', 'numberOfImagesToPreload']);

		// Caption
		if (!cfg.useCaption.value || cfg.captionSource.value == 'subsequent') {
			hs.captionEval = null;
			hs.captionText = null;
		} else {
			hs.captionEval = 'this.' + cfg.captionSource.value;
			s += "hs.captionEval = '"+ hs.captionEval +"';\n";
		}
		if (cfg.useCaption.value) {
			var captionWidth = /^(top|bottom)$/.test(cfg.captionPosition.value)	? '100%' : null;
			var position = cfg.captionPosition.value == 'below outside' ?
				'below' : cfg.captionPosition.value;
			hs.captionOverlay.position = position;
			hs.captionOverlay.relativeTo = cfg.captionRelativeTo.value;
			hs.captionOverlay.width = captionWidth;
			if (cfg.captionPosition.value != cfg.captionPosition.startValue) {
				s += "hs.captionOverlay.position = '"+ position +"';\n";
				if (captionWidth)
					s += "hs.captionOverlay.width = '"+ captionWidth +"';\n";
			}
			if (cfg.captionRelativeTo.value == 'viewport')
				s += "hs.captionOverlay.relativeTo = 'viewport';\n";
		}

		// Heading
		if (!cfg.useHeading.value || cfg.headingSource.value == 'subsequent') {
			hs.headingEval = null;
			hs.headingText = null;
		} else {
			hs.headingEval = 'this.' + cfg.headingSource.value;
			s += "hs.headingEval = '"+ hs.headingEval +"';\n";
		}
		if (cfg.useHeading.value) {
			var headingWidth = /^(top|bottom)$/.test(cfg.headingPosition.value)	? '100%' : null;
			hs.headingOverlay.position = cfg.headingPosition.value;
			hs.headingOverlay.relativeTo = cfg.headingRelativeTo.value;
			hs.headingOverlay.width = headingWidth;
			if (cfg.headingPosition.value != cfg.headingPosition.startValue) {
				s += "hs.headingOverlay.position = '"+ cfg.headingPosition.value +"';\n";
				if (headingWidth)
					s += "hs.headingOverlay.width = '"+ headingWidth +"';\n";
			}

			if (cfg.headingRelativeTo.value == 'viewport')
				s += "hs.headingOverlay.relativeTo = 'viewport';\n";
		}
		handleJSValues(['dragByHeading']);

		// Close button
		hs.overlays = [];
		if (cfg.useCloseButton.value) {
		var className = {
			macstyle: 'closebutton',
			simplewhite: 'close-simple-white'
		}[cfg.closeButtonStyle.value];
		var overlay = 'hs.registerOverlay({\n'+
		'	html: \'<div class="'+ className +'" onclick="return hs.close(this)" title="'+ hs.lang.closeText +'"></div>\',\n'+
		'	position: \'top right\',\n'+
		'	useOnHtml: true,\n'+
		'	fade: 2 // fading the semi-transparent overlay looks bad in IE\n'+
		'});\n\n'
		eval(overlay);
		s += overlay;
		}

		// Slideshow
		hs.slideshows = [];
		var controlsClassName = (cfg.controlsPreset.value != 'default') ?
			"		className: '"+ cfg.controlsPreset.value +"',\n" : "";
		var controlsRelativeTo = (cfg.controlsRelativeTo.value != 'image') ?
			"		relativeTo: '"+ cfg.controlsRelativeTo.value +"',\n" : "";
		var useControls = (cfg.controlsPreset.value != 'none');
		if (cfg.enableGallery.value) {
			var slideshowCode = "\n\n// Add the slideshow controller\n"+
			"hs.addSlideshow({\n"+
			"	slideshowGroup: 'group1',\n"+
			"	interval: "+ cfg.slideshowInterval.value +",\n"+
			"	repeat: "+ (cfg.slideshowRepeat.value ? 'true' : 'false') +",\n"+
			"	useControls: "+ (useControls ? 'true' : 'false');

			if (useControls) slideshowCode += ",\n"+
			"	fixedControls: "+ (cfg.fixedControls.value ? "'fit'" : "false") +",\n"+
			"	overlayOptions: {\n"+
					controlsClassName +
			"		opacity: "+ cfg.controlsOpacity.value +",\n"+
			"		position: '"+ cfg.controlsPosition.value +"',\n"+
			"		offsetX: "+ cfg.controlsOffsetX.value +",\n"+
			"		offsetY: "+ cfg.controlsOffsetY.value +",\n"+
					controlsRelativeTo +
			"		hideOnMouseOut: "+ (cfg.controlsHideOnMouseOut.value ? "true" : "false") +"\n"+
			"	}";

			if (cfg.enableThumbstrip.value) {
			slideshowCode += ",\n"+
			"	thumbstrip: {\n"+
			"		mode: '"+ cfg.thumbstripMode.value +"',\n"+
			"		position: '"+ cfg.thumbstripPosition.value +"',\n"+
			"		relativeTo: '"+ cfg.thumbstripRelativeTo.value +"'\n"+
			"	}\n";
			}

			slideshowCode += "\n});\n";
			s += slideshowCode;
			eval(slideshowCode);
		}


		// hs.lang
		if (cfg.lang.value != cfg.lang.startValue) {
			var langName = '';
			$.each (languages, function() {
				if (this[0] == cfg.lang.value) langName = this[1];
			});
			s += '\n// '+ langName +' language strings\nhs.lang = {';
			var lang = '';
			for (var x in hs.lang) lang += ',\n	'+ x +': \''+ hs.lang[x].replace("'", "\\'") +'\'';
			s += lang.substr(1) + '\n};\n';

			// update loading labels
			if (hs.loading) {
				hs.loading.innerHTML = hs.lang.loadingText;
				hs.loading.title = hs.lang.loadingTitle;
			}
		}
		// update loading labels
		if (hs.loadingStyle != cfg.loadingStyle.startValue) {
			loading.update();
		}

		// gallery options
		preview.window.config1 = null;
		if (cfg.enableGallery.value) {
			var config1 = "{\n	slideshowGroup: 'group1'";
			if (cfg.minigallery.value == 'first')
				config1 += ",\n	thumbnailId: 'thumb1'";
			if (cfg.minigallery.value == 'none')
				config1 += ",\n	thumbnailId: 'gallery-opener'";
			if (cfg.numberPosition.value != 'none')
				config1 += ",\n	numberPosition: '"+ cfg.numberPosition.value +"'"
			if (cfg.slideshowAutoplay.value == 'all')
				config1 += ",\n	autoplay: true"
			// transitions
			if (cfg.slideshowTransition.value == 'crossfade')
				config1 += ",\n	transitions: ['expand', 'crossfade']"

			config1 += "\n}";

			eval('preview.window.config1 = '+ config1);
			s += '\n// gallery config object\n'+
				'var config1 = '+ config1 +';\n';
		}



		code.js = s;
	},

	write: function() {
		this.writeJS();
		this.writeCSS();
		this.writeHTML();
	}

};


// load dynamic script stuff
document.write('<script type="text/javascript" src="'+
	'dynamic.js.php'+ (cfg.userdir.value ? '?userdir='+ cfg.userdir.value : '') +
	'"></script>');