$(function(){
		
	$('.selectables-box .draggable-box').draggable({
		snap: true,
		helper: 'clone',
		grid: [1,1],
		cursor: 'move',
		appendTo: '#composition-box',
		scope: 'composition',
		opacity: 0.5
	});
	
	
	$('#composition-box').droppable({
		scope: 'composition',
		out: function(event, ui) { 
			//alert('test');
		},
		drop: function(event, ui){
			
				// Clone de drag element
				var clonedEl 	= $(ui.draggable).clone(false);
				// Haal de huidige positie van cloned element op
				var topPos 		= ui.position.top;
				var leftPos 	= ui.position.left;
				
				// Positioneer cloned element met CSS 
				clonedEl.css({
					'position'	: 'absolute',
					'left'		: leftPos,
					'top'		: topPos
				});
				
				// Maak het cloned element dragable
				$(this).append(clonedEl.draggable({
					snap: true,
					grid: [5,5],
					containment: 'parent',
					opacity: 0.5
				}));
				
				clonedEl.dblclick(function() {
				  removeFromCart($(clonedEl).attr('name'));
				  clonedEl.remove();
				});				
				
				
				// Plaats artikel in winkelmamd
				
				var itemName = $(clonedEl).attr('name');
				addToCart(itemName);
			
			}
		});

	
});

function clearComposition(){
	
		var container 	= $('#composition-box');
		var myCart		= $('ul#cart-list');
		var formCart	= $('div#cfrInput_8 textarea');
		var priceCont 	= $('span#comp-price');
		
		// Maak alles weer leeg!
		container.empty();
		myCart.empty();
		formCart.empty();
		priceCont.html(0.00);
		
}

function removeFromCart(name){
	
	var itemArr 		= name.split('|');
	var skuNr			= itemArr[0];
	var skuName			= itemArr[1];
	var skuPrice		= itemArr[2];
	
	var tree_ul 		= $('ul#cart-list').children();
	var formCart		= $('div#cfrInput_8 textarea');
	
	var formString		= skuName+"("+skuNr+")";
	
	var temphtml = formCart.html();
	var endhtml = temphtml.replace(formString, '');
	
	formCart.html(endhtml);
		
	tree_ul.each(function(n,item){
	   if ($(item).attr('id') == skuNr) {
	   	$(item).remove();
		return false;
	   }
	});
	
	updatePrice(skuPrice, true);

}

function addToCart(name, textareaID){
	
	var itemArr 		= name.split('|');
	
	var skuNr			= itemArr[0];
	var skuName			= itemArr[1];
	var skuPrice		= itemArr[2];	
	
	var myCart 			= $('ul#cart-list');
	var formCart		= $('div#cfrInput_8 textarea');
	
	var formString		= skuName+"("+skuNr+")\r\n";
	var cartHTML 		= '<li id="'+skuNr+'"><span class="code">1x</span><span class="name">'+skuName+'</span></li>';
	
	// Add items to cart
	myCart.append(cartHTML);
	formCart.append(formString);
	
	// Update price
	updatePrice(skuPrice, false);
	
}

function updatePrice(price, minus){

	var priceCont 	= $('span#comp-price');
	
	var price 		= parseFloat(price);
	var oldPrice	= parseFloat(priceCont.text());
	if (minus == true) {
		var newPrice = oldPrice - price;
	}else{
		var newPrice = oldPrice + price;
	}
	newPrice 		= Math.round(newPrice*100)/100
	
	//priceCont.html('');
	priceCont.html(newPrice);
	//alert(newPrice);

}