Initial commit

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/.idea

.npmignore

@@ -0,0 +1,6 @@
+Gruntfile.js
+tasks
+node_modules
+test
+.travis.yml
+appveyor.yml

.travis.yml

@@ -0,0 +1,7 @@
+os:
+  - linux
+language: node_js
+node_js:
+  - '4'
+  - '8'
+  - '10'

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;
+
+    // Project configuration.
+    grunt.initConfig({
+        pkg: pkg,
+        replace: {
+            core: {
+                options: {
+                    patterns: [
+                        {
+                            match: /version: *"[\.0-9]*"/,
+                            replacement: 'version: "' + version + '"'
+                        },
+                        {
+                            match: /"version": *"[\.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://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jscs.js'
+                },
+                dest: 'tasks/jscs.js'
+            },
+            get_jshint: {
+                options: {
+                    url: 'https://git.spacen.net/yunkong2/yunkong2.js-controller/master/tasks/jshint.js'
+                },
+                dest: 'tasks/jshint.js'
+            },/*
+            get_gruntfile: {
+                options: {
+                    url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/Gruntfile.js'
+                },
+                dest: 'Gruntfile.js'
+            },
+            get_utilsfile: {
+                options: {
+                    url: 'https://git.spacen.net/yunkong2/yunkong2.build/master/adapters/utils.js'
+                },
+                dest: 'lib/utils.js'
+            },*/
+            get_jscsRules: {
+                options: {
+                    url: 'https://git.spacen.net/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');
+        if (pos !== -1) {
+            var readmeStart = readme.substring(0, pos + '## Changelog\n'.length);
+            var readmeEnd   = readme.substring(pos + '## Changelog\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] + '\n';
+                        } else {
+                            news += '* ' + iopackage.common.whatsNew[i].en + '\n';
+                        }
+                    }
+                }
+
+                grunt.file.write('README.md', readmeStart + '### ' + version + ' (' + date + ')\n' + (news ? news + '\n\n' : '\n') + readmeEnd);
+            }
+        }
+    });
+
+    grunt.loadNpmTasks('grunt-replace');
+    grunt.loadNpmTasks('grunt-contrib-jshint');
+    grunt.loadNpmTasks('grunt-jscs');
+    grunt.loadNpmTasks('grunt-http');
+
+    grunt.registerTask('default', [
+        'exec',
+        'http',
+        'clean',
+        'replace',
+        'updateReadme',
+        'compress',
+        'copy',
+        'jshint',
+        'jscs'
+    ]);
+    grunt.registerTask('prepublish', [
+        'http',
+        'replace',
+		'updateReadme'
+    ]);
+	grunt.registerTask('p', [
+        'prepublish'
+    ]);
+};

LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 
+
+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.
+

README.md

