$( function() {
	$(".bank").draggable( {
		helper :'clone'
	});

	$(".item").draggable( {
		helper :'clone'
	});

	$("#choose-banks-center .bank").hover(
			function() {
				$(this).css("background-image", $(this).css("background-image").replace(/-uns/, "-hov"));
			},
			function() {
				$(this).css(
						"background-image",
						$(this).css("background-image").replace(/-hov/,
								"-uns"));
	});
	
	$("#choose-themes-center .item").hover(
			function() {
				$(this).css(
						"background-image",
						$(this).css("background-image").replace(/-uns/,
								"-hov"));
			},
			function() {
				$(this).css(
						"background-image",
						$(this).css("background-image").replace(/-hov/,
								"-uns"));
	});

	$(".bank")
			.click(
					function() {
						if ($(this).parent().attr("id") == "choose-banks-center") {
							if ($("#selected-banks-center .bank").length < 3) {
								if ($("#selected-banks-center #" + $(this).attr("id")).length == 0) {
									$("#choose-banks-center").append($(this).clone());
									$("#selected-banks-center").append($(this));
									$("#choose-banks-center #" + $(this).attr("id")).css("background-image", $("#choose-banks-center #" + $(this).attr("id")).css("background-image").replace(/-hov/, "-emp"));
									$(this).css("background-image", $(this).css("background-image").replace(/-hov/, "-sel"));
									$(this).css("background-image", $(this).css("background-image").replace(/-uns/, "-sel"));
									temp = "";
									$("#selected-banks-center .bank").each(
											function(i) {
												temp = temp
														+ $(this).attr("id")
														+ ",";
											});
								}
								CheckButton();
								$("#selectedbanks").val(temp);
							}
						} else if ($(this).parent().attr("id") == "selected-banks-center") {
							disabledId = $(this).attr("id");
							$("#choose-banks-center #" + disabledId).remove();
							$("#choose-banks-center").append($(this));
							$(this).css("background-image", $(this).css("background-image").replace(/-sel/, "-uns"));
							temp = "";
							$("#selected-banks-center .bank").each( function(i) {
								temp = temp + $(this).attr("id") + ",";
							});
							CheckButton();
							$("#selectedbanks").val(temp);
						}
					});

	$(".item")
			.click(
					function() {
						if ($(this).parent().attr("id") == "choose-themes-center") {
							if ($("#selected-themes-center .item").length < 3) {
								if ($("#selected-themes-center #" + $(this).attr("id")).length == 0) {
									$("#choose-themes-center")
											.append(
													$(this).clone());
									$("#selected-themes-center").append($(this));
									$("#choose-themes-center #" + $(this).attr("id")).css("background-image", $("#choose-themes-center #" + $(this).attr("id")).css("background-image").replace(/-hov/, "-emp"));
									$(this).css("background-image", $(this).css("background-image").replace(/-hov/, "-sel"));
									$(this).css("background-image", $(this).css("background-image").replace(/-uns/, "-sel"));
									
									$(this).css("width", $("#selected-themes-center").css("width"));
									$(this).css(
											"background-image",
											$(this).css("background-image")
													.replace(/hov/,
															"sel"));
									temp = "";
									$("#selected-themes-center .item").each(
											function(i) {
												temp = temp
														+ $(this).attr("id")
														+ ",";
											});
									CheckButton();
									$("#selecteditems").val(temp);
								}
							}
						} else if ($(this).parent().attr("id") == "selected-themes-center") {
							disabledId = $(this).attr("id");
							$("#choose-themes-center #" + disabledId).remove();
							$("#choose-themes-center").append($(this));
							$(this).css("width", "177px");
							$(this).css("background-image", $(this).css("background-image").replace(/-sel/, "-uns"));
							temp = "";
							$("#selected-themes-center .item").each( function(i) {
								temp = temp + $(this).attr("id") + ",";
							});
							CheckButton();
							$("#selecteditems").val(temp);
						}
					});

	$("#selected-banks-center")
			.droppable(
					{
						accept :'.bank',
						drop : function(ev, ui) {
							if ($("#selected-banks-center .bank").length < 3) {
								if ($("#selected-banks-center #" + ui.draggable.attr("id")).length == 0) {
									$("#choose-banks-center").append(ui.draggable.clone().css("background", $("#choose-banks-center #" + ui.draggable.attr("id")).css("background").replace(/-uns/, "-emp")));
									//window.alert($("#choose-banks-center #" + ui.draggable.attr("id")).css("background-image"));
									ui.draggable.appendTo($(this));
									ui.draggable.css("background-image", ui.draggable.css("background-image").replace(/-uns/, "-sel"));
									//$("#choose-banks-center #" + ui.draggable.attr("id")).css("background-image", $("#choose-banks-center #" + ui.draggable.attr("id")).css("background-image").replace(/-hov/, "-emp"));
									temp = "";
									$("#selected-banks-center .bank").each(
											function(i) {
												temp = temp + $(this).attr("id") + ","
											});
									CheckButton();
									$("#selectedbanks").val(temp);
								}
							}
						}
					});

	$("#choose-banks-center").droppable(
			{
				accept :'.bank',
				drop : function(ev, ui) {
					ui.draggable.appendTo($(this));
					disabledId = ui.draggable.attr("id");
					$("#choose-banks-center #" + disabledId).remove();
					ui.draggable.css("background-image", ui.draggable.css(
							"background-image").replace(/hover/, "selected"));
					temp = "";
					$("#selected-banks-center .bank").each( function(i) {
						temp = temp + $(this).attr("id") + ",";
					});
					CheckButton();
					$("#selectedbanks").val(temp);
				}
			});

	$("#selected-themes-center")
			.droppable(
					{
						accept :'.item',
						drop : function(ev, ui) {
							if ($("#selected-themes-center .item").length < 3) {
								if ($("#selected-themes-center #" + ui.draggable.attr("id")).length == 0) {
									$("#choose-themes-center").append(
											ui.draggable.clone().css("background", $("#choose-themes-center #" + ui.draggable.attr("id")).css("background").replace(/-uns/, "-emp")));
									ui.draggable.appendTo($(this));

									ui.draggable.css("background-image", ui.draggable.css("background-image").replace(/-hov/, "-sel"));
									ui.draggable.css("background-image", ui.draggable.css("background-image").replace(/-uns/, "-sel"));
									ui.draggable.css("width", $(
											"#selected-themes-center").css("width"));
									ui.draggable.css("background-image",
											ui.draggable
													.css("background-image")
													.replace(/-hov/,
															"-sel"));
									temp = "";
									$("#selected-themes-center .item").each(
											function(i) {
												temp = temp
														+ $(this).attr("id")
														+ ",";
											});
									CheckButton();
									$("#selecteditems").val(temp);
									
								}
							}
						}
					});

	$("#choose-themes-center").droppable(
			{
				accept :'.item',
				drop : function(ev, ui) {
					ui.draggable.appendTo($(this));
					ui.draggable.css("width", "177px");
					disabledId = ui.draggable.attr("id");
					$("#choose-themes-center #" + disabledId).remove();
					ui.draggable.css("background-image", ui.draggable.css(
							"background-image").replace(/-sel/, "-uns"));
					temp = "";
					$("#selected-themes-center .item").each( function(i) {
						temp = temp + $(this).attr("id") + ",";
					});
					CheckButton();
					$("#selecteditems").val(temp);
				}
			});
});

CheckButton = function () {
	if(($("#selected-banks-center .bank").length > 0) && ($("#selected-themes-center .item").length > 0)) {
		$("#berekenknop").attr("disabled", "");
		$("#berekenknop").removeClass("berekenknop-disabled");
		$("#berekenknop").addClass("berekenknop-active");
	} else {
		$("#berekenknop").attr("disabled", "disabled");
		$("#berekenknop").removeClass("berekenknop-active");
		$("#berekenknop").addClass("berekenknop-disabled");
	}
}