var kos_pyro_UploadImageField;

(function ($) {
	if ( kos_pyro_UploadImageField != undefined ) return;

	kos_pyro_UploadImageField = $.pyro.extendClass( $.pyro.UploadField, function () {
		$.pyro.UploadField.apply( this, arguments );
		this.pyroWidgetName = "UploadImageField";
	}, {
		widgetName: 'UploadImageField',
		widgetClassName: 'kos_pyro_UploadImageField',
		
		ui: {},
		init: function () {
			var self = this;
			var o = this.options;
			$.pyro.UploadField.prototype.init.apply( this, arguments );
			this.element.addClass( 'pyro-UploadImageField' );
			this.ui.container.addClass( 'pyro-UploadImageField-container');
			this.ui.preview = $( '<span class="pyro-UploadImageField-preview" />' ).prependTo( this.ui.container );
			this.showPreview( o.showPreview );
		},
		destroy: function () {
			return $.pyro.UploadField.prototype.destroy.apply( this, arguments );
		},
		showPreview: function ( val ) {
			this.options.showPreview = val = val ? true : false;
			this.refreshInterface();
		},
		refreshInterface: function () {
			$.pyro.UploadField.prototype.refreshInterface.apply( this, arguments );
			var o = this.options;
			if ( this.ui.preview ) {
				if ( o.showPreview ) {
					var curfile= !o.showList ? this.element.val() : this.ui.selectBox.val();
					this.ui.preview.css( 'display', '' ).empty();
					if ( curfile.length ) this.ui.preview.html( '<img src="' + o.targetFolder + '/' + curfile + '" />' );
				} else this.ui.preview.css( 'display', 'none' ); 
			}
		}
	} );
	$.pyro.registerWidget( 'UploadImageField', 'kos_pyro_UploadImageField' );
	$.extend( $.pyro.UploadImageField, {
		defaults: $.extend( {}, $.pyro.UploadField.defaults, {
			showList: true,
			showPreview: true
		} )
	} );


} )( jQuery );