var topDir = "pick-your-own/images/";

function DropBox(options, items){

	var tally = {};
	var count = 0;
	
	for(var i = 0; i < items.length; i++){
		tally[items[i].id] = 0;
	}
	
	this.addItem = function(itemId){
		var itemTally = tally[itemId];
		if(count == options.maxItems || itemTally === undefined) return false;
		tally[itemId]++;
		count++;
		return true;
	}
	
	this.removeItem = function(itemId){
		var itemTally = tally[itemId];
		if(!itemTally || itemTally == 0) return false;
		tally[itemId]--;
		count--;
		return true;
	}
	
	this.getAllItems = function(){
		return items;
	}
	
	this.getDroppedItems = function(itemId){
		if(itemId){
			return tally[itemId];
		}
		else{
			var selection = [];
			for(var id in tally){
				for(var n = 1; n <= tally[id]; n++){
					selection.push(id);
				}
			}
			return selection;
		}
	}
	
	this.getDropItemsLeft = function(){
		return options.maxItems - count;
	}
}

function createDropBoxGui(data, options){
	
	var shownTakeOutInfoMsg = false;
	
	function updateSatElements(){
		var spacesLeft  = data.getDropItemsLeft();
		options.submitButtonElement.disabled = spacesLeft > 0;
		if(!spacesLeft){
			$(options.statusElement).text("Your selection is complete. A box of 16 chocolates comprising 2 layers of your chosen selection above will be added to your basket.");
			$(options.selectionElement).hide();
		}
		else{
			$(options.statusElement).text(spacesLeft + (spacesLeft > 1 ? " spaces " : " space ") + "left");
			
			if(!shownTakeOutInfoMsg){
				$(options.statusElement).text($(options.statusElement).text() + ". To remove a picked chocolate drag it out of the box.");
				shownTakeOutInfoMsg = true;
			}
			
			if($(options.selectionElement).css("display") == "none"){
				$(options.selectionElement).fadeIn(1000);
			}
		}
	}
	
	var insideImages = {};
	
	function createDropped(item){
		
		var element = document.createElement("div");
		element.className = "takeOutItem";
		element.itemId = item.id;
		options.takeoutElement.appendChild(element);
		
		var insideImage = new Image;
		insideImage.src = item.insideImage.src;
		element.appendChild(insideImage);
	
		$(element)
		.draggable({
			revert:true, 
			revertDuration:0,
			opacity:0.8
		})
		.mousedown(function(){
			$(element).css("z-index","99999");
		})
		.mouseup(function(){
			$(element).css("z-index","0");
		});
		
		updateSatElements();
		
		return element;
	}
	
	function removeItem(element){
		data.removeItem(element.itemId);
		$(element).remove();
		updateSatElements();
	}
	
	function manageAddedIcon(selectionElement){
		var item = selectionElement.itemData;
		$(".item-added", selectionElement).remove();
		if(data.getDroppedItems(item.id) > 0){
			var item_added = document.createElement("div");
			item_added.className = "item-added";
			selectionElement.appendChild(item_added);
		}
	}
	
	function createSelectable(item){
	
		var element = document.createElement("div");
		element.className = "dropInItem";
		element.itemId = item.id;
		element.itemData = item;
		
		options.selectionElement.appendChild(element);
		
		var img = new Image;
		img.src = topDir + item.imageName;
		element.appendChild(img);
		element.appendChild(document.createTextNode(item.name));
		
		$(element)
			.draggable({revert:true, revertDuration:0, opacity:0.8, containment:"document"})
			.dblclick(function(){
				if(data.addItem(item.id)){
					var takeoutItem = createDropped(item);
					manageAddedIcon(this);
					takeoutItem.selectorElement = this;
				}
			});
		
		item.insideImage = new Image;
		item.insideImage.src = topDir + "inside/" + item.imageName;
	}
	
	var items = data.getAllItems();
	for(var i = 0; i < items.length; i++){
		createSelectable(items[i]);
	}
	
	$(options.dropElement).droppable({
		drop:function(event, ui){
			if(!ui.draggable.hasClass("dropInItem")) return;
			var item = ui.draggable.get(0).itemData;
			if(data.addItem(item.id)){
				var takeoutItem = createDropped(item);
				manageAddedIcon(ui.draggable.get(0));
				takeoutItem.selectorElement = ui.draggable.get(0);
			}
		},
		out:function(event, ui){
			if(!ui.draggable.hasClass("takeOutItem")) return;
			removeItem(ui.draggable.get(0));
			manageAddedIcon(ui.draggable.get(0).selectorElement);
		}
	});
	
	if(items.length){
		$(options.statusElement).html("<p><u>Double Click</u> on the chocolates below or <br /><u>Drag them to the box</u>.</p><p>Each choice adds 2 of the same chocolate to a box of 16.</p>");
	}
	else{
		$(options.statusElement).text("Sorry, no selection found!");
	}
	
	options.submitButtonElement.disabled = true;
}