var originalrow = 0;
var originalcell = 0;

$(document).ready(function() {
	$('#time').jclock();
	showHomeScreen();

});

function showHomeScreen() {
	$('#content').html("");

	var a = $('#content').attr('clientHeight');

	var b = $('#content').attr('clientWidth');

	$('#footer').html("");
	var apps = 0, sys = 0;
	$("#dataisle tr").each(
			function(i) {
				var link = $("<td></td>").attr('class', 'app');
				var img = $("<img></img>").attr('src',
						'images/' + $(this).find("td:eq(1)").text());
				link.append(img);
				var name = $("<p></p>").html($(this).attr("title"));
				link.append(name);

				link.bind("dblclick", function() {
					showAppScreen(this);
				});

				if ($(this).find("td:eq(0)").text() == 'normal') {
					if (apps % 4 == 0) {
						$('#content').append($("<tr></tr>"));
					}

					$('#content').find("tr:last").append(link);
					apps++;
				} else {
					if (sys % 4 == 0) {
						$('#footer').append($("<tr></tr>"));
					}
					$('#footer').find("tr:last").append(link);
					sys++;
				}

			});
	while (apps < 28) {
		var link = $("<td></td>").attr('class', 'app');
		if (apps % 4 == 0) {
			$('#content').append($("<tr></tr>"));
		}

		$('#content').find("tr:last").append(link);
		apps++;
	}

	startdnd();
}

function showAppScreen(app2) {
	var name = $(app2).find("p").text();

	var sapp = $("#dataisle table tr[title=" + name + "]");


	var appInfo = $("<tr></tr>").attr('class', 'appinfo');

	appInfo.append($("<td></td>").append(
			$("<img></img>").attr('src',
					'images/' + $(sapp).find("td:eq(1)").text())));
	appInfo.append($("<td></td>").append(
			$("<span></span>").attr('class', 'appname').text(
					$(sapp).attr("title"))));
	appInfo.append($("<td></td>").append(
			$("<img></img>").attr('class', 'right').attr('src',
					'images/power.png').attr('title', 'Zurück').click(
					function() {
						showHomeScreen();
					})));

	var appText = $("<tr></tr>").attr('class', 'apptext').append(
			$("<td></td>").attr("colspan", "3").html(
					$(sapp).find("td:eq(4)").html()));
	var appBottom = $("<tr></tr>").attr('class', 'appbtm');
	appBottom.append($("<td></td>").attr("colspan", "3").append(
			$("<span></span>").attr('class', 'version').text(
					"version   : " + $(sapp).find("td:eq(2)").text())).append(
			$("<span></span>").attr('class', 'author').text(
					" by author : " + $(sapp).find("td:eq(3)").text())));

	$('#content').html("");
	$('#content').append(appInfo);
	$('#content').append(appText);
	$('#content').append(appBottom);

}

function startdnd() {
	$('#content tr td').each(
			function(a) {
				$(this).draggable(
						{
							grid : [ 100, 100 ],
							start : function(event, ui) {
								// get the position of the one piece dragged
								originalrow = $("#content tr").index(
										ui.helper.parent());
								originalcell = $(
										"#content tr:eq(" + originalrow
												+ ") td").index(ui.helper);

							}
						});

			});
	$('#content tr td').each(
			function(a) {
				$(this).droppable(
						{
							drop : function(ev, ui) {
								var newcell = $("#content td:hover");
								var temp = $(
										"#content tr:eq(" + originalrow
												+ ") td:eq(" + originalcell
												+ ")").html();

								$(
										"#content tr:eq(" + originalrow
												+ ") td:eq(" + originalcell
												+ ")").html($(newcell).html());
								$("#content tr:eq(" + originalrow
										+ ") td:eq(" + originalcell
										+ ")").bind("dblclick", function() {
									showAppScreen(this);
								});
								$(newcell).html(temp);
								
								$(newcell).bind("dblclick", function() {
									showAppScreen(this);
								});
							}
						});
			});

}