YUI().use('node', 'imageloader', 'anim', 'event', function(Y) {
	var mapProxy = Y.one('img#mapHoverProxy');
	var map = Y.one('#map');
	var WIDTH = 200;
	var HEIGHT = 35;
	
	/** Mousemove **/
	var mouseEnterEvent = function() {
		var box = Y.one('#candidate_' + this.candidateId);
		this.anim.stop();
		box.anim.stop();
		
 		box.anim.set('to', {opacity: 1});
		/*box.anim.set('to', {
			opacity: 1,
			width: WIDTH,
			height: HEIGHT,
			left: box.expandedX,
			top: box.expandedY
		});*/

		this.anim.set('to', {'opacity': 1});
// 		this.setStyle('visibility', 'visible');
		
		box.anim.run();
		this.anim.run();
	};

	/** Mouse out **/
	var mouseLeaveEvent = function() {
		var box = Y.one('#candidate_' + this.candidateId);
		this.anim.stop();
		box.anim.stop();
 		box.anim.set('to', {opacity: 0});
		/*box.anim.set('to', {
			opacity: 0,
			width: 0,
			height: 0,
			left: box.collapsedX,
			top: box.collapsedY
		});*/

		this.anim.set('to', {'opacity': 0});

		box.anim.run();
		this.anim.run();
// 		this.setStyle('visibility', 'hidden');
	};

	var regionEnterEvent = function() {
		this.anim.stop();
		this.anim.set('to', {opacity: 1});
		this.anim.run();
	}
	var regionLeaveEvent = function() {
		this.anim.stop();
		this.anim.set('to', {opacity: 0});
		this.anim.run();
	}

	//Preload images and attach events
	var loadImage = function(index) {
		if (!Y.one('#candidate_' + index)) {
			return;
		}
		var img = Y.Node.create('<img />');
		
		img.set('src', '{smarty $subpath}/img/wwoty2010/top_promo_bg_front_' + i + '.png');
		img.setStyle('position', 'absolute');
		img.setStyle('opacity', 0);
// 		img.setStyle('visibility', 'hidden');
		img.anim = new Y.Anim({node: img, duration: 0.2});
		img.candidateId = index;
		map.prepend(img);

		Y.all('.candidate_' + index).on('mouseenter', mouseEnterEvent, img);
		Y.all('.candidate_' + index).on('mouseleave', mouseLeaveEvent, img);

		//Reposition the box
		var box = Y.one('#candidate_' + index);
		box.collapsedX = box.getX() + map.getX();
		box.collapsedY = box.getY() + map.getY();
		box.expandedX = box.collapsedX - (WIDTH/2);
		box.expandedY = box.collapsedY - HEIGHT - 5;
// 		box.setX(box.collapsedX);
// 		box.setY(box.collapsedY);
		box.setX(box.expandedX);
		box.setY(box.expandedY);
 		box.setStyle('opacity', 0);
// 		box.setStyle('width', 0);
// 		box.setStyle('height', 0);
		box.setStyle('visibility', 'visible');

		box.anim = new Y.Anim({node: box, duration: 0.2});
	};
	var loadRegion = function(name) {
		var img = Y.Node.create('<img />');

		img.set('src', '{smarty $subpath}/img/wwoty2010/map_' + name + '.png');
		img.setStyle('position', 'absolute');
		img.setStyle('opacity', 0);
		img.anim = new Y.Anim({node: img, duration: 0.2});
		Y.all('.region_' + name).on('mouseenter', regionEnterEvent, img);
		Y.all('.region_' + name).on('mouseleave', regionLeaveEvent, img);
		map.prepend(img);
	};
	
	for (var i = 1; i <= 20; ++i ) {
		loadImage(i);
	}
	loadRegion('west');
	loadRegion('north');
	loadRegion('mid');
	loadRegion('south');
});