commit 6358ba5e1d3950755b34049aab005b87de260397
Author: zhongjin <zhongjin@onenetcom.cn>
Date:   Sat Sep 22 10:13:20 2018 +0800

    Initial commit

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..07e6e47
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+/node_modules
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..7e1b51c
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,6 @@
+Gruntfile.js
+tasks
+node_modules
+test
+.travis.yml
+appveyor.yml
diff --git a/.travis.yml b/.travis.yml
new file mode 100644
index 0000000..c05adf9
--- /dev/null
+++ b/.travis.yml
@@ -0,0 +1,7 @@
+os:
+  - linux
+language: node_js
+node_js:
+  - '4'
+  - '8'
+  - '10'
diff --git a/Gruntfile.js b/Gruntfile.js
new file mode 100644
index 0000000..52266be
--- /dev/null
+++ b/Gruntfile.js
@@ -0,0 +1,157 @@
+// To use this file in WebStorm, right click on the file name in the Project Panel (normally left) and select "Open Grunt Console"
+
+/** @namespace __dirname */
+/* jshint -W097 */// jshint strict:false
+/*jslint node: true */
+"use strict";
+
+module.exports = function (grunt) {
+
+    var srcDir    = __dirname + '/';
+    var dstDir    = srcDir + '.build/';
+    var pkg       = grunt.file.readJSON('package.json');
+    var iopackage = grunt.file.readJSON('io-package.json');
+    var version   = (pkg && pkg.version) ? pkg.version : iopackage.common.version;
+
+    console.log(srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js/' + pkg.name.substring('yunkong2.vis-'.length) + '.js');
+    // Project configuration.
+    grunt.initConfig({
+        pkg: pkg,
+        clean: {
+            all: ['tmp/*.json', 'tmp/*.zip', 'tmp/*.jpg', 'tmp/*.jpeg', 'tmp/*.png',
+                  dstDir + '*.json', dstDir + '*.zip', dstDir + '*.jpg', dstDir + '*.jpeg', dstDir + '*.png']
+        },
+        replace: {
+            core: {
+                options: {
+                    patterns: [
+                        {
+                            match: /version: *"[\.0-9]*"/g,
+                            replacement: 'version: "' + version + '"'
+                        },
+                        {
+                            match: /"version":\s*"[\.0-9]*",/g,
+                            replacement: '"version": "' + version + '",'
+                        },
+                        {
+                            match: /version: *"[\.0-9]*",/g,
+                            replacement: 'version: "' + version + '",'
+                        }
+                    ]
+                },
+                files: [
+                    {
+                        expand:  true,
+                        flatten: true,
+                        src:     [
+                            srcDir + 'package.json',
+                            srcDir + 'io-package.json'
+                        ],
+                        dest:    srcDir
+                    },
+                    {
+                        expand:  true,
+                        flatten: true,
+                        src:     [
+                            srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '.html'
+                        ],
+                        dest:    srcDir + 'widgets'
+                    },
+                    {
+                        expand:  true,
+                        flatten: true,
+                        src:     [
+                            srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js/' + pkg.name.substring('yunkong2.vis-'.length) + '.js'
+                        ],
+                        dest:    srcDir + 'widgets/' + pkg.name.substring('yunkong2.vis-'.length) + '/js/'
+                    }
+                ]
+            }
+        },
+        // Javascript code styler
+        jscs:   require(__dirname + '/tasks/jscs.js'),
+        // Lint
+        jshint: require(__dirname + '/tasks/jshint.js'),
+        http: {
+            get_hjscs: {
+                options: {
+                    url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.js-controller/master/tasks/jscs.js'
+                },
+                dest: 'tasks/jscs.js'
+            },
+            get_jshint: {
+                options: {
+                    url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.js-controller/master/tasks/jshint.js'
+                },
+                dest: 'tasks/jshint.js'
+            },/*
+            get_gruntfile: {
+                options: {
+                    url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.build/master/adapters/Gruntfile.js'
+                },
+                dest: 'Gruntfile.js'
+            },
+            get_utilsfile: {
+                options: {
+                    url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.build/master/adapters/utils.js'
+                },
+                dest: 'lib/utils.js'
+            },*/
+            get_jscsRules: {
+                options: {
+                    url: 'https://raw.githubusercontent.com/yunkong2/yunkong2.js-controller/master/tasks/jscsRules.js'
+                },
+                dest: 'tasks/jscsRules.js'
+            }
+        }
+    });
+
+    grunt.registerTask('updateReadme', function () {
+        var readme = grunt.file.read('README.md');
+        var pos = readme.indexOf('## Changelog\r\n');
+        if (pos != -1) {
+            var readmeStart = readme.substring(0, pos + '## Changelog\r\n'.length);
+            var readmeEnd   = readme.substring(pos + '## Changelog\r\n'.length);
+
+            if (readme.indexOf(version) == -1) {
+                var timestamp = new Date();
+                var date = timestamp.getFullYear() + '-' +
+                    ("0" + (timestamp.getMonth() + 1).toString(10)).slice(-2) + '-' +
+                    ("0" + (timestamp.getDate()).toString(10)).slice(-2);
+
+                var news = "";
+                if (iopackage.common.whatsNew) {
+                    for (var i = 0; i < iopackage.common.whatsNew.length; i++) {
+                        if (typeof iopackage.common.whatsNew[i] == 'string') {
+                            news += '* ' + iopackage.common.whatsNew[i] + '\r\n';
+                        } else {
+                            news += '* ' + iopackage.common.whatsNew[i].en + '\r\n';
+                        }
+                    }
+                }
+
+                grunt.file.write('README.md', readmeStart + '### ' + version + ' (' + date + ')\r\n' + (news ? news + '\r\n\r\n' : '\r\n') + readmeEnd);
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-replace');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-jscs');
+    grunt.loadNpmTasks('grunt-http');
+
+    grunt.registerTask('default', [
+        'http',
+        'replace',
+        'updateReadme',
+        'jshint',
+        'jscs'
+    ]);
+    grunt.registerTask('prepublish', [
+        'replace',
+        'updateReadme'
+    ]);
+	grunt.registerTask('p', [
+        'prepublish'
+    ]);
+};
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..90c91bc
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Bluefox <dogafox@gmail.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..18e3bf7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,55 @@
+![Logo](admin/timeandweather.png)
+yunkong2.vis-timeandweather
+============
+
+[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-timeandweather.svg)](https://www.npmjs.com/package/yunkong2.vis-timeandweather)
+[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-timeandweather.svg)](https://www.npmjs.com/package/yunkong2.vis-timeandweather)
+
+[![NPM](https://nodei.co/npm/yunkong2.vis-timeandweather.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-timeandweather/)
+
+
+timeandweather - Time and weather widgets for yunkong2.vis.
+
+Used following packages:
+- **CoolClock** http://randomibis.com/coolclock/ by Simon Baird (MIT) 
+  https://github.com/simonbaird/CoolClock/
+- **jDigiClock** http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/ by Radoslav Dimov (MIT & GPL)
+- **zWeatherFeed** http://www.zazar.net/developers/jquery/zweatherfeed/ Zazar Ltd (MIT)
+- **Segment display** http://www.3quarks.com/en/SegmentDisplay (CC-3.0)
+- **flipclock** http://flipclockjs.com/ (MIT)
+  https://github.com/objectivehtml/FlipClock
+
+
+![Example](img/widgets.png)
+
+## Changelog
+### 1.1.7 (2017-01-05)
+- (bluefox) add update interval for weather
+
+### 1.1.6 (2016-07-13)
+- (bluefox) support of vis APP
+
+### 1.1.4 (2016-06-28)
+- (jens-maus) improved german translation of weather terms
+
+### 1.1.3 (2016-06-23)
+- (bluefox) enable widgets for https too
+
+### 1.1.2 (2016-06-02)
+- (bluefox) add weather custom widget
+
+### 1.1.1 (2016-05-31)
+- (bluefox) fix the slide in htc weather
+
+### 1.1.0 (2016-04-16)
+- (bluefox) add city name to display
+
+### 0.1.0 (2016-02-10)
+- (bluefox) fix typo with Dienstag=>Februar
+
+### 0.0.1 (2015-10-04)
+- (bluefox) initial checkin
+
+## License
+ Copyright (c) 2013-2016 bluefox https://github.com/GermanBluefox
+ MIT
\ No newline at end of file
diff --git a/admin/index.html b/admin/index.html
new file mode 100644
index 0000000..40343ac
--- /dev/null
+++ b/admin/index.html
@@ -0,0 +1,61 @@
+<html>
+
+<!-- these 4 files always have to be included -->
+<link rel="stylesheet" type="text/css" href="../../lib/css/themes/jquery-ui/redmond/jquery-ui.min.css"/>
+<link rel="stylesheet" type="text/css" href="../../lib/css/jquery.multiselect-1.13.css"/>
+
+<script type="text/javascript" src="../../lib/js/jquery-1.11.1.min.js"></script>
+<script type="text/javascript" src="../../socket.io/socket.io.js"></script>
+<script type="text/javascript" src="../../lib/js/jquery-ui-1.10.3.full.min.js"></script>
+
+<!-- these two file always have to be included -->
+<link rel="stylesheet" type="text/css" href="../../css/adapter.css"/>
+<script type="text/javascript" src="../../js/translate.js"></script>
+<script type="text/javascript" src="../../js/adapter-settings.js"></script>
+
+<style>
+    .table_header {
+        background-color: blue;
+        color: white;
+    }
+    .ip {
+        width: 150px;
+        text-align: right;
+    }
+</style>
+<!-- you have to define 2 functions in the global scope: -->
+<script type="text/javascript">
+	systemDictionary = {
+        "Fancyswitch Widgets settings": {
+            "en": "Fancyswitch Widgets settings",
+            "de": "Fancyswitch Widgets Einstellungen",
+            "ru": "Настройки Fancyswitch Widgets"
+        },
+        "There is nothing to setup": {
+            "en": "There is nothing to setup",
+            "de": "Es gibt nichts einzustellen",
+            "ru": "Нечего настраивать"
+        },
+	};
+
+    function load(settings, onChange) {
+        if (!settings) return;
+
+        onChange(false);
+    }
+
+    function save(callback) {
+        callback(null);
+    }
+</script>
+
+<div id="adapter-container">
+
+    <table><tr>
+        <td><img src="hqwidgets.png"></td>
+        <td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">Fancyswitch Widgets settings</h3></td>
+    </tr></table>
+
+    <div class="translate">There is nothing to setup</h4>
+    </div>
+</html>
diff --git a/admin/timeandweather.png b/admin/timeandweather.png
new file mode 100644
index 0000000..086147e
Binary files /dev/null and b/admin/timeandweather.png differ
diff --git a/img/widgets.png b/img/widgets.png
new file mode 100644
index 0000000..3141d41
Binary files /dev/null and b/img/widgets.png differ
diff --git a/io-package.json b/io-package.json
new file mode 100644
index 0000000..8524571
--- /dev/null
+++ b/io-package.json
@@ -0,0 +1,75 @@
+{
+    "common": {
+        "name": "vis-timeandweather",
+        "version": "1.1.7",
+        "news": {
+            "1.1.7": {
+                "en": "add update interval for weather",
+                "de": "Updateintervalle für Wetter hinzugefügt",
+                "ru": "Добавлен интервал обновления для погоды"
+            },
+            "1.1.6": {
+                "en": "support of vis APP",
+                "de": "support of vis APP",
+                "ru": "support of vis APP"
+            },
+            "1.1.4": {
+                "en": "better translations",
+                "de": "better translations",
+                "ru": "better translations"
+            },
+            "1.1.3": {
+                "en": "enable widgets for https too",
+                "de": "enable widgets for https too",
+                "ru": "enable widgets for https too"
+            },
+            "1.1.2": {
+                "en": "add weather custom widget",
+                "de": "add weather custom widget",
+                "ru": "add weather custom widget"
+            },
+            "1.1.1": {
+                "en": "fix the slide in htc weather",
+                "de": "fix the slide in htc weather",
+                "ru": "fix the slide in htc weather"
+            }
+        },
+        "title": "yunkong2 Visualisation - time and weather Widgets",
+        "desc": {
+            "en": "Time and weather widgets for yunkong2.vis",
+            "de": "Zeit und Wetter Widgets für yunkong2.vis",
+            "ru": "Widgets времени и погоды для yunkong2.vis"
+        },
+        "platform": "Javascript/Node.js",
+        "loglevel": "info",
+        "icon": "timeandweather.png",
+        "enabled": true,
+        "mode": "once",
+        "extIcon": "https://git.spacen.net/yunkong2/yunkong2.vis-timeandweather/raw/master/admin/timeandweather.png",
+        "keywords": [
+            "timeandweather",
+            "vis",
+            "GUI",
+            "graphical",
+            "scada"
+        ],
+        "readme": "https://github.com/yunkong2/yunkong2.vis-timeandweather/blob/master/README.md",
+        "authors": [
+            "bluefox <dogafox@gmail.com>"
+        ],
+        "localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html",
+        "license": "MIT",
+        "dependencies": [
+            "vis"
+        ],
+        "onlyWWW": true,
+        "singleton": true,
+        "type": "visualization-widgets",
+        "noConfig": true,
+        "restartAdapters": [
+            "vis"
+        ]
+    },
+    "native": {},
+    "instanceObjects": []
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..cf9db00
--- /dev/null
+++ b/package.json
@@ -0,0 +1,49 @@
+{
+  "name": "yunkong2.vis-timeandweather",
+  "description": "Time and weather widgets for yunkong2.vis",
+  "version": "1.1.7",
+  "author": {
+    "name": "bluefox",
+    "email": "dogafox@gmail.com"
+  },
+  "contributors": [
+    "bluefox <dogafox@gmail.com>"
+  ],
+  "homepage": "https://github.com/yunkong2/yunkong2.vis-timeandweather",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yunkong2/yunkong2.vis-timeandweather"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://github.com/yunkong2/yunkong2.vis-timeandweather/blob/master/LICENSE"
+    }
+  ],
+  "keywords": [
+    "yunkong2",
+    "GUI",
+    "DashUI",
+    "web interface",
+    "home automation",
+    "SCADA",
+    "timeandweather GUI"
+  ],
+  "devDependencies": {
+    "grunt": "^1.0.1",
+    "grunt-replace": "^1.0.1",
+    "grunt-contrib-jshint": "^1.1.0",
+    "grunt-jscs": "^3.0.1",
+    "grunt-http": "^2.2.0",
+    "mocha": "^4.1.0",
+    "chai": "^4.1.2"
+  },
+  "bugs": {
+    "url": "https://github.com/yunkong2/yunkong2.vis-timeandweather/issues"
+  },
+  "main": "widgets/timeandweather.html",
+  "scripts": {
+    "test": "node node_modules/mocha/bin/mocha --exit"
+  },
+  "license": "MIT"
+}
\ No newline at end of file
diff --git a/tasks/jscs.js b/tasks/jscs.js
new file mode 100644
index 0000000..588b6f2
--- /dev/null
+++ b/tasks/jscs.js
@@ -0,0 +1,17 @@
+var srcDir   = __dirname + "/../";
+
+module.exports = {
+    all: {
+        src: [
+                srcDir + "*.js",
+                srcDir + "lib/*.js",
+                srcDir + "adapter/example/*.js",
+                srcDir + "tasks/**/*.js",
+                srcDir + "www/**/*.js",
+                '!' + srcDir + "www/lib/**/*.js",
+                '!' + srcDir + 'node_modules/**/*.js',
+                '!' + srcDir + 'adapter/*/node_modules/**/*.js'
+        ],
+        options: require('./jscsRules.js')
+    }
+};
\ No newline at end of file
diff --git a/tasks/jscsRules.js b/tasks/jscsRules.js
new file mode 100644
index 0000000..ded301d
--- /dev/null
+++ b/tasks/jscsRules.js
@@ -0,0 +1,36 @@
+module.exports = {
+    force: true,
+    "requireCurlyBraces": ["else", "for", "while", "do", "try", "catch"], /*"if",*/
+    "requireSpaceAfterKeywords": ["if", "else", "for", "while", "do", "switch", "return", "try", "catch"],
+    "requireSpaceBeforeBlockStatements": true,
+    "requireParenthesesAroundIIFE": true,
+    "disallowSpacesInFunctionDeclaration": {"beforeOpeningRoundBrace": true},
+    "disallowSpacesInNamedFunctionExpression": {"beforeOpeningRoundBrace": true},
+    "requireSpacesInFunctionExpression": {"beforeOpeningCurlyBrace": true},
+    "requireSpacesInAnonymousFunctionExpression": {"beforeOpeningRoundBrace": true, "beforeOpeningCurlyBrace": true},
+    "requireSpacesInNamedFunctionExpression": {"beforeOpeningCurlyBrace": true},
+    "requireSpacesInFunctionDeclaration": {"beforeOpeningCurlyBrace": true},
+    "disallowMultipleVarDecl": true,
+    "requireBlocksOnNewline": true,
+    "disallowEmptyBlocks": true,
+    "disallowSpacesInsideObjectBrackets": true,
+    "disallowSpacesInsideArrayBrackets": true,
+    "disallowSpaceAfterObjectKeys": true,
+    "disallowSpacesInsideParentheses": true,
+    "requireCommaBeforeLineBreak": true,
+    //"requireAlignedObjectValues": "all",
+    "requireOperatorBeforeLineBreak": ["?", "+", "-", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
+//            "disallowLeftStickedOperators": ["?", "+", "/", "*", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
+//                    "requireRightStickedOperators": ["!"],
+//                    "requireSpaceAfterBinaryOperators": ["?", "+", "/", "*", ":", "=", "==", "===", "!=", "!==", ">", ">=", "<", "<="],
+    //"disallowSpaceAfterBinaryOperators": [","],
+    "disallowSpaceAfterPrefixUnaryOperators": ["++", "--", "+", "-", "~", "!"],
+    "disallowSpaceBeforePostfixUnaryOperators": ["++", "--"],
+    "requireSpaceBeforeBinaryOperators": ["+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
+    "requireSpaceAfterBinaryOperators": ["?", ">", ",", ">=", "<=", "<", "+", "-", "/", "*", "=", "==", "===", "!=", "!=="],
+    //"validateIndentation": 4,
+    //"validateQuoteMarks": { "mark": "\"", "escape": true },
+    "disallowMixedSpacesAndTabs": true,
+    "disallowKeywordsOnNewLine": ["else", "catch"]
+
+};
diff --git a/tasks/jshint.js b/tasks/jshint.js
new file mode 100644
index 0000000..f823ebc
--- /dev/null
+++ b/tasks/jshint.js
@@ -0,0 +1,17 @@
+var srcDir   = __dirname + "/../";
+
+module.exports = {
+    options: {
+        force: true
+    },
+    all: [
+        srcDir + "*.js",
+        srcDir + "lib/*.js",
+        srcDir + "adapter/example/*.js",
+        srcDir + "tasks/**/*.js",
+        srcDir + "www/**/*.js",
+        '!' + srcDir + "www/lib/**/*.js",
+        '!' + srcDir + 'node_modules/**/*.js',
+        '!' + srcDir + 'adapter/*/node_modules/**/*.js'
+    ]
+};
\ No newline at end of file
diff --git a/test/testPackageFiles.js b/test/testPackageFiles.js
new file mode 100644
index 0000000..d0759c0
--- /dev/null
+++ b/test/testPackageFiles.js
@@ -0,0 +1,91 @@
+/* jshint -W097 */
+/* jshint strict:false */
+/* jslint node: true */
+/* jshint expr: true */
+var expect = require('chai').expect;
+var fs        = require('fs');
+
+describe('Test package.json and io-package.json', function() {
+    it('Test package files', function (done) {
+        console.log();
+
+        var fileContentIOPackage = fs.readFileSync(__dirname + '/../io-package.json', 'utf8');
+        var ioPackage = JSON.parse(fileContentIOPackage);
+
+        var fileContentNPMPackage = fs.readFileSync(__dirname + '/../package.json', 'utf8');
+        var npmPackage = JSON.parse(fileContentNPMPackage);
+
+        expect(ioPackage).to.be.an('object');
+        expect(npmPackage).to.be.an('object');
+
+        expect(ioPackage.common.version, 'ERROR: Version number in io-package.json needs to exist').to.exist;
+        expect(npmPackage.version, 'ERROR: Version number in package.json needs to exist').to.exist;
+
+        expect(ioPackage.common.version, 'ERROR: Version numbers in package.json and io-package.json needs to match').to.be.equal(npmPackage.version);
+
+        if (!ioPackage.common.news || !ioPackage.common.news[ioPackage.common.version]) {
+            console.log('WARNING: No news entry for current version exists in io-package.json, no rollback in Admin possible!');
+            console.log();
+        }
+
+        expect(npmPackage.author, 'ERROR: Author in package.json needs to exist').to.exist;
+        expect(ioPackage.common.authors, 'ERROR: Authors in io-package.json needs to exist').to.exist;
+
+        if (ioPackage.common.name.indexOf('template') !== 0) {
+            if (Array.isArray(ioPackage.common.authors)) {
+                expect(ioPackage.common.authors.length, 'ERROR: Author in io-package.json needs to be set').to.not.be.equal(0);
+                if (ioPackage.common.authors.length === 1) {
+                    expect(ioPackage.common.authors[0], 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name <my@email.com>');
+                }
+            }
+            else {
+                expect(ioPackage.common.authors, 'ERROR: Author in io-package.json needs to be a real name').to.not.be.equal('my Name <my@email.com>');
+            }
+        }
+        else {
+            console.log('WARNING: Testing for set authors field in io-package skipped because template adapter');
+            console.log();
+        }
+        expect(fs.existsSync(__dirname + '/../README.md'), 'ERROR: README.md needs to exist! Please create one with description, detail information and changelog. English is mandatory.').to.be.true;
+        if (!ioPackage.common.titleLang || typeof ioPackage.common.titleLang !== 'object') {
+            console.log('WARNING: titleLang is not existing in io-package.json. Please add');
+            console.log();
+        }
+        if (
+            ioPackage.common.title.indexOf('yunkong2') !== -1 ||
+            ioPackage.common.title.indexOf('yunkong2') !== -1 ||
+            ioPackage.common.title.indexOf('adapter') !== -1 ||
+            ioPackage.common.title.indexOf('Adapter') !== -1
+        ) {
+            console.log('WARNING: title contains Adapter or yunkong2. It is clear anyway, that it is adapter for yunkong2.');
+            console.log();
+        }
+
+        if (ioPackage.common.name.indexOf('vis-') !== 0) {
+            if (!ioPackage.common.materialize || !fs.existsSync(__dirname + '/../admin/index_m.html') || !fs.existsSync(__dirname + '/../gulpfile.js')) {
+                console.log('WARNING: Admin3 support is missing! Please add it');
+                console.log();
+            }
+            if (ioPackage.common.materialize) {
+                expect(fs.existsSync(__dirname + '/../admin/index_m.html'), 'Admin3 support is enabled in io-package.json, but index_m.html is missing!').to.be.true;
+            }
+        }
+
+        var licenseFileExists = fs.existsSync(__dirname + '/../LICENSE');
+        var fileContentReadme = fs.readFileSync(__dirname + '/../README.md', 'utf8');
+        if (fileContentReadme.indexOf('## Changelog') === -1) {
+            console.log('Warning: The README.md should have a section ## Changelog');
+            console.log();
+        }
+        expect((licenseFileExists || fileContentReadme.indexOf('## License') !== -1), 'A LICENSE must exist as LICENSE file or as part of the README.md').to.be.true;
+        if (!licenseFileExists) {
+            console.log('Warning: The License should also exist as LICENSE file');
+            console.log();
+        }
+        if (fileContentReadme.indexOf('## License') === -1) {
+            console.log('Warning: The README.md should also have a section ## License to be shown in Admin3');
+            console.log();
+        }
+        done();
+    });
+});
diff --git a/widgets/timeandweather.html b/widgets/timeandweather.html
new file mode 100644
index 0000000..c31be27
--- /dev/null
+++ b/widgets/timeandweather.html
@@ -0,0 +1,1106 @@
+<!--
+    yunkong2.vis time and weather Widget-Set
+
+    version: "1.1.7"
+
+    Copyright 2013-2017 bluefox<dogafox@gmail.com>
+-->
+<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/flipclock.css" />
+<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/jquery.jdigiclock.css" />
+<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/yahoo.css" />
+<link rel="stylesheet" type="text/css" href="widgets/timeandweather/css/simpleclock.css" />
+<script type="text/javascript" src="widgets/timeandweather/js/flipclock/flipclock.min.js"></script>
+<script type="text/javascript" src="widgets/timeandweather/js/jquery.jdigiclock.js"></script>
+<script type="text/javascript" src="widgets/timeandweather/js/jquery.zweatherfeed.js"></script>
+<script type="text/javascript" src="widgets/timeandweather/js/coolclock.js"></script>
+<script type="text/javascript" src="widgets/timeandweather/js/moreskins.js"></script>
+<script type="text/javascript" src="widgets/timeandweather/js/segment-display.js"></script>
+
+<script language="javascript">
+    "use strict";
+
+	// Add words for bars
+    if (vis.editMode) {
+        $.extend(systemDictionary, {
+            "hideSeconds"      : {"en": "Hide seconds",         "de": "Zeige keine Sekunden",   "ru": "Скрыть секунды"},
+            "blink"            : {"en": "Blink",                "de": "Blinken",                "ru": "Мигать"},
+            "blink_tooltip"    : {
+                "en" : "Used only if no seconds shown",
+                "de":  "Wird nur aktiv, falls keine Sekunden angezeigt sind",
+                "ru":  "Активно только если секунды не показываются"},
+            "showWeekDay"      : {"en": "Show day of week",     "de": "Wochentag",              "ru": "День недели"},
+            "noClass"          : {"en": "No style",             "de": "Kein Stil",              "ru": "Без стиля"},
+            "noClass_tooltip"  : {
+                "en" : "Activate it if you want to set own class or own style for clock with css settings",
+                "de":  "Aktiviere es, falls eigenen Stil oder Klasse wird angeandt",
+                "ru":  "Если установлены пользовательский класс или CSS свойства,\x0Aто нужно активировать, что бы они стали активными"
+            },
+            "woeid"            : {"en": "City",                 "de": "Stadt",                  "ru": "Город"},
+            "shortWeekDay"     : {"en": "Short week day",       "de": "Kurzer Wochentag",       "ru": "Короткий день недели"},
+            "shortYear"        : {"en": "Short year",           "de": "Kurzes Jahr",            "ru": "Короткий год"},
+            "prependZero"      : {"en": "Prepend zero",         "de": "Null vorne",             "ru": "Ноль в начале"},
+            "monthWord"        : {"en": "Month as word",        "de": "Monat als text",         "ru": "Месяц словом"},
+            "shortMonth"       : {"en": "Short month",          "de": "Kurzer Monat",           "ru": "Короткий месяц"},
+            "americanOrder"    : {"en": "American format",      "de": "USA-Format",             "ru": "Формат USA"},
+            "City:"            : {"en": "City:",                "de": "Stadt:",                 "ru": "Город:"},
+            "noSeconds"        : {"en": "Hide seconds",         "de": "Zeige keine Sekunden",   "ru": "Скрыть секунды"},
+            "showDigital"      : {"en": "Digital clock",        "de": "Digitaluhr",             "ru": "Цифровые часы"},
+            "Select city"      : {"en": "Select city",          "de": "Stadt wählen",           "ru": "Выбрать город"},
+            "showAmPm"         : {"en": "Show am/pm",           "de": "Zeige am/pm",            "ru": "Показать am/pm"},
+            "quadSize"         : {"en": "Quarter text size",    "de": "Viertel-Text-Größe",     "ru": "Размер чисел часа"},
+            "quadColor"        : {"en": "Quarter text color",   "de": "Viertel-Text-Farbe",     "ru": "Цвет чисел часа"},
+            "quadTickColor"    : {"en": "Quarter tick color",   "de": "Viertel-Tickfarbe",      "ru": "Цвет часовых штрихов"},
+            "textSize"         : {"en": "Minutes text size",    "de": "Minutentextgroße",       "ru": "Размер минутных чисел"},
+            "textColor"        : {"en": "Minutes text color",   "de": "Minutentextfarbe",       "ru": "Цвет минутных чисел"},
+            "tickColor"        : {"en": "Small tick color",     "de": "Klein-Tickfarbe",        "ru": "Цвет минутных штрихов"},
+            "isSeconds"        : {"en": "Show second hand",     "de": "Zeige Sekunden",         "ru": "Показать секунды"},
+            "handsColor"       : {"en": "Hands color",          "de": "Zeigerfarbe",            "ru": "Цвет стрелок"},
+            "handsColorLine"   : {"en": "Hands color bulge",    "de": "Zeigerbeulefarbe",       "ru": "Цвет выемок на стрелках"},
+            "handsSecColor"    : {"en": "Seconds hand color",   "de": "Skeundenzeigerfarbe",    "ru": "Цвет секундной стрелки"},
+            "textFont"         : {"en": "Text font",            "de": "Textschrift",            "ru": "Шрифт"},
+            "cityName"         : {"en": "City name",            "de": "Stadtsname",             "ru": "Показывать имя города"},
+            "language"         : {"en": "Language",             "de": "Sprache",                "ru": "Язык"},
+            "SymmetricCorner"   : {"en": "symmetric",           "de": "symmetrisch",            "ru": "симметричные"},
+            "FlattenedCorner"   : {"en": "flattened",           "de": "abgeflacht",             "ru": "плоские"},
+            "PointedCorner"     : {"en": "pointed",             "de": "spitzig",                "ru": "заострённые"},
+            "RoundedCorner"     : {"en": "rounded",             "de": "gerundet",               "ru": "закруглённые"},
+            "group_clock"       : {"en": "Clock",               "de": "Uhr",                    "ru": "Часы"},
+            "clock"             : {"en": "Enable clock",        "de": "Aktiviere Uhr",          "ru": "Активировть часы "},
+            "clock_tooltip"     : {
+                "en": "Clock is enabled only if no ObjectID and not text used.",
+                "de": "Uhr sind nur dann aktiv, falls kein Objekt ID und kein Text definiert sind.",
+                "ru": "Активно только,\x0Aесли не используется объект и текст"
+            },
+            "seconds"           : {"en": "Show seconds",        "de": "Sekunden",               "ru": "Показать секунды"},
+            "pattern"           : {"en": "Pattern",             "de": "Vorlage",                "ru": "Шаблон"},
+            "pattern_tooltip"   : {
+                "en": "Use # as placeholder.\x0AAdditionally dot and semicolon canbe used.",
+                "de": "Benutze # als Platzhalter.\x0APunkt und Semikolon können als Trennzeichen benutz werden.",
+                "ru": "Используйте # там, где должен быть символ.\x0AЕщё можно использовать точку и двоеточие."
+            },
+            "colorOn"           : {"en": "Segment color ON",    "de": "Segmentfarbe AN",        "ru": "Цвет вкл. секции"},
+            "colorOff"          : {"en": "Segment color OFF",   "de": "Segmentfarbe AUS",       "ru": "Цвет выкл. секции"},
+            "runStepInterval"   : {"en": "Running text intervall(ms)", "de": "Interval für laufendem Text(ms)", "ru": "Интервал бегущего текста(мс)"},
+            "segmentCount"      : {"en": "Segment count",       "de": "Anzahl Segmenten",       "ru": "Число секций"},
+            "displayAngle"      : {"en": "Display angle",       "de": "Zeichenwinkel",          "ru": "Наклон °"},
+            "digitHeight"       : {"en": "Digit height",        "de": "Zeichenhöhe",            "ru": "Высота числа"},
+            "digitWidth"        : {"en": "Digit width",         "de": "Zeichebreite",           "ru": "Ширина числа"},
+            "digitDistance"     : {"en": "Digit distance",      "de": "Zeichenabstand",         "ru": "Расстояние между числами"},
+            "segmentWidth"      : {"en": "Segment width",       "de": "Segmentbreite",          "ru": "Ширина секции"},
+            "segmentDistance"   : {"en": "Segment distance",    "de": "Segmentdistanz",         "ru": "Расстояние между секциями"},
+            "cornerType"        : {"en": "Corners type",        "de": "Ecktyp",                 "ru": "Тип закруглений"},
+            "en"                : {"en": "english",             "de": "englisch",               "ru": "английский"},
+            "de"                : {"en": "german",              "de": "deutsch",                "ru": "немецкий"},
+            "ru"                : {"en": "russian",             "de": "russisch",               "ru": "русский"},
+            "city":               {"en": "City",                "de": "Stadt",                  "ru": "Город"},
+            "group_now":             {"en": "Now",                "de": "Jetzt",                "ru": "Сейчас"},
+            "updateInterval":        {"en": "Update interval[min]", "de": "Updateintervalle[min]", "ru": "Обновление в минутах"},
+            "temperature-0-oid":     {"en": "Temperature ID",     "de": "Temperature ID",       "ru": "Температура ID"},
+            "condition-0-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "humidity-0-oid":        {"en": "Humidity ID",        "de": "Luftfeutigkeit ID",    "ru": "Влажность ID"},
+            "temperature-min-0-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "temperature-max-0-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "wind-speed-0-oid":      {"en": "Wind speed ID",      "de": "Windgeschwindigkeit",  "ru": "Скорсть ветра ID"},
+            "wind-dir-0-oid":        {"en": "Wind direction ID",  "de": "Windrichting",         "ru": "Направление ветра ID"},
+            "icon-0-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки"},
+            "group_tomorrow":        {"en": "Tomorrow",           "de": "Morgen",               "ru": "Завтра"},
+            "condition-1-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-1-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "temperature-min-1-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "icon-1-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки ID"},
+            "group_aftertomorrow":   {"en": "group_aftertomorrow", "de": "Übermorgen",          "ru": "Послезавтра"},
+            "condition-2-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-2-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "temperature-min-2-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "icon-2-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки ID"},
+            "group_in2days":         {"en": "In 2 days",          "de": "In 2 Tagen",           "ru": "Через 2 дня"},
+            "condition-3-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-3-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура"},
+            "temperature-min-3-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура"},
+            "icon-3-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки"},
+            "group_in3days":         {"en": "In 3 days",          "de": "In 3 Tagen",           "ru": "Через 3 дня"},
+            "condition-4-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-4-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "temperature-min-4-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "icon-4-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки ID"},
+            "group_in4days":         {"en": "In 4 days",          "de": "In 4 Tagen",           "ru": "Через 4 дня"},
+            "condition-5-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-5-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "temperature-min-5-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "icon-5-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки ID"},
+            "group_in5days":         {"en": "In 5 days",          "de": "In 5 Tagen",           "ru": "Через 5 дней"},
+            "condition-6-oid":       {"en": "Condition ID",       "de": "Text ID",              "ru": "Текст ID"},
+            "temperature-max-6-oid": {"en": "Max temperature ID", "de": "Max Temperature ID",   "ru": "Макс. температура ID"},
+            "temperature-min-6-oid": {"en": "Min temperature ID", "de": "Min Temperature ID",   "ru": "Мин. температура ID"},
+            "icon-6-oid":            {"en": "Icon URL ID",        "de": "Bild-URL ID",          "ru": "URL картинки ID"},
+            "units_speed":           {"en": "Speed units",        "de": "Geschw.Einheit",       "ru": "Единицы изм. скорости"},
+            "maxDays":               {"en": "Show max. days",     "de": "Max. Tagesanzahl",     "ru": "Макс. кол-во дней"}
+        });
+    }
+
+    vis.binds.timeandweather = {
+ 	    version: "1.1.7",
+		showVersion: function () {
+			if (vis.binds.timeandweather.version) {
+				console.log('Version vis-timeandweather: ' + vis.binds.timeandweather.version);
+				vis.binds.timeandweather.version = null;
+			}
+		},
+		startTime: function (view, elem, hideSeconds, blink, noClass, timerId) {
+            var today = new Date();
+            var h = today.getHours();
+            var m = today.getMinutes();
+            var s = today.getSeconds();
+
+            // add a zero in front of numbers<10
+            m = (m < 10) ? ('0' + m) : m;
+            if (!hideSeconds) s = (s < 10) ? ('0' + s) : s;
+            h = (h < 10) ? ('0' + h) : h;
+            var hl = document.getElementById(elem);
+
+            if (hideSeconds === 'false') hideSeconds = false;
+
+            if (!hl) {
+                $('#visview_' + view).append('<div class="vis-widget' + (noClass ? '' : ' clock') + '" id="' + elem + '" ></div>');
+                hl = document.getElementById(elem);
+                // View deleted
+                if (!hl) return;
+                hl.dashId = today.getTime();
+            }
+            if (hl && (timerId === undefined || hl.dashId == timerId)) {
+                if (hideSeconds) {
+                    hl.innerHTML = h + '<span style="display: inline-block" id="' + elem + '_space">:</span>' + m;
+                    if (blink && (s % 2)) {
+                        var r = $('#' + elem + '_space');
+                        var w = r.width();
+                        r.css({width: w});
+                        r.html("");
+                    }
+                } else {
+                    hl.innerHTML = h + ":" + m + ":" + s;
+                }
+                hl.dashTimer = _setTimeout(vis.binds.timeandweather.startTime, 1000, view, elem, hideSeconds, blink, noClass, hl.dashId);
+            }
+        },
+        weekdays: {
+            0: {"en": "Sunday",   "de": "Sonntag",    "ru": "Воскресенье"},
+            1: {"en": "Monday",   "de": "Montag",     "ru": "Понедельник"},
+            2: {"en": "Tuesday",  "de": "Dienstag",   "ru": "Вторник"},
+            3: {"en": "Wednesday","de": "Mittwoch",   "ru": "Среда"},
+            4: {"en": "Thursday", "de": "Donnerstag", "ru": "Четверг"},
+            5: {"en": "Friday",   "de": "Freitag",    "ru": "Пятница"},
+            6: {"en": "Saturday", "de": "Samstag",    "ru": "Суббота"}
+        },
+        weekdaysShort: {
+            0: {"en": "Sun", "de": "So", "ru": "Вс"},
+            1: {"en": "Mon", "de": "Mo", "ru": "Пн"},
+            2: {"en": "Tue", "de": "Di", "ru": "Вт"},
+            3: {"en": "Wed", "de": "Mi", "ru": "Ср"},
+            4: {"en": "Thu", "de": "Do", "ru": "Чт"},
+            5: {"en": "Fri", "de": "Fr", "ru": "Пт"},
+            6: {"en": "Sat", "de": "Sa", "ru": "Сб"}
+        },
+        months: {
+            1: {"en": "January",    "de": "Januar",     "ru": "Январь"},
+            2: {"en": "February",   "de": "Februar",    "ru": "Февраль"},
+            3: {"en": "March",      "de": "März",       "ru": "Март"},
+            4: {"en": "April",      "de": "April",      "ru": "Апрель"},
+            5: {"en": "May",        "de": "Mai",        "ru": "Май"},
+            6: {"en": "June",       "de": "Juni",       "ru": "Июнь"},
+            7: {"en": "July",       "de": "Juli",       "ru": "Июль"},
+            8: {"en": "August",     "de": "August",     "ru": "Август"},
+            9: {"en": "September",  "de": "September",  "ru": "Сентябрь"},
+            10: {"en": "October",   "de": "Oktober",    "ru": "Октябрь"},
+            11: {"en": "November",  "de": "November",   "ru": "Ноябрь"},
+            12: {"en": "December",  "de": "Dezember",   "ru": "Декабрь"}
+        },
+        startDate: function (view, elem, showWeekDay, noClass, timerId, shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american) {
+            var today = new Date();
+            var d = today.getDate();
+            var dow = today.getDay();
+            var m = today.getMonth() + 1;
+            var y = today.getFullYear();
+
+            var monthString = vis.binds.timeandweather.months[m][vis.language];
+            if (shortMonth) monthString = monthString.slice(0, 3);
+
+            if (shortYear) y = y.toString().slice(2);
+
+            // add a zero in front of numbers<10
+            if (prependZero) d = (d < 10) ? ('0' + d) : d;
+            if (prependZero) m = (m < 10) ? ('0' + m) : m;
+
+            if (showWeekDay === 'false') showWeekDay = false;
+
+            var $hl = $('#' + elem);
+            if (!$hl.length) {
+                $('#visview_' + view).append('<div class="vis-widget' + (noClass ? '' : ' date') + '" id="' + elem + '" ></div>');
+                $hl = $('#' + elem);
+                $hl.data('dashId', (new Date()).getTime());
+            }
+
+            if ($hl.length && (timerId === undefined || $hl.data('dashId') == timerId)) {
+                var dateString = '';
+                if (showWeekDay && !shortWeekDay) {
+                    dateString += vis.binds.timeandweather.weekdays[dow][vis.language] + ', ';
+                } else if (showWeekDay && shortWeekDay) {
+                    dateString += vis.binds.timeandweather.weekdaysShort[dow][vis.language] + ', ';
+                }
+
+                if (monthWord) {
+                    switch (vis.language) {
+                        case 'en':
+                            switch (d) {
+                                case 1:
+                                    d += 'st';
+                                    break;
+                                case 2:
+                                    d += 'nd';
+                                    break;
+                                case 3:
+                                    d += 'rd';
+                                    break;
+                                default:
+                                    d += 'th';
+                            }
+
+                            if (american) {
+                                dateString += monthString + " " + d + ", " + y;
+                            } else {
+                                dateString += d + " " + monthString + ", " + y;
+                            }
+
+                            break;
+                        default:
+                            dateString += d + ". " + monthString + " " + y;
+                    }
+                } else {
+                    switch (vis.language) {
+                        case 'en':
+                            if (american) {
+                                dateString += m + "/" + d + "/" + y;
+                            } else {
+                                dateString += d + "/" + m + "/" + y;
+                            }
+
+                            break;
+                        default:
+                            dateString += d + "." + m + "." + y;
+                    }
+                }
+
+                $hl.html(dateString);
+                $hl.data('dashTimer', _setTimeout(vis.binds.timeandweather.startDate, (24 * 3600 - (today.getHours() * 60 * 60 + today.getMinutes() * 60 + today.getSeconds())) * 1000, view, elem, showWeekDay, noClass, $hl.data('dashId'), shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american));
+            }
+        },
+        tplTwCoolClock: function (view, data) {
+ 			vis.binds.timeandweather.showVersion();
+            var style;
+            var wid = data.attr('wid');
+            if (vis.views[view] &&
+                    vis.views[view].widgets[wid] &&
+                    vis.views[view].widgets[wid].style) {
+                style = vis.views[view].widgets[wid].style;
+            }
+            style = style || {};
+            style.width = parseInt(style.width) || 85;
+            style.height = parseInt(style.height) || 85;
+            var radius = parseInt(style.width) || 85;
+            if (vis.views[view].widgets[wid]) {
+                vis.views[view].widgets[wid].style = style;
+            }
+
+            // Take the smallest value
+            if (style.height < radius) radius = style.height;
+            radius = Math.round(radius / 2);
+            var myClass = 'CoolClock:' + (data.attr('theme') || 'classic') + ':' + radius + ':' + (data.attr('noSeconds') ? 'noSeconds' : '') + '::' + (data.attr('showDigital') ? 'showDigital' : '') + '::' + (data.attr('showAmPm') ? 'showAmPm' : '');
+
+            var text = '<div id="' + data.attr('wid') + '" data-myclass="' + myClass + '" style="width: ' + style.width + '; height: ' + style.height + 'px" class="vis-widget"><canvas width="' + style.width + '" height="' + style.height + '"class="' + myClass + '"></canvas></div>';
+            $('#visview_' + view).append(text);
+
+            if (vis.editMode) {
+                $('#' + data.attr('wid')).bind('resize', function () {
+                    var t = $(this);
+                    var myClass = t.attr('data-myclass');
+                    var myClasses = myClass.split(':');
+                    myClasses[2] = t.width();
+
+                    if (t.height() < myClasses[2]) myClasses[2] = t.height();
+
+                    myClasses[2] = Math.round(myClasses[2] / 2);
+                    myClass = myClasses.join(':');
+                    t.html('<canvas class="' + myClass + '"></canvas>');
+                    CoolClock.findAndCreateClocks();
+                });
+            }
+            CoolClock.findAndCreateClocks();
+        },
+        tplTwFlipClock: function (view, data) {
+ 			vis.binds.timeandweather.showVersion();
+            var text = '<div class="vis-widget" style="width: 500px; height: 110px" id="' + data.attr('wid') + '" data-vis-resizable=';
+            text += "'" + '{"disabled":true}' + "'></div>";
+            $('#visview_' + view).append(text);
+            var clock = $('#' + data.attr('wid')).FlipClock({clockFace: 'TwentyFourHourClock'});
+        },
+        tplTwHtcWeather: function (view, data) {
+ 			vis.binds.timeandweather.showVersion();
+            var text = '<div class="vis-widget" style="width: 500px; height: 420px" id="' + data.attr('wid') + '" data-vis-resizable=';
+            text += "'" + '{"disabled":true}' + "'></div>";
+            $('#visview_' + view).append(text);
+            var woeid = data.attr('woeid') || data.attr('weoid');
+            if (woeid !== undefined && woeid !== null) {
+                var i = woeid.indexOf('[');
+                if (i != -1) {
+                    woeid = woeid.substring(i + 1);
+                    i     = woeid.indexOf(']');
+                    woeid = woeid.substring(0, i);
+                }
+            } else {
+                woeid = '664942';
+            }
+            var updateInterval = data.attr('updateInterval');
+            if (updateInterval === '' || updateInterval === null || updateInterval === undefined) {
+                updateInterval = 180;
+            } else {
+                updateInterval = parseInt(data.attr('updateInterval'), 10);
+            }
+
+            var clock = $('#' + data.attr('wid')).jdigiclock({
+                weatherLocationCode: woeid,
+                city:                data.attr('cityName'),
+                weatherUpdate:       updateInterval,
+                lang:                data.attr('language') || vis.language,
+                clockImagesPath:     'widgets/timeandweather/img/clock/'
+            });
+        },
+        tplTwYahooWeather: function (view, data) {
+ 			vis.binds.timeandweather.showVersion();
+            var text = '<div class="vis-widget ui-widget-content" id="' + data.attr('wid') + '" style="width:250px; height: 500px; color: #ddd"></div>';
+            $('#visview_' + view).append(text);
+            var woeid = data.attr('woeid') || data.attr('weoid');
+            if (woeid !== undefined && woeid !== null) {
+                var i = woeid.indexOf('[');
+                if (i != -1) {
+                    woeid = woeid.substring(i + 1);
+                    i     = woeid.indexOf(']');
+                    woeid = woeid.substring(0, i);
+                }
+            }
+            else {
+                woeid = '664942';
+            }
+            var updateInterval = data.attr('updateInterval');
+            if (updateInterval === '' || updateInterval === null || updateInterval === undefined) {
+                updateInterval = 180;
+            } else {
+                updateInterval = parseInt(data.attr('updateInterval'), 10);
+            }
+            $('#' + data.attr('wid')).weatherfeed([woeid], {
+                lang:       data.attr('language') || vis.language,
+                woeid:      true,
+                city:       data.attr('cityName'),
+                humidity:   true,
+                forecast:   true,
+                link:       false,
+                maxDays:    data.attr('maxDays'),
+                update:     updateInterval,
+                resizable:  false,
+                rendered:   function () {
+                    if (vis.editMode && vis.activeWidgets.indexOf(data.attr('wid')) != -1) {
+                        vis.resizable($('#' + data.attr('wid')).resizable('destroy'));
+                    }
+                }
+            });
+        },
+        getValue: function (oidOrBinding) {
+            if (!oidOrBinding) return '';
+
+            if (oidOrBinding[0] === '{') {
+                return vis.formatBinding(oidOrBinding);
+            } else {
+                var val = vis.states.attr(oidOrBinding + '.val');
+                if (val === undefined || val === null) return '';
+                if (val === 'null') return '';
+                return val;
+            }
+        },
+        updateCustomWeather: function (data) {
+            var getValue = vis.binds.timeandweather.getValue;
+            var weather = {
+                units: {
+                    pressure:     data.units_pressure   || 'mb',
+                    speed:        data.units_speed      || 'km/h',
+                    temperature:  data.units_temp       || 'C'
+                },
+                location: {
+                    city: data.city || ''
+                },
+                wind: {
+                    direction:  getValue(data['wind-dir-0-oid']),
+                    speed:      getValue(data['wind-speed-0-oid'])
+                },
+                atmosphere: {
+                    humidity: getValue(data['humidity-0-oid'])
+                },
+                image: {
+                    url: 'http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif'
+                },
+                item: {
+                    condition: {
+                        temp: getValue(data['temperature-0-oid']),
+                        text: getValue(data['condition-0-oid']),
+                        icon: getValue(data['icon-0-oid'])
+                    },
+                    forecast: [
+                        {
+                            high: getValue(data['temperature-max-0-oid']),
+                            low:  getValue(data['temperature-min-0-oid']),
+                            text: getValue(data['condition-0-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-1-oid']),
+                            low:  getValue(data['temperature-min-1-oid']),
+                            text: getValue(data['condition-1-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-2-oid']),
+                            low:  getValue(data['temperature-min-2-oid']),
+                            text: getValue(data['condition-2-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-3-oid']),
+                            low:  getValue(data['temperature-min-3-oid']),
+                            text: getValue(data['condition-3-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-4-oid']),
+                            low:  getValue(data['temperature-min-4-oid']),
+                            text: getValue(data['condition-4-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-5-oid']),
+                            low:  getValue(data['temperature-min-5-oid']),
+                            text: getValue(data['condition-5-oid'])
+                        },
+                        {
+                            high: getValue(data['temperature-max-6-oid']),
+                            low:  getValue(data['temperature-min-6-oid']),
+                            text: getValue(data['condition-6-oid'])
+                        }
+                    ]
+                }
+            };
+
+            if (weather.atmosphere.humidity === '' || weather.atmosphere.humidity === 'null') weather.atmosphere.humidity = null;
+            if (weather.wind.direction      === '' || weather.wind.direction      === 'null') weather.wind.direction      = null;
+            if (weather.wind.speed          === '' || weather.wind.speed          === 'null') weather.wind.speed          = null;
+
+            for (var i = 0; i < weather.item.forecast.length; i++) {
+                if (weather.item.forecast[i].high === null &&
+                    weather.item.forecast[i].low  === null &&
+                    weather.item.forecast[i].text === null) {
+                    weather.item.forecast.splice(i, weather.item.forecast.length - i);
+                    break;
+                }
+                if (weather.item.forecast[i].high === '' &&
+                    weather.item.forecast[i].low  === '' &&
+                    weather.item.forecast[i].text === '') {
+                    weather.item.forecast.splice(i, weather.item.forecast.length - i);
+                    break;
+                }
+            }
+
+            $('#' + data.wid).weatherfeed('', 'update', weather);
+            /*$('#' + data.wid).weatherfeed('', 'update', {
+                "units": {
+                    "distance": "km",
+                            "pressure": "mb",
+                            "speed": "km/h",
+                            "temperature": "C"
+                },
+                "location": {
+                    "city": "Karlsruhe"
+                },
+                "wind": {
+                    "chill": "66",
+                    "direction": "255",
+                    "speed": "11.27"
+                },
+                "atmosphere": {
+                    "humidity": "71"
+                },
+                "image": {
+                    "url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
+                },
+                "item": {
+                    "condition": {
+                        "code": "26",
+                                "temp": "19",
+                                "text": "Cloudy"
+                    },
+                    "forecast": [
+                        {
+                            "code": "12",
+                            "high": "20",
+                            "low": "14",
+                            "text": "Rain"
+                        },
+                        {
+                            "code": "39",
+                            "high": "21",
+                            "low": "13",
+                            "text": "Scattered Showers"
+                        },
+                        {
+                            "code": "4",
+                            "high": "22",
+                            "low": "15",
+                            "text": "Thunderstorms"
+                        },
+                        {
+                            "code": "28",
+                            "high": "23",
+                            "low": "13",
+                            "text": "Mostly Cloudy"
+                        },
+                        {
+                            "code": "4",
+                            "high": "24",
+                            "low": "15",
+                            "text": "Thunderstorms"
+                        },
+                        {
+                            "code": "47",
+                            "high": "23",
+                            "low": "16",
+                            "text": "Scattered Thunderstorms"
+                        },
+                        {
+                            "code": "30",
+                            "high": "23",
+                            "low": "16",
+                            "text": "Partly Cloudy"
+                        }
+                    ]
+                }
+            });*/
+        },
+        tplTwCustomWeather: function (view, data) {
+            vis.binds.timeandweather.showVersion();
+            var text = '<div class="vis-widget ui-widget-content" id="' + data.attr('wid') + '" style="width: 250px; height: 500px; color: #ddd"></div>';
+            $('#visview_' + view).append(text);
+
+            $('#' + data.attr('wid')).weatherfeed('', {
+                lang:       data.attr('language') || vis.language,
+                custom:     true,
+                city:       data.attr('city'),
+                humidity:   true,
+                forecast:   true,
+                link:       false,
+                resizable:  false
+            });
+
+            for (var attr in data) {
+                if (data.hasOwnProperty(attr)) {
+                    if (attr.match(/-oid$/) && data[attr]) {
+                        if (data[attr][0] === '{') {
+                            var oids = vis.extractBinding(data[attr]);
+                            for (var oid = 0; oid < oids.length; oid++) {
+                                vis.states.bind(oids[oid].visOid + '.val', function () {
+                                    vis.binds.timeandweather.updateCustomWeather(data);
+                                });
+                            }
+                        } else {
+                            vis.states.bind(data[attr] + '.val', function () {
+                                vis.binds.timeandweather.updateCustomWeather(data);
+                            });
+                        }
+                    }
+                }
+            }
+
+            vis.binds.timeandweather.updateCustomWeather(data);
+        },
+        createSvgClock: function (options, el) {
+            var quadSize       = options.quadSize || 60;
+            var quadColor      = options.quadColor || '#333';
+            var quadTickColor  = options.quadTickColor || '#333';
+            var textSize       = options.textSize || 30;
+            var textColor      = options.textColor || '#555';
+            var tickColor      = options.tickColor || '#555';
+            var isSeconds      = options.isSeconds || false;
+            var handsColor     = options.handsColor || '#111';
+            var handsColorLine = options.handsColorLine || '#666';
+            var handsSecColor  = options.handsSecColor || '#be5639';
+            var textFont       = options.textFont || 'verdana, sans-serif';
+            var $el            = $(el);
+
+            var html = '<svg viewbox="-450 -450 900 900" class="svg--clock" style="display: block;min-width: 5em;min-height: 5em;width: 100%;height: 100%;">';
+            html += '  <defs>';
+            html += '    <line  vector-effect="non-scaling-stroke" id="mark--major" y1="28.8" style="stroke-width: 7;stroke: ' + quadTickColor + '"></line>';
+            html += '    <line  vector-effect="non-scaling-stroke" id="mark--minor" y1="14.4" style="stroke-width: 2;stroke: ' + tickColor + '"></line>';
+            html += '    <circle  vector-effect="non-scaling-stroke" class="svg--cc" r="360"></circle>';
+            html += '  </defs>';
+            html += '  <g class="svg--ticks"  vector-effect="non-scaling-stroke"></g>';
+            html += '  <g id="hands">';
+            html += '    <g class="hand--h" style="stroke-linecap: round;stroke-width: 7;stroke: ' + handsColor + '">';
+            html += '      <line vector-effect="non-scaling-stroke" y2="-234"></line>';
+            html += '      <line vector-effect="non-scaling-stroke" y1="-136.8" y2="-205.2" style="stroke-width: 3;stroke: ' + handsColorLine + '"></line>';
+            html += '    </g>';
+            html += '    <g transform="rotate(25)" class="hand--m" style="stroke-linecap: round;stroke-width: 5;stroke: ' + handsColor + '">';
+            html += '      <line vector-effect="non-scaling-stroke" y2="-298.8"></line>';
+            html += '      <line vector-effect="non-scaling-stroke" y1="-201.60000000000002" y2="-270" style="stroke-width: 3;stroke: ' + handsColorLine + '"></line>';
+            html += '    </g>';
+            html += '    <g transform="rotate(60)" class="hand--s" style="stroke-width: 2;stroke: ' + handsSecColor + '">';
+            html += '      <line vector-effect="non-scaling-stroke" y1="36" y2="-342"></line>';
+            html += '    </g>';
+            html += '    <g>';
+            html += '      <circle vector-effect="non-scaling-stroke" r="14.4" style="fill: #e18728;"></circle>';
+            html += '      <circle vector-effect="non-scaling-stroke" r="7.2"  style="fill: #e0a197;"></circle>';
+            html += '    </g>';
+            html += '  </g>';
+            html += '</svg>';
+
+            $el.find('svg').remove();
+
+            if (!$el.find('svg').length) $el.append(html);
+
+            /* because IE */
+            Math.sign = Math.sign || function (x) {
+                x = +x; // convert to a number
+                if (x === 0 || isNaN(x)) {
+                    return x;
+                }
+                return x > 0 ? 1 : -1;
+            };
+
+            /* because me lazy */
+            Object.getOwnPropertyNames(Math).map(function (p) {
+                window[p] = Math[p];
+            });
+
+            Node.prototype.setAttrs = function (attr_obj) {
+                for (var prop in attr_obj) {
+                    this.setAttribute(prop, attr_obj[prop]);
+                }
+            };
+
+            var NS_URI = 'http://www.w3.org/2000/svg',
+                    XLink_NS = 'http://www.w3.org/1999/xlink',
+
+                    ns = 60,
+                    mi = 5,
+                    qi = .25 * ns,
+                    r = ~~$el.find('.svg--cc')[0].getAttribute('r'),
+                    svg = $el.find('svg')[0],
+                    wrap = $el.find('.svg--ticks')[0],
+                    h_el = $el.find('.hand--h')[0],
+                    m_el = $el.find('.hand--m')[0],
+                    s_el = $el.find('.hand--s')[0],
+                    h_max = 12, h_deg = 360 / h_max,
+                    m_max = 60, m_deg = 360 / m_max,
+                    s_max = 60, s_deg = 360 / s_max,
+                    prev_s;
+
+            var init = function () {
+                var frag = document.createDocumentFragment(),
+                        curr_tick_group, curr_tick, text1, text2,
+                        is_major, is_quad, ref,
+                        curr_angle, base_angle = 360 / ns;
+
+                if (!isSeconds) s_el.setAttribute('style', 'display: none');
+                for (var i = 0; i < ns; i++) {
+                    is_major = (i % mi === 0);
+                    is_quad = (i % qi === 0);
+
+                    ref = '#mark--' + (is_major ? 'major' : 'minor');
+                    curr_angle = i * base_angle;
+
+                    curr_tick_group = document.createElementNS(NS_URI, 'g');
+                    curr_tick = document.createElementNS(NS_URI, 'use');
+                    curr_tick.setAttributeNS(XLink_NS, 'xlink:href', ref);
+
+                    curr_tick.setAttribute(
+                            'transform',
+                                    'rotate(' + curr_angle + ')' +
+                                    'translate(0 -' + r + ')'
+                    );
+
+                    if (is_major) {
+                        curr_tick.setAttribute('class', 'major');
+
+                        text1 = document.createElementNS(NS_URI, 'text');
+                        text1.textContent = i;
+
+                        text1.setAttribute(
+                                'transform',
+                                        'rotate(' + curr_angle + ')' +
+                                        'translate(0 -' + 1.05 * r + ')' +
+                                        'rotate(' + -curr_angle + ')'
+                        );
+                        curr_tick_group.appendChild(text1);
+                        text1.setAttribute('style', 'dominant-baseline: middle;text-anchor: middle;fill: ' + textColor + '; font: ' + textSize + 'px ' + textFont);
+
+                        if (is_quad) {
+                            curr_tick.setAttribute('class', 'major quad');
+
+                            text2 = document.createElementNS(NS_URI, 'text');
+                            text2.textContent = (i / mi) || 12;
+
+                            text2.setAttrs({
+                                'class': 'quad',
+                                'transform': 'rotate(' + curr_angle + ')' +
+                                        'translate(0 -' + .8 * r + ')' +
+                                        'rotate(' + -curr_angle + ')'
+                            });
+                            text2.setAttribute('style', 'dominant-baseline: middle;text-anchor: middle;fill: ' + quadColor + '; font: 700 ' + quadSize + 'px ' + textFont);
+                            curr_tick_group.appendChild(text2);
+                        }
+                    }
+
+                    curr_tick_group.appendChild(curr_tick);
+                    frag.appendChild(curr_tick_group);
+                }
+
+                wrap.appendChild(frag);
+
+                run();
+                setInterval(function () {
+                    requestAnimationFrame(run);
+                }, 500);
+
+            };
+
+            var run = function () {
+                var t = new Date(),
+                        h = t.getHours(), curr_s_deg,
+                        m = t.getMinutes(), curr_m_deg,
+                        s = t.getSeconds(), curr_h_deg;
+
+                curr_s_deg = (s % s_max) * s_deg;
+
+                if (s != prev_s) {
+                    curr_s_deg = (s % s_max) * s_deg;
+                    if (isSeconds) {
+                        s_el.setAttribute(
+                                'transform',
+                                        'rotate(' + curr_s_deg + ')'
+                        );
+                    }
+
+                    curr_m_deg = ((m % m_max) + s / s_max) * m_deg;
+                    m_el.setAttribute(
+                            'transform',
+                                    'rotate(' + curr_m_deg + ')'
+                    );
+
+                    curr_h_deg = ((h % h_max) + m / m_max) * h_deg;
+                    h_el.setAttribute(
+                            'transform',
+                                    'rotate(' + curr_h_deg + ')'
+                    );
+                }
+
+                prev_s = s;
+
+            };
+
+            init();
+        },
+        tplSvgClock: function (el, data) {
+ 			vis.binds.timeandweather.showVersion();
+
+            setTimeout(function () {
+                vis.binds.timeandweather.createSvgClock(data, el[0]);
+            }, 100);
+        },
+        tplSegmentClock: function (el, data) {
+ 			vis.binds.timeandweather.showVersion();
+
+            function writeTime(_el, display) {
+                var d = new Date();
+                var h = d.getHours();
+                if (h < 10) h = '0' + h;
+                var m = d.getMinutes();
+                if (m < 10) m = '0' + m;
+                var s = d.getSeconds();
+                if (s < 10) s = '0' + s;
+                var time = h + ':' + m;
+                if (data.seconds && data.seconds !== 'false') time += ':' + s;
+                if (vis.editMode || _el.data('val') != time) {
+                    _el.data('val', time);
+                    display.setValue(time);
+                }
+            }
+            function runText(_el, _display, interval) {
+                var $display = $('#' + _display.displayId);
+
+                var val = _el.data('value');
+                var len = val.length;
+                if (!val) return;
+                var step = _el.data('step') || 0;
+
+                if (step < 0) {
+                    val = new Array(-step + 1).join(' ') + val.substring(0, _display.pattern.length + step);
+                } else {
+                    val = val.substring(step);
+                }
+                if (step >= len) {
+                    step = -(_display.pattern.length - 1);
+                } else {
+                    step++;
+                }
+                _el.data('step', step);
+                _display.setValue(val);
+
+                if (!_el.data('timerId')) {
+                    var timerId = Math.round(Math.random() * 100000) + 1;
+                    var timer = setInterval(function () {
+                        if (_el.data('timerId') != timerId) {
+                            clearInterval(timer);
+                            return;
+                        }
+                        runText(_el, _display, interval);
+                    }, interval)
+                    _el.data('timerId', timerId);
+                }
+            }
+            setTimeout(function () {
+                el.append('<canvas id="' + data.attr('wid') + '_clock" width="'  + el.width() + '" height="'  + el.height() + '"></canvas>');
+                var display = new SegmentDisplay(data.attr('wid') + '_clock');
+                display.pattern         = data.pattern || "##:##:##";
+                if (display.pattern == "##:##:##" && (!data.seconds || data.seconds === 'false')) display.pattern = "##:##";
+                display.segmentCount    = parseInt(data.segmentCount, 10) || 7;
+                display.displayAngle    = (data.displayAngle    === '' || data.displayAngle    === null || data.displayAngle === undefined) ? 9 : (parseInt(data.displayAngle, 10) || 0);
+                display.digitHeight     = parseInt(data.digitHeight, 10) || 20;
+                display.digitWidth      = parseInt(data.digitWidth, 10)  || 12;
+                display.digitDistance   = (data.digitDistance   === '' || data.digitDistance   === null || data.digitDistance === undefined) ? 2 : (parseInt(data.digitDistance, 10) || 0);
+                display.segmentWidth    = parseInt(data.segmentWidth, 10) || 3;
+                display.segmentDistance = (data.segmentDistance === '' || data.segmentDistance === null || data.segmentDistance === undefined) ? 0.5 : (parseFloat(data.segmentDistance) || 0);
+                switch (data.cornerType) {
+                    case 'SymmetricCorner':
+                        display.cornerType = 0;
+                        break;
+                    case 'FlattenedCorner':
+                        display.cornerType = 1;
+                        break;
+                    case 'PointedCorner':
+                        display.cornerType = 2;
+                        break;
+                    case 'RoundedCorner':
+                        display.cornerType = 0;
+                        break;
+                    default:
+                        display.cornerType = 0;
+                    break;
+                }
+                display.colorOn         = data.colorOn  || 'rgba(0, 0, 0, 0.9)';
+                display.colorOff        = data.colorOff || 'rgba(0, 0, 0, 0.1)';
+                data.runStepInterval    = parseInt(data.runStepInterval, 10) || 0;
+                if (data.oid && data.oid != 'nothing_selected') {
+                    var value = vis.states.attr(data.oid + '.val');
+                    if (value === null || value === undefined) value = '';
+                    value = value.toString();
+                    display.setValue(value);
+                    el.data('value', value).data('step', 0);
+                    vis.states.bind(data.oid + '.val', function (e, newVal) {
+                        el.data('value', newVal).data('step', 0);
+                        display.setValue(newVal.toString());
+                    });
+                    if (data.runStepInterval) {
+                        runText(el, display, data.runStepInterval);
+                    }
+                } else if (data.text) {
+                    el.data('value', data.text.toString()).data('step', 0);
+                    display.setValue(data.text.toString());
+                    if (data.runStepInterval) {
+                        runText(el, display, data.runStepInterval);
+                    }
+                } else if (data.clock) {
+                    var timerId = Math.round(Math.random() * 1000000);
+                    el.data('timer', timerId);
+                    writeTime(el, display);
+                    var interval = setInterval(function () {
+                        if (el.data('timer') != timerId) {
+                            clearInterval(interval);
+                        }
+                        writeTime(el, display);
+                    }, 1000);
+                } else {
+                    display.setValue('no oid, no text, no clock');
+                }
+            });
+        }
+    };
+    if (vis.editMode) {
+        vis.binds.timeandweather.editWeather = function (wid_attr, options) {
+            var line = {
+                input: '<input type="text" id="inspect_' + wid_attr + '"/>',
+                init: function (_wid_attr, data) {
+                    $('#inspect_' + _wid_attr).autocomplete({
+                        source: function (req, callback) {
+                            console.log(req.term);
+
+                            var query = 'select * from geo.places where text="' + req.term + '"';
+                            var api = 'http://query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&format=json&callback=?';
+
+                            // Send request
+                            $.ajax({
+                                type: 'GET',
+                                url: api,
+                                dataType: 'json',
+                                success: function (data) {
+                                    if (data.query.count > 0) {
+                                        var arr = [];
+                                        for (var i = 0; i < data.query.count; i++) {
+                                            arr.push({
+                                                label: $.fn._getWeatherAddress(data.query.results.place[i]),
+                                                value: data.query.results.place.woeid
+                                            });
+                                        }
+                                        callback(arr);
+                                    } else {
+                                        callback([]);
+                                    }
+                                },
+                                error: function (data) {
+                                    callback([]);
+                                }
+                            });
+                        },
+                        select: function (event, ui) {
+                            $(this).val(ui.item.value);
+                            $(this).trigger('change', ui.item.value);
+                        }
+                    });
+                }
+            };
+            return line;
+        };
+
+    }
+</script>
+<!-- startDate: function (view, elem, showWeekDay, noClass, timerId, shortWeekDay, shortYear, prependZero, monthWord, shortMonth, american) {
+            -->
+<script id="tplTwSimpleDate"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<div id="prev_tplTwSimpleDate" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev date vis-widget-lock ui-selectee" style="left: 139px; top: 76px;">30.01.2015</div>'
+        data-vis-set="timeandweather"
+        data-vis-name="SimpleDate"
+        data-vis-attrs="showWeekDay/checkbox;shortWeekDay/checkbox;shortYear/checkbox;prependZero[true]/checkbox;monthWord/checkbox;shortMonth/checkbox;americanOrder/checkbox;noClass/checkbox">
+    <%
+		vis.binds.timeandweather.startDate(this.view, this.data.attr('wid'), this.data.attr('showWeekDay'), this.data.attr('noClass'), undefined, this.data.attr('shortWeekDay'), this.data.attr('shortYear'), this.data.attr('prependZero'), this.data.attr('monthWord'), this.data.attr('shortMonth'), this.data.attr('americanOrder'));
+    %>
+</script>
+
+<script id="tplTwSimpleClock"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<div id="prev_tplTwSimpleClock" style=" position: relative; text-align: initial;padding: 4px "><div class="vis-widget_prev clock vis-widget-lock ui-selectee" style="left: 132px; top: 179px; font-size: 28px;">11:01:57</div>'
+        data-vis-set="timeandweather"
+        data-vis-name="SimpleClock"
+        data-vis-attrs="hideSeconds/checkbox;blink/checkbox;noClass/checkbox">
+    <%
+        vis.binds.timeandweather.startTime(this.view, this.data.attr('wid'), this.data.attr('hideSeconds'), this.data.attr('blink'), this.data.attr('noClass'));
+    %>
+</script>
+
+<script id="tplTwCoolClock"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_CoolClock.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="CoolClock"
+        data-vis-attrs="theme/select,fancy,swissRail,chunkySwiss,machine,simonbaird_com,classic,classicWhite,modern,simple,securephp,Tes2,Lev,Sand,Sun,Tor,Cold,Babosa,Tumb,Stone,Disc,watermelon;noSeconds/checkbox;showDigital/checkbox;showAmPm/checkbox" >
+    <%
+        vis.binds.timeandweather.tplTwCoolClock(this.view, this.data);
+    %>
+</script>
+
+<script id="tplTwFlipClock"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_FlipClock.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="FlipClock"
+        data-vis-attrs="">
+    <%
+        vis.binds.timeandweather.tplTwFlipClock(this.view, this.data);
+    %>
+</script>
+
+<script id="tplTwHtcWeather"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_HTCWeather.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="HtcWeather"
+        data-vis-attrs="woeid/custom,timeandweather.editWeather;cityName;language/select,,en,de,ru;updateInterval[180]/slider,0,1440,10;">
+    <% 
+        vis.binds.timeandweather.tplTwHtcWeather(this.view, this.data);
+    %>
+</script>
+
+<script id="tplTwYahooWeather"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_YahooWeather.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="YahooWeather"
+        data-vis-attrs="woeid/custom,timeandweather.editWeather;cityName;language/select,,en,de,ru;maxDays[7]/slider,0,8,1;updateInterval[180]/slider,0,1440,10;">
+    <% 
+        vis.binds.timeandweather.tplTwYahooWeather(this.view, this.data);
+    %>
+</script>
+
+<script id="tplTwWeather"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_YahooWeather.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="WeatherCustom"
+        data-vis-attrs="city;language/select,,en,de,ru;units_speed;"
+        data-vis-attrs0="group.now;temperature-0-oid/id;condition-0-oid/id;humidity-0-oid/id;temperature-min-0-oid/id;temperature-max-0-oid/id;wind-speed-0-oid/id;wind-dir-0-oid/id;icon-0-oid/id;"
+        data-vis-attrs1="group.tomorrow;condition-1-oid/id;temperature-min-1-oid/id;temperature-max-1-oid/id;icon-1-oid/id;"
+        data-vis-attrs2="group.aftertomorrow;condition-2-oid/id;temperature-min-2-oid/id;temperature-max-2-oid/id;icon-2-oid/id;"
+        data-vis-attrs3="group.in2days;condition-3-oid/id;temperature-min-3-oid/id;temperature-max-3-oid/id;icon-3-oid/id;"
+        data-vis-attrs4="group.in3days;condition-4-oid/id;temperature-min-4-oid/id;temperature-max-4-oid/id;icon-4-oid/id;"
+        data-vis-attrs5="group.in4days;condition-5-oid/id;temperature-min-5-oid/id;temperature-max-5-oid/id;icon-5-oid/id;"
+        data-vis-attrs6="group.in5days;condition-6-oid/id;temperature-min-6-oid/id;temperature-max-6-oid/id;icon-6-oid/id;"
+    >
+    <%
+        vis.binds.timeandweather.tplTwCustomWeather(this.view, this.data);
+    %>
+</script>
+
+<script id="tplSvgClock"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_tplSvgClock.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="Svg Clock"
+        data-vis-update-style="true"
+        data-vis-attrs="quadSize/slider,10,200,1;quadColor/color;quadTickColor/color;textSize/slider,10,200,1;textColor/color;tickColor/color;isSeconds/checkbox;handsColor/color;handsColorLine/color;handsSecColor/color;textFont/fontname"
+        >
+    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 100px;" id="<%= this.data.attr('wid') %>">
+        <div class="vis-widget-body" <%= (el) -> vis.binds.timeandweather.tplSvgClock(el, this.data) %> />
+    </div>
+</script>
+
+<script id="tplSegmentClock"
+        type="text/ejs"
+        class="vis-tpl"
+        data-vis-prev='<img src="widgets/timeandweather/img/Prev_tplSegmentClock.png"></img>'
+        data-vis-set="timeandweather"
+        data-vis-name="Segment Clock"
+        data-vis-update-style="true"
+        data-vis-attrs="oid;text;"
+        data-vis-attrs0="group.clock;clock[true]/checkbox;seconds[true]/checkbox;"
+        data-vis-attrs1="group.style;pattern[##:##:##];colorOn[rgba(0, 0, 0, 1)]/color;colorOff[rgba(0, 0, 0, 0.1)]/color;runStepInterval[0]/slider,0,5000,100;segmentCount[7]/nselect,7,14,16;displayAngle[9]/slider,0,30,1;digitHeight[20]/slider,0,60,1;digitWidth[12]/slider,0,60,1;digitDistance[2]/slider,0,60,1;segmentWidth[3]/slider,0,60,1;segmentDistance[0.5]/slider,0,5,0.1;cornerType[PointedCorner]/select,SymmetricCorner,FlattenedCorner,PointedCorner,RoundedCorner"
+        >
+    <div class="vis-widget <%== this.data.attr('class') %>" style="width: 100px; height: 30px;" id="<%= this.data.attr('wid') %>">
+        <div class="vis-widget-body" <%= (el) -> vis.binds.timeandweather.tplSegmentClock(el, this.data) %> />
+    </div>
+</script>
+
diff --git a/widgets/timeandweather/css/flipclock.css b/widgets/timeandweather/css/flipclock.css
new file mode 100644
index 0000000..2914ce0
--- /dev/null
+++ b/widgets/timeandweather/css/flipclock.css
@@ -0,0 +1,431 @@
+/* Get the bourbon mixin from http://bourbon.io */
+/* Reset */
+.flip-clock-wrapper * {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -ms-box-sizing: border-box;
+    -o-box-sizing: border-box;
+    box-sizing: border-box;
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    -o-backface-visibility: hidden;
+    backface-visibility: hidden;
+}
+
+.flip-clock-wrapper a {
+  cursor: pointer;
+  text-decoration: none;
+  color: #ccc; }
+
+.flip-clock-wrapper a:hover {
+  color: #fff; }
+
+.flip-clock-wrapper ul {
+  list-style: none; }
+
+.flip-clock-wrapper.clearfix:before,
+.flip-clock-wrapper.clearfix:after {
+  content: " ";
+  display: table; }
+
+.flip-clock-wrapper.clearfix:after {
+  clear: both; }
+
+.flip-clock-wrapper.clearfix {
+  *zoom: 1; }
+
+/* Main */
+.flip-clock-wrapper {
+  font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
+  -webkit-user-select: none; }
+
+.flip-clock-meridium {
+  background: none !important;
+  box-shadow: 0 0 0 !important;
+  font-size: 36px !important; }
+
+.flip-clock-meridium a { color: #313333; }
+
+.flip-clock-wrapper {
+  text-align: center;
+  position: relative;
+  width: 100%;
+  margin: 1em;
+}
+
+.flip-clock-wrapper:before,
+.flip-clock-wrapper:after {
+    content: " "; /* 1 */
+    display: table; /* 2 */
+}
+.flip-clock-wrapper:after {
+    clear: both;
+}
+
+/* Skeleton */
+.flip-clock-wrapper ul {
+  position: relative;
+  float: left;
+  margin: 5px;
+  width: 60px;
+  height: 90px;
+  font-size: 80px;
+  font-weight: bold;
+  line-height: 87px;
+  border-radius: 6px;
+  background: #000;
+}
+
+.flip-clock-wrapper ul li {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  line-height: 87px;
+  text-decoration: none !important;
+}
+
+.flip-clock-wrapper ul li:first-child {
+  z-index: 2; }
+
+.flip-clock-wrapper ul li a {
+  display: block;
+  height: 100%;
+  -webkit-perspective: 200px;
+  -moz-perspective: 200px;
+  perspective: 200px;
+  margin: 0 !important;
+  overflow: visible !important;
+  cursor: default !important; }
+
+.flip-clock-wrapper ul li a div {
+  z-index: 1;
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 50%;
+  font-size: 80px;
+  overflow: hidden; 
+  outline: 1px solid transparent; }
+
+.flip-clock-wrapper ul li a div .shadow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2; }
+
+.flip-clock-wrapper ul li a div.up {
+  -webkit-transform-origin: 50% 100%;
+  -moz-transform-origin: 50% 100%;
+  -ms-transform-origin: 50% 100%;
+  -o-transform-origin: 50% 100%;
+  transform-origin: 50% 100%;
+  top: 0; }
+
+.flip-clock-wrapper ul li a div.up:after {
+  content: "";
+  position: absolute;
+  top: 44px;
+  left: 0;
+  z-index: 5;
+  width: 100%;
+  height: 3px;
+  background-color: #000;
+  background-color: rgba(0, 0, 0, 0.4); }
+
+.flip-clock-wrapper ul li a div.down {
+  -webkit-transform-origin: 50% 0;
+  -moz-transform-origin: 50% 0;
+  -ms-transform-origin: 50% 0;
+  -o-transform-origin: 50% 0;
+  transform-origin: 50% 0;
+  bottom: 0;
+  border-bottom-left-radius: 6px;
+  border-bottom-right-radius: 6px;
+}
+
+.flip-clock-wrapper ul li a div div.inn {
+  position: absolute;
+  left: 0;
+  z-index: 1;
+  width: 100%;
+  height: 200%;
+  color: #ccc;
+  text-shadow: 0 1px 2px #000;
+  text-align: center;
+  background-color: #333;
+  border-radius: 6px;
+  font-size: 70px; }
+
+.flip-clock-wrapper ul li a div.up div.inn {
+  top: 0; }
+
+.flip-clock-wrapper ul li a div.down div.inn {
+  bottom: 0; }
+
+/* PLAY */
+.flip-clock-wrapper ul.play li.flip-clock-before {
+  z-index: 3; }
+
+.flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
+
+.flip-clock-wrapper ul.play li.flip-clock-active {
+  -webkit-animation: asd 0.5s 0.5s linear both;
+  -moz-animation: asd 0.5s 0.5s linear both;
+  animation: asd 0.5s 0.5s linear both;
+  z-index: 5; }
+
+.flip-clock-divider {
+  float: left;
+  display: inline-block;
+  position: relative;
+  width: 20px;
+  height: 100px; }
+
+.flip-clock-divider:first-child {
+  width: 0; }
+
+.flip-clock-dot {
+  display: block;
+  background: #323434;
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  border-radius: 50%;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+  left: 5px; }
+
+.flip-clock-divider .flip-clock-label {
+  position: absolute;
+  top: -1.5em;
+  right: -86px;
+  color: black;
+  text-shadow: none; }
+
+.flip-clock-divider.minutes .flip-clock-label {
+  right: -88px; }
+
+.flip-clock-divider.seconds .flip-clock-label {
+  right: -91px; }
+
+.flip-clock-dot.top {
+  top: 30px; }
+
+.flip-clock-dot.bottom {
+  bottom: 30px; }
+
+@-webkit-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  20% {
+    z-index: 4; }
+
+  100% {
+    z-index: 4; } }
+
+@-moz-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  20% {
+    z-index: 4; }
+
+  100% {
+    z-index: 4; } }
+
+@-o-keyframes asd {
+  0% {
+    z-index: 2; }
+
+  20% {
+    z-index: 4; }
+
+  100% {
+    z-index: 4; } }
+
+@keyframes asd {
+  0% {
+    z-index: 2; }
+
+  20% {
+    z-index: 4; }
+
+  100% {
+    z-index: 4; } }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down {
+  z-index: 2;
+  -webkit-animation: turn 0.5s 0.5s linear both;
+  -moz-animation: turn 0.5s 0.5s linear both;
+  animation: turn 0.5s 0.5s linear both; }
+
+@-webkit-keyframes turn {
+  0% {
+    -webkit-transform: rotateX(90deg); }
+
+  100% {
+    -webkit-transform: rotateX(0deg); } }
+
+@-moz-keyframes turn {
+  0% {
+    -moz-transform: rotateX(90deg); }
+
+  100% {
+    -moz-transform: rotateX(0deg); } }
+
+@-o-keyframes turn {
+  0% {
+    -o-transform: rotateX(90deg); }
+
+  100% {
+    -o-transform: rotateX(0deg); } }
+
+@keyframes turn {
+  0% {
+    transform: rotateX(90deg); }
+
+  100% {
+    transform: rotateX(0deg); } }
+
+.flip-clock-wrapper ul.play li.flip-clock-before .up {
+  z-index: 2;
+  -webkit-animation: turn2 0.5s linear both;
+  -moz-animation: turn2 0.5s linear both;
+  animation: turn2 0.5s linear both; }
+
+@-webkit-keyframes turn2 {
+  0% {
+    -webkit-transform: rotateX(0deg); }
+
+  100% {
+    -webkit-transform: rotateX(-90deg); } }
+
+@-moz-keyframes turn2 {
+  0% {
+    -moz-transform: rotateX(0deg); }
+
+  100% {
+    -moz-transform: rotateX(-90deg); } }
+
+@-o-keyframes turn2 {
+  0% {
+    -o-transform: rotateX(0deg); }
+
+  100% {
+    -o-transform: rotateX(-90deg); } }
+
+@keyframes turn2 {
+  0% {
+    transform: rotateX(0deg); }
+
+  100% {
+    transform: rotateX(-90deg); } }
+
+.flip-clock-wrapper ul li.flip-clock-active {
+  z-index: 3; }
+
+/* SHADOW */
+.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
+  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  -webkit-animation: show 0.5s linear both;
+  -moz-animation: show 0.5s linear both;
+  animation: show 0.5s linear both; }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
+  background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
+  background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
+  background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
+  -webkit-animation: hide 0.5s 0.3s linear both;
+  -moz-animation: hide 0.5s 0.3s linear both;
+  animation: hide 0.5s 0.3s linear both; }
+
+/*DOWN*/
+.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
+  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
+  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  -webkit-animation: show 0.5s linear both;
+  -moz-animation: show 0.5s linear both;
+  animation: show 0.5s linear both; }
+
+.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
+  background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
+  background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
+  background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
+  -webkit-animation: hide 0.5s 0.3s linear both;
+  -moz-animation: hide 0.5s 0.3s linear both;
+  animation: hide 0.5s 0.2s linear both; }
+
+@-webkit-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-moz-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-o-keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@keyframes show {
+  0% {
+    opacity: 0; }
+
+  100% {
+    opacity: 1; } }
+
+@-webkit-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@-moz-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@-o-keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
+
+@keyframes hide {
+  0% {
+    opacity: 1; }
+
+  100% {
+    opacity: 0; } }
diff --git a/widgets/timeandweather/css/jquery.jdigiclock.css b/widgets/timeandweather/css/jquery.jdigiclock.css
new file mode 100644
index 0000000..cab639e
--- /dev/null
+++ b/widgets/timeandweather/css/jquery.jdigiclock.css
@@ -0,0 +1,248 @@
+.dc_plugin_container {
+    width:500px;
+    height:420px;
+    position:relative;
+    overflow:hidden;
+    font-family:Arial, Verdana, Tahoma, Helvetica, sans-serif;
+    color:#fff;
+}
+
+.dc_plugin_container p {
+    margin:0;
+    padding:0;
+}
+
+.dc_left_arrow, .dc_right_arrow {
+    position:absolute;
+    top:200px;
+    z-index:200;
+    cursor:pointer;
+}
+
+.dc_left_arrow {
+    left:5px;
+}
+
+.dc_right_arrow {
+    right:5px;
+}
+
+.dc_digital_container {
+    width:500px;
+    height:360px;
+    background:url(../img/background.png) 50% 40px no-repeat;
+    position:absolute;
+    top:40px;
+    left:0;
+    z-index:98;
+}
+
+
+.dc_clock {
+    float:left;
+    margin-left:48px;
+}
+
+.dc_hours, .dc_minutes {
+    width:200px;
+    height:200px;
+    float:left;
+    position:relative;
+}
+
+.dc_minutes {
+    margin-left:4px;
+}
+
+.dc_hours_bg, .dc_minutes_bg {
+    width:100%;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:0;
+    z-index:99;
+}
+
+.dc_first_digit {
+    width:80px;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:20px;
+    z-index:100;
+}
+
+.dc_second_digit {
+    width:80px;
+    height:100%;
+    position:absolute;
+    top:0;
+    left:100px;
+    z-index:100;
+}
+
+.dc_line {
+    width:175px;
+    height:2px;
+    background:#efefef;
+    position:absolute;
+    top:97px;
+    left:12px;
+    z-index:101;
+    font-size:1px;
+}
+
+.dc_am_pm {
+    position:absolute;
+    top:156px;
+    left:130px;
+    z-index:110;
+}
+
+.dc_weather {
+    width:100%;
+    height:206px;
+    position:absolute;
+    top:140px;
+    left:0;
+    z-index:105;
+    color:#fff;
+}
+
+.dc_weather .dc_local, .dc_weather .dc_loading {
+    float:left;
+    margin:65px 0 0 45px;
+}
+.dc_city_main {
+    font-weight:bold;
+    font-size:12pt;
+}
+.dc_city {
+    font-weight:bold;
+    font-size:12pt;
+	position: absolute;
+	top: 180px
+}
+.dc_actual {
+	position: absolute;
+	top: 120px;
+	left: 60px;
+	font-size: 32px;
+}
+.dc_temp {
+    font-size:30pt;
+    padding:0;
+}
+
+.dc_temp .dc_metric {
+    margin-left:-3px;
+}
+
+.dc_weather .dc_temp {
+    float:right;
+    margin:65px 45px 0 0;
+    text-align:right;
+}
+
+.dc_weather .dc_date {
+    font-size:11pt;
+    padding-right:2px;
+}
+
+.dc_forecast_container {
+    width:500px;
+    height:400px;
+    background:url(../img/background_forecast.png) 50% 100% no-repeat;
+    position:absolute;
+    top:0;
+    left:500px;
+    z-index:98;
+}
+
+.dc_forecast_container #current {
+    width:400px;
+    height:240px;
+    margin-left:50px;
+    position:relative;
+}
+
+.dc_forecast_container .dc_loading {
+    margin:130px 0 0 70px;
+}
+
+.dc_forecast_container .dc_current .dc_temp, .dc_forecast_container .dc_current .dc_high_low {
+    width:116px;
+    text-align:center;
+}
+
+.dc_forecast_container .dc_current .dc_temp {
+    font-size:32pt;
+    margin-top:110px;
+    float:left
+}
+
+.dc_forecast_container .dc_current .dc_high_low {
+    font-size:12pt;
+    clear:both;
+	top: 160px;
+	left: 40px;
+	position: absolute;
+}
+
+.dc_forecast_container .dc_current .dc_city, .dc_forecast_container .dc_current .dc_text {
+    width:100%;
+    text-align:center;
+}
+.dc_image {
+	top: 0px;
+	left: 15px;
+	height: 230px;
+	position: absolute;
+	width: 500px;
+}
+.dc_forecast_container .dc_current .dc_text {
+    margin-top:6px;
+	position: absolute;
+	top: 205px;
+}
+
+.dc_forecast_container .dc_forecast {
+    width:400px;
+    height:122px;
+    list-style:none;
+    margin:0 0 0 50px;
+    padding:0;
+}
+
+.dc_forecast_container .dc_forecast li {
+    width:25%;
+    height:100%;
+    float:left;
+    text-align:center;
+}
+
+.dc_forecast_container .dc_forecast li p {
+    width:100%;
+    height:30px;
+    margin:0;
+    padding:0;
+    font-size:11pt;
+    line-height:30px;
+}
+
+.dc_forecast_container .dc_forecast li img {
+    width:96px;
+	margin: 0 20px;
+}
+
+.dc_forecast_container .dc_update {
+    text-align:center;
+    margin-top:10px;
+    font-size:11px;
+}
+
+.dc_forecast_container .dc_update img {
+    margin:-2px 4px 0 0;
+    vertical-align:middle;
+    cursor:pointer;
+}
diff --git a/widgets/timeandweather/css/simpleclock.css b/widgets/timeandweather/css/simpleclock.css
new file mode 100644
index 0000000..378c94f
--- /dev/null
+++ b/widgets/timeandweather/css/simpleclock.css
@@ -0,0 +1,22 @@
+.clock {
+    text-shadow:3px 3px 4px rgba(0,0,0,0.9);
+    font-weight:bold;
+    color:#969696;
+    letter-spacing:-3pt;
+    word-spacing:-10pt;
+    text-align:left;
+    font-family:trebuchet MS, sans-serif;
+    font-size: 80px;
+    overflow: visible;
+}
+
+.date {
+    text-shadow:3px 3px 4px rgba(0,0,0,0.9);
+    font-weight:bold;
+    color:#969696;
+    letter-spacing:-1pt;
+    text-align:left;
+    font-family:trebuchet MS, sans-serif;
+    font-size: 26px;
+    overflow: visible;
+}
\ No newline at end of file
diff --git a/widgets/timeandweather/css/yahoo.css b/widgets/timeandweather/css/yahoo.css
new file mode 100644
index 0000000..2c7ad07
--- /dev/null
+++ b/widgets/timeandweather/css/yahoo.css
@@ -0,0 +1,63 @@
+@charset "UTF-8";
+/**
+ * Stylesheet: example.css
+ *
+ * (c) 2011-2012 Zazar Ltd
+ * 
+ * Description: Stylesheet for examples
+ *
+ **/
+.weatherFeed {
+	font-family: Arial, Helvetica, sans-serif;
+	font-size: 90%;
+	overflow: hidden;
+    -webkit-border-radius: 20px;
+    -moz-border-radius: 20px;
+    border-radius: 20px;
+}
+.weatherFeed a { color: #888; }
+.weatherFeed a:hover {
+	color: #000;
+	text-decoration: none;
+}
+.weatherItem {
+	padding: 0.8em;
+	text-align: right;
+}
+.weatherCity { text-transform: uppercase; }
+.weatherTemp {
+	font-size: 2.8em;
+	font-weight: bold;
+}
+.weatherDesc, .weatherCity, .weatherForecastDay  { font-weight: bold; }
+.weatherDesc { margin-bottom: 0.4em; }
+.weatherRange, .weatherWind, .weatherLink, .weatherForecastItem { font-size: 0.8em; }
+.weatherLink, .weatherForecastItem {
+	margin-top: 0.5em;
+	text-align: left;
+}
+.weatherForecastItem {
+	padding: 0.5em 0.5em 0.5em 60px;
+	background-color: #000;
+	background-position: left center;
+    -webkit-border-radius: 5px;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+.weatherForecastDay { font-size: 1.1em; }
+
+.odd { background-color: #e8e8fc; }
+.even { background-color: #d4d4e8; }
+
+.day { 
+	border: 4px solid #555;
+	background: #222 url(../img/bg.jpg) repeat-x;
+	color: #fff
+ }
+.day a { color: #555; }
+
+.night { 
+	border: 4px solid #555;
+	background: #222 url(../img/bg.jpg) repeat-x;
+ }
+.night a:hover { color: #fff; }
diff --git a/widgets/timeandweather/doc.html b/widgets/timeandweather/doc.html
new file mode 100644
index 0000000..350ac25
--- /dev/null
+++ b/widgets/timeandweather/doc.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+    <link rel="stylesheet" href="../../css/doc.css" />
+</head>
+<body>
+
+
+
+</body>
+</html>
\ No newline at end of file
diff --git a/widgets/timeandweather/img/Prev_CoolClock.png b/widgets/timeandweather/img/Prev_CoolClock.png
new file mode 100644
index 0000000..e16200b
Binary files /dev/null and b/widgets/timeandweather/img/Prev_CoolClock.png differ
diff --git a/widgets/timeandweather/img/Prev_FlipClock.png b/widgets/timeandweather/img/Prev_FlipClock.png
new file mode 100644
index 0000000..c6db124
Binary files /dev/null and b/widgets/timeandweather/img/Prev_FlipClock.png differ
diff --git a/widgets/timeandweather/img/Prev_HTCWeather.png b/widgets/timeandweather/img/Prev_HTCWeather.png
new file mode 100644
index 0000000..7d7297b
Binary files /dev/null and b/widgets/timeandweather/img/Prev_HTCWeather.png differ
diff --git a/widgets/timeandweather/img/Prev_YahooWeather.png b/widgets/timeandweather/img/Prev_YahooWeather.png
new file mode 100644
index 0000000..7d01dc7
Binary files /dev/null and b/widgets/timeandweather/img/Prev_YahooWeather.png differ
diff --git a/widgets/timeandweather/img/Prev_tplSegmentClock.png b/widgets/timeandweather/img/Prev_tplSegmentClock.png
new file mode 100644
index 0000000..1517973
Binary files /dev/null and b/widgets/timeandweather/img/Prev_tplSegmentClock.png differ
diff --git a/widgets/timeandweather/img/Prev_tplSvgClock.png b/widgets/timeandweather/img/Prev_tplSvgClock.png
new file mode 100644
index 0000000..a8704e4
Binary files /dev/null and b/widgets/timeandweather/img/Prev_tplSvgClock.png differ
diff --git a/widgets/timeandweather/img/background.png b/widgets/timeandweather/img/background.png
new file mode 100644
index 0000000..c8ee78d
Binary files /dev/null and b/widgets/timeandweather/img/background.png differ
diff --git a/widgets/timeandweather/img/background_forecast.png b/widgets/timeandweather/img/background_forecast.png
new file mode 100644
index 0000000..a375d72
Binary files /dev/null and b/widgets/timeandweather/img/background_forecast.png differ
diff --git a/widgets/timeandweather/img/bg.jpg b/widgets/timeandweather/img/bg.jpg
new file mode 100644
index 0000000..81a3a96
Binary files /dev/null and b/widgets/timeandweather/img/bg.jpg differ
diff --git a/widgets/timeandweather/img/clock/0-1.png b/widgets/timeandweather/img/clock/0-1.png
new file mode 100644
index 0000000..88c3909
Binary files /dev/null and b/widgets/timeandweather/img/clock/0-1.png differ
diff --git a/widgets/timeandweather/img/clock/0-2.png b/widgets/timeandweather/img/clock/0-2.png
new file mode 100644
index 0000000..4e8196d
Binary files /dev/null and b/widgets/timeandweather/img/clock/0-2.png differ
diff --git a/widgets/timeandweather/img/clock/0-3.png b/widgets/timeandweather/img/clock/0-3.png
new file mode 100644
index 0000000..2246c39
Binary files /dev/null and b/widgets/timeandweather/img/clock/0-3.png differ
diff --git a/widgets/timeandweather/img/clock/0.png b/widgets/timeandweather/img/clock/0.png
new file mode 100644
index 0000000..de75b0c
Binary files /dev/null and b/widgets/timeandweather/img/clock/0.png differ
diff --git a/widgets/timeandweather/img/clock/001-1.png b/widgets/timeandweather/img/clock/001-1.png
new file mode 100644
index 0000000..13d75cb
Binary files /dev/null and b/widgets/timeandweather/img/clock/001-1.png differ
diff --git a/widgets/timeandweather/img/clock/001-2.png b/widgets/timeandweather/img/clock/001-2.png
new file mode 100644
index 0000000..914ed67
Binary files /dev/null and b/widgets/timeandweather/img/clock/001-2.png differ
diff --git a/widgets/timeandweather/img/clock/001-3.png b/widgets/timeandweather/img/clock/001-3.png
new file mode 100644
index 0000000..08220e4
Binary files /dev/null and b/widgets/timeandweather/img/clock/001-3.png differ
diff --git a/widgets/timeandweather/img/clock/01-1.png b/widgets/timeandweather/img/clock/01-1.png
new file mode 100644
index 0000000..bf811b6
Binary files /dev/null and b/widgets/timeandweather/img/clock/01-1.png differ
diff --git a/widgets/timeandweather/img/clock/01-2.png b/widgets/timeandweather/img/clock/01-2.png
new file mode 100644
index 0000000..8ad91d6
Binary files /dev/null and b/widgets/timeandweather/img/clock/01-2.png differ
diff --git a/widgets/timeandweather/img/clock/01-3.png b/widgets/timeandweather/img/clock/01-3.png
new file mode 100644
index 0000000..b7c1137
Binary files /dev/null and b/widgets/timeandweather/img/clock/01-3.png differ
diff --git a/widgets/timeandweather/img/clock/1-1.png b/widgets/timeandweather/img/clock/1-1.png
new file mode 100644
index 0000000..5ba2336
Binary files /dev/null and b/widgets/timeandweather/img/clock/1-1.png differ
diff --git a/widgets/timeandweather/img/clock/1-2.png b/widgets/timeandweather/img/clock/1-2.png
new file mode 100644
index 0000000..5b2bbcd
Binary files /dev/null and b/widgets/timeandweather/img/clock/1-2.png differ
diff --git a/widgets/timeandweather/img/clock/1-3.png b/widgets/timeandweather/img/clock/1-3.png
new file mode 100644
index 0000000..9fc65a5
Binary files /dev/null and b/widgets/timeandweather/img/clock/1-3.png differ
diff --git a/widgets/timeandweather/img/clock/1.png b/widgets/timeandweather/img/clock/1.png
new file mode 100644
index 0000000..f6426c8
Binary files /dev/null and b/widgets/timeandweather/img/clock/1.png differ
diff --git a/widgets/timeandweather/img/clock/11-1.png b/widgets/timeandweather/img/clock/11-1.png
new file mode 100644
index 0000000..bf2781c
Binary files /dev/null and b/widgets/timeandweather/img/clock/11-1.png differ
diff --git a/widgets/timeandweather/img/clock/11-2.png b/widgets/timeandweather/img/clock/11-2.png
new file mode 100644
index 0000000..4f805bc
Binary files /dev/null and b/widgets/timeandweather/img/clock/11-2.png differ
diff --git a/widgets/timeandweather/img/clock/11-3.png b/widgets/timeandweather/img/clock/11-3.png
new file mode 100644
index 0000000..13d1f45
Binary files /dev/null and b/widgets/timeandweather/img/clock/11-3.png differ
diff --git a/widgets/timeandweather/img/clock/111-1.png b/widgets/timeandweather/img/clock/111-1.png
new file mode 100644
index 0000000..e4d3ad9
Binary files /dev/null and b/widgets/timeandweather/img/clock/111-1.png differ
diff --git a/widgets/timeandweather/img/clock/111-2.png b/widgets/timeandweather/img/clock/111-2.png
new file mode 100644
index 0000000..2720f83
Binary files /dev/null and b/widgets/timeandweather/img/clock/111-2.png differ
diff --git a/widgets/timeandweather/img/clock/111-3.png b/widgets/timeandweather/img/clock/111-3.png
new file mode 100644
index 0000000..e21232c
Binary files /dev/null and b/widgets/timeandweather/img/clock/111-3.png differ
diff --git a/widgets/timeandweather/img/clock/2-1.png b/widgets/timeandweather/img/clock/2-1.png
new file mode 100644
index 0000000..a55a125
Binary files /dev/null and b/widgets/timeandweather/img/clock/2-1.png differ
diff --git a/widgets/timeandweather/img/clock/2-2.png b/widgets/timeandweather/img/clock/2-2.png
new file mode 100644
index 0000000..ab29332
Binary files /dev/null and b/widgets/timeandweather/img/clock/2-2.png differ
diff --git a/widgets/timeandweather/img/clock/2-3.png b/widgets/timeandweather/img/clock/2-3.png
new file mode 100644
index 0000000..4860e71
Binary files /dev/null and b/widgets/timeandweather/img/clock/2-3.png differ
diff --git a/widgets/timeandweather/img/clock/2.png b/widgets/timeandweather/img/clock/2.png
new file mode 100644
index 0000000..5f8f679
Binary files /dev/null and b/widgets/timeandweather/img/clock/2.png differ
diff --git a/widgets/timeandweather/img/clock/21-1.png b/widgets/timeandweather/img/clock/21-1.png
new file mode 100644
index 0000000..415933a
Binary files /dev/null and b/widgets/timeandweather/img/clock/21-1.png differ
diff --git a/widgets/timeandweather/img/clock/21-2.png b/widgets/timeandweather/img/clock/21-2.png
new file mode 100644
index 0000000..f6637f3
Binary files /dev/null and b/widgets/timeandweather/img/clock/21-2.png differ
diff --git a/widgets/timeandweather/img/clock/21-3.png b/widgets/timeandweather/img/clock/21-3.png
new file mode 100644
index 0000000..da2b10c
Binary files /dev/null and b/widgets/timeandweather/img/clock/21-3.png differ
diff --git a/widgets/timeandweather/img/clock/211-1.png b/widgets/timeandweather/img/clock/211-1.png
new file mode 100644
index 0000000..85c4a8d
Binary files /dev/null and b/widgets/timeandweather/img/clock/211-1.png differ
diff --git a/widgets/timeandweather/img/clock/211-2.png b/widgets/timeandweather/img/clock/211-2.png
new file mode 100644
index 0000000..b7de7a7
Binary files /dev/null and b/widgets/timeandweather/img/clock/211-2.png differ
diff --git a/widgets/timeandweather/img/clock/211-3.png b/widgets/timeandweather/img/clock/211-3.png
new file mode 100644
index 0000000..33c896c
Binary files /dev/null and b/widgets/timeandweather/img/clock/211-3.png differ
diff --git a/widgets/timeandweather/img/clock/3-1.png b/widgets/timeandweather/img/clock/3-1.png
new file mode 100644
index 0000000..11dbd3c
Binary files /dev/null and b/widgets/timeandweather/img/clock/3-1.png differ
diff --git a/widgets/timeandweather/img/clock/3-2.png b/widgets/timeandweather/img/clock/3-2.png
new file mode 100644
index 0000000..c32c20f
Binary files /dev/null and b/widgets/timeandweather/img/clock/3-2.png differ
diff --git a/widgets/timeandweather/img/clock/3-3.png b/widgets/timeandweather/img/clock/3-3.png
new file mode 100644
index 0000000..8d764ce
Binary files /dev/null and b/widgets/timeandweather/img/clock/3-3.png differ
diff --git a/widgets/timeandweather/img/clock/3.png b/widgets/timeandweather/img/clock/3.png
new file mode 100644
index 0000000..a7f3a64
Binary files /dev/null and b/widgets/timeandweather/img/clock/3.png differ
diff --git a/widgets/timeandweather/img/clock/31-1.png b/widgets/timeandweather/img/clock/31-1.png
new file mode 100644
index 0000000..c47ff4d
Binary files /dev/null and b/widgets/timeandweather/img/clock/31-1.png differ
diff --git a/widgets/timeandweather/img/clock/31-2.png b/widgets/timeandweather/img/clock/31-2.png
new file mode 100644
index 0000000..f7c22f9
Binary files /dev/null and b/widgets/timeandweather/img/clock/31-2.png differ
diff --git a/widgets/timeandweather/img/clock/31-3.png b/widgets/timeandweather/img/clock/31-3.png
new file mode 100644
index 0000000..ffc4355
Binary files /dev/null and b/widgets/timeandweather/img/clock/31-3.png differ
diff --git a/widgets/timeandweather/img/clock/311-1.png b/widgets/timeandweather/img/clock/311-1.png
new file mode 100644
index 0000000..9beccc3
Binary files /dev/null and b/widgets/timeandweather/img/clock/311-1.png differ
diff --git a/widgets/timeandweather/img/clock/311-2.png b/widgets/timeandweather/img/clock/311-2.png
new file mode 100644
index 0000000..007e511
Binary files /dev/null and b/widgets/timeandweather/img/clock/311-2.png differ
diff --git a/widgets/timeandweather/img/clock/311-3.png b/widgets/timeandweather/img/clock/311-3.png
new file mode 100644
index 0000000..08680f9
Binary files /dev/null and b/widgets/timeandweather/img/clock/311-3.png differ
diff --git a/widgets/timeandweather/img/clock/4-1.png b/widgets/timeandweather/img/clock/4-1.png
new file mode 100644
index 0000000..53adea0
Binary files /dev/null and b/widgets/timeandweather/img/clock/4-1.png differ
diff --git a/widgets/timeandweather/img/clock/4-2.png b/widgets/timeandweather/img/clock/4-2.png
new file mode 100644
index 0000000..09748fa
Binary files /dev/null and b/widgets/timeandweather/img/clock/4-2.png differ
diff --git a/widgets/timeandweather/img/clock/4-3.png b/widgets/timeandweather/img/clock/4-3.png
new file mode 100644
index 0000000..b7340ec
Binary files /dev/null and b/widgets/timeandweather/img/clock/4-3.png differ
diff --git a/widgets/timeandweather/img/clock/4.png b/widgets/timeandweather/img/clock/4.png
new file mode 100644
index 0000000..514d8a9
Binary files /dev/null and b/widgets/timeandweather/img/clock/4.png differ
diff --git a/widgets/timeandweather/img/clock/41-1.png b/widgets/timeandweather/img/clock/41-1.png
new file mode 100644
index 0000000..44caa77
Binary files /dev/null and b/widgets/timeandweather/img/clock/41-1.png differ
diff --git a/widgets/timeandweather/img/clock/41-2.png b/widgets/timeandweather/img/clock/41-2.png
new file mode 100644
index 0000000..3d47374
Binary files /dev/null and b/widgets/timeandweather/img/clock/41-2.png differ
diff --git a/widgets/timeandweather/img/clock/41-3.png b/widgets/timeandweather/img/clock/41-3.png
new file mode 100644
index 0000000..36c2c18
Binary files /dev/null and b/widgets/timeandweather/img/clock/41-3.png differ
diff --git a/widgets/timeandweather/img/clock/5-1.png b/widgets/timeandweather/img/clock/5-1.png
new file mode 100644
index 0000000..890bf24
Binary files /dev/null and b/widgets/timeandweather/img/clock/5-1.png differ
diff --git a/widgets/timeandweather/img/clock/5-2.png b/widgets/timeandweather/img/clock/5-2.png
new file mode 100644
index 0000000..2e96b34
Binary files /dev/null and b/widgets/timeandweather/img/clock/5-2.png differ
diff --git a/widgets/timeandweather/img/clock/5-3.png b/widgets/timeandweather/img/clock/5-3.png
new file mode 100644
index 0000000..041864b
Binary files /dev/null and b/widgets/timeandweather/img/clock/5-3.png differ
diff --git a/widgets/timeandweather/img/clock/5.png b/widgets/timeandweather/img/clock/5.png
new file mode 100644
index 0000000..2199a20
Binary files /dev/null and b/widgets/timeandweather/img/clock/5.png differ
diff --git a/widgets/timeandweather/img/clock/51-1.png b/widgets/timeandweather/img/clock/51-1.png
new file mode 100644
index 0000000..3a265a7
Binary files /dev/null and b/widgets/timeandweather/img/clock/51-1.png differ
diff --git a/widgets/timeandweather/img/clock/51-2.png b/widgets/timeandweather/img/clock/51-2.png
new file mode 100644
index 0000000..cdff72c
Binary files /dev/null and b/widgets/timeandweather/img/clock/51-2.png differ
diff --git a/widgets/timeandweather/img/clock/51-3.png b/widgets/timeandweather/img/clock/51-3.png
new file mode 100644
index 0000000..dba6cec
Binary files /dev/null and b/widgets/timeandweather/img/clock/51-3.png differ
diff --git a/widgets/timeandweather/img/clock/511-1.png b/widgets/timeandweather/img/clock/511-1.png
new file mode 100644
index 0000000..a81c3c1
Binary files /dev/null and b/widgets/timeandweather/img/clock/511-1.png differ
diff --git a/widgets/timeandweather/img/clock/511-2.png b/widgets/timeandweather/img/clock/511-2.png
new file mode 100644
index 0000000..eda1eb2
Binary files /dev/null and b/widgets/timeandweather/img/clock/511-2.png differ
diff --git a/widgets/timeandweather/img/clock/511-3.png b/widgets/timeandweather/img/clock/511-3.png
new file mode 100644
index 0000000..1385b00
Binary files /dev/null and b/widgets/timeandweather/img/clock/511-3.png differ
diff --git a/widgets/timeandweather/img/clock/6-1.png b/widgets/timeandweather/img/clock/6-1.png
new file mode 100644
index 0000000..0e8c1c6
Binary files /dev/null and b/widgets/timeandweather/img/clock/6-1.png differ
diff --git a/widgets/timeandweather/img/clock/6-2.png b/widgets/timeandweather/img/clock/6-2.png
new file mode 100644
index 0000000..4a8000b
Binary files /dev/null and b/widgets/timeandweather/img/clock/6-2.png differ
diff --git a/widgets/timeandweather/img/clock/6-3.png b/widgets/timeandweather/img/clock/6-3.png
new file mode 100644
index 0000000..0aefa2e
Binary files /dev/null and b/widgets/timeandweather/img/clock/6-3.png differ
diff --git a/widgets/timeandweather/img/clock/6.png b/widgets/timeandweather/img/clock/6.png
new file mode 100644
index 0000000..85ebec2
Binary files /dev/null and b/widgets/timeandweather/img/clock/6.png differ
diff --git a/widgets/timeandweather/img/clock/7-1.png b/widgets/timeandweather/img/clock/7-1.png
new file mode 100644
index 0000000..2d88935
Binary files /dev/null and b/widgets/timeandweather/img/clock/7-1.png differ
diff --git a/widgets/timeandweather/img/clock/7-2.png b/widgets/timeandweather/img/clock/7-2.png
new file mode 100644
index 0000000..eecf8fb
Binary files /dev/null and b/widgets/timeandweather/img/clock/7-2.png differ
diff --git a/widgets/timeandweather/img/clock/7-3.png b/widgets/timeandweather/img/clock/7-3.png
new file mode 100644
index 0000000..7612089
Binary files /dev/null and b/widgets/timeandweather/img/clock/7-3.png differ
diff --git a/widgets/timeandweather/img/clock/7.png b/widgets/timeandweather/img/clock/7.png
new file mode 100644
index 0000000..007acd8
Binary files /dev/null and b/widgets/timeandweather/img/clock/7.png differ
diff --git a/widgets/timeandweather/img/clock/8-1.png b/widgets/timeandweather/img/clock/8-1.png
new file mode 100644
index 0000000..a786129
Binary files /dev/null and b/widgets/timeandweather/img/clock/8-1.png differ
diff --git a/widgets/timeandweather/img/clock/8-2.png b/widgets/timeandweather/img/clock/8-2.png
new file mode 100644
index 0000000..069bbe2
Binary files /dev/null and b/widgets/timeandweather/img/clock/8-2.png differ
diff --git a/widgets/timeandweather/img/clock/8-3.png b/widgets/timeandweather/img/clock/8-3.png
new file mode 100644
index 0000000..0dba24f
Binary files /dev/null and b/widgets/timeandweather/img/clock/8-3.png differ
diff --git a/widgets/timeandweather/img/clock/8.png b/widgets/timeandweather/img/clock/8.png
new file mode 100644
index 0000000..e020265
Binary files /dev/null and b/widgets/timeandweather/img/clock/8.png differ
diff --git a/widgets/timeandweather/img/clock/9-1.png b/widgets/timeandweather/img/clock/9-1.png
new file mode 100644
index 0000000..9122423
Binary files /dev/null and b/widgets/timeandweather/img/clock/9-1.png differ
diff --git a/widgets/timeandweather/img/clock/9-2.png b/widgets/timeandweather/img/clock/9-2.png
new file mode 100644
index 0000000..3e2681a
Binary files /dev/null and b/widgets/timeandweather/img/clock/9-2.png differ
diff --git a/widgets/timeandweather/img/clock/9-3.png b/widgets/timeandweather/img/clock/9-3.png
new file mode 100644
index 0000000..e3c4c09
Binary files /dev/null and b/widgets/timeandweather/img/clock/9-3.png differ
diff --git a/widgets/timeandweather/img/clock/9.png b/widgets/timeandweather/img/clock/9.png
new file mode 100644
index 0000000..ba43856
Binary files /dev/null and b/widgets/timeandweather/img/clock/9.png differ
diff --git a/widgets/timeandweather/img/clock/am.png b/widgets/timeandweather/img/clock/am.png
new file mode 100644
index 0000000..0d85337
Binary files /dev/null and b/widgets/timeandweather/img/clock/am.png differ
diff --git a/widgets/timeandweather/img/clock/apm.png b/widgets/timeandweather/img/clock/apm.png
new file mode 100644
index 0000000..baa7a76
Binary files /dev/null and b/widgets/timeandweather/img/clock/apm.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg-blank.png b/widgets/timeandweather/img/clock/clockbg-blank.png
new file mode 100644
index 0000000..c575e21
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg-blank.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg1.png b/widgets/timeandweather/img/clock/clockbg1.png
new file mode 100644
index 0000000..34e5aaa
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg1.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg2.png b/widgets/timeandweather/img/clock/clockbg2.png
new file mode 100644
index 0000000..f8061ab
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg2.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg3.png b/widgets/timeandweather/img/clock/clockbg3.png
new file mode 100644
index 0000000..3552b51
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg3.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg4.png b/widgets/timeandweather/img/clock/clockbg4.png
new file mode 100644
index 0000000..a1f9487
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg4.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg5.png b/widgets/timeandweather/img/clock/clockbg5.png
new file mode 100644
index 0000000..f894d19
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg5.png differ
diff --git a/widgets/timeandweather/img/clock/clockbg6.png b/widgets/timeandweather/img/clock/clockbg6.png
new file mode 100644
index 0000000..4c06587
Binary files /dev/null and b/widgets/timeandweather/img/clock/clockbg6.png differ
diff --git a/widgets/timeandweather/img/clock/pm.png b/widgets/timeandweather/img/clock/pm.png
new file mode 100644
index 0000000..9dcf109
Binary files /dev/null and b/widgets/timeandweather/img/clock/pm.png differ
diff --git a/widgets/timeandweather/img/icon_left.png b/widgets/timeandweather/img/icon_left.png
new file mode 100644
index 0000000..eeac4ca
Binary files /dev/null and b/widgets/timeandweather/img/icon_left.png differ
diff --git a/widgets/timeandweather/img/icon_right.png b/widgets/timeandweather/img/icon_right.png
new file mode 100644
index 0000000..624c1c0
Binary files /dev/null and b/widgets/timeandweather/img/icon_right.png differ
diff --git a/widgets/timeandweather/img/refresh_01.png b/widgets/timeandweather/img/refresh_01.png
new file mode 100644
index 0000000..4bdbd0c
Binary files /dev/null and b/widgets/timeandweather/img/refresh_01.png differ
diff --git a/widgets/timeandweather/js/coolclock.js b/widgets/timeandweather/js/coolclock.js
new file mode 100644
index 0000000..1bd3c62
--- /dev/null
+++ b/widgets/timeandweather/js/coolclock.js
@@ -0,0 +1,360 @@
+
+// Constructor for CoolClock objects
+window.CoolClock = function(options) {
+	return this.init(options);
+}
+
+// Config contains some defaults, and clock skins
+CoolClock.config = {
+	tickDelay: 1000,
+	longTickDelay: 15000,
+	defaultRadius: 85,
+	renderRadius: 100,
+	defaultSkin: "chunkySwiss",
+	defaultFont: "15px sans-serif",
+	// Should be in skin probably...
+	// (TODO: allow skinning of digital display)
+
+	skins:	{
+		// There are more skins in moreskins.js
+		// Try making your own skin by copy/pasting one of these and tweaking it
+		swissRail: {
+			outerBorder: { lineWidth: 2, radius:95, color: "black", alpha: 1 },
+			smallIndicator: { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
+			largeIndicator: { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
+			hourHand: { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
+			minuteHand: { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
+			secondHand: { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
+		},
+		chunkySwiss: {
+			outerBorder: { lineWidth: 4, radius:97, color: "black", alpha: 1 },
+			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
+			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
+			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
+			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
+			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+		},
+		chunkySwissOnBlack: {
+			outerBorder: { lineWidth: 4, radius:97, color: "white", alpha: 1 },
+			smallIndicator: { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
+			largeIndicator: { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
+			hourHand: { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
+			minuteHand: { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
+			secondHand: { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+			secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+		}
+
+	},
+
+	// Test for IE so we can nurse excanvas in a couple of places
+	isIE: !!document.all,
+
+	// Will store (a reference to) each clock here, indexed by the id of the canvas element
+	clockTracker: {},
+
+	// For giving a unique id to coolclock canvases with no id
+	noIdCount: 0
+};
+
+// Define the CoolClock object's methods
+CoolClock.prototype = {
+
+	// Initialise using the parameters parsed from the colon delimited class
+	init: function(options) {
+		// Parse and store the options
+		this.canvasId       = options.canvasId;
+		this.skinId         = options.skinId || CoolClock.config.defaultSkin;
+		this.font           = options.font || CoolClock.config.defaultFont;
+		this.displayRadius  = options.displayRadius || CoolClock.config.defaultRadius;
+		this.renderRadius   = options.renderRadius || CoolClock.config.renderRadius;
+		this.showSecondHand = typeof options.showSecondHand == "boolean" ? options.showSecondHand : true;
+		this.gmtOffset      = (options.gmtOffset != null && options.gmtOffset != '') ? parseFloat(options.gmtOffset) : null;
+		this.showDigital    = typeof options.showDigital == "boolean" ? options.showDigital : false;
+		this.logClock       = typeof options.logClock == "boolean" ? options.logClock : false;
+		this.logClockRev    = typeof options.logClock == "boolean" ? options.logClockRev : false;
+		this.showAmPm       = typeof options.showAmPm == "boolean" ? options.showAmPm : false;
+
+		this.tickDelay      = CoolClock.config[ this.showSecondHand ? "tickDelay" : "longTickDelay" ];
+
+		// Get the canvas element
+		this.canvas = document.getElementById(this.canvasId);
+
+		// Make the canvas the requested size. It's always square.
+		this.canvas.setAttribute("width",this.displayRadius*2);
+		this.canvas.setAttribute("height",this.displayRadius*2);
+		this.canvas.style.width = this.displayRadius*2 + "px";
+		this.canvas.style.height = this.displayRadius*2 + "px";
+
+		// Determine by what factor to relate skin values to canvas positions.
+		// renderRadius is the max skin positional value before leaving the
+		// canvas. displayRadius is half the width and height of the canvas in
+		// pixels. If they are equal, there is a 1:1 relation of skin position
+		// values to canvas pixels. Setting both to 200 allows 100px of space
+		// around clock skins to add your own things: this is due to current
+		// skins maxing out at a positional value of 100.
+		this.scale = this.displayRadius / this.renderRadius;
+
+		// Initialise canvas context
+		this.ctx = this.canvas.getContext("2d");
+		this.ctx.scale(this.scale,this.scale);
+
+		// Keep track of this object
+		CoolClock.config.clockTracker[this.canvasId] = this;
+
+		// should we be running the clock?
+		this.active = true;
+		this.tickTimeout = null;
+
+		// Start the clock going
+		this.tick();
+
+		return this;
+	},
+
+	// Draw a circle at point x,y with params as defined in skin
+	fullCircleAt: function(x,y,skin) {
+		this.ctx.save();
+		this.ctx.globalAlpha = skin.alpha;
+		this.ctx.lineWidth = skin.lineWidth;
+
+		if (!CoolClock.config.isIE) {
+			this.ctx.beginPath();
+		}
+
+		if (CoolClock.config.isIE) {
+			// excanvas doesn't scale line width so we will do it here
+			this.ctx.lineWidth = this.ctx.lineWidth * this.scale;
+		}
+
+		this.ctx.arc(x, y, skin.radius, 0, 2*Math.PI, false);
+
+		if (CoolClock.config.isIE) {
+			// excanvas doesn't close the circle so let's fill in the tiny gap
+			this.ctx.arc(x, y, skin.radius, -0.1, 0.1, false);
+		}
+
+		if (skin.fillColor) {
+			this.ctx.fillStyle = skin.fillColor
+			this.ctx.fill();
+		}
+		if (skin.color) {
+			this.ctx.strokeStyle = skin.color;
+			this.ctx.stroke();
+		}
+		this.ctx.restore();
+	},
+
+	// Draw some text centered vertically and horizontally
+	drawTextAt: function(theText,x,y,skin) {
+		if (!skin) skin = this.getSkin();
+		this.ctx.save();
+		this.ctx.font = skin.font || this.font;
+		var tSize = this.ctx.measureText(theText);
+		// TextMetrics rarely returns a height property: use baseline instead.
+		if (!tSize.height) {
+			tSize.height = 0;
+			this.ctx.textBaseline = 'middle';
+		}
+		this.ctx.fillText(theText, x - tSize.width/2, y - tSize.height/2);
+		this.ctx.restore();
+	},
+
+	lpad2: function(num) {
+		return (num < 10 ? '0' : '') + num;
+	},
+
+	tickAngle: function(second) {
+		// Log algorithm by David Bradshaw
+		var tweak = 3; // If it's lower the one second mark looks wrong (?)
+		if (this.logClock) {
+			return second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak));
+		}
+		else if (this.logClockRev) {
+			// Flip the seconds then flip the angle (trickiness)
+			second = (60 - second) % 60;
+			return 1.0 - (second == 0 ? 0 : (Math.log(second*tweak) / Math.log(60*tweak)));
+		}
+		else {
+			return second/60.0;
+		}
+	},
+
+	timeText: function(hour,min,sec) {
+		var c = CoolClock.config;
+		return '' +
+			(this.showAmPm ? ((hour%12)==0 ? 12 : (hour%12)) : hour) + ':' +
+			this.lpad2(min) +
+			(c.showSecondHand ? ':' + this.lpad2(sec) : '') +
+			(this.showAmPm ? (hour < 12 ? ' am' : ' pm') : '')
+		;
+	},
+
+	// Draw a radial line by rotating then drawing a straight line
+	// Ha ha, I think I've accidentally used Taus, (see http://tauday.com/)
+	radialLineAtAngle: function(angleFraction,skin) {
+		this.ctx.save();
+		this.ctx.translate(this.renderRadius,this.renderRadius);
+		this.ctx.rotate(Math.PI * (2.0 * angleFraction - 0.5));
+		this.ctx.globalAlpha = skin.alpha;
+		this.ctx.strokeStyle = skin.color;
+		this.ctx.lineWidth = skin.lineWidth;
+
+		if (CoolClock.config.isIE)
+			// excanvas doesn't scale line width so we will do it here
+			this.ctx.lineWidth = this.ctx.lineWidth * this.scale;
+
+		if (skin.radius) {
+			this.fullCircleAt(skin.startAt,0,skin)
+		}
+		else {
+			this.ctx.beginPath();
+			this.ctx.moveTo(skin.startAt,0)
+			this.ctx.lineTo(skin.endAt,0);
+			this.ctx.stroke();
+		}
+		this.ctx.restore();
+	},
+
+	render: function(hour,min,sec) {
+		// Get the skin
+		var skin = this.getSkin();
+
+		// Clear
+		this.ctx.clearRect(0,0,this.renderRadius*2,this.renderRadius*2);
+
+		// Draw the outer edge of the clock
+		if (skin.outerBorder)
+			this.fullCircleAt(this.renderRadius,this.renderRadius,skin.outerBorder);
+
+		// Draw the tick marks. Every 5th one is a big one
+		for (var i=0;i<60;i++) {
+			(i%5)  && skin.smallIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.smallIndicator);
+			!(i%5) && skin.largeIndicator && this.radialLineAtAngle(this.tickAngle(i),skin.largeIndicator);
+		}
+
+		// Write the time
+		if (this.showDigital) {
+			this.drawTextAt(
+				this.timeText(hour,min,sec),
+				this.renderRadius,
+				this.renderRadius+this.renderRadius/2
+			);
+		}
+
+		var hourA = (hour%12)*5 + min/12.0,
+		    minA = min + sec/60.0,
+		    secA = sec;
+
+		// Draw the hands
+		if (skin.hourHand)
+			this.radialLineAtAngle(this.tickAngle(hourA),skin.hourHand);
+
+		if (skin.minuteHand)
+			this.radialLineAtAngle(this.tickAngle(minA),skin.minuteHand);
+
+		if (this.showSecondHand && skin.secondHand)
+			this.radialLineAtAngle(this.tickAngle(secA),skin.secondHand);
+
+		// Hands decoration - not in IE
+		if  (!CoolClock.config.isIE) {
+			if (skin.hourDecoration)
+				this.radialLineAtAngle(this.tickAngle(hourA), skin.hourDecoration);
+
+			if (skin.minDecoration)
+				this.radialLineAtAngle(this.tickAngle(minA), skin.minDecoration);
+
+			if (this.showSecondHand && skin.secondDecoration)
+				this.radialLineAtAngle(this.tickAngle(secA),skin.secondDecoration);
+		}
+
+		if (this.extraRender) {
+			this.extraRender(hour,min,sec);
+		}
+	},
+
+	// Check the time and display the clock
+	refreshDisplay: function() {
+		var now = new Date();
+		if (this.gmtOffset != null) {
+			// Use GMT + gmtOffset
+			var offsetNow = new Date(now.valueOf() + (this.gmtOffset * 1000 * 60 * 60));
+			this.render(offsetNow.getUTCHours(),offsetNow.getUTCMinutes(),offsetNow.getUTCSeconds());
+		}
+		else {
+			// Use local time
+			this.render(now.getHours(),now.getMinutes(),now.getSeconds());
+		}
+	},
+
+	// Set timeout to trigger a tick in the future
+	nextTick: function() {
+		this.tickTimeout = setTimeout("CoolClock.config.clockTracker['"+this.canvasId+"'].tick()",this.tickDelay);
+	},
+
+	// Check the canvas element hasn't been removed
+	stillHere: function() {
+		return document.getElementById(this.canvasId) != null;
+	},
+
+	// Stop this clock
+	stop: function() {
+		this.active = false;
+		clearTimeout(this.tickTimeout);
+	},
+
+	// Start this clock
+	start: function() {
+		if (!this.active) {
+			this.active = true;
+			this.tick();
+		}
+	},
+
+	// Main tick handler. Refresh the clock then setup the next tick
+	tick: function() {
+		if (this.stillHere() && this.active) {
+			this.refreshDisplay()
+			this.nextTick();
+		}
+	},
+
+	getSkin: function() {
+		var skin = CoolClock.config.skins[this.skinId];
+		if (!skin) skin = CoolClock.config.skins[CoolClock.config.defaultSkin];
+		return skin;
+	}
+};
+
+// Find all canvas elements that have the CoolClock class and turns them into clocks
+CoolClock.findAndCreateClocks = function() {
+	// (Let's not use a jQuery selector here so it's easier to use frameworks other than jQuery)
+	var canvases = document.getElementsByTagName("canvas");
+	for (var i=0;i<canvases.length;i++) {
+		// Pull out the fields from the class. Example "CoolClock:chunkySwissOnBlack:1000"
+		var fields = canvases[i].className.split(" ")[0].split(":");
+		if (fields[0] == "CoolClock") {
+			if (!canvases[i].id) {
+				// If there's no id on this canvas element then give it one
+				canvases[i].id = '_coolclock_auto_id_' + CoolClock.config.noIdCount++;
+			}
+			// Create a clock object for this element
+			new CoolClock({
+				canvasId:       canvases[i].id,
+				skinId:         fields[1],
+				displayRadius:  fields[2],
+				showSecondHand: fields[3]!='noSeconds',
+				gmtOffset:      fields[4],
+				showDigital:    fields[5]=='showDigital',
+				logClock:       fields[6]=='logClock',
+				logClockRev:    fields[6]=='logClockRev',
+				showAmPm:       fields[7]=='showAmPm'
+			});
+		}
+	}
+};
+
+// If you don't have jQuery then you need a body onload like this: <body onload="CoolClock.findAndCreateClocks()">
+// If you do have jQuery and it's loaded already then we can do it right now
+if (window.jQuery) jQuery(document).ready(CoolClock.findAndCreateClocks);
diff --git a/widgets/timeandweather/js/flipclock/flipclock.min.js b/widgets/timeandweather/js/flipclock/flipclock.min.js
new file mode 100644
index 0000000..fbb807e
--- /dev/null
+++ b/widgets/timeandweather/js/flipclock/flipclock.min.js
@@ -0,0 +1,2 @@
+/*! flipclock 2015-01-19 */
+var Base=function(){};Base.extend=function(a,b){"use strict";var c=Base.prototype.extend;Base._prototyping=!0;var d=new this;c.call(d,a),d.base=function(){},delete Base._prototyping;var e=d.constructor,f=d.constructor=function(){if(!Base._prototyping)if(this._constructing||this.constructor==f)this._constructing=!0,e.apply(this,arguments),delete this._constructing;else if(null!==arguments[0])return(arguments[0].extend||c).call(arguments[0],d)};return f.ancestor=this,f.extend=this.extend,f.forEach=this.forEach,f.implement=this.implement,f.prototype=d,f.toString=this.toString,f.valueOf=function(a){return"object"==a?f:e.valueOf()},c.call(f,b),"function"==typeof f.init&&f.init(),f},Base.prototype={extend:function(a,b){if(arguments.length>1){var c=this[a];if(c&&"function"==typeof b&&(!c.valueOf||c.valueOf()!=b.valueOf())&&/\bbase\b/.test(b)){var d=b.valueOf();b=function(){var a=this.base||Base.prototype.base;this.base=c;var b=d.apply(this,arguments);return this.base=a,b},b.valueOf=function(a){return"object"==a?b:d},b.toString=Base.toString}this[a]=b}else if(a){var e=Base.prototype.extend;Base._prototyping||"function"==typeof this||(e=this.extend||e);for(var f={toSource:null},g=["constructor","toString","valueOf"],h=Base._prototyping?0:1;i=g[h++];)a[i]!=f[i]&&e.call(this,i,a[i]);for(var i in a)f[i]||e.call(this,i,a[i])}return this}},Base=Base.extend({constructor:function(){this.extend(arguments[0])}},{ancestor:Object,version:"1.1",forEach:function(a,b,c){for(var d in a)void 0===this.prototype[d]&&b.call(c,a[d],d,a)},implement:function(){for(var a=0;a<arguments.length;a++)"function"==typeof arguments[a]?arguments[a](this.prototype):this.prototype.extend(arguments[a]);return this},toString:function(){return String(this.valueOf())}});var FlipClock;!function(a){"use strict";FlipClock=function(a,b,c){return b instanceof Object&&b instanceof Date==!1&&(c=b,b=0),new FlipClock.Factory(a,b,c)},FlipClock.Lang={},FlipClock.Base=Base.extend({buildDate:"2014-12-12",version:"0.7.7",constructor:function(b,c){"object"!=typeof b&&(b={}),"object"!=typeof c&&(c={}),this.setOptions(a.extend(!0,{},b,c))},callback:function(a){if("function"==typeof a){for(var b=[],c=1;c<=arguments.length;c++)arguments[c]&&b.push(arguments[c]);a.apply(this,b)}},log:function(a){window.console&&console.log&&console.log(a)},getOption:function(a){return this[a]?this[a]:!1},getOptions:function(){return this},setOption:function(a,b){this[a]=b},setOptions:function(a){for(var b in a)"undefined"!=typeof a[b]&&this.setOption(b,a[b])}})}(jQuery),function(a){"use strict";FlipClock.Face=FlipClock.Base.extend({autoStart:!0,dividers:[],factory:!1,lists:[],constructor:function(a,b){this.dividers=[],this.lists=[],this.base(b),this.factory=a},build:function(){this.autoStart&&this.start()},createDivider:function(b,c,d){"boolean"!=typeof c&&c||(d=c,c=b);var e=['<span class="'+this.factory.classes.dot+' top"></span>','<span class="'+this.factory.classes.dot+' bottom"></span>'].join("");d&&(e=""),b=this.factory.localize(b);var f=['<span class="'+this.factory.classes.divider+" "+(c?c:"").toLowerCase()+'">','<span class="'+this.factory.classes.label+'">'+(b?b:"")+"</span>",e,"</span>"],g=a(f.join(""));return this.dividers.push(g),g},createList:function(a,b){"object"==typeof a&&(b=a,a=0);var c=new FlipClock.List(this.factory,a,b);return this.lists.push(c),c},reset:function(){this.factory.time=new FlipClock.Time(this.factory,this.factory.original?Math.round(this.factory.original):0,{minimumDigits:this.factory.minimumDigits}),this.flip(this.factory.original,!1)},appendDigitToClock:function(a){a.$el.append(!1)},addDigit:function(a){var b=this.createList(a,{classes:{active:this.factory.classes.active,before:this.factory.classes.before,flip:this.factory.classes.flip}});this.appendDigitToClock(b)},start:function(){},stop:function(){},autoIncrement:function(){this.factory.countdown?this.decrement():this.increment()},increment:function(){this.factory.time.addSecond()},decrement:function(){0==this.factory.time.getTimeSeconds()?this.factory.stop():this.factory.time.subSecond()},flip:function(b,c){var d=this;a.each(b,function(a,b){var e=d.lists[a];e?(c||b==e.digit||e.play(),e.select(b)):d.addDigit(b)})}})}(jQuery),function(a){"use strict";FlipClock.Factory=FlipClock.Base.extend({animationRate:1e3,autoStart:!0,callbacks:{destroy:!1,create:!1,init:!1,interval:!1,start:!1,stop:!1,reset:!1},classes:{active:"flip-clock-active",before:"flip-clock-before",divider:"flip-clock-divider",dot:"flip-clock-dot",label:"flip-clock-label",flip:"flip",play:"play",wrapper:"flip-clock-wrapper"},clockFace:"HourlyCounter",countdown:!1,defaultClockFace:"HourlyCounter",defaultLanguage:"english",$el:!1,face:!0,lang:!1,language:"english",minimumDigits:0,original:!1,running:!1,time:!1,timer:!1,$wrapper:!1,constructor:function(b,c,d){d||(d={}),this.lists=[],this.running=!1,this.base(d),this.$el=a(b).addClass(this.classes.wrapper),this.$wrapper=this.$el,this.original=c instanceof Date?c:c?Math.round(c):0,this.time=new FlipClock.Time(this,this.original,{minimumDigits:this.minimumDigits,animationRate:this.animationRate}),this.timer=new FlipClock.Timer(this,d),this.loadLanguage(this.language),this.loadClockFace(this.clockFace,d),this.autoStart&&this.start()},loadClockFace:function(a,b){var c,d="Face",e=!1;return a=a.ucfirst()+d,this.face.stop&&(this.stop(),e=!0),this.$el.html(""),this.time.minimumDigits=this.minimumDigits,c=FlipClock[a]?new FlipClock[a](this,b):new FlipClock[this.defaultClockFace+d](this,b),c.build(),this.face=c,e&&this.start(),this.face},loadLanguage:function(a){var b;return b=FlipClock.Lang[a.ucfirst()]?FlipClock.Lang[a.ucfirst()]:FlipClock.Lang[a]?FlipClock.Lang[a]:FlipClock.Lang[this.defaultLanguage],this.lang=b},localize:function(a,b){var c=this.lang;if(!a)return null;var d=a.toLowerCase();return"object"==typeof b&&(c=b),c&&c[d]?c[d]:a},start:function(a){var b=this;b.running||b.countdown&&!(b.countdown&&b.time.time>0)?b.log("Trying to start timer when countdown already at 0"):(b.face.start(b.time),b.timer.start(function(){b.flip(),"function"==typeof a&&a()}))},stop:function(a){this.face.stop(),this.timer.stop(a);for(var b in this.lists)this.lists.hasOwnProperty(b)&&this.lists[b].stop()},reset:function(a){this.timer.reset(a),this.face.reset()},setTime:function(a){this.time.time=a,this.flip(!0)},getTime:function(){return this.time},setCountdown:function(a){var b=this.running;this.countdown=a?!0:!1,b&&(this.stop(),this.start())},flip:function(a){this.face.flip(!1,a)}})}(jQuery),function(a){"use strict";FlipClock.List=FlipClock.Base.extend({digit:0,classes:{active:"flip-clock-active",before:"flip-clock-before",flip:"flip"},factory:!1,$el:!1,$obj:!1,items:[],lastDigit:0,constructor:function(a,b){this.factory=a,this.digit=b,this.lastDigit=b,this.$el=this.createList(),this.$obj=this.$el,b>0&&this.select(b),this.factory.$el.append(this.$el)},select:function(a){if("undefined"==typeof a?a=this.digit:this.digit=a,this.digit!=this.lastDigit){var b=this.$el.find("."+this.classes.before).removeClass(this.classes.before);this.$el.find("."+this.classes.active).removeClass(this.classes.active).addClass(this.classes.before),this.appendListItem(this.classes.active,this.digit),b.remove(),this.lastDigit=this.digit}},play:function(){this.$el.addClass(this.factory.classes.play)},stop:function(){var a=this;setTimeout(function(){a.$el.removeClass(a.factory.classes.play)},this.factory.timer.interval)},createListItem:function(a,b){return['<li class="'+(a?a:"")+'">','<a href="#">','<div class="up">','<div class="shadow"></div>','<div class="inn">'+(b?b:"")+"</div>","</div>",'<div class="down">','<div class="shadow"></div>','<div class="inn">'+(b?b:"")+"</div>","</div>","</a>","</li>"].join("")},appendListItem:function(a,b){var c=this.createListItem(a,b);this.$el.append(c)},createList:function(){var b=this.getPrevDigit()?this.getPrevDigit():this.digit,c=a(['<ul class="'+this.classes.flip+" "+(this.factory.running?this.factory.classes.play:"")+'">',this.createListItem(this.classes.before,b),this.createListItem(this.classes.active,this.digit),"</ul>"].join(""));return c},getNextDigit:function(){return 9==this.digit?0:this.digit+1},getPrevDigit:function(){return 0==this.digit?9:this.digit-1}})}(jQuery),function(a){"use strict";String.prototype.ucfirst=function(){return this.substr(0,1).toUpperCase()+this.substr(1)},a.fn.FlipClock=function(b,c){return new FlipClock(a(this),b,c)},a.fn.flipClock=function(b,c){return a.fn.FlipClock(b,c)}}(jQuery),function(a){"use strict";FlipClock.Time=FlipClock.Base.extend({time:0,factory:!1,minimumDigits:0,constructor:function(a,b,c){"object"!=typeof c&&(c={}),c.minimumDigits||(c.minimumDigits=a.minimumDigits),this.base(c),this.factory=a,b&&(this.time=b)},convertDigitsToArray:function(a){var b=[];a=a.toString();for(var c=0;c<a.length;c++)a[c].match(/^\d*$/g)&&b.push(a[c]);return b},digit:function(a){var b=this.toString(),c=b.length;return b[c-a]?b[c-a]:!1},digitize:function(b){var c=[];if(a.each(b,function(a,b){b=b.toString(),1==b.length&&(b="0"+b);for(var d=0;d<b.length;d++)c.push(b.charAt(d))}),c.length>this.minimumDigits&&(this.minimumDigits=c.length),this.minimumDigits>c.length)for(var d=c.length;d<this.minimumDigits;d++)c.unshift("0");return c},getDateObject:function(){return this.time instanceof Date?this.time:new Date((new Date).getTime()+1e3*this.getTimeSeconds())},getDayCounter:function(a){var b=[this.getDays(),this.getHours(!0),this.getMinutes(!0)];return a&&b.push(this.getSeconds(!0)),this.digitize(b)},getDays:function(a){var b=this.getTimeSeconds()/60/60/24;return a&&(b%=7),Math.floor(b)},getHourCounter:function(){var a=this.digitize([this.getHours(),this.getMinutes(!0),this.getSeconds(!0)]);return a},getHourly:function(){return this.getHourCounter()},getHours:function(a){var b=this.getTimeSeconds()/60/60;return a&&(b%=24),Math.floor(b)},getMilitaryTime:function(a,b){"undefined"==typeof b&&(b=!0),a||(a=this.getDateObject());var c=[a.getHours(),a.getMinutes()];return b===!0&&c.push(a.getSeconds()),this.digitize(c)},getMinutes:function(a){var b=this.getTimeSeconds()/60;return a&&(b%=60),Math.floor(b)},getMinuteCounter:function(){var a=this.digitize([this.getMinutes(),this.getSeconds(!0)]);return a},getTimeSeconds:function(a){return a||(a=new Date),this.time instanceof Date?this.factory.countdown?Math.max(this.time.getTime()/1e3-a.getTime()/1e3,0):a.getTime()/1e3-this.time.getTime()/1e3:this.time},getTime:function(a,b){"undefined"==typeof b&&(b=!0),a||(a=this.getDateObject()),console.log(a);var c=a.getHours(),d=[c>12?c-12:0===c?12:c,a.getMinutes()];return b===!0&&d.push(a.getSeconds()),this.digitize(d)},getSeconds:function(a){var b=this.getTimeSeconds();return a&&(60==b?b=0:b%=60),Math.ceil(b)},getWeeks:function(a){var b=this.getTimeSeconds()/60/60/24/7;return a&&(b%=52),Math.floor(b)},removeLeadingZeros:function(b,c){var d=0,e=[];return a.each(c,function(a){b>a?d+=parseInt(c[a],10):e.push(c[a])}),0===d?e:c},addSeconds:function(a){this.time instanceof Date?this.time.setSeconds(this.time.getSeconds()+a):this.time+=a},addSecond:function(){this.addSeconds(1)},subSeconds:function(a){this.time instanceof Date?this.time.setSeconds(this.time.getSeconds()-a):this.time-=a},subSecond:function(){this.subSeconds(1)},toString:function(){return this.getTimeSeconds().toString()}})}(jQuery),function(){"use strict";FlipClock.Timer=FlipClock.Base.extend({callbacks:{destroy:!1,create:!1,init:!1,interval:!1,start:!1,stop:!1,reset:!1},count:0,factory:!1,interval:1e3,animationRate:1e3,constructor:function(a,b){this.base(b),this.factory=a,this.callback(this.callbacks.init),this.callback(this.callbacks.create)},getElapsed:function(){return this.count*this.interval},getElapsedTime:function(){return new Date(this.time+this.getElapsed())},reset:function(a){clearInterval(this.timer),this.count=0,this._setInterval(a),this.callback(this.callbacks.reset)},start:function(a){this.factory.running=!0,this._createTimer(a),this.callback(this.callbacks.start)},stop:function(a){this.factory.running=!1,this._clearInterval(a),this.callback(this.callbacks.stop),this.callback(a)},_clearInterval:function(){clearInterval(this.timer)},_createTimer:function(a){this._setInterval(a)},_destroyTimer:function(a){this._clearInterval(),this.timer=!1,this.callback(a),this.callback(this.callbacks.destroy)},_interval:function(a){this.callback(this.callbacks.interval),this.callback(a),this.count++},_setInterval:function(a){var b=this;b._interval(a),b.timer=setInterval(function(){b._interval(a)},this.interval)}})}(jQuery),function(a){FlipClock.TwentyFourHourClockFace=FlipClock.Face.extend({constructor:function(a,b){this.base(a,b)},build:function(b){var c=this,d=this.factory.$el.find("ul");this.factory.time.time||(this.factory.original=new Date,this.factory.time=new FlipClock.Time(this.factory,this.factory.original));var b=b?b:this.factory.time.getMilitaryTime(!1,this.showSeconds);b.length>d.length&&a.each(b,function(a,b){c.createList(b)}),this.createDivider(),this.createDivider(),a(this.dividers[0]).insertBefore(this.lists[this.lists.length-2].$el),a(this.dividers[1]).insertBefore(this.lists[this.lists.length-4].$el),this.base()},flip:function(a,b){this.autoIncrement(),a=a?a:this.factory.time.getMilitaryTime(!1,this.showSeconds),this.base(a,b)}})}(jQuery),function(a){FlipClock.CounterFace=FlipClock.Face.extend({shouldAutoIncrement:!1,constructor:function(a,b){"object"!=typeof b&&(b={}),a.autoStart=b.autoStart?!0:!1,b.autoStart&&(this.shouldAutoIncrement=!0),a.increment=function(){a.countdown=!1,a.setTime(a.getTime().getTimeSeconds()+1)},a.decrement=function(){a.countdown=!0;var b=a.getTime().getTimeSeconds();b>0&&a.setTime(b-1)},a.setValue=function(b){a.setTime(b)},a.setCounter=function(b){a.setTime(b)},this.base(a,b)},build:function(){var b=this,c=this.factory.$el.find("ul"),d=this.factory.getTime().digitize([this.factory.getTime().time]);d.length>c.length&&a.each(d,function(a,c){var d=b.createList(c);d.select(c)}),a.each(this.lists,function(a,b){b.play()}),this.base()},flip:function(a,b){this.shouldAutoIncrement&&this.autoIncrement(),a||(a=this.factory.getTime().digitize([this.factory.getTime().time])),this.base(a,b)},reset:function(){this.factory.time=new FlipClock.Time(this.factory,this.factory.original?Math.round(this.factory.original):0),this.flip()}})}(jQuery),function(a){FlipClock.DailyCounterFace=FlipClock.Face.extend({showSeconds:!0,constructor:function(a,b){this.base(a,b)},build:function(b){var c=this,d=this.factory.$el.find("ul"),e=0;b=b?b:this.factory.time.getDayCounter(this.showSeconds),b.length>d.length&&a.each(b,function(a,b){c.createList(b)}),this.showSeconds?a(this.createDivider("Seconds")).insertBefore(this.lists[this.lists.length-2].$el):e=2,a(this.createDivider("Minutes")).insertBefore(this.lists[this.lists.length-4+e].$el),a(this.createDivider("Hours")).insertBefore(this.lists[this.lists.length-6+e].$el),a(this.createDivider("Days",!0)).insertBefore(this.lists[0].$el),this.base()},flip:function(a,b){a||(a=this.factory.time.getDayCounter(this.showSeconds)),this.autoIncrement(),this.base(a,b)}})}(jQuery),function(a){FlipClock.HourlyCounterFace=FlipClock.Face.extend({constructor:function(a,b){this.base(a,b)},build:function(b,c){var d=this,e=this.factory.$el.find("ul");c=c?c:this.factory.time.getHourCounter(),c.length>e.length&&a.each(c,function(a,b){d.createList(b)}),a(this.createDivider("Seconds")).insertBefore(this.lists[this.lists.length-2].$el),a(this.createDivider("Minutes")).insertBefore(this.lists[this.lists.length-4].$el),b||a(this.createDivider("Hours",!0)).insertBefore(this.lists[0].$el),this.base()},flip:function(a,b){a||(a=this.factory.time.getHourCounter()),this.autoIncrement(),this.base(a,b)},appendDigitToClock:function(a){this.base(a),this.dividers[0].insertAfter(this.dividers[0].next())}})}(jQuery),function(){FlipClock.MinuteCounterFace=FlipClock.HourlyCounterFace.extend({clearExcessDigits:!1,constructor:function(a,b){this.base(a,b)},build:function(){this.base(!0,this.factory.time.getMinuteCounter())},flip:function(a,b){a||(a=this.factory.time.getMinuteCounter()),this.base(a,b)}})}(jQuery),function(a){FlipClock.TwelveHourClockFace=FlipClock.TwentyFourHourClockFace.extend({meridium:!1,meridiumText:"AM",build:function(){var b=this.factory.time.getTime(!1,this.showSeconds);this.base(b),this.meridiumText=this.getMeridium(),this.meridium=a(['<ul class="flip-clock-meridium">',"<li>",'<a href="#">'+this.meridiumText+"</a>","</li>","</ul>"].join("")),this.meridium.insertAfter(this.lists[this.lists.length-1].$el)},flip:function(a,b){this.meridiumText!=this.getMeridium()&&(this.meridiumText=this.getMeridium(),this.meridium.find("a").html(this.meridiumText)),this.base(this.factory.time.getTime(!1,this.showSeconds),b)},getMeridium:function(){return(new Date).getHours()>=12?"PM":"AM"},isPM:function(){return"PM"==this.getMeridium()?!0:!1},isAM:function(){return"AM"==this.getMeridium()?!0:!1}})}(jQuery),function(){FlipClock.Lang.Arabic={years:"سنوات",months:"شهور",days:"أيام",hours:"ساعات",minutes:"دقائق",seconds:"ثواني"},FlipClock.Lang.ar=FlipClock.Lang.Arabic,FlipClock.Lang["ar-ar"]=FlipClock.Lang.Arabic,FlipClock.Lang.arabic=FlipClock.Lang.Arabic}(jQuery),function(){FlipClock.Lang.Danish={years:"År",months:"Måneder",days:"Dage",hours:"Timer",minutes:"Minutter",seconds:"Sekunder"},FlipClock.Lang.da=FlipClock.Lang.Danish,FlipClock.Lang["da-dk"]=FlipClock.Lang.Danish,FlipClock.Lang.danish=FlipClock.Lang.Danish}(jQuery),function(){FlipClock.Lang.German={years:"Jahre",months:"Monate",days:"Tage",hours:"Stunden",minutes:"Minuten",seconds:"Sekunden"},FlipClock.Lang.de=FlipClock.Lang.German,FlipClock.Lang["de-de"]=FlipClock.Lang.German,FlipClock.Lang.german=FlipClock.Lang.German}(jQuery),function(){FlipClock.Lang.English={years:"Years",months:"Months",days:"Days",hours:"Hours",minutes:"Minutes",seconds:"Seconds"},FlipClock.Lang.en=FlipClock.Lang.English,FlipClock.Lang["en-us"]=FlipClock.Lang.English,FlipClock.Lang.english=FlipClock.Lang.English}(jQuery),function(){FlipClock.Lang.Spanish={years:"A&#241;os",months:"Meses",days:"D&#205;as",hours:"Horas",minutes:"Minutos",seconds:"Segundo"},FlipClock.Lang.es=FlipClock.Lang.Spanish,FlipClock.Lang["es-es"]=FlipClock.Lang.Spanish,FlipClock.Lang.spanish=FlipClock.Lang.Spanish}(jQuery),function(){FlipClock.Lang.Finnish={years:"Vuotta",months:"Kuukautta",days:"Päivää",hours:"Tuntia",minutes:"Minuuttia",seconds:"Sekuntia"},FlipClock.Lang.fi=FlipClock.Lang.Finnish,FlipClock.Lang["fi-fi"]=FlipClock.Lang.Finnish,FlipClock.Lang.finnish=FlipClock.Lang.Finnish}(jQuery),function(){FlipClock.Lang.French={years:"Ans",months:"Mois",days:"Jours",hours:"Heures",minutes:"Minutes",seconds:"Secondes"},FlipClock.Lang.fr=FlipClock.Lang.French,FlipClock.Lang["fr-ca"]=FlipClock.Lang.French,FlipClock.Lang.french=FlipClock.Lang.French}(jQuery),function(){FlipClock.Lang.Italian={years:"Anni",months:"Mesi",days:"Giorni",hours:"Ore",minutes:"Minuti",seconds:"Secondi"},FlipClock.Lang.it=FlipClock.Lang.Italian,FlipClock.Lang["it-it"]=FlipClock.Lang.Italian,FlipClock.Lang.italian=FlipClock.Lang.Italian}(jQuery),function(){FlipClock.Lang.Latvian={years:"Gadi",months:"Mēneši",days:"Dienas",hours:"Stundas",minutes:"Minūtes",seconds:"Sekundes"},FlipClock.Lang.lv=FlipClock.Lang.Latvian,FlipClock.Lang["lv-lv"]=FlipClock.Lang.Latvian,FlipClock.Lang.latvian=FlipClock.Lang.Latvian}(jQuery),function(){FlipClock.Lang.Dutch={years:"Jaren",months:"Maanden",days:"Dagen",hours:"Uren",minutes:"Minuten",seconds:"Seconden"},FlipClock.Lang.nl=FlipClock.Lang.Dutch,FlipClock.Lang["nl-be"]=FlipClock.Lang.Dutch,FlipClock.Lang.dutch=FlipClock.Lang.Dutch}(jQuery),function(){FlipClock.Lang.Norwegian={years:"År",months:"Måneder",days:"Dager",hours:"Timer",minutes:"Minutter",seconds:"Sekunder"},FlipClock.Lang.no=FlipClock.Lang.Norwegian,FlipClock.Lang.nb=FlipClock.Lang.Norwegian,FlipClock.Lang["no-nb"]=FlipClock.Lang.Norwegian,FlipClock.Lang.norwegian=FlipClock.Lang.Norwegian}(jQuery),function(){FlipClock.Lang.Portuguese={years:"Anos",months:"Meses",days:"Dias",hours:"Horas",minutes:"Minutos",seconds:"Segundos"},FlipClock.Lang.pt=FlipClock.Lang.Portuguese,FlipClock.Lang["pt-br"]=FlipClock.Lang.Portuguese,FlipClock.Lang.portuguese=FlipClock.Lang.Portuguese}(jQuery),function(){FlipClock.Lang.Russian={years:"лет",months:"месяцев",days:"дней",hours:"часов",minutes:"минут",seconds:"секунд"},FlipClock.Lang.ru=FlipClock.Lang.Russian,FlipClock.Lang["ru-ru"]=FlipClock.Lang.Russian,FlipClock.Lang.russian=FlipClock.Lang.Russian}(jQuery),function(){FlipClock.Lang.Swedish={years:"År",months:"Månader",days:"Dagar",hours:"Timmar",minutes:"Minuter",seconds:"Sekunder"},FlipClock.Lang.sv=FlipClock.Lang.Swedish,FlipClock.Lang["sv-se"]=FlipClock.Lang.Swedish,FlipClock.Lang.swedish=FlipClock.Lang.Swedish}(jQuery),function(){FlipClock.Lang.Chinese={years:"年",months:"月",days:"日",hours:"时",minutes:"分",seconds:"秒"},FlipClock.Lang.zh=FlipClock.Lang.Chinese,FlipClock.Lang["zh-cn"]=FlipClock.Lang.Chinese,FlipClock.Lang.chinese=FlipClock.Lang.Chinese}(jQuery);
\ No newline at end of file
diff --git a/widgets/timeandweather/js/jquery.jdigiclock.js b/widgets/timeandweather/js/jquery.jdigiclock.js
new file mode 100644
index 0000000..75d43e0
--- /dev/null
+++ b/widgets/timeandweather/js/jquery.jdigiclock.js
@@ -0,0 +1,527 @@
+/*
+ * jDigiClock plugin 2.1
+ *
+ * http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/
+ *
+ * Copyright (c) 2009 Radoslav Dimov
+ *
+ * Dual licensed under the MIT and GPL licenses:
+ * http://www.opensource.org/licenses/mit-license.php
+ * http://www.gnu.org/licenses/gpl.html
+ *
+ */
+/* Changes for DahsUI *_container => *_cAntainer, because container is occuped */
+var jdigiclockCounter = 0;
+
+(function($) {
+    "use strict";
+    $.fn.extend({
+        jdigiclock: function (_options) {
+
+            var defaults = {
+                clockImagesPath:     'images/clock/',
+                weatherImagesPath:   'images/weather/',
+                lang:                'en',
+                am_pm:               false,
+                weatherLocationCode: 'EUR|BG|BU002|BOURGAS',
+                weatherMetric:       'C',
+                weatherUpdate:       0,
+                proxyType:           'yahoo',
+                curID:               0
+            };
+
+            var regional = [];
+            regional['en'] = {
+                monthNames: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+                dayNames: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
+            };
+            regional['de'] = {
+                monthNames: ['Jan', 'Feb', 'M&auml;r', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
+                dayNames: ['So', 'Mo', 'Di', 'Mi', 'Do', 'Fr', 'Sa']
+            };
+            regional['ru'] = {
+                monthNames: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июня', 'Июля', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
+                dayNames: ['Вос', 'Пон', 'Вт', 'Ср', 'Чет', 'Пят', 'Суб']
+            };
+
+
+            var options = $.extend(defaults, _options);
+            options.curID = jdigiclockCounter++;
+            var i = options.weatherLocationCode.indexOf('[');
+            if (i != -1) {
+                options.weatherLocationCode = options.weatherLocationCode.substring(i + 1);
+                i = options.weatherLocationCode.indexOf(']');
+                options.weatherLocationCode = options.weatherLocationCode.substring(0, i);
+            }
+
+            return this.each(function() {
+                
+                var $this               = $(this);
+                var o                   = options;
+                $this.o                 = o;
+                $this.clockImagesPath   = o.clockImagesPath;
+                $this.weatherImagesPath = o.weatherImagesPath;
+                $this.lang              = regional[o.lang] == undefined ? regional['en'] : regional[o.lang];
+				$this.lang.lang         = o.lang;
+                $this.am_pm             = o.am_pm;
+                $this.weatherLocationCode = o.weatherLocationCode;
+                $this.weatherMetric     = o.weatherMetric == 'C' ? 1 : 0;
+                $this.weatherUpdate     = o.weatherUpdate;
+                $this.proxyType         = o.proxyType;
+                $this.currDate          = '';
+                $this.timeUpdate        = '';
+
+
+                var html = '<div id="plugin_cAntainer' + o.curID + '" class="dc_plugin_container">';
+                html    += '<p id="left_arrow' + o.curID + '" class="dc_left_arrow"><img src="' + o.clockImagesPath + '../icon_left.png" /></p>';
+                html    += '<p id="right_arrow' + o.curID + '" class="dc_right_arrow"><img src="' + o.clockImagesPath + '../icon_right.png" /></p>';
+                html    += '<div id="digital_cAntainer' + o.curID + '" class="dc_digital_container">';
+                html    += '<div id="clock' + o.curID + '" class="dc_clock"></div>';
+                html    += '<div id="weather' + o.curID + '" class="dc_weather"></div>';
+                html    += '</div>';
+                html    += '<div id="forecast_cAntainer' + o.curID + '" class="dc_forecast_container"></div>';
+                html    += '</div>';
+
+                $this.html(html);
+
+                $this.displayClock($this);
+
+                $this.displayWeather($this);               
+
+                var panel_pos = ($('#plugin_cAntainer' + o.curID + ' > div').length - 1) * 500;
+                var next = function() {
+                    //var $this = $(this);
+                    //$('#right_arrow').unbind('click', next);
+                    $('#plugin_cAntainer' + o.curID + ' > div').filter(function (i) {
+                        $(this).animate({'left': (i * 500) - 500 + 'px'}, 400, function() {
+                            if (!i) {
+                                $(this).appendTo('#plugin_cAntainer' + o.curID).css({'left': panel_pos + 'px'});
+                            }
+                            //$('#right_arrow').bind('click touchstart', next);
+                        });                        
+                    });
+                };
+                $('#right_arrow' + o.curID).bind('click touchstart', function (e) {
+                    // Protect against two events
+                    if (vis.detectBounce(this)) return;
+
+                    next(e);
+                });
+
+                var prev = function() {
+                    //var $this = $(this);
+                    //$('#left_arrow').unbind('click', prev);
+                    $('#plugin_cAntainer' + o.curID + ' > div:last').prependTo('#plugin_cAntainer' + o.curID).css({'left': '-500px'});
+                    $('#plugin_cAntainer' + o.curID + ' > div').filter(function (i) {
+                        $(this).animate({'left': i * 500 + 'px'}, 400, function () {
+                            //$('#left_arrow').bind('click', prev);
+                        });
+                    });
+                };
+                document.getElementById('left_arrow' + o.curID).o = o;
+                document.getElementById('right_arrow' + o.curID).o = o;
+                document.getElementById('digital_cAntainer' + o.curID).o = o;
+                document.getElementById('forecast_cAntainer' + o.curID).o = o;
+                $('#left_arrow' + o.curID).bind('click touchstart', function (e) {
+                    // Protect against two events
+                    if (vis.detectBounce(this)) return;
+
+                    prev(e);
+                });
+            });
+        }
+    });  
+
+    $.fn.displayClock = function(el) {
+        $.fn.getTime(el);
+        setTimeout(function() {$.fn.displayClock(el)}, $.fn.delay());
+    };
+
+    $.fn.displayWeather = function(el) {
+        $.fn.getWeather(el);
+        if (el.weatherUpdate > 0) {
+            setTimeout(function () {
+                $.fn.displayWeather(el);
+            }, (el.weatherUpdate * 60 * 1000));
+        }
+    };
+
+    $.fn.delay = function() {
+        return (60 - (new Date()).getSeconds()) * 1000;
+    };
+
+    $.fn.getTime = function(el) {
+        var now = new Date();
+        var old = new Date();
+        old.setTime(now.getTime() - 60000);
+        
+        var now_hours, now_minutes, old_hours, old_minutes, timeOld = '';
+        now_hours =  now.getHours();
+        now_minutes = now.getMinutes();
+        old_hours =  old.getHours();
+        old_minutes = old.getMinutes();
+
+        if (el.am_pm) {
+            var am_pm = now_hours > 11 ? 'pm' : 'am';
+            now_hours = ((now_hours > 12) ? now_hours - 12 : now_hours);
+            old_hours = ((old_hours > 12) ? old_hours - 12 : old_hours);
+        } 
+
+        now_hours   = ((now_hours <  10) ? '0' : '') + now_hours;
+        now_minutes = ((now_minutes <  10) ? '0' : '') + now_minutes;
+        old_hours   = ((old_hours <  10) ? '0' : '') + old_hours;
+        old_minutes = ((old_minutes <  10) ? '0' : '') + old_minutes;
+        // date
+        el.currDate = el.lang.dayNames[now.getDay()] + ',&nbsp;' + now.getDate() + '&nbsp;' + el.lang.monthNames[now.getMonth()];
+        // time update
+        el.timeUpdate = el.currDate + ',&nbsp;' + now_hours + ':' + now_minutes;
+
+        var firstHourDigit = old_hours.substr(0,1);
+        var secondHourDigit = old_hours.substr(1,1);
+        var firstMinuteDigit = old_minutes.substr(0,1);
+        var secondMinuteDigit = old_minutes.substr(1,1);
+        
+        timeOld += '<div id="hours'+el.o.curID+'" class="dc_hours"><div class="dc_line"></div>';
+        timeOld += '<div id="hours_bg'+el.o.curID+'" class="dc_hours_bg"><img src="' + el.clockImagesPath + 'clockbg1.png" /></div>';
+        timeOld += '<img src="' + el.clockImagesPath + firstHourDigit + '.png" id="fhd'+el.o.curID+'" class="dc_first_digit" />';
+        timeOld += '<img src="' + el.clockImagesPath + secondHourDigit + '.png" id="shd'+el.o.curID+'" class="dc_second_digit" />';
+        timeOld += '</div>';
+        timeOld += '<div id="minutes'+el.o.curID+'" class="dc_minutes"><div class="dc_line"></div>';
+        if (el.am_pm) {
+            timeOld += '<div id="am_pm'+el.o.curID+'" class="dc_am_pm"><img src="' + el.clockImagesPath + am_pm + '.png" /></div>';
+        }
+        timeOld += '<div id="minutes_bg'+el.o.curID+'" class="dc_minutes_bg"><img src="' + el.clockImagesPath + 'clockbg1.png" /></div>';
+        timeOld += '<img src="' + el.clockImagesPath + firstMinuteDigit + '.png" id="fmd'+el.o.curID+'" class="dc_first_digit" />';
+        timeOld += '<img src="' + el.clockImagesPath + secondMinuteDigit + '.png" id="smd'+el.o.curID+'" class="dc_second_digit" />';
+        timeOld += '</div>';
+
+        el.find('#clock'+el.o.curID).html(timeOld);
+
+        // set minutes
+        if (secondMinuteDigit != '9') {
+            firstMinuteDigit = firstMinuteDigit + '1';
+        }
+
+        if (old_minutes == '59') {
+            firstMinuteDigit = '511';
+        }
+
+        _setTimeout(function (el) {
+            $('#fmd' + el.o.curID).attr('src', el.clockImagesPath + firstMinuteDigit + '-1.png');
+            $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg2.png');
+        }, 200, el);
+        _setTimeout(function (el) { $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg3.png')}, 250, el);
+        _setTimeout(function (el) {
+            $('#fmd' + el.o.curID).attr('src', el.clockImagesPath + firstMinuteDigit + '-2.png');
+            $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg4.png');
+        }, 400, el);
+        _setTimeout(function (el) { $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg5.png')}, 450, el);
+        _setTimeout(function (el) {
+            $('#fmd' + el.o.curID).attr('src', el.clockImagesPath + firstMinuteDigit + '-3.png');
+            $('#minutes_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg6.png');
+        }, 600, el);
+
+        _setTimeout(function(el) {
+            $('#smd' + el.o.curID).attr('src', el.clockImagesPath + secondMinuteDigit + '-1.png');
+            $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg2.png');
+        }, 200, el);
+        _setTimeout(function(el) { $('#minutes_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg3.png')}, 250, el);
+        _setTimeout(function(el) {
+            $('#smd' + el.o.curID).attr('src', el.clockImagesPath + secondMinuteDigit + '-2.png');
+            $('#minutes_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg4.png');
+        }, 400, el);
+        _setTimeout(function (el) { $('#minutes_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg5.png')}, 450, el);
+        _setTimeout(function (el) {
+            $('#smd' + el.o.curID).attr('src', el.clockImagesPath + secondMinuteDigit + '-3.png');
+            $('#minutes_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg6.png');
+        }, 600, el);
+
+        _setTimeout(function (el) {$('#fmd' + el.o.curID).attr('src', el.clockImagesPath + now_minutes.substr(0,1) + '.png')}, 800, el);
+        _setTimeout(function (el) {$('#smd' + el.o.curID).attr('src', el.clockImagesPath + now_minutes.substr(1,1) + '.png')}, 800, el);
+        _setTimeout(function (el) { $('#minutes_bg' + el.o.curID + ' img').attr('src', el.clockImagesPath + 'clockbg1.png')}, 850, el);
+
+        // set hours
+        if (now_minutes == '00') {
+           
+            if (el.am_pm) {
+                if (now_hours == '00') {                   
+                    firstHourDigit = firstHourDigit + '1';
+                    now_hours = '12';
+                } else if (now_hours == '01') {
+                    firstHourDigit = '001';
+                    secondHourDigit = '111';
+                } else {
+                    firstHourDigit = firstHourDigit + '1';
+                }
+            } else {
+                if (now_hours != '10') {
+                    firstHourDigit = firstHourDigit + '1';
+                }
+
+                if (now_hours == '20') {
+                    firstHourDigit = '1';
+                }
+
+                if (now_hours == '00') {
+                    firstHourDigit = firstHourDigit + '1';
+                    secondHourDigit = secondHourDigit + '11';
+                }
+            }
+
+            _setTimeout(function(el) {
+                $('#fhd' + el.o.curID).attr('src', el.clockImagesPath + firstHourDigit + '-1.png');
+                $('#hours_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg2.png');
+            },200, el);
+            _setTimeout(function(el) { $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg3.png')}, 250, el);
+            _setTimeout(function(el) {
+                $('#fhd' + el.o.curID).attr('src', el.clockImagesPath + firstHourDigit + '-2.png');
+                $('#hours_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg4.png');
+            },400, el);
+            _setTimeout(function(el) { $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg5.png')}, 450, el);
+            _setTimeout(function(el) {
+                $('#fhd' + el.o.curID).attr('src', el.clockImagesPath + firstHourDigit + '-3.png');
+                $('#hours_bg' + el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg6.png');
+            },600, el);
+
+            _setTimeout(function() {
+            $('#shd'+el.o.curID).attr('src', el.clockImagesPath + secondHourDigit + '-1.png');
+            $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg2.png');
+            },200, el);
+            _setTimeout(function(el) { $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg3.png')}, 250, el);
+            _setTimeout(function(el) {
+                $('#shd'+el.o.curID).attr('src', el.clockImagesPath + secondHourDigit + '-2.png');
+                $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg4.png');
+            },400, el);
+            _setTimeout(function(el) { $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg5.png')}, 450, el);
+            _setTimeout(function(el) {
+                $('#shd'+el.o.curID).attr('src', el.clockImagesPath + secondHourDigit + '-3.png');
+                $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg6.png');
+            },600, el);
+
+            _setTimeout(function(el) {$('#fhd'+el.o.curID).attr('src', el.clockImagesPath + now_hours.substr(0,1) + '.png')},800, el);
+            _setTimeout(function(el) {$('#shd'+el.o.curID).attr('src', el.clockImagesPath + now_hours.substr(1,1) + '.png')},800, el);
+            _setTimeout(function(el) { $('#hours_bg'+el.o.curID+' img').attr('src', el.clockImagesPath + 'clockbg1.png')},850, el);
+        }
+    };
+
+	$.fn.processAnswer = function(el, data) {
+        var metric = el.weatherMetric == 1 ? 'C' : 'F';
+		
+		el.find('#weather'+el.o.curID+' .dc_loading, #forecast_cAntainer'+el.o.curID+' .dc_loading').hide();
+
+		var curr_temp = '<p class="">' + data.curr_temp + '&deg;<span class="dc_metric">' + metric + '</span></p>';
+		var curr_img0 = '';
+		if (data.curr_icon.indexOf("http://") === -1 && data.curr_icon.indexOf("https://") === -1)
+            curr_img0 = el.weatherImagesPath + data.curr_icon + '.png';
+		else
+			curr_img0 = data.curr_icon;
+		var weather = '<div id="local'+el.o.curID+'" class="dc_local"><p class="dc_city_main">' + (data.cityname || data.city) + '</p><p>' + data.curr_text + '</p></div>';
+		weather += '<div id="temp'+el.o.curID+'" class="dc_temp"><p id="date'+el.o.curID+'" class="dc_date">' + el.currDate + '</p>' + curr_temp + '</div>';
+		weather += '<img id="img0_'+el.o.curID+'" src="'+curr_img0+'" style="position: absolute; top: 20px; left: 160px; width: 333px; height: 240px">';
+		el.find('#weather'+el.o.curID+'').html(weather);
+
+		// forecast
+		el.find('#forecast_cAntainer'+el.o.curID+'').append('<div id="current'+el.o.curID+'" class="dc_current" style="height:238px"></div>');
+		curr_temp = curr_temp.replace ('class=""', 'class="dc_actual"');
+		var curr_for = curr_temp + '<p class="dc_high_low">' + data.forecast[0].day_htemp + '&deg;&nbsp;/&nbsp;' + data.forecast[0].day_ltemp + '&deg;</p>';
+		curr_for    += '<p class="dc_city">' + data.city + '</p>';
+		curr_for    += '<p class="dc_text">' + data.forecast[0].day_text + '</p>';
+		
+		var curr_img = '';
+		if (data.forecast[0].day_icon.indexOf("http://") === -1 && data.forecast[0].day_icon.indexOf("https://") === -1)
+			curr_img = 'background: url(' + el.weatherImagesPath + data.forecast[0].day_icon + '.png) 50% 0 no-repeat';
+		else
+			curr_img = 'background: url('+data.forecast[0].day_icon + ') 100% 0 no-repeat; background-size: 80% auto';
+		curr_for += '<div class="dc_image" style="'+curr_img+'"></div>';
+		
+		
+		el.find('#current'+el.o.curID).append(curr_for);
+
+		el.find('#forecast_cAntainer'+el.o.curID).append('<ul id="forecast'+el.o.curID+'" class="dc_forecast" style="position: absolute; top:238px"></ul>');
+		data.forecast.shift();
+		for (var i in data.forecast) {
+			var d_date = new Date(data.forecast[i].day_date);
+			var day_name = el.lang.dayNames[d_date.getDay()];
+			var forecast = '<li>';
+			forecast    += '<p>' + day_name + '</p>';
+			forecast    += '<img src="';
+			
+			if (data.forecast[i].day_icon.indexOf('http://') === -1 && data.forecast[i].day_icon.indexOf('https://') === -1)
+				forecast += el.weatherImagesPath + data.forecast[i].day_icon + '.png';
+			else
+				forecast += data.forecast[i].day_icon;
+				
+			forecast    += '" alt="' + data.forecast[i].day_text + '" title="' + data.forecast[i].day_text + '" />';
+			forecast    += '<p>' + data.forecast[i].day_htemp + '&deg;&nbsp;/&nbsp;' + data.forecast[i].day_ltemp + '&deg;</p>';
+			forecast    += '</li>';
+			el.find('#forecast' + el.o.curID).append(forecast);
+		}
+
+		el.find('#forecast_cAntainer' + el.o.curID).append('<div id="update' + el.o.curID + '" class="dc_update" style="position: absolute; top:365px; left:200px"><img src="' + el.clockImagesPath + '../refresh_01.png" alt="reload" title="reload" id="reload' + el.o.curID + '" />' + el.timeUpdate + '</div>');
+
+		$('#reload' + el.o.curID).on('click touchstart', function() {
+            // Protect against two events
+            if (vis.detectBounce(this)) return;
+
+            el.find('#weather' + el.o.curID).html('');
+			el.find('#forecast_cAntainer' + el.o.curID).html('');
+			$.fn.getWeather(el);
+		});
+	};
+	
+	// Get time string as date
+	$.fn._getTimeAsDate = function (t) {
+        return new Date((new Date()).toDateString() + ' ' + t);
+	};	
+    $.fn.getWeather = function (el) {
+
+        el.find('#weather' + el.o.curID).html('<p class="dc_loading">Update Weather ...</p>');
+        el.find('#forecast_cAntainer'+el.o.curID).html('<p class="dc_loading">Update Weather ...</p>');
+        var proxy = '';
+
+			
+        switch (el.proxyType) {
+            case 'php':
+                proxy = 'php/proxy.php';
+                $.getJSON('lib/proxy/' + proxy + '?location=' + el.weatherLocationCode + '&metric=' + el.weatherMetric, function (data) {$.fn.processAnswer (el, data);});
+				break;
+            case 'asp':
+                proxy = 'asp/WeatherProxy.aspx';
+                $.getJSON('lib/proxy/' + proxy + '?location=' + el.weatherLocationCode + '&metric=' + el.weatherMetric, function (data) {$.fn.processAnswer (el, data);});
+				break;
+			case 'yahoo':
+				var now = new Date();
+			    // Create Yahoo Weather feed API address
+				var query = "select * from weather.forecast where woeid in ('"+ el.weatherLocationCode +"') and u='"+ (el.weatherMetric ? 'c' : 'f') + "'";
+				var protocol = window.location.protocol;
+				if (protocol !== 'http:' && protocol !== 'https:') protocol = 'https:';
+				var api = protocol + '//query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&rnd=' + now.getFullYear() + now.getMonth() + now.getDay() + now.getHours() + '&format=json&callback=?';
+
+				// Send request
+				$.ajax({
+					type:     'GET',
+					url:      api,
+					dataType: 'json',
+					context:  el,
+					success:  function(data) {
+						if (data.query) {
+							var modData = {cityname: el.o.city};
+							var feed = data.query.results.channel;
+                            if (!feed || !feed.item || !feed.item.forecast) {
+                                return;
+                            }
+							//var wf = feed.item.forecast[0];
+							// Determine day or night image
+							var wpd = feed.item.pubDate;
+							var n = wpd.indexOf(':');
+							var tpb =  $.fn._getTimeAsDate(wpd.substr(n-2,8));
+							var tsr =  $.fn._getTimeAsDate(feed.astronomy.sunrise);
+							var tss =  $.fn._getTimeAsDate(feed.astronomy.sunset);
+                            var daynight;
+
+							// Get night or day
+							if (tpb > tsr && tpb < tss) {
+                                daynight = 'day';
+                            } else {
+                                daynight = 'night';
+                            }
+							// Translation function
+							var _tt = []; {
+                            _tt[0] = {'en': 'Tornado', 'de': 'Tornado', 'ru': 'Торнадо - сиди дома!'};
+                            _tt[1] = {'en': 'Tropical storm', 'de': 'Tropischer Sturm', 'ru': 'Тропический шторм'};
+                            _tt[2] = {'en': 'Hurricane', 'de': 'Hurrikan', 'ru': 'Ураган'};
+                            _tt[3] = {'en': 'Severe thunderstorms', 'de': 'Starke Gewitter', 'ru': 'Сильная непогода'};
+                            _tt[4] = {'en': 'Thunderstorms', 'de': 'Gewitter', 'ru': 'Грозы'};
+                            _tt[5] = {'en': 'Mixed rain and snow', 'de': 'Regen mit Schnee', 'ru': 'Дождь со снегом'};
+                            _tt[6] = {'en': 'Mixed rain and sleet', 'de': 'Regen mit Graupel', 'ru': 'Дождь с градом'};
+                            _tt[7] = {'en': 'Mixed snow and sleet', 'de': 'Schnee mit Graupel', 'ru': 'Снег с градом'};
+                            _tt[8] = {'en': 'Freezing drizzle', 'de': 'Eisnieselregen', 'ru': 'Изморозь'};
+                            _tt[9] = {'en': 'Drizzle', 'de': 'Nieselregen', 'ru': 'Моросящий дождь'};
+                            _tt[10] = {'en': 'Freezing rain', 'de': 'Eisregen', 'ru': 'Ледяной дождь'};
+                            _tt[11] = {'en': 'Showers', 'de': 'Regenschauer', 'ru': 'Ливень'};
+                            _tt[12] = {'en': 'Showers', 'de': 'Regenschauer', 'ru': 'Ливень'};
+                            _tt[13] = {'en': 'Snow flurries', 'de': 'Schneetreiben', 'ru': 'Снегопад'};
+                            _tt[14] = {'en': 'Light snow showers', 'de': 'Leichter Schneeregen', 'ru': 'Небольшой дождь со снегом'};
+                            _tt[15] = {'en': 'Bowing snow', 'de': 'Schneeb&ouml;en', 'ru': 'Снег'};
+                            _tt[16] = {'en': 'Snow', 'de': 'Schnee', 'ru': 'Снег'};
+                            _tt[17] = {'en': 'Hail', 'de': 'Hagel', 'ru': 'Град'};
+                            _tt[18] = {'en': 'Sleet', 'de': 'Graupel', 'ru': 'Мелкий град'};
+                            _tt[19] = {'en': 'Dust', 'de': 'Diesig', 'ru': 'Пыльно'};
+                            _tt[20] = {'en': 'Foggy', 'de': 'Neblig', 'ru': 'Туманно'};
+                            _tt[21] = {'en': 'Haze', 'de': 'Dunst', 'ru': 'Туман'};
+                            _tt[22] = {'en': 'Smoky', 'de': 'Qualmig', 'ru': 'Задымление'};
+                            _tt[23] = {'en': 'Blustery', 'de': 'St&uuml;rmisch', 'ru': 'Порывистый ветер'};
+                            _tt[24] = {'en': 'Windy', 'de': 'Windig', 'ru': 'Ветрянно'};
+                            _tt[25] = {'en': 'Cold', 'de': 'Kalt', 'ru': 'Холодно'};
+                            _tt[26] = {'en': 'Cloudy', 'de': 'Wolkig', 'ru': 'Облачно'};
+                            _tt[27] = {'en': 'Mostly cloudy (night)', 'de': '&Uuml;berwiegend wolkig (Nacht)', 'ru': 'В основном облачно'};
+                            _tt[28] = {'en': 'Mostly cloudy (day)', 'de': '&Uuml;berwiegend wolkig (Tag)', 'ru': 'В основном облачно'};
+                            _tt[29] = {'en': 'partly cloudy (night)', 'de': 'Teilweise wolkig (Nacht)', 'ru': 'Местами облачно'};
+                            _tt[30] = {'en': 'partly cloudy (day)', 'de': 'Teilweise wolkig (Tag)', 'ru': 'Приемущественно солнечно'};
+                            _tt[31] = {'en': 'clear (night)', 'de': 'Klare Nacht', 'ru': 'Ясно'};
+                            _tt[32] = {'en': 'sunny', 'de': 'Sonnig', 'ru': 'Солнечно'};
+                            _tt[33] = {'en': 'fair (night)', 'de': 'Sch&ouml;nwetter (Nacht)', 'ru': 'Прекрасная погода'};
+                            _tt[34] = {'en': 'fair (day)', 'de': 'Sch&ouml;nwetter (Tag)', 'ru': 'Прекрасная погода'};
+                            _tt[35] = {'en': 'mixed rain and hail', 'de': 'Regen mit Hagel', 'ru': 'Снег с градом'};
+                            _tt[36] = {'en': 'hot', 'de': 'Hei&szlig;', 'ru': 'Жарко'};
+                            _tt[37] = {'en': 'isolated thunderstorms', 'de': 'Gebietsweise Gewitter', 'ru': 'Одиночные грозы'};
+                            _tt[38] = {'en': 'scattered thunderstorms', 'de': 'Vereinzelte Gewitter', 'ru': 'Грозы'};
+                            _tt[39] = {'en': 'scattered thunderstorms', 'de': 'Vereinzelte Gewitter', 'ru': 'Грозы'};
+                            _tt[40] = {'en': 'scattered showers', 'de': 'Vereinzelter Regen', 'ru': 'Дождь'};
+                            _tt[41] = {'en': 'heavy snow', 'de': 'Starker Schneefall', 'ru': 'Сильный снегопад'};
+                            _tt[42] = {'en': 'scattered snow showers', 'de': 'Vereinzelter Schneeregen', 'ru': 'Ливень с дождем'};
+                            _tt[43] = {'en': 'heavy snow', 'de': 'Starker Schneefall', 'ru': 'Сильный снегопад'};
+                            _tt[44] = {'en': 'partly cloudy', 'de': 'Teilweise wolkig', 'ru': 'Переменная облачность'};
+                            _tt[45] = {'en': 'thundershowers', 'de': 'Gewitterschauer', 'ru': 'Штормовой дождь'};
+                            _tt[46] = {'en': 'snow showers', 'de': 'Schneeregen', 'ru': 'Снег с дождем'};
+                            _tt[47] = {'en': 'isolated thundershowers', 'de': 'Gebietsweise Gewitterschauer', 'ru': 'Местами грозы'};
+                            _tt[3200] = {'en': 'not available', 'de': '', 'ru': ''};
+                            }
+
+                            modData['city']      = feed.location.city;
+							modData['curr_text'] = _tt[feed.item.condition.code][el.lang.lang];
+							modData['curr_temp'] = feed.item.condition.temp;
+							modData['curr_icon'] = 'http://l.yimg.com/a/i/us/nws/weather/gr/' + feed.item.condition.code + daynight.substring(0,1) + '.png';
+							modData['forecast']  = [];
+							for (var i = 0; i < feed.item.forecast.length && i < 5; i++)
+							{
+								modData['forecast'][i] = {};
+								modData['forecast'][i]['day_htemp'] = feed.item.forecast[i].high;
+								modData['forecast'][i]['day_ltemp'] = feed.item.forecast[i].low;
+								modData['forecast'][i]['day_text']  = _tt[ feed.item.forecast[i].code][el.lang.lang];//feed.item.forecast[i].text;
+								modData['forecast'][i]['day_icon']  = 'http://l.yimg.com/a/i/us/nws/weather/gr/' + feed.item.forecast[i].code + daynight.substring(0,1) + '.png';
+								modData['forecast'][i]['day_date']  = feed.item.forecast[i].date;
+							}
+							
+							$.fn.processAnswer(el, modData);
+						} 
+						else {
+							//if (options.showerror) $e.html('<p>Weather information unavailable</p>');
+						}
+					},
+					error: function (data) {
+						//if (options.showerror) $e.html('<p>Weather request failed</p>');
+					}
+				});
+            break;
+        }
+    };
+	
+	$.fn._getWeatherAddress = function (data) {
+
+        if (data) {
+            // Get address
+            var address = data.name;
+            if (data.admin2) address += ',\n' + data.admin2.content;
+            if (data.admin1) address += ',\n' + data.admin1.content;
+            address += ',\n' + data.country.content;
+
+            // Get WEOID
+            var woeid = data.woeid;
+            return address + '\n[' +  woeid + ']';
+        } else {
+            return '';
+        }
+
+	}
+})(jQuery);
diff --git a/widgets/timeandweather/js/jquery.zweatherfeed.js b/widgets/timeandweather/js/jquery.zweatherfeed.js
new file mode 100644
index 0000000..c131c02
--- /dev/null
+++ b/widgets/timeandweather/js/jquery.zweatherfeed.js
@@ -0,0 +1,643 @@
+/**
+ * Plugin: jquery.zWeatherFeed
+ * 
+ * Version: 1.2.1
+ * (c) Copyright 2011-2013, Zazar Ltd
+ * 
+ * Description: jQuery plugin for display of Yahoo! Weather feeds
+ * 
+ * History:
+ * 1.2.1 - Handle invalid locations
+ * 1.2.0 - Added forecast data option
+ * 1.1.0 - Added user callback function
+ *         New option to use WOEID identifiers
+ *         New day/night CSS class for feed items
+ *         Updated full forecast link to feed link location
+ * 1.0.3 - Changed full forecast link to Weather Channel due to invalid Yahoo! link
+	   Add 'linktarget' option for forecast link
+ * 1.0.2 - Correction to options / link
+ * 1.0.1 - Added hourly caching to YQL to avoid rate limits
+ *         Uses Weather Channel location ID and not Yahoo WOEID
+ *         Displays day or night background images
+ *
+ **/
+
+/* If used custom mode
+    update widget as follow:
+    $wid.weatherfeed('', 'update', {
+         "units": {
+            "distance": "km",
+            "pressure": "mb",
+            "speed": "km/h",
+            "temperature": "C"
+        },
+        "location": {
+            "city": "Karlsruhe"
+        },
+        "wind": {
+            "chill": "66",
+            "direction": "255",
+            "speed": "11.27"
+        },
+        "atmosphere": {
+            "humidity": "71"
+        },
+        "image": {
+            "url": "http://l.yimg.com/a/i/brand/purplelogo//uh/us/news-wea.gif"
+        },
+        "item": {
+            "condition": {
+                "code": "26",
+                "temp": "19",
+                "text": "Cloudy"
+            },
+            "forecast": [
+                {
+                    "code": "12",
+                    "high": "20",
+                    "low": "14",
+                    "text": "Rain"
+                },
+                {
+                    "code": "39",
+                    "high": "21",
+                    "low": "13",
+                    "text": "Scattered Showers"
+                },
+                {
+                    "code": "4",
+                    "high": "22",
+                    "low": "15",
+                    "text": "Thunderstorms"
+                },
+                {
+                    "code": "28",
+                    "high": "23",
+                    "low": "13",
+                    "text": "Mostly Cloudy"
+                },
+                {
+                    "code": "4",
+                    "high": "24",
+                    "low": "15",
+                    "text": "Thunderstorms"
+                },
+                {
+                    "code": "47",
+                    "high": "23",
+                    "low": "16",
+                    "text": "Scattered Thunderstorms"
+                },
+                {
+                    "code": "30",
+                    "high": "23",
+                    "low": "16",
+                    "text": "Partly Cloudy"
+                }
+            ]
+        }
+    });
+*/
+(function($){
+	"use strict";
+
+    // Translation function. DONT make ARRAY. Numbers are important
+    var _tt = []; {
+        _tt[0]    = {'en':'Tornado',            'de': 'Tornado',            'ru': 'Торнадо - сиди дома!'};
+        _tt[1]    = {'en':'Tropical storm',     'de': 'Tropischer Sturm', 			'ru': 'Тропический шторм'};
+        _tt[2]    = {'en':'Hurricane',          'de': 'Hurrikan', 					'ru': 'Ураган'};
+        _tt[3]    = {'en':'Severe thunderstorms', 'de': 'Starke Gewitter',         'ru': 'Сильная непогода'};
+        _tt[4]    = {'en':'Thunderstorms',      'de': 'Gewitter', 					'ru': 'Грозы'};
+        _tt[5]    = {'en':'Mixed rain and snow', 'de' : 'Regen mit Schnee', 	    'ru': 'Дождь со снегом'};
+        _tt[6]    = {'en':'Mixed rain and sleet', 'de' : 'Regen mit Graupel',	    'ru': 'Дождь с градом'};
+        _tt[7]    = {'en':'Mixed snow and sleet', 'de' : 'Schnee mit Graupel', 	    'ru': 'Снег с градом'};
+        _tt[8]    = {'en':'Freezing drizzle',   'de' : 'Eisnieselregen', 			'ru': 'Изморозь'};
+        _tt[9]    = {'en':'Drizzle',            'de' : 'Nieselregen', 				'ru': 'Моросящий дождь'};
+        _tt[10]   = {'en':'Freezing rain',      'de': 'Eisregen', 					'ru': 'Ледяной дождь'};
+        _tt[11]   = {'en':'Showers',            'de': 'Regenschauer', 				'ru': 'Ливень'};
+        _tt[12]   = {'en':'Showers',            'de': 'Regenschauer',				'ru': 'Ливень'};
+        _tt[13]   = {'en':'Snow flurries',      'de': 'Schneetreiben', 				'ru': 'Снегопад'};
+        _tt[14]   = {'en':'Light snow showers', 'de': 'Leichter Schneeregen',  'ru': 'Небольшой дождь со снегом'};
+        _tt[15]   = {'en':'Bowing snow',        'de': 'Schneeb&ouml;en',                 'ru': 'Снег'};
+        _tt[16]   = {'en':'Snow',               'de': 'Schnee', 					'ru': 'Снег'};
+        _tt[17]   = {'en':'Hail',               'de': 'Hagel', 						'ru': 'Град'};
+        _tt[18]   = {'en':'Sleet',              'de': 'Graupel', 					'ru': 'Мелкий град'};
+        _tt[19]   = {'en':'Dust',               'de':'Diesig',                      'ru': 'Пыльно'};
+        _tt[20]   = {'en':'Foggy',              'de':'Neblig', 						'ru': 'Туманно'};
+        _tt[21]   = {'en':'Haze',               'de':'Dunst',						'ru': 'Туман'};
+        _tt[22]   = {'en':'Smoky',              'de':'Qualmig', 					'ru': 'Задымление'};
+        _tt[23]   = {'en':'Blustery',           'de':'St&uuml;rmisch', 					'ru': 'Порывистый ветер'};
+        _tt[24]   = {'en':'Windy',              'de':'Windig', 						'ru': 'Ветрянно'};
+        _tt[25]   = {'en':'Cold',               'de':'Kalt', 						'ru': 'Холодно'};
+        _tt[26]   = {'en':'Cloudy',             'de':'Wolkig',                      'ru': 'Облачно'};
+        _tt[27]   = {'en':'Mostly cloudy (night)', 'de':'&Uuml;berwiegend wolkig (Nacht)',  'ru': 'В основном облачно'};
+        _tt[28]   = {'en':'Mostly cloudy (day)', 'de':'&Uuml;berwiegend wolkig (Tag)',    'ru': 'В основном облачно'};
+        _tt[29]   = {'en':'partly cloudy (night)', 'de':'Teilweise wolkig (Nacht)', 	    'ru': 'Местами облачно'};
+        _tt[30]   = {'en':'partly cloudy (day)', 'de':'Teilweise wolkig (Tag)', 		    'ru': 'Приемущественно солнечно'};
+        _tt[31]   = {'en':'clear (night)',      'de':'Klare Nacht', 						'ru': 'Ясно'};
+        _tt[32]   = {'en':'sunny',              'de':'Sonnig', 						'ru': 'Солнечно'};
+        _tt[33]   = {'en':'fair (night)',       'de': 'Sch&ouml;nwetter (Nacht)', 			'ru': 'Прекрасная погода'};
+        _tt[34]   = {'en':'fair (day)',         'de': 'Sch&ouml;nwetter (Tag)', 			'ru': 'Прекрасная погода'};
+        _tt[35]   = {'en':'mixed rain and hail', 'de': 'Regen mit Hagel', 		    'ru': 'Снег с градом'};
+        _tt[36]   = {'en':'hot',                'de': 'Hei&szlig;',                  'ru': 'Жарко'};
+        _tt[37]   = {'en':'isolated thunderstorms', 'de': 'Gebietsweise Gewitter',  'ru': 'Одиночные грозы'};
+        _tt[38]   = {'en':'scattered thunderstorms', 'de': 'Vereinzelte Gewitter',  'ru': 'Грозы'};
+        _tt[39]   = {'en':'scattered thunderstorms', 'de': 'Vereinzelte Gewitter',  'ru': 'Грозы'};
+        _tt[40]   = {'en':'scattered showers',  'de': 'Vereinzelter Regen',           'ru': 'Дождь'};
+        _tt[41]   = {'en':'heavy snow',         'de':'Starker Schneefall', 			'ru': 'Сильный снегопад'};
+        _tt[42]   = {'en':'scattered snow showers', 'de': 'Vereinzelter Schneeregen', 'ru': 'Ливень с дождем'};
+        _tt[43]   = {'en':'heavy snow',         'de':'Starker Schneefall', 			'ru': 'Сильный снегопад'};
+        _tt[44]   = {'en':'partly cloudy',      'de':'Teilweise wolkig', 			'ru': 'Переменная облачность'};
+        _tt[45]   = {'en':'thundershowers',     'de':'Gewitterschauer', 			'ru': 'Штормовой дождь'};
+        _tt[46]   = {'en':'snow showers',       'de': 'Schneeregen', 				'ru': 'Снег с дождем'};
+        _tt[47]   = {'en':'isolated thundershowers', 'de': 'Gebietsweise Gewitterschauer', 'ru': 'Местами грозы'};
+        _tt[100]  = {code: 39, 'en':'scattered thunderstorms', 'de': 'Vereinzelte Gewitter',   'ru': 'Грозы'};
+        _tt[101]  = {code: 32, 'en':'sunny',    'de':'Sonnig', 						'ru': 'Солнечно'};
+        _tt[3200] = {'en':'not available',      'de': '', 							'ru': ''};
+    }
+
+    function _translate(word, lang) {
+        if (word === undefined || word == null || word == "")
+            return '';
+
+        if (lang == 'de') {
+            // If date
+            if (word.length > 1 && word[0] >= '0' && word[0] <= '9') {
+                word = word.replace ('Jan', 'Januar');
+                word = word.replace ('Feb', 'Februar');
+                word = word.replace ('Mar', 'M&auml;rz');
+                word = word.replace ('Apr', 'April');
+                word = word.replace ('Mai', 'Mai');
+                word = word.replace ('Jun', 'Juni');
+                word = word.replace ('Jul', 'Juli');
+                word = word.replace ('Aug', 'August');
+                word = word.replace ('Sep', 'September');
+                word = word.replace ('Oct', 'Oktober');
+                word = word.replace ('Nov', 'November');
+                word = word.replace ('Dec', 'Dezember');
+                return word;
+            }
+
+            if (word == 'High')
+                return 'H&ouml;chste';
+            if (word == 'Low')
+                return 'Niedrigste';
+            if (word == 'Wind')
+                return 'Wind';
+            if (word == 'Humidity')
+                return 'Luftfeuchte';
+            if (word == 'Visibility')
+                return 'Sichtweite';
+            if (word == 'Sunrise')
+                return 'Sonnenaufgang';
+            if (word == 'Sunset')
+                return 'Sonnenuntergang';
+            if (word == 'City not found')
+                return 'Stadt nicht gefunden';
+            if (word == 'Full forecast')
+                return 'Volle Vorhersage';
+            if (word == 'Read full forecast')
+                return 'Sehe volle Vorhersage';
+            if (word == 'Mon')
+                return 'Montag';
+            if (word == 'Tue')
+                return 'Dienstag';
+            if (word == 'Wed')
+                return 'Mittwoch';
+            if (word == 'Thu')
+                return 'Donnerstag';
+            if (word == 'Fri')
+                return 'Freitag';
+            if (word == 'Sat')
+                return 'Samstag';
+            if (word == 'Sun')
+                return 'Sonntag';
+            if (word == 'Temperature')
+                return 'Temperatur';
+        }
+        if (lang == 'ru') {
+            // If date
+            if (word.length > 1 && word[0] >= '0' && word[0] <= '9') {
+                word = word.replace ('Jan', 'Январь');
+                word = word.replace ('Feb', 'Февраль');
+                word = word.replace ('Mar', 'Март');
+                word = word.replace ('Apr', 'Апрель');
+                word = word.replace ('Mai', 'Май');
+                word = word.replace ('Jun', 'Июнь');
+                word = word.replace ('Jul', 'Июль');
+                word = word.replace ('Aug', 'Август');
+                word = word.replace ('Sep', 'Сентябрь');
+                word = word.replace ('Oct', 'Октябрь');
+                word = word.replace ('Nov', 'Ноябрь');
+                word = word.replace ('Dec', 'Декабрь');
+                return word;
+            }
+
+            if (word == 'High')
+                return 'Макс.';
+            if (word == 'Temperature')
+                return 'Температура';
+            if (word == 'Low')
+                return 'Мин.';
+            if (word == 'Wind')
+                return 'Ветер';
+            if (word == 'Humidity')
+                return 'Влажность';
+            if (word == 'Visibility')
+                return 'Видимость';
+            if (word == 'Sunrise')
+                return 'Восход';
+            if (word == 'Sunset')
+                return 'Закат';
+            if (word == 'City not found')
+                return 'Город не найден';
+            if (word == 'Full forecast')
+                return 'Полный прогноз';
+            if (word == 'Read full forecast')
+                return 'См. полный прогноз';
+            if (word == 'Mon')
+                return 'Понедельник';
+            if (word == 'Tue')
+                return 'Вторник';
+            if (word == 'Wed')
+                return 'Среда';
+            if (word == 'Thu')
+                return 'Четверг';
+            if (word == 'Fri')
+                return 'Пятница';
+            if (word == 'Sat')
+                return 'Суббота';
+            if (word == 'Sun')
+                return 'Воскресение';
+        }
+        return word;
+    }
+
+    function findCode(text) {
+        text = text.toLowerCase();
+        for (var i = 0; i < _tt.length && i < 200; i++) {
+            if (!_tt[i]) continue;
+            var de = _tt[i].de.toLowerCase().replace(/&ouml;/, 'ö').replace(/&uuml;/, 'ü').replace(/&szlig;/, 'ß');
+            if (_tt[i].en.toLowerCase() === text || de=== text || _tt[i].ru.toLowerCase() === text) {
+                return _tt[i].code !== undefined ? _tt[i].code : i;
+            }
+        }
+        for (var i = 0; i < _tt.length && i < 200; i++) {
+            if (!_tt[i]) continue;
+            var de = _tt[i].de.toLowerCase().replace(/&ouml;/, 'ö').replace(/&uuml;/, 'ü').replace(/&szlig;/, 'ß');
+            if (_tt[i].en.toLowerCase().indexOf(text) !== -1 || de.indexOf(text) !== -1 || _tt[i].ru.toLowerCase().indexOf(text) !== -1) {
+                return _tt[i].code !== undefined ? _tt[i].code : i;
+            }
+        }
+        return null;
+    }
+
+    // Function to each feed item
+    function _process(e, options) {
+        var $e   = $(e);
+        var row  = 'odd';
+        var feed = $e[0].feed;
+        if (!options) options = $e.data('options');
+
+        $e.empty();
+        if (options.width)  $e.css ({width:  options.width});
+        if (options.height) $e.css ({height: options.height});
+
+        var isShort = (options.width < 100);
+        var html;
+
+        // Check for invalid location
+        if (feed.description !== 'Yahoo! Weather Error' && feed.wind) {
+            // Format feed items
+            var wd = feed.wind.direction;
+            if (wd >= 348.75 && wd <= 360)    {
+                wd = 'N';
+            } else
+            if (wd >= 0      && wd <  11.25)  {
+                wd = 'N';
+            } else
+            if (wd >= 11.25  && wd <  33.75)  {
+                wd = 'NNE';
+            } else
+            if (wd >= 33.75  && wd <  56.25)  {
+                wd = 'NE';
+            } else
+            if (wd >= 56.25  && wd <  78.75)  {
+                wd = 'ENE';
+            } else
+            if (wd >= 78.75  && wd <  101.25) {
+                wd = 'E';
+            } else
+            if (wd >= 101.25 && wd <  123.75) {
+                wd = 'ESE';
+            } else
+            if (wd >= 123.75 && wd <  146.25) {
+                wd = 'SE';
+            } else
+            if (wd >= 146.25 && wd <  168.75) {
+                wd = 'SSE';
+            } else
+            if (wd >= 168.75 && wd <  191.25) {
+                wd = 'S';
+            } else
+            if (wd >= 191.25 && wd <  213.75) {
+                wd = 'SSW';
+            } else
+            if (wd >= 213.75 && wd <  236.25) {
+                wd = 'SW';
+            } else
+            if (wd >= 236.25 && wd <  258.75) {
+                wd = 'WSW';
+            } else
+            if (wd >= 258.75 && wd <  281.25) {
+                wd = 'W';
+            } else
+            if (wd >= 281.25 && wd <  303.75) {
+                wd = 'WNW';
+            } else
+            if (wd >= 303.75 && wd <  326.25) {
+                wd = 'NW';
+            } else
+            if (wd >= 326.25 && wd <  348.75) {
+                wd = 'NNW';
+            }
+            var wf = feed.item.forecast[0];
+
+            // Determine day or night image
+            var wpd = feed.item.pubDate || (new Date().toString());
+            var n   = wpd.indexOf(':');
+            var tpb = _getTimeAsDate(wpd.substr(n - 2, 8));
+            var tsr = feed.astronomy && feed.astronomy.sunrise ? _getTimeAsDate(feed.astronomy.sunrise) : null;
+            var tss = feed.astronomy && feed.astronomy.sunset  ? _getTimeAsDate(feed.astronomy.sunset)  : null;
+            var daynight;
+
+            // Get night or day
+            if (tsr === null) {
+                var hh = new Date().getHours();
+                daynight = (hh > 20 || hh < 7) ? 'night' : 'day';
+            } else {
+                if (tpb > tsr && tpb < tss) {
+                    daynight = 'day';
+                } else {
+                    daynight = 'night';
+                }
+            }
+
+            // Add item container
+            html = '<div class="weatherItem ' + row + ' ' + daynight + '" style="';
+            if (options.image) {
+                if (feed.item.condition.code !== undefined && feed.item.condition.code !== null) {
+                    html += 'background-image: url(http://l.yimg.com/a/i/us/nws/weather/gr/' + feed.item.condition.code + daynight.substring(0, 1) + '.png); background-repeat: no-repeat;';
+                } else if (feed.item.condition.icon) {
+                    html += 'background-image: url(' + feed.item.condition.icon + '); background-repeat: no-repeat;';
+                } else {
+                    var code = findCode(feed.item.condition.text);
+                    if (code !== null) {
+                        html += 'background-image: url(http://l.yimg.com/a/i/us/nws/weather/gr/' + code + daynight.substring(0, 1) + '.png); background-repeat: no-repeat;';
+                    }
+                }
+            }
+            html += ($(e).css('border-radius') ? 'border-radius: ' + $(e).css('border-radius') : '') + '"';
+            html += '>';
+
+            // Add item data
+            html += '<div class="weatherCity">' + (options.city || feed.location.city) + '</div>';
+            if (options.country) html += '<div class="weatherCountry">' + feed.location.country + '</div>';
+            if (feed.item.condition.temp !== null) html += '<div class="weatherTemp">' + feed.item.condition.temp + '&deg;</div>';
+            if (feed.item.condition.code !== null && _tt[feed.item.condition.code]) {
+                html += '<div class="weatherDesc">' + (_tt[feed.item.condition.code][options.lang] || _tt[feed.item.condition.code]['en']) + '</div>';
+            } else if (feed.item.condition.text !== null) {
+                var code = findCode(feed.item.condition.text);
+                if (code !== null) feed.item.condition.text = _tt[code][options.lang] || _tt[code]['en'];
+                html += '<div class="weatherDesc">' + feed.item.condition.text + '</div>';
+            }
+
+            // Add optional data
+            if (wf) {
+                if (wf.high !== null && options.highlow && !isShort) html += '<div class="weatherRange">' + _translate('High', options.lang) + ': ' + wf.high + '&deg; ' + _translate('Low', options.lang) + ': ' + wf.low + '&deg;</div>';
+                if (wf.low  !== null && options.highlow && isShort)  html += '<div class="weatherRange">' + wf.low + '&deg;-' + wf.high + '&deg;</div>';
+            }
+            if (feed.wind.speed                               !== null && options.wind     && !isShort) html += '<div class="weatherWind">'       + _translate('Wind',       options.lang) + ': ' + wd + ' ' + feed.wind.speed + _translate(feed.units.speed) + '</div>';
+            if (feed.atmosphere && feed.atmosphere.humidity   !== null && options.humidity && !isShort) html += '<div class="weatherHumidity">'   + _translate('Humidity',   options.lang) + ': ' + feed.atmosphere.humidity + '%</div>';
+            if (feed.atmosphere && feed.atmosphere.humidity   !== null && options.humidity && isShort)  html += '<div class="weatherHumidity">'   + feed.atmosphere.humidity + '%</div>';
+            if (feed.atmosphere && feed.atmosphere.visibility !== null && options.visibility)           html += '<div class="weatherVisibility">' + _translate('Visibility', options.lang) + ': ' + feed.atmosphere.visibility + '</div>';
+            if (feed.astronomy  && feed.astronomy.sunrise     !== null && options.sunrise)              html += '<div class="weatherSunrise">'    + _translate('Sunrise',    options.lang) + ': ' + feed.astronomy.sunrise + '</div>';
+            if (feed.astronomy  && feed.astronomy.sunset      !== null && options.sunset)               html += '<div class="weatherSunset">'     + _translate('Sunset',     options.lang) + ': ' + feed.astronomy.sunset + '</div>';
+
+            // Add item forecast data
+            if (options.forecast && feed.item) {
+
+                html += '<div class="weatherForecast">';
+
+                var wfi = feed.item.forecast;
+
+                for (var i = 0; i < wfi.length; i++) {
+                    if (options.maxDays && (i + 1) > options.maxDays) break;
+
+                    if (!wfi[i].date) {
+                        var now = new Date();
+                        now.setDate(now.getDate() + i);
+                        wfi[i].date = now.toDateString();
+                        wfi[i].day  = wfi[i].date.substring(0, 3);
+                        wfi[i].date = wfi[i].date.substring(8, 11) + wfi[i].date.substring(4, 7) + wfi[i].date.substring(10);
+                    }
+                    if (wfi[i].code !== null && wfi[i].code !== undefined) {
+                        html += '<div class="weatherForecastItem" style="background-image: url(http://l.yimg.com/a/i/us/nws/weather/gr/'+ wfi[i].code + 's.png); background-repeat: no-repeat;">';
+                    } else if (wfi[i].icon) {
+                        html += '<div class="weatherForecastItem" style="background-image: url(' + wfi[i].icon + '); background-repeat: no-repeat;">';
+                    } else if (wfi[i].text) {
+                        var code = findCode(wfi[i].text);
+                        if (code !== null) {
+                            html += '<div class="weatherForecastItem" style="background-image: url(http://l.yimg.com/a/i/us/nws/weather/gr/' + code + 's.png); background-repeat: no-repeat;">';
+                        } else {
+                            html += '<div class="weatherForecastItem">';
+                        }
+                    } else {
+                        html += '<div class="weatherForecastItem">';
+                    }
+
+                    if (wfi[i].day)  html += '<div class="weatherForecastDay">'  + _translate(wfi[i].day,  options.lang, isShort) + '</div>';
+                    if (wfi[i].date) html += '<div class="weatherForecastDate">' + _translate(wfi[i].date, options.lang, isShort) + '</div>';
+                    if (wfi[i].code !== null && _tt[wfi[i].code]) {
+                        html += '<div class="weatherForecastText">' + (_tt[wfi[i].code][options.lang] || _tt[wfi[i].code]['en']) + '</div>';
+                    } else if (wfi[i].text) {
+                        var code = findCode(wfi[i].text);
+                        if (code !== null) wfi[i].text = _tt[code][options.lang] || _tt[code]['en'];
+                        html += '<div class="weatherForecastText">' + _(wfi[i].text) + '</div>';
+                    }
+                    if (isShort) {
+                        if (wfi[i].low !== null) html += '<div class="weatherForecastRange">' + wfi[i].low + '&deg;-' + wfi[i].high + '&deg;</div>';
+                    } else {
+                        if (wfi[i].low !== null) html += '<div class="weatherForecastRange">' + _translate('Temperature', options.lang) + ': '+ wfi[i].low + '&deg;-' + wfi[i].high + '&deg;</div>';
+                    }
+                    html += '</div>';
+
+                }
+
+                html += '</div>'
+            }
+
+            if (options.link) html += '<div class="weatherLink"><a href="'+ feed.link +'" target="'+ options.linktarget +'" title="'+_translate('Read full forecast', options.lang)+'">'+_translate('Full forecast', options.lang)+'</a></div>';
+
+        } else {
+            html = '<div class="weatherItem ' + row + '">';
+            html += '<div class="weatherError">' + _translate('City not found', options.lang) + '</div>';
+        }
+
+        html += '</div>';
+
+        // Alternate row classes
+        if (row == 'odd') {
+            row = 'even';
+        } else {
+            row = 'odd';
+        }
+
+        $e.append(html);
+        if (typeof options.rendered === 'function') options.rendered();
+
+        if (options.resizable && !$e.data('inited')) {
+            $e.data('inited', true);
+
+            $e.resizable().resize(function() {
+                var timer = $e.data('timer');
+
+                if (timer) clearTimeout(timer);
+                $e.data('timer', setTimeout ( function () {
+                    $e.data('timer', null);
+                    options.width  = $e.width();
+                    options.height = $e.height();
+                    _process($e[0], options);
+                }, 1000));
+            });
+        }
+    }
+
+    // Get time string as date
+    function _getTimeAsDate (t) {
+        return new Date(new Date().toDateString() + ' ' + t);
+    }
+
+	$.fn.weatherfeed = function (locations, _options, fn) {
+        if (typeof _options === 'string') {
+            if (_options === 'update') {
+                return this.each(function () {
+                    this.feed = fn;
+                    _process(this);
+                });
+            }
+            return;
+        }
+
+		// Set plugin defaults
+		var defaults = {
+			unit:       'c',
+			image:      true,
+			country:    false,
+			highlow:    true,
+			wind:       true,
+			humidity:   false,
+			visibility: false,
+			sunrise:    false,
+			sunset:     false,
+			forecast:   false,
+			link:       true,
+			showerror:  true,
+			linktarget: '_blank',
+			woeid:      false,
+			lang:       'en',
+			update:     60 // minutes
+		};  		
+		var options = $.extend(defaults, _options);
+
+		// Functions
+		return this.each(function (i, e) {
+			var $e = $(e);
+            $e.data('options', options);
+            console.log($e.attr('id'));
+
+			// Add feed class to user div
+			if (!$e.hasClass('weatherFeed')) $e.addClass('weatherFeed');
+
+			// Check and append locations
+			if (!options.custom && !$.isArray(locations)) return false;
+
+            if (!options.custom) {
+                var _requestData = function () {
+                    var count = locations.length;
+                    if (count > 10) count = 10;
+
+                    var locationid = '';
+
+                    for (var i = 0; i < count; i++) {
+                        if (locationid != '') locationid += ',';
+                        locationid += "'" + locations[i] + "'";
+                    }
+
+                    // Cache results for an hour to prevent overuse
+                    var now = new Date();
+
+                    // Select location ID type
+                    var queryType = options.woeid ? 'woeid' : 'location';
+
+                    // Create Yahoo Weather feed API address
+                    var query = "select * from weather.forecast where " + queryType + " in (" + locationid + ") and u='" + options.unit + "'";
+                   
+					var protocol = window.location.protocol;
+					if (protocol !== 'http:' && protocol !== 'https:') protocol = 'https:';
+                    var api = protocol + '//query.yahooapis.com/v1/public/yql?q=' + encodeURIComponent(query) + '&rnd=' + now.getFullYear() + now.getMonth() + now.getDay() + now.getHours() +'&format=json&callback=?';
+
+                    // Send request
+                    $.ajax({
+                        type:    'GET',
+                        url:      api,
+                        dataType: 'json',
+                        context:  $e,
+                        success:  function (data) {
+                            if (data.query && data.query.results) {
+
+                                this[0].feed = data.query.results.channel;
+
+                                if (data.query.results.channel && data.query.results.channel.length > 0 ) {
+                                    // Multiple locations
+                                    var result = data.query.results.channel.length;
+                                    for (var i = 0; i < result; i++) {
+                                        // Create weather feed item
+                                        _process(e, options);
+                                    }
+                                } else {
+                                    // Single location only
+                                    _process(e, options);
+                                }
+
+                                // Optional user callback function
+                                if ($.isFunction(fn)) fn.call(this,$e);
+                            } else {
+                                console.error('Got answer: ' + JSON.stringify(data));
+                                if (options.showerror) $e.html('<p>Weather information unavailable</p>');
+                            }
+                        },
+                        error:    function (err) {
+                            console.error('Got error: ' + JSON.stringify(err));
+                            if (options.showerror) $e.html('<p>Weather request failed</p>');
+                        }
+                    });
+                };
+
+                this.startUpdater = function () {
+                    _requestData();
+
+                    if (options.update > 0){
+                        var that = this;
+                        setTimeout(function () {
+                            that.startUpdater();
+                        }, options.update * 60000);
+                    }
+                };
+            }
+
+			if (this.startUpdater) this.startUpdater();
+		});
+	};
+
+})(jQuery);
diff --git a/widgets/timeandweather/js/moreskins.js b/widgets/timeandweather/js/moreskins.js
new file mode 100644
index 0000000..476afd8
--- /dev/null
+++ b/widgets/timeandweather/js/moreskins.js
@@ -0,0 +1,222 @@
+CoolClock.config.skins = {
+
+	swissRail: {
+		outerBorder:      { lineWidth: 2, radius: 95, color: "black", alpha: 1 },
+		smallIndicator:   { lineWidth: 2, startAt: 88, endAt: 92, color: "black", alpha: 1 },
+		largeIndicator:   { lineWidth: 4, startAt: 79, endAt: 92, color: "black", alpha: 1 },
+		hourHand:         { lineWidth: 8, startAt: -15, endAt: 50, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 7, startAt: -15, endAt: 75, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+		secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "red", color: "red", alpha: 1 }
+	},
+
+	chunkySwiss: {
+		outerBorder:      { lineWidth: 4, radius: 97, color: "black", alpha: 1 },
+		smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "black", alpha: 1 },
+		largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "black", alpha: 1 },
+		hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+		secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+	},
+
+	chunkySwissOnBlack: {
+		outerBorder:      { lineWidth: 4, radius: 97, color: "white", alpha: 1 },
+		smallIndicator:   { lineWidth: 4, startAt: 89, endAt: 93, color: "white", alpha: 1 },
+		largeIndicator:   { lineWidth: 8, startAt: 80, endAt: 93, color: "white", alpha: 1 },
+		hourHand:         { lineWidth: 12, startAt: -15, endAt: 60, color: "white", alpha: 1 },
+		minuteHand:       { lineWidth: 10, startAt: -15, endAt: 85, color: "white", alpha: 1 },
+		secondHand:       { lineWidth: 4, startAt: -20, endAt: 85, color: "red", alpha: 1 },
+		secondDecoration: { lineWidth: 2, startAt: 70, radius: 8, fillColor: "red", color: "red", alpha: 1 }
+	},
+
+	fancy: {
+		outerBorder:      { lineWidth: 5, radius: 95, color: "green", alpha: 0.7 },
+		smallIndicator:   { lineWidth: 1, startAt: 80, endAt: 93, color: "black", alpha: 0.4 },
+		largeIndicator:   { lineWidth: 1, startAt: 30, endAt: 93, color: "black", alpha: 0.5 },
+		hourHand:         { lineWidth: 8, startAt: -15, endAt: 50, color: "blue", alpha: 0.7 },
+		minuteHand:       { lineWidth: 7, startAt: -15, endAt: 92, color: "red", alpha: 0.7 },
+		secondHand:       { lineWidth: 10, startAt: 80, endAt: 85, color: "blue", alpha: 0.3 },
+		secondDecoration: { lineWidth: 1, startAt: 30, radius: 50, fillColor: "blue", color: "red", alpha: 0.15 }
+	},
+
+	machine: {
+		outerBorder:      { lineWidth: 60, radius: 55, color: "#dd6655", alpha: 1 },
+		smallIndicator:   { lineWidth: 4, startAt: 80, endAt: 95, color: "white", alpha: 1 },
+		largeIndicator:   { lineWidth: 14, startAt: 77, endAt: 92, color: "#dd6655", alpha: 1 },
+		hourHand:         { lineWidth: 18, startAt: -15, endAt: 40, color: "white", alpha: 1 },
+		minuteHand:       { lineWidth: 14, startAt: 24, endAt: 100, color: "#771100", alpha: 0.5 },
+		secondHand:       { lineWidth: 3, startAt: 22, endAt: 83, color: "green", alpha: 0 },
+		secondDecoration: { lineWidth: 1, startAt: 52, radius: 26, fillColor: "#ffcccc", color: "red", alpha: 0.5 }
+	},
+
+	simonbaird_com: {
+		hourHand:         { lineWidth: 80, startAt: -15, endAt: 35,  color: 'magenta', alpha: 0.5 },
+		minuteHand:       { lineWidth: 80, startAt: -15, endAt: 65,  color: 'cyan', alpha: 0.5 },
+		secondDecoration: { lineWidth: 1,  startAt: 40,  radius: 40, color: "#fff", fillColor: 'yellow', alpha: 0.5 }
+	},
+
+	// by bonstio, http://bonstio.net
+	classic/*was gIG*/: {
+		outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
+		smallIndicator:   { lineWidth: 2, startAt: 89, endAt: 94, color: "#3366CC", alpha: 1 },
+		largeIndicator:   { lineWidth: 4, startAt: 83, endAt: 94, color: "#3366CC", alpha: 1 },
+		hourHand:         { lineWidth: 5, startAt: 0, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 4, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "red", alpha: .85 },
+		secondDecoration: { lineWidth: 3, startAt: 0, radius: 2, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	modern/*was gIG2*/: {
+		outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
+		smallIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
+		largeIndicator:   { lineWidth: 5, startAt: 88, endAt: 94, color: "#3366CC", alpha: 1 },
+		hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
+		secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	simple/*was gIG3*/: {
+		outerBorder:      { lineWidth: 185, radius: 1, color: "#E5ECF9", alpha: 1 },
+		smallIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
+		largeIndicator:   { lineWidth: 10, startAt: 90, endAt: 94, color: "#3366CC", alpha: 1 },
+		hourHand:         { lineWidth: 8, startAt: 0, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 8, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 5, startAt: 80, endAt: 85, color: "red", alpha: .85 },
+		secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	// by securephp
+	securephp: {
+		outerBorder:      { lineWidth: 100, radius: 0.45, color: "#669900", alpha: 0.3 },
+		smallIndicator:   { lineWidth: 2, startAt: 80, endAt: 90 , color: "green", alpha: 1 },
+		largeIndicator:   { lineWidth: 8.5, startAt: 20, endAt: 40 , color: "green", alpha: 0.4 },
+		hourHand:         { lineWidth: 3, startAt: 0, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 2, startAt: 0, endAt: 75, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -10, endAt: 80, color: "blue", alpha: 0.8 },
+		secondDecoration: { lineWidth: 1, startAt: 70, radius: 4, fillColor: "blue", color: "red", alpha: 1 }
+	},
+
+	Tes2: {
+		outerBorder:      { lineWidth: 4, radius: 95, color: "black", alpha: 0.5 },
+		smallIndicator:   { lineWidth: 1, startAt: 10, endAt: 50 , color: "#66CCFF", alpha: 1 },
+		largeIndicator:   { lineWidth: 8.5, startAt: 60, endAt: 70, color: "#6699FF", alpha: 1 },
+		hourHand:         { lineWidth: 5, startAt: -15, endAt: 60, color: "black", alpha: 0.7 },
+		minuteHand:       { lineWidth: 3, startAt: -25, endAt: 75, color: "black", alpha: 0.7 },
+		secondHand:       { lineWidth: 1.5, startAt: -20, endAt: 88, color: "red", alpha: 1 },
+		secondDecoration: { lineWidth: 1, startAt: 20, radius: 4, fillColor: "blue", color: "red", alpha: 1 }
+	},
+
+
+	Lev: {
+		outerBorder:      { lineWidth: 10, radius: 95, color: "#CCFF33", alpha: 0.65 },
+		smallIndicator:   { lineWidth: 5, startAt: 84, endAt: 90, color: "#996600", alpha: 1 },
+		largeIndicator:   { lineWidth: 40, startAt: 25, endAt: 95, color: "#336600", alpha: 0.55 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
+		secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Sand: {
+		outerBorder:      { lineWidth: 1, radius: 70, color: "black", alpha: 0.5 },
+		smallIndicator:   { lineWidth: 3, startAt: 50, endAt: 70, color: "#0066FF", alpha: 0.5 },
+		largeIndicator:   { lineWidth: 200, startAt: 80, endAt: 95, color: "#996600", alpha: 0.75 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 1 },
+		secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Sun: {
+		outerBorder:      { lineWidth: 100, radius: 140, color: "#99FFFF", alpha: 0.2 },
+		smallIndicator:   { lineWidth: 300, startAt: 50, endAt: 70, color: "black", alpha: 0.1 },
+		largeIndicator:   { lineWidth: 5, startAt: 80, endAt: 95, color: "black", alpha: 0.65 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 0.9 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 0.85 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 90, color: "black", alpha: 1 },
+		secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Tor: {
+		outerBorder:      { lineWidth: 10, radius: 88, color: "#996600", alpha: 0.9 },
+		smallIndicator:   { lineWidth: 6, startAt: -10, endAt: 73, color: "green", alpha: 0.3 },
+		largeIndicator:   { lineWidth: 6, startAt: 73, endAt: 100, color: "black", alpha: 0.65 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -73, endAt: 73, color: "black", alpha: 0.8 },
+		secondDecoration: { lineWidth: 2, startAt: 5, radius: 10, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Cold: {
+		outerBorder:      { lineWidth: 15, radius: 90, color: "black", alpha: 0.3 },
+		smallIndicator:   { lineWidth: 15, startAt: -10, endAt: 95, color: "blue", alpha: 0.1 },
+		largeIndicator:   { lineWidth: 3, startAt: 80, endAt: 95, color: "blue", alpha: 0.65 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
+		secondDecoration: { lineWidth: 5, startAt: 30, radius: 10, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Babosa: {
+		outerBorder:      { lineWidth: 100, radius: 25, color: "blue", alpha: 0.25 },
+		smallIndicator:   { lineWidth: 3, startAt: 90, endAt: 95, color: "#3366CC", alpha: 1 },
+		largeIndicator:   { lineWidth: 4, startAt: 75, endAt: 95, color: "#3366CC", alpha: 1 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 60, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 85, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 12, startAt: 75, endAt: 90, color: "red", alpha: 0.8 },
+		secondDecoration: { lineWidth: 3, startAt: 0, radius: 4, fillColor: "black", color: "black", alpha: 1 }
+	},
+
+	Tumb: {
+		outerBorder:      { lineWidth: 105, radius: 5, color: "green", alpha: 0.4 },
+		smallIndicator:   { lineWidth: 1, startAt: 93, endAt: 98, color: "green", alpha: 1 },
+		largeIndicator:   { lineWidth: 50, startAt: 0, endAt: 89, color: "red", alpha: 0.14 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 80, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
+		secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "black", alpha: 0.05 }
+	},
+
+	Stone: {
+		outerBorder:      { lineWidth: 15, radius: 80, color: "#339933", alpha: 0.5 },
+		smallIndicator:   { lineWidth: 2, startAt: 70, endAt: 90, color: "#FF3300", alpha: 0.7 },
+		largeIndicator:   { lineWidth: 15, startAt: 0, endAt: 29, color: "#FF6600", alpha: 0.3 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: 0, endAt: 85, color: "black", alpha: 0.8 },
+		secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "black", color: "black", alpha: 0.05 }
+	},
+
+	Disc: {
+		outerBorder:      { lineWidth: 105, radius: 1, color: "#666600", alpha: 0.2 },
+		smallIndicator:   { lineWidth: 1, startAt: 58, endAt: 95, color: "#669900", alpha: 0.8 },
+		largeIndicator:   { lineWidth: 6, startAt: 25, endAt: 35, color: "#666600", alpha: 1 },
+		hourHand:         { lineWidth: 4, startAt: 0, endAt: 65, color: "black", alpha: 1 },
+		minuteHand:       { lineWidth: 3, startAt: 0, endAt: 75, color: "black", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -75, endAt: 75, color: "#99CC00", alpha: 0.8 },
+		secondDecoration: { lineWidth: 5, startAt: 50, radius: 90, fillColor: "#00FF00", color: "green", alpha: 0.05 }
+	},
+
+	// By Yoo Nhe
+	watermelon: {
+		outerBorder:      { lineWidth: 100, radius: 1.7, color: "#d93d04", alpha: 5 },
+		smallIndicator:   { lineWidth: 2, startAt: 50, endAt: 70, color: "#d93d04", alpha: 5 },
+		largeIndicator:   { lineWidth: 2, startAt: 45, endAt: 94, color: "#a9bf04", alpha: 1 },
+		hourHand:         { lineWidth: 5, startAt: -20, endAt: 80, color: "#8c0d17", alpha: 1 },
+		minuteHand:       { lineWidth: 2, startAt: -20, endAt: 80, color: "#7c8c03", alpha: .9 },
+		secondHand:       { lineWidth: 2, startAt: 70, endAt: 94, color: "#d93d04", alpha: .85 },
+		secondDecoration: { lineWidth: 1, startAt: 70, radius: 3, fillColor: "red", color: "black", alpha: .7 }
+	},
+	classicWhite: {
+		outerBorder:      { lineWidth: 185, radius: 1, color: "#8AB3FF", alpha: 1 },
+		smallIndicator:   { lineWidth: 2, startAt: 89, endAt: 94, color: "#94AEE3", alpha: 1 },
+		largeIndicator:   { lineWidth: 4, startAt: 83, endAt: 94, color: "#94AEE3", alpha: 1 },
+		hourHand:         { lineWidth: 5, startAt: 0, endAt: 60, color: "white", alpha: 1 },
+		minuteHand:       { lineWidth: 4, startAt: 0, endAt: 80, color: "white", alpha: 1 },
+		secondHand:       { lineWidth: 1, startAt: -20, endAt: 85, color: "#FFCFCF", alpha: .95 },
+		secondDecoration: { lineWidth: 3, startAt: 0, radius: 2, fillColor: "white", color: "white", alpha: 1 },
+		font:             { "font-family": "arial", color: "#FFFFFF", "font-size": 14 }
+	}
+};
diff --git a/widgets/timeandweather/js/segment-display.js b/widgets/timeandweather/js/segment-display.js
new file mode 100644
index 0000000..6fe6712
--- /dev/null
+++ b/widgets/timeandweather/js/segment-display.js
@@ -0,0 +1,558 @@
+/*!
+ * segment-display.js
+ *
+ * Copyright 2012, Rüdiger Appel
+ * http://www.3quarks.com
+ * Published under Creative Commons 3.0 License.
+ *
+ * Date: 2012-02-14
+ * Version: 1.0.0
+ * 
+ * Dokumentation: http://www.3quarks.com/de/Segmentanzeige
+ * Documentation: http://www.3quarks.com/en/SegmentDisplay
+ */
+
+// Segment display types
+SegmentDisplay.SevenSegment    = 7;
+SegmentDisplay.FourteenSegment = 14;
+SegmentDisplay.SixteenSegment  = 16;
+
+// Segment corner types
+SegmentDisplay.SymmetricCorner = 0;
+SegmentDisplay.SquaredCorner   = 1;
+SegmentDisplay.RoundedCorner   = 2;
+
+
+function SegmentDisplay(displayId) {
+  this.displayId       = displayId;
+  this.pattern         = '##:##:##';
+  this.value           = '12:34:56';
+  this.digitHeight     = 20;
+  this.digitWidth      = 10;
+  this.digitDistance   = 2.5;
+  this.displayAngle    = 12;
+  this.segmentWidth    = 2.5;
+  this.segmentDistance = 0.2;
+  this.segmentCount    = SegmentDisplay.SevenSegment;
+  this.cornerType      = SegmentDisplay.RoundedCorner;
+  this.colorOn         = 'rgb(233, 93, 15)';
+  this.colorOff        = 'rgb(75, 30, 5)';
+};
+
+SegmentDisplay.prototype.setValue = function(value) {
+  this.value = value;
+  this.draw();
+};
+
+SegmentDisplay.prototype.draw = function() {
+  var display = document.getElementById(this.displayId);
+  if (display) {
+    var context = display.getContext('2d');
+    if (context) {
+      // clear canvas
+      context.clearRect(0, 0, display.width, display.height);
+      
+      // compute and check display width
+      var width = 0;
+      var first = true;
+      if (this.pattern) {
+        for (var i = 0; i < this.pattern.length; i++) {
+          var c = this.pattern.charAt(i).toLowerCase();
+          if (c == '#') {
+            width += this.digitWidth;
+          } else if (c == '.' || c == ':') {
+            width += this.segmentWidth;
+          } else if (c != ' ') {
+            return;
+          }
+          width += first ? 0 : this.digitDistance;
+          first = false;
+        }
+      }
+      if (width <= 0) {
+        return;
+      }
+      
+      // compute skew factor
+      var angle = -1.0 * Math.max(-45.0, Math.min(45.0, this.displayAngle));
+      var skew  = Math.tan((angle * Math.PI) / 180.0);
+      
+      // compute scale factor
+      var scale = Math.min(display.width / (width + Math.abs(skew * this.digitHeight)), display.height / this.digitHeight);
+      
+      // compute display offset
+      var offsetX = (display.width - (width + skew * this.digitHeight) * scale) / 2.0;
+      var offsetY = (display.height - this.digitHeight * scale) / 2.0;
+      
+      // context transformation
+      context.save();
+      context.translate(offsetX, offsetY);
+      context.scale(scale, scale);
+      context.transform(1, 0, skew, 1, 0, 0);
+
+      // draw segments
+      var xPos = 0;
+      var size = (this.value) ? this.value.length : 0;
+      for (var i = 0; i < this.pattern.length; i++) {
+        var mask  = this.pattern.charAt(i);
+        var value = (i < size) ? this.value.charAt(i).toLowerCase() : ' ';
+        xPos += this.drawDigit(context, xPos, mask, value);
+      }
+
+      // finish drawing
+      context.restore();
+    }
+  }
+};
+
+SegmentDisplay.prototype.drawDigit = function(context, xPos, mask, c) {
+  switch (mask) {
+    case '#':
+      var r = Math.sqrt(this.segmentWidth * this.segmentWidth / 2.0);
+      var d = Math.sqrt(this.segmentDistance * this.segmentDistance / 2.0);
+      var e = d / 2.0; 
+      var f = (this.segmentWidth - d) * Math.sin((45.0 * Math.PI) / 180.0);
+      var g = f / 2.0;
+      var h = (this.digitHeight - 3.0 * this.segmentWidth) / 2.0;
+      var w = (this.digitWidth - 3.0 * this.segmentWidth) / 2.0;
+      var s = this.segmentWidth / 2.0;
+      var t = this.digitWidth / 2.0;
+
+      // draw segment a (a1 and a2 for 16 segments)
+      if (this.segmentCount == 16) {
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@%');
+        context.beginPath();
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.moveTo(x + s + d, y + s);
+            context.lineTo(x + this.segmentWidth + d, y);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.moveTo(x + s + e, y + s - e);
+            context.lineTo(x + this.segmentWidth, y);
+            break;
+          default:
+            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+        }
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+        
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@');
+        context.beginPath();
+        context.moveTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + t + d + s, y + this.segmentWidth);
+        context.lineTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+        }
+        context.fill();
+        
+      } else {
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, '02356789acefp', '02356789abcdefgiopqrstz@');
+        context.beginPath();
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.moveTo(x + s + d, y + s);
+            context.lineTo(x + this.segmentWidth + d, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.moveTo(x + s + e, y + s - e);
+            context.lineTo(x + this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+            break;
+          default:
+            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+        }
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+      }
+      
+      // draw segment b
+      x = xPos + this.digitWidth - this.segmentWidth;
+      y = 0;
+      context.fillStyle = this.getSegmentColor(c, '01234789adhpy', '01234789abdhjmnopqruwy');
+      context.beginPath();
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.moveTo(x + s, y + s + d);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.moveTo(x + s + e, y + s + e);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+          break;
+        default:
+          context.moveTo(x + f + d, y + this.segmentWidth - f);
+          context.quadraticCurveTo(x + this.segmentWidth, y + this.segmentWidth - g, x + this.segmentWidth, y + this.segmentWidth);
+      }
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+      context.lineTo(x, y + h + this.segmentWidth - d);
+      context.lineTo(x, y + this.segmentWidth + d);
+      context.fill();
+      
+      // draw segment c
+      x = xPos + this.digitWidth - this.segmentWidth;
+      y = h + this.segmentWidth;
+      context.fillStyle = this.getSegmentColor(c, '013456789abdhnouy', '01346789abdghjmnoqsuw@', '%');
+      context.beginPath();
+      context.moveTo(x, y + this.segmentWidth + d);
+      context.lineTo(x + s, y + s + d);
+      context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x + s + e, y + h + this.segmentWidth + s - e);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        default:
+          context.quadraticCurveTo(x + this.segmentWidth, y + h + this.segmentWidth + g, x + f + d, y + h + this.segmentWidth + f); //
+          context.lineTo(x, y + h + this.segmentWidth - d);
+      }
+      context.fill();
+      
+      // draw segment d (d1 and d2 for 16 segments)
+      if (this.segmentCount == 16) {
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@');
+        context.beginPath();
+        context.moveTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+            context.lineTo(x + s + d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + s + e, y + s + e);
+            break;
+          default:
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+            context.lineTo(x + this.segmentWidth - f, y + f + d);
+        }
+        context.fill();
+
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@', '%');
+        context.beginPath();
+        context.moveTo(x + t + d + s, y + this.segmentWidth);
+        context.lineTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+        }
+        context.fill();
+      }
+      else {
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, '0235689bcdelotuy_', '0235689bcdegijloqsuz_=@');
+        context.beginPath();
+        context.moveTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+            context.lineTo(x + s + d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + s + e, y + s + e);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+            context.lineTo(x + this.segmentWidth - f, y + f + d);
+        }
+        context.fill();
+      }
+      
+      // draw segment e
+      x = xPos;
+      y = h + this.segmentWidth;
+      context.fillStyle = this.getSegmentColor(c, '0268abcdefhlnoprtu', '0268acefghjklmnopqruvw@');
+      context.beginPath();
+      context.moveTo(x, y + this.segmentWidth + d);
+      context.lineTo(x + s, y + s + d);
+      context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x + s - e, y + h + this.segmentWidth + s - d + e);
+          context.lineTo(x, y + h + this.segmentWidth);
+          break;
+        default:
+          context.lineTo(x + this.segmentWidth - f - d, y + h + this.segmentWidth + f); 
+          context.quadraticCurveTo(x, y + h + this.segmentWidth + g, x, y + h + this.segmentWidth);
+      }
+      context.fill();
+      
+      // draw segment f
+      x = xPos;
+      y = 0;
+      context.fillStyle = this.getSegmentColor(c, '045689abcefhlpty', '045689acefghklmnopqrsuvwy@', '%');
+      context.beginPath();
+      context.moveTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+      context.lineTo(x, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x, y + this.segmentWidth + d);
+          context.lineTo(x + s, y + s + d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x, y + this.segmentWidth);
+          context.lineTo(x + s - e, y + s + e);
+          break;
+        default:
+          context.lineTo(x, y + this.segmentWidth);
+          context.quadraticCurveTo(x, y + this.segmentWidth - g, x + this.segmentWidth - f - d, y + this.segmentWidth - f); 
+          context.lineTo(x + this.segmentWidth - f - d, y + this.segmentWidth - f); 
+      }
+      context.fill();
+
+      // draw segment g for 7 segments
+      if (this.segmentCount == 7) {
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, '2345689abdefhnoprty-=');
+        context.beginPath();
+        context.moveTo(x + s + d, y + s);
+        context.lineTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        context.lineTo(x + this.digitWidth - s - d, y + s);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+      }
+            
+      // draw inner segments for the fourteen- and sixteen-segment-display
+      if (this.segmentCount != 7) {
+        // draw segment g1
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, null, '2345689aefhkprsy-+*=', '%');
+        context.beginPath();
+        context.moveTo(x + s + d, y + s);
+        context.lineTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+        
+        // draw segment g2
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, null, '234689abefghprsy-+*=@', '%');
+        context.beginPath();
+        context.moveTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        context.lineTo(x + this.digitWidth - s - d, y + s);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + t + d + s, y + this.segmentWidth);
+        context.fill();
+        
+        // draw segment j 
+        x = xPos + t - s;
+        y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, 'bdit+*', '%');
+        context.beginPath();
+        if (this.segmentCount == 14) {
+          context.moveTo(x, y + this.segmentWidth + this.segmentDistance);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + this.segmentDistance);
+        } else {
+          context.moveTo(x, y + this.segmentWidth + d);
+          context.lineTo(x + s, y + s + d);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+        }
+        context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+        context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+        context.lineTo(x, y + h + this.segmentWidth - d);
+        context.fill();
+        
+        // draw segment m
+        x = xPos + t - s;
+        y = this.digitHeight;
+        context.fillStyle = this.getSegmentColor(c, null, 'bdity+*@', '%');
+        context.beginPath();
+        if (this.segmentCount == 14) {
+          context.moveTo(x, y - this.segmentWidth - this.segmentDistance);
+          context.lineTo(x + this.segmentWidth, y - this.segmentWidth - this.segmentDistance);
+        } else {
+          context.moveTo(x, y - this.segmentWidth - d);
+          context.lineTo(x + s, y - s - d);
+          context.lineTo(x + this.segmentWidth, y - this.segmentWidth - d);
+        }
+        context.lineTo(x + this.segmentWidth, y - h - this.segmentWidth + d);
+        context.lineTo(x + s, y - h - this.segmentWidth - s + d);
+        context.lineTo(x, y - h - this.segmentWidth + d);
+        context.fill();
+        
+        // draw segment h
+        x = xPos + this.segmentWidth;
+        y = this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, 'mnx\\*');
+        context.beginPath();
+        context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance - r , y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+        context.fill();
+        
+        // draw segment k
+        x = xPos + w + 2.0 * this.segmentWidth;
+        y = this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0kmvxz/*', '%');
+        context.beginPath();
+        context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+        context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+        context.fill();
+        
+        // draw segment l
+        x = xPos + w + 2.0 * this.segmentWidth;
+        y = h + 2.0 * this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '5knqrwx\\*');
+        context.beginPath();
+        context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance - r , y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+        context.fill();
+        
+        // draw segment n
+        x = xPos + this.segmentWidth;
+        y = h + 2.0 * this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0vwxz/*', '%');
+        context.beginPath();
+        context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+        context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+        context.fill();
+      }
+      
+      return this.digitDistance + this.digitWidth;
+      
+    case '.':
+      context.fillStyle = (c == '#') || (c == '.') ? this.colorOn : this.colorOff;
+      this.drawPoint(context, xPos, this.digitHeight - this.segmentWidth, this.segmentWidth);
+      return this.digitDistance + this.segmentWidth;
+      
+    case ':':
+      context.fillStyle = (c == '#') || (c == ':') ? this.colorOn : this.colorOff;
+      var y = (this.digitHeight - this.segmentWidth) / 2.0 - this.segmentWidth;
+      this.drawPoint(context, xPos, y, this.segmentWidth);
+      this.drawPoint(context, xPos, y + 2.0 * this.segmentWidth, this.segmentWidth);
+      return this.digitDistance + this.segmentWidth;
+      
+    default:
+      return this.digitDistance;    
+  }
+};
+
+SegmentDisplay.prototype.drawPoint = function(context, x1, y1, size) {
+  var x2 = x1 + size;
+  var y2 = y1 + size;
+  var d  = size / 4.0;
+  
+  context.beginPath();
+  context.moveTo(x2 - d, y1);
+  context.quadraticCurveTo(x2, y1, x2, y1 + d);
+  context.lineTo(x2, y2 - d);
+  context.quadraticCurveTo(x2, y2, x2 - d, y2);
+  context.lineTo(x1 + d, y2);
+  context.quadraticCurveTo(x1, y2, x1, y2 - d);
+  context.lineTo(x1, y1 + d);
+  context.quadraticCurveTo(x1, y1, x1 + d, y1);
+  context.fill();
+}; 
+
+SegmentDisplay.prototype.getSegmentColor = function(c, charSet7, charSet14, charSet16) {
+  if (c == '#') {
+    return this.colorOn;
+  } else {
+    switch (this.segmentCount) {
+      case 7:  return (charSet7.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      case 14: return (charSet14.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      case 16: var pattern = charSet14 + (charSet16 === undefined ? '' : charSet16);
+               return (pattern.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      default: return this.colorOff;
+    }
+  }
+};
+
+
+
+
diff --git a/widgets/timeandweather/js/segmentDisplay/segment-display.js b/widgets/timeandweather/js/segmentDisplay/segment-display.js
new file mode 100644
index 0000000..6fe6712
--- /dev/null
+++ b/widgets/timeandweather/js/segmentDisplay/segment-display.js
@@ -0,0 +1,558 @@
+/*!
+ * segment-display.js
+ *
+ * Copyright 2012, Rüdiger Appel
+ * http://www.3quarks.com
+ * Published under Creative Commons 3.0 License.
+ *
+ * Date: 2012-02-14
+ * Version: 1.0.0
+ * 
+ * Dokumentation: http://www.3quarks.com/de/Segmentanzeige
+ * Documentation: http://www.3quarks.com/en/SegmentDisplay
+ */
+
+// Segment display types
+SegmentDisplay.SevenSegment    = 7;
+SegmentDisplay.FourteenSegment = 14;
+SegmentDisplay.SixteenSegment  = 16;
+
+// Segment corner types
+SegmentDisplay.SymmetricCorner = 0;
+SegmentDisplay.SquaredCorner   = 1;
+SegmentDisplay.RoundedCorner   = 2;
+
+
+function SegmentDisplay(displayId) {
+  this.displayId       = displayId;
+  this.pattern         = '##:##:##';
+  this.value           = '12:34:56';
+  this.digitHeight     = 20;
+  this.digitWidth      = 10;
+  this.digitDistance   = 2.5;
+  this.displayAngle    = 12;
+  this.segmentWidth    = 2.5;
+  this.segmentDistance = 0.2;
+  this.segmentCount    = SegmentDisplay.SevenSegment;
+  this.cornerType      = SegmentDisplay.RoundedCorner;
+  this.colorOn         = 'rgb(233, 93, 15)';
+  this.colorOff        = 'rgb(75, 30, 5)';
+};
+
+SegmentDisplay.prototype.setValue = function(value) {
+  this.value = value;
+  this.draw();
+};
+
+SegmentDisplay.prototype.draw = function() {
+  var display = document.getElementById(this.displayId);
+  if (display) {
+    var context = display.getContext('2d');
+    if (context) {
+      // clear canvas
+      context.clearRect(0, 0, display.width, display.height);
+      
+      // compute and check display width
+      var width = 0;
+      var first = true;
+      if (this.pattern) {
+        for (var i = 0; i < this.pattern.length; i++) {
+          var c = this.pattern.charAt(i).toLowerCase();
+          if (c == '#') {
+            width += this.digitWidth;
+          } else if (c == '.' || c == ':') {
+            width += this.segmentWidth;
+          } else if (c != ' ') {
+            return;
+          }
+          width += first ? 0 : this.digitDistance;
+          first = false;
+        }
+      }
+      if (width <= 0) {
+        return;
+      }
+      
+      // compute skew factor
+      var angle = -1.0 * Math.max(-45.0, Math.min(45.0, this.displayAngle));
+      var skew  = Math.tan((angle * Math.PI) / 180.0);
+      
+      // compute scale factor
+      var scale = Math.min(display.width / (width + Math.abs(skew * this.digitHeight)), display.height / this.digitHeight);
+      
+      // compute display offset
+      var offsetX = (display.width - (width + skew * this.digitHeight) * scale) / 2.0;
+      var offsetY = (display.height - this.digitHeight * scale) / 2.0;
+      
+      // context transformation
+      context.save();
+      context.translate(offsetX, offsetY);
+      context.scale(scale, scale);
+      context.transform(1, 0, skew, 1, 0, 0);
+
+      // draw segments
+      var xPos = 0;
+      var size = (this.value) ? this.value.length : 0;
+      for (var i = 0; i < this.pattern.length; i++) {
+        var mask  = this.pattern.charAt(i);
+        var value = (i < size) ? this.value.charAt(i).toLowerCase() : ' ';
+        xPos += this.drawDigit(context, xPos, mask, value);
+      }
+
+      // finish drawing
+      context.restore();
+    }
+  }
+};
+
+SegmentDisplay.prototype.drawDigit = function(context, xPos, mask, c) {
+  switch (mask) {
+    case '#':
+      var r = Math.sqrt(this.segmentWidth * this.segmentWidth / 2.0);
+      var d = Math.sqrt(this.segmentDistance * this.segmentDistance / 2.0);
+      var e = d / 2.0; 
+      var f = (this.segmentWidth - d) * Math.sin((45.0 * Math.PI) / 180.0);
+      var g = f / 2.0;
+      var h = (this.digitHeight - 3.0 * this.segmentWidth) / 2.0;
+      var w = (this.digitWidth - 3.0 * this.segmentWidth) / 2.0;
+      var s = this.segmentWidth / 2.0;
+      var t = this.digitWidth / 2.0;
+
+      // draw segment a (a1 and a2 for 16 segments)
+      if (this.segmentCount == 16) {
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@%');
+        context.beginPath();
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.moveTo(x + s + d, y + s);
+            context.lineTo(x + this.segmentWidth + d, y);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.moveTo(x + s + e, y + s - e);
+            context.lineTo(x + this.segmentWidth, y);
+            break;
+          default:
+            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+        }
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+        
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, '02356789abcdefgiopqrstz@');
+        context.beginPath();
+        context.moveTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + t + d + s, y + this.segmentWidth);
+        context.lineTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+        }
+        context.fill();
+        
+      } else {
+        var x = xPos;
+        var y = 0;
+        context.fillStyle = this.getSegmentColor(c, '02356789acefp', '02356789abcdefgiopqrstz@');
+        context.beginPath();
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.moveTo(x + s + d, y + s);
+            context.lineTo(x + this.segmentWidth + d, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.moveTo(x + s + e, y + s - e);
+            context.lineTo(x + this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - s - e, y + s - e);
+            break;
+          default:
+            context.moveTo(x + this.segmentWidth - f, y + this.segmentWidth - f - d);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y, x + this.segmentWidth, y);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y, x + this.digitWidth - this.segmentWidth + f, y + this.segmentWidth - f - d);
+        }
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+      }
+      
+      // draw segment b
+      x = xPos + this.digitWidth - this.segmentWidth;
+      y = 0;
+      context.fillStyle = this.getSegmentColor(c, '01234789adhpy', '01234789abdhjmnopqruwy');
+      context.beginPath();
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.moveTo(x + s, y + s + d);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.moveTo(x + s + e, y + s + e);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+          break;
+        default:
+          context.moveTo(x + f + d, y + this.segmentWidth - f);
+          context.quadraticCurveTo(x + this.segmentWidth, y + this.segmentWidth - g, x + this.segmentWidth, y + this.segmentWidth);
+      }
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+      context.lineTo(x, y + h + this.segmentWidth - d);
+      context.lineTo(x, y + this.segmentWidth + d);
+      context.fill();
+      
+      // draw segment c
+      x = xPos + this.digitWidth - this.segmentWidth;
+      y = h + this.segmentWidth;
+      context.fillStyle = this.getSegmentColor(c, '013456789abdhnouy', '01346789abdghjmnoqsuw@', '%');
+      context.beginPath();
+      context.moveTo(x, y + this.segmentWidth + d);
+      context.lineTo(x + s, y + s + d);
+      context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x + s + e, y + h + this.segmentWidth + s - e);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        default:
+          context.quadraticCurveTo(x + this.segmentWidth, y + h + this.segmentWidth + g, x + f + d, y + h + this.segmentWidth + f); //
+          context.lineTo(x, y + h + this.segmentWidth - d);
+      }
+      context.fill();
+      
+      // draw segment d (d1 and d2 for 16 segments)
+      if (this.segmentCount == 16) {
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@');
+        context.beginPath();
+        context.moveTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+            context.lineTo(x + s + d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + s + e, y + s + e);
+            break;
+          default:
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+            context.lineTo(x + this.segmentWidth - f, y + f + d);
+        }
+        context.fill();
+
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0235689bcdegijloqsuz_=@', '%');
+        context.beginPath();
+        context.moveTo(x + t + d + s, y + this.segmentWidth);
+        context.lineTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+        }
+        context.fill();
+      }
+      else {
+        x = xPos;
+        y = this.digitHeight - this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, '0235689bcdelotuy_', '0235689bcdegijloqsuz_=@');
+        context.beginPath();
+        context.moveTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        switch (this.cornerType) {
+          case SegmentDisplay.SymmetricCorner:
+            context.lineTo(x + this.digitWidth - s - d, y + s);
+            context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+            context.lineTo(x + s + d, y + s);
+            break;
+          case SegmentDisplay.SquaredCorner:
+            context.lineTo(x + this.digitWidth - s - e, y + s + e);
+            context.lineTo(x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + s + e, y + s + e);
+            break;
+          default:
+            context.lineTo(x + this.digitWidth - this.segmentWidth + f, y + f + d);
+            context.quadraticCurveTo(x + this.digitWidth - this.segmentWidth + g, y + this.segmentWidth, x + this.digitWidth - this.segmentWidth, y + this.segmentWidth);
+            context.lineTo(x + this.segmentWidth, y + this.segmentWidth);
+            context.quadraticCurveTo(x + this.segmentWidth - g, y + this.segmentWidth, x + this.segmentWidth - f, y + f + d);
+            context.lineTo(x + this.segmentWidth - f, y + f + d);
+        }
+        context.fill();
+      }
+      
+      // draw segment e
+      x = xPos;
+      y = h + this.segmentWidth;
+      context.fillStyle = this.getSegmentColor(c, '0268abcdefhlnoprtu', '0268acefghjklmnopqruvw@');
+      context.beginPath();
+      context.moveTo(x, y + this.segmentWidth + d);
+      context.lineTo(x + s, y + s + d);
+      context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+          context.lineTo(x, y + h + this.segmentWidth - d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x + s - e, y + h + this.segmentWidth + s - d + e);
+          context.lineTo(x, y + h + this.segmentWidth);
+          break;
+        default:
+          context.lineTo(x + this.segmentWidth - f - d, y + h + this.segmentWidth + f); 
+          context.quadraticCurveTo(x, y + h + this.segmentWidth + g, x, y + h + this.segmentWidth);
+      }
+      context.fill();
+      
+      // draw segment f
+      x = xPos;
+      y = 0;
+      context.fillStyle = this.getSegmentColor(c, '045689abcefhlpty', '045689acefghklmnopqrsuvwy@', '%');
+      context.beginPath();
+      context.moveTo(x + this.segmentWidth, y + this.segmentWidth + d);
+      context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+      context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+      context.lineTo(x, y + h + this.segmentWidth - d);
+      switch (this.cornerType) {
+        case SegmentDisplay.SymmetricCorner:
+          context.lineTo(x, y + this.segmentWidth + d);
+          context.lineTo(x + s, y + s + d);
+          break;
+        case SegmentDisplay.SquaredCorner:
+          context.lineTo(x, y + this.segmentWidth);
+          context.lineTo(x + s - e, y + s + e);
+          break;
+        default:
+          context.lineTo(x, y + this.segmentWidth);
+          context.quadraticCurveTo(x, y + this.segmentWidth - g, x + this.segmentWidth - f - d, y + this.segmentWidth - f); 
+          context.lineTo(x + this.segmentWidth - f - d, y + this.segmentWidth - f); 
+      }
+      context.fill();
+
+      // draw segment g for 7 segments
+      if (this.segmentCount == 7) {
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, '2345689abdefhnoprty-=');
+        context.beginPath();
+        context.moveTo(x + s + d, y + s);
+        context.lineTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        context.lineTo(x + this.digitWidth - s - d, y + s);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+      }
+            
+      // draw inner segments for the fourteen- and sixteen-segment-display
+      if (this.segmentCount != 7) {
+        // draw segment g1
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, null, '2345689aefhkprsy-+*=', '%');
+        context.beginPath();
+        context.moveTo(x + s + d, y + s);
+        context.lineTo(x + this.segmentWidth + d, y);
+        context.lineTo(x + t - d - s, y);
+        context.lineTo(x + t - d, y + s);
+        context.lineTo(x + t - d - s, y + this.segmentWidth);
+        context.lineTo(x + this.segmentWidth + d, y + this.segmentWidth);
+        context.fill();
+        
+        // draw segment g2
+        x = xPos;
+        y = (this.digitHeight - this.segmentWidth) / 2.0;
+        context.fillStyle = this.getSegmentColor(c, null, '234689abefghprsy-+*=@', '%');
+        context.beginPath();
+        context.moveTo(x + t + d, y + s);
+        context.lineTo(x + t + d + s, y);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y);
+        context.lineTo(x + this.digitWidth - s - d, y + s);
+        context.lineTo(x + this.digitWidth - this.segmentWidth - d, y + this.segmentWidth);
+        context.lineTo(x + t + d + s, y + this.segmentWidth);
+        context.fill();
+        
+        // draw segment j 
+        x = xPos + t - s;
+        y = 0;
+        context.fillStyle = this.getSegmentColor(c, null, 'bdit+*', '%');
+        context.beginPath();
+        if (this.segmentCount == 14) {
+          context.moveTo(x, y + this.segmentWidth + this.segmentDistance);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + this.segmentDistance);
+        } else {
+          context.moveTo(x, y + this.segmentWidth + d);
+          context.lineTo(x + s, y + s + d);
+          context.lineTo(x + this.segmentWidth, y + this.segmentWidth + d);
+        }
+        context.lineTo(x + this.segmentWidth, y + h + this.segmentWidth - d);
+        context.lineTo(x + s, y + h + this.segmentWidth + s - d);
+        context.lineTo(x, y + h + this.segmentWidth - d);
+        context.fill();
+        
+        // draw segment m
+        x = xPos + t - s;
+        y = this.digitHeight;
+        context.fillStyle = this.getSegmentColor(c, null, 'bdity+*@', '%');
+        context.beginPath();
+        if (this.segmentCount == 14) {
+          context.moveTo(x, y - this.segmentWidth - this.segmentDistance);
+          context.lineTo(x + this.segmentWidth, y - this.segmentWidth - this.segmentDistance);
+        } else {
+          context.moveTo(x, y - this.segmentWidth - d);
+          context.lineTo(x + s, y - s - d);
+          context.lineTo(x + this.segmentWidth, y - this.segmentWidth - d);
+        }
+        context.lineTo(x + this.segmentWidth, y - h - this.segmentWidth + d);
+        context.lineTo(x + s, y - h - this.segmentWidth - s + d);
+        context.lineTo(x, y - h - this.segmentWidth + d);
+        context.fill();
+        
+        // draw segment h
+        x = xPos + this.segmentWidth;
+        y = this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, 'mnx\\*');
+        context.beginPath();
+        context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance - r , y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+        context.fill();
+        
+        // draw segment k
+        x = xPos + w + 2.0 * this.segmentWidth;
+        y = this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0kmvxz/*', '%');
+        context.beginPath();
+        context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+        context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+        context.fill();
+        
+        // draw segment l
+        x = xPos + w + 2.0 * this.segmentWidth;
+        y = h + 2.0 * this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '5knqrwx\\*');
+        context.beginPath();
+        context.moveTo(x + this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + this.segmentDistance + r, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance , y + h - this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance - r , y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + this.segmentDistance + r);
+        context.fill();
+        
+        // draw segment n
+        x = xPos + this.segmentWidth;
+        y = h + 2.0 * this.segmentWidth;
+        context.fillStyle = this.getSegmentColor(c, null, '0vwxz/*', '%');
+        context.beginPath();
+        context.moveTo(x + w - this.segmentDistance, y + this.segmentDistance);
+        context.lineTo(x + w - this.segmentDistance, y + this.segmentDistance + r);
+        context.lineTo(x + this.segmentDistance + r, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance);
+        context.lineTo(x + this.segmentDistance, y + h - this.segmentDistance - r);
+        context.lineTo(x + w - this.segmentDistance - r, y + this.segmentDistance);
+        context.fill();
+      }
+      
+      return this.digitDistance + this.digitWidth;
+      
+    case '.':
+      context.fillStyle = (c == '#') || (c == '.') ? this.colorOn : this.colorOff;
+      this.drawPoint(context, xPos, this.digitHeight - this.segmentWidth, this.segmentWidth);
+      return this.digitDistance + this.segmentWidth;
+      
+    case ':':
+      context.fillStyle = (c == '#') || (c == ':') ? this.colorOn : this.colorOff;
+      var y = (this.digitHeight - this.segmentWidth) / 2.0 - this.segmentWidth;
+      this.drawPoint(context, xPos, y, this.segmentWidth);
+      this.drawPoint(context, xPos, y + 2.0 * this.segmentWidth, this.segmentWidth);
+      return this.digitDistance + this.segmentWidth;
+      
+    default:
+      return this.digitDistance;    
+  }
+};
+
+SegmentDisplay.prototype.drawPoint = function(context, x1, y1, size) {
+  var x2 = x1 + size;
+  var y2 = y1 + size;
+  var d  = size / 4.0;
+  
+  context.beginPath();
+  context.moveTo(x2 - d, y1);
+  context.quadraticCurveTo(x2, y1, x2, y1 + d);
+  context.lineTo(x2, y2 - d);
+  context.quadraticCurveTo(x2, y2, x2 - d, y2);
+  context.lineTo(x1 + d, y2);
+  context.quadraticCurveTo(x1, y2, x1, y2 - d);
+  context.lineTo(x1, y1 + d);
+  context.quadraticCurveTo(x1, y1, x1 + d, y1);
+  context.fill();
+}; 
+
+SegmentDisplay.prototype.getSegmentColor = function(c, charSet7, charSet14, charSet16) {
+  if (c == '#') {
+    return this.colorOn;
+  } else {
+    switch (this.segmentCount) {
+      case 7:  return (charSet7.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      case 14: return (charSet14.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      case 16: var pattern = charSet14 + (charSet16 === undefined ? '' : charSet16);
+               return (pattern.indexOf(c) == -1) ? this.colorOff : this.colorOn;
+      default: return this.colorOff;
+    }
+  }
+};
+
+
+
+