Ext.namespace('Ext.ux');

Ext.ux.ColumnNav = function(config){
 	config = config || {}
	Ext.ux.ColumnNav.superclass.constructor.call(this, config);

	Ext.apply(this, config);
	//this.items = config.items || [];	

	this.masterTemplate = new Ext.Template('<ul class="nav-list">{items}</ul>');
	this.itemTemplate = new Ext.Template(
	    '<li class="nav-list-item clearfix" id="nav-list-item-{id}">',
	        '<div class="clearfix {class}">{btn}<span title="{text}" class="nav-link">{text}</span></div>',
	    '</li>'
	);	
	this.btnTemplate = new Ext.Template('<span class="nav-item-btn"><b></b></span>');

	this.addEvents({link:true});
}

Ext.extend(Ext.ux.ColumnNav, Ext.util.Observable, {
	path : [],
	tileWidth :	209,
	tileInset :	0,
	tileCount : 0,
	speed: 1.35,
	animation : false,
	currentItems : [],

	getItems : function(path){
	 	var ret = {items:this.items, parent: null};
	 	for (var x=0;x<path.length;x++){
			for (var i=0;i<ret.items.length;i++){
				if (ret.items[i].id == path[x]) {
					if (ret.items[i].items && ret.items[i].items.length > 0) {
						ret.parent = {text:ret.items[i].text, id: ret.items[i].id};
						ret.items = ret.items[i].items;		
					}
				}
			}
		}
		return ret;		
	},

	count : function(){
		return this.tileCount;
	},

	back : function(){
	 	if (this.count() > 1){
	 	 	this.path.pop();
			this.scrollToTile(this.count()-1, 'slow');	
			//console.log(this.path);	
			//this.cleanTiles(this.count()-1);
		}
	},

	reset : function(){
		if (this.count() > 1){
			this.path = [];
			this.scrollToTile(1,1000);
		}		
	},

	init : function(items, parent){
	 	var items = items || this.items;

		this.createTile(items, parent);	

		for (var x=0;x<items.length;x++){
			if (items[x]['active'] == true){
				if (items[x].items && items[x].items.length > 0) {
				 	this.path[this.path.length] = items[x].id;				 
					this.init(items[x].items, {id:items[x].id, text:items[x].text});	
				}
			}
		}

	},

	render : function(el){
		this.el = Ext.get(el);
		Ext.get(this.el.findParentNode('DIV')).setStyle('height', ((this.items.length +1) * 27 + 75) + 'px');
		this.el.setVisible(false);
		this.init();
		this.tileInset = this.el.getLeft();
		this.scrollToTile(this.path.length + 1);
		var o;
		
		if (null !== (o = Ext.get('cn_back-btn'))) o.on('click', this.back, this);
		if (null !== (o = Ext.get('cn_reset-btn'))) o.on('click', this.reset, this);
		
		//console.log(this.path);
	},

	createTile : function (items, parent) {
		var tile = this.el.createChild({tag:'div', cls:'cn_tile', id:'cn_tile-' + (this.count() + 1)});
				
		var nav = '';
		
		if (parent){
		 	parent['class'] = 'path-item';
			parent.btn = this.btnTemplate.apply();	
			nav += this.itemTemplate.apply(parent);
		}
		
		for (var x =0;x<items.length;x++) {
		 	if (items[x].items && items[x].items.length > 0) {
				items[x].btn = this.btnTemplate.apply();	
				if (items[x].active) items[x]['class'] = 'item-active';
			} else items[x]['class'] = (items[x].active ? 'item-leaf-active' : 'item-leaf'); 
			
			nav += this.itemTemplate.apply(items[x]); 
		}
		tile.dom.innerHTML = this.masterTemplate.apply({items:nav});

		//var tileOffset = this.tileWidth * this.count() + this.tileInset;
		//tile.setStyle('left', tileOffset + 'px');

		tile.on('mouseover', function(e){
		 	var o = e.getTarget();
			if (o.className == 'nav-item-btn'){
				var p = Ext.get(Ext.get(o).findParentNode('LI'));
				p.addClass('item-over-btn');				
			} else if (o.className == 'nav-link'){
				var p = Ext.get(Ext.get(o).findParentNode('LI'));
				p.addClass('item-over-link');				
			};
		}, this);

		tile.on('mouseout', function(e){
		 	var o = e.getTarget();
			if (o.className == 'nav-item-btn'){
				var p = Ext.get(Ext.get(o).findParentNode('LI'));
				p.removeClass('item-over-btn');				
			} else if (o.className == 'nav-link'){
				var p = Ext.get(Ext.get(o).findParentNode('LI'));
				p.removeClass('item-over-link');				
			};
		}, this);

		tile.on('click', function (e){
		 	if (!this.animation){
			 	var o = e.getTarget();
				if (o.className == 'nav-item-btn'){
					var id = Ext.get(o).findParentNode('LI').id.substring(14); 
					if (Ext.get(Ext.get(o).findParentNode('div')).hasClass('path-item')){
						this.back();	
					} else {
						this.path[this.path.length] = id;
						//console.log(this.path);
						var items = this.getItems(this.path);
						if (items.items.length > 0) {
							this.createTile(items.items, items.parent);
							this.scrollToTile(this.count() + 1);
						}							
					}
				} else if (o.className == 'nav-link'){
					var id = Ext.get(o).findParentNode('LI').id.substring(14); 
					this.fireEvent('link', this, id);
				};
			}
		}, this);
		
		this.tileCount++;
	},
	
	scrollToTile : function (n, s){
		this.animation = true;
		if (n > this.count()) n = this.count();
		if (n < 1) n = 1;
		if (!s) s = this.speed;

		this.tileInset = Ext.get('nav-ct').getLeft();
        var tmp = (this.tileWidth * n) - this.tileWidth - this.tileInset; 
		var now = (tmp * -1);

		//now = this.el.getLeft() + now;
		
		this.el.shift({
			x: now,
			duration: .35,
			callback: function(){
				this.cleanTiles(n);	
				var back;
				if (null !== (back = Ext.get('cn_back-btn'))) {				
					if (n > 1) back.child('span').addClass('active');
					else back.child('span').removeClass('active')		 
				}
	          	//this.cleanTiles(n);
				//this.el.setStyle('left',now + 'px');
				this.animation = false;
				this.el.setVisible(true);	
			}, 
			scope:this
		});
	},

	cleanTiles : function (n){
		if(n>=this.count()) return false;
		var end = this.count();
		for(var i = (n+1); i <= end; i++){
			Ext.get('cn_tile-' + i).remove();
			this.tileCount--;
		}
	}
		
});