BucketCard = Ext.extend(Object, {
	hoverDelay: 250,

	/**
	 *
	 * @param bucket The id or el of a bucket dom element
	 */
    constructor: function(id) {
		this.el = Ext.get("bucket-card-" + id);
		var nodes = Ext.DomQuery.select(".bucket-" + id);
		var setupBefore = false;
		for(var i = 0; i < nodes.length; i++) {
			var node = Ext.get(nodes[i]);
			if(node.bucketLabel) { // This may run again when more ideas are loaded, skip anything seen already...
				setupBefore = true;
				continue;
			}
			node.bucketLabel = this;
			node.on('mouseover', function() {
				this.hovering = true;

				if(!this.bucketLabel.hoverStart)
					this.bucketLabel.hoverStart = new Date();

				this.bucketLabel.checkShow(this)
				
			}, node);
			node.on('mouseout', function() {
				this.hovering = false;
				this.bucketLabel.hoverStart = null;
			}, node);
		}

		if(!setupBefore) {
			this.el.on('mouseout', function() {
				this.hide();
			}, this);
			this.el.on('mouseover', function() {
				this.show();
			}, this);
		}
	},

	checkShow: function(target) {
		if(target.hovering) {
			var timeSince = (new Date() - this.hoverStart);

			if(timeSince > this.hoverDelay) {
				this.position(target);
				this.show();
			} else {
				this.checkShow.defer(100, this, [target]);
			}
		}
	},

	position: function(target) {
		var pos = target.getXY();
		pos[0] -= 9;
		if(Ext.isGecko)
			pos[1] -= 4;
		else
			pos[1] -= 3;
		this.el.setXY(pos);
	},

	show: function() {
		if(!this.visible) {
			this.visible = true;
			this.el.removeClass("x-hidden");
			this.el.show();
		}
	},

	hide: function() {
		this.hoverStart = null;
		this.visible = false;
		this.el.hide();
	}
});