$(document).ready(function() {

	$(".draggable").draggable({

		appendTo: 'body',

		opacity: '0.7',

		helper: 'clone',

		zIndex: 1000,

		revert: "invalid"

	});

	

	// Drop-Felder initialisieren

	DandD();

});





function DandD () {

	

	$(".droparea").droppable({

		accept: function(draggable){

			if (draggable.hasClass("el2")) {

				// gezogenes Element braucht 2 Drop-Felder, nicht

				// erlauben wenn am Schluss angelangt

				if($(this).next().length==0){

					return false;

				}

				if ($(this).next().children().length > 0 && $(this).next().children().css("opacity")==1)  {

					return false;

				}

				// Sperrflächen bei TV-Kasten abhandeln

/*

				if($(this).next().hasClass("trennbalken")){

					return false;

				}

*/



/*

				if($("#kastenPic").hasClass("k71_2") && $(this).next().hasClass("trennbalken")){

					return false;

				}

				if($("#kastenPic").hasClass("k71_4") && $(this).next().hasClass("trennbalken")){

					return false;

				}

				if($("#kastenPic").hasClass("k71_5") && $(this).next().hasClass("trennbalken")){

					return false;

				}

				if($("#kastenPic").hasClass("k71_7") && $(this).next().hasClass("trennbalken")){

					return false;

				}

				if($("#kastenPic").hasClass("k71_8") && $(this).next().hasClass("trennbalken")){

					return false;

				}

*/

			}

			// prüfen ob Drop-Feld bereits belegt ist

			if ($(this).children().length > 0 && $(this).children().css("opacity")==1)  {

				return false;

			}

			return true;

		},

		activeClass: 'drag_active',

		hoverClass: 'drop_hover',

		over: function(e, ui){

			if($(ui.draggable).hasClass("el2")){

				/*

				if($(this).next().hasClass("shadow")){

					$("#shadow").width( $("#shadow").width() - 13 );

				}

				else {

					$(this).next().css('display',"none")

				}

				*/

				$(this).next().css('display',"none");

				$(this).addClass("double");

			}

		},

		out: function(e, ui){

			if($(ui.draggable).hasClass("el2")){

				/*

				if($(this).next().hasClass("shadow")){

					$("#shadow").width( $("#shadow").width() + 13 );

				}

				else {

					$(this).next().css('display',"block")

				}

				*/

				$(this).next().css("display","block");

				$(this).removeClass('double');

			}

		},

		drop: function(event, ui) {

			// wert im name der gedropten Leiste an das Formelement übergeben

			$("input[name='"+$(this).attr("id")+"']")[0].value=$(ui.draggable).attr("id");

			// Dropfeld deaktivieren

			$(this).droppable("disable");

			

			if($(ui.draggable).hasClass("el2")){

				/*

				if($(this).next().hasClass("shadow")){

					$("#shadow").width( $("#shadow").width() - 13 );

				}

				else {

					$(this).next().css('display',"none")

				}

				*/

				$(this).next().css("display","none");

				$(this).addClass("double");

			}

			$("#"+$(ui.draggable).attr("id")).clone().appendTo($(this));

			$(this).children("img").removeAttr("style").draggable({

				appendTo: 'body',

				opacity: '0.7',

				helper: 'original',

				zIndex: 1000,

				revert: false,

				start: function(e, ui){

					$("input[name='"+$(this).parent().attr("id")+"']")[0].value="";

					$(ui.helper).parent().css("display","block").droppable("enable").removeClass("double");

					if($(ui.helper).hasClass("el2")){

						$(this).parent().next().css("display","block");

					}

					$(ui.helper).parent().children("img.remove").remove();

				},

				stop:function(e,ui){

					$(ui.helper).remove();

				}

			});

			$(this).append("<img class='remove' src='remove.png' alt='remove'/>");

			$(this).hover(function(){

				//$(this).children("img.draggable").fadeTo('fast', 0.7)

				$(this).children("img.remove").css("display","block");

			},function(){

				//$(this).children("img.draggable").fadeTo('fast', 1)

				$(this).children("img.remove").css("display","none");

			});

			$(this).children("img.remove").css("display","none").click(function(){

				$("input[name='"+$(this).parent().attr("id")+"']")[0].value="";

				$(this).parent().droppable("enable");

				if($(this).parent().children("img.draggable").hasClass("el2")){

					$(this).parent().next().css("display","block").removeClass("drag_active drop_hover");

				}

				$(this).parent().removeClass("double").children("img.draggable").remove();

				$(this).remove();

			});

			

		}

	});

	

};