X-Git-Url: https://code.delx.au/comingnext/blobdiff_plain/3664e2bde022c537fdc2ed62bab92c2e96e7238c..f282b8af51e5804dff13412d60e424a06e82c2db:/comingNext/index.html

diff --git a/comingNext/index.html b/comingNext/index.html
index 1eab9ed..a97e008 100644
--- a/comingNext/index.html
+++ b/comingNext/index.html
@@ -3,13 +3,15 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 
+/* -----------------------------------------------------------------------
+Note: you no longer have to edit this file, you can change the preferences 
+within the widget now!
+--------------------------------------------------------------------------- */
+
 <title>Coming Next</title>
 
 <style type="text/css">
-/* -----------------------------------------------------------------------
-here you can customize background color, font color, font size etc...
---------------------------------------------------------------------------- */
-.background { color:#ffffff; background-color:#000000; font:normal 12pt; } /* Defines the background of the widget. If you want to use a background image, set useBackgroundImage = true below */
+.background { color:#ffffff; background-color:#000000 } /* Defines the background of the widget. If you want to use a background image, set useBackgroundImage = true below */
 					/* for the default themes, black, gray, and light blue, codes are #292029, #e7dfe7, #009aef */
 .weekDay { }				/* Defines the appearance of all week day texts */
 .date { }				/* Defines the appearance of all date texts */
@@ -22,10 +24,6 @@ here you can customize background color, font color, font size etc...
 </style>
 
 <script>
-
-//---------------------------------------------------------------
-// The following section contains settings you may want to tweak
-//---------------------------------------------------------------
 var monthRange = 2;		// number of months to include in the event list
 var includeTodos = true;	// disable to remove ToDos from event list
 var useBackgroundImage = true;	// use background_portrait.png and background_landscape.png to fake transparency. Set to "false" to use a solid background color
@@ -46,15 +44,27 @@ var showNothingText = true;	// if set to "true", show a text if no events are in
 var nothingText = 'No further events within ' + monthRange + ' months';		// text to show when no events are in the list
 var enableDaylightSaving = true;// enable this if you are in a timezone that has daylight saving time (+1h)
 
+var cssStyle_background = "color:#ffffff; background-color:#000000"; // Defines the background of the widget. If you want to use a background image, set useBackgroundImage = true below. For the default themes, black, gray, and light blue, codes are #292029, #e7dfe7, #009aef
+var cssStyle_weekDay = "";			// Defines the appearance of all week day texts
+var cssStyle_date = "";				// Defines the appearance of all date texts
+var cssStyle_today = "color:#ff0000";		// Defines the appearance of "Today" text
+var cssStyle_tomorrow = "color:#0000ff";	// Defines the appearance of "Tomorrow" text
+var cssStyle_time = "";				// Defines the appearance of all time texts
+var cssStyle_now = "color:#ff00ff";		// Defines the appearance of "Now" text
+var cssStyle_description = "";			// Defines the appearance of all event descriptions
+var cssStyle_icon = "width:15px; height:15px";	// Defines size and appearance of icons
+
 //-------------------------------------------------------
 // Nothing of interest from here on...
 //-------------------------------------------------------
 var panelNum = 0; // use 1 for second panel
+var version = "1.23";
 var calendarService = null;
 var cacheEntriesHtml = [];
 var months_translated = [];
 var orientation = '';
 var now = new Date();
+var mode = 0; // 0 = homescreen, 1 = fullscreen, 2 = settings, 3 = about
 
 // vars for daylight saving time
 var daylightsavingWinter = 0;
@@ -447,7 +457,11 @@ function updateData()
 		var dateArr = [];
 		var entriesHtml = '<table>';
 		var eventIds = [];
-		var max = ((panelNum == 0) ? eventsPerWidget : 2 * eventsPerWidget);
+		var max;
+		if (mode == 0)
+			max = ((panelNum == 0) ? eventsPerWidget : 2 * eventsPerWidget);
+		else
+			max = 30; // we can display a lot more events in fullscreen mode
 
 		// the first outer loop iteration is for passed ToDos, the second loop is for all upcomming events (may also include ToDos)
 		for (var i=0; counter < max && i < entryLists.length; i++) {
@@ -546,8 +560,8 @@ function updateData()
 					}
 				}
 
-				// skip events for the first panel in case this is the second one
-				if (panelNum == 1 && counter < eventsPerWidget + 1) {
+				// skip events for the first panel in case this is the second one and we're not in fullscreen mode
+				if (mode == 0 && panelNum == 1 && counter < eventsPerWidget + 1) {
 					console.info('skipping (already in first widget) ' + entry.id);
 					continue;
 				}
@@ -589,7 +603,10 @@ function updateData()
 		if (showNothingText && entriesHtml == '<table></table>')
 			entriesHtml = '<div style="width:295px; height:75px; text-align:center; line-height:75px; overflow:visible;">' + nothingText + '</div>';
 		if (cacheEntriesHtml != entriesHtml) {
-			document.getElementById('calendarList').innerHTML = entriesHtml;
+			if (mode == 0)
+				document.getElementById('calendarList').innerHTML = entriesHtml;
+			else
+				document.getElementById('fullscreenCalendarList').innerHTML = entriesHtml;
 			cacheEntriesHtml = entriesHtml;
 		}
 	} catch(e) {
@@ -601,32 +618,28 @@ function updateData()
 function updateScreen()
 {
 	// check if opening fullscreen
-	if( window.innerHeight > 91)
-		launchCalendar();
-
-	if (useBackgroundImage) {
-		// check for screen rotation
-		if (orientation != 'portrait' && screen.width == 360 && screen.height == 640) {
-			window.widget.prepareForTransition("fade");
-			orientation = 'portrait';
-			document.getElementById('body').style.backgroundImage = 'url(background_' + orientation + '.png)';
-			document.getElementById('body').style.backgroundColor = 'none';
-			window.widget.performTransition();
-		} else if (orientation != 'landscape' && screen.width == 640 && screen.height == 360) {
-			window.widget.prepareForTransition("fade");
-			orientation = 'landscape';
-			document.getElementById('body').style.backgroundImage = 'url(background_' + orientation + '.png)';
-			document.getElementById('body').style.backgroundColor = 'none';
-			window.widget.performTransition();
-		}
+	if( window.innerHeight > 91 && mode == 0) {
+		mode = 1;
+		cacheEntriesHtml = '';
+		showFullscreen();
 	}
+	else if (window.innerHeight <= 91 && mode != 0) {
+		mode = 0;
+		cacheEntriesHtml = '';
+		showHomescreen();
+	}
+	
+	if (mode == 0)
+		updateHomescreen();
+	else if (mode == 1)
+		updateFullscreen();
 }
 
 function launchCalendar()
 {
 	try {
 		widget.openApplication(calendarApp, "");
-		window.close();
+		//window.close();
 	} catch(e) {
 		error('starting Calendar App');
 		return;
@@ -643,24 +656,475 @@ function init()
 		return;
 	}
 
+	loadSettings();
+	updateCssClasses();
 	collectLocales();
-	updateData();
+	//updateData();
 	requestNotification();
 	window.setInterval('updateData()', 1000 * 60 * updateDataInterval);
 
+	mode = 0;
+	showHomescreen();
 	updateScreen();
 	if (useBackgroundImage)
 		// check for screen rotation every 3 secs
 		window.setInterval('updateScreen()', 1000 * 3);
 }
 
+function createMenu()
+{
+	window.menu.setLeftSoftkeyLabel("",null);
+	window.menu.setRightSoftkeyLabel("",null);
+	var id = 0;
+	var menuSettings = new MenuItem("Settings", id++);
+	var menuCallApp = new MenuItem("Open Calendar App", id++);
+	var menuAbout = new MenuItem("About", id++);
+	menuSettings.onSelect = showSettings;
+	menuAbout.onSelect = showAbout;
+	menuCallApp.onSelect = launchCalendar;
+	window.menu.clear();
+	window.menu.append(menuCallApp);
+	window.menu.append(menuSettings);
+	window.menu.append(menuAbout);	
+}
+
+function showSettings()
+{
+	mode = 2;
+	document.getElementById("homescreenView").style.display = "none";
+	document.getElementById("fullscreenView").style.display = "none";
+	document.getElementById("aboutView").style.display = "none";
+	document.getElementById("settingsView").style.display = "block";
+	
+	window.menu.setLeftSoftkeyLabel("Save", function()
+	{
+		//document.forms[0].elements["settings.monthRange"].value = monthRange;
+		monthRange = parseInt(document.forms[0].elements["settings.monthRange"].value);
+		if (monthRange < 0 || monthRange > 100)
+			monthRange = 2;
+		includeTodos = document.forms[0].elements["settings.includeTodos"].checked;
+		useBackgroundImage = document.forms[0].elements["settings.useBackgroundImage"].checked;
+		showCombinedDateTime = document.forms[0].elements["settings.showCombinedDateTime"].checked;
+		showLocation = document.forms[0].elements["settings.showLocation"].checked;
+		showTodayAsText = document.forms[0].elements["settings.showTodayAsText"].checked;
+		todayText = document.forms[0].elements["settings.todayText"].value;
+		tomorrowText = document.forms[0].elements["settings.tomorrowText"].value;
+		showNowAsText = document.forms[0].elements["settings.showNowAsText"].checked;
+		nowText = document.forms[0].elements["settings.nowText"].value;
+		dateSeparator = document.forms[0].elements["settings.dateSeparator"].value;
+		dateFormat = document.forms[0].elements["settings.dateFormat"].value;
+		if (dateFormat != 'auto' && dateFormat != 'DDMM' && dateFormat != 'MMDD')
+			dateFormat = 'auto';
+		weekDayLength = Number(parseInt(document.forms[0].elements["settings.weekDayLength"].value));
+		if (weekDayLength < 0 || weekDayLength > 20)
+			weekDayLength = 2;
+		updateDataInterval = parseInt(document.forms[0].elements["settings.updateDataInterval"].value);
+		if (updateDataInterval < 1 || updateDataInterval > 1000)
+			updateDataInterval = 5;
+		calendarApp = parseInt(document.forms[0].elements["settings.calendarApp"].value);
+		eventsPerWidget = parseInt(document.forms[0].elements["settings.eventsPerWidget"].value);
+		if (eventsPerWidget < 1 || eventsPerWidget > 10)
+			eventsPerWidget = 4;
+		showNothingText = document.forms[0].elements["settings.showNothingText"].checked;
+		nothingText = document.forms[0].elements["settings.nothingText"].value;
+		enableDaylightSaving = document.forms[0].elements["settings.enableDaylightSaving"].checked;
+		
+		cssStyle_background = document.forms[0].elements["settings.cssStyle_background"].value;
+		cssStyle_weekDay = document.forms[0].elements["settings.cssStyle_weekDay"].value;
+		cssStyle_date = document.forms[0].elements["settings.cssStyle_date"].value;
+		cssStyle_today = document.forms[0].elements["settings.cssStyle_today"].value;
+		cssStyle_tomorrow = document.forms[0].elements["settings.cssStyle_tomorrow"].value;
+		cssStyle_time = document.forms[0].elements["settings.cssStyle_time"].value;
+		cssStyle_now = document.forms[0].elements["settings.cssStyle_now"].value;
+		cssStyle_description = document.forms[0].elements["settings.cssStyle_description"].value;
+		cssStyle_icon = document.forms[0].elements["settings.cssStyle_icon"].value;
+				
+		updateCssClasses();
+		
+		saveSettings();
+		
+		mode = 1;
+		showFullscreen();
+	});
+	window.menu.setRightSoftkeyLabel("Cancel", function()
+	{
+		mode = 1;
+		showFullscreen();
+	});
+	
+	document.getElementById("settingsList").innerHTML = 
+	'<form>' +
+	'<table><tr><td>Month Range:<br><input class="textInput" name="settings.monthRange" type="text" value="' + monthRange + '" /></td>' + printHintBox('number of months to include in the event list') +
+	'<hr><table><tr><td>Include ToDos:<br><input name="settings.includeTodos" type="checkbox" value="true" ' + (includeTodos ? 'checked="checked"' : '') + '/></td>' + printHintBox('disable to remove ToDos from event list') +
+	'<hr><table><tr><td>Use Background Image:<br><input name="settings.useBackgroundImage" type="checkbox" value="true" ' + (useBackgroundImage ? 'checked="checked"' : '') + '/></td>' + printHintBox('use background_portrait.png and background_landscape.png to fake transparency. Disable to use a solid background color') +
+	'<hr><table><tr><td>Show Combined Date & Time:<br><input name="settings.showCombinedDateTime" type="checkbox" value="true" ' + (showCombinedDateTime ? 'checked="checked"' : '') + '/></td>' + printHintBox('only show the time for events happening today, otherwise just show the date') +
+	'<hr><table><tr><td>Show Location:<br><input name="settings.showLocation" type="checkbox" value="true" ' + (showLocation ? 'checked="checked"' : '') + '/></td>' + printHintBox('show the location for meeting events') +
+	'<hr><table><tr><td>Show Today As Text:<br><input name="settings.showTodayAsText" type="checkbox" value="true" ' + (showTodayAsText ? 'checked="checked"' : '') + '/></td>' + printHintBox('if enabled, the current date will be shown as "Today" instead of "31.12"') +
+	'<hr><table><tr><td>"Today" Text:<br><input class="textInput" name="settings.todayText" type="text" value="' + todayText + '" /></td>' + printHintBox('text to display for "Today"') + '</tr>' +
+	'<hr><table><tr><td>"Tomorrow" Text:<br><input class="textInput" name="settings.tomorrowText" type="text" value="' + tomorrowText + '" /></td>' + printHintBox('text to display for "Tomorrow"') +
+	'<hr><table><tr><td>Show "Now" As Text:<br><input name="settings.showNowAsText" type="checkbox" value="true" ' + (showNowAsText ? 'checked="checked"' : '') + '/></td>' + printHintBox('if enabled, the appointment time will be shown as "Now" instead of "12:00"') +
+	'<hr><table><tr><td>"Now" Text:<br><input class="textInput" name="settings.nowText" type="text" value="' + nowText + '" /></td>' + printHintBox('text to display for "Now"') +
+	'<hr><table><tr><td>Date Separator:<br><input class="textInput" name="settings.dateSeparator" type="text" value="' + dateSeparator + '" /></td>' + printHintBox('separator for dates. e.g. "31.12" or "31/12"') +
+	'<hr><table><tr><td>Date Format:<br><select name="settings.dateFormat" size="1">' + 
+		'<option label="auto detect"' + (dateFormat == 'auto' ? ' selected="selected"' : '') + '>auto</option>' +
+		'<option label="MMDD"' + (dateFormat == 'MMDD' ? ' selected="selected"' : '') + '>MMDD</option>' +
+		'<option label="DDMM"' + (dateFormat == 'DDMM' ? ' selected="selected"' : '') + '>DDMM</option>' +
+		'</select></div>' + printHintBox('how dates will be displayed. \'auto\' will autodetect your phone\'s date format setting. \'MMDD\' will write month first, \'DDMM\' will write day first') + '</tr>' +
+	'<hr><table><tr><td>Weekday Length:<br><input class="textInput" name="settings.weekDayLength" type="text" value="' + weekDayLength + '" /></td>' + printHintBox('defines how many characters of the weekday will be shown. E.g. 2 will cut "Friday" to "Fr"') +
+	'<hr><table><tr><td>Update Data Interval:<br><input class="textInput" name="settings.updateDataInterval" type="text" value="' + updateDataInterval + '" /></td>' + printHintBox('how many minutes to wait before updating the displayed data. The higher the number, the less battery is used') +
+	'<hr><table><tr><td>Calendar Application UID:<br><input class="textInput" name="settings.calendarApp" type="text" value="0x' + calendarApp.toString(16) + '" /></td>' + printHintBox('UID of the calendar app to run when clicking the widget. 0x10005901 = buildin calendar, 0x20004ec1 = Epocware Handy Calendar') +
+	'<hr><table><tr><td>Events Per Widget:<br><input class="textInput" name="settings.eventsPerWidget" type="text" value="' + eventsPerWidget + '" /></td>' + printHintBox('number of events to show per widget. Default is 4') +
+	'<hr><table><tr><td>Show Nothing Text:<br><input name="settings.showNothingText" type="checkbox" value="true" ' + (showNothingText ? 'checked="checked"' : '') + '/></td>' + printHintBox('if enabled, show a text if no events are in the list') +
+	'<hr><table><tr><td>"nothing" Text:<br><input class="textInput" name="settings.nothingText" type="text" value="' + nothingText + '" /></td>' + printHintBox('text to show when no events are in the list') +
+	'<hr><table><tr><td>Enable Daylight Saving:<br><input name="settings.enableDaylightSaving" type="checkbox" value="true" ' + (enableDaylightSaving ? 'checked="checked"' : '') + '/></td>' + printHintBox('enable this if you are in a timezone that has daylight saving time (+1h)') +
+	'<hr style="margin-bottom:60px;"><h1 class="title">CSS Styles</h1>' +
+	'<hr><table><tr><td>.background:<br><input class="textInput" name="settings.cssStyle_background" type="text" value="' + cssStyle_background + '" /></td>' + printHintBox('Defines the background of the widget. If you want to use a background image, enable "useBackgroundImage" instead. For the default themes, black, gray, and light blue, codes are #292029, #e7dfe7, #009aef') +
+	'<hr><table><tr><td>.weekDay:<br><input class="textInput" name="settings.cssStyle_weekDay" type="text" value="' + cssStyle_weekDay + '" /></td>' + printHintBox('Defines the appearance of all week day texts') +
+	'<hr><table><tr><td>.date:<br><input class="textInput" name="settings.cssStyle_date" type="text" value="' + cssStyle_date + '" /></td>' + printHintBox('Defines the appearance of all date texts') +
+	'<hr><table><tr><td>.today:<br><input class="textInput" name="settings.cssStyle_today" type="text" value="' + cssStyle_today + '" /></td>' + printHintBox('Defines the appearance of "Today" text') +
+	'<hr><table><tr><td>.tomorrow:<br><input class="textInput" name="settings.cssStyle_tomorrow" type="text" value="' + cssStyle_tomorrow + '" /></td>' + printHintBox('Defines the appearance of "Tomorrow" text') +
+	'<hr><table><tr><td>.time:<br><input class="textInput" name="settings.cssStyle_time" type="text" value="' + cssStyle_time + '" /></td>' + printHintBox('Defines the appearance of all time texts') +
+	'<hr><table><tr><td>.now:<br><input class="textInput" name="settings.cssStyle_now" type="text" value="' + cssStyle_now + '" /></td>' + printHintBox('Defines the appearance of "Now" text') +
+	'<hr><table><tr><td>.description:<br><input class="textInput" name="settings.cssStyle_description" type="text" value="' + cssStyle_description + '" /></td>' + printHintBox('Defines the appearance of all event descriptions') +
+	'<hr><table><tr><td>.icon:<br><input class="textInput" name="settings.cssStyle_icon" type="text" value="' + cssStyle_icon + '" /></td>' + printHintBox('Defines size and appearance of icons') +
+	'<hr style="margin-bottom:60px;"><input name="reset" type="button" value="Restore Defaults" onclick="javascript:restoreDefaultSettings();showSettings();" />' +
+	'</form>';
+}
+
+function changeCssClass(classname, properties)
+{
+	for(var i = 0; i < document.styleSheets[0]['cssRules'].length; i++)
+	{
+		if (document.styleSheets[0]['cssRules'][i].selectorText == classname) {
+			//alert(document.styleSheets[0]['cssRules'][i].cssText);
+			//document.styleSheets[0]['cssRules'][i].cssText = classname + ' { ' + properties + ' }';
+			document.styleSheets[0].deleteRule(i);
+			//document.styleSheets[0].insertRule(classname + ' { ' + properties + ' }', 0);
+			document.styleSheets[0].insertRule(classname + ' { ' + properties + ' }', document.styleSheets[0]['cssRules'].length);
+			//document.styleSheets[0]['cssRules'][i].style.cssText = classname + ' { ' + properties + ' }';
+			//alert(document.styleSheets[0]['cssRules'][i].cssText);
+			//alert(document.styleSheets[0]['cssRules'][i].cssText + '\n'+ classname + ' { ' + properties + ' }');
+			break;
+		}
+	}
+}
+
+function updateCssClasses()
+{
+	changeCssClass(".background", cssStyle_background);
+	changeCssClass(".weekDay", cssStyle_weekDay);
+	changeCssClass(".date", cssStyle_date);
+	changeCssClass(".today", cssStyle_today);
+	changeCssClass(".tomorrow", cssStyle_tomorrow);
+	changeCssClass(".time", cssStyle_time);
+	changeCssClass(".now", cssStyle_now);
+	changeCssClass(".description", cssStyle_description);
+	changeCssClass(".icon", cssStyle_icon);
+}
+
+function restoreDefaultSettings()
+{
+	monthRange = 2;
+	includeTodos = true;
+	useBackgroundImage = true;
+	showCombinedDateTime = false;
+	showLocation = true;
+	showTodayAsText = true;
+	todayText = 'Today';
+	tomorrowText = 'Tomorrow';
+	showNowAsText = true;
+	nowText = 'Now';
+	dateSeparator = '.';
+	dateFormat = 'auto'
+	weekDayLength = 2;
+	updateDataInterval = 5;
+	calendarApp = 0x10005901;
+	eventsPerWidget = 4;
+	showNothingText = true;
+	nothingText = 'No further events within ' + monthRange + ' months';
+	enableDaylightSaving = true;
+
+	cssStyle_background = "color:#ffffff; background-color:#000000";
+	cssStyle_weekDay = "";
+	cssStyle_date = "";
+	cssStyle_today = "color:#ff0000";
+	cssStyle_tomorrow = "color:#0000ff";
+	cssStyle_time = "";
+	cssStyle_now = "color:#ff00ff";
+	cssStyle_description = "";
+	cssStyle_icon = "width:15px; height:15px";
+}
+
+function loadSettings()
+{
+	if (widget.preferenceForKey('monthRange'))
+		monthRange = Number(widget.preferenceForKey('monthRange'));
+	else
+		monthRange = 2;
+	
+	if (widget.preferenceForKey('includeTodos'))
+		includeTodos = (widget.preferenceForKey('includeTodos') == 'true');
+	else
+		includeTodos = true;
+	
+	if (widget.preferenceForKey('useBackgroundImage'))
+		useBackgroundImage = (widget.preferenceForKey('useBackgroundImage') == 'true');
+	else
+		useBackgroundImage = true;
+	
+	if (widget.preferenceForKey('showCombinedDateTime'))
+		showCombinedDateTime = (widget.preferenceForKey('showCombinedDateTime') == 'true');
+	else
+		showCombinedDateTime = false;
+	
+	if (widget.preferenceForKey('showLocation'))
+		showLocation = (widget.preferenceForKey('showLocation') == 'true');
+	else
+		showLocation = true;
+	
+	if (widget.preferenceForKey('showTodayAsText'))
+		showTodayAsText = (widget.preferenceForKey('showTodayAsText') == 'true');
+	else
+		showTodayAsText = true;
+	
+	if (widget.preferenceForKey('todayText'))
+		todayText = widget.preferenceForKey('todayText');
+	else
+		todayText = 'Today';
+	
+	if (widget.preferenceForKey('tomorrowText'))
+		tomorrowText = widget.preferenceForKey('tomorrowText');
+	else
+		tomorrowText = 'Tomorrow';
+	
+	if (widget.preferenceForKey('showNowAsText'))
+		showNowAsText = (widget.preferenceForKey('showNowAsText') == 'true');
+	else
+		showNowAsText = true;
+	
+	if (widget.preferenceForKey('nowText'))
+		nowText = widget.preferenceForKey('nowText');
+	else
+		nowText = 'Now';
+	
+	if (widget.preferenceForKey('dateSeparator'))
+		dateSeparator = widget.preferenceForKey('dateSeparator');
+	else
+		dateSeparator = '.';
+	
+	if (widget.preferenceForKey('dateFormat'))
+		dateFormat = widget.preferenceForKey('dateFormat');
+	else
+		dateFormat = 'auto';
+	
+	if (widget.preferenceForKey('weekDayLength'))
+		weekDayLength = Number(widget.preferenceForKey('weekDayLength'));
+	else
+		weekDayLength = 2;
+	
+	if (widget.preferenceForKey('updateDataInterval'))
+		updateDataInterval = Number(widget.preferenceForKey('updateDataInterval'));
+	else
+		updateDataInterval = 5;
+	
+	if (widget.preferenceForKey('calendarApp'))
+		calendarApp = Number(widget.preferenceForKey('calendarApp'));
+	else
+		calendarApp = 0x10005901;
+	
+	if (widget.preferenceForKey('eventsPerWidget'))
+		eventsPerWidget = Number(widget.preferenceForKey('eventsPerWidget'));
+	else
+		eventsPerWidget = 4;
+	
+	if (widget.preferenceForKey('showNothingText'))
+		showNothingText = (widget.preferenceForKey('showNothingText') == 'true');
+	else
+		showNothingText = true;
+	
+	if (widget.preferenceForKey('nothingText'))
+		nothingText = widget.preferenceForKey('nothingText');
+	else
+		nothingText = 'No further events within ' + monthRange + ' months';
+	
+	if (widget.preferenceForKey('enableDaylightSaving'))
+		enableDaylightSaving = (widget.preferenceForKey('enableDaylightSaving') == 'true');
+	else
+		enableDaylightSaving = true;
+	
+	// CSS styles
+		
+	if (widget.preferenceForKey('cssStyle_background'))
+		cssStyle_background = widget.preferenceForKey('cssStyle_background');
+	else
+		cssStyle_background = "color:#ffffff; background-color:#000000";
+		
+	if (widget.preferenceForKey('cssStyle_weekDay'))
+		cssStyle_weekDay = widget.preferenceForKey('cssStyle_weekDay');
+	else
+		cssStyle_weekDay = "";
+		
+	if (widget.preferenceForKey('cssStyle_date'))
+		cssStyle_date = widget.preferenceForKey('cssStyle_date');
+	else
+		cssStyle_date = "";
+		
+	if (widget.preferenceForKey('cssStyle_today'))
+		cssStyle_today = widget.preferenceForKey('cssStyle_today');
+	else
+		cssStyle_today = "color:#ff0000";
+	
+	if (widget.preferenceForKey('cssStyle_tomorrow'))
+		cssStyle_tomorrow = widget.preferenceForKey('cssStyle_tomorrow');
+	else
+		cssStyle_tomorrow = "color:#0000ff";
+	
+	if (widget.preferenceForKey('cssStyle_time'))
+		cssStyle_time = widget.preferenceForKey('cssStyle_time');
+	else
+		cssStyle_time = "";
+	
+	if (widget.preferenceForKey('cssStyle_now'))
+		cssStyle_now = widget.preferenceForKey('cssStyle_now');
+	else
+		cssStyle_now = "color:#ff00ff";
+	
+	if (widget.preferenceForKey('cssStyle_description'))
+		cssStyle_description = widget.preferenceForKey('cssStyle_description');
+	else
+		cssStyle_description = "";
+	
+	if (widget.preferenceForKey('cssStyle_icon'))
+		cssStyle_icon = widget.preferenceForKey('cssStyle_icon');
+	else
+		cssStyle_icon = "width:15px; height:15px";
+}
+
+function saveSettings()
+{
+	widget.setPreferenceForKey(monthRange.toString(), 'monthRange');
+	widget.setPreferenceForKey(includeTodos ? 'true' : 'false', 'includeTodos');
+	widget.setPreferenceForKey(useBackgroundImage ? 'true' : 'false', 'useBackgroundImage');
+	widget.setPreferenceForKey(showCombinedDateTime ? 'true' : 'false', 'showCombinedDateTime');
+	widget.setPreferenceForKey(showLocation ? 'true' : 'false', 'showLocation');
+	widget.setPreferenceForKey(showTodayAsText ? 'true' : 'false', 'showTodayAsText');
+	widget.setPreferenceForKey(todayText, 'todayText');
+	widget.setPreferenceForKey(tomorrowText, 'tomorrowText');
+	widget.setPreferenceForKey(showNowAsText ? 'true' : 'false', 'showNowAsText');
+	widget.setPreferenceForKey(nowText, 'nowText');
+	widget.setPreferenceForKey(dateSeparator, 'dateSeparator');
+	widget.setPreferenceForKey(dateFormat, 'dateFormat');
+	widget.setPreferenceForKey(weekDayLength.toString(), 'weekDayLength');
+	widget.setPreferenceForKey(updateDataInterval.toString(), 'updateDataInterval');
+	widget.setPreferenceForKey(calendarApp.toString(), 'calendarApp');
+	widget.setPreferenceForKey(eventsPerWidget.toString(), 'eventsPerWidget');
+	widget.setPreferenceForKey(showNothingText ? 'true' : 'false', 'showNothingText');
+	widget.setPreferenceForKey(nothingText, 'nothingText');
+	widget.setPreferenceForKey(enableDaylightSaving ? 'true' : 'false', 'enableDaylightSaving');
+	
+	widget.setPreferenceForKey(cssStyle_background, 'cssStyle_background');
+	widget.setPreferenceForKey(cssStyle_weekDay, 'cssStyle_weekDay');
+	widget.setPreferenceForKey(cssStyle_date, 'cssStyle_date');
+	widget.setPreferenceForKey(cssStyle_today, 'cssStyle_today');
+	widget.setPreferenceForKey(cssStyle_tomorrow, 'cssStyle_tomorrow');
+	widget.setPreferenceForKey(cssStyle_time, 'cssStyle_time');
+	widget.setPreferenceForKey(cssStyle_now, 'cssStyle_now');
+	widget.setPreferenceForKey(cssStyle_description, 'cssStyle_description');
+	widget.setPreferenceForKey(cssStyle_icon, 'cssStyle_icon');
+}
+
+function toggleVisibility(elementId)
+{
+	if (document.getElementById(elementId).style.display == "none")
+		document.getElementById(elementId).style.display = "block";
+	else
+		document.getElementById(elementId).style.display = "none";
+}
+
+var uniqueId = 0;
+function printHintBox(text)
+{
+	uniqueId++;
+	return '<td width="1%" align="right" onclick="javascript:toggleVisibility(\'info' + uniqueId + '\')">Help</td></tr></table>'+
+	       '<div class="settingsInfo" id="info' + uniqueId + '">' + text + '</div>';
+}
+
+function showAbout()
+{
+	mode = 3;
+	document.getElementById("homescreenView").style.display = "none";
+	document.getElementById("fullscreenView").style.display = "none";
+	document.getElementById("aboutView").style.display = "block";
+	document.getElementById("settingsView").style.display = "none";
+	
+	window.menu.setLeftSoftkeyLabel(" ", function(){});
+	window.menu.setRightSoftkeyLabel("Back", function()
+	{
+		mode = 1;
+		showFullscreen();
+	});
+	
+	//document.getElementById("aboutView").innerHTML = 'aboutView';
+	document.getElementById("name").innerHTML = "Coming Next " + version;
+}
+
+function updateFullscreen()
+{
+}
+
+function showFullscreen()
+{
+	document.getElementById("homescreenView").style.display = "none";
+	document.getElementById("fullscreenView").style.display = "block";
+	document.getElementById("aboutView").style.display = "none";
+	document.getElementById("settingsView").style.display = "none";
+	createMenu();
+	updateData();
+}
+
+function updateHomescreen()
+{
+	if (useBackgroundImage) {
+		// check for screen rotation
+		if (orientation != 'portrait' && screen.width == 360 && screen.height == 640) {
+			window.widget.prepareForTransition("fade");
+			orientation = 'portrait';
+			document.getElementById('body').style.backgroundImage = 'url(background_' + orientation + '.png)';
+			document.getElementById('body').style.backgroundColor = 'none';
+			window.widget.performTransition();
+		} else if (orientation != 'landscape' && screen.width == 640 && screen.height == 360) {
+			window.widget.prepareForTransition("fade");
+			orientation = 'landscape';
+			document.getElementById('body').style.backgroundImage = 'url(background_' + orientation + '.png)';
+			document.getElementById('body').style.backgroundColor = 'none';
+			window.widget.performTransition();
+		}
+	}
+}
+
+function showHomescreen()
+{
+	document.getElementById("homescreenView").style.display = "block";
+	document.getElementById("fullscreenView").style.display = "none";
+	document.getElementById("aboutView").style.display = "none";
+	document.getElementById("settingsView").style.display = "none";
+	updateData();
+}
+
 </script>
 
 <style type="text/css">
 table { margin:0px; padding:0px; border-spacing:0px; }
 td { padding:0px 5px 0px 0px; white-space:nowrap; overflow:hidden; }
+hr { w_idth:100%; color:#ffffff; background-color:#ffffff; height:1px; text-align:left; border-style:none; }
+.settingsInfo { display:none; font-style:italic; }
+.title { font-weight:bold; font-size:14pt; }
+.textInput { width:90%; }
 #homescreenView { width: 315px; height:91px; overflow:hidden; }
 #calendarList { position:absolute; left:10px; top:4px; width:295px; height:75px; overflow:hidden; }
+#name { text-align:center; }
+#appicon { display: block; margin-left: auto; margin-right: auto; margin-top: 50px; }
+#smallappicon { width:22px; height:22px; margin-right:10px; float:left; }
 </style>
 
 </head>
@@ -669,6 +1133,27 @@ td { padding:0px 5px 0px 0px; white-space:nowrap; overflow:hidden; }
 <div id="homescreenView">
 	<div id="calendarList"></div>
 </div>
+<div id="fullscreenView" style="display:none">
+	<img src="Icon.png" id="smallappicon" onClick="javascript:launchCalendar()">
+	<h1 class="title" onClick="javascript:launchCalendar()">Coming Next</h1>
+	<hr />
+	<div id="fullscreenCalendarList">loading...</div>
+</div>
+<div id="settingsView" style="display:none">
+	<img src="Icon.png" id="smallappicon">
+	<h1 class="title">Settings</h1>
+	<hr />
+	<div id="settingsList"></div>
+</div>
+<div id="aboutView" style="display:none">
+	<img src="Icon.png" id="appicon">
+	<h1 id="name">Coming Next</h1>
+	<hr />
+	<p>Created by Dr. Cochambre and Michael Prager.</p>
+	<p>This software is open source and licensed under the GPLv3.</p>
+	<p>Visit https://sourceforge.net/projects/comingnext/ for free updates.</p>
+	<hr />
+</div>
 </body>
 
 </html>