@@ -0,0 +1,82 @@
+![Logo](admin/metro.png)
+yunkong2.vis-metro
+============
+[![NPM version](http://img.shields.io/npm/v/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro)
+[![Downloads](https://img.shields.io/npm/dm/yunkong2.vis-metro.svg)](https://www.npmjs.com/package/yunkong2.vis-metro)
+
+[![NPM](https://nodei.co/npm/yunkong2.vis-metro.png?downloads=true)](https://nodei.co/npm/yunkong2.vis-metro/)
+
+
+Metro widget sets for yunkong2.vis. Widgets are styled as Windows Metro interface.
+![Screenshot](img/Demo2.png)
+
+Build with http://metroui.org.ua/. 
+
+## Changelog
+### 1.1.2 (2017-12-17)
+- (bluefox) Fixed metro-string widget
+
+### 1.1.1 (2017-05-27)
+- (mctom) 2 Widgets added
+- (buanet) fix tplMetroTileStateNumber
+
+### 1.1.0 (2016-11-12)
+- (bluefox) Support of new concept by vis
+
+### 1.0.4 (2016-10-11)
+- (bluefox) fix Metro Widget Heating
+
+### 1.0.3 (2016-09-21)
+- (bluefox) fix Metro Widget Tile State / val Badge Number 
+
+### 1.0.1 (2016-09-13)
+- (bluefox) fix Metro Widget "Tile Dialog" 
+
+### 1.0.0 (2016-03-15)
+- (bluefox) remove configuration dialog
+
+### 0.2.1 (2016-01-31)
+- (vore) add tplMetroTileBoolDialog
+
+### 0.2.0 (2015-12-14)
+- (bluefox) add custom icon for badges
+
+### 0.1.11 (2015-12-03)
+- (bluefox) fix Tile ValueList 8: badge icon.
+
+### 0.1.10 (2015-12-01)
+- (bluefox) fix bool/number widget: badge icon.
+
+### 0.1.9 (2015-09-19)
+- (bluefox) fix Navigation widget: Brand Background wird nicht angezeigt, sobald Brand Background inactive und Brand Background active den selben Wert haben.
+- (instalator) support of old browsers
+
+### 0.1.8 (2015-09-06)
+- (bluefox) remove prepublish script because installation is not possible
+
+### 0.1.6 (2015-08-14)
+- (bluefox) prepublish script
+- (bluefox) update toggle widget
+
+### 0.1.5 (2015-08-12)
+- (bluefox) protect against double event: click and touchstart
+
+### 0.1.3 (2015-08-05)
+- (bluefox) fix metro-tile-heating window icon
+
+### 0.1.2 (2015-07-25)
+- (bluefox) add mfd icons
+- (bluefox) fix widgets with sliders if "min" != 0
+
+### 0.1.1 (2015-07-10)
+- (bluefox) make content_oid of "Tile Dialog / Badge Number" as object ID
+
+### 0.1.0 (2015-06-29)
+- (siedi) Add: Service status and humidity to heating tile
+
+### 0.0.1 (2015-06-28)
+- (bluefox) initial checkin
+
+## License
+ Copyright (c) 2013-2015 hobbyquaker https://git.spacen.net/hobbyquaker, bluefox https://git.spacen.net/GermanBluefox
+ MIT

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 = {
+        "Metro Widgets settings": {
+            "en": "Metro Widgets settings",
+            "de": "Metro Widgets Einstellungen",
+            "ru": "Настройки Metro 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="metro.png"></td>
+        <td style="padding-top: 20px;padding-left: 10px"><h3 class="translate">Metro Widgets settings</h3></td>
+    </tr></table>
+
+    <div class="translate">There is nothing to setup</h4>
+    </div>
+</html>

io-package.json

@@ -0,0 +1,85 @@
+{
+    "common": {
+        "name": "vis-metro",
+        "version": "1.1.2",
+        "news": {
+			"1.1.2": {
+                "en": "Fixed metro-string widget",
+                "de": "Korrigiert metro-string widget",
+                "ru": "Исправлен metro-string widget",
+                "nl": "Vaste metro-string widget",
+                "pt": "Atualizado o widget Metro-string",
+                "fr": "Widget de metro-string fixe"
+			},
+            "1.1.1": {
+                "en": "2 Widgets added\nfix tplMetroTileStateNumber",
+                "de": "2 Widgets hinzugefügt\nfix tplMetroTileStateNumber",
+                "ru": "Добавлено 2 виджета\nИсправлен MetroTileStateNumber"
+            },
+            "1.1.0": {
+                "en": "Support of new concept by vis",
+                "de": "Unterstützung vom neuen vis-Konzept",
+                "ru": "Поддержка нового концепта vis"
+            },
+            "1.0.4": {
+                "en": "fix Metro Widget Heating",
+                "de": "Korrigiert Metro Widget Heating",
+                "ru": "Исправлен виджет Metro Widget Heating"
+            },
+            "1.0.3": {
+                "en": "fix Metro Widget Tile State / val Badge Number",
+                "de": "Korrigiert Widget Tile State / val Badge Number",
+                "ru": "Исправлен виджет Tile State / val Badge Number"
+            },
+            "1.0.1": {
+                "en": "fix Metro Widget Tile Dialog",
+                "de": "Korrigiert Widget Tile Dialog",
+                "ru": "Исправлен виджет навигации"
+            }
+        },
+        "title": "yunkong2 Visualisation - metro style Widgets",
+        "desc": {
+            "en": "metro Widgets for yunkong2.vis",
+            "de": "metro Widgets für yunkong2.vis",
+            "ru": "metro Widgets для yunkong2.vis"
+        },
+        "platform": "Javascript/Node.js",
+        "loglevel": "info",
+        "icon": "metro.png",
+        "enabled": true,
+        "mode": "once",
+        "extIcon": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/master/admin/metro.png",
+        "keywords": [
+            "metro",
+            "vis",
+            "GUI",
+            "graphical",
+            "scada"
+        ],
+        "readme": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/README.md",
+        "authors": [
+            "hobbyquaker <hq@ccu.io>"
+        ],
+        "localLink": "%web_protocol%://%ip%:%web_port%/vis/edit.html",
+        "license": "MIT",
+        "dependencies": [
+            {
+                "vis": ">=0.11.1"
+            }
+        ],
+        "onlyWWW": true,
+        "singleton": true,
+        "type": "visualization-widgets",
+        "restartAdapters": [
+            "vis"
+        ],
+        "noConfig": true
+    },
+    "native": {
+        "dependencies": [
+            "jqui-mfd",
+            "basic"
+        ]
+    },
+    "instanceObjects": []
+}

package.json

@@ -0,0 +1,50 @@
+{
+  "name": "yunkong2.vis-metro",
+  "description": "Metro Widgets for yunkong2.vis",
+  "version": "1.1.2",
+  "author": {
+    "name": "hobbyquaker",
+    "email": "hq@ccu.io"
+  },
+  "contributors": [
+    "bluefox <dogafox@gmail.com>",
+    "hobbyquaker <hq@ccu.io>"
+  ],
+  "homepage": "https://git.spacen.net/yunkong2/yunkong2.vis-metro",
+  "repository": {
+    "type": "git",
+    "url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro"
+  },
+  "licenses": [
+    {
+      "type": "MIT",
+      "url": "https://git.spacen.net/yunkong2/yunkong2.vis-metro/blob/master/LICENSE"
+    }
+  ],
+  "keywords": [
+    "yunkong2",
+    "GUI",
+    "DashUI",
+    "web interface",
+    "home automation",
+    "SCADA",
+    "metro 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://git.spacen.net/yunkong2/yunkong2.vis-metro/issues"
+  },
+  "main": "widgets/metro.html",
+  "scripts": {
+    "test": "node node_modules/mocha/bin/mocha --exit"
+  },
+  "license": "MIT"
+}

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')
+    }
+};

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"]
+
+};

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'
+    ]
+};

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();
+    });
+});

