/*
 * Element.Events.clickitem
 */

Element.Events.clickitem = {
	base: 'click',
	condition: function(event) {
		if (['foreground', 'icon', 'label'].contains(event.target.get('class')))
			event.target = event.target.getParent();
		return true;
	}
};

/*
 * Tree
 */

var Tree = new Class({
	options: {
		duration: 300
	},
	Implements: [Options, Events],
	initialize: function(container, options) {
		this.setOptions(options);
		this.container = $(container);
		this.current = null;
		this.root = {};
		this.build(this.root, this.container);
		this.container.empty();
		this.scroller = new Element('div', {'class': 'scroller'}).inject(this.container);
		this.tabcontent = this.container.getParent('div.tabcontent');
		this.tabcontent.setStyle('height', this.stage(this.current || this.root, 'bottom'));
	},
	build: function(branch, node) {
		//
		branch.children = [];

		//
		node.getChildren('span').each(function(element) {
			var item = element.getElement('a').getProperties('text', 'href');
			item._class = element.get('class');
			item.parent = branch;

			//
			if (element.hasClass('current_page_item'))
				this.current = branch;

			//			
			branch.children.push(item);
			
			//
			children = element.getChildren('div');
			if (children.length == 1)
				this.build(item, children[0]);
		}, this);
	},
	stage: function(branch, where) {
		var step = new Element('div', {'class': 'step'}).inject(this.scroller, where),
			height = 0;
		
		//
		if (branch.parent) {
			var button = new Tree.Button({'text': 'Retour "' + branch.text + '"'}).inject(step).addClass('back');
			button.addEvent('clickitem', this.preview.bind(this, branch.parent));
			height += button.getSize().y;
		}
			
		branch.children.each(function(item, index) {
			var button = new Tree.Button(item).inject(step).addClass((index % 2) ? 'soft' : 'dark');
			button.addEvent('clickitem', this.next.bindWithEvent(this));
			height += button.getSize().y;
			
			if (branch.children.length == index + 1)
				button.addClass('last');
			
		}, this);

		return height;
	},
	preview: function(branch) {
		var height = this.stage(branch, 'top');
		
		// 
		this.scroller.setStyle('margin-left', -237);
		
		//
		new Fx.Elements([this.tabcontent, this.scroller], {
			duration: this.options.duration,
			onComplete: (function() {
				this.scroller.getElements('div.step')[1].dispose();
		    }).bind(this)
		}).start({
			0: {'height': height},
			1: {'margin-left': 0}
		});
	},
	next: function(event) {
		var target = event.target, branch = target.retrieve('branch');
		
		// The element contains no children
		if (!branch.children) {
			//
			window.location = branch.href;
			return;
		}

		//
		var height = this.stage(branch, 'bottom');
		
		//
		new Fx.Elements([this.tabcontent, this.scroller], {
			duration: this.options.duration,
			onComplete: (function() {
				this.scroller.getElements('div.step')[0].dispose();
			    this.scroller.setStyle('margin-left', 0);
		    }).bind(this)
		}).start({
			0: {'height': height},
			1: {'margin-left': -237}
		});
	}	
});

Tree.Button = new Class({
	options: {
		duration: 1500
	},
	Extends: Gx.Button,
	initialize: function(branch, options) {
		this.setOptions(options);
		
		this.parent(new Element('a').setHref(), options);
		this.foreground = new Element('div', {'class': 'foreground'});
		this.icon = new Element('div', {'class': 'icon'});
		this.container.store('branch', branch);
		
		if (branch.children && branch.children.length != 0)
			this.container.addClass('submenu');
			
		if (branch._class) {
			//
			this.container.addClass(branch._class);
			
			// Return the id of pages wordpress
			this.pid = branch._class.replace(/item|page|-|_| /g, '').toInt();
		}
		
		this.container.adopt(
			this.foreground,
			this.icon,
			new Element('div', {'class': 'label', 'text': branch.text})
		);
		
		// New fx
		this.fadefx = new Fx.Tween(this.foreground, {link: 'cancel', duration: 200});
		
		// Add mouse hover and mouse out event
		this.container.addEvents({
			mouseenter: this.mouseenter.bind(this),
			mouseleave: this.mouseleave.bind(this)
		});

		return $extend(this.container, this);
	},
	mouseenter: function() {
		if (Browser.Engine.trident)
			this.foreground.setOpacity(0);
		else
			this.fadefx.start('opacity', 0);
	},
	mouseleave: function() {
		if (Browser.Engine.trident)
			this.foreground.setOpacity(1);
		else
			this.fadefx.start('opacity', 1);
	}	
});