Ext.ns('Ext.ux.IconLoader');

/**
 * @property The path to the root of the icons directory. Set with Ext.ux.IconLoader.init
 * @type String
 */
Ext.ux.IconLoader.path = 'http://www.ece.usu.edu/ieee/resources/images/fff/';

/**
 * Initialize the icon loader. See {@link #Ext.ux.IconLoader.reg} for example usage.
 * @param {String} path The path where your icons are located.
 * @returns the path
 */
Ext.ux.IconLoader.init = function (path) {
	return Ext.ux.IconLoader.path = path; //see "default" value above...
};


/**
 * Icon loader. This method inserts css rules into your page to be used as iconCls.
 * The class will be named "icon-" + whatever the filename is with the underscores replaced
 * with hyphens and without the file extension. <br/><br/>
 * Example usage:<br/>
 * <pre>
 * Ext.ux.IconLoader.init(http://famfamfam.googlecode.com/svn/wiki/images/); //note the trailing slash
 * Ext.ux.IconLoader.reg('accept.png', 'cross.png'); //will create the css rule necessary to use accept.png and cross.png as background images.
 * new Ext.Button({iconCls: 'icon-accept', renderTo: Ext.getBody(), text: 'hello, world'});
 * </pre>
 * @param {String} icon The filename of the icon for which we will generate a css rule.
 * @param {String} icon2 Another filename of the icon for which we will generate a css rule.
 * @param {String} icon3 etc
 * Should be located under the path specified by {@link #Ext.ux.IconLoader.init}.
 * @returns The generated class name.
 */
Ext.ux.IconLoader.reg = function() {
	newStyle = '';
	Ext.each(arguments, function(icon) {
		className = "icon-" + icon.replace(/_/g, "-").substring(0, icon.lastIndexOf('.')); //strip off extension and replace _ with -
		newStyle += String.format('.{0} { background-image: url({1}{2}) !important }', className, Ext.ux.IconLoader.path, icon)
	});
	Ext.util.CSS.createStyleSheet(newStyle, 'dynamic-icons');
};