/*
Class: Fx.Morph
	The morph effect; Change the CSS class style for an element.
	Inherits methods, properties, options and events from <Fx.Styles>.
	
Note:
	Fx.Morph requires an XHTML doctype.

Options:
	options - all the <Fx.Styles> options

Example:
	(start code)
	var myMorpher = new Fx.Morph('myElement', {duration: 500});
	var mySlider = new Fx.Slide('myElement', {duration: 500});
	myMorpher.start('newCSSclass');
	(end)
*/

Fx.Morph = Fx.Styles.extend({

	start: function(className){
 
			var to = {};
 
			$each(document.styleSheets, function(style){
				var rules = style.rules || style.cssRules;
				$each(rules, function(rule){
					if (!rule.selectorText.test('\.' + className + '$')) return;
					Fx.CSS.Styles.each(function(style){
						if (!rule.style || !rule.style[style]) return;
						var ruleStyle = rule.style[style];
						to[style] = (style.test(/color/i) && ruleStyle.test(/^rgb/)) ? ruleStyle.rgbToHex() : ruleStyle;
					});
				});
			});
			return this.parent(to);
		}
 
});

/*
Script: Fx.CSS.js
	Css parsing class for effects. Required by <Fx.Style>, <Fx.Styles>, <Fx.Elements>. No documentation needed, as its used internally.

License:
	MIT-style license.
*/
Fx.CSS.Styles = ["backgroundColor", "backgroundPosition", "color", "width", "height", "left", "top", "bottom", "right", "fontSize", "letterSpacing", "lineHeight", "textIndent", "opacity"];
 
Fx.CSS.Styles.extend(Element.Styles.padding);
Fx.CSS.Styles.extend(Element.Styles.margin);
 
Element.Styles.border.each(function(border){
	['Width', 'Color'].each(function(property){
		Fx.CSS.Styles.push(border + property);
	});
});

/*
Class: myAccordion - da modificare sia descrizione che funzione - usare mootools style
	The Accordion class creates a group of elements that are toggled when their handles are clicked. When one elements toggles in, the others toggles back.
	Inherits methods, properties, options and events from <Fx.Elements>.
	
Note:
	The Accordion requires an XHTML doctype.

Arguments:
	togglers - required, a collection of elements, the elements handlers that will be clickable.
	elements - required, a collection of elements the transitions will be applied to.
	options - optional, see options below, and <Fx.Base> options and events.

Options:
	show - integer, the Index of the element to show at start.
	display - integer, the Index of the element to show at start (with a transition). defaults to 0.
	fixedHeight - integer, if you want the elements to have a fixed height. defaults to false.
	fixedWidth - integer, if you want the elements to have a fixed width. defaults to false.
	height - boolean, will add a height transition to the accordion if true. defaults to true.
	opacity - boolean, will add an opacity transition to the accordion if true. defaults to true.
	width - boolean, will add a width transition to the accordion if true. defaults to false, css mastery is required to make this work!
	alwaysHide - boolean, will allow to hide all elements if true, instead of always keeping one element shown. defaults to false.
	
Events:
	onActive - function to execute when an element starts to show
	onBackground - function to execute when an element starts to hide
*/
Fx.myAccordion = Fx.Accordion.extend({
	
	options: {
		delay: 500
	},
	
	initialize: function(togglerelements, elements, options, container){
		this.setOptions(options);
		this.parent(togglerelements, elements, options, container);
		this.index = -1;

		/* I need this class to pass the correct Fx.myAccordion/index of the element to open */
		var AccordionItem = new Class({
			initialize: function(myAcc,index){
				this.me = myAcc;
				this.index = index;
			},
			setIndex: function(index){
				this.index = index;
			}
		});		
		/* these vector contain DOM's elements for the accordion */
		this.togglers = $ES(togglerelements);
		
		/* init animation's handler */
		var accItem = [];
		if (this.togglers.length > 0) {
			for (i=0; i<this.togglers.length; i++) {
				accItem[i] = new AccordionItem(this,i);
			}
		}
		this.accItem = accItem;	
		/* add handlers */
		this.addEventHandlers();
    },
	
	/* add an handler for each toggler */
	addEventHandlers: function(){
		var toggler;
		var me = this;
		if (this.togglers.length > 0) {
			for (i=0; i<this.togglers.length; i++) {
				toggler = this.togglers[i];
				/* toggler.addEvent(me.options.event, this.displayBinded.bindWithEvent(toggler,me.accItem[i])) */
				toggler.addEvent('mouseenter', this.displayBinded.bindWithEvent(toggler,me.accItem[i]))
				toggler.addEvent('mouseleave', this.stopBinded.bindWithEvent(toggler,me))
			}
		}
	},
		
	/* like the function above, but used internally */
	displayBinded: function(toggler,accordionItem){
		var me = accordionItem.me;
		me.index = accordionItem.index;
		if (me.togglers.length > 0) {
			(function() { if (me.index == accordionItem.index) {
				me.display(me.index);
			}}).delay(me.options.delay); // traffic light system, in this time the mouse does not exit from 
		}
	},
	
	stopBinded: function(toggler,me){
		me.index = -1;	// traffic light system
	}
});