var DraggableProduct = Class.create ({
	initialize: function(divId, tdId) {
		this.div = $(divId);
		this.cursorHand(this.div, true);
		
		// Stable values
		this.width = this.div.style.width;
		this.height = this.div.style.height;
		this.top = this.div.style.top;
		this.left = this.div.style.left;
		
		var current = this;
		new Draggable(this.div, {
      		revert: true, 
      		snap: true, // To force to return to their original position (we must perfectionaly this point
      		reverteffect: function(element, top_offset, left_offset) {
				current.cursorHand(current.div, true);

        		new Effect.BlindDown($(element), { 
        			beforeStart : function() {
        				current.restoreSizeElement(current.div, current.height, current.width, current.top, current.left);
        			},   
        			afterFinish : function() {
        				current.restoreSizeElement(current.div, current.height, current.width, current.top, current.left);
        			}, 
        			duration: 1
        		});
      		},
      		onDrag: function(draggable, event) {
      			current.cursorHand(current.div, false);
      			if (escaparate.intoCanvas(event)) {
      				escaparate.canvas.appendChild(draggable.element);
      			} else {
      				$(tdId).appendChild(draggable.element);
      			}
      		},
      		onEnd: function(draggable, event) {
      			var element = draggable.element;
      			
      			if (escaparate.intoCanvas(event)) {
					$(tdId).appendChild(element);
				}
      		}
	    });
	},
	
	restoreSizeElement: function(div, height, width, top, left) {
		div.style.width = width;
		div.style.height = height;
		div.style.left = left;
		div.style.top = top;
	},

	cursorHand: function(div, open)
	{
		if(open) {
			div.style.cursor = "url('/images/handopen.cur'), pointer";
		} else {
			div.style.cursor = "url('/images/handclose.cur'), pointer";
		}
	}
});

var ProductHelp = Class.create ({
	initialize: function(divId, helpDivId) {
		this.div = $(divId);
		this.helpDivId = helpDivId;
			
		var current = this;
		this.div.observe('mouseover', function (event) {
			$(current.helpDivId).show();
		});
		this.div.observe('mouseout', function (event) {
			$(current.helpDivId).hide();
		});
	}
});