widgets/metro/doc.html

@@ -0,0 +1,40 @@
+<html>
+<head>
+    <link rel="stylesheet" href="../../css/doc.css" />
+    <title>Dokumentation Widget-Set Metro</title>
+</head>
+<body>
+
+basiert auf http://metroui.org.ua/
+
+<h4>Attribute</h4>
+<dd>
+
+<dt>bg_class[_false,_true,_active,...]</dt>
+<dd>Tile Hintergrundfarbe</dd>
+
+<dt>brand_bg_class[_false,_true,_active,...]</dt>
+<dd>Tile Beschriftungsfeld Hintergrundfarbe</dd>
+
+<dt>badge_bg_class[_false,_true,_active,...]</dt>
+<dd>Tile Beschriftungsfeld Icon/Zahl Hintergrundfarbe</dd>
+
+<dt>[badge,dialog]icon_class[_false,_true,_active,...]</dt>
+<dd>vordefinierte Icons</dd>
+
+<dt>[badge,dialog]icon[_false,_true,_active,...]</dt>
+<dd>eigene Icons</dd>
+
+<dt>transform</dt>
+<dd>Tile bei Click animieren</dd>
+
+<dt>hover</dt>
+<dd>Tile bei Hover umrahmen</dd>
+
+
+</dd>
+<hr/>
+
+
+</body>
+</html>

widgets/metro/img/authors.txt

@@ -0,0 +1,7 @@
+KNX-User-Forum
+http://knx-user-forum.de
+
+mfd.gfx@gmail.com
+
+User:
+mfd

widgets/metro/img/license.txt

@@ -0,0 +1,2 @@
+http://creativecommons.org/licenses/by-sa/3.0/de/
+Creative Commons Namensnennung-Weitergabe unter gleichen Bedingungen 3.0 Deutschland Lizenz

widgets/metro/js/metro.js

