Ext.namespace("Ext.ux");
/**
 * @class Ext.ux.LinkList
 * @extends Ext.Panel
 */

Ext.ux.LinkList = function(cfg) {
	//var c = cfg;
	//c.items = new Ext.Panel({});
	//cfg.layout = 'border';
	this.leftPanel = new Ext.Panel({
		title: false,
		border: false,
		region: 'west',
		baseCls: 'linkList',
		width: cfg.linkStripWidth || 200
	});
	
	
	// create all given links
	var links = [];
	Ext.each(cfg.links, function(li) {
		// create text element
		var a = document.createElement('a');
		a.setAttribute('href', '#');
		
		var element = new Ext.Element(a);
		element.setWidth(cfg.linkStripWidth || 200);

		// remove the panel body elements, wich has borders
		this.leftPanel.on('render', function() {
			var el = element.child('div.x-panel-bwrap');
			if (el) {
				el.remove();	
			}
		}.createDelegate(this));
		
		
		
		// get a ext element of this text stuff
		var image = document.createElement('img');
		image.setAttribute('src', li.icon);
		element.appendChild(image);
		
		
		
		// append text
		var span = document.createElement('span');
		var text = document.createTextNode(li.text);
		//span.appendChild(text);
		
		span.appendChild(text);
		element.appendChild(span);
		element.on('click', li.handler);
		
		links.push(element);
	}.createDelegate(this));
	
	Ext.each(links, function(li) {
		this.leftPanel.add(li);
	}.createDelegate(this));
	
	cfg.region = 'center';
	cfg.border = 1;
	this.rightPanel = new Ext.Panel(cfg);
	
	var c = {
		border: false,
		title: false,
		layout: 'border',
		items: [
			this.leftPanel,
			this.rightPanel
		]
		
	}
	Ext.ux.LinkList.superclass.constructor.call(this, c);
};



Ext.extend(Ext.ux.LinkList, Ext.Panel, {

});