// when the page loads, transform all product images into draggable items
// and allow them to be dropped on the cart
window.onload = function() {
	// retrieve all product images
	var draggables = $$("div.productImg");
	// make them all draggable
	draggables.each(function(currentDraggable) { 
		new Draggable(currentDraggable, { revert: true, ghosting: true });												 
	});
	
	// define the cart as a droppable
	Droppables.add("cart", {
		hoverclass: "cartOnHover",
		onDrop: function(element) {
			// each product image has an id like 'product_x', where 'x' is the database id,
			// so we extract it next
			var itemId = element.id.split("_");
			addToCart(itemId[1]);
		}
	});
	
	// bind a progress indicator to all Ajax calls
	startAjax();
}

function startAjax()
{
	Ajax.Responders.register({
	  // when an Ajax request is started, show the indicator
		onCreate: function() {
		if (Ajax.activeRequestCount > 0)
		  Element.show($("indicator"));
	  },
		// when an Ajax request is finished, hide the indicator
		onComplete: function() {
		if (Ajax.activeRequestCount == 0)
		  Element.hide($("indicator"));
	  }
	});
}