<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>FreeFinder</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<style>
#lesson_widget { list-style-type: none; margin: 0; padding: 0; width: 50%; font-size: 62.5%; }
#lesson_widget li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#lesson_widget li span { position: absolute; margin-left: -1.3em; }
</style>
<script>
$(function() {
var TagList_Lesson = [
"Maths",
"English",
"ICT",
"Science",
"Technology",
];
$( "#new_tag-title" ).autocomplete({
source: TagList_Lesson
});
var TagList_Teacher = [""];
$( "#new_tag-teacher" ).autocomplete({
source: TagList_Teacher
});
var TagList_Room = [""];
$( "#new_tag-room" ).autocomplete({
source: TagList_Room
});
$( "#lesson_widget" ).sortable();
$( "#lesson_widget" ).disableSelection();
var buttonCount = 0;
$('#create_new_lesson_button').click(function() {
var LessonTitle = $('#new_tag-title').val();
var LessonTeacher = $('#new_tag-teacher').val();
var LessonRoom = $('#new_tag-room').val();
//$("#lesson_widget").append( '<li class="ui-state-default"><div><span class="ui-icon ui-icon-arrowthick-2-n-s"></span>' + LessonTitle + '<br />' + LessonTeacher + '<br />' + LessonRoom + '</div></li>' );
$("#lesson_widget").append( '<input type="submit" id="lesson_button" data-id=' + buttonCount + ' value="' + LessonTitle + '
' + LessonTeacher + '
' + LessonRoom + '" class="ui-button ui-widget ui-state-default ui-corner-all" role="button" aria-disabled="false"/>');
TagList_Lesson.push(LessonTitle);
TagList_Teacher.push(LessonTeacher);
TagList_Room.push(LessonRoom);
buttonCount ++;
});
$('#lesson-widget button').click(function() { alert("asd"); } );
});
</script>
</head>
<body>
<div class="ui-widget" id="create_new_lesson_widget">
<table border="0">
<tr>
<td><label for="tags">Lesson </label></td>
<td><input type="text" id="new_tag-title" /></td>
</tr>
<tr>
<td><label for="tags">Teacher </label></td>
<td><input type="text" id="new_tag-teacher" /></td><td><input type="submit" id="create_new_lesson_button" value="Add lesson" /></td>
</tr>
<tr>
<td><label for="tags">Room </label></td>
<td><input type="text" id="new_tag-room" /></td>
</tr>
</table>
</div>
<div class="ui-widget" id="lesson_widget"> <!-- Holds the lessons -->
</div>
<div class="ui-widget" id="timetable"></div>
</body>
</html>