$(function()
{

	jsPlumb.ready(function() {

		var instance = jsPlumb.getInstance({
			DragOptions : { cursor: 'pointer', zIndex:2000 },
			EndpointHoverStyle: { fillStyle:"orange" },
			HoverPaintStyle: { strokeStyle:"orange" },
			Container:"main",
			deleteEndpointsOnDetach: false
		});


		instance.doWhileSuspended(function() {


			instance.bind("beforeDrop", function(info){
			if (info.sourceId[1] === info.targetId[1]) {
				$('#jplayer_well').jPlayer('play');
				return true;
			} else {
			$('#jplayer_wrong').jPlayer('play');
			return false;
			}
			});

			var DropOptions = {
				tolerance:"touch"
			};

			var Color = "#640f0c";
			var Endpoint = {
				endpoint:["Dot", { radius:9 }],
				paintStyle:{fillStyle:Color },
				isSource:true,
				reattach:false,
				scope:"target",
				anchor: "Center",
				connectorStyle : {
					gradient:{stops:[[0, Color], [0.5, "#fff"], [1, Color]]},
					lineWidth:5,
					strokeStyle:Color
				},
				isTarget:true,
				dropOptions : DropOptions
			};



			instance.addEndpoint(jsPlumb.getSelector(".target"), Endpoint);

		});

	});

});