@@ -0,0 +1,988 @@
+var hasTouch = 'ontouchend' in window, eventTimer;
+var moveDirection = 'undefined', startX, startY, deltaX, deltaY, mouseDown = false;
+
+function addTouchEvents(element){
+    if (hasTouch) {
+        element.addEventListener("touchstart", touch2Mouse, true);
+        element.addEventListener("touchmove", touch2Mouse, true);
+        element.addEventListener("touchend", touch2Mouse, true);
+    }
+}
+
+function touch2Mouse(e)
+{
+    var theTouch = e.changedTouches[0];
+    var mouseEv;
+
+    switch(e.type)
+    {
+        case "touchstart": mouseEv="mousedown"; break;
+        case "touchend":   mouseEv="mouseup"; break;
+        case "touchmove":  mouseEv="mousemove"; break;
+        default: return;
+    }
+
+
+    if (mouseEv == "mousedown") {
+        eventTimer = (new Date()).getTime();
+        startX = theTouch.clientX;
+        startY = theTouch.clientY;
+        mouseDown = true;
+    }
+
+    if (mouseEv == "mouseup") {
+        if ((new Date()).getTime() - eventTimer <= 500) {
+            mouseEv = "click";
+        } else if ((new Date()).getTime() - eventTimer > 1000) {
+            mouseEv = "longclick";
+        }
+        eventTimer = 0;
+        mouseDown = false;
+    }
+
+    if (mouseEv == "mousemove") {
+        if (mouseDown) {
+            deltaX = theTouch.clientX - startX;
+            deltaY = theTouch.clientY - startY;
+            moveDirection = deltaX > deltaY ? 'horizontal' : 'vertical';
+        }
+    }
+
+    var mouseEvent = document.createEvent("MouseEvent");
+    mouseEvent.initMouseEvent(mouseEv, true, true, window, 1, theTouch.screenX, theTouch.screenY, theTouch.clientX, theTouch.clientY, false, false, false, false, 0, null);
+    theTouch.target.dispatchEvent(mouseEvent);
+
+    e.preventDefault();
+}
+
+
+(function( $ ) {
+    $.widget("metro.tileTransform", {
+
+        version: "1.1.1",
+
+        options: {
+        },
+
+        _create: function(){
+            var element = this.element;
+            var dim = {w: element.width(), h: element.height()};
+
+            element.on('mousedown.metroTransform', function(e){
+                var X = e.pageX - $(this).offset().left, Y = e.pageY - $(this).offset().top;
+                var transform = 'top';
+
+                if (X < dim.w * 1/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
+                    transform = 'left';
+                } else if (X > dim.w * 2/3 && (Y < dim.h * 1/2 || Y > dim.h * 1/2 )) {
+                    transform = 'right'
+                } else if (X > dim.w*1/3 && X<dim.w*2/3 && Y > dim.h/2) {
+                    transform = 'bottom';
+                }
+
+
+
+                setTimeout(function ($this) {
+                    $this.addClass("tile-transform-"+transform);
+                }, 10, $(this));
+
+            });
+
+            element.on('mouseup.metroTransform', function(){
+
+
+                setTimeout(function ($this) {
+                    $this.removeClass("tile-transform-left")
+                        .removeClass("tile-transform-right")
+                        .removeClass("tile-transform-top")
+                        .removeClass("tile-transform-bottom");
+                }, 10, $(this));
+
+
+
+            });
+            element.on('mouseleave.metroTransform', function(){
+                $(this)
+                    .removeClass("tile-transform-left")
+                    .removeClass("tile-transform-right")
+                    .removeClass("tile-transform-top")
+                    .removeClass("tile-transform-bottom");
+            });
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    })
+
+    $.widget("metro.inputControl", {
+
+        version: "1.0.0",
+
+        options: {
+        },
+
+        _create: function(){
+            var that = this,
+                control = this.element;
+
+            if (control.hasClass('text')) {
+                this.initTextInput(control, that);
+            } else if (control.hasClass('password')) {
+                this.initPasswordInput(control, that);
+            } else if (control.hasClass('checkbox') || control.hasClass('radio') || control.hasClass('switch')) {
+                this.initCheckboxInput(control, that);
+            } else if (control.hasClass('file')) {
+                this.initFileInput(control, that);
+            }
+        },
+
+        initCheckboxInput: function(el, that) {
+        },
+
+        initFileInput: function(el, that){
+            var button, input, wrapper;
+            wrapper = $("<input type='text' id='__input_file_wrapper__' readonly style='z-index: 1; cursor: default;'>");
+            button = el.children('.btn-file');
+            input = el.children('input[type="file"]');
+            input.css('z-index', 0);
+            wrapper.insertAfter(input);
+            input.attr('tabindex', '-1');
+            //button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            input.on('change', function(){
+                var val = $(this).val();
+                if (val != '') {
+                    wrapper.val(val);
+                }
+            });
+
+            button.on('click', function(){
+                input.trigger('click');
+            });
+        },
+
+        initTextInput: function(el, that){
+            var button = el.children('.btn-clear'),
+                input = el.children('input[type=text]');
+
+            //console.log(button.length);
+            //button = el.children('.btn-clear');
+
+            if (button.length == 0) return;
+
+            button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            button.on('click', function(){
+                input = el.children('input');
+                if (input.prop('readonly')) return;
+                input.val('');
+                input.focus();
+                that._trigger("onClear", null, el);
+            });
+
+            if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
+        },
+
+        initPasswordInput: function(el, that){
+            var button = el.children('.btn-reveal'),
+                input = el.children('input[type=password]');
+            var wrapper;
+
+            if (button.length == 0) return;
+
+            button.attr('tabindex', '-1');
+            button.attr('type', 'button');
+
+            button.on('mousedown', function(e){
+                input.attr('type', 'text');
+                //e.preventDefault();
+
+//                wrapper = el.find(".__wrapper__").length == 0 ? $('<input type="text" class="__wrapper__" />') : el.find(".__wrapper__");
+//
+//                input.hide();
+//                wrapper.appendTo(that.element);
+//                wrapper.val(input.val());
+//
+//                that._trigger("onPasswordShow", null, that.element);
+            });
+
+            button.on('mouseup, mouseleave, blur', function(e){
+                input.attr('type', 'password').focus();
+                //e.preventDefault();
+
+
+//                input.show().focus();
+//                wrapper.remove();
+//
+//                that._trigger("onPasswordHide", null, that.element);
+            });
+
+            if (!input.attr("disabled")) input.on('click', function(){$(this).focus();});
+        },
+
+        _destroy: function(){
+
+        },
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    });
+
+    $.widget("metro.inputTransform", {
+
+        version: "1.0.0",
+
+        options: {
+            transformType: "text"
+        },
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+                inputType;
+
+
+            var checkTransform = element.parent().hasClass("input-control");
+            if (checkTransform) return;
+
+            inputType = element.get(0).tagName.toLowerCase();
+
+            if (inputType == "textarea") {
+                this.options.transformType = "textarea";
+            } else if (inputType == "select") {
+                this.options.transformType = "select";
+            } else {
+                if (element.data('transformType') != undefined) {
+                    this.options.transformType = element.data('transformType');
+                } else {
+                    this.options.transformType = element.attr("type");
+                }
+            }
+
+            var control = undefined;
+
+            switch (this.options.transformType) {
+                case "password": control = this._createInputPassword(); break;
+                case "file": control = this._createInputFile(); break;
+                case "checkbox": control = this._createInputCheckbox(); break;
+                case "radio": control = this._createInputRadio(); break;
+                case "switch": control = this._createInputSwitch(); break;
+                case "select": control = this._createInputSelect(); break;
+                case "textarea": control = this._createInputTextarea(); break;
+                case "search": control = this._createInputSearch(); break;
+                case "email": control = this._createInputEmail(); break;
+                case "tel": control = this._createInputTel(); break;
+                case "number": control = this._createInputNum(); break;
+                default: control = this._createInputText();
+            }
+
+            control.inputControl();
+        },
+
+        _createInputTextarea: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("textarea");
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.appendTo(wrapper);
+            wrapper.insertBefore(element);
+
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSelect: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("select");
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.val(element.val()).appendTo(wrapper);
+            wrapper.insertBefore(element);
+
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSwitch: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("switch");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputCheckbox: function(){
+            console.log('checkbox!');
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("checkbox");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputRadio: function(){
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass("radio");
+            var label  = $("<label/>");
+            var button = $("<span/>").addClass("check");
+            var clone = element.clone(true);
+            var parent = element.parent();
+            var caption = $("<span/>").addClass("caption").html( element.data('caption') != undefined ? element.data('caption') : "" );
+
+            label.appendTo(wrapper);
+            clone.appendTo(label);
+            button.appendTo(label);
+            caption.appendTo(label);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _createInputSearch: function(){
+            return this._createInputVal("text", "btn-search");
+        },
+
+        _createInputNum: function(){
+            return this._createInputVal("number", "btn-clear");
+        },
+
+        _createInputTel: function(){
+            return this._createInputVal("tel", "btn-clear");
+        },
+
+        _createInputEmail: function(){
+            return this._createInputVal("email", "btn-clear");
+        },
+
+        _createInputText: function(){
+            return this._createInputVal("text", "btn-clear");
+        },
+
+        _createInputPassword: function(){
+            return this._createInputVal("password", "btn-reveal");
+        },
+
+        _createInputFile: function(){
+            return this._createInputVal("file", "btn-file");
+        },
+
+        _createInputVal: function(name, buttonName) {
+            var element = this.element;
+
+            var wrapper = $("<div/>").addClass("input-control").addClass(name);
+            var button = $("<button/>").addClass(buttonName);
+            var clone = element.clone(true);
+            var parent = element.parent();
+
+            clone.appendTo(wrapper);
+            button.appendTo(wrapper);
+
+            wrapper.insertBefore(element);
+            element.remove();
+
+            return wrapper;
+        },
+
+        _destroy: function(){},
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    });
+
+
+
+
+/* To add touch support for element need create listeners for component dom element
+ if (hasTouch) {
+ element.addEventListener("touchstart", touch2Mouse, true);
+ element.addEventListener("touchmove", touch2Mouse, true);
+ element.addEventListener("touchend", touch2Mouse, true);
+ }*/
+ 
+
+
+    $.widget("metro.metroSlider", {
+
+        version: "1.0.2",
+
+
+
+        options: {
+            position: 0,
+            accuracy: 0,
+            color: 'default',
+            completeColor: 'default',
+            markerColor: 'default',
+            colors: [],
+            showHint: false,
+            sliderActive: false,
+            change: function(value, slider){},
+            changed: function(value, slider){},
+            min: 0,
+            max: 100,
+            animate: true,
+
+            _slider: {
+                vertical: false,
+                offset: 0,
+                length: 0,
+                marker: 0,
+                ppp: 0,
+                start: 0,
+                stop: 0
+            }
+        },
+
+
+        _create: function(){
+            var that = this,
+                element = this.element,
+
+                o = this.options,
+                s = this.options._slider;
+
+            if (element.data('accuracy') != undefined) {
+                o.accuracy = element.data('accuracy') > 0 ? element.data('accuracy') : 0;
+            }
+            if (element.data('animate') != undefined) {
+                o.animate = element.data('animate');
+            }
+            if (element.data('min') != undefined) {
+                o.min = element.data('min');
+            }
+            o.min = o.min < 0 ? 0 : o.min;
+            o.min = o.min > o.max ? o.max : o.min;
+            if (element.data('max') != undefined) {
+                o.max = element.data('max');
+            }
+            o.max = o.max > 100 ? 100 : o.max;
+            o.max = o.max < o.min ? o.min : o.max;
+            if (element.data('position') != undefined) {
+                o.position = this._correctValue(element.data('position') > this.options.min ? (element.data('position') > this.options.max ? this.options.max : element.data('position')) : this.options.min);
+            }
+            if (element.data('color') != undefined) {
+                o.color = element.data('color');
+            }
+            if (element.data('completeColor') != undefined) {
+                o.completeColor = element.data('completeColor');
+            }
+            if (element.data('markerColor') != undefined) {
+                o.markerColor = element.data('markerColor');
+            }
+            if (element.data('colors') != undefined) {
+                o.colors = element.data('colors').split(",");
+            }
+            if (element.data('showHint') != undefined) {
+                o.showHint = element.data('showHint');
+            }
+
+            s.vertical = element.hasClass("vertical");
+
+            this._createSlider();
+            setTimeout(function (_this, _that, _element) {
+                _this._initPoints();
+                _this._placeMarker(o.position);
+
+                addTouchEvents(_element[0]);
+
+                _element.children('.marker').on('mousedown.metroSlider', function (e) {
+                    e.preventDefault();
+                    _that._startMoveMarker(e);
+                });
+
+                _element.on('mousedown.metroSlider', function (e) {
+                    e.preventDefault();
+                    _that._startMoveMarker(e);
+                });
+            }, 0, this, that, element);
+
+        },
+
+        _startMoveMarker: function(e){
+            var element = this.element, o = this.options, that = this, hint = element.children('.hint');
+            that.sliderActive = true;
+            $(document).on('touchend.metroSlider', function () {
+				$(document).off('mousemove.metroSlider');
+				$(document).off('mouseup.metroSlider');
+				element.data('value', that.options.position);
+				element.trigger('changed', that.options.position);
+				o.changed(that.options.position, element);
+				if (!element.hasClass('permanent-hint')) {
+					hint.css('display', 'none');
+                }
+            });
+			$(document).on('mousemove.metroSlider', function (event) {
+                that._movingMarker(event);
+                if (!element.hasClass('permanent-hint')) {
+                    hint.css('display', 'block');
+                }
+            });
+            $(document).on('mouseup.metroSlider', function () {
+                that.sliderActive = false;
+                $(document).off('mousemove.metroSlider');
+                $(document).off('mouseup.metroSlider');
+                element.data('value', that.options.position);
+                element.trigger('changed', that.options.position);
+                o.changed(that.options.position, element);
+                if (!element.hasClass('permanent-hint')) {
+                    hint.css('display', 'none');
+                }
+            });
+
+
+            this._initPoints();
+
+            this._movingMarker(e)
+        },
+
+        _movingMarker: function (event) {
+            var cursorPos,
+                percents,
+                valuePix,
+
+                vertical = this.options._slider.vertical,
+                sliderOffset = this.options._slider.offset,
+                sliderStart = this.options._slider.start,
+                sliderEnd = this.options._slider.stop,
+                sliderLength = this.options._slider.length,
+                markerSize = this.options._slider.marker;
+
+            if (vertical) {
+                cursorPos = event.pageY - sliderOffset;
+            } else {
+                cursorPos = event.pageX - sliderOffset;
+            }
+
+            if (cursorPos < sliderStart) {
+                cursorPos = sliderStart;
+            } else if (cursorPos > sliderEnd) {
+                cursorPos = sliderEnd;
+            }
+
+            if (vertical) {
+                valuePix = sliderLength - cursorPos - markerSize / 2;
+            } else {
+                valuePix = cursorPos - markerSize / 2;
+            }
+
+            percents = this._pixToPerc(valuePix);
+
+            this._placeMarker(percents);
+
+            this.options.position = percents;
+
+            this.options.change(Math.round(percents), this.element);
+        },
+
+        _placeMarker: function (value) {
+            var size, size2, o = this.options, colorParts = 0, colorIndex = 0, colorDelta = 0,
+                marker = this.element.children('.marker'),
+                complete = this.element.children('.complete'),
+                hint = this.element.children('.hint'),
+                oldPos = this._percToPix(this.options.position);
+
+            colorParts = o.colors.length;
+            colorDelta = o._slider.length / colorParts;
+
+            if (this.options._slider.vertical) {
+                var oldSize = this._percToPix(this.options.position) + this.options._slider.marker,
+                    oldSize2 = this.options._slider.length - oldSize;
+                size = this._percToPix(value) + this.options._slider.marker;
+                size2 = this.options._slider.length - size;
+                this._animate(marker.css('top', oldSize2),{top: size2});
+                this._animate(complete.css('height', oldSize),{height: size});
+                if (colorParts) {
+                    colorIndex = Math.round(size / colorDelta)-1;
+                    complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
+                }
+                if (o.showHint) {
+                    hint.html(Math.round(value)).css('top', size2 - hint.height()/2);
+                }
+            } else {
+                size = this._percToPix(value);
+                this._animate(marker.css('left', oldPos),{left: size});
+                this._animate(complete.css('width', oldPos),{width: size});
+                if (colorParts) {
+                    colorIndex = Math.round(size / colorDelta)-1;
+                    complete.css('background-color', o.colors[colorIndex<0?0:colorIndex]);
+                }
+                if (o.showHint) {
+                    this._animate(hint.html(Math.round(value)).css('left', oldPos - hint.width() / 2), {left: size - hint.width() / 2});
+                }
+            }
+
+        },
+
+        _animate: function (obj, val) {
+            if(this.options.animate) {
+                obj.stop(true).animate(val);
+            } else {
+                obj.css(val);
+            }
+        },
+
+        _pixToPerc: function (valuePix) {
+            var valuePerc;
+            valuePerc = valuePix * this.options._slider.ppp;
+            return this._correctValue(valuePerc);
+        },
+
+        _percToPix: function (value) {
+            if (this.options._slider.ppp === 0) {
+                return 0;
+            }
+            return value / this.options._slider.ppp;
+        },
+
+        _correctValue: function (value) {
+            var accuracy = this.options.accuracy;
+            var max = this.options.max;
+            var min = this.options.min;
+            if (accuracy === 0) {
+                return value;
+            }
+            if (value === max) {
+                return max;
+            }
+            if (value === min) {
+                return min;
+            }
+            value = Math.floor(value / accuracy) * accuracy + Math.round(value % accuracy / accuracy) * accuracy;
+            if (value > max) {
+                return max;
+            }
+            if (value < min) {
+                return min;
+            }
+            return value;
+        },
+
+        _initPoints: function(){
+            var s = this.options._slider, element = this.element;
+
+            if (s.vertical) {
+                s.offset = element.offset().top;
+                s.length = element.height();
+                s.marker = element.children('.marker').height();
+            } else {
+                s.offset = element.offset().left;
+                s.length = element.width();
+                s.marker = element.children('.marker').width();
+            }
+            s.ppp = this.options.max / (s.length - s.marker);
+            s.start = s.marker / 2;
+            s.stop = s.length - s.marker / 2;
+        },
+
+        _createSlider: function(){
+            var element = this.element,
+                options = this.options,
+                complete, marker, hint;
+
+            element.html('');
+
+            complete = $("<div/>").addClass("complete").appendTo(element);
+            marker = $("<a/>").addClass("marker").appendTo(element);
+
+            if (options.showHint) {
+                hint = $("<span/>").addClass("hint").appendTo(element);
+            }
+
+            if (options.color != 'default') {
+                element.css('background-color', options.color);
+            }
+            if (options.completeColor != 'default') {
+                complete.css('background-color', options.completeColor);
+            }
+            if (options.markerColor != 'default') {
+                marker.css('background-color', options.markerColor);
+            }
+        },
+
+        value: function (value) {
+            if (this.sliderActive) return false;
+            value = value > this.options.max ? this.options.max : value;
+            value = value < this.options.min ? this.options.min : value;
+            if (typeof value !== 'undefined') {
+                this._placeMarker(parseInt(value));
+                this.options.position = parseInt(value);
+                //this.options.change(Math.round(parseInt(value)), this.element);
+                return this;
+            } else {
+                return Math.round(this.options.position);
+            }
+        },
+
+        _destroy: function(){},
+
+        _setOption: function(key, value){
+            this._super('_setOption', key, value);
+        }
+    });
+
+    if (typeof METRO_DIALOG == "undefined") {
+        var METRO_DIALOG = false;
+    }
+
+    $.metroDialog = function (params) {
+
+        if (!$.metroDialog.opened) {
+            $.metroDialog.opened = true;
+        } else {
+            return METRO_DIALOG;
+        }
+
+        $.metroDialog.settings = params;
+
+        params = $.extend({
+            icon: false,
+            title: '',
+            content: '',
+            flat: false,
+            shadow: false,
+            overlay: false,
+            width: 'auto',
+            height: 'auto',
+            position: 'default',
+            padding: false,
+            overlayClickClose: false,
+            sysButtons: {
+                btnClose: true
+            },
+            onShow: function(_dialog){},
+            sysBtnCloseClick: function(event){},
+            sysBtnMinClick: function(event){},
+            sysBtnMaxClick: function(event){}
+        }, params);
+
+        var  _overlay, _window, _caption, _content;
+
+        _overlay = $("<div/>").addClass("metro window-overlay");
+
+        if (params.overlay) {
+            _overlay.css({
+                backgroundColor: 'rgba(0,0,0,.7)'
+            });
+        }
+
+        _window = $("<div/>").addClass("window");
+        if (params.flat) _window.addClass("flat");
+        if (params.shadow) _window.addClass("shadow").css('overflow', 'hidden');
+        _caption = $("<div/>").addClass("caption");
+        _content = $("<div/>").addClass("content");
+        _content.css({
+            paddingTop: params.padding, // +32
+            paddingLeft: params.padding,
+            paddingRight: params.padding,
+            paddingBottom: params.padding
+        });
+
+        if (params.sysButtons) {
+            if (params.sysButtons.btnClose) {
+                $("<button/>").addClass("btn-close").on('click', function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    $.metroDialog.close();
+                    params.sysBtnCloseClick(e);
+                }).appendTo(_caption);
+            }
+            if (params.sysButtons.btnMax) {
+                $("<button/>").addClass("btn-max").on('click', function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    params.sysBtnMaxClick(e);
+                }).appendTo(_caption);
+            }
+            if (params.sysButtons.btnMin) {
+                $("<button/>").addClass("btn-min").on('click', function(e){
+                    e.preventDefault();
+                    e.stopPropagation();
+                    params.sysBtnMinClick(e);
+                }).appendTo(_caption);
+            }
+        }
+
+        if (params.icon) $(params.icon).addClass("icon").appendTo(_caption);
+        $("<div/>").addClass("title").html(params.title).appendTo(_caption);
+
+        _content.html(params.content);
+
+        _caption.appendTo(_window);
+        _content.appendTo(_window);
+        _window.appendTo(_overlay);
+
+        if (params.width != 'auto') _window.css('width', params.width);
+        if (params.height != 'auto') _window.css('height', params.height);
+
+        _overlay.hide().appendTo('body').fadeIn('fast');
+
+        METRO_DIALOG = _window;
+
+        _window
+            .css("position", "fixed")
+            .css("z-index", parseInt(_overlay.css('z-index'))+1)
+            .css("top", ($(window).height() - METRO_DIALOG.outerHeight()) / 2 )
+            .css("left", ($(window).width() - _window.outerWidth()) / 2)
+        ;
+
+        addTouchEvents(_window[0]);
+
+        if(params.draggable) {
+            _caption.on("mousedown", function(e) {
+                $.metroDialog.drag = true;
+                _caption.css('cursor', 'move');
+
+                var z_idx = _window.css('z-index'),
+                    drg_h = _window.outerHeight(),
+                    drg_w = _window.outerWidth(),
+                    pos_y = _window.offset().top + drg_h - e.pageY,
+                    pos_x = _window.offset().left + drg_w - e.pageX;
+
+                _window.css('z-index', 99999).parents().on("mousemove", function(e) {
+                    var t = (e.pageY > 0)?(e.pageY + pos_y - drg_h):(0);
+                    var l = (e.pageX > 0)?(e.pageX + pos_x - drg_w):(0);
+
+                    if ($.metroDialog.drag) {
+                        if(t >= 0 && t <= window.innerHeight - _window.outerHeight()) {
+                            _window.offset({top: t});
+                        }
+                        if(l >= 0 && l <= window.innerWidth - _window.outerWidth()) {
+                            _window.offset({left: l});
+                        }
+                    }
+                });
+                e.preventDefault();
+            }).on("mouseup", function () {
+                    _window.removeClass('draggable');
+                    $.metroDialog.drag = false;
+                    _caption.css('cursor', 'default');
+                });
+        }
+
+        _window.on('click', function (e){
+            e.stopPropagation();
+        });
+
+        if (params.overlayClickClose) {
+            _overlay.on('click', function (e){
+                e.preventDefault();
+                $.metroDialog.close();
+            });
+        }
+
+        params.onShow(METRO_DIALOG);
+
+        $.metroDialog.autoResize();
+
+        return METRO_DIALOG;
+    }
+
+    $.metroDialog.content = function(newContent) {
+        if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
+            return false;
+        }
+
+        if(newContent) {
+            METRO_DIALOG.children(".content").html(newContent);
+            $.metroDialog.autoResize();
+            return true;
+        } else {
+            return METRO_DIALOG.children(".content").html();
+        }
+    }
+
+    $.metroDialog.title = function(newTitle) {
+        if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
+            return false;
+        }
+
+        var _title = METRO_DIALOG.children('.caption').children('.title');
+
+        if(newTitle) {
+            _title.html(newTitle);
+        } else {
+            _title.html();
+        }
+
+        return true;
+    };
+
+    $.metroDialog.autoResize = function () {
+        if(!$.metroDialog.opened || METRO_DIALOG == undefined) {
+            return false;
+        }
+
+        var _content = METRO_DIALOG.children(".content");
+
+        var top = ($(window).height() - METRO_DIALOG.outerHeight()) / 2;
+        var left = ($(window).width() - METRO_DIALOG.outerWidth()) / 2;
+
+        METRO_DIALOG.css({
+            width: _content.outerWidth(),
+            height: _content.outerHeight(),
+            top: top,
+            left: left
+        });
+
+        return true;
+    };
+
+    $.metroDialog.close = function () {
+        if(!$.metroDialog.opened || !METRO_DIALOG) {
+            return false;
+        }
+
+        $.metroDialog.opened = false;
+        var _overlay = METRO_DIALOG.parent(".window-overlay");
+        _overlay.fadeOut(function () {
+            $(this).remove();
+            METRO_DIALOG = false;
+        });
+
+        return false;
+    }
+})(jQuery);