/**
 * @class Ext.ux.ScreenshotPanel
 * @extends Ext.Panel
 * Renders a browse button for demonstration purposes.
 * @constructor
 * @param {Object} config The config object
 */
Ext.ux.ScreenshotsPanel = Ext.extend(Ext.Panel, {
	/*
	 * Config options
	 */
	/**
	 * For whether to draw the panel (and it's BrowseButtons) in debug mode.
	 * @type Boolean
	 */
	debug: false,
	
	
	/*
	 * Private properties
	 */
	/**
	 * Panel for displaying the files that have selected for upload.
	 * @type Ext.Panel
	 */
	filePanel: null,
	/**
	 * Form for uploading screenshot images.
	 * Is only instantiated if a screenshot is selected to upload.
	 * @type Ext.form.BasicForm
	 */
	addScreenshotForm: null,
	
	
	/*
	 * Protected methods
	 */
	/**
	 * @see Ext.Panel.initConfiguration
	 */
	initComponent: function(){
		var browseButtonBaseConfig = {
			xtype: 'browsebutton',
			handler: this.onAddScreenshot,
			scope: this,
			tooltip: 'Click to upload a new screenshot.',
			inputFileName: 'screenshot',
			debug: this.debug // set to true to see the "Browse" overlay
		};
		this.filePanel = new Ext.Panel({
			frame: true,
			title: 'selected files',
			buttonAlign: 'center',
			buttons: [{
				text: 'Upload (does not work and will fail)',
				handler: this.uploadScreenshots,
				scope: this
			}]
		});
		Ext.apply(this, {
			tbar: [
				new Ext.ux.form.BrowseButton(Ext.apply({
					text: 'tbar - explicit'
				}, browseButtonBaseConfig)), 
				Ext.apply({
					text: 'tbar - xtype'
				}, browseButtonBaseConfig)
			],
			items: [
				new Ext.ux.form.BrowseButton(Ext.apply({
					text: 'items - explicit'
				}, browseButtonBaseConfig)), 
				Ext.apply({
					text: 'items - xtype'
				}, browseButtonBaseConfig), 
				this.filePanel
			],
			buttons: [
				new Ext.ux.form.BrowseButton(Ext.apply({
					text: 'buttons - explicit'
				}, browseButtonBaseConfig)), 
				Ext.apply({
					text: 'buttons - xtype'
				}, browseButtonBaseConfig) // doesn't work correctly as Ext uses the config object to instaniate an Ext.Button
			]
		});
		Ext.ux.ScreenshotsPanel.superclass.initComponent.call(this);
	},
	
	
	/*
	 * Private methods
	 */
	/**
	 * Handler for the add screenshot button.
	 * @param {Ext.ux.form.BrowseButton} browseButton The browse button where "Add Screenshot" was clicked.
	 * @private
	 */
	onAddScreenshot: function(browseButton){
		if (!this.addScreenshotForm) { // if the form hasn't been created
			var addScreenshotFormEl = this.filePanel.body.createChild({
				tag: 'form',
				style: 'display:none'
			});
			this.addScreenshotForm = new Ext.form.BasicForm(addScreenshotFormEl, {
				url: '/AddScreenshot',
				fileUpload: true
			});
		}
		var inputFileEl = browseButton.detachInputFile();
		inputFileEl.appendTo(this.addScreenshotForm.getEl());
		this.filePanel.body.createChild({
			tag: 'div',
			html: inputFileEl.dom.value
		});
	},
	
	/**
	 * Handler for the upload screenshots button
	 */
	uploadScreenshots: function(){
		this.addScreenshotForm.submit({
			params: {
				extraParam1: 'value1'
			},
			success: this.onAddScreenshotSuccess,
			failure: this.onAddScreenshotFailure,
			scope: this,
			waitTitle: 'Uploading Screenshot',
			waitMsg: 'Your screenshot is being uploaded...'
		});
	},
	
	/**
	 * Callback for when a screenshot has been successfully added.
	 * @param {Ext.form.BasicForm} form the form for which the uploading occurred.
	 * @param {Ext.form.Action} action the action of the form submit
	 * @private
	 */
	onAddScreenshotSuccess: function(form, action){
		// remove the file input element so that it doesn't get uploaded again with the next screenshot
		var inputFileEl = this.addScreenshotForm.getEl().child('input');
		inputFileEl.remove();
		Ext.Msg.show({
			title: 'Screenshot Upload Success',
			msg: 'Your screenshot was successfully uploaded.',
			buttons: Ext.Msg.OK,
			minWidth: 300
		});
	},
	
	/**
	 * Callback for when a screenshot has not been successfully added.
	 * @param {Ext.form.BasicForm} form the form for which the uploading occurred.
	 * @param {Ext.form.Action} action the action of the form submit
	 * @private
	 */
	onAddScreenshotFailure: function(form, action){
		// remove the file input element so that it doesn't get uploaded again with the next screenshot
		var inputFileEl = this.addScreenshotForm.getEl().child('input');
		inputFileEl.remove();
		var errorMessageTemplate = new Ext.XTemplate('<p>Your screenshot was not uploaded.  The server reported the following errors:</p>', '<tpl for="errors">', '<p>- {.}</p>', '</tpl>');
		Ext.Msg.show({
			title: 'Screenshot Upload Failed',
			msg: errorMessageTemplate.applyTemplate(action.result),
			buttons: Ext.Msg.OK,
			minWidth: 300
		});
	}
});