/*
                     __                      ___                           __                    
         __         /\ \__                  /\_ \                         /\ \     __            
 __  __ /\_\   _ __ \ \ ,_\  __  __     __  \//\ \       __       __      \_\ \   /\_\     ___   
/\ \/\ \\/\ \ /\`'__\\ \ \/ /\ \/\ \  /'__`\  \ \ \    /'_ `\   /'__`\    /'_` \  \/\ \   / __`\ 
\ \ \_/ |\ \ \\ \ \/  \ \ \_\ \ \_\ \/\ \L\.\_ \_\ \_ /\ \L\ \ /\ \L\.\_ /\ \L\ \  \ \ \ /\ \L\ \
 \ \___/  \ \_\\ \_\   \ \__\\ \____/\ \__/.\_\/\____\\ \____ \\ \__/.\_\\ \___,_\ _\ \ \\ \____/
  \/__/    \/_/ \/_/    \/__/ \/___/  \/__/\/_/\/____/ \/___L\ \\/__/\/_/ \/__,_ //\ \_\ \\/___/ 
                                                         /\____/                  \ \____/       
                                                         \_/__/                    \/___/        
Script : moo3dmenu.js
10/2007 - christopher wait aka virtualgadjo / chris at virtual-gadjo dot com
Version mootools 1.1

Have swing
*/
var moo3Dmenu = new Class({

	options: {
		effectDuration	: 150,
		resizeTop		: 10,
		resizeRight		: 10,
		selectClass		: "selectitem",
		mode			: "horizontal",
		zindex			: 200
	},

	initialize: function(items, options) {
		this.setOptions(options);
		this.menu		= [];
		this.formerabs	= [];
		this.formerord	= [];
		this.largeur	= [];
		this.hauteur	= [];
		this.effect		= [];

		items.each(function(el, i){

			if (this.options.mode == "vertical"){
				this.newZindex = this.options.zindex + (i*10);
			}
			else {
				this.newZindex = this.options.zindex;
			}
			if (window.ie){
				this.absi	= el.getLeft() +1;
				this.ord	= el.getTop() +1;
			}
			else {	
				this.absi	= el.getLeft();
				this.ord	= el.getTop();
			}
			this.linkWidth	= el.getSize().size.x;
			this.linkHeight	= el.getSize().size.y;

			if (el.hasClass(this.options.selectClass)) {

				this.newLink	= el.clone();
				this.newLink.setStyles({
					'position'	: 'absolute',
					'top'		: this.ord - this.options.resizeTop,
					'left'		: this.absi,
					'z-index'	: this.newZindex,
					'width'		: this.linkWidth + this.options.resizeRight,
					'height'	: this.linkHeight + this.options.resizeTop
				});
				this.newLink.injectTop(document.body);

				el.setStyle('visibility', 'hidden');
			}

			else {

				this.formerabs.push(this.absi);
				this.formerord.push(this.ord);
				this.largeur.push(this.linkWidth);
				this.hauteur.push(this.linkHeight);

				this.newLink	= el.clone();
				this.newLink.setStyles({
					'position'	: 'absolute',
					'top'		: this.ord,
					'left'		: this.absi,
					'z-index'	: this.newZindex
				});
				this.newLink.injectTop(document.body);

				this.newEffect	= new Fx.Styles (this.newLink, { duration: this.options.effectDuration, wait: false });

				this.menu.push(this.newLink);
				this.effect.push(this.newEffect);

				el.setStyle('visibility', 'hidden');
			}

		}.bind(this));

		//et c'est reparti...
		$$(this.menu).each(function(elem, j){

			elem.addEvents({
				'mouseenter': function(){
					this.getCoordonnees(j);
					this.zoomIn(j);
				}.bind(this),

				'mouseleave': function(){
					this.zoomOut(j);
				}.bind(this)
			});

		}.bind(this));

	},

	getCoordonnees: function(j){
		this.departx		= this.formerabs[j];
		this.departy		= this.formerord[j];
		this.formerWidth	= this.largeur[j]; 
		this.formerHeight	= this.hauteur[j];
		this.zoomord		= this.departy - this.options.resizeTop;
		this.ZoomWidth		= this.formerWidth + this.options.resizeRight;
		this.ZoomHeight		= this.formerHeight + this.options.resizeTop;
	},

	zoomIn: function(j){
		this.effect[j].start({
			'top'		: [this.departy, this.zoomord],
			'width'		: [this.formerWidth, this.ZoomWidth],
			'height'	: [this.formerHeight, this.ZoomHeight]
		});
	},

	zoomOut: function(j){
		this.effect[j].start({
			'top'		: this.departy,
			'width'		: this.formerWidth,
			'height'	: this.formerHeight
		});
	}

});
moo3Dmenu.implement(new Options, new Events);