YUI().use('node', 'anim', function(Y) {

	var el = Y.all('.hover img');
	el.on('mousemove', function(e) {
		if (e.currentTarget.hover == true) {
  			return;
		}
		e.currentTarget.hover = true;
		
		if (!e.currentTarget.anim) {
			e.currentTarget.anim = new Y.Anim({node: e.currentTarget, from: {opacity: 0}, to: {opacity: 1}});
			e.currentTarget.anim.set('duration', 0.2);

			e.currentTarget.anim.on('end', function() {
				if (e.currentTarget.anim.get('reverse')) {
					e.currentTarget.hover = false;
				}
			});

		}
		e.currentTarget.anim.set('reverse', false);
		e.currentTarget.anim.run();
	});

	el.on('mouseout', function(e) {
		if (!e.currentTarget.anim) {
			return;
		}
		e.currentTarget.anim.pause();
		e.currentTarget.anim.set('reverse', true);
		e.currentTarget.anim.run();
	});

	Y.all('.toggleButton').on('click', function(e) {
		var showField = function( name ) {
			var field = Y.one('#field_' + name);

			//Animate it if it isn't already shown
			if (field.getStyle('display') != 'block') {
				//Find the elements height
				field.setStyle( 'visibility', 'hidden');
				field.setStyle( 'position', 'absolute');
				field.setStyle( 'display', 'block' );
				field.setStyle( 'height', ''); //Remove the height property
				var height = field.get('clientHeight');// - pb - pt; //TODO
				field.setStyle( 'display', 'none' );
				field.setStyle( 'visibility', 'inherit');
				field.setStyle( 'position', 'static');
				field.setStyle( 'overflow', 'hidden');


				var anim = new Y.Anim({
					node: field,
					from: {
						height: 0,
						opacity: 0
					},
					to: {
						height: height,
						opacity: 1
					},
					easing: Y.Easing.easeOut,
					duration: 0.2
				});

				anim.on('start', function() {
					field.setStyle( 'height', 0);
					field.setStyle( 'display', 'block' );
				});
				anim.on('end', function() {
					field.setStyle( 'overflow', 'visible' );
					field.setStyle( 'height', ''); //Remove the height property
				});
				anim.run();
			}

			Y.all('[name=button_show_' + name + ']').setStyle('display', 'none');
			Y.all('[name=button_hide_' + name + ']').setStyle('display', 'block');
		}
		var hideField = function( name ) {
			var field = Y.one('#field_' + name);

			if (field.getStyle('display') == 'block') {
				var anim = new Y.Anim({
					node: field,
					from: {
						opacity: 1
					},
					to: {
						height: 0,
						opacity: 0
					},
					easing: Y.Easing.easeIn,
					duration: 0.2
				});
				anim.on('start', function() {
					field.setStyle( 'overflow', 'hidden');
				});
				anim.on('end', function() {
					field.setStyle( 'display', 'none' );
				});
				anim.run();
			}

			Y.all('[name=button_show_' + name + ']').setStyle('display', 'block');
			Y.all('[name=button_hide_' + name + ']').setStyle('display', 'none');
		}
		var field = e.currentTarget.getAttribute('field');
		if (Y.one('#field_'+field).getStyle('display') == 'none') {
			showField(field);
		} else {
			hideField(field);
		}
	});

	
	/** Tooltip **/
	var tooltipElements = Y.all('[tooltip]');
	tooltipElements.each(function(e) {
// 		if (e.get('tagName') == 'SPAN') {
			e.addClass('tooltip');
// 		}
		var text = Y.Node.create('<div/>');
		text.set('innerHTML', e.getAttribute('tooltip'));
		
		var tooltip = Y.Node.create('<div/>');
		tooltip.append(text);
		tooltip.addClass('tooltip');
		tooltip.setStyle('position', 'absolute');
		tooltip.setStyle('display', 'none');

		Y.one('body').append(tooltip);
		e.setData('tooltip', tooltip);
	});
	
	tooltipElements.on('mouseover', function(e) {
		var tooltip = e.currentTarget.getData('tooltip');
		var timerId = tooltip.getData('timerId');
		if (timerId) {
			clearTimeout(timerId);
			tooltip.setData('timerId', 0);
		}

		var showTooltip = function() {
			var x = e.currentTarget.getX() + (e.currentTarget.get('offsetWidth')/2) - 33;
			tooltip.setStyle('visibility', 'hidden');
			tooltip.setStyle('display', '');
			tooltip.setXY([x,e.currentTarget.getY()-55]);
			tooltip.setStyle('visibility', 'visible');
		}
		if (e.currentTarget.getAttribute('tooltipType') == 'instant') {
			showTooltip();
		} else {
			tooltip.setData('timerId', setTimeout(showTooltip, 750));
		}
	});
	tooltipElements.on('mouseout', function(e) {
		var tooltip = e.currentTarget.getData('tooltip');
		var timerId = tooltip.getData('timerId');
		if (timerId) {
			clearTimeout(timerId);
		}
		tooltip.setData('timerId', setTimeout(function() {
			tooltip.setStyle('display', 'none');
		}, 500));
	});
});