#!/usr/bin/perl -w

use strict;
use CGI qw(:standard :html4);
use CGI::Carp qw(carpout fatalsToBrowser);
use CGI::Pretty ":standard";
use utf8;

my $cgi = CGI->new();
print header;
print start_html(-head  => style({-rel => 'stylesheet',
								  -type => 'text/css',
								  -media => 'screen',
								  -src => 'css/demos.css'},
                                  join('',<DATA>)));
print "<script type=\"text/javascript\" src=\"js/drag-drop-custom.js\"></script>\n";

print start_form(-action=>"http://localhost:8888/cgi-bin/semanticlass/prep/param.pl");

#print "<div id=\"mainContainer\">\n";
print "<h2>Drag & Drop</h2>\n";
print "<div id=\"leftColumn\">\n";
print "<p><b>Drag</b></p>\n";
print "<div id=\"dropContent\">\n";

my @header = (1,2,3,4);
my $i = 1;
foreach(@header){
	my $box = 'box'.$i;
	print "<div class=\"dragableBox\" id=\"$box\">$_</div>\n";
	$i++;
}
print "</div>\n";
print "</div>\n";
#print "<div id=\"rightColumn\">\n";
print "<div id=\"dropBox\" class=\"dropBox\">\n";
print "<p><b>Drop</b></p>\n";
print "<div id=\"dropContent2\"></div>\n";
print "</div>\n";
#print "</div>\n";	
	
print "<div class=\"clear\"></div>\n";
#print "</div>\n";

print "<div id=\"debug\"></div>\n";
print p("Feldname: ", textfield("wname"));
print p("Datentyp: ", textfield("wtyp"));
print p("Feldl&auml;nge: ", textfield("wlength"));
print p(submit ("Abschicken"));
print end_form();
############## Java Script ############## 
print "<script type=\"text/javascript\" src=\"js/drag-drop-custom.js\"></script>\n";
print "<script type=text/javascript>\n";
print "function dropItems(idOfDraggedItem,targetId,x,y){\n";
print "if(targetId=='dropBox'){\n";
print "var obj = document.getElementById(idOfDraggedItem);\n";
print "if(obj.parentNode.id=='dropContent2')return;\n";
print "document.getElementById('dropContent2').appendChild(obj);\n";
print "}\n";
print "if(targetId=='leftColumn'){\n";
print "var obj = document.getElementById(idOfDraggedItem);\n";
print "if(obj.parentNode.id=='dropContent')return;\n";
print "document.getElementById('dropContent').appendChild(obj);\n";
print "}\n";
#print "if(targetId=='dropBoxTest'){\n";
#print "var obj = document.getElementById(idOfDraggedItem);\n";
#print "if(obj.parentNode.id=='dropContent3')return;\n";
#print "document.getElementById('dropContent3').appendChild(obj);\n";
#print "}\n";
print "}\n";

print "function onDragFunction(cloneId,origId){\n";
print "self.status = 'Started dragging element with id ' + cloneId;\n";

print "var obj = document.getElementById(cloneId);\n";
print "obj.style.border='1px solid #F00';\n";
print "}\n";


print "var dragDropObj = new DHTMLgoodies_dragDrop();\n";
print "dragDropObj.addSource('box1',true,true,true,false,'onDragFunction');\n";
print "dragDropObj.addSource('box2',true,true,true,false,'onDragFunction');\n";
print "dragDropObj.addSource('box3',true,true,true,false,'onDragFunction');\n";
print "dragDropObj.addSource('box4',true,true,true,false,'onDragFunction');\n";
print "dragDropObj.addTarget('dropBox','dropItems');\n";
print "dragDropObj.addTarget('leftColumn','dropItems');\n";
#print "dragDropObj.addTarget('dropBoxTest','dropItems');\n";
print "dragDropObj.init();\n";
print "</script>\n";
############## Java Script ############## 
print end_html();


__DATA__

#mainContainer{
width:600px;
margin:0 auto;
margin-top:10px;
border:1px solid #000;
padding:2px;
height:580px;
}

#leftColumn{
width:150px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:500px;
}

#rightColumn{
width:150px;
float:left;
border:1px solid #000;
background-color:#E2EBED;
padding:3px;
height:400px;
}

#rightColumnTest{
width:200px;
float:right;
margin:2px;
height:400px;
}

.dragableBox{
width:110px;
height:13px;
border:1px solid #000;
background-color:#FFF;
margin-bottom:5px;
padding:10px;
font-weight:bold;
text-align:center;
}
.dropBox{
width:150px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
height:500px;
}
.dropBoxTest{
width:150px;
border:1px solid #000;
background-color:#E2EBED;
height:400px;
margin-bottom:10px;
padding:3px;
overflow:auto;
}
a{
color:#F00;
}

.clear{
clear:both;
}
img{
border:0px;
}