]> code.delx.au - comingnext/commitdiff
added fullscreen mode and settings menu (WOOHOOO)
authorMichael Prager <michael@pragers.de>
Fri, 18 Dec 2009 02:16:49 +0000 (03:16 +0100)
committerMichael Prager <michael@pragers.de>
Fri, 18 Dec 2009 02:16:49 +0000 (03:16 +0100)
comingNext/index.html
comingNextB/index.html

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