Ext.define('Ext.ux.stackorganizer.column.IconRenderer', {

	initIconRenderer: function () {

		var i_cmp = this;

		Ext.apply(i_cmp, {
			renderer: function (s_value, o_meta, i_record) {

				var o_layout = i_record.get('layout') || {};
				var s_type = i_record.get('ptype');
				var s_icon;
				var s_classes;
				var s_background;

				s_icon = (function () {

					var a_stuff = [];

					// Add possible design layout property
					var s_design = o_layout.design || "";
					if (s_design) {
						s_design = s_design.split('-').shift();
						a_stuff.push('design-' + s_design);
					}

					// Add possible imageposition layout property
					var s_position = o_layout.imageposition || "";
					if (s_position) {
						a_stuff.push('img-' + s_position);
					}

					// Add possible columns layout property
					var s_columns = o_layout.columns || "";
					if (s_columns) {
						a_stuff.push('col-' + s_columns);
					}

					return a_stuff.join(' ');
				})();

				// Deal with possible background color css styling
				s_background = o_layout.backgroundcolor || "#FFFFFF";
				var bgElement = s_background ? '<div class="background" style="background-color:' + s_background + '"></div>' : '';
				if (s_type != "mediagallery") {
					s_classes = [s_type, s_icon].join(' ');
				}
				else {
					s_classes = s_type;
				}
				return new Ext.XTemplate('<table class="type">',
					'<tr><td valign="middle">',
						'<div class="x-ux-stack-icon">',
							'<div class="preview ' + s_classes + '"></div>',
							bgElement,
						'<div>',
					'</td></tr>',
				'</table>').html;
			}
		});
	}
});
