commit 776d331412dc0c68bf47d9cc58516eeabfd6712b
Author: boris <boris@storbox.nohost.me>
Date:   Mon Aug 14 01:21:46 2023 +0200

    Init

diff --git a/webfiles/Reports/.placeholder.txt b/webfiles/Reports/.placeholder.txt
new file mode 100644
index 0000000..e69de29
diff --git a/webfiles/css/colours.css b/webfiles/css/colours.css
new file mode 100644
index 0000000..2bfeddc
--- /dev/null
+++ b/webfiles/css/colours.css
@@ -0,0 +1,40 @@
+/*	-------------------------------------------------------------------
+ * 	Colours for the CumulusMX Alternative Interface
+ * 	Produced using w3Schools colour generator
+ *
+ * 	Key Colour: #4e5b31
+ *
+ * 	Theme modified to change font 'color's to either lightest or darkest
+ * 	theme colour.  Also modified names for text, borders & hover colours.
+ * 	I have added a few extras. Not all are used.
+ * 	Neil Thomas
+	------------------------------------------------------------------*/
+
+/*	Check that your theme is named as shown  below */
+
+.w3-theme-white {color:#2e5473; background-color:#FFFFFF;}
+.w3-theme-l5 {color:#2e5473; background-color:#f7fafc;}
+.w3-theme-l4 {color:#2e5473; background-color:#e4edf4;}
+.w3-theme-l3 {color:#2e5473 ; background-color:#c9dbe9;}
+.w3-theme-l2 {color:#2e5473 ; background-color:#aec9df;}
+.w3-theme-l1 {color:#2e5473 ; background-color:#93b7d4;}
+.w3-theme-d1 {color:#f7fafc ; background-color:#6195c0;}
+.w3-theme-d2 {color:#f7fafc ; background-color:#4a86b7;}
+.w3-theme-d3 {color:#f7fafc ; background-color:#4075a1;}
+.w3-theme-d4 {color:#f7fafc ; background-color:#37658a;}
+.w3-theme-d5 {color:#f7fafc ; background-color:#2e5473;}
+
+.w3-theme-light {color:#2e5473 ; background-color:#f7fafc;}
+.w3-theme-dark {color:#f7fafc ; background-color:#2e5473;}
+.w3-theme-action {color:#f7fafc ; background-color:#2e5473;}
+
+.w3-theme {color:#f7fafc ; background-color:#78a5c9;}
+.w3-theme-txt {color:#78a5c9;}
+.w3-theme-bdr {border-color:#78a5c9;}
+.w3-theme-d5-bdr {border-color:#2e5473;}
+.w3-theme-l1-bdr {border-color:#f7fafc;}
+
+.w3-theme-hvr:hover {color:#f7fafc; background-color:#78a5c9;}
+.w3-theme-d5-hvr:hover {color:#f7fafc; background-color:#2e5473;}
+.w3-theme-txt-hvr:hover {color:#78a5c9;}
+.w3-theme-bdr-hvr:hover {border-color:#78a5c9;}
diff --git a/webfiles/css/gauges.css b/webfiles/css/gauges.css
new file mode 100644
index 0000000..ed4068b
--- /dev/null
+++ b/webfiles/css/gauges.css
@@ -0,0 +1,101 @@
+/* CSS for SteelSeries Gauges
+	* Mark Crossley 		| modified by Neil Thomas
+	* v2.5.0 - 03 Dec 2014	| Feb 2021
+	*/
+
+.gauge {
+    position: relative;
+}
+
+.odo {
+    position: absolute;
+    top: 67%;
+    left: 50%;
+    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+}
+.gaugeSmall {
+    max-width:181px;
+    max-height: 181px;
+    width:100%;
+    height:100%;
+}
+.at-gaugeSmall {
+	width: 221px;
+	margin-left:8px;
+	margin-right:8px;
+}
+
+.gaugeMedium {
+    max-width: 221px;
+    max-height:221px;
+}
+.at-gaugeMedium {
+	width: 261px;
+	margin-left:8px;
+	margin-right:8px;
+}
+
+.gaugeLarge {
+    max-width:261px;
+    max-height:261px;
+    width:100%;
+    height:100%;
+}
+
+.at-gaugeLarge {
+	width:301px;
+	margin-left:8px;
+	margin-right:8px;
+}
+
+@media screen and (max-width:550px) {
+	.at-gaugeSmall { width:100%; }
+	.at-gaugeMedium{ width:100%;}
+}
+
+@media screenand (max-width:640px) {
+	.at-gaugeLarge { width:100%;}
+	}
+
+@font-face {
+	font-family: 'LCDMono2Ultra';
+	src: url('data:font/woff;charset=utf-8;base64,d09GRgABAAAAACfoABAAAAAAgPwAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABsAAAAcYArYUUdERUYAAAGIAAAAHQAAACAAqAAET1MvMgAAAagAAABLAAAAYJT4XRdjbWFwAAAB9AAAATkAAAH6pXE4cWN2dCAAAAMwAAAAFAAAABQDbQUIZnBnbQAAA0QAAAGxAAACZQ+0L6dnYXNwAAAE+AAAAAgAAAAIAAAAEGdseWYAAAUAAAAeOAAAc2BlVBCpaGVhZAAAIzgAAAAxAAAANgH3tINoaGVhAAAjbAAAACAAAAAkEykMq2htdHgAACOMAAAA3QAAAeod1CXsbG9jYQAAJGwAAADnAAAA+EvuZmZtYXhwAAAlVAAAACAAAAAgAasCam5hbWUAACV0AAABCAAAAeYnykPLcG9zdAAAJnwAAAEOAAAByGYnCSZwcmVwAAAnjAAAAFwAAABkC/ydrHjaY2BgYGQAgpOd+YYg+rTDln4oPQEAQ1oGkQB42mNgZGBg4ANiCQYQYGJgBMIqIGYB8xgACYgArQAAAHjaY2Bh6WecwMDKwMA6i9WYgYFRFUIzL2BIYxJiAAIWTgaswDGnpJjhAIPCbxa2tH9pDAxsjxmWAoUZQXJsaWxAEQYFBkYAGk8L9wB42mNgYGBmgGAZBkYGEPgC5DGC+SwMN4C0EYMCkCXEoMSgwqDDYM8QyxDPUMVQw7CAYRXDZoZdjMEKXAoiCpIKsgpqCvoKVgrxikoPGH6z/P8P1KsA1KPOoMfgCNSTCNWziWEnY5ACg4IwUI8MWI8lVA/j////H/9/9P/B//v/7/2/+//O/9v/d/xf/3/F/8X/eR4kPIh4EPIg6IHXA6cHlg9E7wcrlLGWQd1MImBkY4BrZGQCEkzoCoBBwsLKAFTGzsHJxc3DwMvHLyAoJCwiKiYuISklLSMrxyCvoKikrKKqpq6hqaWto6unb2BoZGxiamZuYWllzWDDYGtn7+Do5Ozi6ubu4enl7ePr5x8QGBQcEhrGEE6Sa0vRBSJjkXkFEUAiLj47Jy+fIRciVFRcXkHIVAA2ElGDAAAAAAAA+gD6APgA/AD0APYBEwCBAQ942l1Ru05bQRDdDQ8DgcTYIDnaFLOZkALvhTZIIK4uwsh2YzlC2o1c5GJcwAdQIFGD9msGaChTpE2DkAskPoFPiJSZNYmiNDs7s3POmTNLypGqd2m956lzFkjhboNmm34npNpFgAfS9Y1GRtrBIy02M3rlun2/j8FmNOVOGkB5z1vKQ0bTTqAW7bl/Mj+D4T7/yzwHg5Zmmp5aZyE9hMB8M25p8DWjWXf9QV+xOlwNBoYU01Tc9cdUyv+W5lxtGbY2M5p3cCEiP5gGaGqtjUDTnzqkej6OYgly+WysDSamrD/JRHBhMl3VVC0zvnZwn+wsOtikSnPgAQ6wVZ6Ch+OjCYX0LYkyS0OEg9gqMULEJIdCTjl3sj8pUD6ShDFvktLOuGGtgXHkNTCozdMcvsxmU9tbhzB+EUfw3S/Gkg4+sqE2RoTYjlgKYAKRkFFVvqHGcy+LAbnU/jMQJWB5+u1fJwKtOzYRL2VtnWOMFYKe3zbf+WXF3apc50Whu3dVNVTplOZDL2ff4xFPj4XhoLHgzed9f6NA7Q2LGw2aA8GQ3o3e/9FadcRV3gsf2W81s7EWAAAAAAEAAf//AA942u1dD5Ab5XXfb3clrf7vrv7/O51Opzvbl5MwAh/rs7H5E5KCfSGuh3Ey4NiEuuTOh6EMf1xQPR7KOIlHp3Ps6QRwnTRlEoZhmF3pjAklYJrSDGk8pPVgQlsmTWmaeJp/dVMu5/jkvvftrrSnk45zmpC0oxtb9+mtdrV633u/93vve9+JYZmDDMO9Zt/FcIyDWctUGYYZmuEJ4+WHVEdhhtARUYWCypyZ4Tkq50XNRoZmOPpMc5Ih5rLVRSkj5TJS5iB39fxN7Mr5N+275h4/aNsC1+PIjfAg0PdwMn6mxlQ5eBeiigXVfUbzsmdVW+8ZSXNwZ1UeBwIM3KLqwrGPO6tJZEhdE39hw47ZIBMacvEqn1e9ebwNwTanekXNDb94sWbj3YEhVRBrDsEbwNusuUyJDyXsCd7mEFxury9v/Kgb40Rz2SRZ5RTVLWnEqSiqIFftrF9RFM3ngCMeBT5ebiTi4AIjEc54JDdWJqauGyyPD5aTm6d231wuwQ85TEKlUv0/Hma/wg6VSvNvPMywzM/5bdx2u52xMW7mMka1wWcuzrCEcYEihcuJ6qGadfKMA3TpJaBPRpI1zq7g2wY2kIif5Ojjz+OfviP1KGFSj94R/zR/6m/uu8/8Bzp2Xfw5w/DbQcf4PkEmzmSZlUyBuZIZZa4h32OqAdC4JpKzqvdyNVtQ00UtSc4S9dqC6jijOWEK7KhtFwycojYEtzEMwxzKBmE2BkV1BY77Qdhf0FbAryFRXYWiPBweFrUROEWBoSKqa1G8Bl6ypqCtZc9q1xnTd+fszfr02fOqM6/aRc3FzeHbObi5xlG1P68O59V+UVsBkwoXHrJZDq7Jq0peXSNqa+GgAu8Kv/rFWq5/CKZ5hVgbXDEMA5CsMiV5lLAbRbvD6erPDa5YNTScXzOirM23/FBLcNgluWpjPTD3qkva6OI5AYwlGIon+iOK2i+rYUV1SmpM0Vbl4JXJbARfOSRV/X0rcbRCrg1EC5fhiwelakb8AArzclUKXImjNZK6WtFGhmF+e6+A52uljc5UWr68eNXouvV4kiJXe66+Bl7KaGJAkms2/8pRlGeljT6GZ93h2EBh9RVXrd9wDUqTck3IfOBqGF62mqMmYljoSDEC/xwZHDiy3EgGHgdhYLFf+oJsguBYNzIPX57kp+3K9LhS2Vre+sCfb50o16/zVLZMTm8RpskL41R29boyHBeUysS6smd6y+7KltxoeUKZHuanx/kyEVKlUqrEFckXwQ92PDw/Wjp4sATPS/rDwwcP/vIJ/VjzRX44WN9iSPkTyVIpWWIIOcbfwM7YPWDPKfQadBknIpEd/UXj+LOagwIPoXdPjiWnx5PT/KvfLJW+uQ9cgTkHmLPD8AeJiTD/wFQlijpR0+RrvNMhDGkMWCpT0Hiw1FirpTLUUhlR4y2W+snZATjqBnGNMA4daDjeCQOQ2E2JCyVVeEHvZ3s/m7X7JFlR7UoVXogjl8KcYAjHo1maJkhqhLO7msaIOGADW1R5qcq6JbQgpzwjeH2iDHMOHz1Bio0J1ec6QB/P3bR3jzIdv2lq9+iRsSllclrZVl43Xh4lApvZD0pmq2wGtb1/fiPo3nYWJgYgpL3ObKbOAme0EOhMDAVAZx7QmaegiRad/eHsDbrOPHk1lFc9oiaCc4ZELWCz6Mwj1ryeAGhIFGt+uNYQSmRTEkZJFV5g0ZmsVOGFOAqDzjxevygHQuGmzrx+OdzQWcAjyTMOl5uT0EFEqSr4qIuGZM0ZpIi6gTT1BJorGvrLniuPTpTXbZtWxsvKLaNH7r9pygWusOnBkqkhNNz989817Hb+u6AvMsLu4BK80NDXRyi+ixTfU4DvgLXugioXZxz68+DlVJWA9yEerRmVp4Vgno9zdqfHT6dVYyEcaR6IP9S2i+DV9GZ1jx2kEjISGDkauvH2yIHR4NHPB4/mAgeyod/7dKTI7jhw7eMF4n2icPTZo9cfePto4YnLYF4PkoPcN/i3GveZpfcZLmoEAkKA3hTeCqMRfG9BwvfWVRTRcYU+6ndwcPrw5PThz0Qqu8OVyyKVyUjFQyXUyZ85um/f0X3smidKpSf2oWOjXRFy6OIB9hXyENxJLwO+1vBlG9UFxzMJ0IWdurMNZsNBDq0pTwb2kgfoFQh5EsDvWTjfggXudligB0rypDg9Lk7vx6nDG2Av/gQm646GXVOOg4EXwy2clR0hRc5JAqToIHIPmd4/WD9Enh0kex7rqd/9Nrup/rP5H3DricRG356fgXPtF9+F691q8ZMUkyWP6fgC1zyrRgpaAKNrf0ElcH8IMBgTeYiPRGxGWk5UnSbxcRQ0J4ciahMJOBrFQ0mQxUS1B8d9IEyIagbHaZCnC1oG2FFuWaBlRtBoXs3k1agIV55TMyJcaG45QAZn1GLRNAySYi2RzOiSHlPShxKIsiakRWOJZE8609cxyrYCGwdm56VRFxxeiwJG1nxiIAIOofXEgIT5FTUtaamwgmGvGoxn8aSEpIV6MVh6JbxiCkQRqca641n0/gBcshct2Rr3aDDMBOgjschdENFGp1yjU+NK+ZYKeWFiqn7DtjL5q92V+g1kWClPGgenidAavyDIWSBi4THgvjHAVAVshWdcjMh8mam6qPVJBdVzRvPxBvESYODGgR+MWTZm9BOzogmpPtV2ktd8ZM6nOk/yqg3mx+YB3TvFmuD0wQAkblPiRwl7wmYXnG6Pz9/ASs3mNKbAjVPAuUBhHkllkfJqDhGe+SXVq+hBlXPo7EB/JDH5Z8P7hC2VybFp5+bp3Zun+YdKp+sv3HXho+zV+/bNv1niXmFXAC5+Zx/4xzvgH3voZxYYH2Wjvcy/6bEE3PysGixQKhovaGF0k0zDTcD8k2D+PWjphplrfYY2ds7GdG0Q0AYD2uDsoA3+JAaXVfqRRF7tyYOPUKvuoTbO0jCL1thUA8MbauAIhAu70+3zo8EkgPE5PF5RCgRD4bjOsIDrgeEdlyNCNNVL4VkMgupYMCw1LlVdHh8aYljW3Ck0tUE0JpLLRHRWolsbZ7G21CfKu0frPyNJ8vKbFy7wlQl+amiavDQxXb/epZvd9aSyFtmVjz0GJnRr/Rfnz9uupaSofpdJo+ofNe3Lxsig6w0LsOicoWkEd6lAAcldAIQETfeYcVyVUb1hQJGAaCANCEOirvYYjGMFRCEt3Youch7VLItw8hyqOga/ZLEWkGNgfGGxFgonYACSqClJooQ9gWEbcWEBFgRkcG5RUaOY6YEmY7IWQbMMSzUh6E/hJGDsjqOXY3BSARCotwdB35rDDZK4glG96dbcIueWp8m74MgucOhfgKbdH5sij4yX6yVyC4R4cOx1MCflRqCf/1srIW26MlhzCh6ubOqaDOiY31BvdDHeg0VjUudHwoQyoEyqX1TDOJbhuFygswCiEIoCOCMFLcQ1idX47McauM41cB2uSxDXd85GKa43WRensy74tQyyxW70oH+00qrG/PDgITXWZnfjTHCS6gD1A8cC/qrKEmUKNFOp+pzIs7SwH44FYa5wZqo2Sr6Qp+opR3NedElqfWViY9k1TV4Eu7+WlMYqE2NT7s1T42Nl7iXyMqj9GpodzH9DT6dL3EtmXm2/eBbm4k46F4irOsZ8i6mKaPmeBrhAXFWlohY0YEY40wlf1AGMTEL+NUYTHPnXqOZve7eOuvWpDgjaJ1UBwvV7oc1xu7OJNUSzm4CbTEgmlgQiPhNLPCLGLQNLgOMYWOKiWGKmdI2oxWVsC4w7YitDzpW6563RP7uZJmj1G0KcWv/3+jXfKgOklOvXkEMUSoy0jK1yiQv123XWb981t9DQgdcwOdDpcAuvuX0Rr1FTyBZ1eoOZFLc4k0LaAcihZWBocpcGUdk+y7USFbtOVOxzjaOoWiAqoNa+BlF5YcOt7/7y15F66UaPRKWVpCyRgwGxkJCh60lYIBLFcY8EPCVGcSpNywN90nNBfzwZ6qUcJCOriQY/Ac6iBSLgF6y7F50llgKbEJTWPK6JYdbJzo3df8/oVHIM0u/DN2OkgOTcVSYvj1fq12F6PjkNRGVoFFK+qfZpXjMJb9AUrM0xwzDnucac9+vsuIFoMs44JAZwDO6bRrvLVhdHkCobdzcSgBxqOE0O7cvWp0pl9p2J8nySvJL8YXB0O5Dnc/Ov6aj67dPkw/WPY63K0Y4/MytJtbOlrfpViPRCA0TCLKr9OMbyVUZUB3GcA3mugEUurHpdApEG+xxs2OegCBdaHpHuEWvpnhwM+sRapm9Ql/SbkhUosRBptE8sW70nkW5YZ5NJa5EoLRmogTZ22i9pQcgx1ZysZZMK2m0t3htaqRutlhhQFpltzc324nFqt5ow0J5acx1icDuC7UH7BZiyXwLRbmPGlhDdGcPcaFmOJiPqlKKxVtOpJTNpwLUo2AhkyEmuPYYtDspLJFvNUsgyMqoqvMCCYT1KFV6Ioz4Tw9olWqQWS/T0NayEgOsC/IGNPMfaHG6PaSbA9IF21QQXTbPALGZ8YthJTSQp1YJxv4FgRo5FuVZKZ19VG03AqFlQLmzG+LY20Kix5Cg83WKgFfDdFzFICWXyNUCxD5K8cnjvWBlmf/fYAxD/O076wioM5PfkEXh4nbueznnOrFk1CuuBNoX1nKWuQR4JlMfFykqxMhEAGvjQQ6USe6NRPGDJvRcPsN+Fa2P+1ssQLOjAZQWe8fBINIY0gV7WRi9LqxfGVe8twvWel6fGxWm9kkFe0y/Kkl3MDPsjW5XeL16zcavuNrdKRiA6ZDksUjjIrvSxTVcFj6bJ6tBVFfaW0z+p72U/c5p8qb73JwzLHANAn+G+RK+btGQBJpo3Sh46X9Zn6BiQhclK/RqX4Y14j1zOqN1c4r3mYLYdBOJZwJElu66qHEvXX7/zquDX0sdmyIGfnK5v5x4gB+rbT8PVDsO9vkT9FNeEQkyC+Uum6sTYYyvgTRM12Vge0leCYOAVtQi8ZQyS5FQrWkcgLQxDWhhzQFoYP8nUwpFYXKdh4bjhCz4w4hM24nAKHr+IWBbxQgbIS3IwhMYeAxgNcAnKzWxAFo47PH4pSIv/RFKjtCqmK85cDQpY6uiHp8gL279Qv2NLebJy/WB5cnD6NjX8aHnr5MgX71fKEAV3l38pLlgmSh49WiKDZP/Bg4he9os/AOwab8Gur+jzqKaKbaCrQyHbQr9MCGN1CLPQMCNz6EDD/mD2is4Qdtssu1watiyY60zVEAEXQ9971pnICaRxJgwuoHOqzag7efSCek3w6ogIKWgA8hUAwpoY9nXEQcQ/s8akA6BeZRoMFC2rK60ASC0kG9u5966xsrDpEJA4sULJ2/VOk7wlNh/Zu7MirK3svumhEvvMfsx31rPpfcjgXA38E9mh/fNbSxQf981/j6F8Cn7x99B6i5PxMQEmxqSZHPkTS8UFsvkQBQLVX9StZ4AWoDJgJVkzG0rBII6DHo5WGnuNJT9tsJkiuT2YInncRopkxEEfrtcyJyG/pAWZhk/G82o2r8ZFuOKcmhW1DEcZvqNpPW7Tejy69bhMiRclcAWwmnhGZ0mpniwMQNJrSvpRAubjtpiPC83HgyMvmIoPTcXljSdSPb2ZbH+LmRzXj1pMJBEHE4kqaq+khQWFzntaViiBEpORHJpCStakPjQFOxYk0ooWiqFJ+JJ4VHNDOgxGahgE1oIcBHO4QHtelL5n712j9XMkSb62uzL/7D1vrD0ssM9jPejUFCRxmBcfwipF2b2uPLmu7OMSQO3rvzgP9rCeS5wH2+BWLlGzaFurZs63r1UvTOY4HU0spOeTsyuXQIzf6rJYVfDKSmsp+Hg0nkxnWovBxfbFYBq09aVQ16YH90CutRlo6JGPLCoGs1i0G+anxtnKEgtqv3yC5tzmeqa9nY+Suy0eanHNXuqaCXBN8MhaNJWA6QhytGwKVBR99lfzxmBeTeXVoAhXmVNTopa4RG+EU2uhYEKH8Eg0pUvipqQHJUs4YxXOxVFcqcLJOqo3HDQYikTRSVscdKNLPxyKxHtasp9EEIioLMTQAKJSVQyncYTOmWw4ZwxmXsJ0xy2ryQ4+aWWonb2RFJQjwE7RC8f2dvDCNuTUxqyGec8s8L+LnfPcns5r0+nO2anFCfWg/r46Ybu6iO6HEGqNFMG9/HLH6k1771IqiU2AdofHdKf7oGeKfAhi5FchUXyRlsjfo8KBtdpBeBiy6P2nBo9qIVHL6AbYOZtYoh6wY1Z+vzTeiboYqEe1jPqmWh7pwEcGd+zdMzZtB/2OHhFBr5CCPW83UrAm7dDV2qAdkFcHQZ/rLfpMMhlyRZs40rckKwXWrvWCbrONkLJqCd3umr2aktAUUPseoPa9HFD79MlfX/kv1ZPuXUgIUOlm/fa9442akp7DdcpoLIke0CvXguGEvzkltgwNRFosoWAM6mD+AfPRBplEjnMEN+3ds5a6APZv6PRwG05RuX7d0TIZq7/z+wNrSfLWpeIPMILzSAjOz+/CRM7WiD8NHCIHDY+ImJnFUviDc2KsTNfCiRgck1l99cKCTUunFIYftVtBMlf3lpdSLGO5aamUAs7FURQCUpgGpKQ1pWhdplqYUgRC0eR7phRgHBIt8MoQoUS9AyUsVYP+FF21xiWrRh4RTNH+rcXZgzVvSO98cM9YRdhRmRg7IhlpOimNHXlwR8U1VpnY+WDTcZ/B9RHquLhqoqcKdNFkK+TyZh8m2sBxS53EaAEkyPc5WjzVGzEt0+8wy61AQLzGdBs5onW6bfp025ZVC2UXgR5VqZ3ooYN3mKDm4iio6QWG5pr0jTeXxzfjghH2Xy5aImJ4yxqRbvPfadYBl9XT1CC8bXuats/a3q+eJs0JBqWKkobGpIaaa2yaTWquFUUWVdwitvJuvuKbgrCJKeZ/rjv8wKaKMFYZ37HXWBTyYUFCMHmLYSmIF4trEUY3mBouLouovBcYxH6LYVOU9A66hW6HpZwNpEgcWScucOjpuu52h8Xy1omprXsf+hTxZUv119nYH/fVt36qnd/ZJ+f//jz3NPvi3Py3Gc5S50I9/mMzYuLiSosSmylXoHPKZYmPt8+mf3spF11maBC9dnHtMMSxdeXUzsr45iPmCqUlZOkqoyHLkh9Za1+lRu3rN1ztMkNT22rXpYSm381qF0VROmUemiwd9/ol2Sz7A2UJGdUuDcv6uGjZ2+ocwCYDjmyRLvYB+raNTE+tC05ld96X/UFodH/PEsHpc+Sp+vPnzpEP17d9bn5jS5DqwFX2NrhKl6T8b0jKQkuQparXR905BkTFbxAV2ltj0JSFVpCg4Nhp/l8fWkuuSx8cWmLqyZNkTf3Av154pXXW2/dUPnlJdaoGDnBLLNwtXcNa1sLd/0Uc6JzBRCWz0xKwoBrWOWpSMnssF9S9zcIaWMYyKmoWHrJ0RU058uBmuuq76cElK2ot1RXbgh4guoZErjZwIlTQJL37x13U/MZqEnOGmgnuGwIzoQtJenstLXoDRqjhghZnzbWldi1BZruVgxbYhAUFNjWcV2N58G4tDiwxJmoRZIm3vXuxjdUILVbjREk7ixBw5ITZp4Uwu9Nc1LIEamezW4vBnMLlxqUtcOQZv7mwFZFVHzYZzXgC3qi+viWFsKPDlcBExeGnRe+ms7erV0d2PnDXWNl+9xvKYYF9bhIr1Hoqci3wStwV0nD2lrq0uZL/cNvejyTTx6wg/2LxdJgp09lXLunsUZjBfvg/AMczA/1wPMXRWhq2Ra9ahsPTGU5GcYYBMfUZnpj9pF5DjYpq7CR4q5qw1lBTeXUgj8XTDCDDgKj1XyoypAAHUv0wyIi13syALsmakkGULIUMcC6OskoVTsbRINiGbCJDzFjmGBjML/ohG10GPPRmB1s7Sd6jyDGDEBHXN0EBRvRRZACMSK/A0QBgRK6JEXBUiyTp0ogakDQhtxRKUNYYWSZUPD1Y3FCILQ8uLmwj0XvrXxYW9wvYF+MGkyGbDOSIF9uAR18reGAdK623FPWa3bPJgqW0dcngkcyr6TyYm9YL4JEWtdRvADySKWu5aynwSEonKHiEKVqoKYofvdJzgB/xWE+GIkhI78dVJTAZV6aBIz0dccQxYtCHJdHE7f8x2ed595ElMeWPts8/t63RJIK4Yt3/2Owp61uyp6zN1keDQGB/WB9dCsUGsgLtXxy6pH2Mzf5Fm04hbHPsidaWw3a7Dp1016Ek6w2GHdq3+uB1Zp9hTl+friYGVioL2rYgUptdpRCtsekQXLmaG1ypMz6zh2vB1sH2PVyLtwjeUtZrCq4KLpXoPYgwe9eT4aX3A7bt4DJXybAfcRs8nId51HcOvMFUfeiVQkHli3pbSKigus7Qag3t+aP9IaLqp93TWMIR9d52bLQWC5gAaOFW5g+zBvweZsxLm9dpz7QTANopgkN5xZrHK5s7KQxJACXsCadLL9YsmD+/S6LuIWJ7tOoFTQfpxgrNLuF0COCPuojoIqOLBLdkWrdYbCuzT0+U/+6BY9/sH5seHysLtC2dYtnBg7jub9S3GjZvu/gjsPldC/KkP7XWF3qW7M9tSZQaveiNRKmxo6/DLshVnROlS1gU+Z1LlDpUOrDf3SfqjoOZUkuiZHhdpH2ss3Lh4E20ur+zbFRFaPPHT9fS3jeszD3QvkSyuEiHu2sY/kbL/B8zYpinaFnYwhkL4D7DdktajrxPtZ/kwUjmfKrrJBY1ef1IAI7IcCSER8InmROmOpvhw+6ylCmdDopiboo20nGe8/ikiLF/Q/Tru9lHigEua+4AILRTDDUi+P/7yeHb6xd2lCe3DX+5QIb+y1fP1reVJ3e+wb56BwxnjATy89df+DrZRN6+Y36U28/eaRQMurWj96N2VBM8XknvkzruAwwMhvVopIVSytK1I6wX4BDbGCMdVjWuHd2/M/PDC9kd20bl6BIFhPkaeerQufpXyYfOHapvu3dR8Yhv2esZgRiid7SLxcY2V33LpwOdMkD3AgcctL/SQeQ+sudYtl5emX38jcyxcubY6ezjapbc+1hf/dAFdhib2ccvzL92rn7+3PzpC9z6c+zIhfnTNG6NwPsmGu9b1lcaLDXexvKJyl3eKO82LKsdlfjrkz++m1oWB67IntRszjngjcwJhuVsC6q1VYa1Nf6YBbhhjRfcHkoejO18xkc0Ohbxg45E3qimXoyNlSdvLu9Lk21vRuqP2r7xhfmnT2NFTo8060+zt3xh/n7AmQJ8tqxFpysX7TBrbiGWcMeQXZCDdF1LbzSlFkDMZU5sZC2UyYWJcp33FV7dn63XlWkyC0/tj2UIf3PhVfrHNHxk7NS5+pv8P9HdA+fIynr1FNzL06Dspyx9NM8afu4uEDVIG2dCHftjDG62oD9mOY0vS3WYLWghW9xQxmhuGypEkgNUISN6B0qx0YHiJ9mn77l/j1L/KUltfdJVv/WuN5ESu4S3tjTaTF4ebRLg0ZdoXy4zA3o41tzT7F64p1mHWr0Rdyb9+Fu5/btz+3+Uftz2mbfnf1j/af2fiTg/8zbTRp9/YfiLr0j16VqgT58L9enyteoTCJh4UvWJqnQSxjW3C2mTD7Tnk2AAEr8pkVFShRdY9OlXsAypL4wxx93AsCTZ1Kf1GdXnZauLuIef4Go5goqbBHJc9mlQ15v10y7WXX9n66hyeO9d9ykkdc/9oy+ftw+NztHa0YXvcyr54vkL38c96cwp+NyPMudBfz1Na24McG+5salcN2HITl4BfrvB2FPe7dXt9up2e3W7vbrdXt1ur263V7fbq9vt1e326nZ7dbu9ut1e3W6vbrdXt9ur2+3V7fbqdnt1u+st3V7dLknp9up2e3W7vbrdXt1ur263V7fbq9vt1e326nZ7dbu9ut1e3W6vbrdXt9ur260ddXt1u726/x97dVmiXHyEi9nfoffyPGNZvqpx1LcJ/h3vwqUsY+2aXfd+L2NlrMtYCoSC7ZXUdrD3MvsU6H5biR/VB5gyX7xorsXIdmY9fW58Fwo8l/C5+X0d8FzG5+b3w8Bzkb7eyLnh+U3mc+Fe+y5xkMnyWxhGtONfbF8gv8aQ36T3tbIMhJ1TYOUr6HctEfrVU8YvovIFjcHvbtS/b9CmNwtfmQmdYnexzKlTjHkNh36NVIdrWE60GyfCZzG+sw3u3UE/q/HdhzJ++2Gb5/i9Tu4t5CH4DF7hSfgM8Nv4LF563Pjbw/D6RMvzFL0e8E/h61QHQ8Z5l9P7x0Bzp/1OuH9GykgZ+51zn8f/9JxBSEA+Ts/5oHHOtaZcEKn8w61y9zP66417vLb1uOd2/bzFx/8H3PtrKXjaY2BkYGAAYikdjqJ4fpuvDPIcDCBw2mHLBBj9/+H/Zp4ktsdALgcDE0gUACGpC+oAAAB42mNgZGBge/w/moGB5+v/h/8f8CQxAEVQQBUAuwQH7njavZGxDgFBEIb/5SJXqESj0JGrRFTiFaiuU6pEKfEISpXoNVRqhZfwBCpRiEQUgpZvdk/iCWzy5ZvNzN1MZqNUM3FyGylKDdfFjyh9g1sS3wOujWd4DmvyN3gRV/CJXAmqxBdch0bIW+ymMIEh92XmBfkzHEOdWS1IoBzuNov9z+p8/fGn/vJjZlUfX3Gc1TCfbOYmbGCbef+/vq4Tdur7ZTvy+3rFq0B+LBVO0te5nuR2UAvogAcYImkfy+b372K9H8WnW1s+7NQN7dt4pX5h5J0YxacSJR993JtrAAAAeNpjYGAwgsINDE+YfJhymNmY5zF/YjFiCWIpYpnFuoFNi+0B+zSOGE42LgYuK+4MniSeCTy7eJ7xCvDa8B7je8T/QWCL4AahHGER4S8i30TzxHjENoi7SHhJukjFSVvIVMmmyHnI3ZO/p5CkmKG4RElIKULpjjKDco3yHJUdqsfUutTbNJw0Xmme0jqj7aL9SKdNV0pPQV/KwMSQzyjA2MpEzmSL6RYzC3M78yrzFxZ6FiuAcIPFDosDFicsLljcsXiBHVpyWapZ6lmaWdpZ+gFhmGUcEGZZVli2WE6wXGC5AQCjG07BAAABAAAAewBCAAoAQgALAAIAAQACABYAAAEAAeEAAwABeNp1kL1OAkEUhb8FJEBhYWWs5gn4CTSWRCMW2Ag8wBIW2AR3kV0ldNY+ga9A61P4TFaeGYaAJGRy5565P+fcuUCFKUWCUhVYyXY44FKvHS5Q48PjouKfHpe44cvjCx759rjMNb8e/5AEV9yRsmQjxpgZc3IMW1mLW3cMY2UNA0JeeCNiodez/IZEvQsmZNQV6wrb3IEpc69IPpJ/1z1RZV+a9zyp1/aP1JMrG7JWfqwf23h+UmWO6roOZdK3/A++PpWmzS6lbNUMHWk1ZZ2j3zSEmrrbus/NMRRD7Lj3sxjNFrrITNyJ4w8Vt//Z7yd3uod57MZeta9YtSu/td6/7lS+/geGfUq3eNptzTdOAwEUhOH/OWBwxJmcRI7rXUeyLWxyzknUNHRUXIErwAVoiKKDK3EChPE+OkYafd0MDmr5/mKQ/3JTreDAiQs3Hrz48BMgSIgwEaLEiJMgSRPNtNBKG+100EkX3fTQSx/9DFTXhxhmhFHGGGcCgxQmFmkyZMmRp8AkU0wzwyxzzFNigTIVFllimRVWWWOdDTbZYpsddtljnwMOOeKYE04545wLcXAnTnGJm3seeZI68Ui9NIhXfOKXgAQlJI0888I7r7zxIGE++JQItxKVmMQlIUnP9dWlYRQN25KpWmrhV9MwDDWlmqqlptWMmlVzal792yvamhXbTM2y/lRK9k9VU7XU9A+wf0x3AAB42tvB+L91A2Mvg/cGjoCIjYyMfZEb3di0IxQ3CER6bxAJAjIaImU3sGnHRDBsYFRw3cCs7cK4gQnC2MCs4LqLgYmJgYFJeyOzWxlQhAUiYggXidwgog0AKqkcQA==') format('woff'),
+		url('../fonts/lcdmono2ultra-webfont.eot'),
+		url('../fonts/lcdmono2ultra-webfont.ttf') format('truetype'),
+		url('../fonts/lcdmono2ultra-webfont.svg#LCDMono2Ultra') format('svg');
+	font-weight: normal;
+	font-style: normal;
+}
+
+.ddimgtooltip{
+	z-index: 2000;
+	box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
+	border-radius: 8px;
+	display: none;
+	position: absolute;
+	border: 2px solid #2e5473!important;	/*	Changed to match d5 of theme	*/
+	background: #f7fafc!important;	/*	Changed to match l1 of theme	*/
+	color: #2e5473!important;				/*	Changed to match d5 of theme */
+	padding: 0 7px 3px 7px;
+	/*font-family: sans-serif;	*/
+	font-size: 86%!important;
+	max-width: 300px;
+}
+
+.tipinfo{
+	text-align: left;
+	padding: 3px 0 3px 2px;
+}
+
+.tipinfo h5, .tipinfo h6 {
+
+    line-height:1.2em;
+    margin:0;
+    padding:0;
+}
+
+.tipimg{
+	width: 438px;   /* suggest 380 for wxgraphs */
+	height: 175px;  /* suggest 260 for wxgraphs */
+}
diff --git a/webfiles/css/mx-templates.css b/webfiles/css/mx-templates.css
new file mode 100644
index 0000000..97ffaca
--- /dev/null
+++ b/webfiles/css/mx-templates.css
@@ -0,0 +1,215 @@
+/*	-----------------------------------
+ * 	Styles for CumulusMX Templates
+ Last modified: 2021/03/19 09:23:15
+ * 	----------------------------------*/
+
+html, body, p, h1, h2, h3, h4, h5, h6, li, td, th {
+	font-family: 'Rosario', sans-serif;
+}
+
+p {
+	font-size: 15px;
+}
+
+#Header {
+	border-style: solid;
+	border-width: 0 0 10px 0;
+}
+
+.site-width {
+	max-width:1140px;
+	margin:auto;
+}
+
+.graph-width {
+	max-width:1250px;
+	margin:auto;
+}
+
+#Footer {
+	border-width:5px 0 0 0;
+	border-style: solid;
+}
+
+.logo {
+	max-width:250px;
+	margin: 5px 0 5px 16px;
+}
+
+.subText {
+	font-size: 80% !important;
+	font-weight:400;
+}
+
+body {
+	background-image: url('../images/picture.jpg');
+	background-position: bottom left;
+	background-repeat: no-repeat;
+	background-attachment: fixed;
+}
+
+.statusPanel h5 {
+	margin-bottom: -5px;
+}
+/*	-------------------------------------
+ * 	Flex boxes
+ * 	-------------------------------------*/
+.at-flex-start { display:flex;}
+.at-flex-end   {
+	display:flex;
+	justify-content: flex-end;
+	flex-wrap:wrap;
+}
+
+.at-flex-justify {
+	display:flex;
+	justify-content: space-around;
+	flex-wrap:wrap;
+}
+
+.at-flex-between {
+	display:flex;
+	justify-content: space-between;
+	flex-wrap:wrap;
+}
+
+.at-flex-bottom,
+.at-flex-items-bottom {
+	align-items: flex-end;
+}
+
+.at-flex-items-center {
+	align-items: center;
+}
+
+/*	--------------------------------------------------
+ * 	Menu enhancements
+ * 	--------------------------------------------------*/
+#Main_Menu {
+	margin-bottom: 4px;
+	border-width:2px 0 0 0 ;
+	border-style: solid;
+	min-height: 32px;
+}
+
+.at-slim {
+	padding: 4px 14px!important;
+}
+
+.at-divider {
+	margin: 0 5px;
+	color:#F80;
+}
+
+.at-spacer {
+    min-height:2em;
+}
+
+.at-menu-lable {
+	display:block;
+	width:100%;
+	font-size: 13px;
+	font-style: italic;
+	padding-bottom: 2px!important;
+	padding-top:4px!important;
+	border-bottom: 1px dotted #c2cfa5!important;
+}
+
+.at-menu-bar {
+	display:block;
+	height: 2px;
+	padding: 0 2px!important;
+}
+
+.at-indent {
+	padding-left: 40px!important;
+}
+
+/*	-------------------------------
+ * 	Model enhancements
+ * 	------------------------------*/
+
+.w3-modal-content {
+	margin-top:10%;
+	border-radius: 8px;
+}
+
+.w3-modal header { border-radius: 8px 8px 0 0;}
+.w3-modal footer { border-radius: 0 0 8px 8px;}
+.w3-modal .w3-btn { border-radius: 0 8px;}
+
+/* 	----------------------------------------
+ * 	Media enhancements
+ * 	---------------------------------------*/
+@media screen and (max-width:780px) {
+	#Footer { position: unset; }
+	#Content {
+		/*margin-top: 170px!important;*/
+		margin-bottom: 5px!important;
+	}
+
+	.statusPanel {
+		text-align:center!important;
+		margin:auto!important;
+	}
+}
+
+@media screen and (max-height:768px) {
+	#Footer { position: unset; item: center;}
+	#Content {
+		margin-bottom: 5px!important;
+	}
+}
+
+/*	--------------------------------------
+ * 	LED enhancements
+ * 	-------------------------------------*/
+.at-led-round {
+	display:inline-block;
+	height: 1.2em;
+	width: 1.2em;
+	margin: 0 0.5em -3px 0.5em;
+	border-radius: 50%;
+	background-color: #888;
+	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
+}
+
+.at-led-block {
+	display:inline-block;
+	height: 1.2em;
+	width: 1.2em;
+	margin: 0 0.5em -3px 0.5em;
+	background-color: #888;
+	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
+}
+
+.at-led-brick {
+	display:inline-block;
+	height:0.8em;
+	width:1.6em;
+	margin:0 0.5em -3px 0.5em;
+	background-color: #888;
+	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
+}
+.at-led-oval {
+	display:inline-block;
+	height:1em;
+	width:2em;
+	margin:0 0.5em -3px 0.5em;
+	border-radius: 50%;
+	background-color: #888;
+	box-shadow: inset 3px 3px 2px rgba(220, 220, 220, 0.6), inset -2px -2px 2px rgba(32, 32, 32,0.6);
+}
+
+.at-led-green {
+	background-color: #0b0;
+}
+
+.at-led-flash-red {
+	animation: flashR 1s infinite;
+}
+
+@keyframes flashR {
+	0%, 60%  {background-color: #f00;}
+	61%,100% {background-color: #800;}
+}
diff --git a/webfiles/css/w3Pro.css b/webfiles/css/w3Pro.css
new file mode 100644
index 0000000..3e59f4c
--- /dev/null
+++ b/webfiles/css/w3Pro.css
@@ -0,0 +1,151 @@
+/* W3PRO.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
+audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
+audio:not([controls]){display:none;height:0}[hidden],template{display:none}
+a{background-color:transparent}a:active,a:hover{outline-width:0}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
+small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
+button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
+button,input{overflow:visible}button,select{text-transform:none}
+button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
+[type=checkbox],[type=radio]{padding:0}
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
+[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+[type=search]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+/* End extract */
+html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
+.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
+h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+hr{border:0;border-top:1px solid #eee;margin:20px 0}
+.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
+.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
+.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
+.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
+.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
+.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
+.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
+.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
+.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
+.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
+.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
+.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
+.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
+.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
+.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
+.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
+.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
+.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
+.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
+.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
+.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
+/*.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}*/
+.w3-check,.w3-radio{width:24px;position:relative;}
+.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
+.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
+.w3-main,#main{transition:margin-left .4s}
+.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
+.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
+.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
+.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
+.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
+.w3-bar .w3-button{white-space:normal}
+.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
+.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
+.w3-responsive{display:block;overflow-x:auto}
+.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
+.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
+.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
+.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
+.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
+.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
+.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
+.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
+.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
+.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
+.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
+@media (max-width:1205px){.w3-auto{max-width:95%}}
+@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
+.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
+.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
+@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
+@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
+@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
+.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
+.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
+.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
+.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
+.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
+.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
+.w3-display-position{position:absolute}
+.w3-circle{border-radius:50%}
+.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
+.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
+.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
+.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
+.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
+.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
+.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
+.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
+.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
+.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
+.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
+.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
+.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
+.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
+.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
+.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
+.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
+.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
+.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
+.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
+.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
+.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
+.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
+.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
+.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
+.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
+.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
+.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
+.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
+.w3-left{float:left!important}.w3-right{float:right!important}
+.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
+.w3-hover-none:hover{box-shadow:none!important}
diff --git a/webfiles/gauges.htm b/webfiles/gauges.htm
new file mode 100644
index 0000000..e7b546a
--- /dev/null
+++ b/webfiles/gauges.htm
@@ -0,0 +1,257 @@
+<!--
+	gauges.htm	v:0.0.2		a:Neil Thomas
+	Last modified: 2022/07/18 15:17:24
+	CMX Template page: Gauges, No sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">			<!--	Slightly enhanced w3schools colours	-->
+		<link href="css/mx-templates.css" rel="stylesheet">		<!--	Specific styles for these templates.	-->
+		<link href="css/gauges.css" rel="stylesheet">			<!--	Stylesheet specifically for the gauges	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<!--	Page Header	-->
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between at-flex-items-center">
+					<img src="images/CumulusMX-Logo.png" alt="Cumulus Logo" class="w3-image logo">
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Main Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr" style="min-height:32px;">
+				</div>
+				<!--	Mobile Mneu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide-large w3-hide">
+				</div>
+			</div>
+		</div>
+		<!--	Start of page content	-->
+		<div id="Content" class="site-width w3-theme-light">
+			<div class="w3-row-padding">
+				<div class="w3-col s12">
+					<div class="w3-container">
+						<div class="at-flex-between at-flex-items-center">
+							<h1>Gauges <span class="subText"></span></h1>
+							<div class="container" style="max-width: 450px;">
+								<div style="width:200px;height:25px;display:inline-block;"><canvas id="canvas_status" width="200" height="25"></canvas></div>
+								<div style="width:60px; display:inline-block"><canvas id="canvas_timer" width="60" height="25"></canvas></div>
+								<div style="display:inline-block;margin-bottom:3px;">Status: <canvas id="canvas_led" style="width:25px;height:25px;margin-bottom:-7px;" width="25" height="25"></canvas></div>
+							</div>
+							<div class="w3-bar" style="max-width:200px;">
+								<button class="w3-bar-item w3-btn w3-theme-hvr w3-right at-slim" onClick="showModal('MXmodal');">Units</button>
+								<div class="w3-dropdown-hover w3-right">
+									<button class="w3-btn w3-theme-hvr at-slim">Gauge Options</button>
+									<div id="Options" class="w3-dropdown-content w3-bar-block w3-theme-l1">
+										<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">Temperature</div>
+										<div class="w3-bar-item at-slim"><input id="rad_temp1" type="radio" class="w3-radio" name="rad_temp" value="out" checked onclick="gauges.doTemp(this);"><label id="lab_temp1" for="rad_temp1">Outside</label></div>
+										<div class="w3-bar-item at-slim"><input id="rad_temp2" type="radio" class="w3-radio" name="rad_temp" value="in" onclick="gauges.doTemp(this);"><label id="lab_temp2" for="rad_temp2">Inside</label></div>
+										<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">Other Temps</div>
+										<div class="w3-bar-item at-slim"><input id="rad_dew1" type="radio" name="rad_dew" class="w3-radio" value="dew" checked onclick="gauges.doDew(this);"><label id="lab_dew1" for="rad_dew1">Dew Point</label></div>
+										<div class="w3-bar-item at-slim w3-hide" data-cmx-apparent><input id="rad_dew2" type="radio" name="rad_dew" class="w3-radio" value="app" onclick="gauges.doDew(this);"><label id="lab_dew2" for="rad_dew2">Apparent</label></div>
+										<div class="w3-bar-item at-slim" data-cmx-feels><input id="rad_dew6" type="radio" name="rad_dew" class="w3-radio" value="feel" onclick="gauges.doDew(this);"><label id="lab_dew6" for="rad_dew6">Feels Like</label></div>
+										<div class="w3-bar-item at-slim"><input id="rad_dew3" type="radio" name="rad_dew" class="w3-radio" value="wnd" onclick="gauges.doDew(this);"><label id="lab_dew3" for="rad_dew3">Wind Chill</label></div>
+										<div class="w3-bar-item at-slim"><input id="rad_dew4" type="radio" name="rad_dew" class="w3-radio" value="hea" onclick="gauges.doDew(this);"><label id="lab_dew4" for="rad_dew4">Heat Index</label></div>
+										<div class="w3-bar-item at-slim"><input id="rad_dew5" type="radio" name="rad_dew" class="w3-radio" value="hum" onclick="gauges.doDew(this);"><label id="lab_dew5" for="rad_dew5">Humidex</label></div>
+										<div class="w3-bar-item at-slim at-menu-label w3-small w3-theme-l3 w3-center">Humidity</div>
+										<div class="w3-bar-item at-slim"><input id="rad_hum1" type="radio" name="rad_hum" class="w3-radio" value="out" checked onclick="gauges.doHum(this);"><label id="lab_hum1" for="rad_hum1">Outside</label></div>
+										<div class="w3-bar-item at-slim"><input id="rad_hum2" type="radio" name="rad_hum" class="w3-radio" value="in" onclick="gauges.doHum(this);"><label id="lab_hum2" for="rad_hum2">Inside</label></div>
+									</div>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>
+			<!--	Row Two - All Gauges	-->
+			<div class="w3-row-padding">
+				<div class="w3-col s12">
+					<div class="w3-panel w3-card w3-theme-white">
+						<!--	The following html can be copied into ANY single panel page - template -->
+						<div style="display:flex; flex-flow: row wrap; justify-content:space-evenly">
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Temperature</h5>
+								<div class="gauge w3-center">
+									<div id="tip_0">
+										<canvas id="canvas_temp" class="gaugeSmall"></canvas>
+									</div>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Other Temps</h5>
+								<div class="gauge w3-center">
+									<div id="tip_1">
+										<canvas id="canvas_dew" class="gaugeSmall"></canvas>
+									</div>
+								</div>
+							</div>
+							<div class="w3-panel  w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Humidity</h5>
+								<div class="gauge w3-center">
+									<div id="tip_4">
+										<canvas id="canvas_hum" class="gaugeSmall"></canvas>
+									</div>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Wind</h5>
+								<div id="tip_6" class="gauge w3-center">
+									<canvas id="canvas_wind" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Wind Direction</h5>
+								<div id="tip_7" class="gauge w3-center">
+									<canvas id="canvas_dir" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Wind Rose</h5>
+								<div id="tip_10" class="gauge w3-center">
+									<canvas id="canvas_rose" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Pressure</h5>
+								<div id="tip_5" class="gauge w3-center">
+									<canvas id="canvas_baro" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Rainfall</h5>
+								<div id="tip_2" class="gauge w3-center">
+									<canvas id="canvas_rain" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5 class="">Rainfall Rate</h5>
+								<div id="tip_3" class="gauge w3-center">
+									<canvas id="canvas_rrate" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div data-cmx-uv-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5>UV Radiation</h5>
+								<div id="tip_8" class="gauge w3-center">
+									<canvas id="canvas_uv" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div data-cmx-solar-gauge class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5>Solar</h5>
+								<div id="tip_9" class="gauge w3-center">
+									<canvas id="canvas_solar" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+							<div class="w3-panel w3-theme-l5 at-gaugeSmall" style="order:0;">
+								<!--	dial	-->
+								<h5>Cloudbase</h5>
+								<div id="tip_11" class="gauge w3-center">
+									<canvas id="canvas_cloud" class="gaugeSmall"></canvas>
+								</div>
+							</div>
+						</div>
+						<!--	End of Gauges HTML	-->
+					</div>
+				</div>
+			</div>
+		</div>
+		<!--	Start of footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between at-flex-bottom" style="flex-wrap:nowrap;">
+					<p class="w3-small"><em>Cumulus MX Templates by Neil&nbsp;Thomas&nbsp;<script>document.write(new Date().getFullYear());</script></em></p>
+					<p class="w3-small w3-center" style="max-width:500px;">
+						<em>scripts by mark crossley - version <span id="scriptVer"></span> gauges drawn using gerrit grunwald's steelseries javascript library, wind rose drawn using rgraph</em>
+					</p>
+					<p class="w3-right">Powered by <span class="w3-theme-txt">CumulusMX</span>&nbsp;v:<span data-cmxdata="version">---</span>,&nbsp;b:<span data-cmxdata="build">---</span></p>
+				</div>
+			</div>
+		</div>
+		<!--	Modal	-->
+		<div id="MXmodal" class="w3-modal w3-hide at-theme-modal">
+			<div class="w3-modal-content w3-round-large" style="margin-top:10%; max-width:500px;">
+				<header class="w3-container w3-theme-dark" style="border-radius:8px 8px 0 0;">
+					<span onclick="showModal('MXmodal')" class="w3-btn w3-theme-hvr w3-display-topright" style="border-radius: 0 8px 0 8px;">&times;</span>
+					<h3>Gauge Units</h3>
+				</header>
+				<div class="w3-row-padding w3-theme-white">
+					<div class="w3-panel">
+						<div class="w3-col l3 m3 s5"><span class="lang_temparature">Temperature</span>:</div>
+						<div class="w3-col l2 m3 s3"><input id="rad_unitsTemp1" type="radio" class="w3-radio" name="rad_unitsTemp" value="C" checked onclick="gauges.setUnits(this);"><label id="lab_unitsTemp1" for="rad_unitsTemp1">&deg;C</label></div>
+						<div class="w3-rest"><input id="rad_unitsTemp2" type="radio" class="w3-radio" name="rad_unitsTemp" value="F" onclick="gauges.setUnits(this);"><label id="lab_unitsTemp2" for="rad_unitsTemp2">&deg;F</label></div>
+
+						<div class="w3-col l3 m3 s5"><span id="lang_rainfall">Rainfall</span></div>
+						<div class="w3-col l2 m3 s3"><input id="rad_unitsRain1" type="radio" class="w3-radio" name="rad_unitsRain" value="mm" checked onclick="gauges.setUnits(this);"><label id="lab_unitsRain1" for="rad_unitsRain1">mm</label></div>
+						<div class="w3-rest"><input id="rad_unitsRain2" type="radio" class="w3-radio" name="rad_unitsRain" value="in" onclick="gauges.setUnits(this);"><label id="lab_unitsRain2" for="rad_unitsRain2">Inch</label></div>
+
+						<div class="w3-col l3 m3 s5"><span id="lang_pressure">Pressure</span></div>
+						<div class="w3-col l2 m2 s3"><input id="rad_unitsPress1" type="radio" class="w3-radio" name="rad_unitsPress" value="hPa" checked onclick="gauges.setUnits(this);"><label id="lab_unitsPress1" for="rad_unitsPress1">hPa</label></div>
+						<div class="w3-col l2 m2 s4"><input id="rad_unitsPress2" type="radio" class="w3-radio" name="rad_unitsPress" value="inHg" onclick="gauges.setUnits(this);"><label id="lab_unitsPress2" for="rad_unitsPress2">inHg</label></div>
+						<div class="w3-col s5 w3-hide-large w3-hide-medium">&nbsp;</div>
+						<div class="w3-col l2 m2 s3"><input id="rad_unitsPress3" type="radio" class="w3-radio" name="rad_unitsPress" value="mb" onclick="gauges.setUnits(this);"><label id="lab_unitsPress3" for="rad_unitsPress3">mb</label></div>
+						<div class="w3-col l2 m3 s4"><input id="rad_unitsPress4" type="radio" class="w3-radio" name="rad_unitsPress" value="kPa" onclick="gauges.setUnits(this);"><label id="lab_unitsPress4" for="rad_unitsPress4">kPa</label></div>
+
+						<div class="w3-col l3 m3 s5"><span id="lang_windSpeed">Wind Speed</span></div>
+						<div class="w3-col l2 m2 s3"><input id="rad_unitsWind4" type="radio" class="w3-radio" name="rad_unitsWind" value="km/h" checked onclick="gauges.setUnits(this);"><label id="lab_unitsWind4" for="rad_unitsWind4">km/h</label></div>
+						<div class="w3-col l2 m2 s4"><input id="rad_unitsWind3" type="radio" class="w3-radio" name="rad_unitsWind" value="m/s" onclick="gauges.setUnits(this);"><label id="lab_unitsWind3" for="rad_unitsWind3">m/s</label></div>
+						<div class="w3-col s5 w3-hide-medium w3-hide-large">&nbsp;</div>
+						<div class="w3-col l2 m2 s3"><input id="rad_unitsWind1" type="radio" class="w3-radio" name="rad_unitsWind" value="mph" onclick="gauges.setUnits(this);"><label id="lab_unitsWind1" for="rad_unitsWind1">mph</label></div>
+						<div class="w3-col l3 m3 s4"><input id="rad_unitsWind2" type="radio" class="w3-radio" name="rad_unitsWind" value="kts" onclick="gauges.setUnits(this);"><label id="lab_unitsWind2" for="rad_unitsWind2">knots</label></div>
+
+						<div class="w3-col l3 m3 s5"><span id="lang_cloudbase">Cloud Base</span></div>
+						<div class="w3-col l2 m2 s3"><input id="rad_unitsCloudBase1" type="radio" class="w3-radio" name="rad_unitsCloud" value="m" checked onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase1" for="rad_unitsCloudBase1">m</label></div>
+						<div class="w3-col l7 m7 s4"><input id="rad_unitsCloudBase2" type="radio" class="w3-radio" name="rad_unitsCloud" value="ft" onclick="gauges.setUnits(this);"><label id="lab_unitsCloudBase2" for="rad_unitsCloudBase2">ft</label></div>
+					</div>
+				</div>
+				<footer class="w3-container w3-theme-dark" style="border-radius: 0 0 8px 8px;">
+					<p class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span></p>
+				</footer>
+			</div>
+		</div>
+		<script>
+		var showModal = function(modalID) {
+			$('#' + modalID).toggleClass('w3-show', 'w3-hide');
+		};
+		</script>
+		<!-- Combined steelseries.js & tween.js -->
+		<script src="lib/steelseries/scripts/steelseries_tween.min.js"></script>
+		<!-- Once you have customised this scripts to your requirements you should minimise
+			and concatenate them into a single file in the same order  as below -->
+		<script src="lib/steelseries/scripts/language.min.js"></script>
+		<script src="lib/steelseries/scripts/gauges.js"></script>
+		<!--Optional Wind Rose scripts -->
+		<script src="lib/steelseries/scripts/RGraph.common.core.min.js"></script>
+		<script src="lib/steelseries/scripts/RGraph.rose.min.js"></script>
+	</body>
+</html>
diff --git a/webfiles/historic.htm b/webfiles/historic.htm
new file mode 100644
index 0000000..5199e69
--- /dev/null
+++ b/webfiles/historic.htm
@@ -0,0 +1,112 @@
+<!--
+	historic.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/02/10 14:48:26
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">		<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<style>
+			#chartcontainer  {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.mx-button {
+				margin-bottom: 5px;
+				border-radius: 4px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Charts based on summary data</h1>
+					<h3 class="w3-center w3-hide">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	Main column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>	<!--	End of first column of first row	-->
+			</div>
+			<div class="w3-row-padding w3-theme-light graphs-width">
+				<div class="w3-col s12">
+					<div class="w3-container w3-panel w3-center">
+						<div class="w3-bar w3-center">
+							<button id="btnTemp"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('temp');">Temperature</button>
+							<button id="btnPress"   class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('press');">Pressure</button>
+							<button id="btnWind"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('wind');">Winds</button>
+							<button id="btnHum"     class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('humidity');">Humidity</button>
+							<button id="btnRain"    class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('rain');">Rainfall</button>
+							<button id="btnSolar"   class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('solar');">Solar Radiation</button>
+							<button id="btnDegDay"  class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('degday');">Degree Days</button>
+							<button id="btnTempSum" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeGraph('tempsum');">Temp Sum</button>
+						</div>
+						<p>Mouse over the chart to see the values at any given time.
+						You can add or remove data sets from the chart by clicking the entry on the chart legend.</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/historiccharts.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/images/CumulusMX-Logo.png b/webfiles/images/CumulusMX-Logo.png
new file mode 100644
index 0000000..ecf0246
Binary files /dev/null and b/webfiles/images/CumulusMX-Logo.png differ
diff --git a/webfiles/images/favicon.png b/webfiles/images/favicon.png
new file mode 100644
index 0000000..26f009f
Binary files /dev/null and b/webfiles/images/favicon.png differ
diff --git a/webfiles/images/picture.jpg b/webfiles/images/picture.jpg
new file mode 100644
index 0000000..2336b37
Binary files /dev/null and b/webfiles/images/picture.jpg differ
diff --git a/webfiles/index.htm b/webfiles/index.htm
new file mode 100644
index 0000000..5d4bb51
--- /dev/null
+++ b/webfiles/index.htm
@@ -0,0 +1,238 @@
+<!--
+	index.html		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/11/20 16:28:39
+	Page: 1 main panel plus a right sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery library		-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">	<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">	<!--	Slightly enhanced w3schools colours	-->
+		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<script>
+			window.onload = () => {
+				$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
+				// update the moon image every 20 minutes if the page is left open
+				setInterval(() => {
+					$('#moonImg').attr('src', 'images/moon.png?' + Date.now());
+				}, 1200000);
+			};
+		</script>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1><span data-cmxdata="location"></span> Weather <span class="subText"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-container w3-theme-white">
+								<h3 class="">Almanac</h3>
+								<div class="w3-responsive">
+									<table class="w3-table" style="min-width:100%;">
+										<tbody>
+											<tr>
+												<td class="">Dawn:</td>
+												<td class=""><span data-cmxdata="dawn"></span></td>
+												<td class="">Sun Rise:</td>
+												<td class=""><span data-cmxdata="sunrise"></span></td>
+												<td class="">Moon Rise:</td>
+												<td class=""><span data-cmxdata="moonrise"></span></td>
+												<td rowspan="3" style="width:75px; height: 75px; padding:0"><img id="moonImg" src="images/moon.png" alt="Moon" width="75" height="75" class="w3-image" />Visible <span data-cmxdata="MoonPercentAbs"></span>%</td>
+											</tr>
+											<tr>
+												<td class="">Dusk:</td>
+												<td class=""><span data-cmxdata="dusk"></span></td>
+												<td class="">Sun Set:</td>
+												<td class=""><span data-cmxdata="sunset"></span></td>
+												<td class="">Moon Set:</td>
+												<td class=""><span data-cmxdata="moonset"></span></td>
+											</tr>
+											<tr>
+												<td class="">Daylight:</td>
+												<td class=""><span data-cmxdata="daylightlength"></span></td>
+												<td class="">Day Length:</td>
+												<td class=""><span data-cmxdata="daylength"></span></td>
+												<td class="">Moon Phase:</td>
+												<td class=""><span id="moonPhase" data-cmxdata="moonphase"></span></td>
+											</tr>
+											<tr id="currCond" class="w3-hide">
+												<td colspan="7"><strong>Current conditions</strong>: <span data-cmxdata="currcond"></span></td>
+											</tr>
+										</tbody>
+									</table>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="w3-row-padding">	<!--	Row 2 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h3 class="">Conditions at local time <span data-cmxdata="time"></span></h3>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="min-width:100%;">
+										<tr>
+											<td colspan="4" class="w3-theme-d5">Temperature and Humidity</td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td>Temperature</td>
+											<td><span data-cmxdata="temp"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td>Dew Point</td>
+											<td><span data-cmxdata="dew"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td>Windchill</td>
+											<td><span data-cmxdata="wchill"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td>Humidity</td>
+											<td><span data-cmxdata="hum"></span>&nbsp;%</td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td >Heat Index</td>
+											<td><span data-cmxdata="heatindex"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td><span data-cmx-apparent class="w3-hide">Apparent Temperature</span><span data-cmx-feels>Feels Like</span></td>
+											<td><span data-cmx-apparent data-cmxdata="apptemp" class="w3-hide"></span><span data-cmx-feels data-cmxdata="feelslike"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td>Temp change last hour</td>
+											<td><span data-cmxdata="TempChangeLastHour"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td></td>
+											<td></td>
+										</tr>
+										<tr>
+											<td colspan="4" class="w3-theme-d4">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td>Rainfall Today</td>
+											<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td>Rainfall Rate</td>
+											<td><span data-cmxdata="rrate"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td>Rainfall This Month</td>
+											<td><span data-cmxdata="rmonth"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td>Rainfall This Year</td>
+											<td><span data-cmxdata="ryear"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td>Rainfall Last Hour</td>
+											<td><span data-cmxdata="rhour"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td>Last rainfall</td>
+											<td><span data-cmxdata="LastRainTip"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td>Rainfall Since Midnight</td>
+											<td><span data-cmxdata="rmidnight"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td>Rainfall Last 24 Hours</td>
+											<td><span data-cmxdata="r24hour"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+										</tr>
+										<tr>
+											<td colspan="4" class="w3-theme-d3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td>Wind Speed <span class="subText">(gust)</span></td>
+											<td><span data-cmxdata="wgust"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td>Wind Speed <span class="subText">(avg)</span></td>
+											<td><span data-cmxdata="wspeed"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td>Wind Bearing</td>
+											<td><span data-cmxdata="avgbearing"></span>&deg; <span data-cmxdata="wdir"></span></td>
+											<td>Beaufort <span data-cmxdata="beaufort"></span></td>
+											<td><span data-cmxdata="beaudesc"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td>Wind Variation <span class="subText">(last 10 minutes)</span></td>
+											<td colspan="3">From <span data-cmxdata="BearingRangeFrom"></span>&deg; to <span data-cmxdata="BearingRangeTo"></span>&deg;</td>
+										</tr>
+										<tr>
+											<td colspan="4" class="w3-theme-d2">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td>Barometer</td>
+											<td><span data-cmxdata="press"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td><span data-cmxdata="presstrend"></span></td>
+											<td><span data-cmxdata="presstrendval"></span>&nbsp;<span data-cmxdata="pressunit"></span>/hr</td>
+										</tr>
+										<tr class="w3-hide" data-cmx-solar data-cmx-uv>
+											<td colspan="4" class="w3-theme-d1">Solar</td>
+										</tr>
+										<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+											<td>Solar Radiation</td>
+											<td><span data-cmxdata="SolarRad"></span>&nbsp;W/m&sup2;</td>
+											<td>Evapotranspiration Today</td>
+											<td><span data-cmxdata="ET"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+										</tr>
+										<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+											<td>UV Index</td>
+											<td><span data-cmxdata="UV"></span></td>
+											<td></td>
+											<td></td>
+										</tr>
+									</table>
+								</div>
+								<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>The weather station in use is the <span data-cmxdata="stationtype"></span><br>
+									This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used at this station ends at <span data-cmxdata="rollovertime"></span>.
+								</p>
+								<p><strong>Forecast:</strong> <span data-cmxdata="forecast"></span></p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/js/alltimerecdata.js b/webfiles/js/alltimerecdata.js
new file mode 100644
index 0000000..a719166
--- /dev/null
+++ b/webfiles/js/alltimerecdata.js
@@ -0,0 +1,40 @@
+// Last modified: 2021/03/19 09:15:55
+
+
+$.getJSON("websitedata.json", function (json) {
+    console.log( "success" );
+    var cmx_data = json;
+
+    $(document).prop('title', cmx_data['cmx-location'] + ' weather');
+    $('meta[name=description]').attr('content', cmx_data['cmx-location'] + ' weather data');
+    $('meta[name=keywords]').attr('content', $('meta[name=keywords]').attr('content') + ', ' + cmx_data['cmx-location'] + ' weather data');
+
+    $.getJSON("alltimerecdata.json", function (json) {
+        console.log( "success" );
+        Object.keys(json).forEach(key => {
+            cmx_data[key] = json[key];
+        });
+
+        // Update all spans with id beginning "cmx-"
+        $('span[id^=cmx-]').each(function () {
+            this.innerHTML = cmx_data[this.id];
+        });
+        // Update all spans with class beginning "cmx-"
+        $('span[class^=cmx-]').each(function () {
+            this.innerHTML = cmx_data[this.className];
+        });
+    })
+    .fail(function (jqxhr, textStatus, error) {
+        var err = textStatus + ", " + error;
+        console.log("Request Failed: " + err);
+    });
+
+
+})
+.fail(function (jqxhr, textStatus, error) {
+    var err = textStatus + ", " + error;
+    console.log( "Request Failed: " + err );
+});
+
+$(document).ready(function() {
+});
\ No newline at end of file
diff --git a/webfiles/js/cumuluscharts.js b/webfiles/js/cumuluscharts.js
new file mode 100644
index 0000000..54f3c3c
--- /dev/null
+++ b/webfiles/js/cumuluscharts.js
@@ -0,0 +1,2463 @@
+// Last modified: 2023/03/16 09:59:29
+
+var chart, config;
+
+var myRangeBtns = {
+    buttons: [{
+        count: 12,
+        type: 'hour',
+        text: '12h'
+    }, {
+        count: 24,
+        type: 'hour',
+        text: '24h'
+    }, {
+        count: 2,
+        type: 'day',
+        text: '2d'
+    }, {
+        type: 'all',
+        text: 'All'
+    }],
+    inputEnabled: false,
+    selected: 1
+};
+
+$(document).ready(function () {
+    $('#mySelect').change(function () {
+        changeGraph($('#mySelect').val());
+    });
+
+
+    $.ajax({
+        url: "availabledata.json",
+        dataType: "json",
+        success: function (result) {
+            if (result.Temperature === undefined || result.Temperature.Count == 0) {
+                $('#mySelect option[value="temp"]').remove();
+            }
+            if (result.DailyTemps === undefined || result.DailyTemps.Count == 0) {
+                $('#mySelect option[value="dailytemp"]').remove();
+            }
+            if (result.Humidity === undefined || result.Humidity.Count == 0) {
+                $('#mySelect option[value="humidity"]').remove();
+            }
+            if (result.Solar === undefined || result.Solar.Count == 0) {
+                $('#mySelect option[value="solar"]').remove();
+            }
+            if (result.Sunshine === undefined || result.Sunshine.Count == 0) {
+                $('#mySelect option[value="sunhours"]').remove();
+            }
+            if (result.AirQuality === undefined || result.AirQuality.Count == 0) {
+                $('#mySelect option[value="airquality"]').remove();
+            }
+            if (result.ExtraTemp == undefined || result.ExtraTemp.Count == 0) {
+                $('#mySelect option[value="extratemp"]').remove();
+            }
+            if (result.ExtraHum == undefined || result.ExtraHum.Count == 0) {
+                $('#mySelect option[value="extrahum"]').remove();
+            }
+            if (result.ExtraDewPoint == undefined || result.ExtraDewPoint.Count == 0) {
+                $('#mySelect option[value="extradew"]').remove();
+            }
+            if (result.SoilTemp == undefined || result.SoilTemp.Count == 0) {
+                $('#mySelect option[value="soiltemp"]').remove();
+            }
+            if (result.SoilMoist == undefined || result.SoilMoist.Count == 0) {
+                $('#mySelect option[value="soilmoist"]').remove();
+            }
+            if (result.LeafWetness == undefined || result.LeafWetness.Count == 0) {
+                $('#mySelect option[value="leafwet"]').remove();
+            }
+            if (result.UserTemp == undefined || result.UserTemp.Count == 0) {
+                $('#mySelect option[value="usertemp"]').remove();
+            }
+            if (result.CO2 == undefined || result.CO2.Count == 0) {
+                $('#mySelect option[value="co2"]').remove();
+            }
+        }
+    });
+
+    $.ajax({
+        url: "graphconfig.json",
+        dataType: "json",
+        success: function (result) {
+            config = result;
+            var value = parent.location.hash.replace('#', '');
+            if (value == '')
+                value = 'temp';
+
+            changeGraph(value);
+            // set the correct option
+            $('#mySelect option[value="' + value + '"]').attr('selected', true);
+        }
+    });
+});
+
+
+function changeGraph(graph) {
+    switch (graph) {
+        case 'temp':
+            doTemp();
+            break;
+        case 'dailytemp':
+            doDailyTemp();
+            break;
+        case 'press':
+            doPress();
+            break;
+        case 'wind':
+            doWind();
+            break;
+        case 'windDir':
+            doWindDir();
+            break;
+        case 'rain':
+            doRain();
+            break;
+        case 'dailyrain':
+            doDailyRain();
+            break;
+        case 'humidity':
+            doHum();
+            break;
+        case 'solar':
+            doSolar();
+            break;
+        case 'sunhours':
+            doSunHours();
+            break;
+        case 'airquality':
+            doAirQuality();
+            break;
+        case 'extratemp':
+            doExtraTemp();
+            break;
+        case 'extrahum':
+            doExtraHum();
+            break;
+        case 'extradew':
+            doExtraDew();
+            break;
+        case 'soiltemp':
+            doSoilTemp();
+            break;
+        case 'soilmoist':
+            doSoilMoist();
+            break;
+        case 'leafwet':
+            doLeafWet();
+            break;
+        case 'usertemp':
+            doUserTemp();
+            break;
+        case 'co2':
+            doCO2();
+            break;
+        default:
+            doTemp();
+            break;
+        }
+        parent.location.hash = graph;
+}
+
+var doTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {
+            text: 'Temperature'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Temperature (°' + config.temp.units + ')'
+            },
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -5,
+                formatter: function () {
+                    return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                }
+            },
+            plotLines: [{
+                // freezing line
+                value: freezing,
+                color: 'rgb(0, 0, 180)',
+                width: 1,
+                zIndex: 2
+            }]
+        }, {
+            // right
+            gridLineWidth: 0,
+            linkedTo: 0,
+            opposite: true,
+            labels: {
+                align: 'left',
+                x: 5,
+                formatter: function () {
+                    return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                }
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'tempdata.json',
+        cache: false,
+        dataType: 'json',
+        success: function (resp) {
+            var titles = {
+                'temp'     : 'Temperature',
+                'dew'      : 'Dew Point',
+                'apptemp'  : 'Apparent',
+                'feelslike': 'Feels Like',
+                'wchill'   : 'Wind Chill',
+                'heatindex': 'Heat Index',
+                'humidex'  : 'Humidex',
+                'intemp'   : 'Inside'
+            };
+            var idxs = ['temp', 'dew', 'apptemp', 'feelslike', 'wchill', 'heatindex', 'humidex', 'intemp'];
+            var yaxis = 0;
+
+            idxs.forEach(function(idx) {
+                var valueSuffix = ' °' + config.temp.units;
+                yaxis = 0;
+
+                if (idx in resp) {
+                    if (idx === 'humidex') {
+                        valueSuffix = null;
+                        if (config.temp.units == 'F') {
+                            chart.yAxis[1].remove();
+                            chart.addAxis({
+                                id: 'humidex',
+                                title:{text: 'Humidex'},
+                                opposite: true,
+                                labels: {
+                                    align: 'left'
+                                },
+                                alignTicks: true,
+                                gridLineWidth: 0, // Not working?
+                                gridZIndex: -10, // Hides the grid lines for this axis
+                                showEmpty: false
+                            }, false, false);
+
+                            yaxis = 'humidex';
+                        }
+                    }
+
+                    chart.addSeries({
+                        name: titles[idx],
+                        id: 'series-' + idx,
+                        data: resp[idx],
+                        color: config.series[idx].colour,
+                        yAxis: yaxis,
+                        tooltip: {valueSuffix: valueSuffix}
+                    }, false);
+
+                    if (idx === 'temp') {
+                        chart.get('series-' + idx).options.zIndex = 99;
+                    }
+                }
+            });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doPress = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {
+            text: 'Pressure'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Pressure (' + config.press.units + ')'
+            },
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -5
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 5
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' ' + config.press.units,
+            valueDecimals: config.press.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [{
+            name: 'Pressure',
+            color: config.series.press.colour
+    }],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'pressdata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.press);
+        }
+    });
+};
+
+var compassP = function (deg) {
+    var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+    return a[Math.floor((deg + 22.5) / 45) % 8];
+};
+
+var doWindDir = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'scatter',
+            alignTicks: false
+        },
+        title: {
+            text: 'Wind Direction'
+        },
+        credits: {
+            enabled: true
+        },
+        navigator: {
+            series: {
+                // pseudo scatter
+                type: 'line',
+                dataGrouping: {
+                    groupPixelWidth: 1,
+                    anchor: 1
+                },
+                lineWidth: 0,
+                marker   : {
+                    // enable the marker to simulate a scatter
+                    enabled: true,
+                    radius : 1
+                }
+            }
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Bearing'
+            },
+            opposite: false,
+            min: 0,
+            max: 360,
+            tickInterval: 45,
+            labels: {
+                align: 'right',
+                x: -5,
+                formatter: function () {
+                    return compassP(this.value);
+                }
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            title: {
+                text: null
+            },
+            min: 0,
+            max: 360,
+            tickInterval: 45,
+            labels: {
+                align: 'left',
+                x: 5,
+                formatter: function () {
+                    return compassP(this.value);
+                }
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            scatter: {
+                cursor: 'pointer',
+                enableMouseTracking: true,
+                boostThreshold: 200,
+                marker: {
+                    states: {
+                        hover: {
+                            enabled: false
+                        },
+                        select: {
+                            enabled: false
+                        }
+                    }
+                },
+                shadow: false,
+                label: {
+                    enabled: false
+                }
+            }
+        },
+        tooltip: {
+            enabled: true,
+            split: true,
+            useHTML: true
+        },
+        series: [{
+            name: 'Bearing',
+            type: 'scatter',
+            color: config.series.bearing.colour,
+            marker: {
+                symbol: 'circle',
+                radius: 2
+            },
+            enableMouseTracking: false,
+            showInNavigator: false
+        }, {
+            name: 'Avg Bearing',
+            type: 'scatter',
+            color: config.series.avgbearing.colour,
+            marker: {
+                symbol: 'circle',
+                radius: 2
+            },
+            showInNavigator: true,
+            tooltip: {
+                headerFormat: '',
+                xDateFormat: '%A, %b %e %H:%M ',
+                pointFormatter() {
+                    return '<span style="color:' + this.color + '">\u25CF</span> ' +
+                        this.series.name + ': <b>' + (this.y == 0 ? 'calm' : this.y + '°') + '</b><br/>';
+                }
+            }
+        }],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'wdirdata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.bearing);
+            chart.series[1].setData(resp.avgbearing);
+        }
+    });
+};
+
+var doWind = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {
+            text: 'Wind Speed'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Wind Speed (' + config.wind.units + ')'
+            },
+            opposite: false,
+            min: 0,
+            labels: {
+                align: 'right',
+                x: -5
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            min: 0,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 5
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            valueSuffix: ' ' + config.wind.units,
+            valueDecimals: config.wind.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [{
+            name: 'Wind Speed',
+            color: config.series.wspeed.colour
+        }, {
+            name: 'Wind Gust',
+            color: config.series.wgust.colour
+        }],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'winddata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.wspeed);
+            chart.series[1].setData(resp.wgust);
+        }
+    });
+};
+
+var doRain = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: true
+        },
+        title: {
+            text: 'Rainfall'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Rainfall rate (' + config.rain.units + '/hr)'
+            },
+            min: 0,
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -5
+            },
+            showEmpty: false
+        }, {
+            // right
+            opposite: true,
+            title: {
+                text: 'Rainfall (' + config.rain.units + ')'
+            },
+            min: 0,
+            labels: {
+                align: 'left',
+                x: 5
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                boostThreshold: 0,
+                dataGrouping: {
+                    enabled: false
+                },
+                showInNavigator: true,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            valueDecimals: config.rain.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [{
+                name: 'Daily rain',
+                type: 'area',
+                color: config.series.rfall.colour,
+                yAxis: 1,
+                tooltip: {valueSuffix: ' ' + config.rain.units},
+                fillOpacity: 0.3
+            }, {
+                name: 'Rain rate',
+                type: 'line',
+                color: config.series.rrate.colour,
+                yAxis: 0,
+                tooltip: {valueSuffix: ' ' + config.rain.units + '/hr'}
+        }],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'raindata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.rfall);
+            chart.series[1].setData(resp.rrate);
+        }
+    });
+};
+
+var doHum = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {
+            text: 'Relative Humidity'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Humidity (%)'
+            },
+            opposite: false,
+            min: 0,
+            max: 100,
+            labels: {
+                align: 'right',
+                x: -5
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            min: 0,
+            max: 100,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 5
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            valueSuffix: ' %',
+            valueDecimals: config.hum.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'humdata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            var titles = {
+                'hum'  : 'Outdoor Humidity',
+                'inhum': 'Indoor Humidity'
+             }
+             var idxs = ['hum', 'inhum'];
+             var cnt = 0;
+             idxs.forEach(function(idx) {
+                 if (idx in resp) {
+                     chart.addSeries({
+                         name: titles[idx],
+                         color: config.series[idx].colour,
+                         data: resp[idx]
+                     }, false);
+
+                     cnt++;
+                 }
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doSolar = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: true
+        },
+        title: {
+            text: 'Solar'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                boostThreshold: 0,
+                dataGrouping: {
+                    enabled: false
+                },
+                showInNavigator: true,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'solardata.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            var titles = {
+                SolarRad       : 'Solar Radiation',
+                CurrentSolarMax: 'Theoretical Max',
+                UV: 'UV Index'
+            };
+            var types = {
+                SolarRad: 'area',
+                CurrentSolarMax: 'area',
+                UV: 'line'
+            };
+            var colours = {
+                SolarRad: 'rgb(255,165,0)',
+                CurrentSolarMax: 'rgb(128,128,128)',
+                UV: 'rgb(0,0,255)'
+            };
+            var tooltips = {
+                SolarRad: {
+                    valueSuffix: ' W/m\u00B2',
+                    valueDecimals: 0
+                },
+                CurrentSolarMax: {
+                    valueSuffix: ' W/m\u00B2',
+                    valueDecimals: 0
+                },
+                UV: {
+                    valueSuffix: null,
+                    valueDecimals: config.uv.decimals
+                }
+            };
+
+            var idxs = ['SolarRad', 'CurrentSolarMax', 'UV'];
+            var cnt = 0;
+            var solarAxisCreated = false;
+
+            idxs.forEach(function(idx) {
+                if (idx in resp) {
+                    if (idx === 'UV') {
+                        chart.addAxis({
+                            id: 'uv',
+                            title:{text: 'UV Index'},
+                            opposite: true,
+                            min: 0,
+                            labels: {
+                                align: 'left'
+                            },
+                            showEmpty: false
+                        });
+                    } else if (!solarAxisCreated) {
+                        chart.addAxis({
+                            id: 'solar',
+                            title: {text: 'Solar Radiation (W/m\u00B2)'},
+                            min: 0,
+                            opposite: false,
+                            labels: {
+                                align: 'right',
+                                x: -5
+                            },
+                            showEmpty: false
+                        });
+                        solarAxisCreated = true;
+                    }
+
+
+                    chart.addSeries({
+                        name: titles[idx],
+                        type: types[idx],
+                        yAxis: idx === 'UV' ? 'uv' : 'solar',
+                        tooltip: tooltips[idx],
+                        data: resp[idx],
+                        color: config.series[idx.toLowerCase()].colour,
+                        fillOpacity: idx === 'CurrentSolarMax' ? 0.2 : 0.5,
+                        zIndex: 100 - cnt
+                    }, false);
+
+                    cnt++;
+                }
+            });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doSunHours = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'column',
+            alignTicks: false
+        },
+        title: {
+            text: 'Sunshine Hours'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Sunshine Hours'
+            },
+            min: 0,
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -12
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 12
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                pointPadding: 0,
+                groupPadding: 0.1,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            xDateFormat: "%A, %b %e"
+        },
+        series: [{
+            name: 'Sunshine Hours',
+            type: 'column',
+            color: config.series.sunshine.colour,
+            yAxis: 0,
+            valueDecimals: 1,
+            tooltip: {
+                valueSuffix: ' Hrs'
+            }
+        }]
+    };
+
+    chart = new Highcharts.Chart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'sunhours.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.sunhours);
+        }
+    });
+};
+
+var doDailyRain = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'column',
+            alignTicks: false
+        },
+        title: {
+            text: 'Daily Rainfall'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Daily Rainfall'
+            },
+            min: 0,
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -12
+            }
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 12
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                pointPadding: 0,
+                groupPadding: 0.1,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            xDateFormat: "%A, %b %e"
+        },
+        series: [{
+            name: 'Daily Rainfall',
+            type: 'column',
+            color: config.series.rfall.colour,
+            yAxis: 0,
+            valueDecimals: config.rain.decimals,
+            tooltip: {
+                valueSuffix: ' ' + config.rain.units
+            }
+        }]
+    };
+
+    chart = new Highcharts.Chart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'dailyrain.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.dailyrain);
+        }
+    });
+};
+
+var doDailyTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {
+            text: 'Daily Temperature'
+        },
+        credits: {
+            enabled: true
+        },
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+            // left
+            title: {
+                text: 'Daily Temperature (°' + config.temp.units + ')'
+            },
+            opposite: false,
+            labels: {
+                align: 'right',
+                x: -5,
+                formatter: function () {
+                    return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                }
+            },
+            plotLines: [{
+                // freezing line
+                value: freezing,
+                color: 'rgb(0, 0, 180)',
+                width: 1,
+                zIndex: 2
+            }]
+        }, {
+            // right
+            linkedTo: 0,
+            gridLineWidth: 0,
+            opposite: true,
+            title: {
+                text: null
+            },
+            labels: {
+                align: 'left',
+                x: 5,
+                formatter: function () {
+                    return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                }
+            }
+        }],
+        legend: {
+            enabled: true
+        },
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {
+                lineWidth: 2
+            }
+        },
+        tooltip: {
+            shared: true,
+            crosshairs: true,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e"
+        },
+        rangeSelector: {
+            enabled: false
+        },
+        series: []
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'dailytemp.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            var titles = {
+                'avgtemp': 'Avg Temp',
+                'mintemp': 'Min Temp',
+                'maxtemp': 'Max Temp'
+            };
+            var idxs = ['avgtemp', 'mintemp', 'maxtemp'];
+
+            idxs.forEach(function (idx) {
+                if (idx in resp) {
+                    chart.addSeries({
+                        name: titles[idx],
+                        data: resp[idx],
+                        color: config.series[idx].colour
+                    }, false);
+                }
+            });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doAirQuality = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Air Quality'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'µg/m³'},
+                opposite: false,
+                min: 0,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' µg/m³',
+            valueDecimals: 1,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'airquality.json',
+        dataType: 'json',
+        cache: false,
+        success: function (resp) {
+            var titles = {
+                'pm2p5': 'PM 2.5',
+                'pm10' : 'PM 10'
+             }
+             var idxs = ['pm2p5', 'pm10'];
+             idxs.forEach(function(idx) {
+                 if (idx in resp) {
+                     chart.addSeries({
+                         name: titles[idx],
+                         color: config.series[idx].colour,
+                         data: resp[idx]
+                    }, false);
+                 }
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doExtraTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Extra Temperature'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Temperature (°' + config.temp.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                },
+                plotLines: [{
+                        // freezing line
+                        value: freezing,
+                        color: 'rgb(0, 0, 180)',
+                        width: 1,
+                        zIndex: 2
+                    }]
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'extratempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.extratemp.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.extratemp.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doExtraHum = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Extra Humidity'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Humidity (%)'},
+                opposite: false,
+                min: 0,
+                max: 100,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                max: 100,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' %',
+            valueDecimals: config.hum.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'extrahumdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.extrahum.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.extrahum.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doExtraDew = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Extra Dew Point'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Dew Point (°' + config.temp.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                },
+                plotLines: [{
+                        // freezing line
+                        value: freezing,
+                        color: 'rgb(0, 0, 180)',
+                        width: 1,
+                        zIndex: 2
+                    }]
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'extradewdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.extradew.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.extradew.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doSoilTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Soil Temperature'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Temperature (°' + config.temp.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                },
+                plotLines: [{
+                        // freezing line
+                        value: freezing,
+                        color: 'rgb(0, 0, 180)',
+                        width: 1,
+                        zIndex: 2
+                    }]
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'soiltempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.soiltemp.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.soiltemp.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doSoilMoist = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Soil Moisture'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Moisture (' + config.soilmoisture.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' ' + config.soilmoisture.units,
+            valueDecimals: 0,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'soilmoistdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.soilmoist.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.soilmoist.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doLeafWet = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Leaf Wetness'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Leaf Wetness' + (config.leafwet.units == '' ? '' : '(' + config.leafwet.units + ')')},
+                opposite: false,
+                min: 0,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' ' + config.leafwet.units,
+            valueDecimals: config.leafwet.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'leafwetdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.leafwet.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.leafwet.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doUserTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'User Temperature'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Temperature (°' + config.temp.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                },
+                plotLines: [{
+                        // freezing line
+                        value: freezing,
+                        color: 'rgb(0, 0, 180)',
+                        width: 1,
+                        zIndex: 2
+                    }]
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'usertempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var id = config.series.usertemp.name.findIndex(val => val == key);
+                chart.addSeries({
+                    name: key,
+                    color: config.series.usertemp.colour[id],
+                    data: value
+                });
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doCO2 = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'CO&#8322; Sensor'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                id: 'co2',
+                title: {text: 'CO&#8322; (ppm)'},
+                opposite: false,
+                min: 0,
+                minRange: 10,
+                alignTicks: true,
+                showEmpty: false,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: true,
+            xDateFormat: "%A, %b %e, %H:%M"
+        },
+        series: [],
+        rangeSelector: myRangeBtns
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'co2sensordata.json',
+        dataType: 'json',
+        success: function (resp) {
+            Object.entries(resp).forEach(([key, value]) => {
+                var yaxis = 0;
+                var tooltip;
+                // id - remove all spaces and lowercase
+                var id = key.toLowerCase().split(' ').join('');
+
+                if (key == 'CO2' || key == 'CO2 Average') {
+                    yaxis = 'co2';
+                    tooltip = {valueSuffix: ' ppm'};
+                } else if (key.startsWith('PM')) {
+                    yaxis = 'pm';
+                    tooltip = {valueSuffix: ' &#181;g/m&#179;'};
+
+
+                    if (!chart.get('pm')) {
+                        chart.addAxis({
+                            // left
+                            id: 'pm',
+                            title: {text: 'PM (&#181;g/m&#179;)'},
+                            opposite: false,
+                            min: 0,
+                            minRange: 10,
+                            alignTicks: true,
+                            showEmpty: false,
+                            labels: {
+                                align: 'right',
+                                x: -5
+                            }
+                        });
+                    }
+                } else if (key == 'Temperature') {
+                    yaxis = 'temp';
+                    tooltip = {valueSuffix: ' °' + config.temp.units};
+                    chart.addAxis({
+                        // right
+                        id: 'temp',
+                        title: {text: 'Temperature (°' + config.temp.units + ')'},
+                        //gridLineWidth: 0,
+                        opposite: true,
+                        alignTicks: true,
+                        showEmpty: false,
+                        labels: {
+                            align: 'left',
+                            x: 5
+                        }
+                    });
+                } else if (key == 'Humidity') {
+                    yaxis = 'hum';
+                    tooltip = {valueSuffix: ' %'};
+                    chart.addAxis({
+                        // right
+                        id: 'hum',
+                        title: {text: 'Humidity (%)'},
+                        min: 0,
+                        //gridLineWidth: 0,
+                        opposite: true,
+                        alignTicks: true,
+                        showEmpty: false,
+                        labels: {
+                            align: 'left',
+                            x: 5
+                        }
+                    });
+                }
+
+                chart.addSeries({
+                    name: config.series.co2[id].name,
+                    color: config.series.co2[id].colour,
+                    data: value,
+                    yAxis: yaxis,
+                    tooltip: tooltip
+                });
+
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
diff --git a/webfiles/js/historiccharts.js b/webfiles/js/historiccharts.js
new file mode 100644
index 0000000..0b6fdad
--- /dev/null
+++ b/webfiles/js/historiccharts.js
@@ -0,0 +1,1129 @@
+// Last modified: 2023/01/18 16:48:20
+
+var chart, config, available;
+
+$(document).ready(function () {
+    $.ajax({
+        url: "availabledata.json",
+        dataType: "json",
+        success: function (result) {
+            available = result;
+            if (result.Temperature === undefined || result.Temperature.Count == 0) {
+                $('#btnTemp').remove();
+            }
+            if (result.Humidity === undefined || result.Humidity.Count == 0) {
+                $('#btnHum').remove();
+            }
+            if (result.Solar === undefined || result.Solar.Count == 0) {
+                $('#btnSolar').remove();
+            }
+            if (result.DegreeDays === undefined || result.DegreeDays.Count == 0) {
+                $('#btnDegDay').remove();
+            }
+            if (result.TempSum === undefined || result.TempSum.Count == 0) {
+                $('#btnTempSum').remove();
+            }
+        }
+    });
+
+    $.ajax({
+        url: "graphconfig.json",
+        dataType: "json",
+        success: function (result) {
+            config = result;
+            changeGraph(parent.location.hash.replace('#', ''));
+        }
+    });
+});
+
+
+function changeGraph(graph) {
+    switch (graph) {
+        case 'temp':
+            doTemp();
+            break;
+        case 'press':
+            doPress();
+            break;
+        case 'wind':
+            doWind();
+            break;
+        case 'rain':
+            doRain();
+            break;
+        case 'humidity':
+            doHum();
+            break;
+        case 'solar':
+            doSolar();
+            break;
+        case 'degday':
+            doDegDays();
+            break;
+        case 'tempsum':
+            doTempSum();
+            break;
+        default:
+            doTemp();
+            break;
+    }
+    parent.location.hash = graph;
+}
+
+var doTemp = function () {
+    var freezing = config.temp.units === 'C' ? 0 : 32;
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Temperature'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Temperature (°' + config.temp.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                },
+                plotLines: [{
+                    // freezing line
+                    value: freezing,
+                    color: 'rgb(0, 0, 180)',
+                    width: 1,
+                    zIndex: 2
+                }]
+            }, {
+                // right
+                gridLineWidth: 0,
+                opposite: true,
+                linkedTo: 0,
+                labels: {
+                    align: 'left',
+                    x: 5,
+                    formatter: function () {
+                        return '<span style="fill: ' + (this.value <= 0 ? 'blue' : 'red') + ';">' + this.value + '</span>';
+                    }
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' °' + config.temp.units,
+            valueDecimals: config.temp.decimals,
+            xDateFormat: '%e %b %y'
+        },
+        series: [],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailytempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+           var titles = {
+               'minTemp'  : 'Min Temp',
+               'maxTemp'  : 'Max Temp',
+               'avgTemp'  : 'Avg Temp',
+               'heatIndex': 'Heat Index',
+               'minApp'   : 'Min Apparent',
+               'maxApp'   : 'Max Apparent',
+               'minDew'   : 'Min Dewpoint',
+               'maxDew'   : 'Max Dewpoint',
+               'minFeels' : 'Min Feels',
+               'maxFeels' : 'Max Feels',
+               'humidex'  : 'Humidex',
+               'windChill': 'Wind Chill'
+            };
+            var visibility = {
+                'minTemp'  : true,
+                'maxTemp'  : true,
+                'avgTemp'  : false,
+                'heatIndex': false,
+                'minApp'   : false,
+                'maxApp'   : false,
+                'minDew'   : false,
+                'maxDew'   : false,
+                'minFeels' : false,
+                'maxFeels' : false,
+                'humidex'  : false,
+                'windChill': false
+             };
+            var idxs = ['minTemp', 'maxTemp', 'avgTemp', 'heatIndex', 'minApp', 'maxApp', 'minDew', 'maxDew', 'minFeels', 'maxFeels', 'windChill', 'humidex'];
+
+            idxs.forEach(function(idx) {
+                var valueSuffix = ' °' + config.temp.units;
+                yaxis = 0;
+
+                if (idx in resp) {
+                    var clrIdx = idx.toLowerCase();
+                    if ('heatIndex' === idx || 'humidex' === idx) {
+                        clrIdx = 'max' + clrIdx;
+                    } else if ('windChill' === idx) {
+                        clrIdx = 'min' + clrIdx;
+                    }
+
+                    if (idx === 'humidex') {
+                        valueSuffix = null;
+                        // Link Humidex and temp scales if using Celsius
+                        // For Fahrenheit use separate scales
+                        if (config.temp.units === 'F') {
+                            chart.yAxis[1].remove();
+                            chart.addAxis({
+                                id: 'humidex',
+                                title:{text: 'Humidex'},
+                                opposite: true,
+                                labels: {
+                                    align: 'left'
+                                },
+                                alignTicks: true,
+                                gridLineWidth: 0, // Not working?
+                                gridZIndex: -10, // Hides the grid lines for this axis
+                                showEmpty: false
+                            });
+                            yaxis = 'humidex';
+                        }
+                    }
+
+                    chart.addSeries({
+                        name: titles[idx],
+                        data: resp[idx],
+                        color: config.series[clrIdx].colour,
+                        visible: visibility[idx],
+                        showInNavigator: visibility[idx],
+                        yAxis: yaxis,
+                        tooltip: {valueSuffix: valueSuffix}
+                    }, false);
+                }
+            });
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doPress = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Pressure'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Pressure (' + config.press.units + ')'},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' ' + config.press.units,
+            valueDecimals: config.press.decimals,
+            xDateFormat: '%e %b %y'
+        },
+        series: [{
+                name: 'High Pressure',
+                color: config.series.maxpress.colour,
+                showInNavigator: true
+            }, {
+                name: 'Low Pressure',
+                color: config.series.minpress.colour,
+                showInNavigator: true
+            }],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailypressdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.maxBaro);
+            chart.series[1].setData(resp.minBaro);
+        }
+    });
+};
+
+var compassP = function (deg) {
+    var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+    return a[Math.floor((deg + 22.5) / 45) % 8];
+};
+
+var doWind = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Wind Speed'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Wind Speed (' + config.wind.units + ')'},
+                opposite: false,
+                min: 0,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                //linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                title: {text: 'Wind Run (' + config.wind.rununits + ')'},
+                labels: {
+                    align: 'left',
+                    x: 5
+                },
+                showEmpty: false
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' ' + config.wind.units,
+            valueDecimals: config.wind.decimals,
+            xDateFormat: '%e %b %y'
+        },
+        series: [{
+                name: 'Wind Speed',
+                color: config.series.wspeed.colour,
+                showInNavigator: true
+            }, {
+                name: 'Wind Gust',
+                color: config.series.wgust.colour,
+                showInNavigator: true
+            }, {
+                name: 'Wind Run',
+                type: 'column',
+                color: config.series.windrun.colour,
+                yAxis: 1,
+                visible: false,
+                tooltip: {
+                    valueSuffix: ' ' + config.wind.rununits,
+                    valueDecimals: 0
+                },
+                zIndex: -1
+            }],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailywinddata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.maxWind);
+            chart.series[1].setData(resp.maxGust);
+            chart.series[2].setData(resp.windRun);
+        }
+    });
+};
+
+var doRain = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'column',
+            alignTicks: true
+        },
+        title: {text: 'Rainfall'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Rainfall (' + config.rain.units + ')'},
+                opposite: false,
+                min: 0,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                title: {text: 'Rainfall rate (' + config.rain.units + '/hr)'},
+                opposite: true,
+                min: 0,
+                labels: {
+                    align: 'left',
+                    x: 5
+                },
+                showEmpty: false
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                pointPadding: 0,
+                groupPadding: 0.1,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueDecimals: config.rain.decimals,
+            xDateFormat: '%e %b %y'
+        },
+        series: [{
+                name: 'Daily rain',
+                type: 'column',
+                color: config.series.rfall.colour,
+                yAxis: 0,
+                tooltip: {valueSuffix: ' ' + config.rain.units}
+            }, {
+                name: 'Rain rate',
+                type: 'column',
+                color: config.series.rrate.colour,
+                yAxis: 1,
+                tooltip: {valueSuffix: ' ' + config.rain.units + '/hr'},
+                visible: false
+            }],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailyraindata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.series[0].setData(resp.rain);
+            chart.series[1].setData(resp.maxRainRate);
+        }
+    });
+};
+
+var doHum = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false
+        },
+        title: {text: 'Relative Humidity'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Humidity (%)'},
+                opposite: false,
+                min: 0,
+                max: 100,
+                labels: {
+                    align: 'right',
+                    x: -5
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                max: 100,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 5
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            valueSuffix: ' %',
+            valueDecimals: config.hum.decimals,
+            xDateFormat: '%e %b %y'
+        },
+        series: [],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailyhumdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            var titles = {
+                'minHum'  : 'Minimum Humidity',
+                'maxHum': 'Maximum Humidity'
+             }
+             var idxs = ['minHum', 'maxHum'];
+             var cnt = 0;
+             idxs.forEach(function(idx) {
+                 if (idx in resp) {
+                     chart.addSeries({
+                         name: titles[idx],
+                         color: config.series[idx.toLowerCase()].colour,
+                         data: resp[idx],
+                         showInNavigator: true
+                     }, false);
+
+                     cnt++;
+                 }
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doSolar = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: true
+        },
+        title: {text: 'Solar'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b %y',
+                week: '%e %b %y',
+                month: '%b %y',
+                year: '%Y'
+            }
+        },
+        yAxis: [],
+        legend: {enabled: true},
+        plotOptions: {
+            boostThreshold: 0,
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                pointPadding: 0,
+                groupPadding: 0.1,
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            xDateFormat: '%e %b %y'
+        },
+        series: [],
+        rangeSelector: {
+            inputEnabled: false,
+            selected: 1
+        }
+    };
+
+    chart = new Highcharts.StockChart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailysolardata.json',
+        dataType: 'json',
+        success: function (resp) {
+            var titles = {
+                solarRad: 'Solar Radiation',
+                uvi     : 'UV Index',
+                sunHours: 'Sunshine Hours'
+            };
+            var types = {
+                solarRad: 'area',
+                uvi     : 'line',
+                sunHours: 'column'
+            };
+            var tooltips = {
+                solarRad: {
+                    valueSuffix: ' W/m\u00B2',
+                    valueDecimals: 0
+                },
+                uvi: {
+                    valueSuffix: ' ',
+                    valueDecimals: config.uv.decimals
+                },
+                sunHours: {
+                    valueSuffix: ' hours',
+                    valueDecimals: 0
+                }
+            };
+            var indexes = {
+                solarRad: 1,
+                uvi     : 2,
+                sunHours: 0
+            }
+            var fillColor = {
+                solarRad: {
+                    linearGradient: {
+                        x1: 0,
+                        y1: 0,
+                        x2: 0,
+                        y2: 1
+                    },
+                    stops: [
+                        [0, config.series.solarrad.colour],
+                        [1, Highcharts.color(config.series.solarrad.colour).setOpacity(0).get('rgba')]
+                    ]
+                },
+                uvi     : null,
+                sunHours: null
+            };
+            var idxs = ['solarRad', 'uvi', 'sunHours'];
+
+            idxs.forEach(function(idx) {
+                if (idx in resp) {
+                    var clrIdx;
+                    if (idx === 'uvi')
+                        clrIdx ='uv';
+                    else if (idx === 'solarRad')
+                        clrIdx = 'solarrad';
+                    else if (idx === 'sunHours')
+                        clrIdx = 'sunshine';
+
+                    if (idx === 'uvi') {
+                        chart.addAxis({
+                            id: idx,
+                            title: {text: 'UV Index'},
+                            opposite: true,
+                            min: 0,
+                            labels: {
+                                align: 'left'
+                            },
+                            showEmpty: false
+                        });
+                    } else if (idx === 'sunHours') {
+                        chart.addAxis({
+                            id: idx,
+                            title: {text: 'Sunshine Hours'},
+                            opposite: true,
+                            min: 0,
+                            labels: {
+                                align: 'left'
+                            },
+                            showEmpty: false
+                        });
+                    } else if (idx === 'solarRad') {
+                        chart.addAxis({
+                            id: idx,
+                            title: {text: 'Solar Radiation (W/m\u00B2)'},
+                            min: 0,
+                            opposite: false,
+                            labels: {
+                                align: 'right',
+                                x: -5
+                            },
+                            showEmpty: false
+                        });
+                    }
+                    chart.addSeries({
+                        name: titles[idx],
+                        type: types[idx],
+                        yAxis: idx,
+                        tooltip: tooltips[idx],
+                        data: resp[idx],
+                        color: config.series[clrIdx].colour,
+                        showInNavigator: idx !== 'sunHours',
+                        index: indexes[idx],
+                        fillColor: fillColor[idx],
+                        zIndex: idx === 'uvi' ? 99 : null
+                    }, false);
+                }
+            });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doDegDays = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false,
+            zoomType: 'x'
+        },
+        title: {text: 'Degree Days'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b',
+                month: '%b',
+                year: ''
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: '°' + config.temp.units + ' days'},
+                opposite: false,
+                min: 0,
+                labels: {
+                    align: 'right',
+                    x: -10
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                min: 0,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 10
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            xDateFormat: '%e %B',
+            useHTML: true,
+            headerFormat: '{point.key}<table>',
+            pointFormat: '<tr><td style="font: 9pt Trebuchet MS, Verdana, sans-serif"><span style="color:{series.color}">\u25CF</span> {series.name}: </td>' +
+            '<td style="text-align: right; font-weight: 900; font-size: 1.2em; font-family: monospace">{point.y:.1f}</td></tr>',
+            footerFormat: '</table>'
+        },
+        series: []
+    };
+
+    chart = new Highcharts.Chart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alldailydegdaydata.json',
+        dataType: 'json',
+        success: function (resp) {
+            var subtitle = '';
+            if (available.DegreeDays.indexOf('GDD1') != -1) {
+                subtitle = 'GDD#1 base: ' + resp.options.gddBase1 + '°' + config.temp.units;
+                if (available.DegreeDays.indexOf('GDD2') != -1) {
+                    subtitle += ' - ';
+                }
+            }
+            if (available.DegreeDays.indexOf('GDD2') != -1) {
+                subtitle += 'GDD#2 base: ' + resp.options.gddBase2 + '°' + config.temp.units;
+            }
+
+            chart.setSubtitle({text: subtitle});
+
+            available.DegreeDays.forEach(idx => {
+                 if (idx in resp) {
+                    Object.keys(resp[idx]).forEach(yr => {
+                        chart.addSeries({
+                            name: idx + '-' + yr,
+                            visible: false,
+                            data: resp[idx][yr]
+                        }, false);
+                    });
+                    // make the last series visible
+                    chart.series[chart.series.length -1].visible = true;
+                 }
+             });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
+
+var doTempSum = function () {
+    var options = {
+        chart: {
+            renderTo: 'chartcontainer',
+            type: 'line',
+            alignTicks: false,
+            zoomType: 'x'
+        },
+        title: {text: 'Temperature Sum'},
+        credits: {enabled: true},
+        xAxis: {
+            type: 'datetime',
+            ordinal: false,
+            dateTimeLabelFormats: {
+                day: '%e %b',
+                week: '%e %b',
+                month: '%b',
+                year: ''
+            }
+        },
+        yAxis: [{
+                // left
+                title: {text: 'Total °' + config.temp.units},
+                opposite: false,
+                labels: {
+                    align: 'right',
+                    x: -10
+                }
+            }, {
+                // right
+                linkedTo: 0,
+                gridLineWidth: 0,
+                opposite: true,
+                title: {text: null},
+                labels: {
+                    align: 'left',
+                    x: 10
+                }
+            }],
+        legend: {enabled: true},
+        plotOptions: {
+            series: {
+                dataGrouping: {
+                    enabled: false
+                },
+                states: {
+                    hover: {
+                        halo: {
+                            size: 5,
+                            opacity: 0.25
+                        }
+
+                    }
+                },
+                cursor: 'pointer',
+                marker: {
+                    enabled: false,
+                    states: {
+                        hover: {
+                            enabled: true,
+                            radius: 0.1
+                        }
+                    }
+                }
+            },
+            line: {lineWidth: 2}
+        },
+        tooltip: {
+            shared: true,
+            split: false,
+            xDateFormat: '%e %B',
+            useHTML: true,
+            headerFormat: '{point.key}<table>',
+            pointFormat: '<tr style="font: 9pt Trebuchet MS, Verdana, sans-serif"><td><span style="color:{series.color}">\u25CF</span> {series.name}: </td>' +
+            '<td style="text-align: right; font-weight: 900; font-size: 1.2em; font-family: monospace">{point.y:0f}</td></tr>',
+            footerFormat: '</table>'
+        },
+        series: []
+    };
+
+    chart = new Highcharts.Chart(options);
+    chart.showLoading();
+
+    $.ajax({
+        url: 'alltempsumdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            var subtitle = '';
+            if (available.TempSum.indexOf('Sum0') != -1) {
+                subtitle = 'Sum#0 base: 0°' + config.temp.units;
+                if (available.TempSum.indexOf('Sum1') != -1 || available.TempSum.indexOf('Sum2') != -1) {
+                    subtitle += ' - ';
+                }
+            }
+            if (available.TempSum.indexOf('Sum1') != -1) {
+                subtitle += 'Sum#1 base: ' + resp.options.sumBase1 + '°' + config.temp.units;
+                if (available.TempSum.indexOf('Sum2') != -1) {
+                    subtitle += ' - ';
+                }
+            }
+            if (available.TempSum.indexOf('Sum2') != -1) {
+                subtitle += 'Sum#2 base: ' + resp.options.sumBase2 + '°' + config.temp.units;
+            }
+
+            chart.setSubtitle({text: subtitle});
+
+            available.TempSum.forEach(idx => {
+                if (idx in resp) {
+                   Object.keys(resp[idx]).forEach(yr => {
+                       chart.addSeries({
+                           name: idx + '-' + yr,
+                           visible: false,
+                           data: resp[idx][yr]
+                       }, false);
+                   });
+                   // make the last series visible
+                   chart.series[chart.series.length -1].visible = true;
+                }
+            });
+
+            chart.hideLoading();
+            chart.redraw();
+        }
+    });
+};
diff --git a/webfiles/js/menu.js b/webfiles/js/menu.js
new file mode 100644
index 0000000..9f7d7f2
--- /dev/null
+++ b/webfiles/js/menu.js
@@ -0,0 +1,36 @@
+/*
+ Menu configuration file for NEW CuMX template
+ Last modified: 2022/07/05 11:39:38
+ menu.js - typical name, you define the one used in setpagedata.js
+
+ It is STRONGLY RECOMMENDED that if you customise this file, you create a new file with a different name, e.g. mymenu.js
+ and change setpagedata.js to use that file. This will avoid your customisations being accidentally overwritten during upgrades
+
+ Properties:
+   .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow menu ONLY)
+   .new_window:true  - forces the link to open in new browser window
+   .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+   .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+*/
+
+menuSrc = [
+	{title: "Now",          menu: "b",    url: "index.htm"},
+	{title: "Today",        menu: "b",    url: "today.htm"},
+	{title: "Yesterday",    menu: "b",    url: "yesterday.htm"},
+	{title: "Today-Yest",   menu: "b",    url: "todayyest.htm"},
+	{title: "Gauges",       menu: "b",    url: "gauges.htm"},
+	{title: "Records",      menu: "b",    submenu: true,       items: [
+		{title: "This Month",        menu: "b",    url: "thismonth.htm"},
+		{title: "This Year",         menu: "b",    url: "thisyear.htm"},
+		{title: "All Time",          menu: "b",    url: "record.htm"},
+		{title: "Monthly",           menu: "b",    url: "monthlyrecord.htm"}
+	]},
+	{title: "Charts",    menu: "b",    submenu: true,    items: [
+		{title: "Trends",            menu: "b",    url: "trends.htm"},
+		{title: "Select-a-graph",    menu: "b",    url: "selectachart.htm"},
+		{title: "Historic",          menu: "b",    url: "historic.htm"}
+	]},
+	{title: "Reports",   menu: "b",    url: "noaareport.htm"},
+	{title: "Forum",     menu: "b",    url: "#",    forum: true,    new_window: true},
+	{title: "Webcam",    menu: "b",    url: "#",    webcam: true}
+];
diff --git a/webfiles/js/menuSample.js b/webfiles/js/menuSample.js
new file mode 100644
index 0000000..68277c6
--- /dev/null
+++ b/webfiles/js/menuSample.js
@@ -0,0 +1,38 @@
+/*
+ An example extended/modified Menu configuration file for NEW CuMX template
+ Last modified: 2021/03/19 09:17:14
+ menuSample.js - typical name, you define the one used in setpagedata.js
+
+ Properties:
+   .menu             - can be 'b' (both menus), 'w' (wide menu ONLY), 'n' (narrow menu ONLY)
+   .new_window:true  - forces the link to open in new browser window
+   .forum:true       - flags a forum link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+   .webcam:true      - flags a webcam link menu item, it will use the url provided in CuMX config, if that is blank the menu item will be hidden
+*/
+
+menuSrc = [
+	{title: "Now",          menu: "b",    url: "index.htm"},
+	{title: "Today",        menu: "b",    url: "today.htm"},
+	{title: "Yesterday",    menu: "b",    url: "yesterday.htm"},
+	{title: "Gauges",       menu: "b",    url: "gauges.htm"},
+	{title: "Records",      menu: "b",    submenu: true,       items: [
+		{title: "This Month",        menu: "b",    url: "thismonth.htm"},
+		{title: "This Year",         menu: "b",    url: "thisyear.htm"},
+		{title: "All Time",          menu: "b",    url: "record.htm"},
+		{title: "Monthly",           menu: "b",    url: "monthlyrecord.htm"}
+	]},
+	{title: "Charts",    menu: "b",    submenu: true,    items: [
+		{title: "Trends",            menu: "b",    url: "trends.htm"},
+		{title: "Select-a-graph",    menu: "b",    url: "selectachart.htm"},
+		{title: "Historic",          menu: "b",    url: "historic.htm"}
+	]},
+	{title: "Reports",   menu: "b",    url: "noaareport.htm"},
+	{title: "Forum",     menu: "n",    url: "#",    new_window: true},
+	{title: "Webcam",    menu: "n",    url: "#",    new_window: true},
+	{title: "Other Links",    menu: "w",    submenu: true,    items: [
+		{title: "Cumulus Forum",     menu: "w",    url: "#",    forum: true,     new_window: true},
+		{title: "Webcam",            menu: "b",    url: "#",    webcam: true,    new_window: true},
+		{title: "My Cat",            menu: "b",    url: "mycatpage.htm"},
+		{title: "Some Cat",          menu: "b",    url: "https://pixnio.com/free-images/2020/07/26/2020-07-26-08-52-19-1200x1200.jpg",    new_window: true}
+	]}
+];
diff --git a/webfiles/js/monthlyrecdata.js b/webfiles/js/monthlyrecdata.js
new file mode 100644
index 0000000..6b8528c
--- /dev/null
+++ b/webfiles/js/monthlyrecdata.js
@@ -0,0 +1,74 @@
+// Last modified: 2022/07/27 15:35:57
+
+$(document).ready(function() {
+	dataLoadedPromise.then(function() {
+		var yesterday = new Date()
+		yesterday.setDate(yesterday.getDate() - 1)
+		changeData(yesterday.getMonth());
+		$('#btnMon' + yesterday.getMonth()).attr('aria-pressed', true);
+	});
+});
+
+var monthnames = new Array("January","February","March","April","May","June","July","August","September","October","November","December");
+
+function changeData(month) {
+	document.getElementById('MonthName').innerHTML = monthnames[month];
+	document.getElementById('TempH').innerHTML = cmx_data.monthlyrecs.hightemp[month];
+	document.getElementById('TempHT').innerHTML = cmx_data.monthlyrecs.hightempT[month];
+	document.getElementById('TempL').innerHTML = cmx_data.monthlyrecs.lowtemp[month];
+	document.getElementById('TempLT').innerHTML = cmx_data.monthlyrecs.lowtempT[month];
+	document.getElementById('DewPointH').innerHTML = cmx_data.monthlyrecs.highDP[month];
+	document.getElementById('DewPointHT').innerHTML = cmx_data.monthlyrecs.highDPT[month];
+	document.getElementById('DewPointL').innerHTML = cmx_data.monthlyrecs.lowDP[month];
+	document.getElementById('DewPointLT').innerHTML = cmx_data.monthlyrecs.lowDPT[month];
+	document.getElementById('AppTempH').innerHTML = cmx_data.monthlyrecs.highapptemp[month];
+	document.getElementById('AppTempHT').innerHTML = cmx_data.monthlyrecs.highapptempT[month];
+	document.getElementById('AppTempL').innerHTML = cmx_data.monthlyrecs.lowapptemp[month];
+	document.getElementById('AppTempLT').innerHTML = cmx_data.monthlyrecs.lowapptempT[month];
+	document.getElementById('FeelsLikeH').innerHTML = cmx_data.monthlyrecs.highfeelslike[month];
+	document.getElementById('FeelsLikeHT').innerHTML = cmx_data.monthlyrecs.highfeelslikeT[month];
+	document.getElementById('FeelsLikeL').innerHTML = cmx_data.monthlyrecs.lowfeelslike[month];
+	document.getElementById('FeelsLikeLT').innerHTML = cmx_data.monthlyrecs.lowfeelslikeT[month];
+	document.getElementById('WChillL').innerHTML = cmx_data.monthlyrecs.lowchill[month];
+	document.getElementById('WChillLT').innerHTML = cmx_data.monthlyrecs.lowchillT[month];
+	document.getElementById('HeatIndexH').innerHTML = cmx_data.monthlyrecs.highheatindex[month];
+	document.getElementById('HeatIndexHT').innerHTML = cmx_data.monthlyrecs.highheatindexT[month];
+	document.getElementById('MinTempH').innerHTML = cmx_data.monthlyrecs.highmintemp[month];
+	document.getElementById('MinTempHT').innerHTML = cmx_data.monthlyrecs.highmintempT[month];
+	document.getElementById('MaxTempL').innerHTML = cmx_data.monthlyrecs.lowmaxtemp[month];
+	document.getElementById('MaxTempLT').innerHTML = cmx_data.monthlyrecs.lowmaxtempT[month];
+	document.getElementById('HumH').innerHTML = cmx_data.monthlyrecs.highhum[month];
+	document.getElementById('HumHT').innerHTML = cmx_data.monthlyrecs.highhumT[month];
+	document.getElementById('HumL').innerHTML = cmx_data.monthlyrecs.lowhum[month];
+	document.getElementById('HumLT').innerHTML = cmx_data.monthlyrecs.lowhumT[month];
+	document.getElementById('HighDailyTempRange').innerHTML = cmx_data.monthlyrecs.hightemprange[month];
+	document.getElementById('HighDailyTempRangeT').innerHTML = cmx_data.monthlyrecs.hightemprangeT[month];
+	document.getElementById('LowDailyTempRange').innerHTML = cmx_data.monthlyrecs.lowtemprange[month];
+	document.getElementById('LowDailyTempRangeT').innerHTML = cmx_data.monthlyrecs.lowtemprangeT[month];
+	document.getElementById('RainRateH').innerHTML = cmx_data.monthlyrecs.rainrate[month];
+	document.getElementById('RainRateHT').innerHTML = cmx_data.monthlyrecs.rainrateT[month];
+	document.getElementById('HourlyRainH').innerHTML = cmx_data.monthlyrecs.hourlyrain[month];
+	document.getElementById('HourlyRainHT').innerHTML = cmx_data.monthlyrecs.hourlyrainT[month];
+	document.getElementById('Rain24HourH').innerHTML = cmx_data.monthlyrecs.rain24h[month];
+	document.getElementById('Rain24HourHT').innerHTML = cmx_data.monthlyrecs.rain24hT[month];
+	document.getElementById('DailyRainH').innerHTML = cmx_data.monthlyrecs.dailyrain[month];
+	document.getElementById('DailyRainHT').innerHTML = cmx_data.monthlyrecs.dailyrainT[month];
+	document.getElementById('MonthlyRainH').innerHTML = cmx_data.monthlyrecs.monthlyrain[month];
+	document.getElementById('MonthlyRainHT').innerHTML = cmx_data.monthlyrecs.monthlyrainT[month];
+	document.getElementById('LongestDryPeriod').innerHTML = cmx_data.monthlyrecs.dryperiod[month];
+	document.getElementById('LongestDryPeriodT').innerHTML = cmx_data.monthlyrecs.dryperiodT[month];
+	document.getElementById('LongestWetPeriod').innerHTML = cmx_data.monthlyrecs.wetperiod[month];
+	document.getElementById('LongestWetPeriodT').innerHTML = cmx_data.monthlyrecs.wetperiodT[month];
+	document.getElementById('GustH').innerHTML = cmx_data.monthlyrecs.highgust[month];
+	document.getElementById('GustHT').innerHTML = cmx_data.monthlyrecs.highgustT[month];
+	document.getElementById('WindH').innerHTML = cmx_data.monthlyrecs.highwind[month];
+	document.getElementById('WindHT').innerHTML = cmx_data.monthlyrecs.highwindT[month];
+	document.getElementById('WindRunH').innerHTML = cmx_data.monthlyrecs.highwindrun[month];
+	document.getElementById('WindRunHT').innerHTML = cmx_data.monthlyrecs.highwindrunT[month];
+	document.getElementById('PressL').innerHTML = cmx_data.monthlyrecs.lowpress[month];
+	document.getElementById('PressLT').innerHTML = cmx_data.monthlyrecs.lowpressT[month];
+	document.getElementById('PressH').innerHTML = cmx_data.monthlyrecs.highpress[month];
+	document.getElementById('PressHT').innerHTML = cmx_data.monthlyrecs.highpressT[month];
+	$('#btnArray').children('button').attr("aria-pressed", false);
+	$('#btnMon' + month).attr('aria-pressed', true);
+}
diff --git a/webfiles/js/noaarpts.js b/webfiles/js/noaarpts.js
new file mode 100644
index 0000000..f501d15
--- /dev/null
+++ b/webfiles/js/noaarpts.js
@@ -0,0 +1,142 @@
+/*	----------------------------------------------------------
+ *  noaarpts.js
+ *  Last modified: 2021/07/10 13:19:42
+ *  Populates the dropdown menus using the records began date
+ *
+ * 	Requires jQuery
+ * 	----------------------------------------------------------*/
+
+let rptPath = 'Reports/';  // Your path should have a trailing "/", eg. 'Reports/'
+let startYear, endYear;
+let startMonth, endMonth;
+let rptAvail = {};
+
+if (rptPath.length  && rptPath.slice(-1) !== '/')
+    rptPath += '/';
+
+$(document).ready(function() {
+    dataLoadedPromise.then(function() {
+        startYear = cmx_data.recordsbegandateISO.split('-')[0] * 1;
+        startMonth = cmx_data.recordsbegandateISO.split('-')[1] * 1;
+        endYear = cmx_data.metdateyesterdayISO.split('-')[0] * 1;
+        endMonth = cmx_data.metdateyesterdayISO.split('-')[1] * 1;
+
+        // This does the initial disable of out of range months this year
+        rptAvail[endYear] = [];
+        for (let m = 1; m < 13; m++) {
+            // greater than end month
+            rptAvail[endYear][m] = m <= endMonth;
+            // if start year is this year, then less start month
+            if (startYear == endYear) {
+                rptAvail[endYear][m] = rptAvail[endYear][m] && m >= startMonth
+            }
+            $('#opt-' + m).prop('hidden', !rptAvail[endYear][m]);
+        }
+
+        // get the current year report and display it whilst we sort out the rest in background
+        getYearRpt(endYear);
+
+        // add the year select dropdown values, most recent first
+        for (let y = endYear; y >= startYear; y--) {
+            let option = $('<option />');
+            option.html(y);
+            option.val(y);
+
+            $('#year').append(option);
+
+            rptAvail[y] = [];
+
+            // The start and end years may be short, so no point in checking months that are out of range
+            let monSt, monEnd;
+            if (y == startYear || y == endYear) {
+                monSt = y == startYear ? startMonth : 1;
+                monEnd = y == endYear ? endMonth : 12;
+            } else {
+                monSt = 1;
+                monEnd = 12;
+            }
+
+            // we need to process every month though, so we can disbale those out of range as well as MIA
+            for (let m = 1; m <= 12; m++) {
+                // assume this month isn't available
+                rptAvail[y][m] = false;
+
+                if (m >= monSt && m <= monEnd) {
+                    // assume it's there, then we only have to check for failure
+                    rptAvail[y][m] = true;
+                    // checking...
+                    $.ajax({
+                        url: rptPath + 'NOAAMO' + pad2(m) + pad2(y - 2000) + '.txt',
+                        type: 'HEAD',
+                        error: function() {
+                            rptAvail[y][m] = false;
+                            // if we are in the year currently being displayed...
+                            if (y == $('#year').val()) {
+                                // ...disable of any months that should be available but aren't
+                                $('#opt-' + m).prop('hidden', true);
+                            }
+                        }
+                    });
+                }
+            }
+        }
+    });
+});
+
+// pad two digit numbers with a leading zero
+let pad2 = function (num) {
+    return (num < 10 ? '0' : '') + num;
+}
+
+// Script assumes that reports use the default name format
+let getMonRpt = function(month) {
+    let yr  = $('#year').val();
+
+    // Is annual selected? If so, show the yearly report
+    if (month === '0') {
+        getYearRpt(yr);
+        return;
+    }
+
+    reqRpt = rptPath + 'NOAAMO' + pad2(month) + pad2(yr - 2000) + '.txt';
+
+    $.ajax({
+        url: reqRpt,
+        dataType: 'text',
+        success: function(data) {
+            $('#noaareport').text(data);
+        },
+        error: function() {
+            alert('Did not find the required report\n\nPlease try another date');
+        }
+    });
+};
+
+// Script assumes that reports use the default name format
+let getYearRpt = function(yr) {
+    let reqRpt = rptPath + 'NOAAYR' + yr + '.txt';
+
+    // set the month buttons for the new year
+    for (let m = 1; m < 13; m++) {
+        $('#opt-' + m).prop('hidden', !rptAvail[yr][m]);
+    }
+
+    // Do we have a month selected? If so show the month report for the new year
+    let mon = $('#month').val();
+    if (mon != '0') {
+        getMonRpt(mon);
+        return;
+    }
+
+    // get the report text
+    $.ajax({
+        url: reqRpt,
+        dataType: 'text',
+        success: function(data) {
+            $('#noaareport').text(data);
+        },
+        error: function() {
+            alert('Did not find the required report\n\nPlease try another date');
+        }
+    });
+};
diff --git a/webfiles/js/selectachart.js b/webfiles/js/selectachart.js
new file mode 100644
index 0000000..31434ef
--- /dev/null
+++ b/webfiles/js/selectachart.js
@@ -0,0 +1,1465 @@
+// Created: 2021/01/26 13:54:44
+// Last modified: 2023/03/16 11:00:22
+
+var chart, config, options;
+var settings;
+var freezing;
+var txtSelect = 'Select Series';
+var txtClear = 'Clear Series';
+
+var compassP = function (deg) {
+    var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+    return a[Math.floor((deg + 22.5) / 45) % 8];
+};
+
+
+$(document).ready(function () {
+    settings = prefs.load();
+
+    $.ajax({url: 'availabledata.json', dataType: "json", success: function (result1) {
+        $.ajax({url: "graphconfig.json", dataType: "json", success: function (result2) {
+            config = result2;
+
+            // add the default select option
+            var option = $('<option />');
+            option.html(txtSelect);
+            option.val(0);
+            $('#data0').append(option.clone());
+            $('#data1').append(option.clone());
+            $('#data2').append(option.clone());
+            $('#data3').append(option.clone());
+            $('#data4').append(option.clone());
+            $('#data5').append(option);
+
+            // then the real series options
+            for (var k in result1) {
+                if (['DailyTemps', 'Sunshine', 'DegreeDays', 'TempSum', 'CO2'].indexOf(k) === -1) {
+                    var optgrp = $('<optgroup />');
+                    optgrp.attr('label', k);
+                    result1[k].forEach(function (val) {
+                        var option = $('<option />');
+                        option.html(val);
+                            if (['ExtraTemp', 'ExtraHum', 'ExtraDewPoint', 'SoilMoist', 'SoilTemp', 'UserTemp', 'LeafWetness'].indexOf(k) === -1) {
+                                option.val(val);
+                            } else {
+                                option.val(k + '-' + val);
+                            }
+                            optgrp.append(option);
+                    });
+                    $('#data0').append(optgrp.clone());
+                    $('#data1').append(optgrp.clone());
+                    $('#data2').append(optgrp.clone());
+                    $('#data3').append(optgrp.clone());
+                    $('#data4').append(optgrp.clone());
+                    $('#data5').append(optgrp);
+                }
+            }
+
+            // add the chart theme colours
+            Highcharts.theme.colors.forEach(function(col, idx) {
+                var option = $('<option style="background-color:' + col + '"/>');
+                option.html(idx);
+                option.val(col);
+                $('#colour0').append(option.clone());
+                $('#colour1').append(option.clone());
+                $('#colour2').append(option.clone());
+                $('#colour3').append(option.clone());
+                $('#colour4').append(option.clone());
+                $('#colour5').append(option);
+            });
+
+            // Draw the basic chart
+            freezing = config.temp.units === 'C' ? 0 : 32;
+            var options = {
+                chart: {
+                    renderTo: 'chartcontainer',
+                    type: 'line',
+                    alignTicks: true
+                },
+                title: {text: 'Recent Data Select-a-Chart'},
+                credits: {enabled: true},
+                xAxis: {
+                    type: 'datetime',
+                    ordinal: false,
+                    dateTimeLabelFormats: {
+                        day: '%e %b',
+                        week: '%e %b %y',
+                        month: '%b %y',
+                        year: '%Y'
+                    }
+                },
+                yAxis: [],
+                legend: {enabled: true},
+                plotOptions: {
+                    series: {
+                        dataGrouping: {
+                            enabled: false
+                        },
+                        states: {
+                            hover: {
+                                halo: {
+                                    size: 5,
+                                    opacity: 0.25
+                                }
+                            }
+                        },
+                        cursor: 'pointer',
+                        marker: {
+                            enabled: false,
+                            states: {
+                                hover: {
+                                    enabled: true,
+                                    radius: 0.1
+                                }
+                            }
+                        }
+                    },
+                    line: {lineWidth: 2}
+                },
+                tooltip: {
+                    shared: true,
+                    split: false,
+                    xDateFormat: '%A, %b %e, %H:%M'
+                },
+                series: [],
+                rangeSelector: {
+                    buttons: [{
+                            count: 12,
+                            type: 'hour',
+                            text: '12h'
+                        }, {
+                            count: 24,
+                            type: 'hour',
+                            text: '24h'
+                        }, {
+                            count: 2,
+                            type: 'day',
+                            text: '2d'
+                        }, {
+                            type: 'all',
+                            text: 'All'
+                        }],
+                    inputEnabled: false,
+                    selected: 1
+                }
+            };
+
+            // draw the basic chart framework
+            chart = new Highcharts.StockChart(options);
+
+            // Set the dropdowns to defaults or previous values
+            for (var i = 0; i < 6; i++) {
+                $('#colour' + i).css('text-indent', '-99px');
+                if (settings.colours[i] == '' || settings.colours[i] == null) {
+                    $('#colour' + i).css('background', chart.options.colors[i]);
+                    $('#colour' + i).val(chart.options.colors[i]);
+                    settings.colours[i] = chart.options.colors[i];
+                } else {
+                    $('#colour' + i).css('background', settings.colours[i]);
+                    $('#colour' + i).val(settings.colours[i]);
+                }
+                if (settings.series[i] != '0') {
+                    // This series has some data associated with it
+                    $('#data' + i + ' option:contains(' + txtSelect +')').text(txtClear);
+                    $('#data' + i).val(settings.series[i]);
+                    // Draw it on the chart
+                    updateChart(settings.series[i], i, 'data' + i);
+                }
+            }
+        }});
+    }});
+});
+
+
+var prefs = {
+    data: {
+        series: ['0','0','0','0','0','0'],
+        colours: ['','','','','','']
+    },
+    load: function () {
+        var cookie = document.cookie.split(';');
+        cookie.forEach(function (val) {
+            if (val.trim().startsWith('selecta=')) {
+                var dat = decodeURIComponent(val).split('=');
+                prefs.data = JSON.parse(dat[1]);
+            }
+        });
+        return prefs.data;
+    },
+    save: function (settings) {
+        this.data = settings;
+        var d = new Date();
+        d.setTime(d.getTime() + (365*24*60*60*1000));
+        document.cookie = 'selecta=' + encodeURIComponent(JSON.stringify(this.data)) + ';expires=' + d.toUTCString();
+    }
+};
+
+var procDataSelect = function (sel) {
+
+    // compare the select value against the other selects, and update the chart if required
+    var id = sel.id;
+    var num = +id.slice(-1);
+    var val = sel.value;
+
+    // Has this series already been selected? If so set the dropdown back to its previous value, then abort
+    if (val != '0' &&  settings.series.indexOf(sel.value) != -1) {
+        $('#' + id).val(settings.series[num]).prop('selected', true);
+        return;
+    }
+
+    //
+    if (val != '0') {
+        $('#' + id + ' option:contains(' + txtSelect +')').text(txtClear);
+    } else {
+        $('#' + id + ' option:contains(' + txtClear +')').text(txtSelect);
+    }
+
+    // clear the existing series
+    if (chart.series.length > 0)
+        clearSeries(settings.series[num]);
+
+
+    updateChart(val, num, id);
+
+    settings.series[num] = val;
+
+    prefs.save(settings);
+};
+
+var updateChart = function (val, num, id) {
+    // test for the extra sensor series first
+    if (val.startsWith('ExtraTemp-')) {
+        doExtraTemp(num, val);
+        return;
+    } else if (val.startsWith('ExtraHum-')) {
+        doExtraHum(num, val);
+        return;
+    } else if (val.startsWith('ExtraDewPoint-')) {
+        doExtraDew(num, val);
+        return;
+    } else if (val.startsWith('UserTemp-')) {
+        doUserTemp(num, val);
+        return;
+    } else if (val.startsWith('SoilMoist-')) {
+        doSoilMoist(num, val);
+        return;
+    } else if (val.startsWith('SoilTemp-')) {
+        doSoilTemp(num, val);
+        return;
+    } else if (val.startsWith('LeafWetness-')) {
+        doLeafWet(num, val);
+        return;
+    }
+
+    switch (val) {
+        case '0':
+            // clear this series
+            break;
+        case 'Temperature':
+            doTemp(num);
+            break;
+        case 'Indoor Temp':
+            doInTemp(num);
+            break;
+        case 'Heat Index':
+            doHeatIndex(num);
+            break;
+        case 'Dew Point':
+            doDewPoint(num);
+            break;
+        case 'Wind Chill':
+            doWindChill(num);
+            break;
+        case 'Apparent Temp':
+            doAppTemp(num);
+            break;
+        case 'Feels Like':
+            doFeelsLike(num);
+            break;
+
+        case 'Humidity':
+            doHumidity(num);
+            break;
+        case 'Indoor Hum':
+            doInHumidity(num);
+            break;
+
+        case 'Solar Rad':
+            doSolarRad(num);
+            break;
+        case 'UV Index':
+            doUV(num);
+            break;
+
+        case 'Pressure':
+            doPress(num);
+            break;
+
+        case 'Wind Speed':
+            doWindSpeed(num);
+            break;
+        case 'Wind Gust':
+            doWindGust(num);
+            break;
+        case 'Wind Bearing':
+            doWindDir(num);
+            break;
+
+        case 'Rainfall':
+            doRainfall(num);
+            break;
+        case 'Rainfall Rate':
+            doRainRate(num);
+            break;
+
+        case 'PM 2.5':
+            doPm2p5(num);
+            break;
+        case 'PM 10':
+            doPm10(num);
+            break;
+
+        default:
+            $('#' + id).val(txtSelect);
+            break;
+    }
+}
+
+var updateColour = function (sel) {
+    var id = sel.id;
+    var num = +id.slice(-1);
+    var val = sel.value;
+
+    // set the selection colour
+    $('#' + id).css('background', val);
+
+    settings.colours[num] = val;
+
+
+    // do we need to update the associated data series?
+    if (settings.series[num] != '0') {
+            // find the series
+        var seriesIdx = -1;
+        var i = 0;
+        chart.series.forEach(function (ser) {
+            if (ser.options.name == settings.series[num] && ser.yAxis.options.id != 'navigator-y-axis') {
+                seriesIdx = i;
+            }
+            i++;
+        });
+
+        if (seriesIdx == -1)
+            return;
+
+        chart.series[seriesIdx].options.color = settings.colours[num];
+        chart.series[seriesIdx].update(chart.series[seriesIdx].options);
+    }
+    prefs.save(settings);
+};
+
+var clearSeries = function (val) {
+    // find the series
+    var seriesIdx = -1;
+    var i = 0;
+    chart.series.forEach(function (ser) {
+        if (ser.options.id == val && ser.yAxis.options.id != 'navigator-y-axis') {
+            seriesIdx = i;
+        }
+        i++;
+    });
+
+    if (seriesIdx == -1)
+        return;
+
+    // check no other series is using the yAxis
+    var yAxisId = chart.series[seriesIdx].yAxis.options.id;
+    var inUse = 0;
+
+    chart.series.forEach(function (ser) {
+        if (ser.yAxis.options.id == yAxisId) {
+            inUse++;
+        }
+    });
+
+    // clear the series
+    chart.series[seriesIdx].remove();
+
+    // Are we the only series using this axis, if so clear it
+    if (inUse === 1) {
+        var axisIdx = -1;
+        // find which index of yAxis that in use
+        for (i = 0; i < chart.yAxis.length; i++) {
+            if (chart.yAxis[i].options.id == yAxisId)
+                axisIdx = i;
+        }
+
+        // clear the yAxis
+        chart.yAxis[axisIdx].remove();
+    }
+
+    // check the navigator - have we just removed the series it was using, and is there at least one series we can use instead?
+    if (!chart.navigator.hasNavigatorData && chart.series.length > 0 ) {
+        chart.series[0].setOptions({showInNavigator: true});
+        chart.navigator.baseSeries = chart.series[0];
+        chart.navigator.update();
+        chart.redraw();
+    }
+};
+
+
+var checkAxisExists = function (name) {
+    var exists = false;
+    chart.yAxis.forEach(function (axis) {
+        if (axis.options.id == name)
+            exists = true;
+    });
+    return exists;
+};
+
+
+var addTemperatureAxis = function (idx) {
+    // first check if we already have a temperature axis
+    if (checkAxisExists('Temperature'))
+        return;
+
+    // nope no existing axis, add one
+   chart.addAxis({
+        title: {text: 'Temperature (°' + config.temp.units + ')'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: "Temperature",
+        showEmpty: false,
+        labels: {
+            formatter: function () {
+                return '<span style="fill: ' + (this.value <= freezing ? 'blue' : 'red') + ';">' + this.value + '</span>';
+            },
+            align: idx < settings.series.length / 2 ? 'right' : 'left',
+        },
+        plotLines: [{
+            // freezing line
+            value: freezing,
+            color: 'rgb(0, 0, 180)',
+            width: 1,
+            zIndex: 2
+        }],
+        minRange: config.temp.units == 'C' ? 5 : 10,
+        allowDecimals: false
+    }, false, false);
+
+};
+
+var addPressureAxis = function (idx) {
+    // first check if we already have a pressure axis
+    if (checkAxisExists('Pressure'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Pressure (' + config.press.units + ')'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: "Pressure",
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        minRange: config.press.units == 'in' ? 1 : 5,
+        allowDecimals: config.press.units == 'in' ? true : false
+    }, false, false);
+};
+
+var addHumidityAxis = function (idx) {
+    // first check if we already have a humidity axis
+    if (checkAxisExists('Humidity'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Humidity (%)'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'Humidity',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        max: 100,
+        allowDecimals: false
+    }, false, false);
+};
+
+var addSoilMoistAxis = function (idx) {
+    // first check if we already have a soil moisture axis
+    if (checkAxisExists('SoilMoist'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Soil Moisture (' +  config.soilmoisture.units + ')'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'SoilMoist',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        max: 100,
+        allowDecimals: false
+    }, false, false);
+};
+
+var addSolarAxis = function (idx) {
+    // first check if we already have a solar axis
+    if (checkAxisExists('Solar'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Solar Radiation (W/m\u00B2)'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'Solar',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        allowDecimals: false
+    }, false, false);
+};
+
+var addUVAxis = function (idx) {
+    // first check if we already have a UV axis
+    if (checkAxisExists('UV'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title:{text: 'UV Index'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'UV',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0
+    }, false, false);
+};
+
+var addWindAxis = function (idx) {
+    // first check if we already have a wind axis
+    if (checkAxisExists('Wind'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Wind Speed (' + config.wind.units + ')'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'Wind',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        allowDecimals: config.wind.units == 'm/s' ? true : false
+    }, false, false);
+};
+
+var addBearingAxis = function (idx) {
+    // first check if we already have a bearing axis
+    if (checkAxisExists('Bearing'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Wind Bearing'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'Bearing',
+        alignTicks: false,
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left',
+            formatter: function () {
+                var a = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+                return a[Math.floor((this.value + 22.5) / 45) % 8];
+            }
+        },
+        min: 0,
+        max: 360,
+        tickInterval: 45,
+        gridLineWidth: 0,
+        minorGridLineWidth: 0
+    }, false, false);
+};
+
+var addRainAxis = function (idx) {
+    // first check if we already have a rain axis
+    if (checkAxisExists('Rain'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Rainfall (' + config.rain.units + ')'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'Rain',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        minRange: config.rain.units == 'in' ? 0.25 : 4,
+        allowDecimals: config.rain.units == 'in' ? true : false
+    }, false, false);
+};
+
+var addRainRateAxis = function (idx) {
+    // first check if we already have a rain rate axis
+    if (checkAxisExists('RainRate'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Rainfall Rate (' + config.rain.units + '/hr)'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'RainRate',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        minRange: config.rain.units == 'in' ? 0.25 : 4,
+        allowDecimals: config.rain.units == 'in' ? true : false
+    }, false, false);
+};
+
+var addAQAxis = function (idx) {
+    // first check if we already have a AQ axis
+    if (checkAxisExists('pm'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Particulates (µg/m³)'},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'pm',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        allowDecimals: false
+    }, false, false);
+};
+
+var addLeafWetAxis = function (idx) {
+    // first check if we already have a humidity axis
+    if (checkAxisExists('LeafWet'))
+        return;
+
+    // nope no existing axis, add one
+    chart.addAxis({
+        title: {text: 'Leaf wetness' + (config.leafwet.units == '' ? '' : '(' + config.leafwet.units + ')')},
+        opposite: idx < settings.series.length / 2 ? false : true,
+        id: 'LeafWetness',
+        showEmpty: false,
+        labels: {
+            align: idx < settings.series.length / 2 ? 'right' : 'left'
+        },
+        min: 0,
+        allowDecimals: false
+    }, false, false);
+};
+
+
+var doTemp = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.temp,
+                id: 'Temperature',
+                name: 'Temperature',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doInTemp = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.intemp,
+                id: 'Indoor Temp',
+                name: 'Indoor Temp',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doHeatIndex = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.heatindex,
+                id: 'Heat Index',
+                name: 'Heat Index',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doDewPoint = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.dew,
+                id: 'Dew Point',
+                name: 'Dew Point',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doWindChill = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.wchill,
+                id: 'Wind Chill',
+                name: 'Wind Chill',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doAppTemp = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.apptemp,
+                id: 'Apparent Temp',
+                name: 'Apparent Temp',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doFeelsLike = function (idx) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    $.ajax({
+        url: 'tempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.feelslike,
+                id: 'Feels Like',
+                name: 'Feels Like',
+                yAxis: 'Temperature',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doHumidity = function (idx) {
+    chart.showLoading();
+
+    addHumidityAxis(idx);
+
+    $.ajax({
+        url: 'humdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.hum,
+                id: 'Humidity',
+                name: 'Humidity',
+                yAxis: 'Humidity',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' %',
+                    valueDecimals: config.hum.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doInHumidity = function (idx) {
+    chart.showLoading();
+
+    addHumidityAxis(idx);
+
+    $.ajax({
+        url: 'humdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.inhum,
+                id: 'Indoor Hum',
+                name: 'Indoor Hum',
+                yAxis: 'Humidity',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' %',
+                    valueDecimals: config.hum.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doSolarRad = function (idx) {
+    chart.showLoading();
+
+    addSolarAxis(idx);
+
+    $.ajax({
+        url: 'solardata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.SolarRad,
+                id: 'Solar Rad',
+                name: 'Solar Rad',
+                yAxis: 'Solar',
+                type: 'area',
+                tooltip: {
+                    valueSuffix: ' W/m\u00B2',
+                    valueDecimals: 0
+                },
+                visible: true,
+                color: settings.colours[idx],
+                fillOpacity: 0.5,
+                boostThreshold: 0,
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doUV = function (idx) {
+    chart.showLoading();
+
+    addUVAxis(idx);
+
+    $.ajax({
+        url: 'solardata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.UV,
+                id: 'UV Index',
+                name: 'UV Index',
+                yAxis: 'UV',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: null,
+                    valueDecimals: config.uv.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doPress = function (idx) {
+    chart.showLoading();
+
+    addPressureAxis(idx);
+
+    $.ajax({
+        url: 'pressdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.press,
+                id: 'Pressure',
+                name: 'Pressure',
+                yAxis: 'Pressure',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' ' + config.press.units,
+                    valueDecimals: config.press.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doWindSpeed = function (idx) {
+    chart.showLoading();
+
+    addWindAxis(idx);
+
+    $.ajax({
+        url: 'winddata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.wspeed,
+                id: 'Wind Speed',
+                name: 'Wind Speed',
+                yAxis: 'Wind',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' ' + config.wind.units,
+                    valueDecimals: config.wind.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doWindGust = function (idx) {
+    chart.showLoading();
+
+    addWindAxis(idx);
+
+    $.ajax({
+        url: 'winddata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.wgust,
+                id: 'Wind Gust',
+                name: 'Wind Gust',
+                yAxis: 'Wind',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' ' + config.wind.units,
+                    valueDecimals: config.wind.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doWindDir = function (idx) {
+    chart.showLoading();
+
+    addBearingAxis(idx);
+
+    $.ajax({
+        url: 'wdirdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.avgbearing,
+                id: 'Wind Bearing',
+                name: 'Wind Bearing',
+                yAxis: 'Bearing',
+                type: 'scatter',
+                color: settings.colours[idx],
+                zIndex: 100 - idx,
+                marker: {
+                    enabled: true,
+                    symbol: 'circle',
+                    radius: 2,
+                    states: {
+                        hover: {enabled: false},
+                        select: {enabled: false},
+                        normal: {enabled: false}
+                    }
+                },
+                tooltip: {
+                    enabled: false
+                },
+                animationLimit: 1,
+                cursor: 'pointer',
+                enableMouseTracking: false,
+                label: {enabled: false}
+            });
+        }
+    });
+};
+
+
+var doRainfall = function (idx) {
+    chart.showLoading();
+
+    addRainAxis(idx);
+
+    $.ajax({
+        url: 'raindata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.rfall,
+                id: 'Rainfall',
+                name: 'Rainfall',
+                yAxis: 'Rain',
+                type: 'area',
+                tooltip: {
+                    valueDecimals: config.rain.decimals,
+                    valueSuffix: ' ' + config.rain.units
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx,
+                fillOpacity: 0.3,
+                boostThreshold: 0
+            });
+        }
+    });
+};
+
+var doRainRate = function (idx) {
+    chart.showLoading();
+
+    addRainRateAxis(idx);
+
+    $.ajax({
+        url: 'raindata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.rrate,
+                id: 'Rainfall Rate',
+                name: 'Rainfall Rate',
+                yAxis: 'RainRate',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' ' + config.rain.units + '/hr',
+                    valueDecimals: config.rain.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doPm2p5 = function (idx) {
+    chart.showLoading();
+
+    addAQAxis(idx);
+
+    $.ajax({
+        url: 'airquality.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.pm2p5,
+                id: 'PM 2.5',
+                name: 'PM 2.5',
+                yAxis: 'pm',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' µg/m³',
+                    valueDecimals: 1,
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doPm10 = function (idx) {
+    chart.showLoading();
+
+    addAQAxis(idx);
+
+    $.ajax({
+        url: 'airquality.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp.pm10,
+                id: 'PM 10',
+                name: 'PM 10',
+                yAxis: 'pm',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' µg/m³',
+                    valueDecimals: 1,
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+
+var doExtraTemp = function (idx, val) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'extratempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "Temperature",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doUserTemp = function (idx, val) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'usertempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "Temperature",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doExtraHum = function (idx, val) {
+    chart.showLoading();
+
+    addHumidityAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'extrahumdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: 'Humidity',
+                type: 'line',
+                tooltip: {
+                    valueSuffix: ' %',
+                    valueDecimals: config.hum.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doExtraDew = function (idx, val) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'extradewdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "Temperature",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doSoilTemp = function (idx, val) {
+    chart.showLoading();
+
+    addTemperatureAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'soiltempdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "Temperature",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' °' + config.temp.units,
+                    valueDecimals: config.temp.decimals
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doSoilMoist = function (idx, val) {
+    chart.showLoading();
+
+    addSoilMoistAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'soilmoistdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "SoilMoist",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' ' + config.soilmoisture.units
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
+
+var doLeafWet = function (idx, val) {
+    chart.showLoading();
+
+    addLeafWetAxis(idx);
+
+    // get the sensor name
+    var name = val.split('-').slice(1).join('-');
+
+    $.ajax({
+        url: 'leafwetdata.json',
+        dataType: 'json',
+        success: function (resp) {
+            chart.hideLoading();
+            chart.addSeries({
+                index: idx,
+                data: resp[name],
+                id: val,
+                name: name,
+                yAxis: "LeafWetness",
+                type: "line",
+                tooltip: {
+                    valueSuffix: ' ' + config.leafwet.units
+                },
+                visible: true,
+                color: settings.colours[idx],
+                zIndex: 100 - idx
+            });
+        }
+    });
+};
diff --git a/webfiles/js/setpagedata.js b/webfiles/js/setpagedata.js
new file mode 100644
index 0000000..672cecd
--- /dev/null
+++ b/webfiles/js/setpagedata.js
@@ -0,0 +1,237 @@
+/*	----------------------------------------------------------
+ * 	setpagedata.js		v:0.1.0		d:Mar 2021		a:Neil  Thomas
+ *  Last modified: 2022/07/02 17:55:10
+ * 	Basic scripts for all new at-xxxx.html template pages.
+ *  Incorporating changes suggested by beteljuice
+ * 	Requires jQuery
+ * 	----------------------------------------------------------*/
+
+//	Global variables
+//	Changing these affects every page in the ai-interface
+//	All numbers are pixels.
+
+let fixedHeader = false;	//	Use only true or false
+let fixedFooter = true;	//	Use only true or false
+let headerMargin = 20;	//	Gap between the header and the main body
+let footerMargin = 10;	//	Gap between the body and the footer
+let load_menu =	"js/menu.js"; // menu file to load - path is relative to the page
+
+
+//	Thats the only changes you should make unless you know better!
+
+let cmx_data;
+let menu = mobileMenu = "";
+let initialLoad = true;
+
+window.onresize = function() {
+	borderpatrol();
+};
+
+
+let borderpatrol = function() {
+	var contentMargin = $("#Header").outerHeight( true );
+	if ($('#Header').hasClass('w3-top')) {
+		$('#Content').css('margin-top', headerMargin + contentMargin + 'px');
+	} else {
+		$('#Content').css('margin-top', headerMargin + 'px');
+	}
+	contentMargin = $('#Footer').outerHeight( true );
+	if ($('#Footer').hasClass('w3-bottom')){
+		$('#Content').css('margin-bottom', footerMargin + contentMargin + 'px');
+	} else {
+		$('#Content').css('margin-bottom', footerMargin + 'px');
+	}
+}; // end function
+
+let createMainMenu = function(src, submenu) {
+	let classMain = 'w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-small w3-hide-medium';
+	let classMainSub = 'w3-bar-item w3-btn w3-theme-d5-hvr at-slim';
+
+	src.forEach(function(itm) {
+		if (itm.menu !== 'n') {	// wanted in main menu
+			if (itm.submenu) { // drop down
+				menu += '<div class="w3-dropdown-hover">\n';
+				menu += '\t<button id="' +  itm.title.replace(/ /g,"_") + '" type="button" class="w3-btn w3-theme-hvr at-slim w3-hide-medium w3-hide-small" onclick="dropDown(this)" aria-expanded="false">' + itm.title + '&#8230;</button>\n';
+				menu += '\t<div id="sub_' +  itm.title.replace(/ /g,"_") + '" class="w3-dropdown-content w3-bar-block w3-theme">\n';
+				// add the sub-menu items
+				createMainMenu(itm.items, true);
+				menu += '\t\n</div></div>\n';
+			} else {
+				infill = (itm.new_window ? ' target="_blank"' : '');
+
+				if (itm.forum) {
+					 if (cmx_data.forumurl != '') {
+						menu += '<a href="' + cmx_data.forumurl + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+					 }
+				} else if (itm.webcam) {
+					if (cmx_data.webcamurl != '') {
+						menu += '<a href="' + cmx_data.webcamurl + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+					}
+				} else {
+					menu += '<a href="' + itm.url + '"' + infill + ' class="' + (submenu ? classMainSub : classMain) + '">' + itm.title + '</a>\n';
+				}
+			}
+		}
+	});
+
+	// if we are processing a sub menu, return to the main loop
+	if (submenu)
+		return;
+
+	menu += '<button class="w3-bar-item w3-btn w3-theme-hvr at-slim w3-hide-large w3-right" onClick="toggleMenu(\'Main_Menu_Mobile\')">Menu  &#9776;</button>';
+
+	// stick the menus into the page
+	$('#Main_Menu').html(menu);
+};
+
+let createMobileMenu = function(src, submenu) {
+	let classMobile = 'w3-bar-item w3-btn w3-theme-hvr at-slim';
+	let styleMobile = submenu ? 'padding-left: 30px !important;' : '';
+
+	src.forEach(function(itm) {
+		if (itm.menu !== 'w') { // wanted in narrow menu
+		// mobile menu
+			if (itm.submenu) {
+				mobileMenu += '\t<button class="w3-btn at-slim" style="cursor: default;">' + itm.title + '&#8230;</button>\n';
+				createMobileMenu(itm.items, true);
+			} else {
+				infill = (itm.new_window ? " target='_blank'" : "");
+				if (itm.forum && cmx_data.forumurl != '') {
+					mobileMenu += '<a href="' +  cmx_data.forumurl + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				} else if (itm.webcam && cmx_data.webcamurl != '') {
+					mobileMenu += '<a href="' +  cmx_data.webcamurl + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				} else {
+					mobileMenu += '<a href="' +  itm.url + '"' + infill + ' class="' + classMobile + '" style= "' + styleMobile + '">' + itm.title + '</a>\n';
+				}
+			}
+		}
+	});
+
+	// if we are processing a sub menu, return to the main loop
+	if (submenu)
+		return;
+
+	// stick the menus into the page
+	$('#Main_Menu_Mobile').html(mobileMenu);
+};
+
+let setupPage = function() {
+
+	//	static header & footer
+	if (fixedHeader) {
+		$('#Header').addClass('w3-top');
+	} else {
+		$('#Header').removeClass('w3-top');
+	}
+	if (fixedFooter) {
+		$('#Footer').addClass('w3-bottom');
+	} else {
+		$('#Footer').removeClass('w3-bottom');
+	}
+	//	Page content top and bottom margins
+	borderpatrol();
+};
+
+let toggleMenu = function(menuid) {
+	$('#'+menuid).toggleClass('w3-show');
+};
+
+let dropDown = function(panel) {
+	var btn = $('#' + panel.id);
+	var sub = $('#sub_' + panel.id);
+	if (sub.hasClass('w3-show')) {
+		sub.removeClass('w3-show');
+		btn.attr('aria-expanded', false);
+	} else {
+		// Close other dropdowns first
+		$('.w3-dropdown-content').removeClass('w3-show');
+		sub.addClass('w3-show');
+		btn.attr('aria-expanded', true);
+	}
+};
+
+
+let getPageData = function (resolve, reject) {
+	$.getJSON('websitedata.json?_=' + Date.now(), function (json) {
+		console.log('Data success');
+		// auto update every 60 seconds, only the index and today pages
+		// Some sites may have index.htm as the default page, and thus not have a page name
+		let pageName = window.location.href.split('/').pop().split('.')[0];
+		if (pageName == 'index' || pageName == 'today' || pageName == 'todayYest' || pageName == '') {
+			setTimeout(function () {
+				getPageData(null, null);
+			}, 60 * 1000);
+		}
+
+		cmx_data = json;
+
+		// Set some header stuff
+		$(document).prop('title', cmx_data.location + ' weather');
+		$('meta[name=description]').attr('content', cmx_data.location + ' weather data');
+		$('meta[name=keywords]').attr('content', $('meta[name=keywords]').attr('content') + ', ' + cmx_data.location);
+
+		// do the menus
+		if (initialLoad) {
+			$.getScript(load_menu, function() { // path is relative to the page - allows for multiple vars to be available and ignores comments ;-)
+				createMainMenu(menuSrc, false);
+				createMobileMenu(menuSrc, false);
+				borderpatrol(); // duplicated here to ensure things OK if initial menu wrapped
+			});
+			initialLoad = false;
+		}
+
+		// Show/hide Apparent/Feels Like
+		if (cmx_data.options.useApparent === "1") {
+			$('[data-cmx-apparent]').removeClass('w3-hide');
+			$('[data-cmx-feels]').addClass('w3-hide');
+		}
+
+		if (cmx_data.options.showSolar === "1") {
+			$('[data-cmx-solar]').removeClass('w3-hide');
+		} else {
+			$('[data-cmx-solar-gauge]').addClass('w3-hide'); // Gauges do not draw correctly if hidden from the start
+		}
+
+		if (cmx_data.options.showUV === "1") {
+			$('[data-cmx-uv]').removeClass('w3-hide');
+		} else {
+			$('[data-cmx-uv-gauge]').addClass('w3-hide'); // Gauges do not draw correctly if hidden from the start
+		}
+
+		// Update all spans having data-cmxdata with data values
+		$('[data-cmxdata]').each(function () {
+			this.innerHTML = cmx_data[this.dataset.cmxdata];
+		});
+
+		if (cmx_data.currcond != '') {
+			$('#currCond').removeClass('w3-hide');
+		}
+
+		// Use this to trigger other scripts on the page
+		if (null !== resolve) {
+			resolve();
+		}
+	})
+	.fail(function (jqxhr, textStatus, error) {
+		let err = textStatus + ', ' + error;
+		console.log('Data Request Failed: ' + err );
+
+		if (null !== reject) {
+			reject();
+		}
+
+		// lets try that again
+		setTimeout(function () {
+			getPageData(resolve, reject);
+		}, 5000);
+	});
+};
+
+
+// Get the main page data
+let dataLoadedPromise = new Promise((myResolve, myReject) => {
+	$(document).ready(function() {
+		setupPage();
+		getPageData(myResolve, myReject);
+	});
+});
diff --git a/webfiles/lib/jquery/jquery-latest.min.js b/webfiles/lib/jquery/jquery-latest.min.js
new file mode 100644
index 0000000..200b54e
--- /dev/null
+++ b/webfiles/lib/jquery/jquery-latest.min.js
@@ -0,0 +1,2 @@
+/*! jQuery v3.6.0 | (c) OpenJS Foundation and other contributors | jquery.org/license */
+!function(e,t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=e.document?t(e,!0):function(e){if(!e.document)throw new Error("jQuery requires a window with a document");return t(e)}:t(e)}("undefined"!=typeof window?window:this,function(C,e){"use strict";var t=[],r=Object.getPrototypeOf,s=t.slice,g=t.flat?function(e){return t.flat.call(e)}:function(e){return t.concat.apply([],e)},u=t.push,i=t.indexOf,n={},o=n.toString,v=n.hasOwnProperty,a=v.toString,l=a.call(Object),y={},m=function(e){return"function"==typeof e&&"number"!=typeof e.nodeType&&"function"!=typeof e.item},x=function(e){return null!=e&&e===e.window},E=C.document,c={type:!0,src:!0,nonce:!0,noModule:!0};function b(e,t,n){var r,i,o=(n=n||E).createElement("script");if(o.text=e,t)for(r in c)(i=t[r]||t.getAttribute&&t.getAttribute(r))&&o.setAttribute(r,i);n.head.appendChild(o).parentNode.removeChild(o)}function w(e){return null==e?e+"":"object"==typeof e||"function"==typeof e?n[o.call(e)]||"object":typeof e}var f="3.6.0",S=function(e,t){return new S.fn.init(e,t)};function p(e){var t=!!e&&"length"in e&&e.length,n=w(e);return!m(e)&&!x(e)&&("array"===n||0===t||"number"==typeof t&&0<t&&t-1 in e)}S.fn=S.prototype={jquery:f,constructor:S,length:0,toArray:function(){return s.call(this)},get:function(e){return null==e?s.call(this):e<0?this[e+this.length]:this[e]},pushStack:function(e){var t=S.merge(this.constructor(),e);return t.prevObject=this,t},each:function(e){return S.each(this,e)},map:function(n){return this.pushStack(S.map(this,function(e,t){return n.call(e,t,e)}))},slice:function(){return this.pushStack(s.apply(this,arguments))},first:function(){return this.eq(0)},last:function(){return this.eq(-1)},even:function(){return this.pushStack(S.grep(this,function(e,t){return(t+1)%2}))},odd:function(){return this.pushStack(S.grep(this,function(e,t){return t%2}))},eq:function(e){var t=this.length,n=+e+(e<0?t:0);return this.pushStack(0<=n&&n<t?[this[n]]:[])},end:function(){return this.prevObject||this.constructor()},push:u,sort:t.sort,splice:t.splice},S.extend=S.fn.extend=function(){var e,t,n,r,i,o,a=arguments[0]||{},s=1,u=arguments.length,l=!1;for("boolean"==typeof a&&(l=a,a=arguments[s]||{},s++),"object"==typeof a||m(a)||(a={}),s===u&&(a=this,s--);s<u;s++)if(null!=(e=arguments[s]))for(t in e)r=e[t],"__proto__"!==t&&a!==r&&(l&&r&&(S.isPlainObject(r)||(i=Array.isArray(r)))?(n=a[t],o=i&&!Array.isArray(n)?[]:i||S.isPlainObject(n)?n:{},i=!1,a[t]=S.extend(l,o,r)):void 0!==r&&(a[t]=r));return a},S.extend({expando:"jQuery"+(f+Math.random()).replace(/\D/g,""),isReady:!0,error:function(e){throw new Error(e)},noop:function(){},isPlainObject:function(e){var t,n;return!(!e||"[object Object]"!==o.call(e))&&(!(t=r(e))||"function"==typeof(n=v.call(t,"constructor")&&t.constructor)&&a.call(n)===l)},isEmptyObject:function(e){var t;for(t in e)return!1;return!0},globalEval:function(e,t,n){b(e,{nonce:t&&t.nonce},n)},each:function(e,t){var n,r=0;if(p(e)){for(n=e.length;r<n;r++)if(!1===t.call(e[r],r,e[r]))break}else for(r in e)if(!1===t.call(e[r],r,e[r]))break;return e},makeArray:function(e,t){var n=t||[];return null!=e&&(p(Object(e))?S.merge(n,"string"==typeof e?[e]:e):u.call(n,e)),n},inArray:function(e,t,n){return null==t?-1:i.call(t,e,n)},merge:function(e,t){for(var n=+t.length,r=0,i=e.length;r<n;r++)e[i++]=t[r];return e.length=i,e},grep:function(e,t,n){for(var r=[],i=0,o=e.length,a=!n;i<o;i++)!t(e[i],i)!==a&&r.push(e[i]);return r},map:function(e,t,n){var r,i,o=0,a=[];if(p(e))for(r=e.length;o<r;o++)null!=(i=t(e[o],o,n))&&a.push(i);else for(o in e)null!=(i=t(e[o],o,n))&&a.push(i);return g(a)},guid:1,support:y}),"function"==typeof Symbol&&(S.fn[Symbol.iterator]=t[Symbol.iterator]),S.each("Boolean Number String Function Array Date RegExp Object Error Symbol".split(" "),function(e,t){n["[object "+t+"]"]=t.toLowerCase()});var d=function(n){var e,d,b,o,i,h,f,g,w,u,l,T,C,a,E,v,s,c,y,S="sizzle"+1*new Date,p=n.document,k=0,r=0,m=ue(),x=ue(),A=ue(),N=ue(),j=function(e,t){return e===t&&(l=!0),0},D={}.hasOwnProperty,t=[],q=t.pop,L=t.push,H=t.push,O=t.slice,P=function(e,t){for(var n=0,r=e.length;n<r;n++)if(e[n]===t)return n;return-1},R="checked|selected|async|autofocus|autoplay|controls|defer|disabled|hidden|ismap|loop|multiple|open|readonly|required|scoped",M="[\\x20\\t\\r\\n\\f]",I="(?:\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\[^\\r\\n\\f]|[\\w-]|[^\0-\\x7f])+",W="\\["+M+"*("+I+")(?:"+M+"*([*^$|!~]?=)"+M+"*(?:'((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\"|("+I+"))|)"+M+"*\\]",F=":("+I+")(?:\\((('((?:\\\\.|[^\\\\'])*)'|\"((?:\\\\.|[^\\\\\"])*)\")|((?:\\\\.|[^\\\\()[\\]]|"+W+")*)|.*)\\)|)",B=new RegExp(M+"+","g"),$=new RegExp("^"+M+"+|((?:^|[^\\\\])(?:\\\\.)*)"+M+"+$","g"),_=new RegExp("^"+M+"*,"+M+"*"),z=new RegExp("^"+M+"*([>+~]|"+M+")"+M+"*"),U=new RegExp(M+"|>"),X=new RegExp(F),V=new RegExp("^"+I+"$"),G={ID:new RegExp("^#("+I+")"),CLASS:new RegExp("^\\.("+I+")"),TAG:new RegExp("^("+I+"|[*])"),ATTR:new RegExp("^"+W),PSEUDO:new RegExp("^"+F),CHILD:new RegExp("^:(only|first|last|nth|nth-last)-(child|of-type)(?:\\("+M+"*(even|odd|(([+-]|)(\\d*)n|)"+M+"*(?:([+-]|)"+M+"*(\\d+)|))"+M+"*\\)|)","i"),bool:new RegExp("^(?:"+R+")$","i"),needsContext:new RegExp("^"+M+"*[>+~]|:(even|odd|eq|gt|lt|nth|first|last)(?:\\("+M+"*((?:-\\d)?\\d*)"+M+"*\\)|)(?=[^-]|$)","i")},Y=/HTML$/i,Q=/^(?:input|select|textarea|button)$/i,J=/^h\d$/i,K=/^[^{]+\{\s*\[native \w/,Z=/^(?:#([\w-]+)|(\w+)|\.([\w-]+))$/,ee=/[+~]/,te=new RegExp("\\\\[\\da-fA-F]{1,6}"+M+"?|\\\\([^\\r\\n\\f])","g"),ne=function(e,t){var n="0x"+e.slice(1)-65536;return t||(n<0?String.fromCharCode(n+65536):String.fromCharCode(n>>10|55296,1023&n|56320))},re=/([\0-\x1f\x7f]|^-?\d)|^-$|[^\0-\x1f\x7f-\uFFFF\w-]/g,ie=function(e,t){return t?"\0"===e?"\ufffd":e.slice(0,-1)+"\\"+e.charCodeAt(e.length-1).toString(16)+" ":"\\"+e},oe=function(){T()},ae=be(function(e){return!0===e.disabled&&"fieldset"===e.nodeName.toLowerCase()},{dir:"parentNode",next:"legend"});try{H.apply(t=O.call(p.childNodes),p.childNodes),t[p.childNodes.length].nodeType}catch(e){H={apply:t.length?function(e,t){L.apply(e,O.call(t))}:function(e,t){var n=e.length,r=0;while(e[n++]=t[r++]);e.length=n-1}}}function se(t,e,n,r){var i,o,a,s,u,l,c,f=e&&e.ownerDocument,p=e?e.nodeType:9;if(n=n||[],"string"!=typeof t||!t||1!==p&&9!==p&&11!==p)return n;if(!r&&(T(e),e=e||C,E)){if(11!==p&&(u=Z.exec(t)))if(i=u[1]){if(9===p){if(!(a=e.getElementById(i)))return n;if(a.id===i)return n.push(a),n}else if(f&&(a=f.getElementById(i))&&y(e,a)&&a.id===i)return n.push(a),n}else{if(u[2])return H.apply(n,e.getElementsByTagName(t)),n;if((i=u[3])&&d.getElementsByClassName&&e.getElementsByClassName)return H.apply(n,e.getElementsByClassName(i)),n}if(d.qsa&&!N[t+" "]&&(!v||!v.test(t))&&(1!==p||"object"!==e.nodeName.toLowerCase())){if(c=t,f=e,1===p&&(U.test(t)||z.test(t))){(f=ee.test(t)&&ye(e.parentNode)||e)===e&&d.scope||((s=e.getAttribute("id"))?s=s.replace(re,ie):e.setAttribute("id",s=S)),o=(l=h(t)).length;while(o--)l[o]=(s?"#"+s:":scope")+" "+xe(l[o]);c=l.join(",")}try{return H.apply(n,f.querySelectorAll(c)),n}catch(e){N(t,!0)}finally{s===S&&e.removeAttribute("id")}}}return g(t.replace($,"$1"),e,n,r)}function ue(){var r=[];return function e(t,n){return r.push(t+" ")>b.cacheLength&&delete e[r.shift()],e[t+" "]=n}}function le(e){return e[S]=!0,e}function ce(e){var t=C.createElement("fieldset");try{return!!e(t)}catch(e){return!1}finally{t.parentNode&&t.parentNode.removeChild(t),t=null}}function fe(e,t){var n=e.split("|"),r=n.length;while(r--)b.attrHandle[n[r]]=t}function pe(e,t){var n=t&&e,r=n&&1===e.nodeType&&1===t.nodeType&&e.sourceIndex-t.sourceIndex;if(r)return r;if(n)while(n=n.nextSibling)if(n===t)return-1;return e?1:-1}function de(t){return function(e){return"input"===e.nodeName.toLowerCase()&&e.type===t}}function he(n){return function(e){var t=e.nodeName.toLowerCase();return("input"===t||"button"===t)&&e.type===n}}function ge(t){return function(e){return"form"in e?e.parentNode&&!1===e.disabled?"label"in e?"label"in e.parentNode?e.parentNode.disabled===t:e.disabled===t:e.isDisabled===t||e.isDisabled!==!t&&ae(e)===t:e.disabled===t:"label"in e&&e.disabled===t}}function ve(a){return le(function(o){return o=+o,le(function(e,t){var n,r=a([],e.length,o),i=r.length;while(i--)e[n=r[i]]&&(e[n]=!(t[n]=e[n]))})})}function ye(e){return e&&"undefined"!=typeof e.getElementsByTagName&&e}for(e in d=se.support={},i=se.isXML=function(e){var t=e&&e.namespaceURI,n=e&&(e.ownerDocument||e).documentElement;return!Y.test(t||n&&n.nodeName||"HTML")},T=se.setDocument=function(e){var t,n,r=e?e.ownerDocument||e:p;return r!=C&&9===r.nodeType&&r.documentElement&&(a=(C=r).documentElement,E=!i(C),p!=C&&(n=C.defaultView)&&n.top!==n&&(n.addEventListener?n.addEventListener("unload",oe,!1):n.attachEvent&&n.attachEvent("onunload",oe)),d.scope=ce(function(e){return a.appendChild(e).appendChild(C.createElement("div")),"undefined"!=typeof e.querySelectorAll&&!e.querySelectorAll(":scope fieldset div").length}),d.attributes=ce(function(e){return e.className="i",!e.getAttribute("className")}),d.getElementsByTagName=ce(function(e){return e.appendChild(C.createComment("")),!e.getElementsByTagName("*").length}),d.getElementsByClassName=K.test(C.getElementsByClassName),d.getById=ce(function(e){return a.appendChild(e).id=S,!C.getElementsByName||!C.getElementsByName(S).length}),d.getById?(b.filter.ID=function(e){var t=e.replace(te,ne);return function(e){return e.getAttribute("id")===t}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n=t.getElementById(e);return n?[n]:[]}}):(b.filter.ID=function(e){var n=e.replace(te,ne);return function(e){var t="undefined"!=typeof e.getAttributeNode&&e.getAttributeNode("id");return t&&t.value===n}},b.find.ID=function(e,t){if("undefined"!=typeof t.getElementById&&E){var n,r,i,o=t.getElementById(e);if(o){if((n=o.getAttributeNode("id"))&&n.value===e)return[o];i=t.getElementsByName(e),r=0;while(o=i[r++])if((n=o.getAttributeNode("id"))&&n.value===e)return[o]}return[]}}),b.find.TAG=d.getElementsByTagName?function(e,t){return"undefined"!=typeof t.getElementsByTagName?t.getElementsByTagName(e):d.qsa?t.querySelectorAll(e):void 0}:function(e,t){var n,r=[],i=0,o=t.getElementsByTagName(e);if("*"===e){while(n=o[i++])1===n.nodeType&&r.push(n);return r}return o},b.find.CLASS=d.getElementsByClassName&&function(e,t){if("undefined"!=typeof t.getElementsByClassName&&E)return t.getElementsByClassName(e)},s=[],v=[],(d.qsa=K.test(C.querySelectorAll))&&(ce(function(e){var t;a.appendChild(e).innerHTML="<a id='"+S+"'></a><select id='"+S+"-\r\\' msallowcapture=''><option selected=''></option></select>",e.querySelectorAll("[msallowcapture^='']").length&&v.push("[*^$]="+M+"*(?:''|\"\")"),e.querySelectorAll("[selected]").length||v.push("\\["+M+"*(?:value|"+R+")"),e.querySelectorAll("[id~="+S+"-]").length||v.push("~="),(t=C.createElement("input")).setAttribute("name",""),e.appendChild(t),e.querySelectorAll("[name='']").length||v.push("\\["+M+"*name"+M+"*="+M+"*(?:''|\"\")"),e.querySelectorAll(":checked").length||v.push(":checked"),e.querySelectorAll("a#"+S+"+*").length||v.push(".#.+[+~]"),e.querySelectorAll("\\\f"),v.push("[\\r\\n\\f]")}),ce(function(e){e.innerHTML="<a href='' disabled='disabled'></a><select disabled='disabled'><option/></select>";var t=C.createElement("input");t.setAttribute("type","hidden"),e.appendChild(t).setAttribute("name","D"),e.querySelectorAll("[name=d]").length&&v.push("name"+M+"*[*^$|!~]?="),2!==e.querySelectorAll(":enabled").length&&v.push(":enabled",":disabled"),a.appendChild(e).disabled=!0,2!==e.querySelectorAll(":disabled").length&&v.push(":enabled",":disabled"),e.querySelectorAll("*,:x"),v.push(",.*:")})),(d.matchesSelector=K.test(c=a.matches||a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.msMatchesSelector))&&ce(function(e){d.disconnectedMatch=c.call(e,"*"),c.call(e,"[s!='']:x"),s.push("!=",F)}),v=v.length&&new RegExp(v.join("|")),s=s.length&&new RegExp(s.join("|")),t=K.test(a.compareDocumentPosition),y=t||K.test(a.contains)?function(e,t){var n=9===e.nodeType?e.documentElement:e,r=t&&t.parentNode;return e===r||!(!r||1!==r.nodeType||!(n.contains?n.contains(r):e.compareDocumentPosition&&16&e.compareDocumentPosition(r)))}:function(e,t){if(t)while(t=t.parentNode)if(t===e)return!0;return!1},j=t?function(e,t){if(e===t)return l=!0,0;var n=!e.compareDocumentPosition-!t.compareDocumentPosition;return n||(1&(n=(e.ownerDocument||e)==(t.ownerDocument||t)?e.compareDocumentPosition(t):1)||!d.sortDetached&&t.compareDocumentPosition(e)===n?e==C||e.ownerDocument==p&&y(p,e)?-1:t==C||t.ownerDocument==p&&y(p,t)?1:u?P(u,e)-P(u,t):0:4&n?-1:1)}:function(e,t){if(e===t)return l=!0,0;var n,r=0,i=e.parentNode,o=t.parentNode,a=[e],s=[t];if(!i||!o)return e==C?-1:t==C?1:i?-1:o?1:u?P(u,e)-P(u,t):0;if(i===o)return pe(e,t);n=e;while(n=n.parentNode)a.unshift(n);n=t;while(n=n.parentNode)s.unshift(n);while(a[r]===s[r])r++;return r?pe(a[r],s[r]):a[r]==p?-1:s[r]==p?1:0}),C},se.matches=function(e,t){return se(e,null,null,t)},se.matchesSelector=function(e,t){if(T(e),d.matchesSelector&&E&&!N[t+" "]&&(!s||!s.test(t))&&(!v||!v.test(t)))try{var n=c.call(e,t);if(n||d.disconnectedMatch||e.document&&11!==e.document.nodeType)return n}catch(e){N(t,!0)}return 0<se(t,C,null,[e]).length},se.contains=function(e,t){return(e.ownerDocument||e)!=C&&T(e),y(e,t)},se.attr=function(e,t){(e.ownerDocument||e)!=C&&T(e);var n=b.attrHandle[t.toLowerCase()],r=n&&D.call(b.attrHandle,t.toLowerCase())?n(e,t,!E):void 0;return void 0!==r?r:d.attributes||!E?e.getAttribute(t):(r=e.getAttributeNode(t))&&r.specified?r.value:null},se.escape=function(e){return(e+"").replace(re,ie)},se.error=function(e){throw new Error("Syntax error, unrecognized expression: "+e)},se.uniqueSort=function(e){var t,n=[],r=0,i=0;if(l=!d.detectDuplicates,u=!d.sortStable&&e.slice(0),e.sort(j),l){while(t=e[i++])t===e[i]&&(r=n.push(i));while(r--)e.splice(n[r],1)}return u=null,e},o=se.getText=function(e){var t,n="",r=0,i=e.nodeType;if(i){if(1===i||9===i||11===i){if("string"==typeof e.textContent)return e.textContent;for(e=e.firstChild;e;e=e.nextSibling)n+=o(e)}else if(3===i||4===i)return e.nodeValue}else while(t=e[r++])n+=o(t);return n},(b=se.selectors={cacheLength:50,createPseudo:le,match:G,attrHandle:{},find:{},relative:{">":{dir:"parentNode",first:!0}," ":{dir:"parentNode"},"+":{dir:"previousSibling",first:!0},"~":{dir:"previousSibling"}},preFilter:{ATTR:function(e){return e[1]=e[1].replace(te,ne),e[3]=(e[3]||e[4]||e[5]||"").replace(te,ne),"~="===e[2]&&(e[3]=" "+e[3]+" "),e.slice(0,4)},CHILD:function(e){return e[1]=e[1].toLowerCase(),"nth"===e[1].slice(0,3)?(e[3]||se.error(e[0]),e[4]=+(e[4]?e[5]+(e[6]||1):2*("even"===e[3]||"odd"===e[3])),e[5]=+(e[7]+e[8]||"odd"===e[3])):e[3]&&se.error(e[0]),e},PSEUDO:function(e){var t,n=!e[6]&&e[2];return G.CHILD.test(e[0])?null:(e[3]?e[2]=e[4]||e[5]||"":n&&X.test(n)&&(t=h(n,!0))&&(t=n.indexOf(")",n.length-t)-n.length)&&(e[0]=e[0].slice(0,t),e[2]=n.slice(0,t)),e.slice(0,3))}},filter:{TAG:function(e){var t=e.replace(te,ne).toLowerCase();return"*"===e?function(){return!0}:function(e){return e.nodeName&&e.nodeName.toLowerCase()===t}},CLASS:function(e){var t=m[e+" "];return t||(t=new RegExp("(^|"+M+")"+e+"("+M+"|$)"))&&m(e,function(e){return t.test("string"==typeof e.className&&e.className||"undefined"!=typeof e.getAttribute&&e.getAttribute("class")||"")})},ATTR:function(n,r,i){return function(e){var t=se.attr(e,n);return null==t?"!="===r:!r||(t+="","="===r?t===i:"!="===r?t!==i:"^="===r?i&&0===t.indexOf(i):"*="===r?i&&-1<t.indexOf(i):"$="===r?i&&t.slice(-i.length)===i:"~="===r?-1<(" "+t.replace(B," ")+" ").indexOf(i):"|="===r&&(t===i||t.slice(0,i.length+1)===i+"-"))}},CHILD:function(h,e,t,g,v){var y="nth"!==h.slice(0,3),m="last"!==h.slice(-4),x="of-type"===e;return 1===g&&0===v?function(e){return!!e.parentNode}:function(e,t,n){var r,i,o,a,s,u,l=y!==m?"nextSibling":"previousSibling",c=e.parentNode,f=x&&e.nodeName.toLowerCase(),p=!n&&!x,d=!1;if(c){if(y){while(l){a=e;while(a=a[l])if(x?a.nodeName.toLowerCase()===f:1===a.nodeType)return!1;u=l="only"===h&&!u&&"nextSibling"}return!0}if(u=[m?c.firstChild:c.lastChild],m&&p){d=(s=(r=(i=(o=(a=c)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1])&&r[2],a=s&&c.childNodes[s];while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if(1===a.nodeType&&++d&&a===e){i[h]=[k,s,d];break}}else if(p&&(d=s=(r=(i=(o=(a=e)[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]||[])[0]===k&&r[1]),!1===d)while(a=++s&&a&&a[l]||(d=s=0)||u.pop())if((x?a.nodeName.toLowerCase()===f:1===a.nodeType)&&++d&&(p&&((i=(o=a[S]||(a[S]={}))[a.uniqueID]||(o[a.uniqueID]={}))[h]=[k,d]),a===e))break;return(d-=v)===g||d%g==0&&0<=d/g}}},PSEUDO:function(e,o){var t,a=b.pseudos[e]||b.setFilters[e.toLowerCase()]||se.error("unsupported pseudo: "+e);return a[S]?a(o):1<a.length?(t=[e,e,"",o],b.setFilters.hasOwnProperty(e.toLowerCase())?le(function(e,t){var n,r=a(e,o),i=r.length;while(i--)e[n=P(e,r[i])]=!(t[n]=r[i])}):function(e){return a(e,0,t)}):a}},pseudos:{not:le(function(e){var r=[],i=[],s=f(e.replace($,"$1"));return s[S]?le(function(e,t,n,r){var i,o=s(e,null,r,[]),a=e.length;while(a--)(i=o[a])&&(e[a]=!(t[a]=i))}):function(e,t,n){return r[0]=e,s(r,null,n,i),r[0]=null,!i.pop()}}),has:le(function(t){return function(e){return 0<se(t,e).length}}),contains:le(function(t){return t=t.replace(te,ne),function(e){return-1<(e.textContent||o(e)).indexOf(t)}}),lang:le(function(n){return V.test(n||"")||se.error("unsupported lang: "+n),n=n.replace(te,ne).toLowerCase(),function(e){var t;do{if(t=E?e.lang:e.getAttribute("xml:lang")||e.getAttribute("lang"))return(t=t.toLowerCase())===n||0===t.indexOf(n+"-")}while((e=e.parentNode)&&1===e.nodeType);return!1}}),target:function(e){var t=n.location&&n.location.hash;return t&&t.slice(1)===e.id},root:function(e){return e===a},focus:function(e){return e===C.activeElement&&(!C.hasFocus||C.hasFocus())&&!!(e.type||e.href||~e.tabIndex)},enabled:ge(!1),disabled:ge(!0),checked:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&!!e.checked||"option"===t&&!!e.selected},selected:function(e){return e.parentNode&&e.parentNode.selectedIndex,!0===e.selected},empty:function(e){for(e=e.firstChild;e;e=e.nextSibling)if(e.nodeType<6)return!1;return!0},parent:function(e){return!b.pseudos.empty(e)},header:function(e){return J.test(e.nodeName)},input:function(e){return Q.test(e.nodeName)},button:function(e){var t=e.nodeName.toLowerCase();return"input"===t&&"button"===e.type||"button"===t},text:function(e){var t;return"input"===e.nodeName.toLowerCase()&&"text"===e.type&&(null==(t=e.getAttribute("type"))||"text"===t.toLowerCase())},first:ve(function(){return[0]}),last:ve(function(e,t){return[t-1]}),eq:ve(function(e,t,n){return[n<0?n+t:n]}),even:ve(function(e,t){for(var n=0;n<t;n+=2)e.push(n);return e}),odd:ve(function(e,t){for(var n=1;n<t;n+=2)e.push(n);return e}),lt:ve(function(e,t,n){for(var r=n<0?n+t:t<n?t:n;0<=--r;)e.push(r);return e}),gt:ve(function(e,t,n){for(var r=n<0?n+t:n;++r<t;)e.push(r);return e})}}).pseudos.nth=b.pseudos.eq,{radio:!0,checkbox:!0,file:!0,password:!0,image:!0})b.pseudos[e]=de(e);for(e in{submit:!0,reset:!0})b.pseudos[e]=he(e);function me(){}function xe(e){for(var t=0,n=e.length,r="";t<n;t++)r+=e[t].value;return r}function be(s,e,t){var u=e.dir,l=e.next,c=l||u,f=t&&"parentNode"===c,p=r++;return e.first?function(e,t,n){while(e=e[u])if(1===e.nodeType||f)return s(e,t,n);return!1}:function(e,t,n){var r,i,o,a=[k,p];if(n){while(e=e[u])if((1===e.nodeType||f)&&s(e,t,n))return!0}else while(e=e[u])if(1===e.nodeType||f)if(i=(o=e[S]||(e[S]={}))[e.uniqueID]||(o[e.uniqueID]={}),l&&l===e.nodeName.toLowerCase())e=e[u]||e;else{if((r=i[c])&&r[0]===k&&r[1]===p)return a[2]=r[2];if((i[c]=a)[2]=s(e,t,n))return!0}return!1}}function we(i){return 1<i.length?function(e,t,n){var r=i.length;while(r--)if(!i[r](e,t,n))return!1;return!0}:i[0]}function Te(e,t,n,r,i){for(var o,a=[],s=0,u=e.length,l=null!=t;s<u;s++)(o=e[s])&&(n&&!n(o,r,i)||(a.push(o),l&&t.push(s)));return a}function Ce(d,h,g,v,y,e){return v&&!v[S]&&(v=Ce(v)),y&&!y[S]&&(y=Ce(y,e)),le(function(e,t,n,r){var i,o,a,s=[],u=[],l=t.length,c=e||function(e,t,n){for(var r=0,i=t.length;r<i;r++)se(e,t[r],n);return n}(h||"*",n.nodeType?[n]:n,[]),f=!d||!e&&h?c:Te(c,s,d,n,r),p=g?y||(e?d:l||v)?[]:t:f;if(g&&g(f,p,n,r),v){i=Te(p,u),v(i,[],n,r),o=i.length;while(o--)(a=i[o])&&(p[u[o]]=!(f[u[o]]=a))}if(e){if(y||d){if(y){i=[],o=p.length;while(o--)(a=p[o])&&i.push(f[o]=a);y(null,p=[],i,r)}o=p.length;while(o--)(a=p[o])&&-1<(i=y?P(e,a):s[o])&&(e[i]=!(t[i]=a))}}else p=Te(p===t?p.splice(l,p.length):p),y?y(null,t,p,r):H.apply(t,p)})}function Ee(e){for(var i,t,n,r=e.length,o=b.relative[e[0].type],a=o||b.relative[" "],s=o?1:0,u=be(function(e){return e===i},a,!0),l=be(function(e){return-1<P(i,e)},a,!0),c=[function(e,t,n){var r=!o&&(n||t!==w)||((i=t).nodeType?u(e,t,n):l(e,t,n));return i=null,r}];s<r;s++)if(t=b.relative[e[s].type])c=[be(we(c),t)];else{if((t=b.filter[e[s].type].apply(null,e[s].matches))[S]){for(n=++s;n<r;n++)if(b.relative[e[n].type])break;return Ce(1<s&&we(c),1<s&&xe(e.slice(0,s-1).concat({value:" "===e[s-2].type?"*":""})).replace($,"$1"),t,s<n&&Ee(e.slice(s,n)),n<r&&Ee(e=e.slice(n)),n<r&&xe(e))}c.push(t)}return we(c)}return me.prototype=b.filters=b.pseudos,b.setFilters=new me,h=se.tokenize=function(e,t){var n,r,i,o,a,s,u,l=x[e+" "];if(l)return t?0:l.slice(0);a=e,s=[],u=b.preFilter;while(a){for(o in n&&!(r=_.exec(a))||(r&&(a=a.slice(r[0].length)||a),s.push(i=[])),n=!1,(r=z.exec(a))&&(n=r.shift(),i.push({value:n,type:r[0].replace($," ")}),a=a.slice(n.length)),b.filter)!(r=G[o].exec(a))||u[o]&&!(r=u[o](r))||(n=r.shift(),i.push({value:n,type:o,matches:r}),a=a.slice(n.length));if(!n)break}return t?a.length:a?se.error(e):x(e,s).slice(0)},f=se.compile=function(e,t){var n,v,y,m,x,r,i=[],o=[],a=A[e+" "];if(!a){t||(t=h(e)),n=t.length;while(n--)(a=Ee(t[n]))[S]?i.push(a):o.push(a);(a=A(e,(v=o,m=0<(y=i).length,x=0<v.length,r=function(e,t,n,r,i){var o,a,s,u=0,l="0",c=e&&[],f=[],p=w,d=e||x&&b.find.TAG("*",i),h=k+=null==p?1:Math.random()||.1,g=d.length;for(i&&(w=t==C||t||i);l!==g&&null!=(o=d[l]);l++){if(x&&o){a=0,t||o.ownerDocument==C||(T(o),n=!E);while(s=v[a++])if(s(o,t||C,n)){r.push(o);break}i&&(k=h)}m&&((o=!s&&o)&&u--,e&&c.push(o))}if(u+=l,m&&l!==u){a=0;while(s=y[a++])s(c,f,t,n);if(e){if(0<u)while(l--)c[l]||f[l]||(f[l]=q.call(r));f=Te(f)}H.apply(r,f),i&&!e&&0<f.length&&1<u+y.length&&se.uniqueSort(r)}return i&&(k=h,w=p),c},m?le(r):r))).selector=e}return a},g=se.select=function(e,t,n,r){var i,o,a,s,u,l="function"==typeof e&&e,c=!r&&h(e=l.selector||e);if(n=n||[],1===c.length){if(2<(o=c[0]=c[0].slice(0)).length&&"ID"===(a=o[0]).type&&9===t.nodeType&&E&&b.relative[o[1].type]){if(!(t=(b.find.ID(a.matches[0].replace(te,ne),t)||[])[0]))return n;l&&(t=t.parentNode),e=e.slice(o.shift().value.length)}i=G.needsContext.test(e)?0:o.length;while(i--){if(a=o[i],b.relative[s=a.type])break;if((u=b.find[s])&&(r=u(a.matches[0].replace(te,ne),ee.test(o[0].type)&&ye(t.parentNode)||t))){if(o.splice(i,1),!(e=r.length&&xe(o)))return H.apply(n,r),n;break}}}return(l||f(e,c))(r,t,!E,n,!t||ee.test(e)&&ye(t.parentNode)||t),n},d.sortStable=S.split("").sort(j).join("")===S,d.detectDuplicates=!!l,T(),d.sortDetached=ce(function(e){return 1&e.compareDocumentPosition(C.createElement("fieldset"))}),ce(function(e){return e.innerHTML="<a href='#'></a>","#"===e.firstChild.getAttribute("href")})||fe("type|href|height|width",function(e,t,n){if(!n)return e.getAttribute(t,"type"===t.toLowerCase()?1:2)}),d.attributes&&ce(function(e){return e.innerHTML="<input/>",e.firstChild.setAttribute("value",""),""===e.firstChild.getAttribute("value")})||fe("value",function(e,t,n){if(!n&&"input"===e.nodeName.toLowerCase())return e.defaultValue}),ce(function(e){return null==e.getAttribute("disabled")})||fe(R,function(e,t,n){var r;if(!n)return!0===e[t]?t.toLowerCase():(r=e.getAttributeNode(t))&&r.specified?r.value:null}),se}(C);S.find=d,S.expr=d.selectors,S.expr[":"]=S.expr.pseudos,S.uniqueSort=S.unique=d.uniqueSort,S.text=d.getText,S.isXMLDoc=d.isXML,S.contains=d.contains,S.escapeSelector=d.escape;var h=function(e,t,n){var r=[],i=void 0!==n;while((e=e[t])&&9!==e.nodeType)if(1===e.nodeType){if(i&&S(e).is(n))break;r.push(e)}return r},T=function(e,t){for(var n=[];e;e=e.nextSibling)1===e.nodeType&&e!==t&&n.push(e);return n},k=S.expr.match.needsContext;function A(e,t){return e.nodeName&&e.nodeName.toLowerCase()===t.toLowerCase()}var N=/^<([a-z][^\/\0>:\x20\t\r\n\f]*)[\x20\t\r\n\f]*\/?>(?:<\/\1>|)$/i;function j(e,n,r){return m(n)?S.grep(e,function(e,t){return!!n.call(e,t,e)!==r}):n.nodeType?S.grep(e,function(e){return e===n!==r}):"string"!=typeof n?S.grep(e,function(e){return-1<i.call(n,e)!==r}):S.filter(n,e,r)}S.filter=function(e,t,n){var r=t[0];return n&&(e=":not("+e+")"),1===t.length&&1===r.nodeType?S.find.matchesSelector(r,e)?[r]:[]:S.find.matches(e,S.grep(t,function(e){return 1===e.nodeType}))},S.fn.extend({find:function(e){var t,n,r=this.length,i=this;if("string"!=typeof e)return this.pushStack(S(e).filter(function(){for(t=0;t<r;t++)if(S.contains(i[t],this))return!0}));for(n=this.pushStack([]),t=0;t<r;t++)S.find(e,i[t],n);return 1<r?S.uniqueSort(n):n},filter:function(e){return this.pushStack(j(this,e||[],!1))},not:function(e){return this.pushStack(j(this,e||[],!0))},is:function(e){return!!j(this,"string"==typeof e&&k.test(e)?S(e):e||[],!1).length}});var D,q=/^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]+))$/;(S.fn.init=function(e,t,n){var r,i;if(!e)return this;if(n=n||D,"string"==typeof e){if(!(r="<"===e[0]&&">"===e[e.length-1]&&3<=e.length?[null,e,null]:q.exec(e))||!r[1]&&t)return!t||t.jquery?(t||n).find(e):this.constructor(t).find(e);if(r[1]){if(t=t instanceof S?t[0]:t,S.merge(this,S.parseHTML(r[1],t&&t.nodeType?t.ownerDocument||t:E,!0)),N.test(r[1])&&S.isPlainObject(t))for(r in t)m(this[r])?this[r](t[r]):this.attr(r,t[r]);return this}return(i=E.getElementById(r[2]))&&(this[0]=i,this.length=1),this}return e.nodeType?(this[0]=e,this.length=1,this):m(e)?void 0!==n.ready?n.ready(e):e(S):S.makeArray(e,this)}).prototype=S.fn,D=S(E);var L=/^(?:parents|prev(?:Until|All))/,H={children:!0,contents:!0,next:!0,prev:!0};function O(e,t){while((e=e[t])&&1!==e.nodeType);return e}S.fn.extend({has:function(e){var t=S(e,this),n=t.length;return this.filter(function(){for(var e=0;e<n;e++)if(S.contains(this,t[e]))return!0})},closest:function(e,t){var n,r=0,i=this.length,o=[],a="string"!=typeof e&&S(e);if(!k.test(e))for(;r<i;r++)for(n=this[r];n&&n!==t;n=n.parentNode)if(n.nodeType<11&&(a?-1<a.index(n):1===n.nodeType&&S.find.matchesSelector(n,e))){o.push(n);break}return this.pushStack(1<o.length?S.uniqueSort(o):o)},index:function(e){return e?"string"==typeof e?i.call(S(e),this[0]):i.call(this,e.jquery?e[0]:e):this[0]&&this[0].parentNode?this.first().prevAll().length:-1},add:function(e,t){return this.pushStack(S.uniqueSort(S.merge(this.get(),S(e,t))))},addBack:function(e){return this.add(null==e?this.prevObject:this.prevObject.filter(e))}}),S.each({parent:function(e){var t=e.parentNode;return t&&11!==t.nodeType?t:null},parents:function(e){return h(e,"parentNode")},parentsUntil:function(e,t,n){return h(e,"parentNode",n)},next:function(e){return O(e,"nextSibling")},prev:function(e){return O(e,"previousSibling")},nextAll:function(e){return h(e,"nextSibling")},prevAll:function(e){return h(e,"previousSibling")},nextUntil:function(e,t,n){return h(e,"nextSibling",n)},prevUntil:function(e,t,n){return h(e,"previousSibling",n)},siblings:function(e){return T((e.parentNode||{}).firstChild,e)},children:function(e){return T(e.firstChild)},contents:function(e){return null!=e.contentDocument&&r(e.contentDocument)?e.contentDocument:(A(e,"template")&&(e=e.content||e),S.merge([],e.childNodes))}},function(r,i){S.fn[r]=function(e,t){var n=S.map(this,i,e);return"Until"!==r.slice(-5)&&(t=e),t&&"string"==typeof t&&(n=S.filter(t,n)),1<this.length&&(H[r]||S.uniqueSort(n),L.test(r)&&n.reverse()),this.pushStack(n)}});var P=/[^\x20\t\r\n\f]+/g;function R(e){return e}function M(e){throw e}function I(e,t,n,r){var i;try{e&&m(i=e.promise)?i.call(e).done(t).fail(n):e&&m(i=e.then)?i.call(e,t,n):t.apply(void 0,[e].slice(r))}catch(e){n.apply(void 0,[e])}}S.Callbacks=function(r){var e,n;r="string"==typeof r?(e=r,n={},S.each(e.match(P)||[],function(e,t){n[t]=!0}),n):S.extend({},r);var i,t,o,a,s=[],u=[],l=-1,c=function(){for(a=a||r.once,o=i=!0;u.length;l=-1){t=u.shift();while(++l<s.length)!1===s[l].apply(t[0],t[1])&&r.stopOnFalse&&(l=s.length,t=!1)}r.memory||(t=!1),i=!1,a&&(s=t?[]:"")},f={add:function(){return s&&(t&&!i&&(l=s.length-1,u.push(t)),function n(e){S.each(e,function(e,t){m(t)?r.unique&&f.has(t)||s.push(t):t&&t.length&&"string"!==w(t)&&n(t)})}(arguments),t&&!i&&c()),this},remove:function(){return S.each(arguments,function(e,t){var n;while(-1<(n=S.inArray(t,s,n)))s.splice(n,1),n<=l&&l--}),this},has:function(e){return e?-1<S.inArray(e,s):0<s.length},empty:function(){return s&&(s=[]),this},disable:function(){return a=u=[],s=t="",this},disabled:function(){return!s},lock:function(){return a=u=[],t||i||(s=t=""),this},locked:function(){return!!a},fireWith:function(e,t){return a||(t=[e,(t=t||[]).slice?t.slice():t],u.push(t),i||c()),this},fire:function(){return f.fireWith(this,arguments),this},fired:function(){return!!o}};return f},S.extend({Deferred:function(e){var o=[["notify","progress",S.Callbacks("memory"),S.Callbacks("memory"),2],["resolve","done",S.Callbacks("once memory"),S.Callbacks("once memory"),0,"resolved"],["reject","fail",S.Callbacks("once memory"),S.Callbacks("once memory"),1,"rejected"]],i="pending",a={state:function(){return i},always:function(){return s.done(arguments).fail(arguments),this},"catch":function(e){return a.then(null,e)},pipe:function(){var i=arguments;return S.Deferred(function(r){S.each(o,function(e,t){var n=m(i[t[4]])&&i[t[4]];s[t[1]](function(){var e=n&&n.apply(this,arguments);e&&m(e.promise)?e.promise().progress(r.notify).done(r.resolve).fail(r.reject):r[t[0]+"With"](this,n?[e]:arguments)})}),i=null}).promise()},then:function(t,n,r){var u=0;function l(i,o,a,s){return function(){var n=this,r=arguments,e=function(){var e,t;if(!(i<u)){if((e=a.apply(n,r))===o.promise())throw new TypeError("Thenable self-resolution");t=e&&("object"==typeof e||"function"==typeof e)&&e.then,m(t)?s?t.call(e,l(u,o,R,s),l(u,o,M,s)):(u++,t.call(e,l(u,o,R,s),l(u,o,M,s),l(u,o,R,o.notifyWith))):(a!==R&&(n=void 0,r=[e]),(s||o.resolveWith)(n,r))}},t=s?e:function(){try{e()}catch(e){S.Deferred.exceptionHook&&S.Deferred.exceptionHook(e,t.stackTrace),u<=i+1&&(a!==M&&(n=void 0,r=[e]),o.rejectWith(n,r))}};i?t():(S.Deferred.getStackHook&&(t.stackTrace=S.Deferred.getStackHook()),C.setTimeout(t))}}return S.Deferred(function(e){o[0][3].add(l(0,e,m(r)?r:R,e.notifyWith)),o[1][3].add(l(0,e,m(t)?t:R)),o[2][3].add(l(0,e,m(n)?n:M))}).promise()},promise:function(e){return null!=e?S.extend(e,a):a}},s={};return S.each(o,function(e,t){var n=t[2],r=t[5];a[t[1]]=n.add,r&&n.add(function(){i=r},o[3-e][2].disable,o[3-e][3].disable,o[0][2].lock,o[0][3].lock),n.add(t[3].fire),s[t[0]]=function(){return s[t[0]+"With"](this===s?void 0:this,arguments),this},s[t[0]+"With"]=n.fireWith}),a.promise(s),e&&e.call(s,s),s},when:function(e){var n=arguments.length,t=n,r=Array(t),i=s.call(arguments),o=S.Deferred(),a=function(t){return function(e){r[t]=this,i[t]=1<arguments.length?s.call(arguments):e,--n||o.resolveWith(r,i)}};if(n<=1&&(I(e,o.done(a(t)).resolve,o.reject,!n),"pending"===o.state()||m(i[t]&&i[t].then)))return o.then();while(t--)I(i[t],a(t),o.reject);return o.promise()}});var W=/^(Eval|Internal|Range|Reference|Syntax|Type|URI)Error$/;S.Deferred.exceptionHook=function(e,t){C.console&&C.console.warn&&e&&W.test(e.name)&&C.console.warn("jQuery.Deferred exception: "+e.message,e.stack,t)},S.readyException=function(e){C.setTimeout(function(){throw e})};var F=S.Deferred();function B(){E.removeEventListener("DOMContentLoaded",B),C.removeEventListener("load",B),S.ready()}S.fn.ready=function(e){return F.then(e)["catch"](function(e){S.readyException(e)}),this},S.extend({isReady:!1,readyWait:1,ready:function(e){(!0===e?--S.readyWait:S.isReady)||(S.isReady=!0)!==e&&0<--S.readyWait||F.resolveWith(E,[S])}}),S.ready.then=F.then,"complete"===E.readyState||"loading"!==E.readyState&&!E.documentElement.doScroll?C.setTimeout(S.ready):(E.addEventListener("DOMContentLoaded",B),C.addEventListener("load",B));var $=function(e,t,n,r,i,o,a){var s=0,u=e.length,l=null==n;if("object"===w(n))for(s in i=!0,n)$(e,t,s,n[s],!0,o,a);else if(void 0!==r&&(i=!0,m(r)||(a=!0),l&&(a?(t.call(e,r),t=null):(l=t,t=function(e,t,n){return l.call(S(e),n)})),t))for(;s<u;s++)t(e[s],n,a?r:r.call(e[s],s,t(e[s],n)));return i?e:l?t.call(e):u?t(e[0],n):o},_=/^-ms-/,z=/-([a-z])/g;function U(e,t){return t.toUpperCase()}function X(e){return e.replace(_,"ms-").replace(z,U)}var V=function(e){return 1===e.nodeType||9===e.nodeType||!+e.nodeType};function G(){this.expando=S.expando+G.uid++}G.uid=1,G.prototype={cache:function(e){var t=e[this.expando];return t||(t={},V(e)&&(e.nodeType?e[this.expando]=t:Object.defineProperty(e,this.expando,{value:t,configurable:!0}))),t},set:function(e,t,n){var r,i=this.cache(e);if("string"==typeof t)i[X(t)]=n;else for(r in t)i[X(r)]=t[r];return i},get:function(e,t){return void 0===t?this.cache(e):e[this.expando]&&e[this.expando][X(t)]},access:function(e,t,n){return void 0===t||t&&"string"==typeof t&&void 0===n?this.get(e,t):(this.set(e,t,n),void 0!==n?n:t)},remove:function(e,t){var n,r=e[this.expando];if(void 0!==r){if(void 0!==t){n=(t=Array.isArray(t)?t.map(X):(t=X(t))in r?[t]:t.match(P)||[]).length;while(n--)delete r[t[n]]}(void 0===t||S.isEmptyObject(r))&&(e.nodeType?e[this.expando]=void 0:delete e[this.expando])}},hasData:function(e){var t=e[this.expando];return void 0!==t&&!S.isEmptyObject(t)}};var Y=new G,Q=new G,J=/^(?:\{[\w\W]*\}|\[[\w\W]*\])$/,K=/[A-Z]/g;function Z(e,t,n){var r,i;if(void 0===n&&1===e.nodeType)if(r="data-"+t.replace(K,"-$&").toLowerCase(),"string"==typeof(n=e.getAttribute(r))){try{n="true"===(i=n)||"false"!==i&&("null"===i?null:i===+i+""?+i:J.test(i)?JSON.parse(i):i)}catch(e){}Q.set(e,t,n)}else n=void 0;return n}S.extend({hasData:function(e){return Q.hasData(e)||Y.hasData(e)},data:function(e,t,n){return Q.access(e,t,n)},removeData:function(e,t){Q.remove(e,t)},_data:function(e,t,n){return Y.access(e,t,n)},_removeData:function(e,t){Y.remove(e,t)}}),S.fn.extend({data:function(n,e){var t,r,i,o=this[0],a=o&&o.attributes;if(void 0===n){if(this.length&&(i=Q.get(o),1===o.nodeType&&!Y.get(o,"hasDataAttrs"))){t=a.length;while(t--)a[t]&&0===(r=a[t].name).indexOf("data-")&&(r=X(r.slice(5)),Z(o,r,i[r]));Y.set(o,"hasDataAttrs",!0)}return i}return"object"==typeof n?this.each(function(){Q.set(this,n)}):$(this,function(e){var t;if(o&&void 0===e)return void 0!==(t=Q.get(o,n))?t:void 0!==(t=Z(o,n))?t:void 0;this.each(function(){Q.set(this,n,e)})},null,e,1<arguments.length,null,!0)},removeData:function(e){return this.each(function(){Q.remove(this,e)})}}),S.extend({queue:function(e,t,n){var r;if(e)return t=(t||"fx")+"queue",r=Y.get(e,t),n&&(!r||Array.isArray(n)?r=Y.access(e,t,S.makeArray(n)):r.push(n)),r||[]},dequeue:function(e,t){t=t||"fx";var n=S.queue(e,t),r=n.length,i=n.shift(),o=S._queueHooks(e,t);"inprogress"===i&&(i=n.shift(),r--),i&&("fx"===t&&n.unshift("inprogress"),delete o.stop,i.call(e,function(){S.dequeue(e,t)},o)),!r&&o&&o.empty.fire()},_queueHooks:function(e,t){var n=t+"queueHooks";return Y.get(e,n)||Y.access(e,n,{empty:S.Callbacks("once memory").add(function(){Y.remove(e,[t+"queue",n])})})}}),S.fn.extend({queue:function(t,n){var e=2;return"string"!=typeof t&&(n=t,t="fx",e--),arguments.length<e?S.queue(this[0],t):void 0===n?this:this.each(function(){var e=S.queue(this,t,n);S._queueHooks(this,t),"fx"===t&&"inprogress"!==e[0]&&S.dequeue(this,t)})},dequeue:function(e){return this.each(function(){S.dequeue(this,e)})},clearQueue:function(e){return this.queue(e||"fx",[])},promise:function(e,t){var n,r=1,i=S.Deferred(),o=this,a=this.length,s=function(){--r||i.resolveWith(o,[o])};"string"!=typeof e&&(t=e,e=void 0),e=e||"fx";while(a--)(n=Y.get(o[a],e+"queueHooks"))&&n.empty&&(r++,n.empty.add(s));return s(),i.promise(t)}});var ee=/[+-]?(?:\d*\.|)\d+(?:[eE][+-]?\d+|)/.source,te=new RegExp("^(?:([+-])=|)("+ee+")([a-z%]*)$","i"),ne=["Top","Right","Bottom","Left"],re=E.documentElement,ie=function(e){return S.contains(e.ownerDocument,e)},oe={composed:!0};re.getRootNode&&(ie=function(e){return S.contains(e.ownerDocument,e)||e.getRootNode(oe)===e.ownerDocument});var ae=function(e,t){return"none"===(e=t||e).style.display||""===e.style.display&&ie(e)&&"none"===S.css(e,"display")};function se(e,t,n,r){var i,o,a=20,s=r?function(){return r.cur()}:function(){return S.css(e,t,"")},u=s(),l=n&&n[3]||(S.cssNumber[t]?"":"px"),c=e.nodeType&&(S.cssNumber[t]||"px"!==l&&+u)&&te.exec(S.css(e,t));if(c&&c[3]!==l){u/=2,l=l||c[3],c=+u||1;while(a--)S.style(e,t,c+l),(1-o)*(1-(o=s()/u||.5))<=0&&(a=0),c/=o;c*=2,S.style(e,t,c+l),n=n||[]}return n&&(c=+c||+u||0,i=n[1]?c+(n[1]+1)*n[2]:+n[2],r&&(r.unit=l,r.start=c,r.end=i)),i}var ue={};function le(e,t){for(var n,r,i,o,a,s,u,l=[],c=0,f=e.length;c<f;c++)(r=e[c]).style&&(n=r.style.display,t?("none"===n&&(l[c]=Y.get(r,"display")||null,l[c]||(r.style.display="")),""===r.style.display&&ae(r)&&(l[c]=(u=a=o=void 0,a=(i=r).ownerDocument,s=i.nodeName,(u=ue[s])||(o=a.body.appendChild(a.createElement(s)),u=S.css(o,"display"),o.parentNode.removeChild(o),"none"===u&&(u="block"),ue[s]=u)))):"none"!==n&&(l[c]="none",Y.set(r,"display",n)));for(c=0;c<f;c++)null!=l[c]&&(e[c].style.display=l[c]);return e}S.fn.extend({show:function(){return le(this,!0)},hide:function(){return le(this)},toggle:function(e){return"boolean"==typeof e?e?this.show():this.hide():this.each(function(){ae(this)?S(this).show():S(this).hide()})}});var ce,fe,pe=/^(?:checkbox|radio)$/i,de=/<([a-z][^\/\0>\x20\t\r\n\f]*)/i,he=/^$|^module$|\/(?:java|ecma)script/i;ce=E.createDocumentFragment().appendChild(E.createElement("div")),(fe=E.createElement("input")).setAttribute("type","radio"),fe.setAttribute("checked","checked"),fe.setAttribute("name","t"),ce.appendChild(fe),y.checkClone=ce.cloneNode(!0).cloneNode(!0).lastChild.checked,ce.innerHTML="<textarea>x</textarea>",y.noCloneChecked=!!ce.cloneNode(!0).lastChild.defaultValue,ce.innerHTML="<option></option>",y.option=!!ce.lastChild;var ge={thead:[1,"<table>","</table>"],col:[2,"<table><colgroup>","</colgroup></table>"],tr:[2,"<table><tbody>","</tbody></table>"],td:[3,"<table><tbody><tr>","</tr></tbody></table>"],_default:[0,"",""]};function ve(e,t){var n;return n="undefined"!=typeof e.getElementsByTagName?e.getElementsByTagName(t||"*"):"undefined"!=typeof e.querySelectorAll?e.querySelectorAll(t||"*"):[],void 0===t||t&&A(e,t)?S.merge([e],n):n}function ye(e,t){for(var n=0,r=e.length;n<r;n++)Y.set(e[n],"globalEval",!t||Y.get(t[n],"globalEval"))}ge.tbody=ge.tfoot=ge.colgroup=ge.caption=ge.thead,ge.th=ge.td,y.option||(ge.optgroup=ge.option=[1,"<select multiple='multiple'>","</select>"]);var me=/<|&#?\w+;/;function xe(e,t,n,r,i){for(var o,a,s,u,l,c,f=t.createDocumentFragment(),p=[],d=0,h=e.length;d<h;d++)if((o=e[d])||0===o)if("object"===w(o))S.merge(p,o.nodeType?[o]:o);else if(me.test(o)){a=a||f.appendChild(t.createElement("div")),s=(de.exec(o)||["",""])[1].toLowerCase(),u=ge[s]||ge._default,a.innerHTML=u[1]+S.htmlPrefilter(o)+u[2],c=u[0];while(c--)a=a.lastChild;S.merge(p,a.childNodes),(a=f.firstChild).textContent=""}else p.push(t.createTextNode(o));f.textContent="",d=0;while(o=p[d++])if(r&&-1<S.inArray(o,r))i&&i.push(o);else if(l=ie(o),a=ve(f.appendChild(o),"script"),l&&ye(a),n){c=0;while(o=a[c++])he.test(o.type||"")&&n.push(o)}return f}var be=/^([^.]*)(?:\.(.+)|)/;function we(){return!0}function Te(){return!1}function Ce(e,t){return e===function(){try{return E.activeElement}catch(e){}}()==("focus"===t)}function Ee(e,t,n,r,i,o){var a,s;if("object"==typeof t){for(s in"string"!=typeof n&&(r=r||n,n=void 0),t)Ee(e,s,n,r,t[s],o);return e}if(null==r&&null==i?(i=n,r=n=void 0):null==i&&("string"==typeof n?(i=r,r=void 0):(i=r,r=n,n=void 0)),!1===i)i=Te;else if(!i)return e;return 1===o&&(a=i,(i=function(e){return S().off(e),a.apply(this,arguments)}).guid=a.guid||(a.guid=S.guid++)),e.each(function(){S.event.add(this,t,i,r,n)})}function Se(e,i,o){o?(Y.set(e,i,!1),S.event.add(e,i,{namespace:!1,handler:function(e){var t,n,r=Y.get(this,i);if(1&e.isTrigger&&this[i]){if(r.length)(S.event.special[i]||{}).delegateType&&e.stopPropagation();else if(r=s.call(arguments),Y.set(this,i,r),t=o(this,i),this[i](),r!==(n=Y.get(this,i))||t?Y.set(this,i,!1):n={},r!==n)return e.stopImmediatePropagation(),e.preventDefault(),n&&n.value}else r.length&&(Y.set(this,i,{value:S.event.trigger(S.extend(r[0],S.Event.prototype),r.slice(1),this)}),e.stopImmediatePropagation())}})):void 0===Y.get(e,i)&&S.event.add(e,i,we)}S.event={global:{},add:function(t,e,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Y.get(t);if(V(t)){n.handler&&(n=(o=n).handler,i=o.selector),i&&S.find.matchesSelector(re,i),n.guid||(n.guid=S.guid++),(u=v.events)||(u=v.events=Object.create(null)),(a=v.handle)||(a=v.handle=function(e){return"undefined"!=typeof S&&S.event.triggered!==e.type?S.event.dispatch.apply(t,arguments):void 0}),l=(e=(e||"").match(P)||[""]).length;while(l--)d=g=(s=be.exec(e[l])||[])[1],h=(s[2]||"").split(".").sort(),d&&(f=S.event.special[d]||{},d=(i?f.delegateType:f.bindType)||d,f=S.event.special[d]||{},c=S.extend({type:d,origType:g,data:r,handler:n,guid:n.guid,selector:i,needsContext:i&&S.expr.match.needsContext.test(i),namespace:h.join(".")},o),(p=u[d])||((p=u[d]=[]).delegateCount=0,f.setup&&!1!==f.setup.call(t,r,h,a)||t.addEventListener&&t.addEventListener(d,a)),f.add&&(f.add.call(t,c),c.handler.guid||(c.handler.guid=n.guid)),i?p.splice(p.delegateCount++,0,c):p.push(c),S.event.global[d]=!0)}},remove:function(e,t,n,r,i){var o,a,s,u,l,c,f,p,d,h,g,v=Y.hasData(e)&&Y.get(e);if(v&&(u=v.events)){l=(t=(t||"").match(P)||[""]).length;while(l--)if(d=g=(s=be.exec(t[l])||[])[1],h=(s[2]||"").split(".").sort(),d){f=S.event.special[d]||{},p=u[d=(r?f.delegateType:f.bindType)||d]||[],s=s[2]&&new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"),a=o=p.length;while(o--)c=p[o],!i&&g!==c.origType||n&&n.guid!==c.guid||s&&!s.test(c.namespace)||r&&r!==c.selector&&("**"!==r||!c.selector)||(p.splice(o,1),c.selector&&p.delegateCount--,f.remove&&f.remove.call(e,c));a&&!p.length&&(f.teardown&&!1!==f.teardown.call(e,h,v.handle)||S.removeEvent(e,d,v.handle),delete u[d])}else for(d in u)S.event.remove(e,d+t[l],n,r,!0);S.isEmptyObject(u)&&Y.remove(e,"handle events")}},dispatch:function(e){var t,n,r,i,o,a,s=new Array(arguments.length),u=S.event.fix(e),l=(Y.get(this,"events")||Object.create(null))[u.type]||[],c=S.event.special[u.type]||{};for(s[0]=u,t=1;t<arguments.length;t++)s[t]=arguments[t];if(u.delegateTarget=this,!c.preDispatch||!1!==c.preDispatch.call(this,u)){a=S.event.handlers.call(this,u,l),t=0;while((i=a[t++])&&!u.isPropagationStopped()){u.currentTarget=i.elem,n=0;while((o=i.handlers[n++])&&!u.isImmediatePropagationStopped())u.rnamespace&&!1!==o.namespace&&!u.rnamespace.test(o.namespace)||(u.handleObj=o,u.data=o.data,void 0!==(r=((S.event.special[o.origType]||{}).handle||o.handler).apply(i.elem,s))&&!1===(u.result=r)&&(u.preventDefault(),u.stopPropagation()))}return c.postDispatch&&c.postDispatch.call(this,u),u.result}},handlers:function(e,t){var n,r,i,o,a,s=[],u=t.delegateCount,l=e.target;if(u&&l.nodeType&&!("click"===e.type&&1<=e.button))for(;l!==this;l=l.parentNode||this)if(1===l.nodeType&&("click"!==e.type||!0!==l.disabled)){for(o=[],a={},n=0;n<u;n++)void 0===a[i=(r=t[n]).selector+" "]&&(a[i]=r.needsContext?-1<S(i,this).index(l):S.find(i,this,null,[l]).length),a[i]&&o.push(r);o.length&&s.push({elem:l,handlers:o})}return l=this,u<t.length&&s.push({elem:l,handlers:t.slice(u)}),s},addProp:function(t,e){Object.defineProperty(S.Event.prototype,t,{enumerable:!0,configurable:!0,get:m(e)?function(){if(this.originalEvent)return e(this.originalEvent)}:function(){if(this.originalEvent)return this.originalEvent[t]},set:function(e){Object.defineProperty(this,t,{enumerable:!0,configurable:!0,writable:!0,value:e})}})},fix:function(e){return e[S.expando]?e:new S.Event(e)},special:{load:{noBubble:!0},click:{setup:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click",we),!1},trigger:function(e){var t=this||e;return pe.test(t.type)&&t.click&&A(t,"input")&&Se(t,"click"),!0},_default:function(e){var t=e.target;return pe.test(t.type)&&t.click&&A(t,"input")&&Y.get(t,"click")||A(t,"a")}},beforeunload:{postDispatch:function(e){void 0!==e.result&&e.originalEvent&&(e.originalEvent.returnValue=e.result)}}}},S.removeEvent=function(e,t,n){e.removeEventListener&&e.removeEventListener(t,n)},S.Event=function(e,t){if(!(this instanceof S.Event))return new S.Event(e,t);e&&e.type?(this.originalEvent=e,this.type=e.type,this.isDefaultPrevented=e.defaultPrevented||void 0===e.defaultPrevented&&!1===e.returnValue?we:Te,this.target=e.target&&3===e.target.nodeType?e.target.parentNode:e.target,this.currentTarget=e.currentTarget,this.relatedTarget=e.relatedTarget):this.type=e,t&&S.extend(this,t),this.timeStamp=e&&e.timeStamp||Date.now(),this[S.expando]=!0},S.Event.prototype={constructor:S.Event,isDefaultPrevented:Te,isPropagationStopped:Te,isImmediatePropagationStopped:Te,isSimulated:!1,preventDefault:function(){var e=this.originalEvent;this.isDefaultPrevented=we,e&&!this.isSimulated&&e.preventDefault()},stopPropagation:function(){var e=this.originalEvent;this.isPropagationStopped=we,e&&!this.isSimulated&&e.stopPropagation()},stopImmediatePropagation:function(){var e=this.originalEvent;this.isImmediatePropagationStopped=we,e&&!this.isSimulated&&e.stopImmediatePropagation(),this.stopPropagation()}},S.each({altKey:!0,bubbles:!0,cancelable:!0,changedTouches:!0,ctrlKey:!0,detail:!0,eventPhase:!0,metaKey:!0,pageX:!0,pageY:!0,shiftKey:!0,view:!0,"char":!0,code:!0,charCode:!0,key:!0,keyCode:!0,button:!0,buttons:!0,clientX:!0,clientY:!0,offsetX:!0,offsetY:!0,pointerId:!0,pointerType:!0,screenX:!0,screenY:!0,targetTouches:!0,toElement:!0,touches:!0,which:!0},S.event.addProp),S.each({focus:"focusin",blur:"focusout"},function(e,t){S.event.special[e]={setup:function(){return Se(this,e,Ce),!1},trigger:function(){return Se(this,e),!0},_default:function(){return!0},delegateType:t}}),S.each({mouseenter:"mouseover",mouseleave:"mouseout",pointerenter:"pointerover",pointerleave:"pointerout"},function(e,i){S.event.special[e]={delegateType:i,bindType:i,handle:function(e){var t,n=e.relatedTarget,r=e.handleObj;return n&&(n===this||S.contains(this,n))||(e.type=r.origType,t=r.handler.apply(this,arguments),e.type=i),t}}}),S.fn.extend({on:function(e,t,n,r){return Ee(this,e,t,n,r)},one:function(e,t,n,r){return Ee(this,e,t,n,r,1)},off:function(e,t,n){var r,i;if(e&&e.preventDefault&&e.handleObj)return r=e.handleObj,S(e.delegateTarget).off(r.namespace?r.origType+"."+r.namespace:r.origType,r.selector,r.handler),this;if("object"==typeof e){for(i in e)this.off(i,t,e[i]);return this}return!1!==t&&"function"!=typeof t||(n=t,t=void 0),!1===n&&(n=Te),this.each(function(){S.event.remove(this,e,n,t)})}});var ke=/<script|<style|<link/i,Ae=/checked\s*(?:[^=]|=\s*.checked.)/i,Ne=/^\s*<!(?:\[CDATA\[|--)|(?:\]\]|--)>\s*$/g;function je(e,t){return A(e,"table")&&A(11!==t.nodeType?t:t.firstChild,"tr")&&S(e).children("tbody")[0]||e}function De(e){return e.type=(null!==e.getAttribute("type"))+"/"+e.type,e}function qe(e){return"true/"===(e.type||"").slice(0,5)?e.type=e.type.slice(5):e.removeAttribute("type"),e}function Le(e,t){var n,r,i,o,a,s;if(1===t.nodeType){if(Y.hasData(e)&&(s=Y.get(e).events))for(i in Y.remove(t,"handle events"),s)for(n=0,r=s[i].length;n<r;n++)S.event.add(t,i,s[i][n]);Q.hasData(e)&&(o=Q.access(e),a=S.extend({},o),Q.set(t,a))}}function He(n,r,i,o){r=g(r);var e,t,a,s,u,l,c=0,f=n.length,p=f-1,d=r[0],h=m(d);if(h||1<f&&"string"==typeof d&&!y.checkClone&&Ae.test(d))return n.each(function(e){var t=n.eq(e);h&&(r[0]=d.call(this,e,t.html())),He(t,r,i,o)});if(f&&(t=(e=xe(r,n[0].ownerDocument,!1,n,o)).firstChild,1===e.childNodes.length&&(e=t),t||o)){for(s=(a=S.map(ve(e,"script"),De)).length;c<f;c++)u=e,c!==p&&(u=S.clone(u,!0,!0),s&&S.merge(a,ve(u,"script"))),i.call(n[c],u,c);if(s)for(l=a[a.length-1].ownerDocument,S.map(a,qe),c=0;c<s;c++)u=a[c],he.test(u.type||"")&&!Y.access(u,"globalEval")&&S.contains(l,u)&&(u.src&&"module"!==(u.type||"").toLowerCase()?S._evalUrl&&!u.noModule&&S._evalUrl(u.src,{nonce:u.nonce||u.getAttribute("nonce")},l):b(u.textContent.replace(Ne,""),u,l))}return n}function Oe(e,t,n){for(var r,i=t?S.filter(t,e):e,o=0;null!=(r=i[o]);o++)n||1!==r.nodeType||S.cleanData(ve(r)),r.parentNode&&(n&&ie(r)&&ye(ve(r,"script")),r.parentNode.removeChild(r));return e}S.extend({htmlPrefilter:function(e){return e},clone:function(e,t,n){var r,i,o,a,s,u,l,c=e.cloneNode(!0),f=ie(e);if(!(y.noCloneChecked||1!==e.nodeType&&11!==e.nodeType||S.isXMLDoc(e)))for(a=ve(c),r=0,i=(o=ve(e)).length;r<i;r++)s=o[r],u=a[r],void 0,"input"===(l=u.nodeName.toLowerCase())&&pe.test(s.type)?u.checked=s.checked:"input"!==l&&"textarea"!==l||(u.defaultValue=s.defaultValue);if(t)if(n)for(o=o||ve(e),a=a||ve(c),r=0,i=o.length;r<i;r++)Le(o[r],a[r]);else Le(e,c);return 0<(a=ve(c,"script")).length&&ye(a,!f&&ve(e,"script")),c},cleanData:function(e){for(var t,n,r,i=S.event.special,o=0;void 0!==(n=e[o]);o++)if(V(n)){if(t=n[Y.expando]){if(t.events)for(r in t.events)i[r]?S.event.remove(n,r):S.removeEvent(n,r,t.handle);n[Y.expando]=void 0}n[Q.expando]&&(n[Q.expando]=void 0)}}}),S.fn.extend({detach:function(e){return Oe(this,e,!0)},remove:function(e){return Oe(this,e)},text:function(e){return $(this,function(e){return void 0===e?S.text(this):this.empty().each(function(){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||(this.textContent=e)})},null,e,arguments.length)},append:function(){return He(this,arguments,function(e){1!==this.nodeType&&11!==this.nodeType&&9!==this.nodeType||je(this,e).appendChild(e)})},prepend:function(){return He(this,arguments,function(e){if(1===this.nodeType||11===this.nodeType||9===this.nodeType){var t=je(this,e);t.insertBefore(e,t.firstChild)}})},before:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this)})},after:function(){return He(this,arguments,function(e){this.parentNode&&this.parentNode.insertBefore(e,this.nextSibling)})},empty:function(){for(var e,t=0;null!=(e=this[t]);t++)1===e.nodeType&&(S.cleanData(ve(e,!1)),e.textContent="");return this},clone:function(e,t){return e=null!=e&&e,t=null==t?e:t,this.map(function(){return S.clone(this,e,t)})},html:function(e){return $(this,function(e){var t=this[0]||{},n=0,r=this.length;if(void 0===e&&1===t.nodeType)return t.innerHTML;if("string"==typeof e&&!ke.test(e)&&!ge[(de.exec(e)||["",""])[1].toLowerCase()]){e=S.htmlPrefilter(e);try{for(;n<r;n++)1===(t=this[n]||{}).nodeType&&(S.cleanData(ve(t,!1)),t.innerHTML=e);t=0}catch(e){}}t&&this.empty().append(e)},null,e,arguments.length)},replaceWith:function(){var n=[];return He(this,arguments,function(e){var t=this.parentNode;S.inArray(this,n)<0&&(S.cleanData(ve(this)),t&&t.replaceChild(e,this))},n)}}),S.each({appendTo:"append",prependTo:"prepend",insertBefore:"before",insertAfter:"after",replaceAll:"replaceWith"},function(e,a){S.fn[e]=function(e){for(var t,n=[],r=S(e),i=r.length-1,o=0;o<=i;o++)t=o===i?this:this.clone(!0),S(r[o])[a](t),u.apply(n,t.get());return this.pushStack(n)}});var Pe=new RegExp("^("+ee+")(?!px)[a-z%]+$","i"),Re=function(e){var t=e.ownerDocument.defaultView;return t&&t.opener||(t=C),t.getComputedStyle(e)},Me=function(e,t,n){var r,i,o={};for(i in t)o[i]=e.style[i],e.style[i]=t[i];for(i in r=n.call(e),t)e.style[i]=o[i];return r},Ie=new RegExp(ne.join("|"),"i");function We(e,t,n){var r,i,o,a,s=e.style;return(n=n||Re(e))&&(""!==(a=n.getPropertyValue(t)||n[t])||ie(e)||(a=S.style(e,t)),!y.pixelBoxStyles()&&Pe.test(a)&&Ie.test(t)&&(r=s.width,i=s.minWidth,o=s.maxWidth,s.minWidth=s.maxWidth=s.width=a,a=n.width,s.width=r,s.minWidth=i,s.maxWidth=o)),void 0!==a?a+"":a}function Fe(e,t){return{get:function(){if(!e())return(this.get=t).apply(this,arguments);delete this.get}}}!function(){function e(){if(l){u.style.cssText="position:absolute;left:-11111px;width:60px;margin-top:1px;padding:0;border:0",l.style.cssText="position:relative;display:block;box-sizing:border-box;overflow:scroll;margin:auto;border:1px;padding:1px;width:60%;top:1%",re.appendChild(u).appendChild(l);var e=C.getComputedStyle(l);n="1%"!==e.top,s=12===t(e.marginLeft),l.style.right="60%",o=36===t(e.right),r=36===t(e.width),l.style.position="absolute",i=12===t(l.offsetWidth/3),re.removeChild(u),l=null}}function t(e){return Math.round(parseFloat(e))}var n,r,i,o,a,s,u=E.createElement("div"),l=E.createElement("div");l.style&&(l.style.backgroundClip="content-box",l.cloneNode(!0).style.backgroundClip="",y.clearCloneStyle="content-box"===l.style.backgroundClip,S.extend(y,{boxSizingReliable:function(){return e(),r},pixelBoxStyles:function(){return e(),o},pixelPosition:function(){return e(),n},reliableMarginLeft:function(){return e(),s},scrollboxSize:function(){return e(),i},reliableTrDimensions:function(){var e,t,n,r;return null==a&&(e=E.createElement("table"),t=E.createElement("tr"),n=E.createElement("div"),e.style.cssText="position:absolute;left:-11111px;border-collapse:separate",t.style.cssText="border:1px solid",t.style.height="1px",n.style.height="9px",n.style.display="block",re.appendChild(e).appendChild(t).appendChild(n),r=C.getComputedStyle(t),a=parseInt(r.height,10)+parseInt(r.borderTopWidth,10)+parseInt(r.borderBottomWidth,10)===t.offsetHeight,re.removeChild(e)),a}}))}();var Be=["Webkit","Moz","ms"],$e=E.createElement("div").style,_e={};function ze(e){var t=S.cssProps[e]||_e[e];return t||(e in $e?e:_e[e]=function(e){var t=e[0].toUpperCase()+e.slice(1),n=Be.length;while(n--)if((e=Be[n]+t)in $e)return e}(e)||e)}var Ue=/^(none|table(?!-c[ea]).+)/,Xe=/^--/,Ve={position:"absolute",visibility:"hidden",display:"block"},Ge={letterSpacing:"0",fontWeight:"400"};function Ye(e,t,n){var r=te.exec(t);return r?Math.max(0,r[2]-(n||0))+(r[3]||"px"):t}function Qe(e,t,n,r,i,o){var a="width"===t?1:0,s=0,u=0;if(n===(r?"border":"content"))return 0;for(;a<4;a+=2)"margin"===n&&(u+=S.css(e,n+ne[a],!0,i)),r?("content"===n&&(u-=S.css(e,"padding"+ne[a],!0,i)),"margin"!==n&&(u-=S.css(e,"border"+ne[a]+"Width",!0,i))):(u+=S.css(e,"padding"+ne[a],!0,i),"padding"!==n?u+=S.css(e,"border"+ne[a]+"Width",!0,i):s+=S.css(e,"border"+ne[a]+"Width",!0,i));return!r&&0<=o&&(u+=Math.max(0,Math.ceil(e["offset"+t[0].toUpperCase()+t.slice(1)]-o-u-s-.5))||0),u}function Je(e,t,n){var r=Re(e),i=(!y.boxSizingReliable()||n)&&"border-box"===S.css(e,"boxSizing",!1,r),o=i,a=We(e,t,r),s="offset"+t[0].toUpperCase()+t.slice(1);if(Pe.test(a)){if(!n)return a;a="auto"}return(!y.boxSizingReliable()&&i||!y.reliableTrDimensions()&&A(e,"tr")||"auto"===a||!parseFloat(a)&&"inline"===S.css(e,"display",!1,r))&&e.getClientRects().length&&(i="border-box"===S.css(e,"boxSizing",!1,r),(o=s in e)&&(a=e[s])),(a=parseFloat(a)||0)+Qe(e,t,n||(i?"border":"content"),o,r,a)+"px"}function Ke(e,t,n,r,i){return new Ke.prototype.init(e,t,n,r,i)}S.extend({cssHooks:{opacity:{get:function(e,t){if(t){var n=We(e,"opacity");return""===n?"1":n}}}},cssNumber:{animationIterationCount:!0,columnCount:!0,fillOpacity:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,gridArea:!0,gridColumn:!0,gridColumnEnd:!0,gridColumnStart:!0,gridRow:!0,gridRowEnd:!0,gridRowStart:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0,zoom:!0},cssProps:{},style:function(e,t,n,r){if(e&&3!==e.nodeType&&8!==e.nodeType&&e.style){var i,o,a,s=X(t),u=Xe.test(t),l=e.style;if(u||(t=ze(s)),a=S.cssHooks[t]||S.cssHooks[s],void 0===n)return a&&"get"in a&&void 0!==(i=a.get(e,!1,r))?i:l[t];"string"===(o=typeof n)&&(i=te.exec(n))&&i[1]&&(n=se(e,t,i),o="number"),null!=n&&n==n&&("number"!==o||u||(n+=i&&i[3]||(S.cssNumber[s]?"":"px")),y.clearCloneStyle||""!==n||0!==t.indexOf("background")||(l[t]="inherit"),a&&"set"in a&&void 0===(n=a.set(e,n,r))||(u?l.setProperty(t,n):l[t]=n))}},css:function(e,t,n,r){var i,o,a,s=X(t);return Xe.test(t)||(t=ze(s)),(a=S.cssHooks[t]||S.cssHooks[s])&&"get"in a&&(i=a.get(e,!0,n)),void 0===i&&(i=We(e,t,r)),"normal"===i&&t in Ge&&(i=Ge[t]),""===n||n?(o=parseFloat(i),!0===n||isFinite(o)?o||0:i):i}}),S.each(["height","width"],function(e,u){S.cssHooks[u]={get:function(e,t,n){if(t)return!Ue.test(S.css(e,"display"))||e.getClientRects().length&&e.getBoundingClientRect().width?Je(e,u,n):Me(e,Ve,function(){return Je(e,u,n)})},set:function(e,t,n){var r,i=Re(e),o=!y.scrollboxSize()&&"absolute"===i.position,a=(o||n)&&"border-box"===S.css(e,"boxSizing",!1,i),s=n?Qe(e,u,n,a,i):0;return a&&o&&(s-=Math.ceil(e["offset"+u[0].toUpperCase()+u.slice(1)]-parseFloat(i[u])-Qe(e,u,"border",!1,i)-.5)),s&&(r=te.exec(t))&&"px"!==(r[3]||"px")&&(e.style[u]=t,t=S.css(e,u)),Ye(0,t,s)}}}),S.cssHooks.marginLeft=Fe(y.reliableMarginLeft,function(e,t){if(t)return(parseFloat(We(e,"marginLeft"))||e.getBoundingClientRect().left-Me(e,{marginLeft:0},function(){return e.getBoundingClientRect().left}))+"px"}),S.each({margin:"",padding:"",border:"Width"},function(i,o){S.cssHooks[i+o]={expand:function(e){for(var t=0,n={},r="string"==typeof e?e.split(" "):[e];t<4;t++)n[i+ne[t]+o]=r[t]||r[t-2]||r[0];return n}},"margin"!==i&&(S.cssHooks[i+o].set=Ye)}),S.fn.extend({css:function(e,t){return $(this,function(e,t,n){var r,i,o={},a=0;if(Array.isArray(t)){for(r=Re(e),i=t.length;a<i;a++)o[t[a]]=S.css(e,t[a],!1,r);return o}return void 0!==n?S.style(e,t,n):S.css(e,t)},e,t,1<arguments.length)}}),((S.Tween=Ke).prototype={constructor:Ke,init:function(e,t,n,r,i,o){this.elem=e,this.prop=n,this.easing=i||S.easing._default,this.options=t,this.start=this.now=this.cur(),this.end=r,this.unit=o||(S.cssNumber[n]?"":"px")},cur:function(){var e=Ke.propHooks[this.prop];return e&&e.get?e.get(this):Ke.propHooks._default.get(this)},run:function(e){var t,n=Ke.propHooks[this.prop];return this.options.duration?this.pos=t=S.easing[this.easing](e,this.options.duration*e,0,1,this.options.duration):this.pos=t=e,this.now=(this.end-this.start)*t+this.start,this.options.step&&this.options.step.call(this.elem,this.now,this),n&&n.set?n.set(this):Ke.propHooks._default.set(this),this}}).init.prototype=Ke.prototype,(Ke.propHooks={_default:{get:function(e){var t;return 1!==e.elem.nodeType||null!=e.elem[e.prop]&&null==e.elem.style[e.prop]?e.elem[e.prop]:(t=S.css(e.elem,e.prop,""))&&"auto"!==t?t:0},set:function(e){S.fx.step[e.prop]?S.fx.step[e.prop](e):1!==e.elem.nodeType||!S.cssHooks[e.prop]&&null==e.elem.style[ze(e.prop)]?e.elem[e.prop]=e.now:S.style(e.elem,e.prop,e.now+e.unit)}}}).scrollTop=Ke.propHooks.scrollLeft={set:function(e){e.elem.nodeType&&e.elem.parentNode&&(e.elem[e.prop]=e.now)}},S.easing={linear:function(e){return e},swing:function(e){return.5-Math.cos(e*Math.PI)/2},_default:"swing"},S.fx=Ke.prototype.init,S.fx.step={};var Ze,et,tt,nt,rt=/^(?:toggle|show|hide)$/,it=/queueHooks$/;function ot(){et&&(!1===E.hidden&&C.requestAnimationFrame?C.requestAnimationFrame(ot):C.setTimeout(ot,S.fx.interval),S.fx.tick())}function at(){return C.setTimeout(function(){Ze=void 0}),Ze=Date.now()}function st(e,t){var n,r=0,i={height:e};for(t=t?1:0;r<4;r+=2-t)i["margin"+(n=ne[r])]=i["padding"+n]=e;return t&&(i.opacity=i.width=e),i}function ut(e,t,n){for(var r,i=(lt.tweeners[t]||[]).concat(lt.tweeners["*"]),o=0,a=i.length;o<a;o++)if(r=i[o].call(n,t,e))return r}function lt(o,e,t){var n,a,r=0,i=lt.prefilters.length,s=S.Deferred().always(function(){delete u.elem}),u=function(){if(a)return!1;for(var e=Ze||at(),t=Math.max(0,l.startTime+l.duration-e),n=1-(t/l.duration||0),r=0,i=l.tweens.length;r<i;r++)l.tweens[r].run(n);return s.notifyWith(o,[l,n,t]),n<1&&i?t:(i||s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l]),!1)},l=s.promise({elem:o,props:S.extend({},e),opts:S.extend(!0,{specialEasing:{},easing:S.easing._default},t),originalProperties:e,originalOptions:t,startTime:Ze||at(),duration:t.duration,tweens:[],createTween:function(e,t){var n=S.Tween(o,l.opts,e,t,l.opts.specialEasing[e]||l.opts.easing);return l.tweens.push(n),n},stop:function(e){var t=0,n=e?l.tweens.length:0;if(a)return this;for(a=!0;t<n;t++)l.tweens[t].run(1);return e?(s.notifyWith(o,[l,1,0]),s.resolveWith(o,[l,e])):s.rejectWith(o,[l,e]),this}}),c=l.props;for(!function(e,t){var n,r,i,o,a;for(n in e)if(i=t[r=X(n)],o=e[n],Array.isArray(o)&&(i=o[1],o=e[n]=o[0]),n!==r&&(e[r]=o,delete e[n]),(a=S.cssHooks[r])&&"expand"in a)for(n in o=a.expand(o),delete e[r],o)n in e||(e[n]=o[n],t[n]=i);else t[r]=i}(c,l.opts.specialEasing);r<i;r++)if(n=lt.prefilters[r].call(l,o,c,l.opts))return m(n.stop)&&(S._queueHooks(l.elem,l.opts.queue).stop=n.stop.bind(n)),n;return S.map(c,ut,l),m(l.opts.start)&&l.opts.start.call(o,l),l.progress(l.opts.progress).done(l.opts.done,l.opts.complete).fail(l.opts.fail).always(l.opts.always),S.fx.timer(S.extend(u,{elem:o,anim:l,queue:l.opts.queue})),l}S.Animation=S.extend(lt,{tweeners:{"*":[function(e,t){var n=this.createTween(e,t);return se(n.elem,e,te.exec(t),n),n}]},tweener:function(e,t){m(e)?(t=e,e=["*"]):e=e.match(P);for(var n,r=0,i=e.length;r<i;r++)n=e[r],lt.tweeners[n]=lt.tweeners[n]||[],lt.tweeners[n].unshift(t)},prefilters:[function(e,t,n){var r,i,o,a,s,u,l,c,f="width"in t||"height"in t,p=this,d={},h=e.style,g=e.nodeType&&ae(e),v=Y.get(e,"fxshow");for(r in n.queue||(null==(a=S._queueHooks(e,"fx")).unqueued&&(a.unqueued=0,s=a.empty.fire,a.empty.fire=function(){a.unqueued||s()}),a.unqueued++,p.always(function(){p.always(function(){a.unqueued--,S.queue(e,"fx").length||a.empty.fire()})})),t)if(i=t[r],rt.test(i)){if(delete t[r],o=o||"toggle"===i,i===(g?"hide":"show")){if("show"!==i||!v||void 0===v[r])continue;g=!0}d[r]=v&&v[r]||S.style(e,r)}if((u=!S.isEmptyObject(t))||!S.isEmptyObject(d))for(r in f&&1===e.nodeType&&(n.overflow=[h.overflow,h.overflowX,h.overflowY],null==(l=v&&v.display)&&(l=Y.get(e,"display")),"none"===(c=S.css(e,"display"))&&(l?c=l:(le([e],!0),l=e.style.display||l,c=S.css(e,"display"),le([e]))),("inline"===c||"inline-block"===c&&null!=l)&&"none"===S.css(e,"float")&&(u||(p.done(function(){h.display=l}),null==l&&(c=h.display,l="none"===c?"":c)),h.display="inline-block")),n.overflow&&(h.overflow="hidden",p.always(function(){h.overflow=n.overflow[0],h.overflowX=n.overflow[1],h.overflowY=n.overflow[2]})),u=!1,d)u||(v?"hidden"in v&&(g=v.hidden):v=Y.access(e,"fxshow",{display:l}),o&&(v.hidden=!g),g&&le([e],!0),p.done(function(){for(r in g||le([e]),Y.remove(e,"fxshow"),d)S.style(e,r,d[r])})),u=ut(g?v[r]:0,r,p),r in v||(v[r]=u.start,g&&(u.end=u.start,u.start=0))}],prefilter:function(e,t){t?lt.prefilters.unshift(e):lt.prefilters.push(e)}}),S.speed=function(e,t,n){var r=e&&"object"==typeof e?S.extend({},e):{complete:n||!n&&t||m(e)&&e,duration:e,easing:n&&t||t&&!m(t)&&t};return S.fx.off?r.duration=0:"number"!=typeof r.duration&&(r.duration in S.fx.speeds?r.duration=S.fx.speeds[r.duration]:r.duration=S.fx.speeds._default),null!=r.queue&&!0!==r.queue||(r.queue="fx"),r.old=r.complete,r.complete=function(){m(r.old)&&r.old.call(this),r.queue&&S.dequeue(this,r.queue)},r},S.fn.extend({fadeTo:function(e,t,n,r){return this.filter(ae).css("opacity",0).show().end().animate({opacity:t},e,n,r)},animate:function(t,e,n,r){var i=S.isEmptyObject(t),o=S.speed(e,n,r),a=function(){var e=lt(this,S.extend({},t),o);(i||Y.get(this,"finish"))&&e.stop(!0)};return a.finish=a,i||!1===o.queue?this.each(a):this.queue(o.queue,a)},stop:function(i,e,o){var a=function(e){var t=e.stop;delete e.stop,t(o)};return"string"!=typeof i&&(o=e,e=i,i=void 0),e&&this.queue(i||"fx",[]),this.each(function(){var e=!0,t=null!=i&&i+"queueHooks",n=S.timers,r=Y.get(this);if(t)r[t]&&r[t].stop&&a(r[t]);else for(t in r)r[t]&&r[t].stop&&it.test(t)&&a(r[t]);for(t=n.length;t--;)n[t].elem!==this||null!=i&&n[t].queue!==i||(n[t].anim.stop(o),e=!1,n.splice(t,1));!e&&o||S.dequeue(this,i)})},finish:function(a){return!1!==a&&(a=a||"fx"),this.each(function(){var e,t=Y.get(this),n=t[a+"queue"],r=t[a+"queueHooks"],i=S.timers,o=n?n.length:0;for(t.finish=!0,S.queue(this,a,[]),r&&r.stop&&r.stop.call(this,!0),e=i.length;e--;)i[e].elem===this&&i[e].queue===a&&(i[e].anim.stop(!0),i.splice(e,1));for(e=0;e<o;e++)n[e]&&n[e].finish&&n[e].finish.call(this);delete t.finish})}}),S.each(["toggle","show","hide"],function(e,r){var i=S.fn[r];S.fn[r]=function(e,t,n){return null==e||"boolean"==typeof e?i.apply(this,arguments):this.animate(st(r,!0),e,t,n)}}),S.each({slideDown:st("show"),slideUp:st("hide"),slideToggle:st("toggle"),fadeIn:{opacity:"show"},fadeOut:{opacity:"hide"},fadeToggle:{opacity:"toggle"}},function(e,r){S.fn[e]=function(e,t,n){return this.animate(r,e,t,n)}}),S.timers=[],S.fx.tick=function(){var e,t=0,n=S.timers;for(Ze=Date.now();t<n.length;t++)(e=n[t])()||n[t]!==e||n.splice(t--,1);n.length||S.fx.stop(),Ze=void 0},S.fx.timer=function(e){S.timers.push(e),S.fx.start()},S.fx.interval=13,S.fx.start=function(){et||(et=!0,ot())},S.fx.stop=function(){et=null},S.fx.speeds={slow:600,fast:200,_default:400},S.fn.delay=function(r,e){return r=S.fx&&S.fx.speeds[r]||r,e=e||"fx",this.queue(e,function(e,t){var n=C.setTimeout(e,r);t.stop=function(){C.clearTimeout(n)}})},tt=E.createElement("input"),nt=E.createElement("select").appendChild(E.createElement("option")),tt.type="checkbox",y.checkOn=""!==tt.value,y.optSelected=nt.selected,(tt=E.createElement("input")).value="t",tt.type="radio",y.radioValue="t"===tt.value;var ct,ft=S.expr.attrHandle;S.fn.extend({attr:function(e,t){return $(this,S.attr,e,t,1<arguments.length)},removeAttr:function(e){return this.each(function(){S.removeAttr(this,e)})}}),S.extend({attr:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return"undefined"==typeof e.getAttribute?S.prop(e,t,n):(1===o&&S.isXMLDoc(e)||(i=S.attrHooks[t.toLowerCase()]||(S.expr.match.bool.test(t)?ct:void 0)),void 0!==n?null===n?void S.removeAttr(e,t):i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:(e.setAttribute(t,n+""),n):i&&"get"in i&&null!==(r=i.get(e,t))?r:null==(r=S.find.attr(e,t))?void 0:r)},attrHooks:{type:{set:function(e,t){if(!y.radioValue&&"radio"===t&&A(e,"input")){var n=e.value;return e.setAttribute("type",t),n&&(e.value=n),t}}}},removeAttr:function(e,t){var n,r=0,i=t&&t.match(P);if(i&&1===e.nodeType)while(n=i[r++])e.removeAttribute(n)}}),ct={set:function(e,t,n){return!1===t?S.removeAttr(e,n):e.setAttribute(n,n),n}},S.each(S.expr.match.bool.source.match(/\w+/g),function(e,t){var a=ft[t]||S.find.attr;ft[t]=function(e,t,n){var r,i,o=t.toLowerCase();return n||(i=ft[o],ft[o]=r,r=null!=a(e,t,n)?o:null,ft[o]=i),r}});var pt=/^(?:input|select|textarea|button)$/i,dt=/^(?:a|area)$/i;function ht(e){return(e.match(P)||[]).join(" ")}function gt(e){return e.getAttribute&&e.getAttribute("class")||""}function vt(e){return Array.isArray(e)?e:"string"==typeof e&&e.match(P)||[]}S.fn.extend({prop:function(e,t){return $(this,S.prop,e,t,1<arguments.length)},removeProp:function(e){return this.each(function(){delete this[S.propFix[e]||e]})}}),S.extend({prop:function(e,t,n){var r,i,o=e.nodeType;if(3!==o&&8!==o&&2!==o)return 1===o&&S.isXMLDoc(e)||(t=S.propFix[t]||t,i=S.propHooks[t]),void 0!==n?i&&"set"in i&&void 0!==(r=i.set(e,n,t))?r:e[t]=n:i&&"get"in i&&null!==(r=i.get(e,t))?r:e[t]},propHooks:{tabIndex:{get:function(e){var t=S.find.attr(e,"tabindex");return t?parseInt(t,10):pt.test(e.nodeName)||dt.test(e.nodeName)&&e.href?0:-1}}},propFix:{"for":"htmlFor","class":"className"}}),y.optSelected||(S.propHooks.selected={get:function(e){var t=e.parentNode;return t&&t.parentNode&&t.parentNode.selectedIndex,null},set:function(e){var t=e.parentNode;t&&(t.selectedIndex,t.parentNode&&t.parentNode.selectedIndex)}}),S.each(["tabIndex","readOnly","maxLength","cellSpacing","cellPadding","rowSpan","colSpan","useMap","frameBorder","contentEditable"],function(){S.propFix[this.toLowerCase()]=this}),S.fn.extend({addClass:function(t){var e,n,r,i,o,a,s,u=0;if(m(t))return this.each(function(e){S(this).addClass(t.call(this,e,gt(this)))});if((e=vt(t)).length)while(n=this[u++])if(i=gt(n),r=1===n.nodeType&&" "+ht(i)+" "){a=0;while(o=e[a++])r.indexOf(" "+o+" ")<0&&(r+=o+" ");i!==(s=ht(r))&&n.setAttribute("class",s)}return this},removeClass:function(t){var e,n,r,i,o,a,s,u=0;if(m(t))return this.each(function(e){S(this).removeClass(t.call(this,e,gt(this)))});if(!arguments.length)return this.attr("class","");if((e=vt(t)).length)while(n=this[u++])if(i=gt(n),r=1===n.nodeType&&" "+ht(i)+" "){a=0;while(o=e[a++])while(-1<r.indexOf(" "+o+" "))r=r.replace(" "+o+" "," ");i!==(s=ht(r))&&n.setAttribute("class",s)}return this},toggleClass:function(i,t){var o=typeof i,a="string"===o||Array.isArray(i);return"boolean"==typeof t&&a?t?this.addClass(i):this.removeClass(i):m(i)?this.each(function(e){S(this).toggleClass(i.call(this,e,gt(this),t),t)}):this.each(function(){var e,t,n,r;if(a){t=0,n=S(this),r=vt(i);while(e=r[t++])n.hasClass(e)?n.removeClass(e):n.addClass(e)}else void 0!==i&&"boolean"!==o||((e=gt(this))&&Y.set(this,"__className__",e),this.setAttribute&&this.setAttribute("class",e||!1===i?"":Y.get(this,"__className__")||""))})},hasClass:function(e){var t,n,r=0;t=" "+e+" ";while(n=this[r++])if(1===n.nodeType&&-1<(" "+ht(gt(n))+" ").indexOf(t))return!0;return!1}});var yt=/\r/g;S.fn.extend({val:function(n){var r,e,i,t=this[0];return arguments.length?(i=m(n),this.each(function(e){var t;1===this.nodeType&&(null==(t=i?n.call(this,e,S(this).val()):n)?t="":"number"==typeof t?t+="":Array.isArray(t)&&(t=S.map(t,function(e){return null==e?"":e+""})),(r=S.valHooks[this.type]||S.valHooks[this.nodeName.toLowerCase()])&&"set"in r&&void 0!==r.set(this,t,"value")||(this.value=t))})):t?(r=S.valHooks[t.type]||S.valHooks[t.nodeName.toLowerCase()])&&"get"in r&&void 0!==(e=r.get(t,"value"))?e:"string"==typeof(e=t.value)?e.replace(yt,""):null==e?"":e:void 0}}),S.extend({valHooks:{option:{get:function(e){var t=S.find.attr(e,"value");return null!=t?t:ht(S.text(e))}},select:{get:function(e){var t,n,r,i=e.options,o=e.selectedIndex,a="select-one"===e.type,s=a?null:[],u=a?o+1:i.length;for(r=o<0?u:a?o:0;r<u;r++)if(((n=i[r]).selected||r===o)&&!n.disabled&&(!n.parentNode.disabled||!A(n.parentNode,"optgroup"))){if(t=S(n).val(),a)return t;s.push(t)}return s},set:function(e,t){var n,r,i=e.options,o=S.makeArray(t),a=i.length;while(a--)((r=i[a]).selected=-1<S.inArray(S.valHooks.option.get(r),o))&&(n=!0);return n||(e.selectedIndex=-1),o}}}}),S.each(["radio","checkbox"],function(){S.valHooks[this]={set:function(e,t){if(Array.isArray(t))return e.checked=-1<S.inArray(S(e).val(),t)}},y.checkOn||(S.valHooks[this].get=function(e){return null===e.getAttribute("value")?"on":e.value})}),y.focusin="onfocusin"in C;var mt=/^(?:focusinfocus|focusoutblur)$/,xt=function(e){e.stopPropagation()};S.extend(S.event,{trigger:function(e,t,n,r){var i,o,a,s,u,l,c,f,p=[n||E],d=v.call(e,"type")?e.type:e,h=v.call(e,"namespace")?e.namespace.split("."):[];if(o=f=a=n=n||E,3!==n.nodeType&&8!==n.nodeType&&!mt.test(d+S.event.triggered)&&(-1<d.indexOf(".")&&(d=(h=d.split(".")).shift(),h.sort()),u=d.indexOf(":")<0&&"on"+d,(e=e[S.expando]?e:new S.Event(d,"object"==typeof e&&e)).isTrigger=r?2:3,e.namespace=h.join("."),e.rnamespace=e.namespace?new RegExp("(^|\\.)"+h.join("\\.(?:.*\\.|)")+"(\\.|$)"):null,e.result=void 0,e.target||(e.target=n),t=null==t?[e]:S.makeArray(t,[e]),c=S.event.special[d]||{},r||!c.trigger||!1!==c.trigger.apply(n,t))){if(!r&&!c.noBubble&&!x(n)){for(s=c.delegateType||d,mt.test(s+d)||(o=o.parentNode);o;o=o.parentNode)p.push(o),a=o;a===(n.ownerDocument||E)&&p.push(a.defaultView||a.parentWindow||C)}i=0;while((o=p[i++])&&!e.isPropagationStopped())f=o,e.type=1<i?s:c.bindType||d,(l=(Y.get(o,"events")||Object.create(null))[e.type]&&Y.get(o,"handle"))&&l.apply(o,t),(l=u&&o[u])&&l.apply&&V(o)&&(e.result=l.apply(o,t),!1===e.result&&e.preventDefault());return e.type=d,r||e.isDefaultPrevented()||c._default&&!1!==c._default.apply(p.pop(),t)||!V(n)||u&&m(n[d])&&!x(n)&&((a=n[u])&&(n[u]=null),S.event.triggered=d,e.isPropagationStopped()&&f.addEventListener(d,xt),n[d](),e.isPropagationStopped()&&f.removeEventListener(d,xt),S.event.triggered=void 0,a&&(n[u]=a)),e.result}},simulate:function(e,t,n){var r=S.extend(new S.Event,n,{type:e,isSimulated:!0});S.event.trigger(r,null,t)}}),S.fn.extend({trigger:function(e,t){return this.each(function(){S.event.trigger(e,t,this)})},triggerHandler:function(e,t){var n=this[0];if(n)return S.event.trigger(e,t,n,!0)}}),y.focusin||S.each({focus:"focusin",blur:"focusout"},function(n,r){var i=function(e){S.event.simulate(r,e.target,S.event.fix(e))};S.event.special[r]={setup:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r);t||e.addEventListener(n,i,!0),Y.access(e,r,(t||0)+1)},teardown:function(){var e=this.ownerDocument||this.document||this,t=Y.access(e,r)-1;t?Y.access(e,r,t):(e.removeEventListener(n,i,!0),Y.remove(e,r))}}});var bt=C.location,wt={guid:Date.now()},Tt=/\?/;S.parseXML=function(e){var t,n;if(!e||"string"!=typeof e)return null;try{t=(new C.DOMParser).parseFromString(e,"text/xml")}catch(e){}return n=t&&t.getElementsByTagName("parsererror")[0],t&&!n||S.error("Invalid XML: "+(n?S.map(n.childNodes,function(e){return e.textContent}).join("\n"):e)),t};var Ct=/\[\]$/,Et=/\r?\n/g,St=/^(?:submit|button|image|reset|file)$/i,kt=/^(?:input|select|textarea|keygen)/i;function At(n,e,r,i){var t;if(Array.isArray(e))S.each(e,function(e,t){r||Ct.test(n)?i(n,t):At(n+"["+("object"==typeof t&&null!=t?e:"")+"]",t,r,i)});else if(r||"object"!==w(e))i(n,e);else for(t in e)At(n+"["+t+"]",e[t],r,i)}S.param=function(e,t){var n,r=[],i=function(e,t){var n=m(t)?t():t;r[r.length]=encodeURIComponent(e)+"="+encodeURIComponent(null==n?"":n)};if(null==e)return"";if(Array.isArray(e)||e.jquery&&!S.isPlainObject(e))S.each(e,function(){i(this.name,this.value)});else for(n in e)At(n,e[n],t,i);return r.join("&")},S.fn.extend({serialize:function(){return S.param(this.serializeArray())},serializeArray:function(){return this.map(function(){var e=S.prop(this,"elements");return e?S.makeArray(e):this}).filter(function(){var e=this.type;return this.name&&!S(this).is(":disabled")&&kt.test(this.nodeName)&&!St.test(e)&&(this.checked||!pe.test(e))}).map(function(e,t){var n=S(this).val();return null==n?null:Array.isArray(n)?S.map(n,function(e){return{name:t.name,value:e.replace(Et,"\r\n")}}):{name:t.name,value:n.replace(Et,"\r\n")}}).get()}});var Nt=/%20/g,jt=/#.*$/,Dt=/([?&])_=[^&]*/,qt=/^(.*?):[ \t]*([^\r\n]*)$/gm,Lt=/^(?:GET|HEAD)$/,Ht=/^\/\//,Ot={},Pt={},Rt="*/".concat("*"),Mt=E.createElement("a");function It(o){return function(e,t){"string"!=typeof e&&(t=e,e="*");var n,r=0,i=e.toLowerCase().match(P)||[];if(m(t))while(n=i[r++])"+"===n[0]?(n=n.slice(1)||"*",(o[n]=o[n]||[]).unshift(t)):(o[n]=o[n]||[]).push(t)}}function Wt(t,i,o,a){var s={},u=t===Pt;function l(e){var r;return s[e]=!0,S.each(t[e]||[],function(e,t){var n=t(i,o,a);return"string"!=typeof n||u||s[n]?u?!(r=n):void 0:(i.dataTypes.unshift(n),l(n),!1)}),r}return l(i.dataTypes[0])||!s["*"]&&l("*")}function Ft(e,t){var n,r,i=S.ajaxSettings.flatOptions||{};for(n in t)void 0!==t[n]&&((i[n]?e:r||(r={}))[n]=t[n]);return r&&S.extend(!0,e,r),e}Mt.href=bt.href,S.extend({active:0,lastModified:{},etag:{},ajaxSettings:{url:bt.href,type:"GET",isLocal:/^(?:about|app|app-storage|.+-extension|file|res|widget):$/.test(bt.protocol),global:!0,processData:!0,async:!0,contentType:"application/x-www-form-urlencoded; charset=UTF-8",accepts:{"*":Rt,text:"text/plain",html:"text/html",xml:"application/xml, text/xml",json:"application/json, text/javascript"},contents:{xml:/\bxml\b/,html:/\bhtml/,json:/\bjson\b/},responseFields:{xml:"responseXML",text:"responseText",json:"responseJSON"},converters:{"* text":String,"text html":!0,"text json":JSON.parse,"text xml":S.parseXML},flatOptions:{url:!0,context:!0}},ajaxSetup:function(e,t){return t?Ft(Ft(e,S.ajaxSettings),t):Ft(S.ajaxSettings,e)},ajaxPrefilter:It(Ot),ajaxTransport:It(Pt),ajax:function(e,t){"object"==typeof e&&(t=e,e=void 0),t=t||{};var c,f,p,n,d,r,h,g,i,o,v=S.ajaxSetup({},t),y=v.context||v,m=v.context&&(y.nodeType||y.jquery)?S(y):S.event,x=S.Deferred(),b=S.Callbacks("once memory"),w=v.statusCode||{},a={},s={},u="canceled",T={readyState:0,getResponseHeader:function(e){var t;if(h){if(!n){n={};while(t=qt.exec(p))n[t[1].toLowerCase()+" "]=(n[t[1].toLowerCase()+" "]||[]).concat(t[2])}t=n[e.toLowerCase()+" "]}return null==t?null:t.join(", ")},getAllResponseHeaders:function(){return h?p:null},setRequestHeader:function(e,t){return null==h&&(e=s[e.toLowerCase()]=s[e.toLowerCase()]||e,a[e]=t),this},overrideMimeType:function(e){return null==h&&(v.mimeType=e),this},statusCode:function(e){var t;if(e)if(h)T.always(e[T.status]);else for(t in e)w[t]=[w[t],e[t]];return this},abort:function(e){var t=e||u;return c&&c.abort(t),l(0,t),this}};if(x.promise(T),v.url=((e||v.url||bt.href)+"").replace(Ht,bt.protocol+"//"),v.type=t.method||t.type||v.method||v.type,v.dataTypes=(v.dataType||"*").toLowerCase().match(P)||[""],null==v.crossDomain){r=E.createElement("a");try{r.href=v.url,r.href=r.href,v.crossDomain=Mt.protocol+"//"+Mt.host!=r.protocol+"//"+r.host}catch(e){v.crossDomain=!0}}if(v.data&&v.processData&&"string"!=typeof v.data&&(v.data=S.param(v.data,v.traditional)),Wt(Ot,v,t,T),h)return T;for(i in(g=S.event&&v.global)&&0==S.active++&&S.event.trigger("ajaxStart"),v.type=v.type.toUpperCase(),v.hasContent=!Lt.test(v.type),f=v.url.replace(jt,""),v.hasContent?v.data&&v.processData&&0===(v.contentType||"").indexOf("application/x-www-form-urlencoded")&&(v.data=v.data.replace(Nt,"+")):(o=v.url.slice(f.length),v.data&&(v.processData||"string"==typeof v.data)&&(f+=(Tt.test(f)?"&":"?")+v.data,delete v.data),!1===v.cache&&(f=f.replace(Dt,"$1"),o=(Tt.test(f)?"&":"?")+"_="+wt.guid+++o),v.url=f+o),v.ifModified&&(S.lastModified[f]&&T.setRequestHeader("If-Modified-Since",S.lastModified[f]),S.etag[f]&&T.setRequestHeader("If-None-Match",S.etag[f])),(v.data&&v.hasContent&&!1!==v.contentType||t.contentType)&&T.setRequestHeader("Content-Type",v.contentType),T.setRequestHeader("Accept",v.dataTypes[0]&&v.accepts[v.dataTypes[0]]?v.accepts[v.dataTypes[0]]+("*"!==v.dataTypes[0]?", "+Rt+"; q=0.01":""):v.accepts["*"]),v.headers)T.setRequestHeader(i,v.headers[i]);if(v.beforeSend&&(!1===v.beforeSend.call(y,T,v)||h))return T.abort();if(u="abort",b.add(v.complete),T.done(v.success),T.fail(v.error),c=Wt(Pt,v,t,T)){if(T.readyState=1,g&&m.trigger("ajaxSend",[T,v]),h)return T;v.async&&0<v.timeout&&(d=C.setTimeout(function(){T.abort("timeout")},v.timeout));try{h=!1,c.send(a,l)}catch(e){if(h)throw e;l(-1,e)}}else l(-1,"No Transport");function l(e,t,n,r){var i,o,a,s,u,l=t;h||(h=!0,d&&C.clearTimeout(d),c=void 0,p=r||"",T.readyState=0<e?4:0,i=200<=e&&e<300||304===e,n&&(s=function(e,t,n){var r,i,o,a,s=e.contents,u=e.dataTypes;while("*"===u[0])u.shift(),void 0===r&&(r=e.mimeType||t.getResponseHeader("Content-Type"));if(r)for(i in s)if(s[i]&&s[i].test(r)){u.unshift(i);break}if(u[0]in n)o=u[0];else{for(i in n){if(!u[0]||e.converters[i+" "+u[0]]){o=i;break}a||(a=i)}o=o||a}if(o)return o!==u[0]&&u.unshift(o),n[o]}(v,T,n)),!i&&-1<S.inArray("script",v.dataTypes)&&S.inArray("json",v.dataTypes)<0&&(v.converters["text script"]=function(){}),s=function(e,t,n,r){var i,o,a,s,u,l={},c=e.dataTypes.slice();if(c[1])for(a in e.converters)l[a.toLowerCase()]=e.converters[a];o=c.shift();while(o)if(e.responseFields[o]&&(n[e.responseFields[o]]=t),!u&&r&&e.dataFilter&&(t=e.dataFilter(t,e.dataType)),u=o,o=c.shift())if("*"===o)o=u;else if("*"!==u&&u!==o){if(!(a=l[u+" "+o]||l["* "+o]))for(i in l)if((s=i.split(" "))[1]===o&&(a=l[u+" "+s[0]]||l["* "+s[0]])){!0===a?a=l[i]:!0!==l[i]&&(o=s[0],c.unshift(s[1]));break}if(!0!==a)if(a&&e["throws"])t=a(t);else try{t=a(t)}catch(e){return{state:"parsererror",error:a?e:"No conversion from "+u+" to "+o}}}return{state:"success",data:t}}(v,s,T,i),i?(v.ifModified&&((u=T.getResponseHeader("Last-Modified"))&&(S.lastModified[f]=u),(u=T.getResponseHeader("etag"))&&(S.etag[f]=u)),204===e||"HEAD"===v.type?l="nocontent":304===e?l="notmodified":(l=s.state,o=s.data,i=!(a=s.error))):(a=l,!e&&l||(l="error",e<0&&(e=0))),T.status=e,T.statusText=(t||l)+"",i?x.resolveWith(y,[o,l,T]):x.rejectWith(y,[T,l,a]),T.statusCode(w),w=void 0,g&&m.trigger(i?"ajaxSuccess":"ajaxError",[T,v,i?o:a]),b.fireWith(y,[T,l]),g&&(m.trigger("ajaxComplete",[T,v]),--S.active||S.event.trigger("ajaxStop")))}return T},getJSON:function(e,t,n){return S.get(e,t,n,"json")},getScript:function(e,t){return S.get(e,void 0,t,"script")}}),S.each(["get","post"],function(e,i){S[i]=function(e,t,n,r){return m(t)&&(r=r||n,n=t,t=void 0),S.ajax(S.extend({url:e,type:i,dataType:r,data:t,success:n},S.isPlainObject(e)&&e))}}),S.ajaxPrefilter(function(e){var t;for(t in e.headers)"content-type"===t.toLowerCase()&&(e.contentType=e.headers[t]||"")}),S._evalUrl=function(e,t,n){return S.ajax({url:e,type:"GET",dataType:"script",cache:!0,async:!1,global:!1,converters:{"text script":function(){}},dataFilter:function(e){S.globalEval(e,t,n)}})},S.fn.extend({wrapAll:function(e){var t;return this[0]&&(m(e)&&(e=e.call(this[0])),t=S(e,this[0].ownerDocument).eq(0).clone(!0),this[0].parentNode&&t.insertBefore(this[0]),t.map(function(){var e=this;while(e.firstElementChild)e=e.firstElementChild;return e}).append(this)),this},wrapInner:function(n){return m(n)?this.each(function(e){S(this).wrapInner(n.call(this,e))}):this.each(function(){var e=S(this),t=e.contents();t.length?t.wrapAll(n):e.append(n)})},wrap:function(t){var n=m(t);return this.each(function(e){S(this).wrapAll(n?t.call(this,e):t)})},unwrap:function(e){return this.parent(e).not("body").each(function(){S(this).replaceWith(this.childNodes)}),this}}),S.expr.pseudos.hidden=function(e){return!S.expr.pseudos.visible(e)},S.expr.pseudos.visible=function(e){return!!(e.offsetWidth||e.offsetHeight||e.getClientRects().length)},S.ajaxSettings.xhr=function(){try{return new C.XMLHttpRequest}catch(e){}};var Bt={0:200,1223:204},$t=S.ajaxSettings.xhr();y.cors=!!$t&&"withCredentials"in $t,y.ajax=$t=!!$t,S.ajaxTransport(function(i){var o,a;if(y.cors||$t&&!i.crossDomain)return{send:function(e,t){var n,r=i.xhr();if(r.open(i.type,i.url,i.async,i.username,i.password),i.xhrFields)for(n in i.xhrFields)r[n]=i.xhrFields[n];for(n in i.mimeType&&r.overrideMimeType&&r.overrideMimeType(i.mimeType),i.crossDomain||e["X-Requested-With"]||(e["X-Requested-With"]="XMLHttpRequest"),e)r.setRequestHeader(n,e[n]);o=function(e){return function(){o&&(o=a=r.onload=r.onerror=r.onabort=r.ontimeout=r.onreadystatechange=null,"abort"===e?r.abort():"error"===e?"number"!=typeof r.status?t(0,"error"):t(r.status,r.statusText):t(Bt[r.status]||r.status,r.statusText,"text"!==(r.responseType||"text")||"string"!=typeof r.responseText?{binary:r.response}:{text:r.responseText},r.getAllResponseHeaders()))}},r.onload=o(),a=r.onerror=r.ontimeout=o("error"),void 0!==r.onabort?r.onabort=a:r.onreadystatechange=function(){4===r.readyState&&C.setTimeout(function(){o&&a()})},o=o("abort");try{r.send(i.hasContent&&i.data||null)}catch(e){if(o)throw e}},abort:function(){o&&o()}}}),S.ajaxPrefilter(function(e){e.crossDomain&&(e.contents.script=!1)}),S.ajaxSetup({accepts:{script:"text/javascript, application/javascript, application/ecmascript, application/x-ecmascript"},contents:{script:/\b(?:java|ecma)script\b/},converters:{"text script":function(e){return S.globalEval(e),e}}}),S.ajaxPrefilter("script",function(e){void 0===e.cache&&(e.cache=!1),e.crossDomain&&(e.type="GET")}),S.ajaxTransport("script",function(n){var r,i;if(n.crossDomain||n.scriptAttrs)return{send:function(e,t){r=S("<script>").attr(n.scriptAttrs||{}).prop({charset:n.scriptCharset,src:n.url}).on("load error",i=function(e){r.remove(),i=null,e&&t("error"===e.type?404:200,e.type)}),E.head.appendChild(r[0])},abort:function(){i&&i()}}});var _t,zt=[],Ut=/(=)\?(?=&|$)|\?\?/;S.ajaxSetup({jsonp:"callback",jsonpCallback:function(){var e=zt.pop()||S.expando+"_"+wt.guid++;return this[e]=!0,e}}),S.ajaxPrefilter("json jsonp",function(e,t,n){var r,i,o,a=!1!==e.jsonp&&(Ut.test(e.url)?"url":"string"==typeof e.data&&0===(e.contentType||"").indexOf("application/x-www-form-urlencoded")&&Ut.test(e.data)&&"data");if(a||"jsonp"===e.dataTypes[0])return r=e.jsonpCallback=m(e.jsonpCallback)?e.jsonpCallback():e.jsonpCallback,a?e[a]=e[a].replace(Ut,"$1"+r):!1!==e.jsonp&&(e.url+=(Tt.test(e.url)?"&":"?")+e.jsonp+"="+r),e.converters["script json"]=function(){return o||S.error(r+" was not called"),o[0]},e.dataTypes[0]="json",i=C[r],C[r]=function(){o=arguments},n.always(function(){void 0===i?S(C).removeProp(r):C[r]=i,e[r]&&(e.jsonpCallback=t.jsonpCallback,zt.push(r)),o&&m(i)&&i(o[0]),o=i=void 0}),"script"}),y.createHTMLDocument=((_t=E.implementation.createHTMLDocument("").body).innerHTML="<form></form><form></form>",2===_t.childNodes.length),S.parseHTML=function(e,t,n){return"string"!=typeof e?[]:("boolean"==typeof t&&(n=t,t=!1),t||(y.createHTMLDocument?((r=(t=E.implementation.createHTMLDocument("")).createElement("base")).href=E.location.href,t.head.appendChild(r)):t=E),o=!n&&[],(i=N.exec(e))?[t.createElement(i[1])]:(i=xe([e],t,o),o&&o.length&&S(o).remove(),S.merge([],i.childNodes)));var r,i,o},S.fn.load=function(e,t,n){var r,i,o,a=this,s=e.indexOf(" ");return-1<s&&(r=ht(e.slice(s)),e=e.slice(0,s)),m(t)?(n=t,t=void 0):t&&"object"==typeof t&&(i="POST"),0<a.length&&S.ajax({url:e,type:i||"GET",dataType:"html",data:t}).done(function(e){o=arguments,a.html(r?S("<div>").append(S.parseHTML(e)).find(r):e)}).always(n&&function(e,t){a.each(function(){n.apply(this,o||[e.responseText,t,e])})}),this},S.expr.pseudos.animated=function(t){return S.grep(S.timers,function(e){return t===e.elem}).length},S.offset={setOffset:function(e,t,n){var r,i,o,a,s,u,l=S.css(e,"position"),c=S(e),f={};"static"===l&&(e.style.position="relative"),s=c.offset(),o=S.css(e,"top"),u=S.css(e,"left"),("absolute"===l||"fixed"===l)&&-1<(o+u).indexOf("auto")?(a=(r=c.position()).top,i=r.left):(a=parseFloat(o)||0,i=parseFloat(u)||0),m(t)&&(t=t.call(e,n,S.extend({},s))),null!=t.top&&(f.top=t.top-s.top+a),null!=t.left&&(f.left=t.left-s.left+i),"using"in t?t.using.call(e,f):c.css(f)}},S.fn.extend({offset:function(t){if(arguments.length)return void 0===t?this:this.each(function(e){S.offset.setOffset(this,t,e)});var e,n,r=this[0];return r?r.getClientRects().length?(e=r.getBoundingClientRect(),n=r.ownerDocument.defaultView,{top:e.top+n.pageYOffset,left:e.left+n.pageXOffset}):{top:0,left:0}:void 0},position:function(){if(this[0]){var e,t,n,r=this[0],i={top:0,left:0};if("fixed"===S.css(r,"position"))t=r.getBoundingClientRect();else{t=this.offset(),n=r.ownerDocument,e=r.offsetParent||n.documentElement;while(e&&(e===n.body||e===n.documentElement)&&"static"===S.css(e,"position"))e=e.parentNode;e&&e!==r&&1===e.nodeType&&((i=S(e).offset()).top+=S.css(e,"borderTopWidth",!0),i.left+=S.css(e,"borderLeftWidth",!0))}return{top:t.top-i.top-S.css(r,"marginTop",!0),left:t.left-i.left-S.css(r,"marginLeft",!0)}}},offsetParent:function(){return this.map(function(){var e=this.offsetParent;while(e&&"static"===S.css(e,"position"))e=e.offsetParent;return e||re})}}),S.each({scrollLeft:"pageXOffset",scrollTop:"pageYOffset"},function(t,i){var o="pageYOffset"===i;S.fn[t]=function(e){return $(this,function(e,t,n){var r;if(x(e)?r=e:9===e.nodeType&&(r=e.defaultView),void 0===n)return r?r[i]:e[t];r?r.scrollTo(o?r.pageXOffset:n,o?n:r.pageYOffset):e[t]=n},t,e,arguments.length)}}),S.each(["top","left"],function(e,n){S.cssHooks[n]=Fe(y.pixelPosition,function(e,t){if(t)return t=We(e,n),Pe.test(t)?S(e).position()[n]+"px":t})}),S.each({Height:"height",Width:"width"},function(a,s){S.each({padding:"inner"+a,content:s,"":"outer"+a},function(r,o){S.fn[o]=function(e,t){var n=arguments.length&&(r||"boolean"!=typeof e),i=r||(!0===e||!0===t?"margin":"border");return $(this,function(e,t,n){var r;return x(e)?0===o.indexOf("outer")?e["inner"+a]:e.document.documentElement["client"+a]:9===e.nodeType?(r=e.documentElement,Math.max(e.body["scroll"+a],r["scroll"+a],e.body["offset"+a],r["offset"+a],r["client"+a])):void 0===n?S.css(e,t,i):S.style(e,t,n,i)},s,n?e:void 0,n)}})}),S.each(["ajaxStart","ajaxStop","ajaxComplete","ajaxError","ajaxSuccess","ajaxSend"],function(e,t){S.fn[t]=function(e){return this.on(t,e)}}),S.fn.extend({bind:function(e,t,n){return this.on(e,null,t,n)},unbind:function(e,t){return this.off(e,null,t)},delegate:function(e,t,n,r){return this.on(t,e,n,r)},undelegate:function(e,t,n){return 1===arguments.length?this.off(e,"**"):this.off(t,e||"**",n)},hover:function(e,t){return this.mouseenter(e).mouseleave(t||e)}}),S.each("blur focus focusin focusout resize scroll click dblclick mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave change select submit keydown keypress keyup contextmenu".split(" "),function(e,n){S.fn[n]=function(e,t){return 0<arguments.length?this.on(n,null,e,t):this.trigger(n)}});var Xt=/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;S.proxy=function(e,t){var n,r,i;if("string"==typeof t&&(n=e[t],t=e,e=n),m(e))return r=s.call(arguments,2),(i=function(){return e.apply(t||this,r.concat(s.call(arguments)))}).guid=e.guid=e.guid||S.guid++,i},S.holdReady=function(e){e?S.readyWait++:S.ready(!0)},S.isArray=Array.isArray,S.parseJSON=JSON.parse,S.nodeName=A,S.isFunction=m,S.isWindow=x,S.camelCase=X,S.type=w,S.now=Date.now,S.isNumeric=function(e){var t=S.type(e);return("number"===t||"string"===t)&&!isNaN(e-parseFloat(e))},S.trim=function(e){return null==e?"":(e+"").replace(Xt,"")},"function"==typeof define&&define.amd&&define("jquery",[],function(){return S});var Vt=C.jQuery,Gt=C.$;return S.noConflict=function(e){return C.$===S&&(C.$=Gt),e&&C.jQuery===S&&(C.jQuery=Vt),S},"undefined"==typeof e&&(C.jQuery=C.$=S),S});
\ No newline at end of file
diff --git a/webfiles/lib/jquery/jquery.tmpl.js b/webfiles/lib/jquery/jquery.tmpl.js
new file mode 100644
index 0000000..a23092b
--- /dev/null
+++ b/webfiles/lib/jquery/jquery.tmpl.js
@@ -0,0 +1,484 @@
+/*!
+ * jQuery Templates Plugin 1.0.0pre
+ * http://github.com/jquery/jquery-tmpl
+ * Requires jQuery 1.4.2
+ *
+ * Copyright 2011, Software Freedom Conservancy, Inc.
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ */
+(function( jQuery, undefined ){
+	var oldManip = jQuery.fn.domManip, tmplItmAtt = "_tmplitem", htmlExpr = /^[^<]*(<[\w\W]+>)[^>]*$|\{\{\! /,
+		newTmplItems = {}, wrappedItems = {}, appendToTmplItems, topTmplItem = { key: 0, data: {} }, itemKey = 0, cloneIndex = 0, stack = [];
+
+	function newTmplItem( options, parentItem, fn, data ) {
+		// Returns a template item data structure for a new rendered instance of a template (a 'template item').
+		// The content field is a hierarchical array of strings and nested items (to be
+		// removed and replaced by nodes field of dom elements, once inserted in DOM).
+		var newItem = {
+			data: data || (data === 0 || data === false) ? data : (parentItem ? parentItem.data : {}),
+			_wrap: parentItem ? parentItem._wrap : null,
+			tmpl: null,
+			parent: parentItem || null,
+			nodes: [],
+			calls: tiCalls,
+			nest: tiNest,
+			wrap: tiWrap,
+			html: tiHtml,
+			update: tiUpdate
+		};
+		if ( options ) {
+			jQuery.extend( newItem, options, { nodes: [], parent: parentItem });
+		}
+		if ( fn ) {
+			// Build the hierarchical content to be used during insertion into DOM
+			newItem.tmpl = fn;
+			newItem._ctnt = newItem._ctnt || newItem.tmpl( jQuery, newItem );
+			newItem.key = ++itemKey;
+			// Keep track of new template item, until it is stored as jQuery Data on DOM element
+			(stack.length ? wrappedItems : newTmplItems)[itemKey] = newItem;
+		}
+		return newItem;
+	}
+
+	// Override appendTo etc., in order to provide support for targeting multiple elements. (This code would disappear if integrated in jquery core).
+	jQuery.each({
+		appendTo: "append",
+		prependTo: "prepend",
+		insertBefore: "before",
+		insertAfter: "after",
+		replaceAll: "replaceWith"
+	}, function( name, original ) {
+		jQuery.fn[ name ] = function( selector ) {
+			var ret = [], insert = jQuery( selector ), elems, i, l, tmplItems,
+				parent = this.length === 1 && this[0].parentNode;
+
+			appendToTmplItems = newTmplItems || {};
+			if ( parent && parent.nodeType === 11 && parent.childNodes.length === 1 && insert.length === 1 ) {
+				insert[ original ]( this[0] );
+				ret = this;
+			} else {
+				for ( i = 0, l = insert.length; i < l; i++ ) {
+					cloneIndex = i;
+					elems = (i > 0 ? this.clone(true) : this).get();
+					jQuery( insert[i] )[ original ]( elems );
+					ret = ret.concat( elems );
+				}
+				cloneIndex = 0;
+				ret = this.pushStack( ret, name, insert.selector );
+			}
+			tmplItems = appendToTmplItems;
+			appendToTmplItems = null;
+			jQuery.tmpl.complete( tmplItems );
+			return ret;
+		};
+	});
+
+	jQuery.fn.extend({
+		// Use first wrapped element as template markup.
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( data, options, parentItem ) {
+			return jQuery.tmpl( this[0], data, options, parentItem );
+		},
+
+		// Find which rendered template item the first wrapped DOM element belongs to
+		tmplItem: function() {
+			return jQuery.tmplItem( this[0] );
+		},
+
+		// Consider the first wrapped element as a template declaration, and get the compiled template or store it as a named template.
+		template: function( name ) {
+			return jQuery.template( name, this[0] );
+		},
+
+		domManip: function( args, table, callback, options ) {
+			if ( args[0] && jQuery.isArray( args[0] )) {
+				var dmArgs = jQuery.makeArray( arguments ), elems = args[0], elemsLength = elems.length, i = 0, tmplItem;
+				while ( i < elemsLength && !(tmplItem = jQuery.data( elems[i++], "tmplItem" ))) {}
+				if ( tmplItem && cloneIndex ) {
+					dmArgs[2] = function( fragClone ) {
+						// Handler called by oldManip when rendered template has been inserted into DOM.
+						jQuery.tmpl.afterManip( this, fragClone, callback );
+					};
+				}
+				oldManip.apply( this, dmArgs );
+			} else {
+				oldManip.apply( this, arguments );
+			}
+			cloneIndex = 0;
+			if ( !appendToTmplItems ) {
+				jQuery.tmpl.complete( newTmplItems );
+			}
+			return this;
+		}
+	});
+
+	jQuery.extend({
+		// Return wrapped set of template items, obtained by rendering template against data.
+		tmpl: function( tmpl, data, options, parentItem ) {
+			var ret, topLevel = !parentItem;
+			if ( topLevel ) {
+				// This is a top-level tmpl call (not from a nested template using {{tmpl}})
+				parentItem = topTmplItem;
+				tmpl = jQuery.template[tmpl] || jQuery.template( null, tmpl );
+				wrappedItems = {}; // Any wrapped items will be rebuilt, since this is top level
+			} else if ( !tmpl ) {
+				// The template item is already associated with DOM - this is a refresh.
+				// Re-evaluate rendered template for the parentItem
+				tmpl = parentItem.tmpl;
+				newTmplItems[parentItem.key] = parentItem;
+				parentItem.nodes = [];
+				if ( parentItem.wrapped ) {
+					updateWrapped( parentItem, parentItem.wrapped );
+				}
+				// Rebuild, without creating a new template item
+				return jQuery( build( parentItem, null, parentItem.tmpl( jQuery, parentItem ) ));
+			}
+			if ( !tmpl ) {
+				return []; // Could throw...
+			}
+			if ( typeof data === "function" ) {
+				data = data.call( parentItem || {} );
+			}
+			if ( options && options.wrapped ) {
+				updateWrapped( options, options.wrapped );
+			}
+			ret = jQuery.isArray( data ) ?
+				jQuery.map( data, function( dataItem ) {
+					return dataItem ? newTmplItem( options, parentItem, tmpl, dataItem ) : null;
+				}) :
+				[ newTmplItem( options, parentItem, tmpl, data ) ];
+			return topLevel ? jQuery( build( parentItem, null, ret ) ) : ret;
+		},
+
+		// Return rendered template item for an element.
+		tmplItem: function( elem ) {
+			var tmplItem;
+			if ( elem instanceof jQuery ) {
+				elem = elem[0];
+			}
+			while ( elem && elem.nodeType === 1 && !(tmplItem = jQuery.data( elem, "tmplItem" )) && (elem = elem.parentNode) ) {}
+			return tmplItem || topTmplItem;
+		},
+
+		// Set:
+		// Use $.template( name, tmpl ) to cache a named template,
+		// where tmpl is a template string, a script element or a jQuery instance wrapping a script element, etc.
+		// Use $( "selector" ).template( name ) to provide access by name to a script block template declaration.
+
+		// Get:
+		// Use $.template( name ) to access a cached template.
+		// Also $( selectorToScriptBlock ).template(), or $.template( null, templateString )
+		// will return the compiled template, without adding a name reference.
+		// If templateString includes at least one HTML tag, $.template( templateString ) is equivalent
+		// to $.template( null, templateString )
+		template: function( name, tmpl ) {
+			if (tmpl) {
+				// Compile template and associate with name
+				if ( typeof tmpl === "string" ) {
+					// This is an HTML string being passed directly in.
+					tmpl = buildTmplFn( tmpl );
+				} else if ( tmpl instanceof jQuery ) {
+					tmpl = tmpl[0] || {};
+				}
+				if ( tmpl.nodeType ) {
+					// If this is a template block, use cached copy, or generate tmpl function and cache.
+					tmpl = jQuery.data( tmpl, "tmpl" ) || jQuery.data( tmpl, "tmpl", buildTmplFn( tmpl.innerHTML ));
+					// Issue: In IE, if the container element is not a script block, the innerHTML will remove quotes from attribute values whenever the value does not include white space.
+					// This means that foo="${x}" will not work if the value of x includes white space: foo="${x}" -> foo=value of x.
+					// To correct this, include space in tag: foo="${ x }" -> foo="value of x"
+				}
+				return typeof name === "string" ? (jQuery.template[name] = tmpl) : tmpl;
+			}
+			// Return named compiled template
+			return name ? (typeof name !== "string" ? jQuery.template( null, name ):
+				(jQuery.template[name] ||
+					// If not in map, and not containing at least on HTML tag, treat as a selector.
+					// (If integrated with core, use quickExpr.exec)
+					jQuery.template( null, htmlExpr.test( name ) ? name : jQuery( name )))) : null;
+		},
+
+		encode: function( text ) {
+			// Do HTML encoding replacing < > & and ' and " by corresponding entities.
+			return ("" + text).split("<").join("&lt;").split(">").join("&gt;").split('"').join("&#34;").split("'").join("&#39;");
+		}
+	});
+
+	jQuery.extend( jQuery.tmpl, {
+		tag: {
+			"tmpl": {
+				_default: { $2: "null" },
+				open: "if($notnull_1){__=__.concat($item.nest($1,$2));}"
+				// tmpl target parameter can be of type function, so use $1, not $1a (so not auto detection of functions)
+				// This means that {{tmpl foo}} treats foo as a template (which IS a function).
+				// Explicit parens can be used if foo is a function that returns a template: {{tmpl foo()}}.
+			},
+			"wrap": {
+				_default: { $2: "null" },
+				open: "$item.calls(__,$1,$2);__=[];",
+				close: "call=$item.calls();__=call._.concat($item.wrap(call,__));"
+			},
+			"each": {
+				_default: { $2: "$index, $value" },
+				open: "if($notnull_1){$.each($1a,function($2){with(this){",
+				close: "}});}"
+			},
+			"if": {
+				open: "if(($notnull_1) && $1a){",
+				close: "}"
+			},
+			"else": {
+				_default: { $1: "true" },
+				open: "}else if(($notnull_1) && $1a){"
+			},
+			"html": {
+				// Unecoded expression evaluation.
+				open: "if($notnull_1){__.push($1a);}"
+			},
+			"=": {
+				// Encoded expression evaluation. Abbreviated form is ${}.
+				_default: { $1: "$data" },
+				open: "if($notnull_1){__.push($.encode($1a));}"
+			},
+			"!": {
+				// Comment tag. Skipped by parser
+				open: ""
+			}
+		},
+
+		// This stub can be overridden, e.g. in jquery.tmplPlus for providing rendered events
+		complete: function( items ) {
+			newTmplItems = {};
+		},
+
+		// Call this from code which overrides domManip, or equivalent
+		// Manage cloning/storing template items etc.
+		afterManip: function afterManip( elem, fragClone, callback ) {
+			// Provides cloned fragment ready for fixup prior to and after insertion into DOM
+			var content = fragClone.nodeType === 11 ?
+				jQuery.makeArray(fragClone.childNodes) :
+				fragClone.nodeType === 1 ? [fragClone] : [];
+
+			// Return fragment to original caller (e.g. append) for DOM insertion
+			callback.call( elem, fragClone );
+
+			// Fragment has been inserted:- Add inserted nodes to tmplItem data structure. Replace inserted element annotations by jQuery.data.
+			storeTmplItems( content );
+			cloneIndex++;
+		}
+	});
+
+	//========================== Private helper functions, used by code above ==========================
+
+	function build( tmplItem, nested, content ) {
+		// Convert hierarchical content into flat string array
+		// and finally return array of fragments ready for DOM insertion
+		var frag, ret = content ? jQuery.map( content, function( item ) {
+			return (typeof item === "string") ?
+				// Insert template item annotations, to be converted to jQuery.data( "tmplItem" ) when elems are inserted into DOM.
+				(tmplItem.key ? item.replace( /(<\w+)(?=[\s>])(?![^>]*_tmplitem)([^>]*)/g, "$1 " + tmplItmAtt + "=\"" + tmplItem.key + "\" $2" ) : item) :
+				// This is a child template item. Build nested template.
+				build( item, tmplItem, item._ctnt );
+		}) :
+		// If content is not defined, insert tmplItem directly. Not a template item. May be a string, or a string array, e.g. from {{html $item.html()}}.
+		tmplItem;
+		if ( nested ) {
+			return ret;
+		}
+
+		// top-level template
+		ret = ret.join("");
+
+		// Support templates which have initial or final text nodes, or consist only of text
+		// Also support HTML entities within the HTML markup.
+		ret.replace( /^\s*([^<\s][^<]*)?(<[\w\W]+>)([^>]*[^>\s])?\s*$/, function( all, before, middle, after) {
+			frag = jQuery( middle ).get();
+
+			storeTmplItems( frag );
+			if ( before ) {
+				frag = unencode( before ).concat(frag);
+			}
+			if ( after ) {
+				frag = frag.concat(unencode( after ));
+			}
+		});
+		return frag ? frag : unencode( ret );
+	}
+
+	function unencode( text ) {
+		// Use createElement, since createTextNode will not render HTML entities correctly
+		var el = document.createElement( "div" );
+		el.innerHTML = text;
+		return jQuery.makeArray(el.childNodes);
+	}
+
+	// Generate a reusable function that will serve to render a template against data
+	function buildTmplFn( markup ) {
+		return new Function("jQuery","$item",
+			// Use the variable __ to hold a string array while building the compiled template. (See https://github.com/jquery/jquery-tmpl/issues#issue/10).
+			"var $=jQuery,call,__=[],$data=$item.data;" +
+
+			// Introduce the data as local variables using with(){}
+			"with($data){__.push('" +
+
+			// Convert the template into pure JavaScript
+			jQuery.trim(markup)
+				.replace( /([\\'])/g, "\\$1" )
+				.replace( /[\r\t\n]/g, " " )
+				.replace( /\$\{([^\}]*)\}/g, "{{= $1}}" )
+				.replace( /\{\{(\/?)(\w+|.)(?:\(((?:[^\}]|\}(?!\}))*?)?\))?(?:\s+(.*?)?)?(\(((?:[^\}]|\}(?!\}))*?)\))?\s*\}\}/g,
+				function( all, slash, type, fnargs, target, parens, args ) {
+					var tag = jQuery.tmpl.tag[ type ], def, expr, exprAutoFnDetect;
+					if ( !tag ) {
+						throw "Unknown template tag: " + type;
+					}
+					def = tag._default || [];
+					if ( parens && !/\w$/.test(target)) {
+						target += parens;
+						parens = "";
+					}
+					if ( target ) {
+						target = unescape( target );
+						args = args ? ("," + unescape( args ) + ")") : (parens ? ")" : "");
+						// Support for target being things like a.toLowerCase();
+						// In that case don't call with template item as 'this' pointer. Just evaluate...
+						expr = parens ? (target.indexOf(".") > -1 ? target + unescape( parens ) : ("(" + target + ").call($item" + args)) : target;
+						exprAutoFnDetect = parens ? expr : "(typeof(" + target + ")==='function'?(" + target + ").call($item):(" + target + "))";
+					} else {
+						exprAutoFnDetect = expr = def.$1 || "null";
+					}
+					fnargs = unescape( fnargs );
+					return "');" +
+						tag[ slash ? "close" : "open" ]
+							.split( "$notnull_1" ).join( target ? "typeof(" + target + ")!=='undefined' && (" + target + ")!=null" : "true" )
+							.split( "$1a" ).join( exprAutoFnDetect )
+							.split( "$1" ).join( expr )
+							.split( "$2" ).join( fnargs || def.$2 || "" ) +
+						"__.push('";
+				}) +
+			"');}return __;"
+		);
+	}
+	function updateWrapped( options, wrapped ) {
+		// Build the wrapped content.
+		options._wrap = build( options, true,
+			// Suport imperative scenario in which options.wrapped can be set to a selector or an HTML string.
+			jQuery.isArray( wrapped ) ? wrapped : [htmlExpr.test( wrapped ) ? wrapped : jQuery( wrapped ).html()]
+		).join("");
+	}
+
+	function unescape( args ) {
+		return args ? args.replace( /\\'/g, "'").replace(/\\\\/g, "\\" ) : null;
+	}
+	function outerHtml( elem ) {
+		var div = document.createElement("div");
+		div.appendChild( elem.cloneNode(true) );
+		return div.innerHTML;
+	}
+
+	// Store template items in jQuery.data(), ensuring a unique tmplItem data data structure for each rendered template instance.
+	function storeTmplItems( content ) {
+		var keySuffix = "_" + cloneIndex, elem, elems, newClonedItems = {}, i, l, m;
+		for ( i = 0, l = content.length; i < l; i++ ) {
+			if ( (elem = content[i]).nodeType !== 1 ) {
+				continue;
+			}
+			elems = elem.getElementsByTagName("*");
+			for ( m = elems.length - 1; m >= 0; m-- ) {
+				processItemKey( elems[m] );
+			}
+			processItemKey( elem );
+		}
+		function processItemKey( el ) {
+			var pntKey, pntNode = el, pntItem, tmplItem, key;
+			// Ensure that each rendered template inserted into the DOM has its own template item,
+			if ( (key = el.getAttribute( tmplItmAtt ))) {
+				while ( pntNode.parentNode && (pntNode = pntNode.parentNode).nodeType === 1 && !(pntKey = pntNode.getAttribute( tmplItmAtt ))) { }
+				if ( pntKey !== key ) {
+					// The next ancestor with a _tmplitem expando is on a different key than this one.
+					// So this is a top-level element within this template item
+					// Set pntNode to the key of the parentNode, or to 0 if pntNode.parentNode is null, or pntNode is a fragment.
+					pntNode = pntNode.parentNode ? (pntNode.nodeType === 11 ? 0 : (pntNode.getAttribute( tmplItmAtt ) || 0)) : 0;
+					if ( !(tmplItem = newTmplItems[key]) ) {
+						// The item is for wrapped content, and was copied from the temporary parent wrappedItem.
+						tmplItem = wrappedItems[key];
+						tmplItem = newTmplItem( tmplItem, newTmplItems[pntNode]||wrappedItems[pntNode] );
+						tmplItem.key = ++itemKey;
+						newTmplItems[itemKey] = tmplItem;
+					}
+					if ( cloneIndex ) {
+						cloneTmplItem( key );
+					}
+				}
+				el.removeAttribute( tmplItmAtt );
+			} else if ( cloneIndex && (tmplItem = jQuery.data( el, "tmplItem" )) ) {
+				// This was a rendered element, cloned during append or appendTo etc.
+				// TmplItem stored in jQuery data has already been cloned in cloneCopyEvent. We must replace it with a fresh cloned tmplItem.
+				cloneTmplItem( tmplItem.key );
+				newTmplItems[tmplItem.key] = tmplItem;
+				pntNode = jQuery.data( el.parentNode, "tmplItem" );
+				pntNode = pntNode ? pntNode.key : 0;
+			}
+			if ( tmplItem ) {
+				pntItem = tmplItem;
+				// Find the template item of the parent element.
+				// (Using !=, not !==, since pntItem.key is number, and pntNode may be a string)
+				while ( pntItem && pntItem.key != pntNode ) {
+					// Add this element as a top-level node for this rendered template item, as well as for any
+					// ancestor items between this item and the item of its parent element
+					pntItem.nodes.push( el );
+					pntItem = pntItem.parent;
+				}
+				// Delete content built during rendering - reduce API surface area and memory use, and avoid exposing of stale data after rendering...
+				delete tmplItem._ctnt;
+				delete tmplItem._wrap;
+				// Store template item as jQuery data on the element
+				jQuery.data( el, "tmplItem", tmplItem );
+			}
+			function cloneTmplItem( key ) {
+				key = key + keySuffix;
+				tmplItem = newClonedItems[key] =
+					(newClonedItems[key] || newTmplItem( tmplItem, newTmplItems[tmplItem.parent.key + keySuffix] || tmplItem.parent ));
+			}
+		}
+	}
+
+	//---- Helper functions for template item ----
+
+	function tiCalls( content, tmpl, data, options ) {
+		if ( !content ) {
+			return stack.pop();
+		}
+		stack.push({ _: content, tmpl: tmpl, item:this, data: data, options: options });
+	}
+
+	function tiNest( tmpl, data, options ) {
+		// nested template, using {{tmpl}} tag
+		return jQuery.tmpl( jQuery.template( tmpl ), data, options, this );
+	}
+
+	function tiWrap( call, wrapped ) {
+		// nested template, using {{wrap}} tag
+		var options = call.options || {};
+		options.wrapped = wrapped;
+		// Apply the template, which may incorporate wrapped content,
+		return jQuery.tmpl( jQuery.template( call.tmpl ), call.data, options, call.item );
+	}
+
+	function tiHtml( filter, textOnly ) {
+		var wrapped = this._wrap;
+		return jQuery.map(
+			jQuery( jQuery.isArray( wrapped ) ? wrapped.join("") : wrapped ).filter( filter || "*" ),
+			function(e) {
+				return textOnly ?
+					e.innerText || e.textContent :
+					e.outerHTML || outerHtml(e);
+			});
+	}
+
+	function tiUpdate() {
+		var coll = this.nodes;
+		jQuery.tmpl( null, null, null, this).insertBefore( coll[0] );
+		jQuery( coll ).remove();
+	}
+})( jQuery );
diff --git a/webfiles/lib/steelseries/scripts/RGraph.common.core.min.js b/webfiles/lib/steelseries/scripts/RGraph.common.core.min.js
new file mode 100644
index 0000000..a269991
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/RGraph.common.core.min.js
@@ -0,0 +1 @@
+function pd(n){RGraph.pr(n)}function p(n){RGraph.pr(n)}function a(n){alert(n)}function cl(n){return console.log(n)}typeof RGraph=="undefined"&&(RGraph={isRGraph:!0,type:"common"}),RGraph.Registry={},RGraph.Registry.store=[],RGraph.Registry.store["chart.event.handlers"]=[],RGraph.Registry.store.__rgraph_event_listeners__=[],RGraph.background={},RGraph.objects=[],RGraph.Resizing={},RGraph.events=[],RGraph.cursor=[],RGraph.DOM2Events={},RGraph.ObjectRegistry={},RGraph.ObjectRegistry.objects={},RGraph.ObjectRegistry.objects.byUID=[],RGraph.ObjectRegistry.objects.byCanvasID=[],HALFPI=Math.PI/2,PI=Math.PI,TWOPI=PI*2,ISOPERA=navigator.userAgent.indexOf("Opera")!=-1,RGraph.getScale=function(n,t){var f,e,i,o,u,r;if(n==0)return["0.2","0.4","0.6","0.8","1.0"];if(f=n,n<=1){if(n>.5)return[.2,.4,.6,.8,Number(1).toFixed(1)];if(n>=.1)return t.Get("chart.scale.round")?[.2,.4,.6,.8,1]:[.1,.2,.3,.4,.5];for(e=n,i=0;e<1.01;)i+=1,e*=10;return o=["2e-"+i,"4e-"+i,"6e-"+i,"8e-"+i,"10e-"+i],n<="5e-"+i&&(o=["1e-"+i,"2e-"+i,"3e-"+i,"4e-"+i,"5e-"+i]),o}for(String(n).indexOf(".")>0&&(n=String(n).replace(/\.\d+$/,"")),u=Math.pow(10,Number(String(Number(n)).length-1)),r=u;r<n;)r+=u/2;return Number(f)>Number(r)&&(r+=u/2),n<10&&(r=Number(f)<=5?5:10),t&&typeof t.Get("chart.scale.round")=="boolean"&&t.Get("chart.scale.round")&&(r=10*u),[r*.2,r*.4,r*.6,r*.8,r]},RGraph.array_max=function(n){var i=null,t,r;if(typeof n=="number")return n;for(t=0;t<n.length;++t)typeof n[t]=="number"&&(r=arguments[1]?Math.abs(n[t]):n[t],i=typeof i=="number"?Math.max(i,r):r);return i},RGraph.array_pad=function(n,t){var r,i;if(n.length<t)for(r=arguments[2]?arguments[2]:null,i=n.length;i<t;++i)n[i]=r;return n},RGraph.array_sum=function(n){if(typeof n=="number")return n;for(var r=n.length,t=0,i=0;t<r;i+=n[t++]);return i},RGraph.array_linearize=function(){for(var r=[],t,u,i,n=0;n<arguments.length;++n)if(typeof arguments[n]=="object"&&arguments[n])for(t=0;t<arguments[n].length;++t)for(u=RGraph.array_linearize(arguments[n][t]),i=0;i<u.length;++i)r.push(u[i]);else r.push(arguments[n]);return r},RGraph.Text=function(n,t,i,r,u,f){var e=arguments,v,c,l,a,o,s;if((typeof f=="string"||typeof f=="number")&&f!="undefined"){if(typeof f=="string"&&f.match(/\r\n/)){for(v=RGraph.MeasureText("M",e[11],t,i),c=f.split("\r\n"),e[6]&&e[6]=="center"&&(u=u-v[1]*((c.length-1)/2)),l=1;l<c.length;++l)RGraph.Text(n,t,i,e[9]==-90?r+i*1.5:r,u+v[1]*l,c[l],e[6]?e[6]:null,e[7],e[8],e[9],e[10],e[11],e[12]);f=c[0]}document.all&&ISOLD&&(u+=2),n.font=(e[11]?"Bold ":"")+i+"pt "+t;var l,d=r,g=u,y=n.fillStyle,k=n.lineWidth;if(typeof e[6]=="undefined"&&(e[6]="bottom"),typeof e[7]=="undefined"&&(e[7]="left"),typeof e[8]=="undefined"&&(e[8]=null),typeof e[9]=="undefined"&&(e[9]=0),navigator.userAgent.indexOf("Opera")!=-1&&(n.canvas.__rgraph_valign__=e[6],n.canvas.__rgraph_halign__=e[7]),n.save(),n.canvas.__rgraph_originalx__=r,n.canvas.__rgraph_originaly__=u,n.translate(r,u),r=0,u=0,e[9]&&n.rotate(e[9]/(180/PI)),e[6]&&(a=e[6],a=="center"?n.textBaseline="middle":a=="top"&&(n.textBaseline="top")),e[7]&&(o=e[7],s=n.measureText(f).width,o&&(o=="center"?n.textAlign="center":o=="right"&&(n.textAlign="right"))),n.fillStyle=y,n.save(),n.fillText(f,0,0),n.lineWidth=1,e[8]){var s=n.measureText(f).width,p=o=="center"?s/2:o=="right"?s:0,h=i*1.4,w=a=="center"?h/2:a=="top"?h:0,b=ISOLD?2:0;n.strokeRect(-3-p,-3-h-b+w,s+6,h+6),e[10]&&(n.fillStyle=e[10],n.fillRect(-3-p,-3-h-b+w,s+6,h+6)),n.fillStyle=y,n.fillText(f,0,0)}n.restore(),n.lineWidth=k,n.restore()}},RGraph.Clear=function(n){var t,i,r;n&&(RGraph.FireCustomEvent(n.__object__,"onbeforeclear"),t=n.getContext("2d"),i=arguments[1],ISIE8&&!i&&(i="white"),!i||i&&i=="rgba(0,0,0,0)"||i=="transparent"?(t.clearRect(0,0,n.width,n.height),t.globalCompositeOperation="source-over"):(t.fillStyle=i,t=n.getContext("2d"),t.beginPath(),ISIE8?t.fillRect(0,0,n.width,n.height):t.fillRect(-10,-10,n.width+20,n.height+20),t.fill()),RGraph.ClearAnnotations,RGraph.Registry.Get("chart.background.image."+n.id)&&(r=RGraph.Registry.Get("chart.background.image."+n.id),r.style.position="absolute",r.style.left="-10000px",r.style.top="-10000px"),RGraph.Registry.Get("chart.tooltip")&&RGraph.HideTooltip(),n.style.cursor="default",RGraph.FireCustomEvent(n.__object__,"onclear"))},RGraph.DrawTitle=function(n,t,i){var d=n.canvas,r=n.context,a=n.Get("chart.gutter.left"),g=n.Get("chart.gutter.right"),i=n.Get("chart.gutter.top"),o=n.Get("chart.gutter.bottom"),s=arguments[4]?arguments[4]:12,nt=n.Get("chart.title.bold"),h=arguments[3]?arguments[3]:(n.canvas.width-a-g)/2+a,e=n.Get("chart.key.position"),u=n.Get("chart.title.vpos"),v=n.Get("chart.title.hpos"),y=n.Get("chart.title.background"),p=n.Get("chart.title.x"),w=n.Get("chart.title.y"),b="center",f="center",k,c,l;n.type=="bar"&&n.Get("chart.variant")=="3d"&&(e="gutter"),r.beginPath(),r.fillStyle=n.Get("chart.text.color")?n.Get("chart.text.color"):"black",f=e&&e!="gutter"?"center":e?"bottom":"center",typeof n.Get("chart.title.vpos")=="number"?(u=n.Get("chart.title.vpos")*i,n.Get("chart.xaxispos")=="top"&&(u=n.Get("chart.title.vpos")*o+i+(n.canvas.height-i-o))):(u=i-s-5,n.Get("chart.xaxispos")=="top"&&(u=n.canvas.height-o+s+5)),typeof v=="number"&&(h=v*d.width),typeof p=="number"&&(h=p),typeof w=="number"&&(u=w),typeof n.properties["chart.title.halign"]=="string"&&(b=n.properties["chart.title.halign"]),typeof n.properties["chart.title.valign"]=="string"&&(f=n.properties["chart.title.valign"]),typeof(n.Get("chart.title.color")!=null)&&(k=r.fillStyle,c=n.Get("chart.title.color"),r.fillStyle=c?c:"black"),l=n.Get("chart.text.font"),typeof n.Get("chart.title.font")=="string"&&(l=n.Get("chart.title.font")),RGraph.Text(r,l,s,h,u,t,f,b,y!=null,null,y,nt),r.fillStyle=k},RGraph.getMouseXY=function(n){var t=n.target,i=t,f=0,e=0,r,u,o=(parseInt(i.style.borderLeftWidth)||0)+(parseInt(i.style.paddingLeft)||0),s=(parseInt(i.style.borderTopWidth)||0)+(parseInt(i.style.paddingTop)||0);if(typeof n.offsetX=="number"&&typeof n.offsetY=="number")r=n.offsetX-o,u=n.offsetY-s;else{if(typeof t.offsetParent!="undefined")do f+=t.offsetLeft,e+=t.offsetTop;while(t=t.offsetParent);r=n.pageX-f-o,u=n.pageY-e-s}return[r,u]},RGraph.getCanvasXY=function(n){var i=0,r=0,t=n;do i+=t.offsetLeft,r+=t.offsetTop,t=t.offsetParent;while(t&&t.tagName.toLowerCase()!="body");var u=n.style.paddingLeft?parseInt(n.style.paddingLeft):0,f=n.style.paddingTop?parseInt(n.style.paddingTop):0,e=n.style.borderLeftWidth?parseInt(n.style.borderLeftWidth):0,o=n.style.borderTopWidth?parseInt(n.style.borderTopWidth):0;return[i+u+e,r+f+o]},RGraph.Register=function(n){n.Get("chart.noregister")||(RGraph.ObjectRegistry.Add(n),n.Set("chart.noregister",!0))},RGraph.Redraw=function(){for(var i=RGraph.ObjectRegistry.objects.byCanvasID,t=document.getElementsByTagName("canvas"),r,n=0;n<t.length;++n)t[n].__object__&&t[n].__object__.isRGraph&&(t[n].noclear||RGraph.Clear(t[n],arguments[0]?arguments[0]:null));for(n=0;n<i.length;++n)i[n]&&(r=i[n][0],i[n][1].Draw())},RGraph.RedrawCanvas=function(n){var i=RGraph.ObjectRegistry.getObjectsByCanvasID(n.id),t;for(arguments[1]&&(typeof arguments[1]!="boolean"||!arguments[1]!=!1)||RGraph.Clear(n),t=0;t<i.length;++t)i[t]&&i[t]&&i[t].isRGraph&&i[t].Draw()},RGraph.background.Draw=function(n){var nt=n.canvas,t=n.context,e=0,u=n.Get("chart.gutter.left"),o=n.Get("chart.gutter.right"),f=n.Get("chart.gutter.top"),r=n.Get("chart.gutter.bottom"),v=n.Get("chart.variant"),p,a,s,i,b,k,d;if(t.fillStyle=n.Get("chart.text.color"),v=="3d"&&(t.save(),t.translate(10,-5)),typeof n.Get("chart.title.xaxis")=="string"&&n.Get("chart.title.xaxis").length){var h=n.Get("chart.text.size")+2,c=n.Get("chart.text.font"),l=n.Get("chart.title.xaxis.bold");typeof n.Get("chart.title.xaxis.size")=="number"&&(h=n.Get("chart.title.xaxis.size")),typeof n.Get("chart.title.xaxis.font")=="string"&&(c=n.Get("chart.title.xaxis.font")),p=(n.canvas.width-n.gutterLeft-n.gutterRight)/2+n.gutterLeft,a=n.canvas.height-n.Get("chart.gutter.bottom")+25,typeof n.Get("chart.title.xaxis.pos")=="number"&&(a=n.canvas.height-r*n.Get("chart.title.xaxis.pos")),t.beginPath(),RGraph.Text(t,c,h,p,a,n.Get("chart.title.xaxis"),"center","center",!1,!1,!1,l),t.fill()}if(typeof n.Get("chart.title.yaxis")=="string"&&n.Get("chart.title.yaxis").length){var h=n.Get("chart.text.size")+2,c=n.Get("chart.text.font"),w=270,l=n.Get("chart.title.yaxis.bold"),g=n.Get("chart.title.yaxis.color");s=typeof n.Get("chart.title.yaxis.pos")=="number"?n.Get("chart.title.yaxis.pos")*n.Get("chart.gutter.left"):(n.Get("chart.gutter.left")-25)/n.Get("chart.gutter.left")*n.Get("chart.gutter.left"),typeof n.Get("chart.title.yaxis.size")=="number"&&(h=n.Get("chart.title.yaxis.size")),typeof n.Get("chart.title.yaxis.font")=="string"&&(c=n.Get("chart.title.yaxis.font")),n.Get("chart.title.yaxis.align")=="right"||n.Get("chart.title.yaxis.position")=="right"?(w=90,s=n.Get("chart.title.yaxis.pos")?n.canvas.width-n.Get("chart.gutter.right")+n.Get("chart.title.yaxis.pos")*n.Get("chart.gutter.right"):n.canvas.width-n.Get("chart.gutter.right")+n.Get("chart.text.size")+5):s=s,t.beginPath(),t.fillStyle=g,RGraph.Text(t,c,h,s,(n.canvas.height-n.gutterTop-n.gutterBottom)/2+n.gutterTop,n.Get("chart.title.yaxis"),"center","center",!1,w,!1,l),t.fill()}for(n.context.beginPath(),t.fillStyle=n.Get("chart.background.barcolor1"),e=n.canvas.height-r,i=f;i<e;i+=80)n.context.fillRect(u,i,n.canvas.width-u-o,Math.min(40,n.canvas.height-r-i));for(t.fillStyle=n.Get("chart.background.barcolor2"),e=RGraph.GetHeight(n)-r,i=40+f;i<e;i+=80)n.context.fillRect(u,i,n.canvas.width-u-o,i+40>n.canvas.height-r?n.canvas.height-(r+i):40);if(t.stroke(),n.Get("chart.background.grid")){if(n.Get("chart.background.grid.autofit")&&(n.Get("chart.background.grid.autofit.align")&&(n.Set("chart.background.grid.autofit.numhlines",n.Get("chart.ylabels.count")),n.type=="line"?n.Get("chart.labels")&&n.Get("chart.labels").length?n.Set("chart.background.grid.autofit.numvlines",n.Get("chart.labels").length-1):n.Set("chart.background.grid.autofit.numvlines",n.data[0].length-1):n.type=="bar"&&n.Get("chart.labels")&&n.Get("chart.labels").length&&n.Set("chart.background.grid.autofit.numvlines",n.Get("chart.labels").length)),b=(n.canvas.width-u-o)/n.properties["chart.background.grid.autofit.numvlines"],k=(n.canvas.height-f-r)/n.properties["chart.background.grid.autofit.numhlines"],n.Set("chart.background.grid.vsize",b),n.Set("chart.background.grid.hsize",k)),t.beginPath(),t.lineWidth=n.Get("chart.background.grid.width")?n.Get("chart.background.grid.width"):1,t.strokeStyle=n.Get("chart.background.grid.color"),n.Get("chart.background.grid.hlines"))for(e=RGraph.GetHeight(n)-r,y=f;y<e;y+=n.Get("chart.background.grid.hsize"))t.moveTo(u,Math.round(y)),t.lineTo(n.canvas.width-o,Math.round(y));if(n.Get("chart.background.grid.vlines"))for(d=n.canvas.width-o,x=u;x<=d;x+=n.Get("chart.background.grid.vsize"))t.moveTo(Math.round(x),f),t.lineTo(Math.round(x),n.canvas.height-r);n.Get("chart.background.grid.border")&&(t.strokeStyle=n.Get("chart.background.grid.color"),t.strokeRect(Math.round(u),Math.round(f),n.canvas.width-u-o,n.canvas.height-f-r))}t.stroke(),v=="3d"&&t.restore(),typeof n.Get("chart.title")=="string"&&(n.type=="gantt"&&(f-=10),RGraph.DrawTitle(n,n.Get("chart.title"),f,null,n.Get("chart.title.size")?n.Get("chart.title.size"):n.Get("chart.text.size")+2)),t.stroke()},RGraph.GetDays=function(n){var r=n.getFullYear(),t=n.getDate(),i=n.getMonth();return i==0?t:(i>=1&&(t+=31),i>=2&&(t+=28),r>=2008&&r%4==0&&(t+=1),i>=3&&(t+=31),i>=4&&(t+=30),i>=5&&(t+=31),i>=6&&(t+=30),i>=7&&(t+=31),i>=8&&(t+=31),i>=9&&(t+=30),i>=10&&(t+=31),i>=11&&(t+=30),t)},RGraph.array_clone=function(n){var i,t;if(n==null||typeof n!="object")return n;for(i=[],t=0;t<n.length;++t)i[t]=typeof n[t]=="number"?function(n){return Number(n)}(n[t]):typeof n[t]=="string"?function(n){return String(n)}(n[t]):typeof n[t]=="function"?n[t]:RGraph.array_clone(n[t]);return i},RGraph.number_format=function(n,t){var u=arguments[2]?String(arguments[2]):"",s=arguments[3]?String(arguments[3]):"",i="",f="",a=n.Get("chart.scale.point")?n.Get("chart.scale.point"):".",v=n.Get("chart.scale.thousand")?n.Get("chart.scale.thousand"):",",r,e,h,c,l,o;if(RegExp.$1="",typeof n.Get("chart.scale.formatter")=="function")return n.Get("chart.scale.formatter")(n,t);if(String(t).indexOf("e")>0)return String(u+String(t)+s);for(t=String(t),t.indexOf(".")>0&&(h=t,t=t.replace(/\.(.*)/,""),f=h.replace(/(.*)\.(.*)/,"$2")),c=v,r=t.length-1,e=0;r>=0;e++,r--)l=t.charAt(r),e%3==0&&e!=0&&(i+=c),i+=l;for(o=i,i="",r=o.length-1;r>=0;r--)i+=o.charAt(r);return i.indexOf("-"+n.Get("chart.scale.thousand"))==0&&(i="-"+i.substr(("-"+n.Get("chart.scale.thousand")).length)),f.length&&(i=i+a+f,f="",RegExp.$1=""),i.charAt(0)=="-"&&(i=i.replace(/-/,""),u="-"+u),u+i+s},RGraph.DrawBars=function(n){var t=n.Get("chart.background.hbars"),f,e;for(n.context.beginPath(),i=0;i<t.length;++i){t[i][1]==null?t[i][1]=n.max:t[i][0]+t[i][1]>n.max&&(t[i][1]=n.max-t[i][0]),Math.abs(t[i][1])>n.max&&(t[i][1]=-1*n.max),Math.abs(t[i][0])>n.max&&(t[i][0]=n.max),t[i][0]+t[i][1]<-1*n.max&&(t[i][1]=-1*(n.max+t[i][0])),n.Get("chart.xaxispos")=="bottom"&&(t[i][0]<0||t[i][1]+t[i][1]<0)&&alert("["+n.type.toUpperCase()+" (ID: "+n.id+") BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center"),f=n.grapharea-(t[i][0]-n.min)/(n.max-n.min)*n.grapharea,e=Math.min(t[i][1],n.max-t[i][0])/(n.max-n.min)*n.grapharea,n.Get("chart.xaxispos")=="center"&&(f/=2,e/=2),f+=n.Get("chart.gutter.top");var o=n.Get("chart.gutter.left"),r=f-e,s=n.canvas.width-n.Get("chart.gutter.left")-n.Get("chart.gutter.right"),u=e;navigator.userAgent.indexOf("Opera")!=-1&&n.Get("chart.xaxispos")=="center"&&u<0&&(u*=-1,r=r-u),n.Get("chart.xaxispos")=="top"&&(r=n.canvas.height-r,u*=-1),n.context.fillStyle=t[i][2],n.context.fillRect(o,r,s,u)}n.context.fill()},RGraph.DrawInGraphLabels=function(n){var a=n.canvas,i=n.context,c=n.Get("chart.labels.ingraph"),r=[],l,t,h,o,s;if(c){for(t=0;t<c.length;++t)if(typeof c[t]=="number")for(l=0;l<c[t];++l)r.push(null);else typeof c[t]=="string"||typeof c[t]=="object"?r.push(c[t]):r.push("");if(RGraph.NoShadow(n),r&&r.length>0)for(t=0;t<r.length;++t)if(r[t]&&(h=n.coords[t],h&&h.length>0)){var u=n.type=="bar"?h[0]+h[2]/2:h[0],f=n.type=="bar"?h[1]+h[3]/2:h[1],e=typeof r[t][4]=="number"?r[t][4]:25;i.beginPath(),i.fillStyle="black",i.strokeStyle="black",n.type=="bar"?(n.Get("chart.xaxispos")=="top"&&(e*=-1),n.Get("chart.variant")=="dot"?(i.moveTo(Math.round(u),n.coords[t][1]-5),i.lineTo(Math.round(u),n.coords[t][1]-5-e),o=Math.round(u),s=n.coords[t][1]-5-e):n.Get("chart.variant")=="arrow"?(i.moveTo(Math.round(u),n.coords[t][1]-5),i.lineTo(Math.round(u),n.coords[t][1]-5-e),o=Math.round(u),s=n.coords[t][1]-5-e):(i.arc(Math.round(u),f,2.5,0,6.28,0),i.moveTo(Math.round(u),f),i.lineTo(Math.round(u),f-e),o=Math.round(u),s=f-e),i.stroke(),i.fill()):n.type=="line"&&(typeof r[t]=="object"&&typeof r[t][3]=="number"&&r[t][3]==-1?(i.moveTo(Math.round(u),f+5),i.lineTo(Math.round(u),f+5+e),i.stroke(),i.beginPath(),i.moveTo(Math.round(u),f+5),i.lineTo(Math.round(u)-3,f+10),i.lineTo(Math.round(u)+3,f+10),i.closePath(),o=u,s=f+5+e):(o=u,s=f-5-e,i.moveTo(Math.round(u),f-5),i.lineTo(Math.round(u),f-5-e),i.stroke(),i.beginPath(),i.moveTo(Math.round(u),f-5),i.lineTo(Math.round(u)-3,f-10),i.lineTo(Math.round(u)+3,f-10),i.closePath()),i.fill()),i.beginPath(),i.fillStyle=typeof r[t]=="object"&&typeof r[t][1]=="string"?r[t][1]:"black",RGraph.Text(i,n.Get("chart.text.font"),n.Get("chart.text.size"),o,s,typeof r[t]=="object"&&typeof r[t][0]=="string"?r[t][0]:r[t],"bottom","center",!0,null,typeof r[t]=="object"&&typeof r[t][2]=="string"?r[t][2]:"white"),i.fill()}}},RGraph.FixEventObject=function(n){var n,t;return ISOLD&&(n=event,n.pageX=event.clientX+document.body.scrollLeft,n.pageY=event.clientY+document.body.scrollTop,n.target=event.srcElement,!document.body.scrollTop&&document.documentElement.scrollTop&&(n.pageX+=parseInt(document.documentElement.scrollLeft),n.pageY+=parseInt(document.documentElement.scrollTop))),typeof n.offsetX=="undefined"&&typeof n.offsetY=="undefined"&&(t=RGraph.getMouseXY(n),n.offsetX=t[0],n.offsetY=t[1]),n.stopPropagation||(n.stopPropagation=function(){window.event.cancelBubble=!0}),n},RGraph.HideCrosshairCoords=function(){var n=RGraph.Registry.Get("chart.coordinates.coords.div");n&&n.style.opacity==1&&n.__object__.Get("chart.crosshairs.coords.fadeout")&&(setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.9},50),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.8},100),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.7},150),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.6},200),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.5},250),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.4},300),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.3},350),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.2},400),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=.1},450),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.opacity=0},500),setTimeout(function(){RGraph.Registry.Get("chart.coordinates.coords.div").style.display="none"},550))},RGraph.Draw3DAxes=function(n){var r=n.Get("chart.gutter.left"),f=n.Get("chart.gutter.right"),e=n.Get("chart.gutter.top"),u=n.Get("chart.gutter.bottom"),t=n.context,i=n.canvas;t.strokeStyle="#aaa",t.fillStyle="#ddd",t.beginPath(),t.moveTo(r,e),t.lineTo(r+10,e-5),t.lineTo(r+10,i.height-u-5),t.lineTo(r,i.height-u),t.closePath(),t.stroke(),t.fill(),t.beginPath(),t.moveTo(r,i.height-u),t.lineTo(r+10,i.height-u-5),t.lineTo(i.width-f+10,i.height-u-5),t.lineTo(i.width-f,i.height-u),t.closePath(),t.stroke(),t.fill()},RGraph.OldBrowserCompat=function(n){n&&(n.measureText||(n.measureText=function(n){var t=document.createElement("DIV"),i;return t.innerHTML=n,t.style.position="absolute",t.style.top="-100px",t.style.left=0,document.body.appendChild(t),i={width:t.offsetWidth},t.style.display="none",i}),n.fillText||(n.fillText=function(){return!1}),n.canvas.addEventListener||(window.addEventListener=function(n,t){return this.attachEvent("on"+n,t)},n.canvas.addEventListener=function(n,t){return this.attachEvent("on"+n,t)}))},RGraph.strokedCurvyRect=function(n,t,i,r,u){var f=arguments[5]?arguments[5]:3,e=arguments[6]||arguments[6]==null?!0:!1,o=arguments[7]||arguments[7]==null?!0:!1,s=arguments[8]||arguments[8]==null?!0:!1,h=arguments[9]||arguments[9]==null?!0:!1;n.beginPath(),n.moveTo(t+(e?f:0),i),n.lineTo(t+r-(o?f:0),i),o&&n.arc(t+r-f,i+f,f,PI+HALFPI,TWOPI,!1),n.lineTo(t+r,i+u-(s?f:0)),s&&n.arc(t+r-f,i-f+u,f,TWOPI,HALFPI,!1),n.lineTo(t+(h?f:0),i+u),h&&n.arc(t+f,i-f+u,f,HALFPI,PI,!1),n.lineTo(t,i+(e?f:0)),e&&n.arc(t+f,i+f,f,PI,PI+HALFPI,!1),n.stroke()},RGraph.filledCurvyRect=function(n,t,i,r,u){var f=arguments[5]?arguments[5]:3,e=arguments[6]||arguments[6]==null?!0:!1,o=arguments[7]||arguments[7]==null?!0:!1,s=arguments[8]||arguments[8]==null?!0:!1,h=arguments[9]||arguments[9]==null?!0:!1;n.beginPath(),e?(n.moveTo(t+f,i+f),n.arc(t+f,i+f,f,PI,PI+HALFPI,!1)):n.fillRect(t,i,f,f),o?(n.moveTo(t+r-f,i+f),n.arc(t+r-f,i+f,f,PI+HALFPI,0,!1)):(n.moveTo(t+r-f,i),n.fillRect(t+r-f,i,f,f)),s?(n.moveTo(t+r-f,i+u-f),n.arc(t+r-f,i-f+u,f,0,HALFPI,!1)):(n.moveTo(t+r-f,i+u-f),n.fillRect(t+r-f,i+u-f,f,f)),h?(n.moveTo(t+f,i+u-f),n.arc(t+f,i-f+u,f,HALFPI,PI,!1)):(n.moveTo(t,i+u-f),n.fillRect(t,i+u-f,f,f)),n.fillRect(t+f,i,r-f-f,u),n.fillRect(t,i+f,f+1,u-f-f),n.fillRect(t+r-f-1,i+f,f+1,u-f-f),n.fill()},RGraph.HideZoomedCanvas=function(){var t=15,i=10,n,r;if(typeof __zoomedimage__=="object")obj=__zoomedimage__.obj;else return;if(obj.Get("chart.zoom.fade.out")){for(n=i,r=1;n>=0;--n,++r)typeof __zoomedimage__=="object"&&setTimeout("__zoomedimage__.style.opacity = "+String(n/10),r*t);typeof __zoomedbackground__=="object"&&setTimeout("__zoomedbackground__.style.opacity = "+String(n/i),r*t)}typeof __zoomedimage__=="object"&&setTimeout("__zoomedimage__.style.display = 'none'",obj.Get("chart.zoom.fade.out")?i*t+10:0),typeof __zoomedbackground__=="object"&&setTimeout("__zoomedbackground__.style.display = 'none'",obj.Get("chart.zoom.fade.out")?i*t+10:0)},RGraph.AddCustomEventListener=function(n,t,i){return typeof RGraph.events[n.uid]=="undefined"&&(RGraph.events[n.uid]=[]),RGraph.events[n.uid].push([n,t,i]),RGraph.events[n.uid].length-1},RGraph.FireCustomEvent=function(n,t){var i,r;if(n&&n.isRGraph&&(n[t]&&n[t](n),i=n.uid,typeof i=="string"&&typeof RGraph.events=="object"&&typeof RGraph.events[i]=="object"&&RGraph.events[i].length>0))for(r=0;r<RGraph.events[i].length;++r)RGraph.events[i][r]&&RGraph.events[i][r][1]==t&&RGraph.events[i][r][2](n)},RGraph.getGutterSuggest=function(n,t){for(var u=0,r,f,i=0;i<t.length;++i)u=Math.min(u,t[i]);if(u=Math.abs(u),r=RGraph.number_format(n,RGraph.array_max(RGraph.getScale(Math.max(u,RGraph.array_max(t)),n)),n.Get("chart.units.pre"),n.Get("chart.units.post")),n.type=="hbar")for(r="",f=0,i=0;i<n.Get("chart.labels").length;++i)r=n.Get("chart.labels").length>r.length?n.Get("chart.labels")[i]:r;return n.context.font=n.Get("chart.text.size")+"pt "+n.Get("chart.text.font"),f=n.context.measureText(r).width+5,n.type=="hbar"?f/3:f},RGraph.SetConfig=function(n,t){for(i in t)typeof i=="string"&&n.Set(i,t[i]);return n},RGraph.RemoveAllCustomEventListeners=function(){var n=arguments[0];n&&RGraph.events[n]?RGraph.events[n]=[]:RGraph.events=[]},RGraph.RemoveCustomEventListener=function(n,t){typeof RGraph.events=="object"&&typeof RGraph.events[n.id]=="object"&&typeof RGraph.events[n.id][t]=="object"&&(RGraph.events[n.id][t]=null)},RGraph.DrawBackgroundImage=function(n){var t,i,r;if(typeof n.Get("chart.background.image")=="string"){typeof n.canvas.__rgraph_background_image__=="undefined"?(t=new Image,t.__object__=n,t.__canvas__=n.canvas,t.__context__=n.context,t.src=n.Get("chart.background.image"),n.canvas.__rgraph_background_image__=t):t=n.canvas.__rgraph_background_image__,t.onload=function(){n.__rgraph_background_image_loaded__=!0,RGraph.Clear(n.canvas),RGraph.RedrawCanvas(n.canvas)};var u=n.Get("chart.gutter.left"),o=n.Get("chart.gutter.right"),f=n.Get("chart.gutter.top"),s=n.Get("chart.gutter.bottom"),h=n.Get("chart.background.image.stretch"),e=n.Get("chart.background.image.align");typeof e=="string"?(i=e.indexOf("right")!=-1?n.canvas.width-t.width-o:u,r=e.indexOf("bottom")!=-1?n.canvas.height-t.height-s:f):(i=u,r=f);var i=typeof n.Get("chart.background.image.x")=="number"?n.Get("chart.background.image.x"):i,r=typeof n.Get("chart.background.image.y")=="number"?n.Get("chart.background.image.y"):r,c=h?n.canvas.width-u-o:t.width,l=h?n.canvas.height-f-s:t.height;typeof n.Get("chart.background.image.w")=="number"&&(c=n.Get("chart.background.image.w")),typeof n.Get("chart.background.image.h")=="number"&&(l=n.Get("chart.background.image.h")),n.context.drawImage(t,i,r,c,l)}},RGraph.hasTooltips=function(n){if(typeof n.Get("chart.tooltips")=="object"&&n.Get("chart.tooltips")){for(var t=0;t<n.Get("chart.tooltips").length;++t)if(!RGraph.is_null(n.Get("chart.tooltips")[t]))return!0}else if(typeof n.Get("chart.tooltips")=="function")return!0;return!1},RGraph.CreateUID=function(){return"xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g,function(n){var t=Math.random()*16|0,i=n=="x"?t:t&3|8;return i.toString(16)})},RGraph.ObjectRegistry.Add=function(n){var t=n.uid,i=n.canvas.id;RGraph.ObjectRegistry.objects.byUID.push([t,n]),RGraph.ObjectRegistry.objects.byCanvasID.push([i,n])},RGraph.ObjectRegistry.Remove=function(n){for(var i=n.id,r=n.uid,t=0;t<RGraph.ObjectRegistry.objects.byUID.length;++t)RGraph.ObjectRegistry.objects.byUID[t]&&RGraph.ObjectRegistry.objects.byUID[t][1].uid==r&&(RGraph.ObjectRegistry.objects.byUID[t]=null);for(t=0;t<RGraph.ObjectRegistry.objects.byCanvasID.length;++t)RGraph.ObjectRegistry.objects.byCanvasID[t]&&RGraph.ObjectRegistry.objects.byCanvasID[t][0]==i&&(RGraph.ObjectRegistry.objects.byCanvasID[t]=null)},RGraph.ObjectRegistry.Clear=function(){var i,t,n;if(arguments[0])for(i=typeof arguments[0]=="object"?arguments[0].id:arguments[0],t=RGraph.ObjectRegistry.getObjectsByCanvasID(i),n=0;n<t.length;++n)RGraph.ObjectRegistry.Remove(t[n]);else RGraph.ObjectRegistry.objects={},RGraph.ObjectRegistry.objects.byUID=[],RGraph.ObjectRegistry.objects.byCanvasID=[]},RGraph.ObjectRegistry.getObjectsByCanvasID=function(n){for(var i=RGraph.ObjectRegistry.objects.byCanvasID,r=[],t=0;t<i.length;++t)i[t]&&i[t][0]==n&&r.push(i[t][1]);return r},RGraph.ObjectRegistry.getFirstObjectByXY=RGraph.ObjectRegistry.getObjectByXY=function(n){for(var u=n.target,r=RGraph.ObjectRegistry.getObjectsByCanvasID(u.id),i,t=r.length-1;t>=0;--t)if(i=r[t].getObjectByXY(n),i)return i},RGraph.ObjectRegistry.getObjectsByXY=function(n){for(var f=n.target,r=[],u=RGraph.ObjectRegistry.getObjectsByCanvasID(f.id),i,t=u.length-1;t>=0;--t)i=u[t].getObjectByXY(n),i&&r.push(i);return r},RGraph.ObjectRegistry.getObjectByUID=function(n){for(var i=RGraph.ObjectRegistry.objects.byUID,t=0;t<i.length;++t)if(i[t]&&i[t][1].uid==n)return i[t][1]},RGraph.ObjectRegistry.getObjectsByType=function(n){for(var i=RGraph.ObjectRegistry.objects.byUID,r=[],t=0;t<i.length;++t)i[t]&&i[t][1]&&i[t][1].type&&i[t][1].type&&i[t][1].type==n&&r.push(i[t][1]);return r},RGraph.ObjectRegistry.getFirstObjectByType=function(n){for(var i=RGraph.ObjectRegistry.objects.byUID,t=0;t<i.length;++t)if(i[t]&&i[t][1]&&i[t][1].type==n)return i[t][1];return null},RGraph.getAngleByXY=function(n,t,i,r){var u=Math.atan((r-t)/(i-n));return u=Math.abs(u),i>=n&&r>=t?u+=TWOPI:i>=n&&r<t?u=HALFPI-u+(PI+HALFPI):i<n&&r<t?u+=PI:u=PI-u,u>TWOPI&&(u-=TWOPI),u},RGraph.getHypLength=function(n,t,i,r){return Math.sqrt((i-n)*(i-n)+(r-t)*(r-t))},RGraph.getRadiusEndPoint=function(n,t,i,r){var u=n+Math.cos(i)*r,f=t+Math.sin(i)*r;return[u,f]},RGraph.InstallEventListeners=function(n){RGraph.isOld()||(RGraph.InstallCanvasClickListener?(RGraph.InstallWindowMousedownListener(n),RGraph.InstallWindowMouseupListener(n),RGraph.InstallCanvasMousemoveListener(n),RGraph.InstallCanvasMouseupListener(n),RGraph.InstallCanvasMousedownListener(n),RGraph.InstallCanvasClickListener(n)):(RGraph.hasTooltips(n)||n.Get("chart.adjustable")||n.Get("chart.annotatable")||n.Get("chart.contextmenu")||n.Get("chart.resizable")||n.Get("chart.key.interactive")||n.Get("chart.events.click")||n.Get("chart.events.mousemove"))&&alert("[RGRAPH] You appear to have used dynamic features but not included the file: RGraph.common.dynamic.js"))},RGraph.pr=function(n){var t="",i=arguments[2]?arguments[2]:"",r;switch(typeof n){case"number":i==""&&(t+="Number: "),t+=String(n);break;case"string":i==""&&(t+="String ("+n.length+"):"),t+='"'+String(n)+'"';break;case"object":if(n==null){t+="null";break}t+="Object\n"+i+"(\n";for(r in n)(typeof r=="string"||typeof r=="number")&&(t+=i+" "+r+" => "+RGraph.pr(n[r],!0,i+"    ")+"\n");t=t+i+")";break;case"function":t+=n;break;case"boolean":t+="Boolean: "+(n?"true":"false")}if(arguments[1])return t;alert(t)},RGraph.DashedLine=function(n,t,i,r,u){var h=5;typeof arguments[5]=="number"&&(h=arguments[5]);var f=r-t,e=u-i,o=Math.floor(Math.sqrt(f*f+e*e)/h),c=f/o,l=e/o,s=0;do s%2==0&&s>0?n.lineTo(t,i):n.moveTo(t,i),t+=c,i+=l;while(s++<=o)},RGraph.AJAX=function(n,t){var i;window.XMLHttpRequest?i=new XMLHttpRequest:window.ActiveXObject&&(i=new ActiveXObject("Microsoft.XMLHTTP")),i.onreadystatechange=function(){this.readyState==4&&this.status==200&&(this.__user_callback__=t,this.__user_callback__())},i.open("GET",n,!0),i.send()},RGraph.RotateCanvas=function(n,t,i,r){var u=n.getContext("2d");u.translate(t,i),u.rotate(r),u.translate(0-t,0-i)},RGraph.DrawAxes=RGraph.DrawYAxis=function(n,t){var w,p,h,r,f;for(r in t)typeof r=="string"&&(w=r.replace(/^chart\./,"axis."),t[w]=t[r]);var a=n.gutterTop,at=n.gutterBottom,i=t["axis.context"]?t["axis.context"]:n.context,u=t["axis.x"],f=n.properties["chart.gutter.top"],b=t["axis.min"]?t["axis.min"]:0,tt=t["axis.max"],v=t["axis.color"]?t["axis.color"]:"black",k=t["axis.title"]?t["axis.title"]:"",it=t["axis.title.color"]?t["axis.title.color"]:v,rt=t["axis.text.color"]?t["axis.color"]:v,e=n.canvas.height-n.gutterBottom-n.gutterTop,y=typeof t["axis.numticks"]=="number"?t["axis.numticks"]:10,o=t["axis.numlabels"]?t["axis.numlabels"]:5,d=t["axis.font"]?t["axis.font"]:"Arial",c=t["axis.text.size"]?t["axis.text.size"]:10,s=typeof t["axis.align"]=="string"?t["axis.align"]:"left",g=t["axis.scale.formatter"],ut=t["axis.scale.decimals"],ft=t["axis.scale.invert"],et=t["axis.units.pre"],ot=t["axis.units.post"],st=t["axis.linewidth"]?t["axis.linewidth"]:1,ht=t["axis.noendtick.top"],ct=t["axis.noendtick.bottom"],lt=t["axis.noyaxis"];if(i.lineWidth=st+.001,i.strokeStyle=v,!lt&&(i.beginPath(),i.moveTo(Math.round(u),f),i.lineTo(Math.round(u),f+e),i.stroke(),y)){for(p=e/y,i.beginPath(),r=ht?1:0;r<=y-(ct?1:0);++r)i.moveTo(s=="right"?u+3:u-3,Math.round(f+p*r)),i.lineTo(u,Math.round(f+p*r));i.stroke()}for(i.fillStyle=rt,i.beginPath(),h=0,r=0;r<=o;++r){var nt=(tt-b)*((o-r)/o)+b,l=RGraph.number_format(n,nt.toFixed(ut),et,ot),l=String(typeof g=="function"?g(n,nt):l),h=Math.max(h,i.measureText(l).width);f=ft?a+(e-e/o*r):a+e/o*r,RGraph.Text(i,d,c,u-(s=="right"?-5:5),f,l,"center",s=="right"?"left":"right")}i.stroke(),k&&(i.beginPath(),i.fillStyle=it,RGraph.Text(i,d,c+2,s=="right"?u+c+h+2:u-c-h-2,e/2+a,k,"center","center",null,s=="right"?90:-90),i.stroke())},RGraph.DrawXAxis=function(n,t){var d,i,b,it,o,k;for(i in t)typeof i=="string"&&(d=i.replace(/^chart\./,"axis."),t[d]=t[i]);var r=t["axis.context"]?t["axis.context"]:n.context,l=n.gutterLeft,yt=n.gutterRight,o=n.properties["chart.gutter.left"],u=t["axis.y"],g=t["axis.min"]?t["axis.min"]:0,nt=t["axis.max"]?t["axis.max"]:null,f=t["axis.labels"]?t["axis.labels"]:null,rt=typeof t["axis.labels.position"]=="string"?t["axis.labels.position"]:"section",y=t["axis.color"]?t["axis.color"]:"black",ut=t["axis.title.color"]?t["axis.title.color"]:y,ft=t["axis.text.color"]?t["axis.text.color"]:y,e=n.canvas.width-n.gutterLeft-n.gutterRight,pt=n.canvas.height-n.gutterBottom-n.gutterTop,a=t["axis.text.font"]?t["axis.text.font"]:"Arial",s=t["axis.text.size"]?t["axis.text.size"]:10,v=typeof t["axis.align"]=="string"?t["axis.align"]:"bottom",c=t["axis.numlabels"]?t["axis.numlabels"]:5,tt=t["axis.scale.formatter"],et=Number(t["axis.scale.decimals"]),ot=t["axis.scale.invert"],st=t["axis.units.pre"]?t["axis.units.pre"]:"",ht=t["axis.units.post"]?t["axis.units.post"]:"",p=t["axis.title"]?t["axis.title"]:"",w=typeof t["axis.numticks"]=="number"?t["axis.numticks"]:f&&f.length?f.length:10,h=t["axis.hmargin"]?t["axis.hmargin"]:0,ct=t["axis.linewidth"]?t["axis.linewidth"]:1,lt=t["axis.noendtick.left"],at=t["axis.noendtick.right"],vt=t["axis.noxaxis"];if(r.lineWidth=ct+.001,r.strokeStyle=y,!vt){for(r.beginPath(),r.moveTo(o,Math.round(u)),r.lineTo(o+e,Math.round(u)),r.stroke(),r.beginPath(),i=lt?1:0;i<=w-(at?1:0);++i)r.moveTo(Math.round(o+e/w*i),u),r.lineTo(Math.round(o+e/w*i),u+(v=="bottom"?3:-3));r.stroke()}if(r.fillStyle=ft,f){for(c=f.length,r.beginPath(),i=0;i<f.length;++i)RGraph.Text(r,a,s,rt=="edge"?(e-h-h)/(f.length-1)*i+l+h:(e-h-h)/f.length*i+e/f.length/2+l+h,v=="bottom"?u+s+2:u-s-2,String(f[i]),"center","center");r.fill()}else{for(nt||alert("[DRAWXAXIS] If not specifying axis.labels you must specify axis.max!"),r.beginPath(),i=0;i<=c;++i)b=(nt-g)/c*i+g,it=String(typeof tt=="function"?tt(n,b):RGraph.number_format(n,b.toFixed(et),st,ht)),o=ot?e-e/c*i+l:e/c*i+l,RGraph.Text(r,a,s,o,v=="bottom"?u+s+2:u-s-2,it,"center","center");r.fill()}p&&(k=RGraph.MeasureText(p,!1,a,s+2),r.fillStyle=ut,RGraph.Text(r,a,s+2,e/2+n.gutterLeft,v=="bottom"?u+k[1]+10:u-k[1]-10,p,"center","center"))},RGraph.MeasureText=function(n,t,i,r){var f,u,r;return(typeof __rgraph_measuretext_cache__=="undefined"&&(__rgraph_measuretext_cache__=[]),f=n+":"+t+":"+i+":"+r,typeof __rgraph_measuretext_cache__=="object"&&__rgraph_measuretext_cache__[f])?__rgraph_measuretext_cache__[f]:(__rgraph_measuretext_cache__["text-div"]?__rgraph_measuretext_cache__["text-div"]&&(u=__rgraph_measuretext_cache__["text-div"]):(u=document.createElement("DIV"),u.style.position="absolute",u.style.top="-100px",u.style.left="-100px",document.body.appendChild(u),__rgraph_measuretext_cache__["text-div"]=u),u.innerHTML=n.replace(/\r\n/g,"<br />"),u.style.fontFamily=i,u.style.fontWeight=t?"bold":"normal",u.style.fontSize=r+"pt",r=[u.offsetWidth,u.offsetHeight],__rgraph_measuretext_cache__[f]=r,r)},RGraph.AddEffects||(RGraph.AddEffects=function(){}),RGraph.LinearGradient=function(n,t,i,r,u){for(var e=n.context.createLinearGradient(t,i,r,u),h=arguments.length-5,o,s,f=5;f<arguments.length;++f)o=arguments[f],s=(f-5)/(h-1),e.addColorStop(s,o);return e},RGraph.RadialGradient=function(n,t,i,r,u,f,e){for(var s=n.context.createRadialGradient(t,i,r,u,f,e),l=arguments.length-7,h,c,o=7;o<arguments.length;++o)h=arguments[o],c=(o-7)/(l-1),s.addColorStop(c,h);return s},RGraph.array_shift=function(n){for(var i=[],t=1;t<n.length;++t)i.push(n[t]);return i},RGraph.AddEventListener=function(n,t,i){var r=arguments[3]?arguments[3]:"unknown";RGraph.Registry.Get("chart.event.handlers").push([n,t,i,r])},RGraph.ClearEventListeners=function(n){if(n&&n=="window")window.removeEventListener("mousedown",window.__rgraph_mousedown_event_listener_installed__,!1),window.removeEventListener("mouseup",window.__rgraph_mouseup_event_listener_installed__,!1);else{var t=document.getElementById(n);t.removeEventListener("mouseup",t.__rgraph_mouseup_event_listener_installed__,!1),t.removeEventListener("mousemove",t.__rgraph_mousemove_event_listener_installed__,!1),t.removeEventListener("mousedown",t.__rgraph_mousedown_event_listener_installed__,!1),t.removeEventListener("click",t.__rgraph_click_event_listener_installed__,!1)}},RGraph.HidePalette=function(){var n=RGraph.Registry.Get("palette");typeof n=="object"&&n&&(n.style.visibility="hidden",n.style.display="none",RGraph.Registry.Set("palette",null))},RGraph.random=function(n,t){var i=arguments[2]?arguments[2]:0,r=Math.random();return Number(((t-n)*r+n).toFixed(i))},RGraph.NoShadow=function(n){n.context.shadowColor="rgba(0,0,0,0)",n.context.shadowBlur=0,n.context.shadowOffsetX=0,n.context.shadowOffsetY=0},RGraph.SetShadow=function(n,t,i,r,u){n.context.shadowColor=t,n.context.shadowOffsetX=i,n.context.shadowOffsetY=r,n.context.shadowBlur=u},RGraph.array_reverse=function(n){for(var i=[],t=n.length-1;t>=0;t--)i.push(n[t]);return i},RGraph.Registry.Set=function(n,t){return RGraph.Registry.store[n]=t,t},RGraph.Registry.Get=function(n){return RGraph.Registry.store[n]},RGraph.degrees2Radians=function(n){return n*(PI/180)},RGraph.log=function(){var n=Math.log;return function(t,i){return n(t)/(i?n(i):1)}}(),RGraph.is_array=function(n){return n!=null&&n.constructor.toString().indexOf("Array")!=-1},RGraph.trim=function(n){return RGraph.ltrim(RGraph.rtrim(n))},RGraph.ltrim=function(n){return n.replace(/^(\s|\0)+/,"")},RGraph.rtrim=function(n){return n.replace(/(\s|\0)+$/,"")},RGraph.GetHeight=function(n){return n.canvas.height},RGraph.GetWidth=function(n){return n.canvas.width},RGraph.is_null=function(n){return n==null||typeof n=="object"&&!n?!0:!1},RGraph.Timer=function(n){var t=new Date;console.log(n+": "+t.getSeconds()+"."+t.getMilliseconds())},RGraph.Async=function(n){return setTimeout(n,arguments[1]?arguments[1]:1)},RGraph.isIE=function(){return navigator.userAgent.indexOf("MSIE")>0},ISIE=RGraph.isIE(),RGraph.isIE6=function(){return navigator.userAgent.indexOf("MSIE 6")>0},ISIE6=RGraph.isIE6(),RGraph.isIE7=function(){return navigator.userAgent.indexOf("MSIE 7")>0},ISIE7=RGraph.isIE7(),RGraph.isIE8=function(){return navigator.userAgent.indexOf("MSIE 8")>0},ISIE8=RGraph.isIE8(),RGraph.isIE9=function(){return navigator.userAgent.indexOf("MSIE 9")>0},ISIE9=RGraph.isIE9(),RGraph.isIE10=function(){return navigator.userAgent.indexOf("MSIE 10")>0},ISIE10=RGraph.isIE10(),RGraph.isIE9up=function(){return navigator.userAgent.match(/MSIE (\d+)/),Number(RegExp.$1)>=9},ISIE9UP=RGraph.isIE9up(),RGraph.isIE10up=function(){return navigator.userAgent.match(/MSIE (\d+)/),Number(RegExp.$1)>=10},ISIE10UP=RGraph.isIE10up(),RGraph.isOld=function(){return ISIE6||ISIE7||ISIE8},ISOLD=ISIE6||ISIE7||ISIE8,RGraph.Reset=function(n){n.width=n.width,RGraph.ObjectRegistry.Clear(n),n.__rgraph_aa_translated__=!1}
\ No newline at end of file
diff --git a/webfiles/lib/steelseries/scripts/RGraph.rose.min.js b/webfiles/lib/steelseries/scripts/RGraph.rose.min.js
new file mode 100644
index 0000000..4e21f88
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/RGraph.rose.min.js
@@ -0,0 +1 @@
+typeof RGraph=="undefined"&&(RGraph={}),RGraph.Rose=function(n,t){var r,i;for(this.id=n,this.canvas=document.getElementById(n),this.context=this.canvas.getContext("2d"),this.data=t,this.canvas.__object__=this,this.type="rose",this.isRGraph=!0,this.uid=RGraph.CreateUID(),this.canvas.uid=this.canvas.uid?this.canvas.uid:RGraph.CreateUID(),this.colorsParsed=!1,RGraph.OldBrowserCompat(this.context),this.centerx=0,this.centery=0,this.radius=0,this.max=0,this.angles=[],this.properties={"chart.background.axes":!0,"chart.background.axes.color":"black","chart.background.grid":!0,"chart.background.grid.color":"#ccc","chart.background.grid.size":null,"chart.background.grid.spokes":null,"chart.background.grid.count":5,"chart.centerx":null,"chart.centery":null,"chart.radius":null,"chart.colors":["rgba(255,0,0,0.5)","rgba(255,255,0,0.5)","rgba(0,255,255,0.5)","rgb(0,255,0)","gray","blue","rgb(255,128,255)","green","pink","gray","aqua"],"chart.colors.sequential":!1,"chart.colors.alpha":null,"chart.margin":0,"chart.strokestyle":"#aaa","chart.gutter.left":25,"chart.gutter.right":25,"chart.gutter.top":25,"chart.gutter.bottom":25,"chart.title":"","chart.title.background":null,"chart.title.hpos":null,"chart.title.vpos":null,"chart.title.bold":!0,"chart.title.font":null,"chart.title.x":null,"chart.title.y":null,"chart.title.halign":null,"chart.title.valign":null,"chart.labels":null,"chart.labels.position":"center","chart.labels.axes":"nsew","chart.labels.offset":0,"chart.text.color":"black","chart.text.font":"Arial","chart.text.size":10,"chart.key":null,"chart.key.background":"white","chart.key.position":"graph","chart.key.halign":"right","chart.key.shadow":!1,"chart.key.shadow.color":"#666","chart.key.shadow.blur":3,"chart.key.shadow.offsetx":2,"chart.key.shadow.offsety":2,"chart.key.position.gutter.boxed":!0,"chart.key.position.x":null,"chart.key.position.y":null,"chart.key.color.shape":"square","chart.key.rounded":!0,"chart.key.linewidth":1,"chart.key.colors":null,"chart.contextmenu":null,"chart.tooltips":null,"chart.tooltips.event":"onclick","chart.tooltips.effect":"fade","chart.tooltips.css.class":"RGraph_tooltip","chart.tooltips.highlight":!0,"chart.highlight.stroke":"rgba(0,0,0,0)","chart.highlight.fill":"rgba(255,255,255,0.7)","chart.annotatable":!1,"chart.annotate.color":"black","chart.zoom.factor":1.5,"chart.zoom.fade.in":!0,"chart.zoom.fade.out":!0,"chart.zoom.hdir":"right","chart.zoom.vdir":"down","chart.zoom.frames":25,"chart.zoom.delay":16.666,"chart.zoom.shadow":!0,"chart.zoom.background":!0,"chart.zoom.action":"zoom","chart.resizable":!1,"chart.resize.handle.adjust":[0,0],"chart.resize.handle.background":null,"chart.adjustable":!1,"chart.ymax":null,"chart.ymin":0,"chart.scale.decimals":null,"chart.scale.point":".","chart.scale.thousand":",","chart.variant":"stacked","chart.exploded":0,"chart.events.mousemove":null,"chart.events.click":null,"chart.animation.roundrobin.factor":1,"chart.animation.roundrobin.radius":!0,"chart.animation.grow.multiplier":1},r=RGraph.array_linearize(this.data),i=0;i<r.length;++i)this["$"+i]={};this.canvas.__rgraph_aa_translated__||(this.context.translate(.5,.5),this.canvas.__rgraph_aa_translated__=!0),RGraph.Register(this)},RGraph.Rose.prototype.Set=function(n,t){n.substr(0,6)!="chart."&&(n="chart."+n),this.properties[n.toLowerCase()]=t},RGraph.Rose.prototype.Get=function(n){return n.substr(0,6)!="chart."&&(n="chart."+n),this.properties[n.toLowerCase()]},RGraph.Rose.prototype.Draw=function(){RGraph.FireCustomEvent(this,"onbeforedraw"),this.gutterLeft=this.Get("chart.gutter.left"),this.gutterRight=this.Get("chart.gutter.right"),this.gutterTop=this.Get("chart.gutter.top"),this.gutterBottom=this.Get("chart.gutter.bottom"),this.radius=Math.min(this.canvas.width-this.gutterLeft-this.gutterRight,this.canvas.height-this.gutterTop-this.gutterBottom)/2,this.centerx=(this.canvas.width-this.gutterLeft-this.gutterRight)/2+this.gutterLeft,this.centery=(this.canvas.height-this.gutterTop-this.gutterBottom)/2+this.gutterTop,this.angles=[],this.total=0,this.startRadians=0,this.Get("chart.key")&&this.Get("chart.key").length>0&&this.Get("chart.key").length>=3&&(this.centerx=this.centerx-this.Get("chart.gutter.right")+5),typeof this.Get("chart.centerx")=="number"&&(this.centerx=this.Get("chart.centerx")),typeof this.Get("chart.centery")=="number"&&(this.centery=this.Get("chart.centery")),typeof this.Get("chart.radius")=="number"&&(this.radius=this.Get("chart.radius")),this.colorsParsed||(this.parseColors(),this.colorsParsed=!0),this.DrawBackground(),this.DrawRose(),this.DrawLabels(),this.Get("chart.contextmenu")&&RGraph.ShowContext(this),this.Get("chart.resizable")&&RGraph.AllowResizing(this),this.Get("chart.adjustable")&&RGraph.AllowAdjusting(this),RGraph.InstallEventListeners(this),RGraph.FireCustomEvent(this,"ondraw")},RGraph.Rose.prototype.DrawBackground=function(){var t,n;if(this.context.lineWidth=1,this.properties["chart.background.grid"]){for(typeof this.properties["chart.background.grid.count"]=="number"&&(this.properties["chart.background.grid.size"]=this.radius/this.properties["chart.background.grid.count"]),this.context.beginPath(),this.context.strokeStyle=this.properties["chart.background.grid.color"],n=this.properties["chart.background.grid.size"];n<=this.radius;n+=this.properties["chart.background.grid.size"])this.context.arc(this.centerx,this.centery,n,0,TWOPI,!1);if(this.context.stroke(),this.context.beginPath(),typeof this.properties["chart.background.grid.spokes"]=="number")for(t=360/this.properties["chart.background.grid.spokes"],n=t;n<=360;n+=t)this.context.arc(this.centerx,this.centery,this.radius,n/(180/PI)-HALFPI,(n+.0001)/(180/PI)-HALFPI,0),this.context.lineTo(this.centerx,this.centery);else for(n=15;n<=360;n+=15)this.context.arc(this.centerx,this.centery,this.radius,n/(180/PI)-HALFPI,(n+.0001)/(180/PI)-HALFPI,!1),this.context.lineTo(this.centerx,this.centery);this.context.stroke()}if(this.Get("chart.background.axes")){for(this.context.beginPath(),this.context.strokeStyle=this.Get("chart.background.axes.color"),this.context.moveTo(this.centerx-this.radius,Math.round(this.centery)),this.context.lineTo(this.centerx+this.radius,Math.round(this.centery)),this.context.moveTo(Math.round(this.centerx-this.radius),this.centery-5),this.context.lineTo(Math.round(this.centerx-this.radius),this.centery+5),this.context.moveTo(Math.round(this.centerx+this.radius),this.centery-5),this.context.lineTo(Math.round(this.centerx+this.radius),this.centery+5),n=this.centerx-this.radius;n<this.centerx+this.radius;n+=this.radius/5)this.context.moveTo(Math.round(n),this.centery-3),this.context.lineTo(Math.round(n),this.centery+3.5);for(n=this.centery-this.radius;n<this.centery+this.radius;n+=this.radius/5)this.context.moveTo(this.centerx-3,Math.round(n)),this.context.lineTo(this.centerx+3,Math.round(n));this.context.moveTo(Math.round(this.centerx),this.centery-this.radius),this.context.lineTo(Math.round(this.centerx),this.centery+this.radius),this.context.moveTo(this.centerx-5,Math.round(this.centery-this.radius)),this.context.lineTo(this.centerx+5,Math.round(this.centery-this.radius)),this.context.moveTo(this.centerx-5,Math.round(this.centery+this.radius)),this.context.lineTo(this.centerx+5,Math.round(this.centery+this.radius)),this.context.closePath(),this.context.stroke()}},RGraph.Rose.prototype.DrawRose=function(){var p=0,h=this.data,c=RGraph.degrees2Radians(this.Get("chart.margin")),v,s,w,b,n,o,f,a,y,e;if(this.Get("chart.ymax"))v=this.Get("chart.ymax"),s=this.Get("chart.ymin"),this.scale=[(v-s)*.2+s,(v-s)*.4+s,(v-s)*.6+s,(v-s)*.8+s,(v-s)*1+s],this.max=this.scale[4];else{for(n=0;n<h.length;++n)p=typeof h[n]=="number"?Math.max(p,h[n]):typeof h[n]=="object"&&this.Get("chart.variant")=="non-equi-angular"?Math.max(p,h[n][0]):Math.max(p,RGraph.array_sum(h[n]));this.scale=RGraph.getScale(p,this),this.max=this.scale[4]}if(this.sum=RGraph.array_sum(h),this.context.moveTo(this.centerx,this.centery),this.context.stroke(),this.Get("chart.colors.alpha")&&(this.context.globalAlpha=this.Get("chart.colors.alpha")),typeof this.Get("chart.variant")=="string"&&this.Get("chart.variant")=="non-equi-angular"){for(w=0,n=0;n<h.length;++n)w+=h[n][1];for(n=0;n<this.data.length;++n){o=this.data[n][1]/w*TWOPI,f=(this.data[n][0]-this.Get("chart.ymin"))/(this.max-this.Get("chart.ymin"))*this.radius,f=f*this.properties["chart.animation.grow.multiplier"],this.context.strokeStyle=this.Get("chart.strokestyle"),this.context.fillStyle=this.Get("chart.colors")[0],this.Get("chart.colors.sequential")&&(this.context.fillStyle=this.Get("chart.colors")[n]),this.context.beginPath();var i=this.startRadians*this.Get("chart.animation.roundrobin.factor")-HALFPI+c-o/2,t=(this.startRadians+o)*this.Get("chart.animation.roundrobin.factor")-HALFPI-c-o/2,l=this.getexploded(n,i,t,this.Get("chart.exploded")),r=l[0],u=l[1];this.context.arc(this.centerx+r,this.centery+u,this.Get("chart.animation.roundrobin.radius")?f*this.Get("chart.animation.roundrobin.factor"):f,i,t,0),this.context.lineTo(this.centerx+r,this.centery+u),this.context.closePath(),this.context.stroke(),this.context.fill(),this.angles.push(gg=[i,t,0,f,this.centerx+r,this.centery+u]),this.startRadians+=o}}else for(b=0,n=0;n<this.data.length;++n){if(this.context.strokeStyle=this.Get("chart.strokestyle"),this.context.fillStyle=this.Get("chart.colors")[0],this.Get("chart.colors.sequential")&&(this.context.fillStyle=this.Get("chart.colors")[n]),o=1/this.data.length*TWOPI,typeof this.data[n]=="number"){this.context.beginPath(),f=(this.data[n]-this.Get("chart.ymin"))/(this.max-this.Get("chart.ymin"))*this.radius,f=f*this.properties["chart.animation.grow.multiplier"];var i=this.startRadians*this.Get("chart.animation.roundrobin.factor")-HALFPI+c-o/2,t=this.startRadians*this.Get("chart.animation.roundrobin.factor")+o*this.Get("chart.animation.roundrobin.factor")-HALFPI-c-o/2,l=this.getexploded(n,i,t,this.Get("chart.exploded")),r=l[0],u=l[1];this.context.arc(this.centerx+r,this.centery+u,this.Get("chart.animation.roundrobin.radius")?f*this.Get("chart.animation.roundrobin.factor"):f,i,t,0),this.context.lineTo(this.centerx+r,this.centery+u),this.context.closePath(),this.context.stroke(),this.context.fill(),t==0,this.angles.push([i,t,0,f*this.Get("chart.animation.roundrobin.factor"),this.centerx+r,this.centery+u])}else if(typeof this.data[n]=="object")for(c=this.Get("chart.margin")/(180/PI),a=0;a<this.data[n].length;++a){var i=this.startRadians*this.Get("chart.animation.roundrobin.factor")-HALFPI+c,t=this.startRadians*this.Get("chart.animation.roundrobin.factor")+o*this.Get("chart.animation.roundrobin.factor")-HALFPI-c,l=this.getexploded(n,i,t,this.Get("chart.exploded")),r=l[0],u=l[1];this.context.fillStyle=this.Get("chart.colors")[a],this.Get("chart.colors.sequential")&&(this.context.fillStyle=this.Get("chart.colors")[b++]),a==0?(this.context.beginPath(),y=0,e=(this.data[n][a]-this.Get("chart.ymin"))/(this.max-this.Get("chart.ymin"))*this.radius,e=e*this.properties["chart.animation.grow.multiplier"],this.context.arc(this.centerx+r,this.centery+u,this.Get("chart.animation.roundrobin.radius")?e*this.Get("chart.animation.roundrobin.factor"):e,i,t,0),this.context.lineTo(this.centerx+r,this.centery+u),this.context.closePath(),this.context.stroke(),this.context.fill(),this.angles.push([i,t,0,e*this.Get("chart.animation.roundrobin.factor"),this.centerx+r,this.centery+u])):(this.context.beginPath(),y=e,e=(this.data[n][a]-this.Get("chart.ymin"))/(this.max-this.Get("chart.ymin"))*this.radius+y,e=e*this.properties["chart.animation.grow.multiplier"],this.context.arc(this.centerx+r,this.centery+u,y*this.Get("chart.animation.roundrobin.factor"),i,t,0),this.context.arc(this.centerx+r,this.centery+u,e*this.Get("chart.animation.roundrobin.factor"),t,i,!0),this.context.closePath(),this.context.stroke(),this.context.fill(),this.angles.push([i,t,y*this.Get("chart.animation.roundrobin.factor"),e*this.Get("chart.animation.roundrobin.factor"),this.centerx+r,this.centery+u]))}this.startRadians+=o}this.Get("chart.colors.alpha")&&(this.context.globalAlpha=1),this.Get("chart.title")&&RGraph.DrawTitle(this,this.Get("chart.title"),this.canvas.height/2-this.radius,this.centerx,this.Get("chart.title.size")?this.Get("chart.title.size"):this.Get("chart.text.size")+2)},RGraph.Rose.prototype.DrawLabels=function(){var h,r;this.context.lineWidth=1,h=this.Get("chart.key"),h&&h.length&&RGraph.DrawKey(this,h,this.Get("chart.colors")),this.context.fillStyle=this.properties["chart.text.color"],this.context.strokeStyle="black";var u=this.radius,t=this.Get("chart.text.font"),n=this.Get("chart.text.size"),i=this.context,s=this.Get("chart.labels.axes").toLowerCase(),o=this.Get("chart.scale.decimals"),f=this.Get("chart.units.pre"),e=this.Get("chart.units.post");typeof this.Get("chart.labels")=="object"&&this.Get("chart.labels")&&this.DrawCircularLabels(i,this.Get("chart.labels"),t,n,u+10),typeof this.properties["chart.text.size.scale"]=="number"&&(n=this.properties["chart.text.size.scale"]),r="rgba(255,255,255,0.8)",s.indexOf("n")>-1&&(RGraph.Text(i,t,n,this.centerx,this.centery-u*.2,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.4,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.6,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u*.8,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery-u,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("s")>-1&&(RGraph.Text(i,t,n,this.centerx,this.centery+u*.2,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.4,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.6,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u*.8,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx,this.centery+u,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("e")>-1&&(RGraph.Text(i,t,n,this.centerx+u*.2,this.centery,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.4,this.centery,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.6,this.centery,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u*.8,this.centery,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx+u,this.centery,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.indexOf("w")>-1&&(RGraph.Text(i,t,n,this.centerx-u*.2,this.centery,RGraph.number_format(this,Number(this.scale[0]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.4,this.centery,RGraph.number_format(this,Number(this.scale[1]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.6,this.centery,RGraph.number_format(this,Number(this.scale[2]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u*.8,this.centery,RGraph.number_format(this,Number(this.scale[3]).toFixed(o),f,e),"center","center",!0,!1,r),RGraph.Text(i,t,n,this.centerx-u,this.centery,RGraph.number_format(this,Number(this.scale[4]).toFixed(o),f,e),"center","center",!0,!1,r)),s.length>0&&RGraph.Text(i,t,n,this.centerx,this.centery,typeof this.Get("chart.ymin")=="number"?RGraph.number_format(this,Number(this.Get("chart.ymin")).toFixed(this.Get("chart.scale.decimals")),f,e):"0","center","center",!0,!1,r)},RGraph.Rose.prototype.DrawCircularLabels=function(n,t,i,r,u){for(var s=this.Get("chart.variant"),c=this.Get("chart.labels.position"),u=u+5+this.Get("chart.labels.offset"),e,o,h,f=0;f<this.angles.length;++f)typeof s=="string"&&s=="non-equi-angular"?e=Number(this.angles[f][0])+(this.angles[f][1]-this.angles[f][0])/2:(e=TWOPI/t.length*(f+1)-TWOPI/(t.length*2),e=e-HALFPI+(this.Get("chart.labels.position")=="edge"?TWOPI/t.length/2:0)),o=this.centerx+Math.cos(e)*u,h=this.centery+Math.sin(e)*u,halign=o>this.centerx?"left":o==this.centerx?"center":"right",RGraph.Text(n,i,r,o,h,String(t[f]),"center",halign)},RGraph.Rose.prototype.getShape=RGraph.Rose.prototype.getSegment=function(n){var t,e;RGraph.FixEventObject(n);var a=this.canvas,c=this.context,i=this.angles;for(t=0;t<i.length;++t){var o=i[t][0],s=i[t][1],h=i[t][2],l=i[t][3],u=i[t][4],f=i[t][5],r=RGraph.getMouseXY(n),v=r[0]-u,y=r[1]-f;if(this.context.beginPath(),this.context.arc(u,f,h?h:.01,o,s,!1),this.context.arc(u,f,l,s,o,!0),this.context.closePath(),c.isPointInPath(r[0],r[1]))return i[t][6]=t,RGraph.parseTooltipText&&(e=RGraph.parseTooltipText(this.Get("chart.tooltips"),i[t][6])),i[t].object=this,i[t].x=i[t][4],i[t].y=i[t][5],i[t]["angle.start"]=i[t][0],i[t]["angle.end"]=i[t][1],i[t]["radius.start"]=i[t][2],i[t]["radius.end"]=i[t][3],i[t].index=i[t][6],i[t].tooltip=e?e:null,i[t]}return null},RGraph.Rose.prototype.getexploded=function(n,t,i,r){var u,f;return typeof r=="object"&&typeof r[n]=="number"?(u=Math.cos((i-t)/2+t)*r[n],f=Math.sin((i-t)/2+t)*r[n]):typeof r=="number"?(u=Math.cos((i-t)/2+t)*r,f=Math.sin((i-t)/2+t)*r):(u=0,f=0),[u,f]},RGraph.Rose.prototype.AllowTooltips=function(){RGraph.PreLoadTooltipImages(this),RGraph.InstallWindowMousedownTooltipListener(this),RGraph.InstallCanvasMousemoveTooltipListener(this),RGraph.InstallCanvasMouseupTooltipListener(this)},RGraph.Rose.prototype.Highlight=function(n){this.Get("chart.tooltips.highlight")&&(this.context.beginPath(),this.context.strokeStyle=this.Get("chart.highlight.stroke"),this.context.fillStyle=this.Get("chart.highlight.fill"),this.context.arc(n.x,n.y,n["radius.end"],n["angle.start"],n["angle.end"],!1),n["radius.start"]>0?this.context.arc(n.x,n.y,n["radius.start"],n["angle.end"],n["angle.start"],!0):this.context.lineTo(n.x,n.y),this.context.closePath(),this.context.stroke(),this.context.fill())},RGraph.Rose.prototype.getObjectByXY=function(n){var t=RGraph.getMouseXY(n),i=RGraph.getHypLength(this.centerx,this.centery,t[0],t[1]);if(t[0]>this.centerx-this.radius&&t[0]<this.centerx+this.radius&&t[1]>this.centery-this.radius&&t[1]<this.centery+this.radius&&i<=this.radius)return this},RGraph.Rose.prototype.positionTooltip=function(n,t,i,r,u){var c=n.angles[u][4],l=n.angles[u][5],v=n.angles[u][0],y=n.angles[u][1],e=(n.angles[u][3]-n.angles[u][2])/2+n.angles[u][2],o=(y-v)/2+v,s=RGraph.getCanvasXY(n.canvas),p=n.Get("chart.gutter.left"),w=n.Get("chart.gutter.top"),h=r.offsetWidth,a=r.offsetHeight,f;r.style.overflow="",f=new Image,f.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC",f.style.position="absolute",f.id="__rgraph_tooltip_pointer__",f.style.top=r.offsetHeight-2+"px",r.appendChild(f),s[0]+c+Math.cos(o)*e-h/2<10?(r.style.left=s[0]+c+Math.cos(o)*e-h*.1+"px",r.style.top=s[1]+l+Math.sin(o)*e-a-5+"px",f.style.left=h*.1-8.5+"px"):s[0]+c+Math.cos(o)*e+h/2>document.body.offsetWidth-10?(r.style.left=s[0]+c+Math.cos(o)*e-h*.9+"px",r.style.top=s[1]+l+Math.sin(o)*e-a-5+"px",f.style.left=h*.9-8.5+"px"):(r.style.left=s[0]+c+Math.cos(o)*e-h/2+"px",r.style.top=s[1]+l+Math.sin(o)*e-a-5+"px",f.style.left=h*.5-8.5+"px")},RGraph.Rose.prototype.getRadius=function(n){if(n<0||n>this.max)return null;return n/this.max*this.radius},RGraph.Rose.prototype.parseColors=function(){for(var n=0;n<this.properties["chart.colors"].length;++n)this.properties["chart.colors"][n]=this.parseSingleColorForGradient(this.properties["chart.colors"][n]);if(!RGraph.is_null(this.properties["chart.key.colors"]))for(n=0;n<this.properties["chart.key.colors"].length;++n)this.properties["chart.key.colors"][n]=this.parseSingleColorForGradient(this.properties["chart.key.colors"][n]);this.properties["chart.text.color"]=this.parseSingleColorForGradient(this.properties["chart.text.color"]),this.properties["chart.title.color"]=this.parseSingleColorForGradient(this.properties["chart.title.color"]),this.properties["chart.highlight.fill"]=this.parseSingleColorForGradient(this.properties["chart.highlight.fill"]),this.properties["chart.highlight.stroke"]=this.parseSingleColorForGradient(this.properties["chart.highlight.stroke"])},RGraph.Rose.prototype.parseSingleColorForGradient=function(n){var e=this.canvas,u=this.context,t;if(!n||typeof n!="string")return n;if(n.match(/^gradient\((.*)\)$/i)){var i=RegExp.$1.split(":"),r=u.createRadialGradient(this.centerx,this.centery,0,this.centerx,this.centery,this.radius),f=1/(i.length-1);for(r.addColorStop(0,RGraph.trim(i[0])),t=1;t<i.length;++t)r.addColorStop(t*f,RGraph.trim(i[t]))}return r?r:n}
\ No newline at end of file
diff --git a/webfiles/lib/steelseries/scripts/gauges.js b/webfiles/lib/steelseries/scripts/gauges.js
new file mode 100644
index 0000000..b30afcc
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/gauges.js
@@ -0,0 +1,4390 @@
+/*!
+ * THIS VERSION CUSTOMISED FROM CUMULUS MX DEFAULT WEB SITE
+ * Last Modified: 2021/08/02 15:42:36
+ *
+ * A starter gauges page for Cumulus and Weather Display, based
+ * on the JavaScript SteelSeries gauges by Gerrit Grunwald.
+ *
+ * Created by Mark Crossley, July 2011
+ *  see scriptVer below for latest release
+ *
+ * Released under GNU GENERAL PUBLIC LICENSE, Version 2, June 1991
+ * See the enclosed License file
+ *
+ * File encoding = UTF-8
+ *
+ *
+ */
+
+/* exported gauges */
+
+/*!
+* Tiny Pub/Sub - v0.7.0 - 2013-01-29
+* https://github.com/cowboy/jquery-tiny-pubsub
+* Copyright (c) 2013 "Cowboy" Ben Alman; Licensed MIT
+*/
+(function ($) {
+    'use strict';
+    var o = $({});
+    $.subscribe = function () {o.on.apply(o, arguments);};
+    $.unsubscribe = function () {o.off.apply(o, arguments);};
+    $.publish = function () {o.trigger.apply(o, arguments);};
+}(jQuery));
+
+var gauges;
+gauges = (function () {
+    'use strict';
+    var strings = LANG.EN,         // Set to your default language. Store all the strings in one object
+        config = {
+            // Script configuration parameters you may want to 'tweak'
+            scriptVer          : '2.7.6',
+            weatherProgram     : 0,                      // Set 0=Cumulus, 1=Weather Display, 2=VWS, 3=WeatherCat, 4=Meteobridge, 5=WView, 6=WeeWX, 7=WLCOM
+            imgPathURL         : './images/',            // *** Change this to the relative path for your 'Trend' graph images
+            oldGauges          : 'gauges.htm',           // *** Change this to the relative path for your 'old' gauges page.
+            realtimeInterval   : 15,                     // *** Download data interval, set to your realtime data update interval in seconds
+            longPoll           : false,                  // if enabled, use long polling and PHP generated data !!only enable if you understand how this is implemented!!
+            gaugeMobileScaling : 0.85,                   // scaling factor to apply when displaying the gauges mobile devices, set to 1 to disable (default 0.85)
+            graphUpdateTime    : 15,                     // period of pop-up data graph refresh, in minutes (default 15)
+            stationTimeout     : 3,                      // period of no data change before we declare the station off-line, in minutes (default 3)
+            pageUpdateLimit    : 20,                     // period after which the page stops automatically updating, in minutes (default 20),
+                                                         // - set to 0 (zero) to disable this feature
+            pageUpdatePswd     : 'its-me',               // password to over ride the page updates time-out, do not set to blank even if you do not use a password - http://<URL>&pageUpdate=its-me
+            digitalFont        : false,                  // Font control for the gauges & timer
+            digitalForecast    : false,                  // Font control for the status display, set this to false for languages that use accented characters in the forecasts
+            showPopupData      : true,                   // Pop-up data displayed
+            showPopupGraphs    : false,                  // If pop-up data is displayed, show the graphs?
+            mobileShowGraphs   : false,                  // If false, on a mobile/narrow display, always disable the graphs
+            showWindVariation  : true,                   // Show variation in wind direction over the last 10 minutes on the direction gauge
+            showWindMetar      : false,                  // Show the METAR substring for wind speed/direction over the last 10 minutes on the direction gauge popup
+            showIndoorTempHum  : true,                   // Show the indoor temperature/humidity options
+            showCloudGauge     : true,                   // Display the Cloud Base gauge
+            showUvGauge        : true,                   // Display the UV Index gauge
+            showSolarGauge     : true,                   // Display the Solar gauge
+            showSunshineLed    : true,                   // Show 'sun shining now' LED on solar gauge
+            showRoseGauge      : true,                   // Show the optional Wind Rose gauge
+            showRoseGaugeOdo   : true,                   // Show the optional Wind Rose gauge wind run Odometer
+            showRoseOnDirGauge : true,                   // Show the rose data as sectors on the direction gauge
+            showGaugeShadow    : true,                   // Show a drop shadow outside the gauges
+            roundCloudbaseVal  : true,                   // Round the value shown on the cloud base gauge to make it easier to read
+                                                         // The realtime files should be absolute paths, "/xxx.txt" refers to the public root of your web server
+            realTimeUrlLongPoll: 'realtimegauges-longpoll.php',     // *** ALL Users: If using long polling, change to your location of the PHP long poll realtime file ***
+                                                                    // *** the supplied file is for Cumulus only
+            realTimeUrlCumulus : 'realtimegauges.txt',     // *** Cumulus Users: Change to your location of the realtime file ***
+            realTimeUrlWD      : 'customclientraw.txt',    // *** WD Users: Change to your location of the ccr file ***
+            realTimeUrlVWS     : 'steelseriesVWSjson.php', // *** VWS Users: Change to your location of the JSON script generator ***
+            realTimeUrlWC      : 'realtimegaugesWC.txt',   // *** WeatherCat Users: Change to your location of the JSON script generator ***
+            realTimeUrlMB      : 'MBrealtimegauges.txt',   // *** Meteobridge Users: Change to the location of the JSON file
+            realTimeUrlWView   : 'customclientraw.txt',    // *** WView Users: Change to your location of the customclientraw.txt file ***
+            realTimeUrlWeewx   : 'gauge-data.txt',         // *** WeeWX Users: Change to your location of the gauge data file ***
+            realTimeUrlWLCOM   : 'WLrealtimegauges.php',   // *** WLCOM Users: change to location of WLCOMtags.php file ***
+            useCookies         : true,                   // Persistently store user preferences in a cookie?
+            tipImages          : [],
+            dashboardMode      : false,                  // Used by Cumulus MX dashboard - SET TO FALSE OTHERWISE
+            dewDisplayType     : 'dew'                   // Initial 'scale' to display on the 'dew point' gauge.
+                                                         // 'dew' - Dewpoint
+                                                         // 'app' - Apparent temperature
+                                                         // 'wnd' - Wind Chill
+                                                         // 'feel' - Feels Like
+                                                         // 'hea' - Heat Index
+                                                         // 'hum' - Humidex
+        },
+
+        // Gauge global look'n'feel settings
+        gaugeGlobals = {
+            minMaxArea            : 'rgba(212,132,134,0.3)', // area sector for today's max/min. (red, green, blue, transparency)
+            windAvgArea           : 'rgba(132,212,134,0.3)',
+            windVariationSector   : 'rgba(120,200,120,0.7)', // only used when rose data is shown on direction gauge
+            frameDesign           : steelseries.FrameDesign.TILTED_GRAY,
+            background            : steelseries.BackgroundColor.BEIGE,
+            foreground            : steelseries.ForegroundType.TYPE1,
+            pointer               : steelseries.PointerType.TYPE8,
+            pointerColour         : steelseries.ColorDef.RED,
+            dirAvgPointer         : steelseries.PointerType.TYPE8,
+            dirAvgPointerColour   : steelseries.ColorDef.BLUE,
+            gaugeType             : steelseries.GaugeType.TYPE4,
+            lcdColour             : steelseries.LcdColor.STANDARD,
+            knob                  : steelseries.KnobType.STANDARD_KNOB,
+            knobStyle             : steelseries.KnobStyle.SILVER,
+            labelFormat           : steelseries.LabelNumberFormat.STANDARD,
+            tickLabelOrientation  : steelseries.TickLabelOrientation.HORIZONTAL, // was .NORMAL up to v1.6.4
+            rainUseSectionColours : false,                                       // Only one of these colour options should be true
+            rainUseGradientColours: false,                                       // Set both to false to use the pointer colour
+            tempTrendVisible      : true,
+            pressureTrendVisible  : true,
+            uvLcdDecimals         : 1,
+            // sunshine threshold values
+            sunshineThreshold     : 50,    // the value in W/m² above which we can consider the Sun to be shining, *if* the current value exceeds...
+            sunshineThresholdPct  : 75,    // the percentage of theoretical solar irradiance above which we consider the Sun to be shining
+            // default gauge ranges - before auto-scaling/ranging
+            tempScaleDefMinC      : -20,
+            tempScaleDefMaxC      : 40,
+            tempScaleDefMinF      : 0,
+            tempScaleDefMaxF      : 100,
+            baroScaleDefMinhPa    : 990,
+            baroScaleDefMaxhPa    : 1030,
+            baroScaleDefMinkPa    : 99,
+            baroScaleDefMaxkPa    : 103,
+            baroScaleDefMininHg   : 29.2,
+            baroScaleDefMaxinHg   : 30.4,
+            windScaleDefMaxMph    : 20,
+            windScaleDefMaxKts    : 20,
+            windScaleDefMaxMs     : 10,
+            windScaleDefMaxKmh    : 30,
+            rainScaleDefMaxmm     : 10,
+            rainScaleDefMaxIn     : 0.5,
+            rainRateScaleDefMaxmm : 10,
+            rainRateScaleDefMaxIn : 0.5,
+            uvScaleDefMax         : 10,             // Northern Europe may be lower - max. value recorded in the UK is 8, so use a scale of 10 for UK
+            solarGaugeScaleMax    : 1000,           // Max value to be shown on the solar gauge - theoretical max without atmosphere ~ 1374 W/m²
+                                                    // - but Davis stations can read up to 1800, use 1000 for Northern Europe?
+            cloudScaleDefMaxft    : 3000,
+            cloudScaleDefMaxm     : 1000,
+            shadowColour          : 'rgba(0,0,0,0.3)'  // Colour to use for gauge shadows - default 30% transparent black
+        },
+
+        commonParams = {
+            // Common parameters for all the SteelSeries gauges
+            fullScaleDeflectionTime: 4,             // Bigger numbers (seconds) slow the gauge pointer movements more
+            gaugeType              : gaugeGlobals.gaugeType,
+            minValue               : 0,
+            niceScale              : true,
+            ledVisible             : false,
+            frameDesign            : gaugeGlobals.frameDesign,
+            backgroundColor        : gaugeGlobals.background,
+            foregroundType         : gaugeGlobals.foreground,
+            pointerType            : gaugeGlobals.pointer,
+            pointerColor           : gaugeGlobals.pointerColour,
+            knobType               : gaugeGlobals.knob,
+            knobStyle              : gaugeGlobals.knobStyle,
+            lcdColor               : gaugeGlobals.lcdColour,
+            lcdDecimals            : 1,
+            digitalFont            : config.digitalFont,
+            tickLabelOrientation   : gaugeGlobals.tickLabelOrientation,
+            labelNumberFormat      : gaugeGlobals.labelFormat
+        },
+        firstRun = true,            // Used to set-up units & scales etc
+        userUnitsSet = false,       // Tracks if the display units have been set by a user preference
+        data = {},                  // Stores all the values from realtime.txt
+        tickTockInterval,           // The 1s clock interval timer
+
+                                    // ajaxDelay, used by long polling, the delay between getting a response and queueing the next request, as the default PHP
+                                    // script runtime timout is 30 seconds, we do not want the PHP task to run for more than 20 seconds. So queue the next
+                                    // request half of the realtime interval, or 20 seconds before it is due, which ever is the larger.
+        ajaxDelay = config.longPoll ? Math.max(config.realtimeInterval - 20, 0) : config.realtimeInterval,
+        downloadTimer,              // Stores a reference to the ajax download setTimout() timer
+        timestamp = 0,              // the timestamp of last data update on the server.
+        jqXHR = null,               // handle to the jQuery web request
+        displayUnits = null,        // Stores the display units cookie settings
+        sampleDate,
+        realtimeVer,                // minimum version of the realtime JSON file required
+        programLink = [
+            '<a href="https://cumuluswiki.wxforum.net/a/Software" target="_blank" rel="noopener">Cumulus</a>',
+            '<a href="//www.weather-display.com/" target="_blank" rel="noopener">Weather Display</a>',
+            '<a href="//www.ambientweather.com/virtualstation.html" target="_blank" rel="noopener">Virtual Weather Station</a>',
+            '<a href="//trixology.com/weathercat/" target="_blank" rel="noopener">WeatherCat</a>',
+            '<a href="//www.meteobridge.com/" target="_blank rel="noopener"">Meteobridge</a>',
+            '<a href="//www.wviewweather.com/" target="_blank" rel="noopener">Wview</a>',
+            '<a href="//www.weewx.com/" target="_blank" rel="noopener">weewx</a>',
+            '<a href="//weatherlink.com/" target="_blank" rel="noopener">Weatherlink.com</a>'
+        ],
+
+        ledIndicator, statusScroller, statusTimer,
+
+        gaugeTemp, gaugeDew, gaugeRain, gaugeRRate,
+        gaugeHum, gaugeBaro, gaugeWind, gaugeDir,
+        gaugeUV, gaugeSolar, gaugeCloud, gaugeRose,
+
+        /* _imgBackground,    // Uncomment if using a background image on the gauges */
+
+        // ==================================================================================================================
+        // Nothing below this line needs to be modified for the gauges as supplied
+        // - unless you really know what you are doing
+        // - but remember, if you break it, it's up to you to fix it ;-)
+        // ==================================================================================================================
+
+        //
+        // init() Called when the document is ready, pre-draws the Status Display then calls
+        // the first Ajax fetch of realtimegauges.txt. First draw of the gauges now deferred until
+        // the Ajax data is available as a 'speed up'.
+        //
+        init = function (dashboard) {
+            // Cumulus, Weather Display, VWS, WeatherCat?
+            switch (config.weatherProgram) {
+            case 0:
+                // Cumulus
+                realtimeVer = 12;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlCumulus;
+                // the trend images to be used for the pop-up data, used in conjunction with config.imgPathURL
+                // by default this is configured for the Cumulus 'standard' web site
+                // ** If you specify one image in a sub-array, then you MUST provide images for all the other sub-elements
+                config.tipImgs = [                                  // config.tipImgs for Cumulus users using the 'default' weather site
+                    ['temp.png', 'intemp.png'],                     // Temperature: outdoor, indoor
+                    // Temperature: dewpoint, apparent, windChill, heatIndex, humidex
+                    ['temp.png', 'temp.png', 'temp.png', 'temp.png', 'temp.png'],
+                    'raint.png',                                    // Rainfall
+                    'rain.png',                                     // Rainfall rate
+                    ['hum.png', 'hum.png'],                         // Humidity: outdoor, indoor
+                    'press.png',                                    // Pressure
+                    'wind.png',                                     // Wind speed
+                    'windd.png',                                    // Wind direction
+                    (config.showUvGauge ? 'uv.png' : null),         // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'solar.png' : null),   // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'windd.png' : null),    // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'press.png' : null)    // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                break;
+            case 1:
+                // Weather Display
+                realtimeVer = 14;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlWD;
+                config.tipImgs = [                                      // config.tipImgs for Weather Display users with wxgraph
+                    ['temp+hum_24hr.php', 'indoor_temp_24hr.php'],      // Temperature: outdoor, indoor
+                    // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
+                    ['temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php', 'temp+dew+hum_1hr.php'],
+                    'rain_24hr.php',                                    // Rainfall
+                    'rain_1hr.php',                                     // Rainfall rate
+                    ['humidity_1hr.php', 'humidity_7days.php'],         // Humidity: outdoor, indoor
+                    'baro_24hr.php',                                    // Pressure
+                    'windgust_1hr.php',                                 // Wind speed
+                    'winddir_24hr.php',                                 // Wind direction
+                    (config.showUvGauge ? 'uv_24hr.php' : null),        // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'solar_24hr.php' : null),  // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'winddir_24hr.php' : null), // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'baro_24hr.php' : null)    // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                // WD useer generally use wxgraphs - tweak the CSS to accomadate the different aspect ratio
+                $('.tipimg').css({
+                    width : '360px',
+                    height: '260px'});
+                break;
+            case 2:
+                // WVS
+                realtimeVer = 11;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlVWS;
+                config.showRoseGauge = false; // no wind rose data from VWS
+                config.showCloudGauge = false;
+                config.tipImgs = [                                  // config.tipImgs for VWS users
+                    ['vws742.jpg', 'vws741.jpg'],                   // Temperature: outdoor, indoor
+                    // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
+                    ['vws757.jpg', 'vws762.jpg', 'vws754.jpg', 'vws756.jpg', null],
+                    'vws744.jpg',                                   // Rainfall
+                    'vws859.jpg',                                   // Rainfall rate
+                    ['vws740.jpg', 'vws739.jpg'],                   // Humidity: outdoor, indoor
+                    'vws758.jpg',                                   // Pressure
+                    'vws737.jpg',                                   // Wind speed
+                    'vws736.jpg',                                   // Wind direction
+                    (config.showUvGauge ? 'vws752.jpg' : null),     // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'vws753.jpg' : null),  // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'vws736.jpg' : null),   // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'vws758.jpg' : null)   // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                break;
+            case 3:
+                // WeatherCat
+                realtimeVer = 14;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlWC;
+                config.tipImgs = [                                       // config.tipImgs - WeatherCat users using the 'default' weather site
+                    ['temperature1.jpg', 'tempin1.jpg'],                 // Temperature: outdoor, indoor
+                    // Temperature: dewpoint, apparent, windChill, heatIndex, humidex
+                    ['dewpoint1.jpg', 'temperature1.jpg', 'windchill1.jpg', 'heatindex1.jpg', 'temperature1.jpg'],
+                    'precipitationc1.jpg',                               // Rainfall
+                    'precipitation1.jpg',                                // Rainfall rate
+                    ['rh1.jpg', 'rhin1.jpg'],                            // Humidity: outdoor, indoor
+                    'pressure1.jpg',                                     // Pressure
+                    'windspeed1.jpg',                                    // Wind speed
+                    'winddirection1.jpg',                                // Wind direction
+                    (config.showUvGauge ? 'uv1.jpg' : null),             // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'solarrad1.jpg' : null),    // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'winddirection1.jpg' : null), // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'cloudbase1.jpg' : null)     // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                break;
+            case 4:
+                // Meteobridge
+                realtimeVer = 10;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlMB;
+                config.showPopupGraphs = false;        // config.tipImgs - no Meteobridge images available
+                config.showRoseGauge = false;          // no windrose data from MB
+                config.showCloudGauge = false;
+                config.tipImgs = null;                 // config.tipImgs - no Meteobridge images available
+                config.showWindVariation = false;      // no wind variation data from MB
+                break;
+            case 5:
+                // WView
+                realtimeVer = 11;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlWView;
+                config.showSunshineLed = false;     // WView does not provide the current theoretical solar max required to determine sunshine
+                config.showWindVariation = false;   // no wind variation from WView
+                config.showRoseGauge = false;       // No wind rose array from WView by default - there is a user supplied modification to enable it though.
+                config.showCloudGauge = false;
+                config.tipImgs = [                                      // config.tipImgs for WView users
+                    ['tempdaycomp.png', 'indoor_temp.png'],             // Temperature: outdoor, indoor
+                    // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
+                    ['tempdaycomp.png', 'tempdaycomp.png', 'heatchillcomp.png', 'heatchillcomp.png', 'tempdaycomp.png'],
+                    'rainday.png',                                      // Rainfall
+                    'rainrate.png',                                     // Rainfall rate
+                    ['humidday.png', 'humidday.png'],                   // Humidity: outdoor, indoor
+                    'baromday.png',                                     // Pressure
+                    'wspeeddaycomp.png',                                // Wind speed
+                    'wdirday.png',                                      // Wind direction
+                    (config.showUvGauge ? 'uvday.png' : null),          // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'solarday.png' : null),    // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'windroseday.png' : null),  // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'baromday.png' : null)     // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                break;
+            case 6:
+                // weewx
+                realtimeVer = 14;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.longPoll ? config.realTimeUrlLongPoll : config.realTimeUrlWeewx;
+                config.showSunshineLed = true;
+                config.showWindVariation = true;
+                config.tipImgs = [                                      // config.tipImgs for weewx
+                    ['dayinouttemp.png', 'dayinouttemp.png'],           // Temperature: outdoor, indoor
+                    // Temperature: dewpnt, apparent, windChill, HeatIndx, humidex
+                    ['dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png', 'dayouttemphum.png'],
+                    'dayrain.png',                                      // Rainfall
+                    'dayrainrate.png',                                  // Rainfall rate
+                    ['dayinouthum.png', 'dayinouthum.png'],             // Humidity: outdoor, indoor
+                    'daybarometer.png',                                 // Pressure
+                    'daywind.png',                                      // Wind speed
+                    'daywinddir.png',                                   // Wind direction
+                    (config.showUvGauge ? 'dayuv.png' : null),          // UV graph if UV sensor is present | =null if no UV sensor
+                    (config.showSolarGauge ? 'dayradiation.png' : null), // Solar rad graph if Solar sensor is present | Solar =null if no Solar sensor
+                    (config.showRoseGauge ? 'daywindvec.png' : null),    // Wind direction if Rose is enabled | =null if Rose is disabled
+                    (config.showCloudGauge ? 'daybarometer.png' : null)  // Pressure for cloud height | =null if Cloud Height is disabled
+                ];
+                break;
+            case 7:
+                // WLCOM
+                realtimeVer = 10;   // minimum version of the realtime JSON file required
+                config.realTimeURL = config.realTimeUrlWLCOM;
+                config.showPopupGraphs = false;        // config.tipImgs - no WL images available
+                config.showRoseGauge = false;          // no windrose data from WL
+                config.showCloudGauge = false;
+                config.tipImgs = null;                 // config.tipImgs - no WL images available
+                config.showWindVariation = false;      // no wind variation data from WL
+                break;
+            default:
+                // Who knows!
+                realtimeVer = 0;   // minimum version of the realtime JSON file required
+                config.realtimeURL = null;
+                config.showPopupGraphs = false;
+                config.tipImgs = null;                     // config.tipImgs - unknown
+            }
+
+            // Are we running on a phone device (or really low res screen)?
+            if ($(window).width() < 480) {
+                // Change the gauge scaling
+                config.gaugeScaling = config.gaugeMobileScaling;
+                // Switch off graphs?
+                config.showPopupGraphs = config.mobileShowGraphs;
+            } else {
+                config.gaugeScaling = 1;
+            }
+
+            // Logo images are used to 'personalise' the gauge backgrounds
+            // To add a logo to a gauge, add the parameter:
+            //    params.customLayer = _imgBackground;
+            // to the corresponding drawXxxx() function below.
+            //
+            // These are for demo only, to add them remove the comments around the following lines, and
+            // the _imgBackground definition line above...
+            /*
+            _imgBackground = document.createElement('img');                 // small logo
+            $(_imgBackground).attr('src', config.imgPathURL + 'logoSmall.png');
+            */
+            // End of logo images
+
+            // Get the display units the user last used when they visited before - if present
+            displayUnits = getCookie('units');
+            // Set 'units' radio buttons to match preferred units
+            if (displayUnits !== null) {
+                // User wants specific units
+                userUnitsSet = true;
+
+                // temperature
+                setRadioCheck('rad_unitsTemp', displayUnits.temp);
+                data.tempunit = '°' + displayUnits.temp;
+                // rain
+                setRadioCheck('rad_unitsRain', displayUnits.rain);
+                data.rainunit = displayUnits.rain;
+                // pressure
+                setRadioCheck('rad_unitsPress', displayUnits.press);
+                data.pressunit = displayUnits.press;
+                // wind
+                setRadioCheck('rad_unitsWind', displayUnits.wind);
+                data.windunit = displayUnits.wind;
+                displayUnits.windrun = getWindrunUnits(data.windunit);
+                // cloud base
+                setRadioCheck('rad_unitsCloud', displayUnits.cloud);
+                data.cloudunit = displayUnits.cloud;
+            } else {
+                // Set the defaults to metric )
+                // DO NOT CHANGE THESE - THE SCRIPT DEPENDS ON THESE DEFAULTS
+                // The units actually displayed will be read from the realtime.txt file, or from the users last visit cookie
+                displayUnits = {
+                    temp   : 'C',
+                    rain   : 'mm',
+                    press  : 'hPa',
+                    wind   : 'km/h',
+                    windrun: 'km',
+                    cloud  : 'm'
+                };
+
+                data.tempunit = '°C';
+                data.rainunit = 'mm';
+                data.pressunit = 'hPa';
+                data.windunit = 'km/h';
+                data.cloudunit = 'm';
+            }
+
+            // enable popup data
+            if (config.showPopupData) {
+                ddimgtooltip.showTips = config.showPopupData;
+            }
+
+            if (config.showPopupGraphs) {
+                // Note the number of array elements must match 'i' in ddimgtooltip.tiparray()
+                ddimgtooltip.tiparray[0][0] = (config.tipImgs[0][0] === null ? null : '');
+                ddimgtooltip.tiparray[1][0] = (config.tipImgs[1][0] === null ? null : '');
+                ddimgtooltip.tiparray[2][0] = (config.tipImgs[2]    === null ? null : '');
+                ddimgtooltip.tiparray[3][0] = (config.tipImgs[3]    === null ? null : '');
+                ddimgtooltip.tiparray[4][0] = (config.tipImgs[4][0] === null ? null : '');
+                ddimgtooltip.tiparray[5][0] = (config.tipImgs[5]    === null ? null : '');
+                ddimgtooltip.tiparray[6][0] = (config.tipImgs[6]    === null ? null : '');
+                ddimgtooltip.tiparray[7][0] = (config.tipImgs[7]    === null ? null : '');
+                ddimgtooltip.tiparray[8][0] = (config.tipImgs[8]    === null ? null : '');
+                ddimgtooltip.tiparray[9][0] = (config.tipImgs[9]    === null ? null : '');
+                ddimgtooltip.tiparray[10][0] = (config.tipImgs[10]  === null ? null : '');
+                ddimgtooltip.tiparray[11][0] = (config.tipImgs[11]  === null ? null : '');
+            }
+
+            // draw the status gadgets first, they will display any errors in the initial set-up
+            ledIndicator = singleLed.getInstance();
+            statusScroller = singleStatus.getInstance();
+            statusTimer = singleTimer.getInstance();
+
+            gaugeTemp = singleTemp.getInstance();
+            // Export gaugeTemp.update() so it can be called from the HTML code
+            if (gaugeTemp) {gauges.doTemp = gaugeTemp.update;}
+
+            gaugeDew = singleDew.getInstance();
+            // Export gaugeDew.update() so it can be called from the HTML code
+            if (gaugeDew) {gauges.doDew = gaugeDew.update;}
+
+            gaugeHum = singleHum.getInstance();
+            // Export gaugeHum.update() so it can be called from the HTML code
+            if (gaugeHum) {gauges.doHum = gaugeHum.update;}
+
+            gaugeBaro = singleBaro.getInstance();
+
+            gaugeWind = singleWind.getInstance();
+            gaugeDir = singleDir.getInstance();
+
+            gaugeRain = singleRain.getInstance();
+            gaugeRRate = singleRRate.getInstance();
+
+            // remove the UV gauge?
+            if (!config.showUvGauge) {
+                $('#canvas_uv').parent().remove();
+            } else {
+                gaugeUV = singleUV.getInstance();
+            }
+
+            // remove the Solar gauge?
+            if (!config.showSolarGauge) {
+                $('#canvas_solar').parent().remove();
+            } else {
+                gaugeSolar = singleSolar.getInstance();
+            }
+
+            // remove the Wind Rose?
+            if (!config.showRoseGauge) {
+                $('#canvas_rose').parent().remove();
+            } else {
+                gaugeRose = singleRose.getInstance();
+            }
+
+            // remove the cloud base gauge?
+            if (!config.showCloudGauge) {
+                $('#canvas_cloud').parent().remove();
+                // and remove cloudbase unit selection options
+                $('#cloud').parent().remove();
+            } else {
+                gaugeCloud = singleCloudBase.getInstance();
+            }
+
+            // Set the language
+            changeLang(strings, false);
+
+            if (!dashboard) {
+                // Go do get the data!
+                getRealtime();
+
+                // start a timer to update the status time
+                tickTockInterval = setInterval(
+                    function () {
+                        $.publish('gauges.clockTick', null);
+                    },
+                    1000);
+
+                // start a timer to stop the page updates after the timeout period
+                if (config.pageUpdateLimit > 0 && getUrlParam('pageUpdate') !== config.pageUpdatePswd) {
+                    setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000);
+                }
+            }
+        },
+
+        //
+        // singleXXXX functions define a singleton for each of the gauges
+        //
+
+        //
+        // Singleton for the LED Indicator
+        //
+        singleLed = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var led;        // Stores a reference to the SS LED
+
+            function init() {
+                // create led indicator
+                if ($('#canvas_led').length) {
+                    led = new steelseries.Led(
+                        'canvas_led', {
+                            ledColor: steelseries.LedColor.GREEN_LED,
+                            size    : $('#canvas_led').width()
+                        });
+
+                    setTitle(strings.led_title);
+                }
+
+                function setTitle(newTitle) {
+                    $('#canvas_led').attr('title', newTitle);
+                }
+
+                function setLedColor(newColour) {
+                    if (led) {
+                        led.setLedColor(newColour);
+                    }
+                }
+
+                function setLedOnOff(onState) {
+                    if (led) {
+                        led.setLedOnOff(onState);
+                    }
+                }
+
+                function blink(blinkState) {
+                    if (led) {
+                        led.blink(blinkState);
+                    }
+                }
+
+                return {
+                    setTitle   : setTitle,
+                    setLedColor: setLedColor,
+                    setLedOnOff: setLedOnOff,
+                    blink      : blink
+                };
+            }
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Status Scroller
+        //
+        singleStatus = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var scroller;   // Stores a reference to the SS scrolling display
+
+            function init() {
+                // create forecast display
+                if ($('#canvas_status').length) {
+                    scroller = new steelseries.DisplaySingle(
+                        'canvas_status', {
+                            width            : $('#canvas_status').width(),
+                            height           : $('#canvas_status').height(),
+                            lcdColor         : gaugeGlobals.lcdColour,
+                            unitStringVisible: false,
+                            value            : strings.statusStr,
+                            digitalFont      : config.digitalForecast,
+                            valuesNumeric    : false,
+                            autoScroll       : true,
+                            alwaysScroll     : false
+                        });
+                }
+
+                function setValue(newTxt) {
+                    if (scroller) {
+                        scroller.setValue(newTxt);
+                    }
+                }
+
+                return {setText: setValue};
+            }
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Status Timer
+        //
+        singleTimer = (function () {
+            var instance,   // Stores a reference to the Singleton
+                lcd,        // Stores a reference to the SS LED
+                count = 1;
+
+            function init() {
+                function tick() {
+                    if (lcd) {
+                        lcd.setValue(count);
+                        count += config.longPoll ? 1 : -1;
+                    }
+                }
+
+                function reset(val) {
+                    count = val;
+                }
+
+                function setValue(newVal) {
+                    if (lcd) {
+                        lcd.setValue(newVal);
+                    }
+                }
+
+                // create timer display
+                if ($('#canvas_timer').length) {
+                    lcd = new steelseries.DisplaySingle(
+                        'canvas_timer', {
+                            width            : $('#canvas_timer').width(),
+                            height           : $('#canvas_timer').height(),
+                            lcdColor         : gaugeGlobals.lcdColour,
+                            lcdDecimals      : 0,
+                            unitString       : strings.timer,
+                            unitStringVisible: true,
+                            digitalFont      : config.digitalFont,
+                            value            : count
+                        });
+                    // subscribe to data updates
+                    $.subscribe('gauges.clockTick', tick);
+                }
+
+                return {
+                    reset   : reset,
+                    setValue: setValue
+                };
+            }
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Temperature Gauge
+        //
+        singleTemp = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define temperature gauge start values
+                cache.sections = createTempSections(true);
+                cache.areas = [];
+                cache.minValue = gaugeGlobals.tempScaleDefMinC;
+                cache.maxValue = gaugeGlobals.tempScaleDefMaxC;
+                cache.title = strings.temp_title_out;
+                cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001;
+                cache.maxMinVisible = false;
+                cache.selected = 'out';
+
+                // create temperature radial gauge
+                if ($('#canvas_temp').length) {
+                    params.size = Math.ceil($('#canvas_temp').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.area = cache.areas;
+                    params.minValue = cache.minValue;
+                    params.maxValue = cache.maxValue;
+                    params.thresholdVisible = false;
+                    params.minMeasuredValueVisible = cache.maxMinVisible;
+                    params.maxMeasuredValueVisible = cache.maxMinVisible;
+                    params.titleString = cache.title;
+                    params.unitString = data.tempunit;
+                    params.trendVisible = gaugeGlobals.tempTrendVisible;
+                    // params.customLayer = _imgBackground;      // uncomment to add a background image - See Logo Images above
+
+                    ssGauge = new steelseries.Radial('canvas_temp', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_temp').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_temp').css(gaugeShadow(params.size));
+                    }
+
+                    // remove indoor temperature/humidity options?
+                    if (!config.showIndoorTempHum) {
+                        $('#rad_temp1').remove();
+                        $('#lab_temp1').remove();
+                        $('#rad_temp2').remove();
+                        $('#lab_temp2').remove();
+                        $('#rad_hum1').remove();
+                        $('#lab_hum1').remove();
+                        $('#rad_hum2').remove();
+                        $('#lab_hum2').remove();
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var sel = cache.selected;
+
+                    // Argument length === 1 when called from radio input
+                    // Argument length === 2 when called from event handler
+                    if (arguments.length === 1) {
+                        sel = arguments[0].value;
+                    }
+
+                    // if rad isn't specified, just use existing value
+                    var t1, scaleStep, tip;
+
+                    cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF;
+                    cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF;
+
+                    if (sel === 'out') {
+                        cache.low = extractDecimal(data.tempTL);
+                        cache.high = extractDecimal(data.tempTH);
+                        cache.lowScale = getMinTemp(cache.minValue);
+                        cache.highScale = getMaxTemp(cache.maxValue);
+                        cache.value = extractDecimal(data.temp);
+                        cache.title = strings.temp_title_out;
+                        cache.loc = strings.temp_out_info;
+                        cache.trendVal = extractDecimal(data.temptrend);
+                        cache.popupImg = 0;
+                        if (gaugeGlobals.tempTrendVisible) {
+                            t1 = tempTrend(+cache.trendVal, data.tempunit, false);
+                            if (t1 === -9999) {
+                                // trend value isn't currently available
+                                cache.trend = steelseries.TrendState.OFF;
+                            } else if (t1 > 0) {
+                                cache.trend = steelseries.TrendState.UP;
+                            } else if (t1 < 0) {
+                                cache.trend = steelseries.TrendState.DOWN;
+                            } else {
+                                cache.trend = steelseries.TrendState.STEADY;
+                            }
+                        }
+                    } else {
+                        // Indoor
+                        cache.title = strings.temp_title_in;
+                        cache.loc = strings.temp_in_info;
+                        cache.value = extractDecimal(data.intemp);
+                        cache.popupImg = 1;
+                        if (data.intempTL && data.intempTH) {
+                            // Indoor - and Max/Min values supplied
+                            cache.low = extractDecimal(data.intempTL);
+                            cache.high = extractDecimal(data.intempTH);
+                            cache.lowScale = getMinTemp(cache.minValue);
+                            cache.highScale = getMaxTemp(cache.maxValue);
+                        } else {
+                            // Indoor - no Max/Min values supplied
+                            cache.low = cache.value;
+                            cache.lowScale = cache.value;
+                            cache.high = cache.value;
+                            cache.highScale = cache.value;
+                        }
+                        if (gaugeGlobals.tempTrendVisible) {
+                            cache.trend = steelseries.TrendState.OFF;
+                        }
+                    }
+
+                    // has the gauge type changed?
+                    if (cache.selected !== sel) {
+                        cache.selected = sel;
+                        // Change gauge title
+                        ssGauge.setTitleString(cache.title);
+                        ssGauge.setMaxMeasuredValueVisible(cache.maxMinVisible);
+                        ssGauge.setMinMeasuredValueVisible(cache.maxMinVisible);
+                        if (config.showPopupGraphs && config.tipImgs[0][cache.popupImg] !== null) {
+                            var cacheDefeat = '?' + $('#imgtip0_img').attr('src').split('?')[1];
+                            $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][cache.popupImg] + cacheDefeat);
+                        }
+                    }
+
+                    // auto scale the ranges
+                    scaleStep = data.tempunit[1] === 'C' ? 10 : 20;
+                    while (cache.lowScale < cache.minValue) {
+                        cache.minValue -= scaleStep;
+                        if (cache.highScale <= cache.maxValue - scaleStep) {
+                            cache.maxValue -= scaleStep;
+                        }
+                    }
+                    while (cache.highScale > cache.maxValue) {
+                        cache.maxValue += scaleStep;
+                        if (cache.minValue >= cache.minValue + scaleStep) {
+                            cache.minValue += scaleStep;
+                        }
+                    }
+
+                    if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setMinValue(cache.minValue);
+                        ssGauge.setMaxValue(cache.maxValue);
+                        ssGauge.setValue(cache.minValue);
+                    }
+                    if (cache.selected === 'out') {
+                        cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)];
+                    } else if (data.intempTL && data.intempTH) {
+                        // Indoor and min/max avaiable
+                        cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)];
+                    } else {
+                        // Indoor no min/max avaiable
+                        cache.areas = [];
+                    }
+
+                    if (gaugeGlobals.tempTrendVisible) {
+                        ssGauge.setTrend(cache.trend);
+                    }
+                    ssGauge.setArea(cache.areas);
+                    ssGauge.setValueAnimated(+cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        if (cache.selected === 'out') {
+                            tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TtempTL +
+                                 ' | ' +
+                                 strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TtempTH;
+                            if (cache.trendVal !== -9999) {
+                                tip += '<br>' +
+                                    strings.temp_trend_info + ': ' + tempTrend(cache.trendVal, data.tempunit, true) +
+                                    ' ' + cache.trendVal + data.tempunit + '/h';
+                            }
+                        } else if (data.TintempTL && data.TintempTH) {
+                            // Indoor and min/max available
+                            tip = cache.loc + ' - ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TintempTL +
+                            ' | ' +
+                            strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TintempTH;
+                        } else {
+                            // Indoor no min/max
+                            tip = cache.loc + ': ' + data.intemp + data.tempunit;
+                        }
+                        $('#imgtip0_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[0][cache.popupImg] !== null) {
+                        $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][cache.popupImg] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(), // End singleTemp()
+
+        //
+        // Singleton for the Dewpoint Gauge
+        //
+        singleDew = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+                var tmp;
+
+                // define dew point gauge start values
+                cache.sections = createTempSections(true);
+                cache.areas = [];
+                cache.minValue = gaugeGlobals.tempScaleDefMinC;
+                cache.maxValue = gaugeGlobals.tempScaleDefMaxC;
+                cache.value = gaugeGlobals.tempScaleDefMinC + 0.0001;
+                // Has the end user selected a preferred 'scale' before
+                tmp = getCookie('dewGauge');
+                cache.selected = tmp !== null ? tmp : config.dewDisplayType;
+                setRadioCheck('rad_dew', cache.selected);
+                switch (cache.selected) {
+                case 'dew':
+                    cache.title = strings.dew_title;
+                    cache.popupImg = 0;
+                    break;
+                case 'app':
+                    cache.title = strings.apptemp_title;
+                    cache.popupImg = 1;
+                    break;
+                case 'feel':
+                    cache.title = strings.feel_title;
+                    cache.popupImg = 1;
+                    break;
+                case 'wnd':
+                    cache.title = strings.chill_title;
+                    cache.popupImg = 2;
+                    break;
+                case 'hea':
+                    cache.title = strings.heat_title;
+                    cache.popupImg = 3;
+                    break;
+                case 'hum':
+                    cache.title = strings.humdx_title;
+                    cache.popupImg = 4;
+                // no default
+                }
+                cache.minMeasuredVisible = false;
+                cache.maxMeasuredVisible = false;
+
+                // create dew point radial gauge
+                if ($('#canvas_dew').length) {
+                    params.size = Math.ceil($('#canvas_dew').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.area = cache.areas;
+                    params.minValue = cache.minValue;
+                    params.maxValue = cache.maxValue;
+                    params.thresholdVisible = false;
+                    params.titleString = cache.title;
+                    params.unitString = data.tempunit;
+
+                    ssGauge = new steelseries.Radial('canvas_dew', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_dew').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_dew').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    // if rad isn't specified, just use existing value
+                    var sel = cache.selected;
+
+                    // Argument length === 2 when called from event handler
+                    if (arguments.length === 1) {
+                        sel = arguments[0].value;
+                        // save the choice in a cookie
+                        setCookie('dewGauge', sel);
+                    }
+
+                    var tip, scaleStep;
+
+                    cache.minValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMinC : gaugeGlobals.tempScaleDefMinF;
+                    cache.maxValue = data.tempunit[1] === 'C' ? gaugeGlobals.tempScaleDefMaxC : gaugeGlobals.tempScaleDefMaxF;
+
+                    cache.lowScale = getMinTemp(cache.minValue);
+                    cache.highScale = getMaxTemp(cache.maxValue);
+
+                    switch (sel) {
+                    case 'dew': // dew point
+                        cache.low = extractDecimal(data.dewpointTL);
+                        cache.high = extractDecimal(data.dewpointTH);
+                        cache.value = extractDecimal(data.dew);
+                        cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)];
+                        cache.title = strings.dew_title;
+                        cache.minMeasuredVisible = false;
+                        cache.maxMeasuredVisible = false;
+                        cache.popupImg = 0;
+                        tip = strings.dew_info + ':' +
+                             '<br>' +
+                             '- ' + strings.lowest_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTL +
+                             ' | ' + strings.highest_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TdewpointTH;
+                        break;
+                    case 'app': // apparent temperature
+                        cache.low = extractDecimal(data.apptempTL);
+                        cache.high = extractDecimal(data.apptempTH);
+                        cache.value = extractDecimal(data.apptemp);
+                        cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)];
+                        cache.title = strings.apptemp_title;
+                        cache.minMeasuredVisible = false;
+                        cache.maxMeasuredVisible = false;
+                        cache.popupImg = 1;
+                        tip = tip = strings.apptemp_info + ':' +
+                             '<br>' +
+                             '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTL +
+                             ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TapptempTH;
+                        break;
+                    case 'feel': // feels like
+                        cache.low = extractDecimal(data.feelslikeTL);
+                        cache.high = extractDecimal(data.feelslikeTH);
+                        cache.value = extractDecimal(data.feelslike);
+                        cache.areas = [steelseries.Section(+cache.low, +cache.high, gaugeGlobals.minMaxArea)];
+                        cache.title = strings.feel_title;
+                        cache.minMeasuredVisible = false;
+                        cache.maxMeasuredVisible = false;
+                        cache.popupImg = 1;
+                        tip = tip = strings.feel_info + ':' +
+                             '<br>' +
+                             '- ' + strings.lowestF_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTL +
+                             ' | ' + strings.highestF_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TfeelslikeTH;
+                        break;
+                    case 'wnd': // wind chill
+                        cache.low = extractDecimal(data.wchillTL);
+                        cache.high = extractDecimal(data.wchill);
+                        cache.value = extractDecimal(data.wchill);
+                        cache.areas = [];
+                        cache.title = strings.chill_title;
+                        cache.minMeasuredVisible = true;
+                        cache.maxMeasuredVisible = false;
+                        cache.popupImg = 2;
+                        tip = strings.chill_info + ':' +
+                            '<br>' +
+                            '- ' + strings.lowest_info + ': ' + cache.low + data.tempunit + ' ' + strings.at + ' ' + data.TwchillTL;
+                        break;
+                    case 'hea': // heat index
+                        cache.low = extractDecimal(data.heatindex);
+                        cache.high = extractDecimal(data.heatindexTH);
+                        cache.value = extractDecimal(data.heatindex);
+                        cache.areas = [];
+                        cache.title = strings.heat_title;
+                        cache.minMeasuredVisible = false;
+                        cache.maxMeasuredVisible = true;
+                        cache.popupImg = 3;
+                        tip = strings.heat_info + ':' +
+                            '<br>' +
+                            '- ' + strings.highest_info + ': ' + cache.high + data.tempunit + ' ' + strings.at + ' ' + data.TheatindexTH;
+                        break;
+                    case 'hum': // humidex
+                        cache.low = extractDecimal(data.humidex);
+                        cache.high = extractDecimal(data.humidex);
+                        cache.value = extractDecimal(data.humidex);
+                        cache.areas = [];
+                        cache.title = strings.humdx_title;
+                        cache.minMeasuredVisible = false;
+                        cache.maxMeasuredVisible = false;
+                        cache.popupImg = 4;
+                        tip = strings.humdx_info + ': ' + cache.value + data.tempunit;
+                        break;
+                    // no default
+                    }
+
+                    if (cache.selected !== sel) {
+                        cache.selected = sel;
+                        // change gauge title
+                        ssGauge.setTitleString(cache.title);
+                        // and graph image
+                        if (config.showPopupGraphs && config.tipImgs[1][cache.popupImg] !== null) {
+                            var cacheDefeat = '?' + $('#imgtip1_img').attr('src').split('?')[1];
+                            $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][cache.popupImg] + cacheDefeat);
+                        }
+                    }
+
+                    // auto scale the ranges
+                    scaleStep = data.tempunit[1] === 'C' ? 10 : 20;
+                    while (cache.lowScale < cache.minValue) {
+                        cache.minValue -= scaleStep;
+                        if (cache.highScale <= cache.maxValue - scaleStep) {
+                            cache.maxValue -= scaleStep;
+                        }
+                    }
+                    while (cache.highScale > cache.maxValue) {
+                        cache.maxValue += scaleStep;
+                        if (cache.minValue >= cache.minValue + scaleStep) {
+                            cache.minValue += scaleStep;
+                        }
+                    }
+
+                    if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setMinValue(cache.minValue);
+                        ssGauge.setMaxValue(cache.maxValue);
+                        ssGauge.setValue(cache.minValue);
+                    }
+                    ssGauge.setMinMeasuredValueVisible(cache.minMeasuredVisible);
+                    ssGauge.setMaxMeasuredValueVisible(cache.maxMeasuredVisible);
+                    ssGauge.setMinMeasuredValue(+cache.low);
+                    ssGauge.setMaxMeasuredValue(+cache.high);
+                    ssGauge.setArea(cache.areas);
+                    ssGauge.setValueAnimated(+cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        $('#imgtip1_txt').html(tip);
+                    }
+                }
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[1][cache.popupImg] !== null) {
+                        $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][cache.popupImg] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(), // End of singleDew()
+
+        //
+        // Singleton for the Rainfall Gauge
+        //
+        singleRain = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define rain gauge start values
+                cache.maxValue = gaugeGlobals.rainScaleDefMaxmm;
+                cache.value = 0.0001;
+                cache.title = strings.rain_title;
+                cache.lcdDecimals = 1;
+                cache.scaleDecimals = 1;
+                cache.labelNumberFormat = gaugeGlobals.labelFormat;
+                cache.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []);
+                cache.valGrad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null);
+
+                // create rain radial bargraph gauge
+                if ($('#canvas_rain').length) {
+                    params.size = Math.ceil($('#canvas_rain').width() * config.gaugeScaling);
+                    params.maxValue = cache.maxValue;
+                    params.thresholdVisible = false;
+                    params.titleString = cache.title;
+                    params.unitString = data.rainunit;
+                    params.valueColor = steelseries.ColorDef.BLUE;
+                    params.valueGradient = cache.valGrad;
+                    params.useValueGradient = gaugeGlobals.rainUseGradientColours;
+                    params.useSectionColors = gaugeGlobals.rainUseSectionColour;
+                    params.useSectionColors = gaugeGlobals.rainUseSectionColours;
+                    params.labelNumberFormat = cache.labelNumberFormat;
+                    params.fractionalScaleDecimals = cache.scaleDecimals;
+                    params.niceScale = false;
+
+                    ssGauge = new steelseries.RadialBargraph('canvas_rain', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_rain').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_rain').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    cache.value = extractDecimal(data.rfall);
+                    if (data.rainunit === 'mm') { // 10, 20, 30...
+                        cache.maxValue = Math.max(nextHighest(cache.value, 10), gaugeGlobals.rainScaleDefMaxmm);
+                    } else {
+                        // inches 0.5, 1.0, 2.0, 3.0 ... 10.0, 12.0, 14.0
+                        if (cache.value <= 1) {
+                            cache.maxValue = Math.max(nextHighest(cache.value, 0.5), gaugeGlobals.rainScaleDefMaxIn);
+                        } else if (cache.value <= 6) {
+                            cache.maxValue = Math.max(nextHighest(cache.value, 1), gaugeGlobals.rainScaleDefMaxIn);
+                        } else {
+                            cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.rainScaleDefMaxIn);
+                        }
+                        cache.scaleDecimals = cache.maxValue < 1 ? 2 : 1;
+                    }
+
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        // Gauge scale is too low, increase it.
+                        // First set the pointer back to zero so we get a nice animation
+                        ssGauge.setValue(0);
+                        // and redraw the gauge with the new scale
+                        ssGauge.setFractionalScaleDecimals(cache.scaleDecimals);
+                        ssGauge.setMaxValue(cache.maxValue);
+                    }
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        $('#imgtip2_txt').html(strings.LastRain_info + ': ' + data.LastRained);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[2] !== null) {
+                        $('#imgtip2_img').attr('src', config.imgPathURL + config.tipImgs[2] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Rainfall Rate Gauge
+        //
+        singleRRate = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define rain rate gauge start values
+                cache.maxMeasured = 0;
+                cache.maxValue = gaugeGlobals.rainRateScaleDefMaxmm;
+                cache.value = 0.0001;
+                cache.title = strings.rrate_title;
+                cache.lcdDecimals = 1;
+                cache.scaleDecimals = 0;
+                cache.labelNumberFormat = gaugeGlobals.labelFormat;
+                cache.sections = createRainRateSections(true);
+
+                // create rain rate radial gauge
+                if ($('#canvas_rrate').length) {
+                    params.size = Math.ceil($('#canvas_rrate').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.maxValue = cache.maxValue;
+                    params.thresholdVisible = false;
+                    params.maxMeasuredValueVisible = true;
+                    params.titleString = cache.title;
+                    params.unitString = data.rainunit + '/h';
+                    params.lcdDecimals = cache.lcdDecimals;
+                    params.labelNumberFormat = cache.labelNumberFormat;
+                    params.fractionalScaleDecimals = cache.scaleDecimals;
+                    params.niceScale = false;
+
+                    ssGauge = new steelseries.Radial('canvas_rrate', params);
+                    ssGauge.setMaxMeasuredValue(cache.maxMeasured);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_rrate').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_rrate').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var tip;
+
+                    cache.value = extractDecimal(data.rrate);
+                    cache.maxMeasured = extractDecimal(data.rrateTM);
+                    cache.overallMax = Math.max(cache.maxMeasured, cache.value);  // workaround for VWS bug, not supplying correct max value today
+
+                    if (data.rainunit === 'mm') { // 10, 20, 30...
+                        cache.maxValue = nextHighest(cache.overallMax, 10);
+                    } else {
+                        // inches 0.5, 1.0, 2.0, 3.0 ... 10, 20, 30...
+                        if (cache.overallMax <= 0.5) {
+                            cache.maxValue = 0.5;
+                        } else if (cache.overallMax <= 10) {
+                            cache.maxValue = nextHighest(cache.overallMax, 1);
+                        } else {
+                            cache.maxValue = nextHighest(cache.overallMax, 10);
+                        }
+                        cache.scaleDecimals = cache.maxValue < 1 ? 2 : (cache.maxValue < 7 ? 1 : 0);
+                    }
+
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setValue(0);
+                        ssGauge.setFractionalScaleDecimals(cache.scaleDecimals);
+                        ssGauge.setMaxValue(cache.maxValue);
+                    }
+
+                    ssGauge.setValueAnimated(cache.value);
+                    ssGauge.setMaxMeasuredValue(cache.maxMeasured);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = strings.rrate_info + ':<br>' +
+                            '- ' + strings.maximum_info + ': ' + data.rrateTM + ' ' + data.rainunit + '/h ' + strings.at + ' ' + data.TrrateTM +
+                            ' | ' + strings.max_hour_info + ': ' + extractDecimal(data.hourlyrainTH) + ' ' + data.rainunit + ' ' +
+                            strings.at + ' ' + data.ThourlyrainTH;
+                        $('#imgtip3_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[3] !== null) {
+                        $('#imgtip3_img').attr('src', config.imgPathURL + config.tipImgs[3] + cacheDefeat);
+                    }
+                }
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Humidity Gauge
+        //
+        singleHum = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define humidity gauge start values
+                cache.areas = [];
+                cache.value = 0.0001;
+                cache.title = strings.hum_title_out;
+                cache.selected = 'out';
+
+                // create humidity radial gauge
+                if ($('#canvas_hum').length) {
+                    params.size = Math.ceil($('#canvas_hum').width() * config.gaugeScaling);
+                    params.section = [
+                        steelseries.Section(0, 20, 'rgba(255,255,0,0.3)'),
+                        steelseries.Section(20, 80, 'rgba(0,255,0,0.3)'),
+                        steelseries.Section(80, 100, 'rgba(255,0,0,0.3)')
+                    ];
+                    params.area = cache.areas;
+                    params.maxValue = 100;
+                    params.thresholdVisible = false;
+                    params.titleString = cache.title;
+                    params.unitString = 'RH%';
+
+                    ssGauge = new steelseries.Radial('canvas_hum', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_hum').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_hum').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var radio;
+                    // Argument length === 2 when called from event handler
+                    if (arguments.length === 1) {
+                        radio = arguments[0];
+                    }
+
+                    // if rad isn't specified, just use existing value
+                    var sel = (typeof radio === 'undefined' ? cache.selected : radio.value),
+                        tip;
+
+                    if (sel === 'out') {
+                        cache.value = extractDecimal(data.hum);
+                        cache.areas = [steelseries.Section(+extractDecimal(data.humTL), +extractDecimal(data.humTH), gaugeGlobals.minMaxArea)];
+                        cache.title = strings.hum_title_out;
+                        cache.popupImg = 0;
+                    } else {
+                        cache.value = extractDecimal(data.inhum);
+                        if (data.inhumTL && data.inhumTH) {
+                            cache.areas = [steelseries.Section(+extractDecimal(data.inhumTL), +extractDecimal(data.inhumTH), gaugeGlobals.minMaxArea)];
+                        } else {
+                            cache.areas = [];
+                        }
+                        cache.title = strings.hum_title_in;
+                        cache.popupImg = 1;
+                    }
+
+                    if (cache.selected !== sel) {
+                        cache.selected = sel;
+                        // Change gauge title
+                        ssGauge.setTitleString(cache.title);
+                        if (config.showPopupGraphs && config.tipImgs[4][cache.popupImg] !== null) {
+                            var cacheDefeat = '?' + $('#imgtip4_img').attr('src').split('?')[1];
+                            $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][cache.popupImg] + cacheDefeat);
+                        }
+                    }
+
+                    ssGauge.setArea(cache.areas);
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        if (cache.selected === 'out') {
+                            tip = strings.hum_out_info + ':' +
+                                '<br>' +
+                                '- ' + strings.minimum_info + ': ' + extractDecimal(data.humTL) + '% ' + strings.at + ' ' + data.ThumTL +
+                                ' | ' + strings.maximum_info + ': ' + extractDecimal(data.humTH) + '% ' + strings.at + ' ' + data.ThumTH;
+                        } else if (data.inhumTL && data.inhumTH) {
+                            // we have indoor high/low data
+                            tip = strings.hum_in_info + ':' +
+                                '<br>' +
+                                '- ' + strings.minimum_info + ': ' + extractDecimal(data.inhumTL) + '% ' + strings.at + ' ' + data.TinhumTL +
+                                ' | ' + strings.maximum_info + ': ' + extractDecimal(data.inhumTH) + '% ' + strings.at + ' ' + data.TinhumTH;
+                        } else {
+                            // no indoor high/low data
+                            tip = strings.hum_in_info + ': ' + extractDecimal(data.inhum) + '%';
+                        }
+                        $('#imgtip4_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[4][cache.popupImg] !== null) {
+                        $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][cache.popupImg] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Barometer Gauge
+        //
+        singleBaro = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define pressure/barometer gauge start values
+                cache.sections = [];
+                cache.areas = [];
+                cache.minValue = gaugeGlobals.baroScaleDefMinhPa;
+                cache.maxValue = gaugeGlobals.baroScaleDefMaxhPa;
+                cache.value = cache.minValue + 0.0001;
+                cache.title = strings.baro_title;
+                cache.lcdDecimals = 1;
+                cache.scaleDecimals = 0;
+                cache.labelNumberFormat = gaugeGlobals.labelFormat;
+
+                // create pressure/barometric radial gauge
+                if ($('#canvas_baro').length) {
+                    params.size = Math.ceil($('#canvas_baro').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.area = cache.areas;
+                    params.minValue = cache.minValue;
+                    params.maxValue = cache.maxValue;
+                    params.niceScale = false;
+                    params.thresholdVisible = false;
+                    params.titleString = cache.title;
+                    params.unitString = data.pressunit;
+                    params.lcdDecimals = cache.lcdDecimals;
+                    params.trendVisible = gaugeGlobals.pressureTrendVisible;
+                    params.labelNumberFormat = cache.labelNumberFormat;
+                    params.fractionalScaleDecimals = cache.scaleDecimals;
+
+                    ssGauge = new steelseries.Radial('canvas_baro', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_baro').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_baro').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var tip, t1, dps;
+
+                    cache.recLow = +extractDecimal(data.pressL);
+                    cache.recHigh = +extractDecimal(data.pressH);
+                    cache.todayLow = +extractDecimal(data.pressTL);
+                    cache.todayHigh = +extractDecimal(data.pressTH);
+                    cache.value = +extractDecimal(data.press);
+                    // Convert the WD change over 3 hours to an hourly rate
+                    cache.trendVal = +extractDecimal(data.presstrendval) / (config.weatherProgram === 2 ? 3 : 1);
+
+                    if (data.pressunit === 'hPa' || data.pressunit === 'mb') {
+                        //  default min range 990-1030 - steps of 10 hPa
+                        cache.minValue = Math.min(nextLowest(cache.recLow - 2, 10), gaugeGlobals.baroScaleDefMinhPa);
+                        cache.maxValue = Math.max(nextHighest(cache.recHigh + 2, 10), gaugeGlobals.baroScaleDefMaxhPa);
+                        dps = 1; // 1 decimal place
+                    } else if (data.pressunit === 'kPa') {
+                        //  default min range 99-105 - steps of 1 kPa
+                        cache.minValue = Math.min(nextLowest(cache.recLow - 0.2, 1), gaugeGlobals.baroScaleDefMinkPa);
+                        cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.2, 1), gaugeGlobals.baroScaleDefMaxkPa);
+                        dps = 2;
+                    } else {
+                        // inHg: default min range 29.5-30.5 - steps of 0.5 inHg
+                        cache.minValue = Math.min(nextLowest(cache.recLow - 0.1, 0.5), gaugeGlobals.baroScaleDefMininHg);
+                        cache.maxValue = Math.max(nextHighest(cache.recHigh + 0.1, 0.5), gaugeGlobals.baroScaleDefMaxinHg);
+                        dps = 3;
+                    }
+                    cache.trendValRnd = cache.trendVal.toFixed(dps);
+                    cache.todayLowRnd = cache.todayLow.toFixed(dps);
+                    cache.todayHighRnd = cache.todayHigh.toFixed(dps);
+
+                    if (cache.minValue !== ssGauge.getMinValue() || cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setMinValue(cache.minValue);
+                        ssGauge.setMaxValue(cache.maxValue);
+                        ssGauge.setValue(cache.minValue);
+                    }
+                    if (cache.recHigh === cache.todayHigh && cache.recLow === cache.todayLow) {
+                        // VWS does not provide record hi/lo values
+                        cache.sections = [];
+                        cache.areas = [steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea)];
+                    } else {
+                        cache.sections = [
+                            steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'),
+                            steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)')
+                        ];
+                        cache.areas = [
+                            steelseries.Section(cache.minValue, cache.recLow, 'rgba(255,0,0,0.5)'),
+                            steelseries.Section(cache.recHigh, cache.maxValue, 'rgba(255,0,0,0.5)'),
+                            steelseries.Section(cache.todayLow, cache.todayHigh, gaugeGlobals.minMaxArea)
+                        ];
+                    }
+
+                    if (gaugeGlobals.pressureTrendVisible) {
+                        // Use the baroTrend rather than simple arithmetic test - steady is more/less than zero!
+                        t1 = baroTrend(cache.trendVal, data.pressunit, false);
+                        if (t1 === -9999) {
+                            // trend value isn't currently available
+                            cache.trend = steelseries.TrendState.OFF;
+                        } else if (t1 > 0) {
+                            cache.trend = steelseries.TrendState.UP;
+                        } else if (t1 < 0) {
+                            cache.trend = steelseries.TrendState.DOWN;
+                        } else {
+                            cache.trend = steelseries.TrendState.STEADY;
+                        }
+                        ssGauge.setTrend(cache.trend);
+                    }
+
+                    ssGauge.setArea(cache.areas);
+                    ssGauge.setSection(cache.sections);
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = strings.baro_info + ':' +
+                            '<br>' +
+                            '- ' + strings.minimum_info + ': ' + cache.todayLowRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTL +
+                            ' | ' + strings.maximum_info + ': ' + cache.todayHighRnd + ' ' + data.pressunit + ' ' + strings.at + ' ' + data.TpressTH;
+                        if (cache.trendVal !== -9999) {
+                            tip += '<br>' +
+                                '- ' + strings.baro_trend_info + ': ' + baroTrend(cache.trendVal, data.pressunit, true) + ' ' +
+                                (cache.trendValRnd > 0 ? '+' : '') + cache.trendValRnd + ' ' + data.pressunit + '/h';
+                        }
+                        $('#imgtip5_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[5] !== null) {
+                        $('#imgtip5_img').attr('src', config.imgPathURL + config.tipImgs[5] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Wind Speed Gauge
+        //
+        singleWind = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define wind gauge start values
+                cache.maxValue = gaugeGlobals.windScaleDefMaxKph;
+                cache.areas = [];
+                cache.maxMeasured = 0;
+                cache.value = 0.0001;
+                cache.title = strings.wind_title;
+
+                // create wind speed radial gauge
+                if ($('#canvas_wind').length) {
+                    params.size = Math.ceil($('#canvas_wind').width() * config.gaugeScaling);
+                    params.area = cache.areas;
+                    params.maxValue = cache.maxValue;
+                    params.niceScale = false;
+                    params.thresholdVisible = false;
+                    params.maxMeasuredValueVisible = true;
+                    params.titleString = cache.title;
+                    params.unitString = data.windunit;
+
+                    ssGauge = new steelseries.Radial('canvas_wind', params);
+                    ssGauge.setMaxMeasuredValue(cache.maxMeasured);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_wind').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_wind').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var tip;
+
+                    cache.value = extractDecimal(data.wlatest);
+                    cache.average = extractDecimal(data.wspeed);
+                    cache.gust = extractDecimal(data.wgust);
+                    cache.maxGustToday = extractDecimal(data.wgustTM);
+                    cache.maxAvgToday = extractDecimal(data.windTM);
+
+                    switch (data.windunit) {
+                    case 'mph':
+                    case 'kts':
+                        cache.maxValue = Math.max(nextHighest(cache.maxGustToday, 10), gaugeGlobals.windScaleDefMaxMph);
+                        break;
+                    case 'm/s':
+                        cache.maxValue = Math.max(nextHighest(cache.maxGustToday, 5), gaugeGlobals.windScaleDefMaxMs);
+                        break;
+                    default:
+                        cache.maxValue = Math.max(nextHighest(cache.maxGustToday, 20), gaugeGlobals.windScaleDefMaxKmh);
+                    }
+                    cache.areas = [
+                        steelseries.Section(0, +cache.average, gaugeGlobals.windAvgArea),
+                        steelseries.Section(+cache.average, +cache.gust, gaugeGlobals.minMaxArea)
+                    ];
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setValue(0);
+                        ssGauge.setMaxValue(cache.maxValue);
+                    }
+
+                    ssGauge.setArea(cache.areas);
+                    ssGauge.setMaxMeasuredValue(cache.maxGustToday);
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = strings.tenminavgwind_info + ': ' + cache.average + ' ' + data.windunit + ' | ' +
+                              strings.maxavgwind_info + ': ' + cache.maxAvgToday + ' ' + data.windunit + '<br>' +
+                              strings.tenmingust_info + ': ' + cache.gust + ' ' + data.windunit + ' | ' +
+                              strings.maxgust_info + ': ' + cache.maxGustToday + ' ' + data.windunit + ' ' +
+                              strings.at + ' ' + data.TwgustTM + ' ' + strings.bearing_info + ': ' + data.bearingTM +
+                              (isNaN(parseFloat(data.bearingTM)) ? '' : '° (' + getord(+data.bearingTM) + ')');
+                        $('#imgtip6_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[6] !== null) {
+                        $('#imgtip6_img').attr('src', config.imgPathURL + config.tipImgs[6] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(), // End of singleWind()
+
+        //
+        // Singleton for the Wind Direction Gauge
+        //
+        singleDir = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {}; // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define wind direction gauge start values
+                cache.valueLatest = 0;
+                cache.valueAverage = 0;
+                cache.titles = [strings.latest_web, strings.tenminavg_web];
+
+                // create wind direction/compass radial gauge
+                if ($('#canvas_dir').length) {
+                    params.size = Math.ceil($('#canvas_dir').width() * config.gaugeScaling);
+                    params.pointerTypeLatest = gaugeGlobals.pointer; // default TYPE8,
+                    params.pointerTypeAverage = gaugeGlobals.dirAvgPointer; // default TYPE8
+                    params.pointerColorAverage = gaugeGlobals.dirAvgPointerColour;
+                    params.degreeScale = true;             // Show degree scale rather than ordinal directions
+                    params.pointSymbols = strings.compass;
+                    params.roseVisible = false;
+                    params.lcdTitleStrings = cache.titles;
+                    params.useColorLabels = false;
+
+                    ssGauge = new steelseries.WindDirection('canvas_dir', params);
+                    ssGauge.setValueAverage(+cache.valueAverage);
+                    ssGauge.setValueLatest(+cache.valueLatest);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_dir').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_dir').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var windSpd, windGst, range, tip, i,
+                        rosePoints = 0,
+                        roseMax = 0,
+                        roseSectionAngle = 0,
+                        roseAreas = [];
+
+                    cache.valueLatest = extractInteger(data.bearing);
+                    cache.valueAverage = extractInteger(data.avgbearing);
+                    cache.bearingFrom = extractInteger(data.BearingRangeFrom10);
+                    cache.bearingTo = extractInteger(data.BearingRangeTo10);
+
+                    ssGauge.setValueAnimatedAverage(+cache.valueAverage);
+                    if (cache.valueAverage === 0) {
+                        cache.valueLatest = 0;
+                    }
+                    ssGauge.setValueAnimatedLatest(+cache.valueLatest);
+
+                    if (config.showWindVariation) {
+                        windSpd = +extractDecimal(data.wspeed);
+                        windGst = +extractDecimal(data.wgust);
+                        switch (data.windunit.toLowerCase()) {
+                        case 'mph':
+                            cache.avgKnots = 0.868976242 * windSpd;
+                            cache.gstKnots = 0.868976242 * windGst;
+                            break;
+                        case 'kts':
+                            cache.avgKnots = windSpd;
+                            cache.gstKnots = windGst;
+                            break;
+                        case 'm/s':
+                            cache.avgKnots = 1.94384449 * windSpd;
+                            cache.gstKnots = 1.94384449 * windGst;
+                            break;
+                        case 'km/h':
+                            cache.avgKnots = 0.539956803 * windSpd;
+                            cache.gstKnots = 0.539956803 * windGst;
+                            break;
+                        // no default
+                        }
+                        cache.avgKnots = Math.round(cache.avgKnots);
+                        cache.gstKnots = Math.round(cache.gstKnots);
+                        if (config.showWindMetar) {
+                            ssGauge.VRB = ' - METAR: ' + ('0' + data.avgbearing).slice(-3) + ('0' + cache.avgKnots).slice(-2) +
+                                          'G' + ('0' + cache.gstKnots).slice(-2) + 'KT ';
+                        } else {
+                            ssGauge.VRB = '';
+                        }
+                        if (windSpd > 0) {
+                            // If variation less than 60 degrees, then METAR = Steady
+                            // Unless range = 0 and from/to direction = avg + 180
+                            range = (+cache.bearingTo < +cache.bearingFrom ? 360 + (+cache.bearingTo) : +cache.bearingTo) - (+cache.bearingFrom);
+
+                            if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold
+                                if (config.showRoseOnDirGauge) {
+                                    ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]);
+                                    ssGauge.setSection([]);
+                                } else {
+                                    ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]);
+                                    ssGauge.setArea([]);
+                                }
+                            } else if (config.showRoseOnDirGauge) {
+                                ssGauge.setSection([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.windVariationSector)]);
+                            } else {
+                                ssGauge.setSection([]);
+                                ssGauge.setArea([steelseries.Section(cache.bearingFrom, cache.bearingTo, gaugeGlobals.minMaxArea)]);
+                            }
+                            if (config.showWindMetar) {
+                                if ((range < 60 && range > 0) || range === 0 && cache.bearingFrom === cache.valueAverage) {
+                                    ssGauge.VRB += ' STDY';
+                                } else if (cache.avgKnots < 3) { // Europe uses 3kts, USA 6kts as the threshold
+                                    ssGauge.VRB += ' VRB';
+                                } else {
+                                    ssGauge.VRB += ' ' + cache.bearingFrom + 'V' + cache.bearingTo;
+                                }
+                            }
+                        } else {
+                            // Zero wind speed, calm
+                            if (config.showWindMetar) {
+                                ssGauge.VRB = ' - METAR: 00000KT';
+                            }
+                            ssGauge.setSection([]);
+                            if (!config.showRoseOnDirGauge) {
+                                ssGauge.setArea([]);
+                            }
+                        }
+                    } else {
+                        ssGauge.VRB = '';
+                    }
+
+                    // optional rose data on direction gauge
+                    if (config.showRoseOnDirGauge && data.WindRoseData) {
+                        // Process rose data
+                        rosePoints = data.WindRoseData.length;
+                        roseSectionAngle = 360 / rosePoints;
+                        // Find total for all directions
+                        for (i = 0; i < rosePoints; i++) {
+                            roseMax = Math.max(roseMax, data.WindRoseData[i]);
+                        }
+                        // Check we actually have some data, bad things happen if roseMax=0!
+                        if (roseMax > 0) {
+                            // Find relative value for each point, and create a gauge area for it
+                            for (i = 0; i < rosePoints; i++) {
+                                roseAreas[i] = steelseries.Section(
+                                    i * roseSectionAngle - roseSectionAngle / 2,
+                                    (i + 1) * roseSectionAngle - roseSectionAngle / 2,
+                                    'rgba(' + gradient('2020D0', 'D04040', data.WindRoseData[i] / roseMax) + ',' +
+                                    (data.WindRoseData[i] / roseMax).toFixed(2) + ')'
+                                );
+                            }
+                        }
+                        ssGauge.setArea(roseAreas);
+                    }
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = strings.latest_title + ' ' + strings.bearing_info + ': ' + cache.valueLatest + '° (' + getord(+cache.valueLatest) + ')' +
+                              ssGauge.VRB + '<br>' + strings.tenminavg_web + ' ' + strings.bearing_info + ': ' + cache.valueAverage + '° (' +
+                              getord(+cache.valueAverage) + '), ' + strings.dominant_bearing + ': ' + data.domwinddir;
+                        if (!config.showRoseGauge) {
+                            // Wind run is shown on the wind rose if it is available
+                            tip += '<br>' + strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun;
+                        }
+                        $('#imgtip7_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[7] !== null) {
+                        $('#imgtip7_img').attr('src', config.imgPathURL + config.tipImgs[7] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Wind Rose Gauge
+        //
+        singleRose = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+
+            var buffers = {};   // Stores references to the various canvas buffers
+            var cache = {};     // various parameters to store for the life time of gauge
+            var ctxRoseCanvas;  // 2D context for the plotted gauge
+
+            cache.firstRun = true;
+            cache.odoDigits = 5;  // Total number of odometer digits including the decimal
+
+            function init() {
+                var div, roseCanvas;
+                // Get the context of the gauge canvas on the HTML page
+                if ($('#canvas_rose').length) {
+                    cache.gaugeSize = Math.ceil($('#canvas_rose').width() * config.gaugeScaling);
+                    cache.gaugeSize2 = cache.gaugeSize / 2;
+                    cache.showOdo = config.showRoseGaugeOdo || false;
+
+                    cache.compassStrings = strings.compass;
+                    cache.titleString = strings.windrose;
+                    cache.gaugeOdoTitle = strings.km;
+
+                    // Create a hidden div to host the Rose plot
+                    div = document.createElement('div');
+                    div.style.display = 'none';
+                    document.body.appendChild(div);
+
+                    // Calcuate the size of the gauge background and so the size of rose plot required
+                    cache.plotSize = Math.floor(cache.gaugeSize * 0.68);
+                    cache.plotSize2 = cache.plotSize / 2;
+
+                    // rose plot canvas buffer
+                    buffers.plot = document.createElement('canvas');
+                    buffers.plot.width = cache.plotSize;
+                    buffers.plot.height = cache.plotSize;
+                    buffers.plot.id = 'rosePlot';
+                    buffers.ctxPlot = buffers.plot.getContext('2d');
+                    div.appendChild(buffers.plot);
+
+                    // Create a steelseries gauge frame
+                    buffers.frame = document.createElement('canvas');
+                    buffers.frame.width = cache.gaugeSize;
+                    buffers.frame.height = cache.gaugeSize;
+                    buffers.ctxFrame = buffers.frame.getContext('2d');
+                    steelseries.drawFrame(
+                        buffers.ctxFrame,
+                        gaugeGlobals.frameDesign,
+                        cache.gaugeSize2,
+                        cache.gaugeSize2,
+                        cache.gaugeSize,
+                        cache.gaugeSize
+                    );
+
+                    // Create a steelseries gauge background
+                    buffers.background = document.createElement('canvas');
+                    buffers.background.width = cache.gaugeSize;
+                    buffers.background.height = cache.gaugeSize;
+                    buffers.ctxBackground = buffers.background.getContext('2d');
+                    steelseries.drawBackground(
+                        buffers.ctxBackground,
+                        gaugeGlobals.background,
+                        cache.gaugeSize2,
+                        cache.gaugeSize2,
+                        cache.gaugeSize,
+                        cache.gaugeSize
+                    );
+
+                    // Optional - add a background image
+                    /*
+                    if (g_imgSmall !== null) {
+                        var drawSize = g_size * 0.831775;
+                        var x = (g_size - drawSize) / 2;
+                        buffers.ctxBackground.drawImage(g_imgSmall, x, x, cache.gaugeSize, cache.gaugeSize);
+                    }
+                    */
+                    // Add the compass points
+                    drawCompassPoints(buffers.ctxBackground, cache.gaugeSize);
+
+                    // Create a steelseries gauge foreground
+                    buffers.foreground = document.createElement('canvas');
+                    buffers.foreground.width = cache.gaugeSize;
+                    buffers.foreground.height = cache.gaugeSize;
+                    buffers.ctxForeground = buffers.foreground.getContext('2d');
+                    steelseries.drawForeground(
+                        buffers.ctxForeground,
+                        gaugeGlobals.foreground,
+                        cache.gaugeSize,
+                        cache.gaugeSize,
+                        false
+                    );
+
+                    roseCanvas = document.getElementById('canvas_rose');
+                    ctxRoseCanvas = roseCanvas.getContext('2d');
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_rose').css({width: cache.gaugeSize + 'px', height: cache.gaugeSize + 'px'});
+                    }
+                    // resize canvas on main page
+                    roseCanvas.width = cache.gaugeSize;
+                    roseCanvas.height = cache.gaugeSize;
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_rose').css(gaugeShadow(cache.gaugeSize));
+                    }
+
+                    // Render an empty gauge, looks better than just the shadow background and odometer ;)
+                    // Paint the gauge frame
+                    ctxRoseCanvas.drawImage(buffers.frame, 0, 0);
+
+                    // Paint the gauge background
+                    ctxRoseCanvas.drawImage(buffers.background, 0, 0);
+
+                    // Paint the gauge foreground
+                    ctxRoseCanvas.drawImage(buffers.foreground, 0, 0);
+
+                    // Create an odometer
+                    if (cache.showOdo) {
+                        cache.odoHeight = Math.ceil(cache.gaugeSize * 0.08); // Sets the size of the odometer
+                        cache.odoWidth = Math.ceil(Math.floor(cache.odoHeight * 0.68) * cache.odoDigits);  // 'Magic' number, do not alter
+                        // Create a new canvas for the oodometer
+                        buffers.Odo = document.createElement('canvas');
+                        $(buffers.Odo).attr({
+                            id    : 'canvas_odo',
+                            width : cache.odoWidth,
+                            height: cache.odoHeight
+                        });
+                        // Position it
+                        $(buffers.Odo).attr('class', 'odo');
+                        // Insert it into the DOM before the Rose gauge
+                        $(buffers.Odo).insertBefore('#canvas_rose');
+                        // Create the odometer
+                        ssGauge = new steelseries.Odometer('canvas_odo', {
+                            height  : cache.odoHeight,
+                            digits  : cache.odoDigits - 1,
+                            decimals: 1
+                        });
+                    }
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                cache.firstRun = false;
+
+                function update() {
+                    var rose, offset;
+
+                    if (ctxRoseCanvas && !cache.firstRun) {
+                        // Clear the gauge
+                        ctxRoseCanvas.clearRect(0, 0, cache.gaugeSize, cache.gaugeSize);
+
+                        // Clear the existing rose plot
+                        buffers.ctxPlot.clearRect(0, 0, cache.plotSize, cache.plotSize);
+
+                        // Create a new rose plot
+                        rose = new RGraph.Rose('rosePlot', data.WindRoseData);
+                        rose.Set('chart.strokestyle', 'black');
+                        rose.Set('chart.background.axes.color', 'gray');
+                        rose.Set('chart.colors.alpha', 0.5);
+                        rose.Set('chart.colors', ['Gradient(#408040:red:#7070A0)']);
+                        rose.Set('chart.margin', Math.ceil(40 / data.WindRoseData.length));
+
+                        rose.Set('chart.title', cache.titleString);
+                        rose.Set('chart.title.size', Math.ceil(0.05 * cache.plotSize));
+                        rose.Set('chart.title.bold', false);
+                        rose.Set('chart.title.color', gaugeGlobals.background.labelColor.getRgbColor());
+                        rose.Set('chart.gutter.top', 0.2 * cache.plotSize);
+                        rose.Set('chart.gutter.bottom', 0.2 * cache.plotSize);
+
+                        rose.Set('chart.tooltips.effect', 'snap');
+                        rose.Set('chart.labels.axes', '');
+                        rose.Set('chart.background.circles', true);
+                        rose.Set('chart.background.grid.spokes', 16);
+                        rose.Set('chart.radius', cache.plotSize2);
+                        rose.Draw();
+
+                        // Add title to windrun odometer to the plot
+                        if (cache.showOdo) {
+                            drawOdoTitle(buffers.ctxPlot);
+                        }
+
+                        // Paint the gauge frame
+                        ctxRoseCanvas.drawImage(buffers.frame, 0, 0);
+
+                        // Paint the gauge background
+                        ctxRoseCanvas.drawImage(buffers.background, 0, 0);
+
+                        // Paint the rose plot
+                        offset = Math.floor(cache.gaugeSize2 - cache.plotSize2);
+                        ctxRoseCanvas.drawImage(buffers.plot, offset, offset);
+
+                        // Paint the gauge foreground
+                        ctxRoseCanvas.drawImage(buffers.foreground, 0, 0);
+
+                        // update the odometer
+                        if (cache.showOdo) {
+                            ssGauge.setValueAnimated(extractDecimal(data.windrun));
+                        }
+
+                        // update tooltip
+                        if (ddimgtooltip.showTips) {
+                            $('#imgtip10_txt').html(
+                                strings.dominant_bearing + ': ' + data.domwinddir + '<br>' +
+                                strings.windruntoday + ': ' + data.windrun + ' ' + displayUnits.windrun
+                            );
+                        }
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[10] !== null) {
+                        $('#imgtip10_img').attr('src', config.imgPathURL + config.tipImgs[10] + cacheDefeat);
+                    }
+                }
+
+                // Helper function to put the compass points on the background
+                function drawCompassPoints(ctx, size) {
+                    ctx.save();
+                    // set the font
+                    ctx.font = 0.08 * size + 'px serif';
+                    ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor();
+                    ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbColor();
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+
+                    // Draw the compass points
+                    for (var i = 0; i < 4; i++) {
+                        ctx.translate(size / 2, size * 0.125);
+                        ctx.fillText(cache.compassStrings[i * 2], 0, 0, size);
+                        ctx.translate(-size / 2, -size * 0.125);
+                        // Move to center
+                        ctx.translate(size / 2, size / 2);
+                        ctx.rotate(Math.PI / 2);
+                        ctx.translate(-size / 2, -size / 2);
+                    }
+                    ctx.restore();
+                }
+
+                function drawOdoTitle(ctx) {
+                    ctx.save();
+                    ctx.textAlign = 'center';
+                    ctx.textBaseline = 'middle';
+                    ctx.font = 0.05 * cache.gaugeSize + 'px Arial,Verdana,sans-serif';
+                    ctx.strokeStyle = gaugeGlobals.background.labelColor.getRgbaColor();
+                    ctx.fillStyle = gaugeGlobals.background.labelColor.getRgbaColor();
+                    ctx.fillText(cache.gaugeOdoTitle, cache.plotSize2, cache.plotSize * 0.75, cache.plotSize * 0.5);
+                    ctx.restore();
+                }
+
+                function setTitle(newTitle) {
+                    cache.titleString = newTitle;
+                }
+
+                function setOdoTitle(newTitle) {
+                    cache.gaugeOdoTitle = newTitle;
+                }
+
+                function setCompassStrings(newArray) {
+                    cache.compassStrings = newArray;
+                    if (!cache.firstRun) {
+                        // Redraw the background
+                        steelseries.drawBackground(
+                            buffers.ctxBackground,
+                            gaugeGlobals.background,
+                            cache.gaugeSize2,
+                            cache.gaugeSize2,
+                            cache.gaugeSize,
+                            cache.gaugeSize
+                        );
+                        // Add the compass points
+                        drawCompassPoints(buffers.ctxBackground, cache.gaugeSize);
+                    }
+                }
+
+                return {
+                    update           : update,
+                    gauge            : ssGauge,
+                    drawCompassPoints: drawCompassPoints,
+                    setTitle         : setTitle,
+                    setCompassStrings: setCompassStrings,
+                    setOdoTitle      : setOdoTitle
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the UV-Index Gauge
+        //
+        singleUV = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define UV start values
+                cache.value = 0.0001;
+                cache.sections = [
+                    steelseries.Section(0, 2.9, '#289500'),
+                    steelseries.Section(2.9, 5.8, '#f7e400'),
+                    steelseries.Section(5.8, 7.8, '#f85900'),
+                    steelseries.Section(7.8, 10.9, '#d8001d'),
+                    steelseries.Section(10.9, 20, '#6b49c8')
+                ];
+                // Define value gradient for UV
+                cache.gradient = new steelseries.gradientWrapper(0, 16,
+                    [0, 0.1, 0.19, 0.31, 0.45, 0.625, 1],
+                    [
+                        new steelseries.rgbaColor(0, 200, 0, 1),
+                        new steelseries.rgbaColor(0, 200, 0, 1),
+                        new steelseries.rgbaColor(255, 255, 0, 1),
+                        new steelseries.rgbaColor(248, 89, 0, 1),
+                        new steelseries.rgbaColor(255, 0, 0, 1),
+                        new steelseries.rgbaColor(255, 0, 144, 1),
+                        new steelseries.rgbaColor(153, 140, 255, 1)
+                    ]
+                );
+                cache.useSections = false;
+                cache.useValueGradient = true;
+
+                // create UV bargraph gauge
+                if ($('#canvas_uv').length) {
+                    params.size = Math.ceil($('#canvas_uv').width() * config.gaugeScaling);
+                    params.gaugeType = steelseries.GaugeType.TYPE3;
+                    params.maxValue = gaugeGlobals.uvScaleDefMax;
+                    params.titleString = strings.uv_title;
+                    params.niceScale = false;
+                    params.section = cache.sections;
+                    params.useSectionColors = cache.useSections;
+                    params.valueGradient = cache.gradient;
+                    params.useValueGradient = cache.useValueGradient;
+                    params.lcdDecimals = gaugeGlobals.uvLcdDecimals;
+
+                    ssGauge = new steelseries.RadialBargraph('canvas_uv', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_uv').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_uv').css(gaugeShadow(params.size));
+                    }
+
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var tip, indx;
+
+                    cache.value = extractDecimal(data.UV);
+
+                    if (+cache.value === 0) {
+                        indx = 0;
+                    } else if (cache.value < 2.5) {
+                        indx = 1;
+                    } else if (cache.value < 5.5) {
+                        indx = 2;
+                    } else if (cache.value < 7.5) {
+                        indx = 3;
+                    } else if (cache.value < 10.5) {
+                        indx = 4;
+                    } else {
+                        indx = 5;
+                    }
+
+                    cache.maxValue = Math.max(nextHighest(cache.value, 2), gaugeGlobals.uvScaleDefMax);
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setValue(0);
+                        ssGauge.setMaxValue(cache.maxValue);
+                    }
+
+                    cache.risk = strings.uv_levels[indx];
+                    cache.headLine = strings.uv_headlines[indx];
+                    cache.detail = strings.uv_details[indx];
+                    ssGauge.setUnitString(cache.risk);
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = '<b>' + strings.uv_title + ': ' + cache.value + '</b> - <i>' + strings.solar_maxToday + ': ' + data.UVTH + '</i><br>';
+                        tip += '<i>' + cache.headLine + '</i><br>';
+                        tip += cache.detail;
+                        $('#imgtip8_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[8] !== null) {
+                        $('#imgtip8_img').attr('src', config.imgPathURL + config.tipImgs[8] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Solar Irradiation Gauge
+        //
+        singleSolar = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                // define Solar start values
+                cache.value = 0.0001;
+                cache.sections = [
+                    steelseries.Section(0, 600, 'rgba(40,149,0,0.3)'),
+                    steelseries.Section(600, 800, 'rgba(248,89,0,0.3)'),
+                    steelseries.Section(800, 1000, 'rgba(216,0,29,0.3)'),
+                    steelseries.Section(1000, 1800, 'rgba(107,73,200,0.3)')
+                ];
+
+                // create Solar gauge
+                if ($('#canvas_solar').length) {
+                    params.size = Math.ceil($('#canvas_solar').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.maxValue = gaugeGlobals.solarGaugeScaleMax;
+                    params.titleString = strings.solar_title;
+                    params.unitString = 'W/m\u00B2';
+                    params.niceScale = false;
+                    params.thresholdVisible = false;
+                    params.lcdDecimals = 0;
+
+                    if (config.showSunshineLed) {
+                        params.userLedVisible = true;
+                        params.userLedColor = steelseries.LedColor.YELLOW_LED;
+                    }
+
+                    ssGauge = new steelseries.Radial('canvas_solar', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_solar').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_solar').css(gaugeShadow(params.size));
+                    }
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    var tip, percent;
+
+                    cache.value = +extractInteger(data.SolarRad);
+                    cache.maxToday = extractInteger(data.SolarTM);
+                    cache.currMaxValue = +extractInteger(data.CurrentSolarMax);
+                    percent = (+cache.currMaxValue === 0 ? '--' : Math.round(+cache.value / +cache.currMaxValue * 100));
+
+                    // Need to rescale the gauge?
+                    cache.maxValue = Math.max(cache.value, cache.currMaxValue, cache.maxToday, gaugeGlobals.solarGaugeScaleMax);
+                    cache.maxValue = nextHighest(cache.maxValue, 100);
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        ssGauge.setValue(0);
+                        ssGauge.setMaxValue(cache.maxValue);
+                    }
+
+                    // Set a section (15% of maxScale wide) to show current theoretical max value
+                    if (data.CurrentSolarMax !== 'N/A') {
+                        ssGauge.setArea([
+                            // Sunshine threshold
+                            steelseries.Section(
+                                Math.max(cache.currMaxValue * gaugeGlobals.sunshineThresholdPct / 100, gaugeGlobals.sunshineThreshold),
+                                cache.currMaxValue,
+                                'rgba(255,255,50,0.4)'
+                            ),
+                            // Over max threshold
+                            steelseries.Section(
+                                cache.currMaxValue,
+                                Math.min(cache.currMaxValue + cache.maxValue * 0.15, cache.maxValue),
+                                'rgba(220,0,0,0.5)'
+                            )
+                        ]);
+                    }
+
+                    // Set the values
+                    ssGauge.setMaxMeasuredValue(cache.maxToday);
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (config.showSunshineLed) {
+                        ssGauge.setUserLedOnOff(
+                            percent !== '--' &&
+                            percent >= gaugeGlobals.sunshineThresholdPct &&
+                            +cache.value >= gaugeGlobals.sunshineThreshold
+                        );
+                    }
+
+                    if (ddimgtooltip.showTips) {
+                        // update tooltip
+                        tip = '<b>' + strings.solar_title + ': ' + cache.value + ' W/m²</b> - ' +
+                              '<i>' + percent + '% ' + strings.solar_ofMax + '</i><br>' +
+                              strings.solar_currentMax + ': ' + cache.currMaxValue + ' W/m²';
+                        if (typeof data.SolarTM !== 'undefined') {
+                            tip += '<br>' + strings.solar_maxToday + ': ' + cache.maxToday + ' W/m²';
+                        }
+                        $('#imgtip9_txt').html(tip);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[9] !== null) {
+                        $('#imgtip9_img').attr('src', config.imgPathURL + config.tipImgs[9] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // Singleton for the Cloudbase Gauge
+        //
+        singleCloudBase = (function () {
+            var instance;   // Stores a reference to the Singleton
+            var ssGauge;    // Stores a reference to the SS Gauge
+            var cache = {};      // Stores various config values and parameters
+
+            function init() {
+                var params = $.extend(true, {}, commonParams);
+
+                cache.sections = createCloudBaseSections(true);
+                cache.value = 0.0001;
+                cache.maxValue = gaugeGlobals.cloudScaleDefMaxm;
+
+                // create Cloud base radial gauge
+                if ($('#canvas_cloud').length) {
+                    params.size = Math.ceil($('#canvas_cloud').width() * config.gaugeScaling);
+                    params.section = cache.sections;
+                    params.maxValue = cache.maxValue;
+                    params.titleString = strings.cloudbase_title;
+                    params.unitString = strings.metres;
+                    params.thresholdVisible = false;
+                    params.lcdDecimals = 0;
+
+                    ssGauge = new steelseries.Radial('canvas_cloud', params);
+                    ssGauge.setValue(cache.value);
+
+                    // over-ride CSS applied size?
+                    if (config.gaugeScaling !== 1) {
+                        $('#canvas_cloud').css({width: params.size + 'px', height: params.size + 'px'});
+                    }
+
+                    // add a shadow to the gauge
+                    if (config.showGaugeShadow) {
+                        $('#canvas_cloud').css(gaugeShadow(params.size));
+                    }
+                    // subscribe to data updates
+                    $.subscribe('gauges.dataUpdated', update);
+                    $.subscribe('gauges.graphUpdate', updateGraph);
+                } else {
+                    // cannot draw gauge, return null
+                    return null;
+                }
+
+                function update() {
+                    cache.value = extractInteger(data.cloudbasevalue);
+
+                    if (data.cloudbaseunit === 'm') {
+                        // adjust metre gauge in jumps of 1000 metres, don't downscale during the session
+                        cache.maxValue = Math.max(nextHighest(cache.value, 1000), gaugeGlobals.cloudScaleDefMaxm, cache.maxValue);
+                        if (cache.value <= 1000 && config.roundCloudbaseVal) {
+                            // and round the value to the nearest  10 m
+                            cache.value = Math.round(cache.value / 10) * 10;
+                        } else if (config.roundCloudbaseVal) {
+                            // and round the value to the nearest 50 m
+                            cache.value = Math.round(cache.value / 50) * 50;
+                        }
+                    } else {
+                        // adjust feet gauge in jumps of 2000 ft, don't downscale during the session
+                        cache.maxValue = Math.max(nextHighest(cache.value, 2000), gaugeGlobals.cloudScaleDefMaxft, cache.maxValue);
+                        if (cache.value <= 2000 && config.roundCloudbaseVal) {
+                            // and round the value to the nearest 50 ft
+                            cache.value = Math.round(cache.value / 50) * 50;
+                        } else if (config.roundCloudbaseVal) {
+                            // and round the value to the nearest 100 ft
+                            cache.value = Math.round(cache.value / 100) * 100;
+                        }
+                    }
+
+                    if (cache.maxValue !== ssGauge.getMaxValue()) {
+                        if (ssGauge.getMaxValue() > cache.maxValue) {
+                            // Gauge currently showing more than our max (nice scale effct),
+                            // so reset our max to match
+                            cache.maxValue = ssGauge.getMaxValue();
+                        } else {
+                            // Gauge scale is too low, increase it.
+                            // First set the pointer back to zero so we get a nice animation
+                            ssGauge.setValue(0);
+                            // and redraw the gauge with teh new scale
+                            ssGauge.setMaxValue(cache.maxValue);
+                        }
+                    }
+                    ssGauge.setValueAnimated(cache.value);
+
+                    if (config.showPopupData) {
+                        // static tooltip on cloud gauge
+                        $('#imgtip11_txt').html('<strong>' + strings.cloudbase_popup_title + '</strong><br>' + strings.cloudbase_popup_text);
+                    }
+                } // End of update()
+
+                function updateGraph(evnt, cacheDefeat) {
+                    if (config.tipImgs[11] !== null) {
+                        $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat);
+                    }
+                }
+
+                return {
+                    data  : cache,
+                    update: update,
+                    gauge : ssGauge
+                };
+            } // End of init()
+
+            return {
+                // Get the Singleton instance if one exists
+                // or create one if it doesn't
+                getInstance: function () {
+                    if (!instance) {
+                        instance = init();
+                    }
+                    return instance;
+                }
+            };
+        })(),
+
+        //
+        // getRealtime() fetches the realtimegauges JSON data from the server
+        //
+        getRealtime = function () {
+            var url = config.realTimeURL;
+            if ($.active > 0 && undefined != jqXHR) {
+                // kill any outstanding requests
+                jqXHR.abort();
+            }
+            if (config.longPoll) {
+                url += '?timestamp=' + timestamp;
+            }
+            jqXHR = $.ajax({
+                url     : url,
+                cache   : (config.longPoll),
+                dataType: 'json',
+                timeout : config.longPoll ? (Math.min(config.realtimeInterval, 20) + 21) * 1000 : 21000 // 21 second time-out by default
+            }).done(function (data) {
+                checkRtResp(data);
+            }).fail(function (xhr, status, err) {
+                checkRtError(xhr, status, err);
+            });
+        },
+
+        //
+        // checkRtResp() called by the Ajax fetch once data has been downloaded
+        //
+        checkRtResp = function (response) {
+            var delay;
+            statusTimer.reset(config.longPoll ? 1 : config.realtimeInterval);
+            if (config.longPoll && response.status !== 'OK') {
+                checkRtError(null, 'PHP Error', response.status);
+            } else {
+                if (processData(response)) {
+                    delay = ajaxDelay;
+                } else {
+                    delay = 5;
+                }
+                if (delay > 0) {
+                    downloadTimer = setTimeout(getRealtime, delay * 1000);
+                } else {
+                    getRealtime();
+                }
+            }
+        },
+
+        //
+        // checkRtError() called by the Ajax fetch if an error occurs during the fetching realtimegauges.txt
+        //
+        checkRtError = function (xhr, status, error) {
+            if (xhr == null || xhr.statusText !== 'abort') {
+                // Clear any existing download timer
+                clearTimeout(downloadTimer);
+                // Set the status LED to off
+                ledIndicator.setLedOnOff(false);
+                ledIndicator.setTitle(strings.led_title_unknown);
+                statusScroller.setText(status + ': ' + error);
+                // wait 5 seconds, then try again...
+                downloadTimer = setTimeout(getRealtime, 5000);
+            }
+        },
+
+        //
+        // processData() massages the data returned in realtimegauges.txt, and posts a gauges.dataUpdated event to update the page
+        //
+        processData = function (dataObj) {
+            var str, dt, tm, today, now, then, tmp, elapsedMins, retVal;
+            // copy the realtime fields into the global 'data' object
+            if (config.longPoll) {
+                timestamp = dataObj.timestamp;
+                data = dataObj.data;
+            } else {
+                // normal polling
+                data = dataObj;
+            }
+
+            // and check we have the expected version number
+            if (typeof data.ver !== 'undefined' && data.ver >= realtimeVer) {
+                // manpulate the last rain time into something more friendly
+                try {
+                    str = data.LastRainTipISO.split(' ');
+                    dt = str[0].replace(/\//g, '-').split('-');  // WD uses dd/mm/yyyy, we use a '-'
+                    tm = str[1].split(':');
+                    today = new Date();
+                    today.setHours(0, 0, 0, 0);
+                    if (typeof data.dateFormat === 'undefined') {
+                        data.dateFormat = 'y/m/d';
+                    } else {
+                        // frig for WD bug which leaves a trailing % character from the tag
+                        data.dateFormat = data.dateFormat.replace('%', '');
+                    }
+                    if (data.dateFormat === 'y/m/d') {
+                        // ISO/Cumulus format
+                        then = new Date(dt[0], dt[1] - 1, dt[2], tm[0], tm[1], 0, 0);
+                    } else if (data.dateFormat === 'd/m/y') {
+                        then = new Date(dt[2], dt[1] - 1, dt[0], tm[0], tm[1], 0, 0);
+                    } else { // m/d/y
+                        then = new Date(dt[2], dt[0] - 1, dt[1], tm[0], tm[1], 0, 0);
+                    }
+                    if (then.getTime() >= today.getTime()) {
+                        data.LastRained = strings.LastRainedT_info + ' ' + str[1];
+                    } else if (then.getTime() + 86400000 >= today.getTime()) {
+                        data.LastRained = strings.LastRainedY_info + ' ' + str[1];
+                    } else {
+                        data.LastRained = then.getDate().toString() + ' ' + strings.months[then.getMonth()] + ' ' + strings.at + ' ' + str[1];
+                    }
+                } catch (e) {
+                    data.LastRained = data.LastRainTipISO;
+                }
+                if (data.tempunit.length > 1) {
+                    // clean up temperature units - remove html encoded degree symbols
+                    data.tempunit = data.tempunit.replace(/&\S*;/, '°');  // old Cumulus versions uses &deg;, WeatherCat uses &#176;
+                } else {
+                    // using new realtimegaugesT.txt with Cumulus > 1.9.2
+                    data.tempunit = '°' + data.tempunit;
+                }
+
+                // Check for station off-line
+                now = Date.now();
+                tmp = data.timeUTC.split(',');
+                sampleDate = Date.UTC(tmp[0], tmp[1] - 1, tmp[2], tmp[3], tmp[4], tmp[5]);
+                if (now - sampleDate > config.stationTimeout * 60 * 1000) {
+                    elapsedMins = Math.floor((now - sampleDate) / (1000 * 60));
+                    // the realtimegauges.txt file isn't being updated
+                    ledIndicator.setLedColor(steelseries.LedColor.RED_LED);
+                    ledIndicator.setTitle(strings.led_title_offline);
+                    ledIndicator.blink(true);
+                    if (elapsedMins < 120) {
+                        // up to 2 hours ago
+                        tm = elapsedMins.toString() + ' ' + strings.StatusMinsAgo;
+                    } else if (elapsedMins < 2 * 24 * 60) {
+                        // up to 48 hours ago
+                        tm = Math.floor(elapsedMins / 60).toString() + ' ' + strings.StatusHoursAgo;
+                    } else {
+                        // days ago!
+                        tm = Math.floor(elapsedMins / (60 * 24)).toString() + ' ' + strings.StatusDaysAgo;
+                    }
+                    data.forecast = strings.led_title_offline + ' ' + strings.StatusLastUpdate + ' ' + tm;
+                } else if (+data.SensorContactLost === 1) {
+                    // Fine Offset sensor status
+                    ledIndicator.setLedColor(steelseries.LedColor.RED_LED);
+                    ledIndicator.setTitle(strings.led_title_lost);
+                    ledIndicator.blink(true);
+                    data.forecast = strings.led_title_lost;
+                } else {
+                    ledIndicator.setLedColor(steelseries.LedColor.GREEN_LED);
+                    ledIndicator.setTitle(strings.led_title_ok + '. ' + strings.StatusLastUpdate + ': ' + data.date);
+                    ledIndicator.blink(false);
+                    ledIndicator.setLedOnOff(true);
+                }
+
+                // de-encode the forecast string if required (Cumulus support for extended characters)
+                data.forecast = $('<div/>').html(data.forecast).text();
+                data.forecast = data.forecast.trim();
+
+                data.pressunit = data.pressunit.trim();  // WView sends ' in', ' mb', or ' hPa'
+                if (data.pressunit === 'in') {  // Cumulus and WView send 'in'
+                    data.pressunit = 'inHg';
+                }
+
+                data.windunit = data.windunit.trim(); // WView sends ' kmh' etc
+                data.windunit = data.windunit.toLowerCase(); // WeatherCat sends "MPH"
+                if (data.windunit === 'knots') {             // WeatherCat/weewx send "Knots", we use "kts"
+                    data.windunit = 'kts';
+                }
+
+                if (data.windunit === 'kmh' || data.windunit === 'kph') {  // WD wind unit omits '/', weewx sends 'kph'
+                    data.windunit = 'km/h';
+                }
+
+                data.rainunit = data.rainunit.trim(); // WView sends ' mm' etc
+
+                // take a look at the cloud base data...
+                // change WeatherCat units from Metres/Feet to m/ft
+                try {
+                    if (data.cloudbaseunit.toLowerCase() === 'metres') {
+                        data.cloudbaseunit = 'm';
+                    } else if (data.cloudbaseunit.toLowerCase() === 'feet') {
+                        data.cloudbaseunit = 'ft';
+                    }
+                } catch (e) {
+                    data.cloudbaseunit = '';
+                }
+                if (config.showCloudGauge && (
+                    (config.weatherProgram === 4 || config.weatherProgram === 5) ||
+                    data.cloudbasevalue === '')) {
+                    // WeatherCat and VWS (and WView?) do not provide a cloud base value, so we have to calculate it...
+                    // assume if the station uses an imperial wind speed they want cloud base in feet, otherwise metres
+                    data.cloudbaseunit = (data.windunit === 'mph' || data.windunit === 'kts') ? 'ft' : 'm';
+                    data.cloudbasevalue = calcCloudbase(data.temp, data.tempunit, data.dew, data.cloudbaseunit);
+                }
+
+                // Temperature data conversion for display required?
+                if (data.tempunit[1] !== displayUnits.temp && userUnitsSet) {
+                    // temp needs converting
+                    if (data.tempunit[1] === 'C') {
+                        convTempData(c2f);
+                    } else {
+                        convTempData(f2c);
+                    }
+                } else if (firstRun) {
+                    displayUnits.temp = data.tempunit[1];
+                    setRadioCheck('rad_unitsTemp', displayUnits.temp);
+                }
+
+                // Rain data conversion for display required?
+                if (data.rainunit !== displayUnits.rain && userUnitsSet) {
+                    // rain needs converting
+                    convRainData(displayUnits.rain === 'mm' ? in2mm : mm2in);
+                } else if (firstRun) {
+                    displayUnits.rain = data.rainunit;
+                    setRadioCheck('rad_unitsRain', displayUnits.rain);
+                }
+
+                // Wind data conversion for display required?
+                if (data.windunit !== displayUnits.wind && userUnitsSet) {
+                    // wind needs converting
+                    convWindData(data.windunit, displayUnits.wind);
+                } else if (firstRun) {
+                    displayUnits.wind = data.windunit;
+                    displayUnits.windrun = getWindrunUnits(data.windunit);
+                    setRadioCheck('rad_unitsWind', displayUnits.wind);
+                }
+
+                // Pressure data conversion for display required?
+                if (data.pressunit !== displayUnits.press && userUnitsSet) {
+                    convBaroData(data.pressunit, displayUnits.press);
+                } else if (firstRun) {
+                    displayUnits.press = data.pressunit;
+                    setRadioCheck('rad_unitsPress', displayUnits.press);
+                }
+
+                // Cloud height data conversion for display required?
+                if (data.cloudbaseunit !== displayUnits.cloud && userUnitsSet) {
+                    // Cloud height needs converting
+                    convCloudBaseData(displayUnits.cloud === 'm' ? ft2m : m2ft);
+                } else if (firstRun) {
+                    displayUnits.cloud = data.cloudbaseunit;
+                    setRadioCheck('rad_unitsCloud', displayUnits.cloud);
+                }
+
+                statusScroller.setText(data.forecast);
+
+                // first time only, setup units etc
+                if (firstRun) {
+                    doFirst();
+                }
+
+                // publish the update, use the shared data object rather than transferring it
+                $.publish('gauges.dataUpdated', {});
+
+                retVal = true;
+            } else {
+                // set an error message
+                if (data.ver < realtimeVer) {
+                    statusTimer.setValue(0);
+                    statusScroller.setText('Your ' + config.realTimeURL.substr(config.realTimeURL.lastIndexOf('/') + 1) + ' file template needs updating!');
+                    return false;
+                } else {
+                    // oh-oh! The number of data fields isn't what we expected
+                    statusScroller.setText(strings.realtimeCorrupt);
+                }
+                ledIndicator.setLedOnOff(false);
+                ledIndicator.setTitle(strings.led_title_unknown);
+
+                retVal = false;
+            }
+            return retVal;
+        },
+
+        //
+        // pagetimeout() called once every config.pageUpdateLimit minutes to stop updates and prevent page 'sitters'
+        //
+        pageTimeout = function () {
+            statusScroller.setText(strings.StatusPageLimit);
+            ledIndicator.setLedColor(steelseries.LedColor.RED_LED);
+            ledIndicator.setTitle(strings.StatusPageLimit);
+            ledIndicator.blink(true);
+            ledIndicator.setTitle(strings.StatusTimeout);
+
+            // stop any pending download
+            clearTimeout(downloadTimer);
+
+            // stop any long polling in progress
+            if ($.active > 0) {
+                jqXHR.abort();
+            }
+
+            // stop the clock
+            clearInterval(tickTockInterval);
+
+            // clear the timer display
+            statusTimer.setValue(0);
+
+            // set an onclick event on the LED to restart everything
+            $('#canvas_led').click(
+                function click() {
+                    // disable the onClick event again
+                    $('#canvas_led').unbind('click');
+                    // reset the timer count to 1
+                    statusTimer.reset(1);
+                    // restart the timer to update the status time
+                    tickTockInterval = setInterval(
+                        function tick() {
+                            $.publish('gauges.clockTick', null);
+                        },
+                        1000
+                    );
+
+                    // restart the page timeout timer, so we hit this code again
+                    setTimeout(pageTimeout, config.pageUpdateLimit * 60 * 1000);
+
+                    // refresh the page data
+                    getRealtime();
+                }
+            );
+        },
+
+        //
+        // doFirst() called by doUpdate() the first time the page is updated to set-up various things that are
+        // only known when the realtimegauges.txt data is available
+        //
+        doFirst = function () {
+            var cacheDefeat = '?' + (new Date()).getTime().toString();
+
+            if (data.tempunit[1] === 'F') {
+                displayUnits.temp = 'F';
+                setRadioCheck('rad_unitsTemp', 'F');
+                setTempUnits(false);
+            }
+
+            if (data.pressunit !== 'hPa') {
+                displayUnits.press = data.pressunit;
+                setRadioCheck('rad_unitsPress', data.pressunit);
+                setBaroUnits(data.pressunit);
+            }
+
+            if (data.windunit !== 'km/h') {
+                displayUnits.wind = data.windunit;
+                setRadioCheck('rad_unitsWind', data.windunit);
+                setWindUnits(data.windunit);
+            }
+
+            if (data.rainunit !== 'mm') {
+                displayUnits.rain = data.rainunit;
+                setRadioCheck('rad_unitsRain', data.rainunit);
+                setRainUnits(false);
+            }
+
+            if (config.showSolarGauge && typeof data.SolarTM !== 'undefined' && gaugeSolar) {
+                gaugeSolar.gauge.setMaxMeasuredValueVisible(true);
+            }
+
+            if (config.showCloudGauge && data.cloudbaseunit !== 'm') {
+                displayUnits.cloud = data.cloudbaseunit;
+                setRadioCheck('rad_unitsCloud', data.cloudbaseunit);
+                setCloudBaseUnits(false);
+            }
+
+            // set the script version on the page
+            $('#scriptVer').html(config.scriptVer);
+            // set the version information from the station
+            $('#programVersion').html(data.version);
+            $('#programBuild').html(data.build);
+            $('#programName').html(programLink[config.weatherProgram]);
+
+            if (config.showPopupData) {
+                // now initialise the pop-up script and download the trend images
+                // - has to be done here as doFirst may remove elements from the page
+                // - and we delay the download of the images speeding up page display
+                ddimgtooltip.init('[id^="tip_"]');
+                // Are we running on a phone device (or really low res screen)?
+                if ($(window).width() < 480) {
+                    $('.ddimgtooltip').filter(':hidden').width('200px');
+                }
+            }
+
+            if (config.showPopupData && config.showPopupGraphs) {
+                // now download the trend images
+                // - has to be done here as doFirst may remove elements from the page
+                // - and we delay the download of the images speeding up page display
+                //
+                $('#imgtip0_img').attr('src', config.imgPathURL + config.tipImgs[0][0] + cacheDefeat);
+                if (gaugeDew) {
+                    $('#imgtip1_img').attr('src', config.imgPathURL + config.tipImgs[1][gaugeDew.data.popupImg] + cacheDefeat);
+                }
+                $('#imgtip2_img').attr('src', config.imgPathURL + config.tipImgs[2] + cacheDefeat);
+                $('#imgtip3_img').attr('src', config.imgPathURL + config.tipImgs[3] + cacheDefeat);
+                $('#imgtip4_img').attr('src', config.imgPathURL + config.tipImgs[4][0] + cacheDefeat);
+                $('#imgtip5_img').attr('src', config.imgPathURL + config.tipImgs[5] + cacheDefeat);
+                $('#imgtip6_img').attr('src', config.imgPathURL + config.tipImgs[6] + cacheDefeat);
+                $('#imgtip7_img').attr('src', config.imgPathURL + config.tipImgs[7] + cacheDefeat);
+                $('#imgtip8_img').attr('src', config.imgPathURL + config.tipImgs[8] + cacheDefeat);
+                $('#imgtip9_img').attr('src', config.imgPathURL + config.tipImgs[9] + cacheDefeat);
+                $('#imgtip10_img').attr('src', config.imgPathURL + config.tipImgs[10] + cacheDefeat);
+                $('#imgtip11_img').attr('src', config.imgPathURL + config.tipImgs[11] + cacheDefeat);
+                // start a timer for popup graphic updates
+                setInterval(
+                    function timeout() {
+                        $.publish('gauges.graphUpdate', '?' + (new Date()).getTime().toString());
+                    },
+                    config.graphUpdateTime * 60 * 1000
+                );
+            }
+
+            firstRun = false;
+        },
+
+        //
+        // createTempSections() creates an array of gauge sections appropriate for Celsius or Fahrenheit scales
+        //
+        createTempSections = function (celsius) {
+            var section;
+            if (celsius) {
+                section = [
+                    steelseries.Section(-100, -35, 'rgba(195, 92, 211, 0.4)'),
+                    steelseries.Section(-35, -30, 'rgba(139, 74, 197, 0.4)'),
+                    steelseries.Section(-30, -25, 'rgba(98, 65, 188, 0.4)'),
+                    steelseries.Section(-25, -20, 'rgba(62, 66, 185, 0.4)'),
+                    steelseries.Section(-20, -15, 'rgba(42, 84, 194, 0.4)'),
+                    steelseries.Section(-15, -10, 'rgba(25, 112, 210, 0.4)'),
+                    steelseries.Section(-10, -5, 'rgba(9, 150, 224, 0.4)'),
+                    steelseries.Section(-5, 0, 'rgba(2, 170, 209, 0.4)'),
+                    steelseries.Section(0, 5, 'rgba(0, 162, 145, 0.4)'),
+                    steelseries.Section(5, 10, 'rgba(0, 158, 122, 0.4)'),
+                    steelseries.Section(10, 15, 'rgba(54, 177, 56, 0.4)'),
+                    steelseries.Section(15, 20, 'rgba(111, 202, 56, 0.4)'),
+                    steelseries.Section(20, 25, 'rgba(248, 233, 45, 0.4)'),
+                    steelseries.Section(25, 30, 'rgba(253, 142, 42, 0.4)'),
+                    steelseries.Section(30, 40, 'rgba(236, 45, 45, 0.4)'),
+                    steelseries.Section(40, 100, 'rgba(245, 109, 205, 0.4)')
+                ];
+            } else {
+                section = [
+                    steelseries.Section(-200, -30, 'rgba(195, 92, 211, 0.4)'),
+                    steelseries.Section(-30, -25, 'rgba(139, 74, 197, 0.4)'),
+                    steelseries.Section(-25, -15, 'rgba(98, 65, 188, 0.4)'),
+                    steelseries.Section(-15, -5, 'rgba(62, 66, 185, 0.4)'),
+                    steelseries.Section(-5, 5, 'rgba(42, 84, 194, 0.4)'),
+                    steelseries.Section(5, 15, 'rgba(25, 112, 210, 0.4)'),
+                    steelseries.Section(15, 25, 'rgba(9, 150, 224, 0.4)'),
+                    steelseries.Section(25, 32, 'rgba(2, 170, 209, 0.4)'),
+                    steelseries.Section(32, 40, 'rgba(0, 162, 145, 0.4)'),
+                    steelseries.Section(40, 50, 'rgba(0, 158, 122, 0.4)'),
+                    steelseries.Section(50, 60, 'rgba(54, 177, 56, 0.4)'),
+                    steelseries.Section(60, 70, 'rgba(111, 202, 56, 0.4)'),
+                    steelseries.Section(70, 80, 'rgba(248, 233, 45, 0.4)'),
+                    steelseries.Section(80, 90, 'rgba(253, 142, 42, 0.4)'),
+                    steelseries.Section(90, 110, 'rgba(236, 45, 45, 0.4)'),
+                    steelseries.Section(110, 200, 'rgba(245, 109, 205, 0.4)')
+                ];
+            }
+            return section;
+        },
+
+        //
+        // createRainSections() returns an array of section highlights for the Rain Rate gauge
+        //
+        /*
+          Assumes 'standard' descriptive limits from UK met office:
+           < 0.25 mm/hr - Very light rain
+           0.25mm/hr to 1.0mm/hr - Light rain
+           1.0 mm/hr to 4.0 mm/hr - Moderate rain
+           4.0 mm/hr to 16.0 mm/hr - Heavy rain
+           16.0 mm/hr to 50 mm/hr - Very heavy rain
+           > 50.0 mm/hour - Extreme rain
+
+           Roughly translated to the corresponding Inch rates
+           < 0.001
+           0.001 to 0.05
+           0.05 to 0.20
+           0.20 to 0.60
+           0.60 to 2.0
+           > 2.0
+        */
+        createRainRateSections = function (metric) {
+            var factor = metric ? 1 : 1 / 25;
+            return [
+                steelseries.Section(0, 0.25 * factor, 'rgba(0, 140, 0, 0.5)'),
+                steelseries.Section(0.25 * factor, 1 * factor, 'rgba(80, 192, 80, 0.5)'),
+                steelseries.Section(1 * factor, 4 * factor, 'rgba(150, 203, 150, 0.5)'),
+                steelseries.Section(4 * factor, 16 * factor, 'rgba(212, 203, 109, 0.5)'),
+                steelseries.Section(16 * factor, 50 * factor, 'rgba(225, 155, 105, 0.5)'),
+                steelseries.Section(50 * factor, 1000 * factor, 'rgba(245, 86, 59, 0.5)')
+            ];
+        },
+
+        //
+        // createRainFallSections()returns an array of section highlights for total rainfall in mm or inches
+        //
+        createRainfallSections = function (metric) {
+            var factor = metric ? 1 : 1 / 25;
+            return [
+                steelseries.Section(0, 5 * factor, 'rgba(0, 250, 0, 1)'),
+                steelseries.Section(5 * factor, 10 * factor, 'rgba(0, 250, 117, 1)'),
+                steelseries.Section(10 * factor, 25 * factor, 'rgba(218, 246, 0, 1)'),
+                steelseries.Section(25 * factor, 40 * factor, 'rgba(250, 186, 0, 1)'),
+                steelseries.Section(40 * factor, 50 * factor, 'rgba(250, 95, 0, 1)'),
+                steelseries.Section(50 * factor, 65 * factor, 'rgba(250, 0, 0, 1)'),
+                steelseries.Section(65 * factor, 75 * factor, 'rgba(250, 6, 80, 1)'),
+                steelseries.Section(75 * factor, 100 * factor, 'rgba(205, 18, 158, 1)'),
+                steelseries.Section(100 * factor, 125 * factor, 'rgba(0, 0, 250, 1)'),
+                steelseries.Section(125 * factor, 500 * factor, 'rgba(0, 219, 212, 1)')
+            ];
+        },
+
+        //
+        // createRainfallGradient() returns an array of SS colours for continuous gradient colouring of the total rainfall LED gauge
+        //
+        createRainfallGradient = function (metric) {
+            var grad = new steelseries.gradientWrapper(
+                0,
+                (metric ? 100 : 4),
+                [0, 0.1, 0.62, 1],
+                [
+                    new steelseries.rgbaColor(15, 148, 0, 1),
+                    new steelseries.rgbaColor(213, 213, 0, 1),
+                    new steelseries.rgbaColor(213, 0, 25, 1),
+                    new steelseries.rgbaColor(250, 0, 0, 1)
+                ]
+            );
+            return grad;
+        },
+
+        //
+        // createClousBaseSections() returns an array of section highlights for the Cloud Base gauge
+        //
+        createCloudBaseSections = function (metric) {
+            var section;
+            if (metric) {
+                section = [
+                    steelseries.Section(0, 150, 'rgba(245, 86, 59, 0.5)'),
+                    steelseries.Section(150, 300, 'rgba(225, 155, 105, 0.5)'),
+                    steelseries.Section(300, 750, 'rgba(212, 203, 109, 0.5)'),
+                    steelseries.Section(750, 1000, 'rgba(150, 203, 150, 0.5)'),
+                    steelseries.Section(1000, 1500, 'rgba(80, 192, 80, 0.5)'),
+                    steelseries.Section(1500, 2500, 'rgba(0, 140, 0, 0.5)'),
+                    steelseries.Section(2500, 5500, 'rgba(19, 103, 186, 0.5)')
+                ];
+            } else {
+                section = [
+                    steelseries.Section(0, 500, 'rgba(245, 86, 59, 0.5)'),
+                    steelseries.Section(500, 1000, 'rgba(225, 155, 105, 0.5)'),
+                    steelseries.Section(1000, 2500, 'rgba(212, 203, 109, 0.5)'),
+                    steelseries.Section(2500, 3500, 'rgba(150, 203, 150, 0.5)'),
+                    steelseries.Section(3500, 5500, 'rgba(80, 192, 80, 0.5)'),
+                    steelseries.Section(5500, 8500, 'rgba(0, 140, 0, 0.5)'),
+                    steelseries.Section(8500, 18000, 'rgba(19, 103, 186, 0.5)')
+                ];
+            }
+            return section;
+        },
+
+        //
+        // --------------- Helper functions ------------------
+        //
+
+        //
+        // getord() converts a value in degrees (0-360) into a localised compass point (N, ENE, NE, etc)
+        //
+        getord = function (deg) {
+            if (deg === 0) {
+                // Special case, 0=No wind, 360=North
+                return strings.calm;
+            } else {
+                return (strings.coords[Math.floor((deg + 11.25) / 22.5) % 16]);
+            }
+        },
+
+        //
+        // getUrlParam() extracts the named parameter from the current page URL
+        //
+        getUrlParam = function (paramName) {
+            var name, regexS, regex, results;
+            name = paramName.replace(/(\[|\])/g, '\\$1');
+            regexS = '[\\?&]' + name + '=([^&#]*)';
+            regex = new RegExp(regexS);
+            results = regex.exec(window.location.href);
+            if (results === null) {
+                return '';
+            } else {
+                return results[1];
+            }
+        },
+
+        //
+        // extractDecimal() returns a decimal number from a string, the decimal point can be either a dot or a comma
+        // it ignores any text such as pre/appended units
+        //
+        extractDecimal = function (str, errVal) {
+            try {
+                return (/[-+]?[0-9]+\.?[0-9]*/).exec(str.replace(',', '.'))[0];
+            } catch (e) {
+                // error condition
+                return errVal || -9999;
+            }
+        },
+
+        //
+        // extractInteger() returns an integer from a string
+        // it ignores any text such as pre/appended units
+        //
+        extractInteger = function (str, errVal) {
+            try {
+                return (/[-+]?[0-9]+/).exec(str)[0];
+            } catch (e) {
+                // error condition
+                return errVal || -9999;
+            }
+        },
+
+        //
+        // tempTrend() converts a temperature trend value into a localised string, or +1, 0, -1 depending on the value of bTxt
+        //
+        tempTrend = function (trend, units, bTxt) {
+            // Scale is over 3 hours, in Celsius
+            var val = trend * 3 * (units[1] === 'C' ? 1 : (5 / 9)),
+                ret;
+            if (trend === -9999) {
+                ret = (bTxt ? '--' : trend);
+            } else if (val > 5) {
+                ret = (bTxt ? strings.RisingVeryRapidly : 1);
+            } else if (val > 3) {
+                ret = (bTxt ? strings.RisingQuickly : 1);
+            } else if (val > 1) {
+                ret = (bTxt ? strings.Rising : 1);
+            } else if (val > 0.5) {
+                ret = (bTxt ? strings.RisingSlowly : 1);
+            } else if (val >= -0.5) {
+                ret = (bTxt ? strings.Steady : 0);
+            } else if (val >= -1) {
+                ret = (bTxt ? strings.FallingSlowly : -1);
+            } else if (val >= -3) {
+                ret = (bTxt ? strings.Falling : -1);
+            } else if (val >= -5) {
+                ret = (bTxt ? strings.FallingQuickly : -1);
+            } else {
+                ret = (bTxt ? strings.FallingVeryRapidly : -1);
+            }
+            return ret;
+        },
+
+        //
+        // baroTrend() converts a pressure trend value into a localised string, or +1, 0, -1 depending on the value of bTxt
+        //
+        baroTrend = function (trend, units, bTxt) {
+            var val = trend * 3,
+                ret;
+            // The terms below are the UK Met Office terms for a 3 hour change in hPa
+            // trend is supplied as an hourly change, so multiply by 3
+            if (units === 'inHg') {
+                val *= 33.8639;
+            } else if (units === 'kPa') {
+                val *= 10;
+                // assume everything else is hPa or mb, could be dangerous!
+            }
+            if (trend === -9999) {
+                ret = (bTxt ? '--' : trend);
+            } else if (val > 6.0) {
+                ret = (bTxt ? strings.RisingVeryRapidly : 1);
+            } else if (val > 3.5) {
+                ret = (bTxt ? strings.RisingQuickly : 1);
+            } else if (val > 1.5) {
+                ret = (bTxt ? strings.Rising : 1);
+            } else if (val > 0.1) {
+                ret = (bTxt ? strings.RisingSlowly : 1);
+            } else if (val >= -0.1) {
+                ret = (bTxt ? strings.Steady : 0);
+            } else if (val >= -1.5) {
+                ret = (bTxt ? strings.FallingSlowly : -1);
+            } else if (val >= -3.5) {
+                ret = (bTxt ? strings.Falling : -1);
+            } else if (val >= -6.0) {
+                ret = (bTxt ? strings.FallingQuickly : -1);
+            } else {
+                ret = (bTxt ? strings.FallingVeryRapidly : -1);
+            }
+            return ret;
+        },
+
+        //
+        // getMinTemp() returns the lowest temperature today for gauge scaling
+        //
+        getMinTemp = function (deflt) {
+            return Math.min(
+                extractDecimal(data.tempTL, deflt),
+                extractDecimal(data.dewpointTL, deflt),
+                extractDecimal(data.apptempTL, deflt),
+                extractDecimal(data.feelslikeTL, deflt),
+                extractDecimal(data.wchillTL, deflt));
+        },
+
+        //
+        // getMaxTemp() returns the highest temperature today for gauge scaling
+        //
+        getMaxTemp = function (deflt) {
+            return Math.max(
+                extractDecimal(data.tempTH, deflt),
+                extractDecimal(data.apptempTH, deflt),
+                extractDecimal(data.feelslikeTH, deflt),
+                extractDecimal(data.heatindexTH, deflt),
+                extractDecimal(data.humidex, deflt));
+        },
+
+        // Celsius to Fahrenheit
+        c2f = function c2f(val) {
+            return (extractDecimal(val) * 9 / 5 + 32).toFixed(1);
+        },
+        // Fahrenheit to Celsius
+        f2c = function f2c(val) {
+            return ((extractDecimal(val) - 32) * 5 / 9).toFixed(1);
+        },
+        // mph to ms
+        mph2ms = function mph2ms(val) {
+            return (extractDecimal(val) * 0.447).toFixed(1);
+        },
+        // knots to ms
+        kts2ms = function kts2ms(val) {
+            return (extractDecimal(val) * 0.515).toFixed(1);
+        },
+        // kph to ms
+        kmh2ms = function kmh2ms(val) {
+            return (extractDecimal(val) * 0.2778).toFixed(1);
+        },
+        // ms to kts
+        ms2kts = function ms2kts(val) {
+            return (extractDecimal(val) * 1.9426).toFixed(1);
+        },
+        // ms to mph
+        ms2mph = function ms2mph(val) {
+            return (extractDecimal(val) * 2.237).toFixed(1);
+        },
+        // ms to kph
+        ms2kmh = function ms2kmh(val) {
+            return (extractDecimal(val) * 3.6).toFixed(1);
+        },
+        // mm to inches
+        mm2in = function mm2in(val) {
+            return (extractDecimal(val) / 25.4).toFixed(2);
+        },
+        // inches to mm
+        in2mm = function in2mm(val) {
+            return (extractDecimal(val) * 25.4).toFixed(1);
+        },
+        // miles to km
+        miles2km = function miles2km(val) {
+            return (extractDecimal(val) * 1.609344).toFixed(1);
+        },
+        // nautical miles to km
+        nmiles2km = function nmiles2km(val) {
+            return (extractDecimal(val) * 1.85200).toFixed(1);
+        },
+        // km to miles
+        km2miles = function km2miles(val) {
+            return (extractDecimal(val) / 1.609344).toFixed(1);
+        },
+        // km to nautical miles
+        km2nmiles = function km2nmiles(val) {
+            return (extractDecimal(val) / 1.85200).toFixed(1);
+        },
+        // hPa to inHg (@0°C)
+        hpa2inhg = function hpa2inhg(val, decimals) {
+            return (extractDecimal(val) * 0.029528744).toFixed(decimals || 3);
+        },
+        // inHg to hPa (@0°C)
+        inhg2hpa = function inhg2hpa(val) {
+            return (extractDecimal(val) / 0.029528744).toFixed(1);
+        },
+        // kPa to hPa
+        kpa2hpa = function kpa2hpa(val) {
+            return (extractDecimal(val) * 10).toFixed(1);
+        },
+        // hPa to kPa
+        hpa2kpa = function hpa2kpa(val, decimals) {
+            return (extractDecimal(val) / 10).toFixed(decimals || 2);
+        },
+        // m to ft
+        m2ft = function m2ft(val) {
+            return (val * 3.2808399).toFixed(0);
+        },
+        // ft to m
+        ft2m = function ft2m(val) {
+            return (val / 3.2808399).toFixed(0);
+        },
+
+        //
+        // setCookie() writes the 'obj' in cookie 'name' for persistent storage
+        //
+        setCookie = function (name, obj) {
+            var date = new Date(),
+                expires;
+            // cookies valid for 1 year
+            date.setYear(date.getFullYear() + 1);
+            expires = '; expires=' + date.toGMTString();
+            document.cookie = name + '=' + encodeURIComponent(JSON.stringify(obj)) + expires;
+        },
+
+        //
+        // getCookie() reads the value of cookie 'name' from persistent storage
+        //
+        getCookie = function (name) {
+            var i, x, y,
+                ret = null,
+                arrCookies = document.cookie.split(';');
+
+            for (i = arrCookies.length; i--;) {
+                x = arrCookies[i].split('=');
+                if (x[0].trim() === name) {
+                    try {
+                        y = decodeURIComponent(x[1]);
+                    } catch (e) {
+                        y = x[1];
+                    }
+                    ret = JSON.parse(unescape(y));
+                    break;
+                }
+            }
+            return ret;
+        },
+
+        //
+        // setRadioCheck() sets the desired value of the HTML radio buttons to be selected
+        //
+        setRadioCheck = function (obj, val) {
+            $('input:radio[name="' + obj + '"]').filter('[value="' + val + '"]').prop('checked', true);
+        },
+
+        //
+        // convTempData() converts all the temperature values using the supplied conversion function
+        //
+        convTempData = function (convFunc) {
+            data.apptemp = convFunc(data.apptemp);
+            data.apptempTH = convFunc(data.apptempTH);
+            data.apptempTL = convFunc(data.apptempTL);
+            data.feelslike = convFunc(data.feelslike);
+            data.feelslikeTH = convFunc(data.feelslikeTH);
+            data.feelslikeTL = convFunc(data.feelslikeTL);
+            data.dew = convFunc(data.dew);
+            data.dewpointTH = convFunc(data.dewpointTH);
+            data.dewpointTL = convFunc(data.dewpointTL);
+            data.heatindex = convFunc(data.heatindex);
+            data.heatindexTH = convFunc(data.heatindexTH);
+            data.humidex = convFunc(data.humidex);
+            data.intemp = convFunc(data.intemp);
+            if (data.intempTL && data.intempTH) {
+                data.intempTL = convFunc(data.intempTL);
+                data.intempTH = convFunc(data.intempTH);
+            }
+            data.temp = convFunc(data.temp);
+            data.tempTH = convFunc(data.tempTH);
+            data.tempTL = convFunc(data.tempTL);
+            data.wchill = convFunc(data.wchill);
+            data.wchillTL = convFunc(data.wchillTL);
+            if (convFunc === c2f) {
+                data.temptrend = (+extractDecimal(data.temptrend) * 9 / 5).toFixed(1);
+                data.tempunit = '°F';
+            } else {
+                data.temptrend = (+extractDecimal(data.temptrend) * 5 / 9).toFixed(1);
+                data.tempunit = '°C';
+            }
+        },
+
+        //
+        // convRainData() converts all the rain data units using the supplied conversion function
+        //
+        convRainData = function (convFunc) {
+            data.rfall = convFunc(data.rfall);
+            data.rrate = convFunc(data.rrate);
+            data.rrateTM = convFunc(data.rrateTM);
+            data.hourlyrainTH = convFunc(data.hourlyrainTH);
+            data.rainunit = convFunc === mm2in ? 'in' : 'mm';
+        },
+
+        //
+        // convWindData() converts all the wind values using the supplied conversion function
+        //
+        convWindData = function (from, to) {
+            var fromFunc1, toFunc1,
+                fromFunc2, toFunc2,
+                dummy = function (val) {
+                    return val;
+                };
+
+            // convert to m/s & km
+            switch (from) {
+            case 'mph':
+                fromFunc1 = mph2ms;
+                fromFunc2 = miles2km;
+                break;
+            case 'kts':
+                fromFunc1 = kts2ms;
+                fromFunc2 = nmiles2km;
+                break;
+            case 'km/h':
+                fromFunc1 = kmh2ms;
+                fromFunc2 = dummy;
+                break;
+            case 'm/s':
+            // falls through
+            default:
+                fromFunc1 = dummy;
+                fromFunc2 = dummy;
+            }
+            // conversion function from km to required units
+            switch (to) {
+            case 'mph':
+                toFunc1 = ms2mph;
+                toFunc2 = km2miles;
+                displayUnits.windrun = 'miles';
+                break;
+            case 'kts':
+                toFunc1 = ms2kts;
+                toFunc2 = km2nmiles;
+                displayUnits.windrun = 'n.miles';
+                break;
+            case 'km/h':
+                toFunc1 = ms2kmh;
+                toFunc2 = dummy;
+                displayUnits.windrun = 'km';
+                break;
+            case 'm/s':
+            // falls through
+            default:
+                toFunc1 = dummy;
+                toFunc2 = dummy;
+                displayUnits.windrun = 'km';
+            }
+            // do the conversions
+            data.wgust = toFunc1(fromFunc1(data.wgust));
+            data.wgustTM = toFunc1(fromFunc1(data.wgustTM));
+            data.windTM = toFunc1(fromFunc1(data.windTM));
+            data.windrun = toFunc2(fromFunc2(data.windrun));
+            data.wlatest = toFunc1(fromFunc1(data.wlatest));
+            data.wspeed = toFunc1(fromFunc1(data.wspeed));
+            data.windunit = to;
+        },
+
+        //
+        // convBaroData() converts all the pressure values using the supplied conversion function
+        //
+        convBaroData = function (from, to) {
+            var fromFunc, toFunc,
+                dummy = function (val) {
+                    return val;
+                };
+
+            // convert to hPa
+            switch (from) {
+            case 'hPa':
+            // falls through
+            case 'mb':
+                fromFunc = dummy;
+                break;
+            case 'inHg':
+                fromFunc = inhg2hpa;
+                break;
+            case 'kPa':
+                fromFunc = kpa2hpa;
+                break;
+            // no default
+            }
+            // convert to required units
+            switch (to) {
+            case 'hPa':
+            // falls through
+            case 'mb':
+                toFunc = dummy;
+                break;
+            case 'inHg':
+                toFunc = hpa2inhg;
+                break;
+            case 'kPa':
+                toFunc = hpa2kpa;
+                break;
+            // no default
+            }
+
+            data.press = toFunc(fromFunc(data.press));
+            data.pressH = toFunc(fromFunc(data.pressH));
+            data.pressL = toFunc(fromFunc(data.pressL));
+            data.pressTH = toFunc(fromFunc(data.pressTH));
+            data.pressTL = toFunc(fromFunc(data.pressTL));
+            data.presstrendval = toFunc(fromFunc(data.presstrendval), 3);
+            data.pressunit = to;
+        },
+
+        //
+        // convCloudBaseData() converts all the cloud base data units using the supplied conversion function
+        //
+        convCloudBaseData = function (convFunc) {
+            data.cloudbasevalue = convFunc(data.cloudbasevalue);
+            data.cloudbaseunit = convFunc === m2ft ? 'ft' : 'm';
+        },
+
+        //
+        // setUnits() Main data conversion routine, calls all the setXXXX() sub-routines
+        //
+        setUnits = function (radio) {
+            var sel = radio.value;
+
+            userUnitsSet = true;
+
+            switch (sel) {
+            // == Temperature ==
+            case 'C':
+                displayUnits.temp = sel;
+                if (data.tempunit[1] !== sel) {
+                    setTempUnits(true);
+                    convTempData(f2c);
+                    if (gaugeTemp) {gaugeTemp.update();}
+                    if (gaugeDew) {gaugeDew.update();}
+                }
+                break;
+            case 'F':
+                displayUnits.temp = sel;
+                if (data.tempunit[1] !== sel) {
+                    setTempUnits(false);
+                    convTempData(c2f);
+                    if (gaugeTemp) {gaugeTemp.update();}
+                    if (gaugeDew) {gaugeDew.update();}
+                }
+                break;
+            // == Rainfall ==
+            case 'mm':
+                displayUnits.rain = sel;
+                if (data.rainunit !== sel) {
+                    setRainUnits(true);
+                    convRainData(in2mm);
+                    if (gaugeRain) {gaugeRain.update();}
+                    if (gaugeRRate) {gaugeRRate.update();}
+                }
+                break;
+            case 'in':
+                displayUnits.rain = sel;
+                if (data.rainunit !== sel) {
+                    setRainUnits(false);
+                    convRainData(mm2in);
+                    if (gaugeRain) {gaugeRain.update();}
+                    if (gaugeRRate) {gaugeRRate.update();}
+                }
+                break;
+            // == Pressure ==
+            case 'hPa':
+            // falls through
+            case 'inHg':
+            // falls through
+            case 'mb':
+            // falls through
+            case 'kPa':
+                displayUnits.press = sel;
+                if (data.pressunit !== sel) {
+                    convBaroData(data.pressunit, sel);
+                    setBaroUnits(sel);
+                    if (gaugeBaro) {gaugeBaro.update();}
+                }
+                break;
+            // == Wind speed ==
+            case 'mph':
+            // falls through
+            case 'kts':
+            // falls through
+            case 'm/s':
+            // falls through
+            case 'km/h':
+                displayUnits.wind = sel;
+                if (data.windunit !== sel) {
+                    convWindData(data.windunit, sel);
+                    setWindUnits(sel);
+                    if (gaugeWind) {gaugeWind.update();}
+                    if (gaugeDir) {gaugeDir.update();}
+                    if (gaugeRose) {gaugeRose.update();}
+                }
+                break;
+            // == CloudBase ==
+            case 'm':
+                displayUnits.cloud = sel;
+                if (data.cloudbaseunit !== sel) {
+                    setCloudBaseUnits(true);
+                    convCloudBaseData(ft2m);
+                    if (gaugeCloud) {gaugeCloud.update();}
+                }
+                break;
+            case 'ft':
+                displayUnits.cloud = sel;
+                if (data.cloudbaseunit !== sel) {
+                    setCloudBaseUnits(false);
+                    convCloudBaseData(m2ft);
+                    if (gaugeCloud) {gaugeCloud.update();}
+                }
+                break;
+            // no default
+            }
+            if (config.useCookies) {
+                setCookie('units', displayUnits);
+            }
+        },
+
+        setTempUnits = function (celsius) {
+            if (celsius) {
+                data.tempunit = '°C';
+                if (gaugeTemp) {
+                    gaugeTemp.data.sections = createTempSections(true);
+                    gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinC;
+                    gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxC;
+                }
+                if (gaugeDew) {
+                    gaugeDew.data.sections = createTempSections(true);
+                    gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinC;
+                    gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxC;
+                }
+            } else {
+                data.tempunit = '°F';
+                if (gaugeTemp) {
+                    gaugeTemp.data.sections = createTempSections(false);
+                    gaugeTemp.data.minValue = gaugeGlobals.tempScaleDefMinF;
+                    gaugeTemp.data.maxValue = gaugeGlobals.tempScaleDefMaxF;
+                }
+                if (gaugeDew) {
+                    gaugeDew.data.sections = createTempSections(false);
+                    gaugeDew.data.minValue = gaugeGlobals.tempScaleDefMinF;
+                    gaugeDew.data.maxValue = gaugeGlobals.tempScaleDefMaxF;
+                }
+            }
+            if (gaugeTemp) {
+                gaugeTemp.gauge.setUnitString(data.tempunit);
+                gaugeTemp.gauge.setSection(gaugeTemp.data.sections);
+            }
+            if (gaugeDew) {
+                gaugeDew.gauge.setUnitString(data.tempunit);
+                gaugeDew.gauge.setSection(gaugeTemp.data.sections);
+            }
+        },
+
+        setRainUnits = function (mm) {
+            if (mm) {
+                data.rainunit = 'mm';
+                if (gaugeRain) {
+                    gaugeRain.data.lcdDecimals = 1;
+                    gaugeRain.data.scaleDecimals = 1;
+                    gaugeRain.data.labelNumberFormat = gaugeGlobals.labelFormat;
+                    gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(true) : []);
+                    gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxmm;
+                    gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(true) : null);
+                }
+                if (gaugeRRate) {
+                    gaugeRRate.data.lcdDecimals = 1;
+                    gaugeRRate.data.scaleDecimals = 0;
+                    gaugeRRate.data.labelNumberFormat = gaugeGlobals.labelFormat;
+                    gaugeRRate.data.sections = createRainRateSections(true);
+                    gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxmm;
+                }
+            } else {
+                data.rainunit = 'in';
+                if (gaugeRain) {
+                    gaugeRain.data.lcdDecimals = 2;
+                    gaugeRain.data.scaleDecimals = gaugeGlobals.rainScaleDefMaxIn < 1 ? 2 : 1;
+                    gaugeRain.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL;
+                    gaugeRain.data.sections = (gaugeGlobals.rainUseSectionColours ? createRainfallSections(false) : []);
+                    gaugeRain.data.maxValue = gaugeGlobals.rainScaleDefMaxIn;
+                    gaugeRain.data.grad = (gaugeGlobals.rainUseGradientColours ? createRainfallGradient(false) : null);
+                }
+                if (gaugeRRate) {
+                    gaugeRRate.data.lcdDecimals = 2;
+                    gaugeRRate.data.scaleDecimals = gaugeGlobals.rainRateScaleDefMaxIn < 1 ? 2 : 1;
+                    gaugeRRate.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL;
+                    gaugeRRate.data.sections = createRainRateSections(false);
+                    gaugeRRate.data.maxValue = gaugeGlobals.rainRateScaleDefMaxIn;
+                }
+            }
+            if (gaugeRain) {
+                gaugeRain.data.value = 0;
+                gaugeRain.gauge.setUnitString(data.rainunit);
+                gaugeRain.gauge.setSection(gaugeRain.data.sections);
+                gaugeRain.gauge.setGradient(gaugeRain.data.grad);
+                gaugeRain.gauge.setFractionalScaleDecimals(gaugeRain.data.scaleDecimals);
+                gaugeRain.gauge.setLabelNumberFormat(gaugeRain.data.labelNumberFormat);
+                gaugeRain.gauge.setLcdDecimals(gaugeRain.data.lcdDecimals);
+                gaugeRain.gauge.setValue(0);
+                gaugeRain.gauge.setMaxValue(gaugeRain.data.maxValue);
+            }
+            if (gaugeRRate) {
+                gaugeRRate.data.value = 0;
+                gaugeRRate.gauge.setUnitString(data.rainunit + '/h');
+                gaugeRRate.gauge.setSection(gaugeRRate.data.sections);
+                gaugeRRate.gauge.setFractionalScaleDecimals(gaugeRRate.data.scaleDecimals);
+                gaugeRRate.gauge.setLabelNumberFormat(gaugeRRate.data.labelNumberFormat);
+                gaugeRRate.gauge.setLcdDecimals(gaugeRRate.data.lcdDecimals);
+                gaugeRRate.gauge.setValue(0);
+                gaugeRRate.gauge.setMaxValue(gaugeRRate.data.maxValue);
+            }
+        },
+
+        setWindUnits = function (to) {
+            var maxVal;
+            data.windunit = to;
+            if (gaugeWind) {
+                // conversion function to required units
+                switch (to) {
+                case 'mph':
+                    maxVal = gaugeGlobals.windScaleDefMaxMph;
+                    break;
+                case 'kts':
+                    maxVal = gaugeGlobals.windScaleDefMaxKts;
+                    break;
+                case 'km/h':
+                    maxVal = gaugeGlobals.windScaleDefMaxKmh;
+                    break;
+                case 'm/s':
+                    maxVal = gaugeGlobals.windScaleDefMaxMs;
+                    break;
+                // no default
+                }
+                // set the gauges
+                gaugeWind.data.maxValue = maxVal;
+                gaugeWind.gauge.setUnitString(data.windunit);
+                gaugeWind.gauge.setValue(0);
+            }
+            if (gaugeRose) {
+                gaugeRose.setOdoTitle(strings[getWindrunUnits(data.windunit)]);
+            }
+        },
+
+        setBaroUnits = function (to) {
+            var minVal, maxVal;
+
+            if (!gaugeBaro) {return;}
+
+            // set to the required units
+            switch (to) {
+            case 'hPa':
+            // falls through
+            case 'mb':
+                minVal = gaugeGlobals.baroScaleDefMinhPa;
+                maxVal = gaugeGlobals.baroScaleDefMaxhPa;
+                gaugeBaro.data.lcdDecimals = 1;
+                gaugeBaro.data.scaleDecimals = 0;
+                gaugeBaro.data.labelNumberFormat = gaugeGlobals.labelFormat;
+                break;
+            case 'inHg':
+                minVal = gaugeGlobals.baroScaleDefMininHg;
+                maxVal = gaugeGlobals.baroScaleDefMaxinHg;
+                gaugeBaro.data.lcdDecimals = 2;
+                gaugeBaro.data.scaleDecimals = 1;
+                gaugeBaro.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL;
+                break;
+            case 'kPa':
+                minVal = gaugeGlobals.baroScaleDefMinkPa;
+                maxVal = gaugeGlobals.baroScaleDefMaxkPa;
+                gaugeBaro.data.lcdDecimals = 2;
+                gaugeBaro.data.scaleDecimals = 1;
+                gaugeBaro.data.labelNumberFormat = steelseries.LabelNumberFormat.FRACTIONAL;
+                break;
+            // no default
+            }
+
+            data.pressunit = to;
+            gaugeBaro.gauge.setUnitString(to);
+            gaugeBaro.gauge.setLcdDecimals(gaugeBaro.data.lcdDecimals);
+            gaugeBaro.gauge.setFractionalScaleDecimals(gaugeBaro.data.scaleDecimals);
+            gaugeBaro.gauge.setLabelNumberFormat(gaugeBaro.data.labelNumberFormat);
+            gaugeBaro.data.minValue = minVal;
+            gaugeBaro.data.maxValue = maxVal;
+            gaugeBaro.data.value = gaugeBaro.data.minValue;
+        },
+
+        setCloudBaseUnits = function (m) {
+            if (!gaugeCloud) {return;}
+
+            if (m) {
+                gaugeCloud.data.sections = createCloudBaseSections(true);
+                gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxm;
+            } else {
+                gaugeCloud.data.sections = createCloudBaseSections(false);
+                gaugeCloud.data.maxValue = gaugeGlobals.cloudScaleDefMaxft;
+            }
+            gaugeCloud.data.value = 0;
+            gaugeCloud.gauge.setUnitString(m ? strings.metres : strings.feet);
+            gaugeCloud.gauge.setSection(gaugeCloud.data.sections);
+        },
+
+        //
+        // setLang() switches the HTML page language set, called by changeLang() in language.js
+        //
+        setLang = function (newLang) {
+            // reset to the new language
+            strings = newLang;
+
+            // temperature
+            if (gaugeTemp) {
+                if (config.showIndoorTempHum) {
+                    if ($('#rad_temp1').is(':checked')) {
+                        gaugeTemp.data.title = strings.temp_title_out;
+                    } else {
+                        gaugeTemp.data.title = strings.temp_title_in;
+                    }
+                } else {
+                    gaugeTemp.data.title = strings.temp_title_out;
+                }
+                gaugeTemp.gauge.setTitleString(gaugeTemp.data.title);
+                if (data.ver) {gaugeTemp.update();}
+            }
+            if (gaugeDew) {
+                switch ($('input[name="rad_dew"]:checked').val()) {
+                case 'dew':
+                    gaugeDew.data.title = strings.dew_title;
+                    break;
+                case 'app':
+                    gaugeDew.data.title = strings.apptemp_title;
+                    break;
+                case 'feel':
+                    gaugeDew.data.title = strings.feel_title;
+                    break;
+                case 'wnd':
+                    gaugeDew.data.title = strings.chill_title;
+                    break;
+                case 'hea':
+                    gaugeDew.data.title = strings.heat_title;
+                    break;
+                case 'hum':
+                    gaugeDew.data.title = strings.humdx_title;
+                    break;
+                // no default
+                }
+                gaugeDew.gauge.setTitleString(gaugeDew.data.title);
+                if (data.ver) {gaugeDew.update();}
+            }
+            // rain
+            if (gaugeRain) {
+                gaugeRain.data.title = strings.rain_title;
+                gaugeRain.gauge.setTitleString(gaugeRain.data.title);
+                if (data.ver) {gaugeRain.update();}
+            }
+            // rrate
+            if (gaugeRRate) {
+                gaugeRRate.data.title = strings.rrate_title;
+                gaugeRRate.gauge.setTitleString(gaugeRRate.data.title);
+                if (data.ver) {gaugeRRate.update();}
+            }
+            // humidity
+            if (gaugeHum) {
+                if (config.showIndoorTempHum) {
+                    if ($('#rad_hum1').is(':checked')) {
+                        gaugeHum.data.title = strings.hum_title_out;
+                    } else {
+                        gaugeHum.data.title = strings.hum_title_in;
+                    }
+                } else {
+                    gaugeHum.data.title = strings.hum_title_out;
+                }
+                gaugeHum.gauge.setTitleString(gaugeHum.data.title);
+                if (data.ver) {gaugeHum.update();}
+            }
+            // barometer
+            if (gaugeBaro) {
+                gaugeBaro.data.title = strings.baro_title;
+                gaugeBaro.gauge.setTitleString(gaugeBaro.data.title);
+                if (data.ver) {gaugeBaro.update();}
+            }
+            // wind
+            if (gaugeWind) {
+                gaugeWind.data.title = strings.wind_title;
+                gaugeWind.gauge.setTitleString(gaugeWind.data.title);
+                if (data.ver) {gaugeWind.update();}
+            }
+            if (gaugeDir) {
+                gaugeDir.gauge.setPointSymbols(strings.compass);
+                gaugeDir.data.titles = [strings.latest_web, strings.tenminavg_web];
+                gaugeDir.gauge.setLcdTitleStrings(gaugeDir.data.titles);
+                if (data.ver) {gaugeDir.update();}
+            }
+            if (gaugeUV) {
+                gaugeUV.gauge.setTitleString(strings.uv_title);
+                if (data.ver) {gaugeUV.update();}
+            }
+            if (gaugeSolar) {
+                gaugeSolar.gauge.setTitleString(strings.solar_title);
+                if (data.ver) {gaugeSolar.update();}
+            }
+            if (gaugeRose) {
+                gaugeRose.setTitle(strings.windrose);
+                gaugeRose.setCompassStrings(strings.compass);
+                gaugeRose.setOdoTitle(strings[getWindrunUnits(displayUnits.wind)]);
+                if (data.ver) {gaugeRose.update();}
+            }
+            if (gaugeCloud) {
+                // Cloudbase
+                gaugeCloud.data.units = data.cloudunit === 'm' ? strings.metres : strings.feet;
+                gaugeCloud.gauge.setTitleString(strings.cloudbase_title);
+                gaugeCloud.gauge.setUnitString(gaugeCloud.data.units);
+                if (data.ver) {gaugeCloud.update();}
+            }
+        },
+
+        //
+        // return windrun units based on the windspeed units
+        //
+        getWindrunUnits = function (spdUnits) {
+            var retVal;
+            switch (spdUnits) {
+            case 'mph':
+                retVal = 'miles';
+                break;
+            case 'kts':
+                retVal = 'n_miles';
+                break;
+            case 'km/h':
+            // falls through
+            case 'm/s':
+            // falls through
+            default:
+                retVal = 'km';
+                break;
+            }
+            return retVal;
+        },
+
+        //
+        // performs a simple cloudbase calculation for those weather programs that don't supply it
+        //
+        calcCloudbase = function (temp, tempunit, dew, cloudbaseunit) {
+            var sprd = temp - dew;
+            var cb = sprd * (tempunit[1] === 'C' ? 400 : 227.3); // cloud base in feet
+            if (cloudbaseunit === 'm') {
+                cb = ft2m(cb);
+            }
+            return cb;
+        },
+
+        //
+        // create a shadow effect for the gauge using CSS
+        //
+        gaugeShadow = function (size) {
+            var offset = Math.floor(size * 0.015);
+            return {
+                'box-shadow'   : offset + 'px ' + offset + 'px ' + offset + 'px ' + gaugeGlobals.shadowColour,
+                'border-radius': Math.floor(size / 2) + 'px'
+            };
+        },
+
+        //
+        // generate a colour gradient based on start and end values
+        //
+        gradient = function (startCol, endCol, fraction) {
+            var redOrigin, grnOrigin, bluOrigin,
+                gradientSizeRed, gradientSizeGrn, gradientSizeBlu;
+
+            redOrigin = parseInt(startCol.substr(0, 2), 16);
+            grnOrigin = parseInt(startCol.substr(2, 2), 16);
+            bluOrigin = parseInt(startCol.substr(4, 2), 16);
+
+            gradientSizeRed = parseInt(endCol.substr(0, 2), 16)  - redOrigin; // Graduation Size Red
+            gradientSizeGrn = parseInt(endCol.substr(2, 2), 16)  - grnOrigin;
+            gradientSizeBlu = parseInt(endCol.substr(4, 2), 16)  - bluOrigin;
+
+            return (redOrigin + (gradientSizeRed * fraction)).toFixed(0) + ',' +
+                (grnOrigin + (gradientSizeGrn * fraction)).toFixed(0) + ',' +
+                (bluOrigin + (gradientSizeBlu * fraction)).toFixed(0);
+        },
+        //
+        // returns the next highest number in the step sequence
+        //
+        nextHighest = function (value, step) {
+            return +value == 0 ? step : Math.ceil(+value / step) * step;
+        },
+        //
+        // returns the next lowest number in the step sequence
+        //
+        nextLowest = function (value, step) {
+            return +value == 0 ? -step : Math.floor(+value / step) * step;
+        };
+        // ########################################################
+        // End of gauges() var declarations
+        // ########################################################
+
+    //
+    // Execution starts here
+    //
+
+    // test for canvas support before we do anything else, especially reference steelseries which will cause the script to abort!
+    if (!document.createElement('canvas').getContext) {
+        // failed, no canvas support detected
+        $('body').html(strings.canvasnosupport);
+        setTimeout(function () {
+            window.location = config.oldGauges;
+        }, 3000);
+        return false;
+    } else {
+        //
+        // Called when the document object has loaded
+        // This starts the whole script.
+        //
+        $(document).ready(function () {
+            // Kick it all off - false for web page, true for dashboard
+            init(config.dashboardMode);
+        });
+    }
+
+    return {
+        setLang    : setLang,
+        setUnits   : setUnits,
+        processData: processData,
+        config     : config,
+        init       : init
+    };
+}());
+
+// ===============================================================================================================================
+// ===============================================================================================================================
+// ===============================================================================================================================
+
+    /*!
+    * Image w/ description tooltip v2.0  -  For FF1+ IE6+ Opr8+
+    * Created: April 23rd, 2010. This notice must stay intact for usage
+    * Author: Dynamic Drive at http://www.dynamicdrive.com/
+    * Visit http://www.dynamicdrive.com/ for full source code
+    * Modified: M Crossley June 2011, January 2012
+    * v2.-
+    */
+var ddimgtooltip;
+ddimgtooltip = {
+    tiparray: (function () {
+        var style = {background: '#FFFFFF', color: 'black', border: '2px ridge darkblue'},
+            i = 12,  // set to number of tooltips required
+            tooltips = [];
+        for (;i--;) {
+            tooltips[i] = [null, ' ', style];
+        }
+        return tooltips;
+    }()),
+
+    tooltipoffsets: [20, -30], // additional x and y offset from mouse cursor for tooltips
+
+    tipDelay: 1000,
+
+    delayTimer: 0,
+
+    tipprefix: 'imgtip', // tooltip DOM ID prefixes
+
+    createtip: function ($, tipid, tipinfo) {
+        if ($('#' + tipid).length === 0) { // if this tooltip doesn't exist yet
+            return $('<div id="' + tipid + '" class="ddimgtooltip" />')
+                .html(
+                    ((tipinfo[1]) ? '<div class="tipinfo" id="' + tipid + '_txt">' + tipinfo[1] + '</div>' : '') +
+                    (tipinfo[0] !== null ? '<div style="text-align:center"><img class="tipimg" id="' + tipid +
+                    '_img" src="' + tipinfo[0] + '" /></div>' : '')
+                )
+                .css(tipinfo[2] || {})
+                .appendTo(document.body);
+        }
+        return null;
+    },
+
+    positiontooltip: function ($, $tooltip, e) {
+        var x = e.pageX + this.tooltipoffsets[0],
+            y = e.pageY + this.tooltipoffsets[1],
+            tipw = $tooltip.outerWidth(),
+            tiph = $tooltip.outerHeight(),
+            wWidth = $(window).width(),
+            wHght = $(window).height(),
+            dTop = $(document).scrollTop();
+
+        x = (x + tipw > $(document).scrollLeft() + wWidth) ? x - tipw - (ddimgtooltip.tooltipoffsets[0] * 2) : x;
+        y = (y + tiph > dTop + wHght) ? dTop + wHght - tiph - 10 : y;
+        // last ditch attempt to keep the graphs 'on page'
+        x = Math.max(x, 0);
+        if (tipw >= wWidth) {
+            $($tooltip.attr('id') + '_img').css({width: wWidth - 20});
+            $('#' + $tooltip.attr('id') + '_img').css({width: wWidth - 20});
+            y = e.pageY + 5;
+        }
+        $tooltip.css({left: x, top: y});
+    },
+
+    delaybox: function ($, $tooltip) {
+        if (this.showTips) {
+            ddimgtooltip.delayTimer = setTimeout(
+                function () {
+                    ddimgtooltip.showbox($tooltip);
+                }, ddimgtooltip.tipDelay);
+        }
+    },
+
+    showbox: function (tooltip) {
+        if (this.showTips) {
+            // $(tooltip).show();
+            $(tooltip).fadeIn();
+        }
+    },
+
+    hidebox: function ($, $tooltip) {
+        clearTimeout(ddimgtooltip.delayTimer);
+        // $tooltip.hide();
+        $tooltip.fadeOut();
+    },
+
+    showTips: false,
+
+    init: function (targetselector) {
+        var tiparray = ddimgtooltip.tiparray,
+            $targets = $(targetselector);
+
+        if ($targets.length === 0) {
+            return;
+        }
+        $targets.each(function () {
+            var $target = $(this),
+                tipsuffix, tipid,
+                $tooltip;
+            var ind = ($target.attr('id').match(/_(\d+)/) || [])[1] || ''; // match d of attribute id='tip_d'
+            tipsuffix = parseInt(ind, 10); // get d as integer
+            tipid = this.tipid = ddimgtooltip.tipprefix + tipsuffix; // construct this tip's ID value and remember it
+            $tooltip = ddimgtooltip.createtip($, tipid, tiparray[tipsuffix]);
+
+            $target.mouseenter(function (e) {
+                var $tooltip = $('#' + this.tipid);
+                // ddimgtooltip.showbox($, $tooltip, e);
+                ddimgtooltip.delaybox($, $tooltip, e);
+            });
+            $target.mouseleave(function () {
+                var $tooltip = $('#' + this.tipid);
+                ddimgtooltip.hidebox($, $tooltip);
+            });
+            $target.mousemove(function (e) {
+                var $tooltip = $('#' + this.tipid);
+                ddimgtooltip.positiontooltip($, $tooltip, e);
+            });
+            if ($tooltip) { // add mouseenter to this tooltip (only if event hasn't already been added)
+                $tooltip.mouseenter(function () {
+                    ddimgtooltip.hidebox($, $(this));
+                });
+            }
+        });
+    }
+};
+
+// if String doesn't offer a .trim() method, add it
+String.prototype.trim = String.prototype.trim || function trim() {
+    return this.replace(/^\s+|\s+$/g, '');
+};
diff --git a/webfiles/lib/steelseries/scripts/language.min.js b/webfiles/lib/steelseries/scripts/language.min.js
new file mode 100644
index 0000000..7419af1
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/language.min.js
@@ -0,0 +1,4 @@
+
+/*! Version: 2.7.0 - Updated: 28 March 2019 (Added Polish) */
+var LANG=LANG||{};LANG.EN={canvasnosupport:'No HTML5 Canvas support in your browser... Sorry...<br>'+'Try upgrading your browser to a more recent version - nearly all browsers support Canvas now, even IE9!<br><br>'+'Redirecting you to an \'old\' gauges page...',led_title:'Remote sensor status unkonwn',led_title_ok:'Remote sensor OK',led_title_lost:'Remote sensor contact lost!',led_title_unknown:'Remote sensor status unknown!',led_title_offline:'The weather station is currently offline.',weather:'weather',latitude:'Latitude',longitude:'Longitude',elevation:'Elevation',statusStr:'Loading...',StatusMsg:'Downloading...',StatusHttp:'HTTP Request Failed',StatusRetry:'Retrying...',StatusRetryIn:'Retry in...',StatusTimeout:'Timed out',StatusPageLimit:'Page auto-update limit reached, click the status LED to continue',StatusLastUpdate:'Last update',StatusMinsAgo:'minutes ago',StatusHoursAgo:'hours ago',StatusDaysAgo:'days ago',realtimeCorrupt:'Text file download corrupted! Retrying...',timer:'seconds',at:'at',temp_title_out:'Temperature',temp_title_in:'Inside Temp',temp_out_info:'Outside Temperature',temp_out_web:'Outside',temp_in_info:'Inside Temperature',temp_in_web:'Inside',temp_trend_info:'Temperature Trend',dew_title:'Dew Point',dew_info:'Dew Point',dew_web:'Dew Point',apptemp_title:'Apparent',apptemp_info:'Apparent (Feels-Like) Temperature',apptemp_web:'Apparent',feel_title:"Feels Like",feel_info:"Feels Like Temperature",feel_web:"Feels Like",chill_title:'Wind Chill',chill_info:'Wind Chill',chill_web:'Wind Chill',heat_title:'Heat Index',heat_info:'Heat Index',heat_web:'Heat Index',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Rainfall',rrate_title:'Rain Rate',rrate_info:'Rain Rate',LastRain_info:'Last Rain',LastRainedT_info:'Today at',LastRainedY_info:'Yesterday at',hum_title_out:'Humidity',hum_title_in:'Inside Hum',hum_out_info:'Outside Humidity',hum_in_info:'Inside Humidity',hum_out_web:'Outside',hum_in_web:'Inside',baro_title:'Pressure',baro_info:'Barometric Pressure',baro_trend_info:'Pressure Trend',wind_title:'Wind Speed',tenminavg_title:'Average Wind Speed',tenminavgwind_info:'Average wind speed (10 min)',maxavgwind_info:'Maximum average wind speed',tenmingust_info:'Gust (10 min)',maxgust_info:'Maximum gust',latest_title:'Latest Wind',latestwind_info:'Latest Wind Speed',bearing_info:'Bearing',latest_web:'Latest',tenminavg_web:'Average',dominant_bearing:'Dominant wind today',calm:'calm',windrose:'Wind Rose',windruntoday:'Wind run today',uv_title:'UV Index',uv_levels:['None','No danger','Moderate risk','High risk','Very high risk','Extreme risk'],uv_headlines:['No measurable UV Index','No danger to the average person','Moderate risk of harm from unprotected sun exposure','High risk of harm from unprotected sun exposure','Very high risk of harm from unprotected sun exposure','Extreme risk of harm from unprotected sun exposure'],uv_details:['It is still night time or it is a very cloudy day.','Wear sunglasses on bright days; use sunscreen if there is snow on the ground,<br>'+'which reflects UV radiation, or if you have particularly fair skin.','Wear sunglasses and use SPF 30+ sunscreen, cover the body with clothing and<br>'+'a hat, and seek shade around midday when the sun is most intense.','Wear sunglasses and use SPF 30+ sunscreen, cover the body with sun protective<br>'+'clothing and a wide-brim hat, and reduce time in the sun from two hours before<br>'+'to three hours after solar noon (roughly 11:00 AM to 4:00 PM during summer in<br>'+'zones that observe daylight saving time).','Wear SPF 30+ sunscreen, a shirt, sunglasses, and a hat.<br>'+'Do not stay out in the sun for too long.','Take all precautions, including: wear sunglasses and use SPF 30+ sunscreen,<br>'+'cover the body with a long-sleeve shirt and trousers, wear a very broad hat, and<br>'+'avoid the sun from two hours before to three hours after solar noon (roughly 11:00 AM<br>'+'to 4:00 PM during summer in zones that observe daylight saving time).'],solar_title:'Solar Radiation',solar_currentMax:'Current theoretical maximum reading',solar_ofMax:'of maximum',solar_maxToday:'Today\'s maximum reading',cloudbase_title:'Cloud Base',cloudbase_popup_title:'Theoretical cloud base',cloudbase_popup_text:'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>'+'difference between the temperature and the dew point. Note that this simply<br>'+'gives the theoretical height at which Cumulus clouds would begin to form, the<br>'+'air being saturated',feet:'feet',metres:'metres',miles:'miles',n_miles:'n.miles',km:'km',lowest_info:'Lowest',highest_info:'Highest',lowestF_info:'Lowest',highestF_info:'Highest',RisingVeryRapidly:'Rising very rapidly',RisingQuickly:'Rising quickly',Rising:'Rising',RisingSlowly:'Rising slowly',Steady:'Steady',FallingSlowly:'Falling slowly',Falling:'Falling',FallingQuickly:'Falling quickly',FallingVeryRapidly:'Falling very rapidly',maximum_info:'Maximum',max_hour_info:'Max per hour',minimum_info:'Minimum',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSW','SW','WSW','W','WNW','NW','NNW'],compass:['N','NE','E','SE','S','SW','W','NW'],months:['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']};LANG.FR={canvasnosupport:'Votre navigateur ne supporte pas la fonction Canvas de HTML5 ...Désolé...<br>'+'Une mise à jour de votre navigateur à une version plus récente est requise - presque tous les '+'navigateurs supportent HTML5 maintenant, incluant IE9!<br><br>'+'Je vous redirige vers le site contenant les anciennes jauges...',led_title:'Statut du capteur - inconnu',led_title_ok:'Statut du capteur - OK',led_title_lost:'Contact avec le capteur - interrompu!',led_title_unknown:'Contact avec le capteur - inconnu!',led_title_offline:'La station météo est actuellement hors-ligne.',weather:'Météo',latitude:'Latitude',longitude:'Longitude',elevation:'Élévation',statusStr:'Chargement...',StatusMsg:'Téléchargement...',StatusHttp:'La requête HTTP a échoué',StatusRetry:'Réessai...',StatusRetryIn:'Tentative dans...',StatusTimeout:'Dépassement de temps',StatusPageLimit:'Délais de rafraîchissement automatique atteint, cliquez la DEL de status pour continuer',StatusLastUpdate:'Dernière mise à jour - il y a',StatusMinsAgo:'minutes',StatusHoursAgo:'heures',StatusDaysAgo:'jours',realtimeCorrupt:'Le téléchargement du fichier texte est corrompu! Réessai...',timer:'secondes',at:'à',temp_title_out:'Température',temp_title_in:'Intérieure',temp_out_info:'Température à l\'extérieure',temp_out_web:'À l\'extérieur',temp_in_info:'Température à l\'intérieure',temp_in_web:'À l\'intérieur',temp_trend_info:'Tendances de la température',dew_title:'Point de rosée',dew_info:'Point de rosée',dew_web:'Point de rosée',apptemp_title:'Sensation',apptemp_info:'Sensation - température ressentie',apptemp_web:'Sensation',feel_title:"Se sent comme",feel_info:"Se sent comme Température",feel_web:"Se sent comme",chill_title:'Refroidissement',chill_info:'Refroidissement éolien',chill_web:'Refroidissement',heat_title:'Indice chaleur',heat_info:'Indice de chaleur',heat_web:'Indice chaleur',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Précipitations',rrate_title:'Débit de pluie',rrate_info:'Débit de pluie',LastRain_info:'Dernière pluie',LastRainedT_info:'aujourd\'hui à',LastRainedY_info:'hier à',hum_title_out:'Humidité',hum_title_in:'Intérieure',hum_out_info:'Humidité à l\'extérieur',hum_in_info:'Humidité à l\'intérieur',hum_out_web:'À l\'extérieur',hum_in_web:'À l\'intérieur',baro_title:'Pression',baro_info:'Pression barométrique',baro_trend_info:'tendance barométrique',wind_title:'Vitesse du vent',tenminavg_title:'Vitesse moyenne',tenminavgwind_info:'Vitesse moyenne du vent (10 min)',maxavgwind_info:'vitesse moyenne maximale',tenmingust_info:'Rafale (10 min)',maxgust_info:'Rafale maximale',latest_title:'Vent récent',latestwind_info:'Vitesse du vent (récente)',bearing_info:'direction',latest_web:'Récente',tenminavg_web:'Moyenne',dominant_bearing:'Vent dominant aujourd\'hui',calm:'calme',windrose:'Rose des Vents',windruntoday:'Parcours du Vent auj.',uv_title:'l’indice UV',uv_levels:['Nul','Bas','Modéré','Élevé','Très élevé','Extrême'],uv_headlines:['Aucun indice UV quantifiable','Sans danger pour l\'individu moyen','Peu de risques de brûlures causées par l\'exposition au soleil sans protection','Haut risque de brûlures si exposition au soleil sans protection','Risque très élevé de brûlure si exposition au soleil sans protection','Très haut risque de brûlure si exposition au soleil sans protection'],uv_details:['Il fait encore nuit ou c\'est une journée très nuageuse.','Protection solaire minime requise pour les activités normales.<br>'+'Portez des lunettes de soleil lors de journées ensoleillées. Si vous restez à l’extérieur pendant '+'plus d’une heure, couvrez-vous et utilisez un écran solaire.<br>'+'La réflexion par la neige peut presque doubler l’intensité des rayons UV. Portez des lunettes de soleil '+'et appliquez un écran solaire sur votre visage.','Prenez des précautions : couvrez-vous, portez un chapeau et des lunettes de soleil, et appliquez '+'un écran solaire, surtout si vous êtes à l’extérieur pendant 30 minutes ou plus.<br>'+'Cherchez l’ombre à mi-journée, le soleil y est à son plus fort.','Protection nécessaire – les rayons UV endommagent la peau et peuvent causer des coups de soleil.<br>'+'Évitez le soleil entre 11 h et 16 h, prenez toutes les précautions : cherchez l’ombre, couvrez-vous, '+'portez un chapeau, des lunettes de soleil et appliquez un écran solaire.','Précautions supplémentaires nécessaires : la peau non protégée sera endommagée et peut brûler rapidement.<br>'+'Évitez le soleil entre 11 h et 16 h. Cherchez l’ombre, couvrez-vous, portez un chapeau '+'et des lunettes de soleil et appliquez un écran solaire.','Les valeurs de 11 ou plus sont très rares. Cependant, l’indice UV peut atteindre 14 ou '+'plus dans les tropiques ou le sud des États-Unis.<br>'+'Prenez toutes les précautions. La peau non protégée sera endommagée et peut brûler en quelques minutes. '+'Évitez le soleil entre 11 h et 16 h, couvrez-vous, portez un chapeau et des lunettes de soleil et appliquez un écran solaire.<br>'+'N’oubliez pas que le sable blanc et les autres surfaces brillantes réfléchissent les rayons UV et augmentent l’exposition à ces rayons.'],solar_title:'Rayonnement solaire',solar_currentMax:'Lecture maximale théorique courante',solar_ofMax:'du maximum',solar_maxToday:'Lecture maximale de la journée',cloudbase_title:'Plafond nuageux',cloudbase_popup_title:'Plafond nuageux théorique',cloudbase_popup_text:'Le calcul est simple; 1000 pieds pour chaque différence de 4.4 degrés Fahrenheit<br>'+'entre la température et le point de rosée. A noter que cela donne simplement la<br>'+'hauteur théorique à laquelle des cumulus commenceront à se former, l\'air étant saturé.',feet:'feet',metres:'mètres',miles:'miles',n_miles:'miles.n',km:'km',lowest_info:'le plus bas',highest_info:'le plus élevé',lowestF_info:'la plus basse',highestF_info:'la plus élevée',RisingVeryRapidly:'Augmentation très rapide',RisingQuickly:'Augmentation rapide',Rising:'Augmentation',RisingSlowly:'Augmentation lente',Steady:'Constante',FallingSlowly:'Baisse lentement',Falling:'Baisse',FallingQuickly:'Baisse rapidement',FallingVeryRapidly:'Baisse très rapidement',maximum_info:'maximum',max_hour_info:'maximum par heure',minimum_info:'minimum',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO'],compass:['N','NE','E','SE','S','SO','O','NO'],months:['Jan','Fév','Mar','Avr','Mai','Jui','Jul','Aoû','Sep','Oct','Nov','Déc']};LANG.DE={canvasnosupport:'Ihr Browser hat keine HTML5 Canvas Unterstützung.<br>'+'Aktualisieren Sie Ihren Browser auf eine neuere Version, fast alle Browser unterstützen Canvas heutzutage, sogar der IE9!<br><br>'+'Sie werden auf eine \'Alte\' Gauge Seite umgeleitet...',led_title:'Fernsensor: Status unbekannt',led_title_ok:'Fernsensor: OK',led_title_lost:'Fernsensor: Kontakt verloren!',led_title_unknown:'Fernsensor: Status unbekannt!',led_title_offline:'Die Wetterstation ist derzeit offline.',weather:'Wetter',latitude:'Breitengrad',longitude:'Längengrad',elevation:'Höhe',statusStr:'Lade...',StatusMsg:'Lade Daten...',StatusHttp:'HTTP Anfrage fehlgeschlagen',StatusRetry:'Wiederhole...',StatusRetryIn:'Wiederhole in...',StatusTimeout:'Zeitüberschreitung',StatusPageLimit:'Automatisches Seitenupdate: Zeitlimit erreicht. Um fortzufahren auf die Status-LED klicken.',StatusLastUpdate:'Letzte Aktualisierung vor',StatusMinsAgo:'Minuten',StatusHoursAgo:'Stunden',StatusDaysAgo:'Tagen',realtimeCorrupt:'Geladene Textdatei ist beschädigt! Wiederhole...',timer:'Sekunden',at:'um',temp_title_out:'Temperatur',temp_title_in:'Temp. Innen',temp_out_info:'Außentemperatur',temp_out_web:'Außen',temp_in_info:'Innentemperatur',temp_in_web:'Innen',temp_trend_info:'Temperatur Trend',dew_title:'Taupunkt',dew_info:'Taupunkt',dew_web:'Taupunkt',apptemp_title:'Gefühlt',apptemp_info:'Gefühlte Temperatur',apptemp_web:'Gefühlt',feel_title:"Gefühlt wie",feel_info:"Gefühlte wie Temperatur",feel_web:"Gefühlt wie",chill_title:'Windkühle',chill_info:'Windkühle',chill_web:'Windkühle',heat_title:'Hitzeindex',heat_info:'Hitzeindex',heat_web:'Hitzeindex',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Regen',rrate_title:'Regenmenge',rrate_info:'Regenmenge',LastRain_info:'Letzter Regen',LastRainedT_info:'Heute um',LastRainedY_info:'Gestern um',hum_title_out:'Luftfeuchte',hum_title_in:'Luftfeuchte In',hum_out_info:'Luftfeuchte Außen',hum_in_info:'Luftfeuchte Innen',hum_out_web:'Außen',hum_in_web:'Innen',baro_title:'Luftdruck',baro_info:'Barometrischer Luftdruck',baro_trend_info:'Luftdruck Trend',wind_title:'Windstärke ',tenminavg_title:'Mittelwert Windstärke',tenminavgwind_info:'Mittelwert Windstärke (10 min)',maxavgwind_info:'Höchster Mittelwert Windstärke',tenmingust_info:'Windböe (10 min)',maxgust_info:'Höchste Windböe',latest_title:'Aktueller Wind',latestwind_info:'Aktuelle Windstärke',bearing_info:'Windrichtung',latest_web:'Aktuell',tenminavg_web:'Mittelwert',dominant_bearing:'vorherrschende Windrichtung Heute',calm:'ruhig',windrose:'Windrose',windruntoday:'Windmenge heute',uv_title:'UV Index',uv_levels:['keiner','keine Gefahr','kleines Risiko','hohes Risiko','sehr hohes Risiko','extremes Risiko'],uv_headlines:['Kein messbarer UV Index','Keine Gefahr für die durchschnittliche Person','Kleines Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne','Grosses Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne','Sehr hohes Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne','Extremes Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne'],uv_details:['Es ist entweder Nacht oder ein sehr bewölkter Tag.','Tragen Sie an hellen Tagen eine Sonnenbrille; verwenden Sie Sonnenschutzmittel<br>'+'wenn Sie besonders helle Haut haben oder wenn Schnee liegt welcher UV-Strahlung<br>'+'reflektiert.','Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme mit Lichtschutzfaktor<br>'+'30 oder höher. Bedecken Sie den Körper mit Kleidung und tragen Sie einen Hut.<br>'+'Suchen Sie um die Mittagszeit, wenn die Sonne am stärksten ist, Schatten auf.','Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme mit Lichtschutzfaktor<br>'+'30 oder höher. Schützen Sie den Körper durch entsprechende Kleidung und einen<br>'+'breitkrempigen Hut. Begrenzen Sie den Aufenthalt in der Sonne zwei Stunden vor bis<br>'+'drei Stunden nach dem solaren Mittag (ca. 11:00 - 16:00 Uhr in Ländern mit<br>'+'Sommerzeit) auf ein Minimum.','Benutzen Sie Sonnencreme, Lichtschutzfaktor 30 oder höher. Tragen Sie eine<br>'+'Sonnenbrille, T-Shirt und einen Hut. Bleiben Sie nicht zu lange in der Sonne.','Treffen Sie alle Vorsichtsmaßnahmen: tragen Sie eine Sonnenbrille und benutzen Sie<br>'+'Sonnencreme, Lichtschutzfaktor 30 oder höher, bedecken Sie den Körper mit einem<br>'+'langärmeligen T-Shirt, tragen Sie lange Hosen und einen breiten Hut, meiden Sie die<br>'+'Sonne zwei Stunden vor bis drei Stunden nach dem solaren Mittag (ca. 11:00 - 16:00<br>'+'Uhr in Ländern mit Sommerzeit).'],solar_title:'Sonnenstrahlung',solar_currentMax:'Aktueller theoretischer maximaler Messwert',solar_ofMax:'vom Maximum',solar_maxToday:'Heutiger maximaler Messwert',cloudbase_title:'Wolkenuntergrenze',cloudbase_popup_title:'Theoretische Wolkenuntergrenze',cloudbase_popup_text:'Die Berechnung ist einfach: 122 Meter für je 1,0 Grad Celsius Differenz zwischen<br>'+'Temperatur und Taupunkt. Beachte, dass dies nur die theoretische Höhe angibt,<br>'+'in der sich Cumulus Wolken formen, wenn die Luft gesättigt ist.',feet:'Fuß',metres:'Meter',miles:'Meilen',n_miles:'Seemeilen',km:'km',lowest_info:'Niedrigster',highest_info:'Höchster',lowestF_info:'Niedrigste',highestF_info:'Höchste',RisingVeryRapidly:'sehr schnell steigend',RisingQuickly:'schnell steigend',Rising:'steigend',RisingSlowly:'langsam steigend ',Steady:'konstant',FallingSlowly:'langsam fallend',Falling:'fallend',FallingQuickly:'schnell fallend',FallingVeryRapidly:'sehr schnell fallend',maximum_info:'Maximum',max_hour_info:'Max pro Stunde',minimum_info:'Minimum',coords:['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW'],compass:['N','NO','O','SO','S','SW','W','NW'],months:['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez']};LANG.NL={canvasnosupport:'Uw browser ondersteunt geen HTML5 Canvas .<br>'+'Gebruik een modernere browser of de laatste versie, bijna alle browsers ondersteunen Canvas nu, zelfs IE9!<br><br>'+'Je wordt naar de \'oude\' meters omgeleid ...',led_title:'Buitensensor status onbekend',led_title_ok:'Buitensensor OK',led_title_lost:'Buitensensor kontakt verloren!',led_title_unknown:'Buitensensor status onbekend!',led_title_offline:'Het weerstation is momenteel offline.',weather:'Weer',latitude:'Breedtegraad',longitude:'Lengtegraad',elevation:'Hoogte',statusStr:'Laden..',StatusMsg:'Data laden...',StatusHttp:'HTTP Aanvraag afgebroken',StatusRetry:'Opnieuw...',StatusRetryIn:'Opnieuw over..',StatusTimeout:'Tijd voorbij',StatusPageLimit:'Pagina auto-update limiet bereikt, pagina herladen om door te gaan',StatusLastUpdate:'Laatste update',StatusMinsAgo:'minuten geleden',StatusHoursAgo:'uren geleden',StatusDaysAgo:'dagen geleden',realtimeCorrupt:'Data zijn fout! Opnieuw...',timer:'Seconden',at:'om',temp_title_out:'Temperatuur',temp_title_in:'Binnentemperatuur',temp_out_info:'Buitentemperatuur',temp_out_web:'Buiten',temp_in_info:'Binnentemperatuur',temp_in_web:'Binnen',temp_trend_info:'Temperatuurtrend',dew_title:'Dauwpunt',dew_info:'Dauwpunt',dew_web:'Dauwpunt',apptemp_title:'Gevoel',apptemp_info:'Gevoelstemperatuur',apptemp_web:'Gevoel',feel_title:"Voelt als",feel_info:"Voelt als temperatuur",feel_web:"Voelt als",chill_title:"Wind Koude",chill_info:"Wind Koude",chill_web:"Wind Koude",heat_title:'Hitteindex',heat_info:'Hitteindex',heat_web:'Hitteindex',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Regen',rrate_title:'Regenhoeveelheid',rrate_info:'Regenhoeveelheid',LastRain_info:'Laatste regen',LastRainedT_info:'Vandaag om',LastRainedY_info:'Gisteren om',hum_title_out:'Luchtvochtigheid',hum_title_in:'Luchtvochtigheid binnen',hum_out_info:'Luchtvochtigheid buiten',hum_in_info:'Luchtvochtigheid binnen',hum_out_web:'Buiten',hum_in_web:'Binnen',baro_title:'Luchtdruk',baro_info:'Barometer luchtdruk',baro_trend_info:'Barometer trend',wind_title:'Wind ',tenminavg_title:'Gemiddelde windsnelheid',tenminavgwind_info:'Gemiddelde windsnelheid (10 min)',maxavgwind_info:'Hoogste gemiddelde windsnelheid',tenmingust_info:'Wind (10 min)',maxgust_info:'Zwaarste windvlagen',latest_title:'Huidige',latestwind_info:'Huidige windsnelheid',bearing_info:'Windrichting',latest_web:'Momenteel',tenminavg_web:'Gemiddelde',dominant_bearing:'Overheersende Windrichting',calm:'Windstil',windrose:'Windroos',windruntoday:'Wind richting vandaag',uv_title:'UV-Index',uv_levels:['Geen','Geen gevaar','Weinig gevaar','Hoog risico','Zeer hoog risico','Extreem risico'],uv_headlines:['Geen meetbare UV Index','Geen gevaar voor de gewone mens','Kleine kans op zonnebrand bij onbeschermde huid','Hoog risico op zonnebrand bij onbeschermde huid','Zeer hoog risico op zonnebrand bij onbeschermde huid','Extreem risico op zonnebrand bij onbeschermde huid'],uv_details:['Het is nog steeds nacht of het is een zeer bewolkte dag.','Draag een zonnebril bij heldere dagen, gebruik zonnecreme bij een sneeuwlaag,<br>'+'omdat die UV-straling terugkaatst, of bij zeer bleke huid.','Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, draag beschermende kledij en<br>'+'een hoed en ga uit de zon tijdens de middaguren wanneer de zon op zijn hoogst staat.','Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, smeer u goed in<br>'+'draag beschermende kledij met een breedgerande hoed, beperk uw tijd in de zon van twee uur voor<br>'+'tot drie uur na de middagzon (ongeveer van 11:00 uur tot 16:00 uur tijdens de zomertijd.','Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, beschermende kledij en een hoed.<br>'+'Blijf niet te lang in de zon.','Neem alle voorzorgen, waaronder: zonnebril, zonnecreme met beschermingsfactor 30 of meer,<br>'+'een t-shirt met lange mouwen, een broek en een breedgerande hoed, en<br>'+'vermijd de middagzon vanaf 11:00 uur tot 16:00 uur, tijdens de zomer.'],solar_title:'Zonnestraling',solar_currentMax:'Huidige theoretische maximale waarde',solar_ofMax:'van maximum',solar_maxToday:'Maximale  waarde vandaag',cloudbase_title:'Wolkenbasis',cloudbase_popup_title:'Theoretische wolkenbasis',cloudbase_popup_text:'De berekening is ongecompliceerd; 1000 voet voor elke 4.4 graden Fahrenheit<br>'+'verschil tussen de temperatuur en dauwpunt. Let op dat dit eenvoudig<br>'+'de theoretische hoogte weergeeft wanneer Cumulus wolken zich zouden vormen, en de<br>'+'lucht verzadigd wordt',feet:'feet',metres:'meter',miles:'mijl',n_miles:'zeemijlen',km:'km',lowest_info:'Laagste',highest_info:'Hoogste',lowestF_info:'Laagste',highestF_info:'Hoogste',RisingVeryRapidly:'Zeer snel stijgend',RisingQuickly:'Snel stijgend',Rising:'Stijgend',RisingSlowly:'Langzaam stijgend',Steady:'Constant',FallingSlowly:'Langzaam dalend',Falling:'Dalend',FallingQuickly:'Snel dalend',FallingVeryRapidly:'Zeer snel dalend',maximum_info:'Maximum',max_hour_info:'Max per uur',minimum_info:'Minimum',coords:['N','NNO','NO','ONO','O','OZO','ZO','ZZO','Z','ZZW','ZW','WZW','W','WNW','NW','NNW'],compass:['N','NO','O','ZO','Z','ZW','W','NW'],months:['Jan','Feb','Mrt','Apr','Mei','Jun','Jul','Aug','Sep','Okt','Nov','Dec']};LANG.SE={canvasnosupport:'Tyvärr... Ingen HTML5 Canvas support i din webläsare...<br>'+'Pröva att uppgradera din webläsare till en senare version!<br><br>'+'Styr om till en äldre sida med mätare...',led_title:'Väderstationens status är okänd',led_title_ok:'Väderstationen OK',led_title_lost:'Har tappat kontakten med väderstationen!',led_title_unknown:'Väderstationens status är okänd!',led_title_offline:'Väderstationen är för närvarande ej nåbar.',weather:'v&#228;der',latitude:'Latitud',longitude:'Longitud',elevation:'Altitud',statusStr:'Laddar...',StatusMsg:'Laddar ned...',StatusHttp:'HTTP-begäran misslyckades',StatusRetry:'Försöker på nytt...',StatusRetryIn:'Försök om...',StatusTimeout:'Timed out',StatusPageLimit:'Page auto-update limit reached, refresh your browser to continue',StatusLastUpdate:'Senaste uppdatering för',StatusMinsAgo:'minuter sedan',StatusHoursAgo:'timmar sedan',StatusDaysAgo:'dagar sedan',realtimeCorrupt:'Den nedladdade filen är felaktig! Försöker på nytt...',timer:'sekunder',at:'vid',temp_title_out:'Temperatur',temp_title_in:'Innetemp',temp_out_info:'Utetemp',temp_out_web:'Ute',temp_in_info:'Innetemp',temp_in_web:'Inne',temp_trend_info:'Trend - temp',dew_title:'Daggpunkt',dew_info:'Daggpunkt',dew_web:'Daggpunkt',apptemp_title:'Upplevd',apptemp_info:'Upplevd (känns som) temperatur',apptemp_web:'Upplevd',feel_title:"Feels Like",feel_info:"Feels Like temperatur",feel_web:"Feels Like",chill_title:'Köldeffekt',chill_info:'Köldeffekt',chill_web:'Köldeffekt',heat_title:'Värmeindex',heat_info:'Värmeindex',heat_web:'Värmeindex',humdx_title:'Fuktindex',humdx_info:'Fuktindex',humdx_web:'Fuktindex',rain_title:'Nederbörd',rrate_title:'Nederbörd',rrate_info:'Nederbördintensitet',LastRain_info:'Senaste nederbörd',LastRainedT_info:'Idag vid',LastRainedY_info:'Igår vid',hum_title_out:'Fukt. ute',hum_title_in:'Fukt. inne',hum_out_info:'Fukt. ute',hum_in_info:'Fukt. inne',hum_out_web:'Fukt. ute',hum_in_web:'Fukt. inne',baro_title:'Lufttryck',baro_info:'Lufttryck',baro_trend_info:'Trend - lufttryck',wind_title:'Vind',tenminavg_title:'Medelvind',tenminavgwind_info:'Medelvind (10 min)',maxavgwind_info:'Max medelvind',tenmingust_info:'Byvind (10 min)',maxgust_info:'Max byvind',latest_title:'Senaste vind',latestwind_info:'Senaste vind',bearing_info:'Riktning',latest_web:'Senaste',tenminavg_web:'Medel',dominant_bearing:'Dominerande vindriktning',calm:'lugn',windrose:'Vindros',windruntoday:'Vindsträcka',uv_title:'UV Index',uv_levels:['None','Ingen fara','Liten risk','Hög risk','Mycket hög risk','Extrem risk'],uv_headlines:['No measurable UV Index','Ingen fara för normalindividen','Liten skaderisk vid oskyddad solexponering','Hög skaderisk vid oskyddad solexponering','Väldigt hög skaderisk vid oskyddad solexponering','Extrem skaderisk vid oskyddad solexponering'],uv_details:['It is still night time or it is a very cloudy day.','Använd solglasögon molnfria dagar, använd solskydd om det finns snö på marken,<br>'+'som reflekterar UV-strålningen, eller om du har omtålig hy.','Använd solglasögon och solskyddsfaktor 30+, täck hud med klädsel och<br>'+'huvudbonad, sök skugga vid middagstid då solen är som intensivast.','Använd solglasögon och solskyddsfaktor 30+, täck hud med solskyddande klädsel och<br>'+'bredbrättad huvudbonad, begränsa tiden i solen under två timmar före<br>'+'och tre timmar efter då solen står som högst (~11:00 till 16:00 under sommarperioden i<br>'+'områden med sommartid).','Använd solskyddsfaktor 30+, skjorta, solglasögon och huvudbonad.<br>'+'Vistas inte utomhus onödigt mycket.','Vidtag alla försiktighetsåtgärder: använd solglasögon och solskyddsfaktor 30+,<br>'+'täck kroppen med långärmad skjorta och långbyxor, använd bredbrättad huvudbonad,<br>'+'undvik solen under två timmar före och tre timmar efter då solen står som högst (~11:00 till<br>'+'16:00 under sommarperioden i områden med sommartid).'],solar_title:'Solar Radiation',solar_currentMax:'Current theoretical maximum reading',solar_ofMax:'of maximum',solar_maxToday:'Today\'s maximum reading',cloudbase_title:'Molnbas',cloudbase_popup_title:'Teoretisk molnbas',cloudbase_popup_text:'Beräkningen är enkel; 1000 fot för varje 4.4 grader Fahrenheit<br>'+'skillnaden mellan temperaturen och daggpunkten. Observera att detta bara<br>'+'ger den teoretiska höjden där Cumulusmoln skulle börja bildas, när<br>'+'luften är mättad',feet:'feet',metres:'meter',miles:'miles',n_miles:'sjömil',km:'km',lowest_info:'Lägsta',highest_info:'Högsta',lowestF_info:'Lägsta',highestF_info:'Högsta',RisingVeryRapidly:'Stiger mycket snabbt',RisingQuickly:'Stiger snabbt',Rising:'Stigande',RisingSlowly:'Stigande långsamt',Steady:'Konstant',FallingSlowly:'Faller långsamt',Falling:'Fallande',FallingQuickly:'Fallande snabbt',FallingVeryRapidly:'Fallande mycket snabbt',maximum_info:'Max',max_hour_info:'Max per timma',minimum_info:'Min',coords:['N','NNO','NO','ONO','O','OSO','SO','SSO','S','SSW','SW','WSW','W','WNW','NW','NNW'],compass:['N','NO','O','SO','S','SW','W','NW'],months:['Jan','Feb','Mar','Apr','Maj','Jun','Jul','Aug','Sep','Okt','Nov','Dec']};LANG.DK={canvasnosupport:'Din browser understøtter ikke HTML5 lærred...<br>'+'Opdatere din browser til en nyere version - næsten alle browsere understøter lærred nu - selv Internet Explorer 9!<br><br>'+'Du omdirigeres til vores gamle forside...',led_title:'Status ukendt',led_title_ok:'Status OK',led_title_lost:'Ingen kontakt til vejrstationen!',led_title_unknown:'Status ukendt!',led_title_offline:'Vejrstationen er pt. offline.',weather:'vejret',latitude:'Breddegrad',longitude:'Længdegrad',elevation:'Højde over havet',statusStr:'Henter...',StatusMsg:'Downloader...',StatusHttp:'HTTP forespørgsel fejlede',StatusRetry:'Prøver igen...',StatusRetryIn:'Prøver om...',StatusTimeout:'Timed out',StatusPageLimit:'Sidens grænse for opdateringer blev nået, opdater din browser for at fortsætte',StatusLastUpdate:'Seneste opdatering',StatusMinsAgo:'minutter siden',StatusHoursAgo:'timer siden',StatusDaysAgo:'dage siden',realtimeCorrupt:'Fejl på vejrdatafilen - prøver igen...',timer:'sekunder',at:'kl.',temp_title_out:'Temperatur',temp_title_in:'Inde temp',temp_out_info:'Ude temperatur',temp_out_web:'Ude',temp_in_info:'Inde temperatur',temp_in_web:'Inde',temp_trend_info:'Temperatur tendens',dew_title:'Dugpunkt',dew_info:'Dugpunkt',dew_web:'Dugpunkt',apptemp_title:'Komfort',apptemp_info:'Komfort (føles som) temperatur',apptemp_web:'Komfort',feel_title:"føles som",feel_info:"føles som temperatur",feel_web:"føles som",chill_title:'Vindchill',chill_info:'Vindchill',chill_web:'Vindchill',heat_title:'Hedeindex',heat_info:'Hedeindex',heat_web:'Hedeindex',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Regn',rrate_title:'Regnrate',rrate_info:'Regnrate',LastRain_info:'Seneste regn',LastRainedT_info:'I dag kl.',LastRainedY_info:'I går kl.',hum_title_out:'Fugtighed',hum_title_in:'Inde fugt',hum_out_info:'Ude fugtighed',hum_in_info:'Inde fugtighed',hum_out_web:'Ude',hum_in_web:'Inde',baro_title:'Barometer',baro_info:'Barometer',baro_trend_info:'Barometer tendens',wind_title:'Vindhastighed',tenminavg_title:'Gennemsnitlig vindhastighed',tenminavgwind_info:'Gennemsnitlig vindhastighed (10 min)',maxavgwind_info:'Maximum gennemsnitlig vindhastighed',tenmingust_info:'Vindstød (10 min)',maxgust_info:'Maximum vindstød',latest_title:'Seneste vind',latestwind_info:'Seneste vindhastighed',bearing_info:'Retning',latest_web:'Seneste',tenminavg_web:'Gennemsnit',dominant_bearing:'Dominant wind today',calm:'calm',windrose:'Wind Rose',windruntoday:'Wind run today',uv_title:'UV index',uv_levels:['Ingen','Ingen fare','Lille risiko','Høj risiko','Meget høj risiko','Ekstrem risko'],uv_headlines:['Ingen målbar UV index','Ingen fare for personskade','Lille risiko for skade hvis der ikke bruges solbeskyttelse','Stor risiko for skade, hvis der ikke bruges solbeskyttelse','Meget stor risiko for skade, hvis der ikke bruges solbeskyttelse','Ekstrem risiko for skade, hvis der ikke bruges solbeskyttelse'],uv_details:['Det er stadig mørkt - eller en meget skyet dag.','Brug solbriller på lyse dage, brug solcreme hvis der er sne på jorden,<br/>'+'som reflekterer UV stråling, eller hvis du har en særlig sart hud.','Brug solbriller og solcreme faktor 30+, tildæk kroppen med tøj og<br/>'+'hat, og søg skygge mellem 12 og 14, hvor solen er mest intens.','Brug solbriller og solcreme faktor 30+, tildæk kroppen med solbeskyttende<br/>'+'tøjh og brug en bredskygget hat. Søg skygge mellem 11 og 15<br/>','Brug solcreme faktor 30+, trøje, solbriller og en hat.<br/>'+'Ophold dig ikke i solen i lang tid.','Tag alle forholdsregler: Brug solbriller og solcreme faktor 30+,<br/>'+'tildæk korppen med langærmet trøje og bukser. Brug en meget stor hat og<br/>'+'undgå solen mellem 11 og 15'],solar_title:'Solstråling',solar_currentMax:'Max. muligt',solar_ofMax:'af maximum',solar_maxToday:'Maximum i dag',cloudbase_title:'skyhøjde basen',cloudbase_popup_title:'Theoretical cloud base',cloudbase_popup_text:'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>'+'difference between the temperature and the dew point. Note that this simply<br>'+'gives the theoretical height at which Cumulus clouds would begin to form, the<br>'+'air being saturated',feet:'feet',metres:'meters',miles:'miles',n_miles:'sømil',km:'km',lowest_info:'Laveste',highest_info:'Højeste',lowestF_info:'Laveste',highestF_info:'Højeste',RisingVeryRapidly:'Meget hurtigt stigende',RisingQuickly:'Hurtigt stigende',Rising:'Stigende',RisingSlowly:'Langsomt stigende',Steady:'Stabil',FallingSlowly:'Langsomt faldende',Falling:'Faldende',FallingQuickly:'Hurtigt faldende',FallingVeryRapidly:'Meget hurtigt faldende',maximum_info:'Maximum',max_hour_info:'Max pr. time',minimum_info:'Minimum',coords:['N','NNØ','NØ','ØNØ','Ø','ØSØ','SØ','SSØ','S','SSV','SV','VSV','V','VNV','NV','NNV'],compass:['N','NØ','Ø','SØ','S','SV','V','NV'],months:['Jan','Feb','Mar','Apr','MaJ','Jun','Jul','Aug','Sep','OKt','Nov','Dec']};LANG.FI={canvasnosupport:'Selaimesi ei tue HTML5 Canvas tekniikkaa... Sorry...<br>'+'Päivitä selain uudempaan versioon - melkein kaikki tukevat Canvas tekniikkaa, myös IE9!<br><br>'+'Siirrytään sivulle ilman HMTL5/Canvas mittareita...',led_title:'Päivityksen tila tuntematon',led_title_ok:'Päivitys OK',led_title_lost:'Tietoliikenneyhteys poikki!',led_title_unknown:'Päivityksen tila tuntematon!',led_title_offline:'Sääasema on offline tilassa.',weather:'sää',latitude:'Latitude',longitude:'Longitude',elevation:'Korkeus merenpinnasta',statusStr:'Ladataan...',StatusMsg:'Ladataan...',StatusHttp:'HTTP pyyntö epäonnistui',StatusRetry:'Yritetään uudelleen...',StatusRetryIn:'Uusi yritys...',StatusTimeout:'Aikakatkaistiin',StatusPageLimit:'Sivun automaattisten latausten lukumäärä on saavutettu, päivitä selaimen näkymä jatkaaksesi!',StatusLastUpdate:'Päivitetty',StatusMinsAgo:'minuuttia sitten',StatusHoursAgo:'tuntia sitten',StatusDaysAgo:'päivää sitten',realtimeCorrupt:'Tekstitiedoston lataus epäonnistui! Yritetään uudelleen...',timer:'sekuntia',at:'klo.',temp_title_out:'Lämpötila',temp_title_in:'Sisälämpötila',temp_out_info:'Ulkolämpötila',temp_out_web:'Ulko',temp_in_info:'Sisälämpötila',temp_in_web:'Sisä',temp_trend_info:'Lämpötilan muutos',dew_title:'Kastepiste',dew_info:'Kastepiste',dew_web:'Kastepiste',apptemp_title:'Näennäinen',apptemp_info:'Näennäinen (tuntuu-kuin) lämpötila',apptemp_web:'Näennäinen',feel_title:"Feels Like",feel_info:"Feels Like Temperature",feel_web:"Feels Like",chill_title:'Hyytävyys',chill_info:'Hyytävyys',chill_web:'Hyytävyys',heat_title:'Tukaluus',heat_info:'Tukaluus',heat_web:'Tukaluus',humdx_title:'Kosteusindeksi',humdx_info:'Kosteusindeksi',humdx_web:'Kosteusindeksi',rain_title:'Sademäärä',rrate_title:'Voimakkuus',rrate_info:'Sateen voimakkuus',LastRain_info:'Viimeksi satanut',LastRainedT_info:'Tänään',LastRainedY_info:'Eilen',hum_title_out:'Ilmankosteus',hum_title_in:'Sisäilmankosteus',hum_out_info:'Ilmankosteus',hum_in_info:'Sisäilmankosteus',hum_out_web:'Ulko',hum_in_web:'Sisä',baro_title:'Ilmanpaine',baro_info:'Ilmanpaine',baro_trend_info:'Ilmanpaineen muutos',wind_title:'Tuulen nopeus',tenminavg_title:'Keskimääräinen tuulen nopeus',tenminavgwind_info:'Keskimääräinen tuulen nopeus (10 min)',maxavgwind_info:'Korkein keskituulen nopeus',tenmingust_info:'Puuskatuuli (10 min)',maxgust_info:'Kovin tuulen puuska',latest_title:'Viimeisin tuuli',latestwind_info:'Viimeisin tuulen nopeus',bearing_info:'Suunta',latest_web:'Viimeisin',tenminavg_web:'Keskimäärin',dominant_bearing:'Hallitseva tuulen suunta tänään',calm:'tyyntä',windrose:'Tuuliruusu',windruntoday:'Tuulen matka tänään',uv_title:'UV Indeksi',uv_levels:['n/a','Heikko','Kohtalainen','Voimakas','Hyvin voimakas','Äärimmäisen voimakas'],uv_headlines:['Ei mitattavissa olevaa UV säteilyä','Ei vaaraa normaali henkilölle','Vähäinen vaara suojaamattomassa auringonpaisteessa','Vaara suojaamattomassa auringonpaisteessa','Suuri vaara suojaamattomassa auringonpaisteessa','Äärimmäisen suuri vaara suojaamattomassa auringonpaisteessa'],uv_details:['On yöaika tai erittäin pilvistä.','Käytä aurinkolaseja. Käytä aurinkosuojavoidetta jos maassa on lunta tai jos ihosi on erityisen herkkä.','Käytä aurinkolaseja ja aurinkosuojavoidetta. Suojaa iho vaatteilla ja päähineellä <br>'+'ja pysyttele varjoisassa ympäristössä keskipäivän tienoilla, kun auringon paiste on voimakkaimmillaan.','Käytä aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vähintään 15. <br>'+'Suojaa iho vaatteilla ja leveälierisellä päähineellä. Vähennä ulkonaoloa kello 11:n ja 16:n välillä.','Käytä aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vähintään 15. <br>'+'Suojaa iho vaatteilla ja leveälierisellä päähineellä. Vähennä ulkonaoloa kello 11:n ja 16:n välillä.','Varaudu säteilyyn kaikin mahdollisin tavoin, käytä aurinkolaseja ja aurinkovoidetta, <br>'+'suojaa vartalo pitkähihaisella paidalla ja pitkillä housuilla, käytä leveälieristä päähinettä <br>'+'ja vältä aurinkoa kello 11:n ja 16:n välillä.'],solar_title:'Auringon säteilyteho',solar_currentMax:'Teorettinen maksimisäteily nyt',solar_ofMax:'maksimista',solar_maxToday:'Maksimisäteily tänään',cloudbase_title:'Pilvien korkeus',cloudbase_popup_title:'Teoreettinen pilvien korkeus',cloudbase_popup_text:'Laskentatapa on yksinkertainen; 1000 jalkaa jokaista 4.4 Fahrenheit aste-<br><br>'+'eroa lämpötilan ja kastepisteen välillä. Huomaa että tämä yksinkertaisesti<br>'+'antaa vain teoreettisen korkeuden jossa kumpupilviä alkaisi muodostua,<br>'+'ilman ollessa kylläinen',feet:'feet',metres:'metriä',miles:'miles',n_miles:'n.miles',km:'km',lowest_info:'Alin',highest_info:'Korkein',lowestF_info:'Alin',highestF_info:'Korkein',RisingVeryRapidly:'Nousee erittäin nopeasti',RisingQuickly:'Nousee nopeasti',Rising:'Nousee',RisingSlowly:'Nousee hitaasti',Steady:'Vakaa',FallingSlowly:'Laskee hitaasti',Falling:'Laskee',FallingQuickly:'Laskee nopeasti',FallingVeryRapidly:'Laskee erittäin nopeasti',maximum_info:'Korkein',max_hour_info:'Suurin sademäärä tunnissa',minimum_info:'Alin',coords:['P','PKO','KO','IKO','I','IKA','KA','EKA','E','ELO','LO','LLO','L','LLU','LU','PLU'],compass:['P','KO','I','KA','E','LO','L','LU'],months:['Tammikuuta','Helmikuuta','Maaliskuuta','Huhtikuuta','Toukokuuta','Kesäkuuta','Heinäkuuta','Elokuuta','Syyskuuta','Lokakuuta','Marraskuuta','Joulukuuta']};LANG.NO={canvasnosupport:'Ingen HTML5 Canvas-støtte i nettleseren din ... Beklager ...<br>'+'Prøv å oppgradere nettleseren til en nyere versjon - nesten alle nettlesere støtter Canvas nå, selv IE9!<br><br>'+'Omdirigerer deg til den \'gamle\' målersiden ...',led_title:'Fjernsensor: Status ukjent',led_title_ok:'Fjernsensor: OK',led_title_lost:'Fjernsensor: Mistet kontakt!',led_title_unknown:'Fjernsensor: Status ukjent!',led_title_offline:'Værstasjonen er ikke aktiv.',weather:'vær',latitude:'Breddegrad',longitude:'Lengdegrad',elevation:'Høyde',statusStr:'Laster...',StatusMsg:'Laster ned...',StatusHttp:'HTTP forespørsel mislyktes',StatusRetry:'Prøver igjen...',StatusRetryIn:'Prøver igjen om...',StatusTimeout:'Tidsavbrutt',StatusPageLimit:'Sidens automatiske oppdatering er nådd, du må oppdatere (F5) siden for å fortsette',StatusLastUpdate:'Siste oppdatering',StatusMinsAgo:'minutter siden',StatusHoursAgo:'timer siden',StatusDaysAgo:'dager siden',realtimeCorrupt:'Tekstfilnedlasting avbrutt! Prøver på nytt ...',timer:'sekunder',at:'klokken',temp_title_out:'Utetemperatur',temp_title_in:'Innetemperatur',temp_out_info:'Utetemperatur',temp_out_web:'Utendørs',temp_in_info:'Innetemperatur',temp_in_web:'Innendørs',temp_trend_info:'Temperaturtrend',dew_title:'Duggpunkt',dew_info:'Duggpunkt',dew_web:'Duggpunkt',apptemp_title:'Følt',apptemp_info:'Følt temperatur',apptemp_web:'Følt',feel_title:"Følt temp.",feel_info:"Følt temperatur",feel_web:"Følt temp.",chill_title:'Vindfaktor',chill_info:'Vindfaktor',chill_web:'Vindfaktor',heat_title:'Varmeindeks',heat_info:'Varmeindeks',heat_web:'Varmeindeks',humdx_title:'Luftfuktighet',humdx_info:'Luftfuktighet',humdx_web:'Luftfuktighet',rain_title:'Nedbør',rrate_title:'Nedbør',rrate_info:'Nedbørsrate',LastRain_info:'Sist nedbør',LastRainedT_info:'I dag klokken',LastRainedY_info:'I går klokken',hum_title_out:'Luftfuktighet',hum_title_in:'Luftfuktighet inne',hum_out_info:'Luftfuktighet ute',hum_in_info:'Luftfuktighet inne',hum_out_web:'Utendørs',hum_in_web:'Innendørs',baro_title:'Trykk',baro_info:'Barometrisk trykk',baro_trend_info:'Trykktrend',wind_title:'Vindhastighet',tenminavg_title:'Snitt vindhastighet',tenminavgwind_info:'Snitt vindhastighet (10 min)',maxavgwind_info:'Maks. snitt vindhastighet',tenmingust_info:'Vindkast (10 min)',maxgust_info:'Høyeste vindkast',latest_title:'Siste vind',latestwind_info:'Siste vindhastighet',bearing_info:'Retning',latest_web:'Siste',tenminavg_web:'Snitt',dominant_bearing:'Dominerende vind i dag',calm:'stille',windrose:'Vindrose',windruntoday:'Vindstrekning i dag',uv_title:'UV Indeks',uv_levels:['Ingen','Ingen fare','Liten risiko','Høy risiko','Veldig høy risiko','Ekstrem risiko'],uv_headlines:['Ingen målbar UV Indeks','Ingen fare for en \'gjennomsnittlig\' person','Liten risiko for skade fra ubeskyttet soling','Høy risiko for skade fra ubeskyttet soling','Svært høy risiko for skade fra ubeskyttet soling','Ekstrem risiko for skade fra ubeskyttet soling'],uv_details:['Det er fortsatt natt - eller det er en veldig overskyet dag.','Bruk solbriller på lyse dager, bruk solkrem hvis det er snø på bakken,<br>'+'som reflekterer UV-stråling - hvis du ikke har spesielt god hud.','Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>'+'en lue, søk skygge midt på dagen når solen er mest intens.','Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>'+'klær og en skyggelue, reduser tid i solen fra to timer før<br>'+'til tre timer etter at solen er på det høyeste (ca 11:00 til 16:00 om sommeren i<br>'+'(soner som bruker sommertid).','Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>'+'Ikke være ute i solen for lenge.','Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>'+'dekk kroppen med en langermet skjorte og bukse, bruk skyggelue og<br>'+'unngå solen fra to timer før til tre timer etter at solen er på det høyeste (ca 11:00<br>'+'til 16:00 om sommeren i soner som bruker sommertid).'],solar_title:'Solstråling',solar_currentMax:'Nåværende teoretiske maksimale måling',solar_ofMax:'av maksimalt',solar_maxToday:'Dagens maksimale måling',cloudbase_title:'Skybase',cloudbase_popup_title:'Teoretisk skybase',cloudbase_popup_text:'Beregningen er en enkel en; 1000 feet for hver 4,4 grader Fahrenheit<br>'+'forskjell mellom temperaturen og duggpunktet. Legg merke til at dette<br>'+'gir bare den teoretiske høyden hvor cumulusskyer ville begynne å dannes, når<br>'+'luften er mettet.',feet:'feet',metres:'meter',miles:'miles',n_miles:'n.mil',km:'km',lowest_info:'Lavest',highest_info:'Høyest',lowestF_info:'Lavest',highestF_info:'Høyest',RisingVeryRapidly:'Øker veldig raskt',RisingQuickly:'Øker raskt',Rising:'Øker',RisingSlowly:'Øker sakte',Steady:'Jevn',FallingSlowly:'Faller sakte',Falling:'Faller',FallingQuickly:'Faller raskt',FallingVeryRapidly:'Faller veldig raskt',maximum_info:'Maks.',max_hour_info:'Maks. pr. time',minimum_info:'Min.',coords:['N','NNØ','NØ','ØNØ','Ø','ØSØ','SØ','SSØ','S','SSV','SV','VSV','V','VNV','NV','NNV'],compass:['N','NØ','Ø','SØ','S','SV','V','NV'],months:['Jan','Feb','Mar','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Des']};LANG.NB={canvasnosupport:"Ingen HTML5 Canvas-støtte i nettleseren din ... Beklager ...<br>Prøv å oppgradere nettleseren til en nyere versjon - nesten alle nettlesere støtter Canvas nå, selv IE9!<br><br>Omdirigerer deg til den 'gamle' målersiden ...",led_title:"Fjernsensor: Status ukjent",led_title_ok:"Fjernsensor: OK",led_title_lost:"Fjernsensor: Mistet kontakt!",led_title_unknown:"Fjernsensor: Status ukjent!",led_title_offline:"Værstasjonen er ikke aktiv.",weather:"vær",latitude:"Breddegrad",longitude:"Lengdegrad",elevation:"Høyde",statusStr:"Laster...",StatusMsg:"Laster ned...",StatusHttp:"HTTP forespørsel mislyktes",StatusRetry:"Prøver igjen...",StatusRetryIn:"Prøver igjen om...",StatusTimeout:"Tidsavbrutt",StatusPageLimit:"Automatisk oppdatering er tidsbegrenset, du må oppdatere (F5) siden for å fortsette",StatusLastUpdate:"Siste oppdatering",StatusMinsAgo:"minutter siden",StatusHoursAgo:"timer siden",StatusDaysAgo:"dager siden",realtimeCorrupt:"Tekstfilnedlasting avbrutt! Prøver på nytt ...",timer:"sekunder",at:"klokken",temp_title_out:"Temperatur",temp_title_in:"Innetemperatur",temp_out_info:"Utetemperatur",temp_out_web:"Ute",temp_in_info:"Innetemperatur",temp_in_web:"Inne",temp_trend_info:"Temperaturtrend",dew_title:"Doggpunkt",dew_info:"Doggpunkt",dew_web:"Doggpunkt",apptemp_title:"Opplevd",apptemp_info:"Opplevd temperatur",apptemp_web:"Opplevd",feel_title:"Følt temp.",feel_info:"Følt temperatur",feel_web:"Følt temp.",chill_title:"Vindfaktor",chill_info:"Vindfaktor",chill_web:"Vindfaktor",heat_title:"Varmeindeks",heat_info:"Varmeindeks",heat_web:"Varmeindeks",humdx_title:"Humidex",humdx_info:"Humidex",humdx_web:"Humidex",rain_title:"Nedbør",rrate_title:"Nedbør",rrate_info:"Nedbørsrate",LastRain_info:"Sist nedbør",LastRainedT_info:"I dag klokken",LastRainedY_info:"I går klokken",hum_title_out:"Luftfuktighet",hum_title_in:"Luftfuktighet inne",hum_out_info:"Luftfuktighet ute",hum_in_info:"Luftfuktighet inne",hum_out_web:"Utendørs",hum_in_web:"Innendørs",baro_title:"Trykk",baro_info:"Barometrisk trykk",baro_trend_info:"Trykktrend",wind_title:"Vindstyrke",tenminavg_title:"Snitt vindstyrke",tenminavgwind_info:"Snitt vindstyrke (10 min)",maxavgwind_info:"Maks. snitt vindstyrke",tenmingust_info:"Vindkast (10 min)",maxgust_info:"Kraftigste vindkast",latest_title:"Siste vind",latestwind_info:"Siste vind",bearing_info:"Retning",latest_web:"Siste",tenminavg_web:"Snitt",dominant_bearing:"Dominerende vind i dag",calm:"stille",windrose:"Vindrose",windruntoday:"Vindstrekning i dag",uv_title:"UV Indeks",uv_levels:["Ingen","Ingen fare","Liten risiko","Høy risiko","Veldig høy risiko","Ekstrem risiko"],uv_headlines:["Ingen målbar UV Indeks","Ingen fare for en 'gjennomsnittlig' person","Liten risiko for skade fra ubeskyttet soling","Høy risiko for skade fra ubeskyttet soling","Svært høy risiko for skade fra ubeskyttet soling","Ekstrem risiko for skade fra ubeskyttet soling",],uv_details:["Det er fortsatt natt - eller det er en veldig overskyet dag.","Bruk solbriller på lyse dager, bruk solkrem hvis det er snø på bakken,<br>som reflekterer UV-stråling - hvis du ikke har spesielt god hud.","Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>en lue, søk skygge midt på dagen når solen er mest intens.","Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>klær og en skyggelue, reduser tid i solen fra to timer før<br>til tre timer etter at solen er på det høyeste (ca 11:00 til 16:00 om sommeren i<br>(soner som bruker sommertid).","Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>Ikke være ute i solen for lenge.","Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>dekk kroppen med en langermet skjorte og bukse, bruk skyggelue og<br>unngå solen fra to timer før til tre timer etter at solen er på det høyeste (ca 11:00<br>til 16:00 om sommeren i soner som bruker sommertid).",],solar_title:"Solstråling",solar_currentMax:"Nåværende teoretiske maksimale måling",solar_ofMax:"av maksimalt",solar_maxToday:"Dagens maksimale måling",cloudbase_title:"Skyhøyde",cloudbase_popup_title:"Teoretisk skyhøyde",cloudbase_popup_text:"Beregningen er en enkel en: 300 meter for hver 2,5 grader Celsius<br>forskjell mellom temperaturen og duggpunktet. Legg merke til at dette<br>gir bare den teoretiske høyden hvor cumulusskyer ville begynne å dannes, <br>når luften er mettet.",feet:"fot",metres:"meter",miles:"mil",n_miles:"n.mil",km:"km",lowest_info:"Lavest",highest_info:"Høyest",lowestF_info:"Lavest",highestF_info:"Høyest",RisingVeryRapidly:"Øker veldig raskt",RisingQuickly:"Øker raskt",Rising:"Øker",RisingSlowly:"Øker sakte",Steady:"Jevn",FallingSlowly:"Faller sakte",Falling:"Faller",FallingQuickly:"Faller raskt",FallingVeryRapidly:"Faller veldig raskt",maximum_info:"Maks.",max_hour_info:"Maks. pr. time",minimum_info:"Min.",coords:["N","NNØ","NØ","ØNØ","Ø","ØSØ","SØ","SSØ","S","SSV","SV","VSV","V","VNV","NV","NNV"],compass:["N","NØ","Ø","SØ","S","SV","V","NV"],months:["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"],};LANG.NN={canvasnosupport:"Nettlesar stør ikkje HTML5 Canvas-støtte ... Orsak ...<br>Oppgradere nettlesaren til ein nyare versjon - nesten alle nettlsarar støtter Canvas nå, sjølv IE9!<br><br>Omdirigerer deg til den 'gamle' sida for Instrument ...",led_title:"Fjernsensor: Status ukjend",led_title_ok:"Fjernsensor: OK",led_title_lost:"Fjernsensor: Mista kontakt!",led_title_unknown:"Fjernsensor: Status ukjend!",led_title_offline:"Vêrstasjonen er ikkje aktiv.",weather:"vêr",latitude:"Breidegrad",longitude:"Lengdegrad",elevation:"Høgde",statusStr:"Lastar...",StatusMsg:"Lastar ned...",StatusHttp:"HTTP forespurnad mislykkast",StatusRetry:"Prøver igjen...",StatusRetryIn:"Prøver igjen om...",StatusTimeout:"Tidsavbrot",StatusPageLimit:"Automatisk oppdatering er tidsbegrensa, du må oppdatere (F5) sida for å fortsette",StatusLastUpdate:"Siste oppdatering",StatusMinsAgo:"minutter sidan",StatusHoursAgo:"timar sidan",StatusDaysAgo:"dagar sidan",realtimeCorrupt:"Tekstfilnedlasting avbrote! Prøver på nytt ...",timer:"sekundar",at:"klokka",temp_title_out:"Temperatur",temp_title_in:"Innetemperatur",temp_out_info:"Utetemperatur",temp_out_web:"Ute",temp_in_info:"Innetemperatur",temp_in_web:"Inne",temp_trend_info:"Temperaturtrend",dew_title:"Doggpunkt",dew_info:"Doggpunkt",dew_web:"Doggpunkt",apptemp_title:"Opplevd",apptemp_info:"Opplevd temperatur",apptemp_web:"Opplevd",feel_title:"Følt temp.",feel_info:"Følt temp.",feel_web:"Følt temp.",chill_title:"Vindfaktor",chill_info:"Vindfaktor",chill_web:"Vindfaktor",heat_title:"Varmeindeks",heat_info:"Varmeindeks",heat_web:"Varmeindeks",humdx_title:"Humidex",humdx_info:"Humidex",humdx_web:"Humidex",rain_title:"Nedbør",rrate_title:"Nedbør",rrate_info:"Nedbørsrate",LastRain_info:"Siste nedbør",LastRainedT_info:"I dag klokka",LastRainedY_info:"I går klokka",hum_title_out:"Luftfukt",hum_title_in:"Luftfukt inne",hum_out_info:"Luftfukt ute",hum_in_info:"Luftfukt inne",hum_out_web:"Ute",hum_in_web:"Inne",baro_title:"Trykk",baro_info:"Barometrisk trykk",baro_trend_info:"Trykktrend",wind_title:"Vindstyrke",tenminavg_title:"Snitt vindstyrke",tenminavgwind_info:"Snitt vindstyrke (10 min)",maxavgwind_info:"Maks. snitt vindstyrke",tenmingust_info:"Vindkast (10 min)",maxgust_info:"Kraftigaste vindkast",latest_title:"Siste vind",latestwind_info:"Siste vindstyrke",bearing_info:"Retning",latest_web:"Siste",tenminavg_web:"Snitt",dominant_bearing:"Dominerande vind i dag",calm:"stille",windrose:"Vindrose",windruntoday:"Vindstrekning i dag",uv_title:"UV Indeks",uv_levels:["Inga","Inga fare","Liten risiko","Høg risiko","Veldig høg risiko","Ekstrem risiko"],uv_headlines:["Ingen målbar UV Indeks","Inga fare for ein 'gjennomsnittleg' person","Liten risiko for skade frå ubeskytta soling","Høg risiko for skade frå ubeskyttet soling","Mykje høg risiko for skade frå ubeskytta soling","Ekstrem risiko for skade frå ubeskytta soling",],uv_details:["Det er fortsatt natt - eller det er ein mykje overskya dag.","Bruk solbriller på lyse dagar, bruk solkrem dersom det er snø på bakken,<br>som reflekterer UV-stråling - om du ikkje har spesiell god hud.","Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>ein lue, søk skygge midt på dagen når solen er mest intens.","Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>klær og ein skyggelue, reduser tid i sola frå to timer før<br>til tre timar etter at sola er på det høgaste (ca 11:00 til 16:00 om sommeren i<br>(soner som bruker sommertid).","Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>Ikke være ute i solen for lenge.","Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>dekk kroppen med ein langermet skjorte og bukse, bruk skyggelue og<br>unngå sola frå to timer før til tre timer etter at sola er på det høyeste (ca 11:00<br>til 16:00 om sommaren i soner som bruker sommartid).",],solar_title:"Solstråling",solar_currentMax:"Noverande teoretiske maksimale måling",solar_ofMax:"av maksimalt",solar_maxToday:"Dagens maksimale måling",cloudbase_title:"Skyhøgda",cloudbase_popup_title:"Teoretisk skyhøgd",cloudbase_popup_text:"Berekninga er enkel: 300 meter for kvar 2,5 gradar Celsius<br>skilnad mellom temperaturen og doggpunktet. Ver merksam at dette<br>berre gjev den teoretiske høgda der cumulusskyar vert danna <br>når lufta er metta.",feet:"fot",metres:"meter",miles:"mil",n_miles:"n.mil",km:"km",lowest_info:"Lågast",highest_info:"Høgast",lowestF_info:"Lågast",highestF_info:"Høgast",RisingVeryRapidly:"Aukar veldig raskt",RisingQuickly:"Aukar raskt",Rising:"Aukar",RisingSlowly:"Aukar sakte",Steady:"Jamn",FallingSlowly:"Fell sakte",Falling:"Fell",FallingQuickly:"Fell raskt",FallingVeryRapidly:"Fell veldig raskt",maximum_info:"Maks.",max_hour_info:"Maks. pr. time",minimum_info:"Min.",coords:["N","NNA","NA","ANA","A","ASA","SA","SSA","S","SSV","SV","VSV","V","VNV","NV","NNV"],compass:["N","NA","A","SA","S","SV","V","NV"],months:["Jan","Feb","Mar","Apr","Mai","Jun","Jul","Aug","Sep","Okt","Nov","Des"],};LANG.IT={canvasnosupport:'HTML5 Canvas non supportato dal tuo browser... Spiacente...<br>'+'Prova ad aggiornare il tuo browser ad una versione pi&egrave; recente - quasi tutti i '+'browser supportano Canvas adesso, eccetto IE9!<br><br>'+'Ti sto reindirizzando ad una pagina dei calibri precedente...',led_title:'Sensori: stato sconosciuto',led_title_ok:'Sensori: comumicazione OK',led_title_lost:'Sensori: comunicazione non OK',led_title_unknown:'Sensori: stato sconosciuto',led_title_offline:'Stazione meteo temporaneamente OFFLINE',weather:'meteo',latitude:'Latitudine',longitude:'Longitudine',elevation:'Altezza',statusStr:'Caricamento...',StatusMsg:'Downloading...',StatusHttp:'Richiesta HTTP Fallita',StatusRetry:'Sto riprovando...',StatusRetryIn:'Riprovo in...',StatusTimeout:'Timed out',StatusPageLimit:'Raggiunto limite auto-aggiornamento pagina, aggiorna la pagina per continuare',StatusLastUpdate:'Ultimo aggiornamento',StatusMinsAgo:'minuti fa',StatusHoursAgo:'ore fa',StatusDaysAgo:'giorni fa',realtimeCorrupt:'File di testo scaricato corrotto! Sto riprovando...',timer:'secondi',at:'alle',temp_title_out:'Temp. est.',temp_title_in:'Temp. int.',temp_out_info:'Temp. esterna',temp_out_web:'Esterna',temp_in_info:'Temp. interna',temp_in_web:'Interna',temp_trend_info:'Variaz. temp.',dew_title:'Dew Point',dew_info:'Dew Point',dew_web:'Dew Point',apptemp_title:'T. apparen.',apptemp_info:'Temp. apparente',apptemp_web:'Temp. apparente',feel_title:"Feels Like",feel_info:"Feels Like Temperature",feel_web:"Feels Like",chill_title:'Wind Chill',chill_info:'Wind Chill',chill_web:'Wind Chill',heat_title:'Ind. calor.',heat_info:'Indice di calore',heat_web:'Indice di calore',humdx_title:'Ind. umid.',humdx_info:'Indice di umidità',humdx_web:'Indice di umidità',rain_title:'Precipitaz.',rrate_title:'Rain Rate',rrate_info:'Rateo precipitaz.',LastRain_info:'Ultime precipit.',LastRainedT_info:'Oggi alle',LastRainedY_info:'Ieri alle',hum_title_out:'Umidità',hum_title_in:'Umid. int.',hum_out_info:'Umid. esterna',hum_in_info:'Umid. interna',hum_out_web:'Esterna',hum_in_web:'Interna',baro_title:'Pressione',baro_info:'Pressione barometrica',baro_trend_info:'Variaz. press.',wind_title:'Vel. vento',tenminavg_title:'Vel. media',tenminavgwind_info:'Vel. media vento (10 min. media)',maxavgwind_info:'Vel. max. vento (10 min. media)',tenmingust_info:'Raffica max. (ultimi 10 min.)',maxgust_info:'Raffica max.',latest_title:'Ult. mis.',latestwind_info:'Ultima vel. misurata',bearing_info:'Direzione',latest_web:'Ultima direz.',tenminavg_web:'Direz. media',dominant_bearing:'Vento dominante oggi',calm:'calmo',windrose:'Direz. dominante',windruntoday:'Wind run odierno',uv_title:'Indice UV',uv_levels:['Nessuna','Nessun pericolo','Rischio basso','Rischio alto','Rischio molto alto','Rischio estremo'],uv_headlines:['Indice UV non misurabile','Nessun pericolo per la maggior parte delle persone','Lieve pericolo di scottatura da una esposizione al sole non adeguatamente protetta','Alto rischio di scottature da una esposizione al sole non adeguatamente protetta','Rischio molto alto di scottature da una esposizione al sole non adeguatamente protetta','Rischio estremo di scottature da una esposizione al sole non adeguatamente protetta'],uv_details:['E\' ancora notte o è molto nuvoloso.','Indossa occhiali da sole nei giorni con molta luce; usa lenti da sole con neve al suolo,<br>'+'che potrebbe riflettere radiazioni UV, o se hai pelle particolarmente chiara.','Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, mantieni i vestiti ed indossa<br>'+'un cappello, riparati all\'ombra durante le ore centrali quando il sole è più intenso.','Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, proteggi il corpo indossando vestiti chiari<br>'+'e un cappello a tesa larga, riduci inoltre l\'esposizione al sole da due ore prima<br>'+'a tre ore dopo mezzogiorno (approssimativamente dalle 11:00 alle 16:00 durante l\'estate nelle<br>'+'zone che osservano l\'ora legale).','Utilizza protezioni solari SPF 30+, una t-shirt, occhiali da sole, ed un cappello.<br>'+'Non stare al sole troppo a lungo.','Prendi tutte le precauzioni, incluso: occhiali da sole, utilizzo protezioni solari SPF 30+,<br>'+'proteggi il corpo con una t-shirt a maniche lunghe e pantaloni, indossa un cappello con tesa, ed<br>'+'evita il sole da due ore prima a tre ore dopo mezzogiorno (approssimativamente dalle 11:00<br>'+'alle 16:00 durante l\'estate nelle zone che osservano l\'ora legale).'],solar_title:'Radiazione solare',solar_currentMax:'Attuale massima lettura teorica',solar_ofMax:'del massimo',solar_maxToday:'Lettura massima odierna',cloudbase_title:'Base nuvola',cloudbase_popup_title:'base nuvola teorica',cloudbase_popup_text:'Il calcolo è semplice; 1000 piedi per ogni 4,4 gradi Fahrenheit <br>'+'differenza tra la temperatura e il punto di rugiada. Si noti che questo semplicemente <br> '+'dà l\'altezza teorica a cui Cumulus nuvole avrebbero cominciato a formare, <br>'+'perché l\'aria essere satura',feet:'piedi',metres:'metri',miles:'miglia',n_miles:'miglia n.',km:'km',lowest_info:'Minimo',highest_info:'Massimo',lowestF_info:'Minima',highestF_info:'Massima',RisingVeryRapidly:'In crescita molto rapida',RisingQuickly:'In crescita rapida',Rising:'In crescita',RisingSlowly:'In crescita lenta',Steady:'Costante',FallingSlowly:'In lento calo',Falling:'In calo',FallingQuickly:'In veloce calo',FallingVeryRapidly:'In calo molto rapido',maximum_info:'Massimo',max_hour_info:'Max. per ora',minimum_info:'Minimo',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','SSO','SO','OSO','O','ONO','NO','NNO'],compass:['N','NE','E','SE','S','SO','O','NO'],months:['Gen','Feb','Mar','Apr','Mag','Giu','Lug','Ago','Set','Ott','Nov','Dic']};LANG.ES={canvasnosupport:'No hay soporte para HTML5 en su navegador ... Lo siento ...<br>'+'Trate de actualizar su navegador a una versión más reciente - casi todos los navegadores '+'son compatibles con él ahora, incluso IE9!<br><br>'+'Redirigir a la antigua página de medidores ...',led_title:'Sensor remoto en estado desconocido',led_title_ok:'Sensor remoto funcionando correctamente',led_title_lost:'Contacto perdido con el sensor remoto',led_title_unknown:'Sensor remoto en estado desconocido',led_title_offline:'La estación meteorológica no está conectada',weather:'estado del tiempo',latitude:'Latitud',longitude:'Longitud',elevation:'Elevación',statusStr:'Cargando ...',StatusMsg:'Recibiendo ...',StatusHttp:'Error en petición HTTP',StatusRetry:'Volviendo a probar ...',StatusRetryIn:'Reintentando ...',StatusTimeout:'Tiempo excedido',StatusPageLimit:'Se ha alcanzado el limite de tiempo de actualizacion automatica, recargue la pagina para continuar',StatusLastUpdate:'Ultima actualización a las',StatusMinsAgo:'minutos',StatusHoursAgo:'horas',StatusDaysAgo:'días',realtimeCorrupt:'Archivo dañado! Reintentando ...',timer:'Segundos',at:'a las',temp_title_out:'Temperatura',temp_title_in:'Temp. interior',temp_out_info:'Temperatura exterior',temp_out_web:'Exterior',temp_in_info:'Temperatura interior',temp_in_web:'Interior',temp_trend_info:'Tendencia',dew_title:'Rocío',dew_info:'Temperatura de rocío',dew_web:'Rocío',apptemp_title:'Temp. aparente',apptemp_info:'Temperatura aparente',apptemp_web:'Temperatura aparente',feel_title:"Feels Like",feel_info:"Temperatura Feels Like",feel_web:"Feels Like",chill_title:'Windchill',chill_info:'Windchill',chill_web:'Windchill',heat_title:'Indice de calor',heat_info:'Indice de calor',heat_web:'Indice de calor',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Precipitación',rrate_title:'Intensidad de lluvia',rrate_info:'Intensidad de lluvia',LastRain_info:'Llovió por última vez',LastRainedT_info:'Hoy a las',LastRainedY_info:'Ayer a las',hum_title_out:'Humedad',hum_title_in:'Humedad interior',hum_out_info:'Humedad Exterior',hum_in_info:'Humedad interior',hum_out_web:'Exterior',hum_in_web:'Interior',baro_title:'Presión',baro_info:'Presión',baro_trend_info:'Tendencia de presión',wind_title:'Velocidad Viento',tenminavg_title:'Velocidad media actual',tenminavgwind_info:'Velocidad media actual (10 min)',maxavgwind_info:'Velocidad media máxima',tenmingust_info:'Rácha (10 min)',maxgust_info:'Racha máxima',latest_title:'Viento actual',latestwind_info:'Última lectura de viento',bearing_info:'Dirección',latest_web:'Actual',tenminavg_web:'Media',dominant_bearing:'Viento dominante hoy',calm:'calma',windrose:'Rosa de los Vientos',windruntoday:'Recorrido del viento hoy',uv_title:'Indice UV',uv_levels:['Nulo','Sin riesgo','Riesgo bajo','Riesgo alto','Riesgo muy alto','Riesgo extremo'],uv_headlines:['Indice UV no medible','Sin riesgo para la población media','Riesgo bajo de quemadura por exposición al sol sin protección','Riesgo alto de quemadura por exposición al sol sin protección','Riesgo muy alto de quemadura por exposición al sol sin protección','Riesgo extremo de quemadura por exposición al sol sin protección'],uv_details:['Es aun de noche o el día está muy nublado.','Use gafas de sol en días soleados; use protección solar si hay nieve en el suelo,<br>'+'que refleja la radiación UV, o si tiene la piel particularmente sensible.','Use gafas de sol y protector solar factor 30 o superior, cubra el cuerpo con ropa y<br>'+'una gorra, y busque zonas de sombra al mediodía cuando el sol es más intenso.','Use gafas de sol y protección solar factor 30 o superior, cubra el cuerpo con ropas que protejan del sol<br>'+'y sombreros anchos, y reduzca el tiempo al sol desde dos horas antes hasta<br>'+'tres horas después del mediodía solar (aproximadamente desde las 11:00 hasta las 16:00 en verano).','Use protección solar factor 30 o superior, camisa, gafas de sol, y gorra.<br>'+'No permanezca al sol durante mucho tiempo.','Tome todas las precauciones, incluyendo: usar gafas de sol y protección solar factor 30 o superior,<br>'+'cubrir el cuerpo con camisas de manga larga y pantalones, llevar sombreros de ala ancha, y<br>'+'evitar el sol desde dos horas antes hasta tres horas después del mediodía solar<br>'+'(aproximadamente desde las 11:00 hasta las 16:00 PM en verano).'],solar_title:'Radiación solar',solar_currentMax:'Máximo teórico en este momento',solar_ofMax:'del máximo teórico',solar_maxToday:'Valor máximo real hoy',cloudbase_title:'base de las nubes',cloudbase_popup_title:'Theoretical cloud base',cloudbase_popup_text:'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>'+'difference between the temperature and the dew point. Note that this simply<br>'+'gives the theoretical height at which Cumulus clouds would begin to form, the<br>'+'air being saturated',feet:'feet',metres:'metros',miles:'millas',n_miles:'millas n.',km:'km',lowest_info:'Mínima',highest_info:'Máxima',lowestF_info:'Mínima',highestF_info:'Máxima',RisingVeryRapidly:'Subiendo muy rápidamente',RisingQuickly:'Subiendo rápidamente',Rising:'Subiendo',RisingSlowly:'Subiendo lentamente',Steady:'Estable',FallingSlowly:'Bajando lentamente',Falling:'Bajando',FallingQuickly:'Bajando rápidamente',FallingVeryRapidly:'Bajando muy rápidamente',maximum_info:'Máxima',max_hour_info:'Máxima por hora',minimum_info:'Mínima',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','OSO','O','OSO','O','ONO','NO','NNO','ONO'],compass:['N','NE','E','SE','S','SO','O','NO'],months:['enero','febrero','marzo','abril','mayo','junio','julio','agosto','septiembre','octubre','noviembre','diciembre']};LANG.CT={canvasnosupport:'No hi ha suport per HTML5 en el seu navegador ... Ho sento ...<br>'+'Intenta actualitzar el vostre navegador a una versió més recent - gairebé tots els navegadors '+'són compatibles amb HTML5 ara, fins i tot IE9!<br><br>'+'Redirigir a una \'vella\' pàgina de mesuradors ...',led_title:'Estat del sensor remot desconegut',led_title_ok:'Sensor remot correcte',led_title_lost:'Perdut contacte amb el sensor remot',led_title_unknown:'Estat del sensor remot desconegut ',led_title_offline:'L\'estació meteorològica està fora de línea',weather:'El Temps',latitude:'Latitud',longitude:'Longuitud',elevation:'Elevació',statusStr:'Carregant ...',StatusMsg:'Descàrrega de dades ...',StatusHttp:'Petició HTTP Error',StatusRetry:'Tornant a provar ...',StatusRetryIn:'Tornant a provar en ..',StatusTimeout:'Temps d\'espera esgotat',StatusPageLimit:'La autoactualització de la pàgina ha arribat al límit, actualitza el teu navegador per a continuar',StatusLastUpdate:'Última actualització',StatusMinsAgo:'minuts',StatusHoursAgo:'hores',StatusDaysAgo:'dies',realtimeCorrupt:'Descàrrega de l\'arxiu de text corrupte! reintentant ...',timer:'segons',at:'a les ',temp_title_out:'Temperatura',temp_title_in:'°T Interior',temp_out_info:'Temp exterior',temp_out_web:'Exterior',temp_in_info:'Temp interior',temp_in_web:'Interior',temp_trend_info:'Tendència',dew_title:'Rosada',dew_info:'Punt de rosada',dew_web:'Punt de rosada',apptemp_title:'Temp aparent',apptemp_info:'Temperatura aparent',apptemp_web:'Aparent',feel_title:"Feels Like",feel_info:"Temperatura Feels Like",feel_web:"Feels Like",chill_title:'°T sensació',chill_info:'°T sensació',chill_web:'°T sensació',heat_title:'Índex de calor',heat_info:'Índex de calor',heat_web:'Índex de calor',humdx_title:'°T xafogor',humdx_info:'°T xafogor',humdx_web:'°T xafogor',rain_title:'Pluja',rrate_title:'Intensitat de pluja',rrate_info:'Intensitat de pluja',LastRain_info:'Últim dia de pluja',LastRainedT_info:'Avui a les',LastRainedY_info:'Ahir a les',hum_title_out:'Humitat Exterior',hum_title_in:'Humitat Interior',hum_out_info:'Humitat Exterior',hum_in_info:'Humitat Interior',hum_out_web:'Exterior',hum_in_web:'Interior',baro_title:'Pressió',baro_info:'Pressió',baro_trend_info:'Tendència',wind_title:'Velocitat del Vent',tenminavg_title:'Velocitat mitjana del vent',tenminavgwind_info:' Vel. del Vent (promig 10\')',maxavgwind_info:'Vent Màxim (promig 10\')',tenmingust_info:'Ràfega màxima (últims 10 min)',maxgust_info:'Ràfega màxima',latest_title:'Direcció del vent',latestwind_info:'Últimes velocitat del vent',bearing_info:'última',latest_web:'Darrer',tenminavg_web:'Mitjana',dominant_bearing:'Vent dominant avui',calm:'calma',windrose:'Rosa dels Vents',windruntoday:'Recorregut del vent avui',uv_title:'Index UV',uv_levels:['Cap','Sense perill','Risc mínim','Risc alt','Risc molt alt','Risc extrem'],uv_headlines:['Index UV no mesurable','Sense perill per a la mitjana de les persones','Risc baix de lesions per exposició al sol sense protecció','Risc alt de lesions per exposició al sol sense protecció','Risc molt alt de lesions per exposició al sol sense protecció','Risc extrem de lesions per exposició al sol sense protecció'],uv_details:['Encara és de nit o és un dia molt tapat.','Utilitza ulleres de sol en dies clars; feu servir protecció solar si hi ha neu al terra,<br>'+'que reflecteix la radiació UV, o si té la pell particularment clara.','Utilitzar ulleres de sol i protecció solar SPF 30+, cobrir el cos amb roba i<br>'+'barret, busqui ombra per migdia quan el sol és més intens.','Utilitzi ulleres de sol i protecció solar SPF 30+, cobriu el cos amb roba<br>'+'i un barret, reduiu l\'exposició al sol de dos<br>'+'a tres hores abans del migdia solar (normalment de 11:00 AM a 4:00 PM durant l\'estiu en <br>'+'zones que fan servir l\'horari d\'estiu).','Utilitzar protecció solar SPF 30+, una camisa, ulleres de sol i barret.<br>'+'No estar al sol durant llargs períodes de temps.','Prengui totes les precaucions, incloent: utilitzar ulleres de sol i protecció solar SPF 30+,<br>'+'cobrir el cos amb camises de màniga llarga i pantalons llargs, utilitzar un barret ampli, i<br>'+'evitar el sol a partir de dues hores abans o tres hores després del migdia solar (aprox. de 11:00 AM<br>'+'a 4:00 PM durant l\'estiu en zones que fan servir l\'horari d\'estiu).'],solar_title:'Radiació Solar',solar_currentMax:'Màxima lectura teòrica actual',solar_ofMax:'del màxim',solar_maxToday:'Lectura màxima d\'avui',cloudbase_title:'base dels núvols',cloudbase_popup_title:'Theoretical cloud base',cloudbase_popup_text:'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>'+'difference between the temperature and the dew point. Note that this simply<br>'+'gives the theoretical height at which Cumulus clouds would begin to form, the<br>'+'air being saturated',feet:'feet',metres:'metres',miles:'milles',n_miles:'milles n.',km:'km',lowest_info:'Mínima',highest_info:'Màxima',lowestF_info:'Mínima',highestF_info:'Màxima',RisingVeryRapidly:'Pujant molt ràpidament',RisingQuickly:'Pujant ràpidament',Rising:'Pujant',RisingSlowly:'Pujant lentament',Steady:'Estable',FallingSlowly:'Baixant lentament',Falling:'Baixant',FallingQuickly:'Baixant ràpidament',FallingVeryRapidly:'Baixant molt ràpidament',maximum_info:'Màxim',max_hour_info:'Pluja horària màxima',minimum_info:'Mínim',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','WSW','W','WSW','W','WNW','NW','NNW','WNW'],compass:['N','NE','E','ES','S','SW','W','NW'],months:['Gener','Febrer','Març','Abril','Maig','Juny','Juliol','Agost','Setembre','Octubre','Novembre','Desembre']};LANG.GR={canvasnosupport:'Η έκδοση του browser που χρησιμοποιήτε δεν υποστηρίζει την γλώσσα HTML-5<br>'+'Αναβαθμίστε τον browser που χρησιμοποιήτε σε εκδοση που υποστηρίζει HTML-5 <br><br>'+'Ανακατεύθνση σελίδας στην παλιά.. gauges page...',led_title:'Απώλεια επαφής με τον αισθητήρα',led_title_ok:'Αισθητήρα εντάξει',led_title_lost:'Απώλεια επαφής!',led_title_unknown:'Αγωστη κατάσταση αισθητήρα!',led_title_offline:'Ο μετεωρολογικός σταθμός είναι εκτός δικτύου.',weather:'Καιρός',latitude:'Βόρειο πλάτος',longitude:'Ανατολικό μήκος',elevation:'Υψόμετρο',statusStr:'Φορτώνει...',StatusMsg:'Φότρωση δεδομένων....',StatusHttp:'Απώλεια διεύθυνσης http...',StatusRetry:'Επανάληψη...',StatusRetryIn:'Επανάληψη σε...',StatusTimeout:'Λήξη χρόνου',StatusPageLimit:'Παρακαλώ ανανεώστε τον browser....',StatusLastUpdate:'Τελευταία λήψη δεδομένων',StatusMinsAgo:'λεπτά πρίν',StatusHoursAgo:'ώρες πρίν',StatusDaysAgo:'μέρες πριν',realtimeCorrupt:'Προσπάθεια ανάκτησης δεδομένων, επανάληψη',timer:'Δευτερόλεπτα',at:'στις',temp_title_out:'Θερμόμετρο',temp_title_in:'Εσωτερική θερμοκρασία',temp_out_info:'Εξωτερική θερμοκρασία',temp_out_web:'Εξωτερική',temp_in_info:'Εσωτερική θερμοκρασία',temp_in_web:'Εσωτερική',temp_trend_info:'Τάση θερμοκρασίας',dew_title:'Σημείο δρόσου',dew_info:'Σημείο δρόσου',dew_web:'Σημείο δρόσου',apptemp_title:'Αισθητή θερμοκρασία',apptemp_info:'Αισθητή θερμοκρασία',apptemp_web:'Αισθητή θερμοκρασία',feel_title:"Feels Like",feel_info:"Feels Like Temperature",feel_web:"Feels Like",chill_title:'Αίσθηση ψύχους',chill_info:'Αίσθηση ψύχους',chill_web:'Αίσθηση ψύχους',heat_title:'Δείκτης δυσφορίας',heat_info:'Δείκτης δυσφορίας',heat_web:'Δείκτης δυσφορίας',humdx_title:'Δείκτης υγρασίας',humdx_info:'Δείκτης υγρασίας',humdx_web:'Δείκτης υγρασίας',rain_title:'Βροχόπτωση',rrate_title:'Ενταση βροχόπτωσης',rrate_info:'Ενταση βροχόπτωσης',LastRain_info:'Τελευταία βροχόπτωση',LastRainedT_info:'Σήμερα στις',LastRainedY_info:'χθες στις',hum_title_out:'Υγρασία',hum_title_in:'Εσωτερική υγρασία',hum_out_info:'Εξωτερική υγρασία',hum_in_info:'Εσωτερική υγρασία',hum_out_web:'Εξωτερική',hum_in_web:'Εσωτερική',baro_title:'Βαρόμετρο',baro_info:'Ατμοσφαιρική πίεση',baro_trend_info:'Τάση πίεσης',wind_title:'Aνεμόμετρο',tenminavg_title:'Μέση ταχύτητα ανέμου',tenminavgwind_info:'Μέση 10λεπτη ταχύτητα ανέμου',maxavgwind_info:'Μέγιστη μέση ταχύτητα ανέμου',tenmingust_info:'Ριπή ανέμου',maxgust_info:'Μέγιστη ριπή ανέμου',latest_title:'Τελευταία ένδειξη ανέμου',latestwind_info:'Τελευταία ταχύτητα ανέμου',bearing_info:'Διέυθυνση',latest_web:'Τελευταία',tenminavg_web:'Μέση',dominant_bearing:'Επικρατέστερη διέυθυνση',calm:'Νηνεμία',windrose:'Ανεμούριο',windruntoday:'Τρέξιμο Αέρα',uv_title:'UV Ενδειξη',uv_levels:['Μηδενικό','Ακίνδυνο','Μικρή Επικυνδυνότητα','Υψηλή Επικυνδυνότητα','Πολύ υψηλή επικυνδυνότητα','Ακραία επικυνδυνότητα'],uv_headlines:['Μη μετρήσιμη UV ένδεικη','Ακίνδυνη στο μέσο επίπεδο','Μικρός κίνδυνος στην ηλιακή ακτινοβολία','Υψηλός κίνδυνος στην ηλιακή ακτινοβολία','Πολύ υψηλός κίνδυνος στην ηλιακή ακτινοβολία','Eξαιρετικά υψηλός κίνδυνος στην ηλιακή ακτινοβολία'],uv_details:['Ακόμα είναι νύχτα ή η μέρα είναι πολύ συννεφιασμένη.','Φοράμε γυαλιά ηλίου; φοράμε γυαλιά ηλίου όταν το έδαφος είναι χιονοσκεπές,<br>'+'φοράμε ρούχα που αντανακλούν την ηλιακή UV ακτινοβολία.','Φοράμε γυαλιά και αντηλιακό με δείκτη SPF 30+ , Ντυνόμαστε με ανοιχτόχρωμα ρούχα<br>'+'καπέλο, και αποφεύγουμε τον ήλιο τις θερμές ώρες της ημέρας.','Φοράμε γυαλιά και αντηλιακό με δείκτη SPF 30+ , καλύπτουμε το σώμα με αντηλιακό<br>'+'Προγραμματίζουμε τις εξωτερικές δουλειές <br>'+'3 ώρες μετά την μέγιστη ακτινοβολία (από τις 11 το πρωί ως τις 4 το αποευμα<br>'+'Οι ζώνες της θερινής ώρας).','Φοράμε αντηλιακό με δείκτη SPF 30+ , Μπλουζάκι ανοιχτόχρωμο γυαλιά ηλίου και καπέλο.<br>'+'Απόφέυγουμε την μακροχρόνια παραμονή στον ήλιο.','Παίρνουμς όλες τις προφυλάξεις, συμπεριλαμβανομένων: γυαλιά ηλίου και αντηλιακό με δείκτη SPF 30+,<br>'+'Ντυνόμαστε με ανοιχτόχρωμα ρούχα ,καπέλο, και<br>'+'Αποφεύγουμε τελείως τον ήλιο 2 ώρες πρίν και τρείς ώρες μετά το μέγιστο της ηλιακής ακτινοβολίας (από τις 11 το πρωί<br>'+'ως τις 4 το απόγευμα ).'],solar_title:'Ηλιακή ακτινοβολία',solar_currentMax:'Τρέχουσα μέγιστη θεωρητικά ένδειξη',solar_ofMax:'της μέγιστης',solar_maxToday:'Σημερινή μέγιστη ένδειξη',cloudbase_title:'Υψος βάσης νεφών',cloudbase_popup_title:'Θεωρητικό ύψος βάσης νεφών',cloudbase_popup_text:'Ο υπολογισμός είναι απλός; 1000 πόδια για κάθε 4.4 Βαθμούς Φαρενάιτ.<br>'+'Είναι η διαφορά μεταξύ της θερμοκρασίας και του σημείου δρόσου. Αυτή είναι απλή<br>'+'Δίνει το θεωρητικό ύψος των νεφών στη βάση τους, <br>'+'οταν ο αέρας είναι κορεσμένος',feet:'πόδια',metres:'μέτρα',miles:'μίλια',n_miles:'v.μίλια',km:'km',lowest_info:'Eλάχιστη',highest_info:'Μέγιστη',lowestF_info:'Ελάχιστη',highestF_info:'Μέγιστη',RisingVeryRapidly:'Ραγδαία πτώση',RisingQuickly:'ταχεία πτώση',Rising:'πτώση',RisingSlowly:'Αργή πτώση',Steady:'Σταθερή',FallingSlowly:'Αργή άνοδος',Falling:'Ανοδος',FallingQuickly:'Ταχεία πτώση',FallingVeryRapidly:'Ραγδαία πτώση',maximum_info:'Mέγιστη',max_hour_info:'Mέγιστη ωριαία',minimum_info:'Ελάχιστη',coords:['Β','ΒΒΑ','ΒΑ','ΑΒΑ','Α','ΑΝΑ','ΝΑ','ΝΝΑ','Ν','ΝΝΔ','ΝΔ','ΝΔΝ','Δ','ΔΒΔ','ΒΔ','ΒΒΔ'],compass:['Β','ΒΑ','Α','ΝΑ','Ν','ΝΔ','Δ','ΒΔ'],months:['Ιαν','Φεβ','Μαρ','Απρ','Μαι','Ιουν','Ιουλ','Αυγ','Σεπ','Οκτ','Νοε','Δεκ']};LANG.PT={canvasnosupport:'O seu browser não suporta HTML5...<br>'+'Actualize o seu navegador para uma versão mais recente!<br><br>'+'Vai ser redirecionado para uma página compativel...',led_title:'Sensor remoto, estado desconhecido',led_title_ok:'Aceitar sensor remoto',led_title_lost:'Perdido o contacto com o sensor remoto',led_title_unknown:'Sensor remoto em estado desconhecido',led_title_offline:'A estação metereológica está Offline',weather:'clima',latitude:'Latitude',longitude:'Longitude',elevation:'Altitude',statusStr:'A carregar ...',StatusMsg:'Descarga de ...',StatusHttp:'Erro no pedido HTTP',StatusRetry:'Voltando a tentar...',StatusRetryIn:'Voltando a tentar em ...',StatusTimeout:'Tempo esgotado',StatusPageLimit:'Foi atingido o tempo limite para auto-actualização desta página, recarregue a página para continuar.',StatusLastUpdate:'Última actualização',StatusMinsAgo:'minutos atrás',StatusHoursAgo:'horas atrás',StatusDaysAgo:'dias atrás',realtimeCorrupt:'Ficheiro de dados corrompido! Tentando de novo...',timer:'Segundos',at:'a',temp_title_out:'Temperatura',temp_title_in:'Temp. Interior',temp_out_info:'Temperatura Exterior',temp_out_web:'Exterior',temp_in_info:'Temperatura Interior',temp_in_web:'Interior',temp_trend_info:'Tendência Temperatura',dew_title:'Pt. Orvalho',dew_info:'Ponto de Orvalho',dew_web:'Ponto de Orvalho',apptemp_title:'Temp. Aparente',apptemp_info:'Temperatura Aparente',apptemp_web:'Temp. Aparente',feel_title:"Feels Like",feel_info:"Temperatura Feels Like",feel_web:"Feels Like",chill_title:'Índice Frio',chill_info:'Índice Frio',chill_web:'Índice Frio',heat_title:'Índice de Calor',heat_info:'Índice de Calor',heat_web:'Índice de Calor',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Pluviosidade',rrate_title:'Taxa Pluv.',rrate_info:'Taxa Pluviosidade',LastRain_info:'Pluviosidade',LastRainedT_info:'Hoje às',LastRainedY_info:'Ontem às',hum_title_out:'Humidade',hum_title_in:'Humidade Interior',hum_out_info:'Humidade Exterior',hum_in_info:'Humidade Interior',hum_out_web:'Exterior',hum_in_web:'Interior',baro_title:'Pressão Atm.',baro_info:'Pressão',baro_trend_info:'Tendência da Pressão',wind_title:'Vel. Vento',tenminavg_title:'Velocidade Média do Vento',tenminavgwind_info:'Velocidade Média do Vento (10 min)',maxavgwind_info:'Média da Vel. Máxima do Vento',tenmingust_info:'Rajada (10 min)',maxgust_info:'Rajada máxima',latest_title:'Vento, última',latestwind_info:'Última Vel. do Vento',bearing_info:'Direção',latest_web:'Último',tenminavg_web:'Média',dominant_bearing:'Vento dominante hoje',calm:'Calmo',windrose:'Rosa dos Ventos',windruntoday:'Wind Run hoje',uv_title:'Índice UV',uv_levels:['Nenhum','Sem perigo','Pequeno risco','Alto risco','Risco muito alto','Risco extremo'],uv_headlines:['Índice UV não mensurável','Sem perigo para a maioria das pessoas','Pequeno risco de danos por exposição ao sol sem protecção','Alto risco de danos por exposição ao sol sem protecção','Risco muito alto de danos por exposição ao sol sem protecção','Risco extremo de danos por exposição ao sol sem protecção'],uv_details:['Ainda é noite, ou o dia está com céu muito nublado.','Use óculos de sol em dias ensolarados; caso tenha uma pele particularmente sencível,<br>'+'ou exista neve no solo que reflete radiação UV, utilize protector solar.','Utilize óculos de sol, e protector solar SPF 30+, proteja o corpo com roupa e use<br>'+'chapéu. Por volta do meio dia, quando o sol está mais intenso, procure estar à sombra.','Utilize óculos de sol, e protector solar SPF 30+, proteja o corpo com roupas de protecção<br>'+'solar e use um chapéu com abas. Reduza a exposição ao sol nas duas horas anteriores e até às<br>'+'tres horas posteriores ao meio dia solar (cerca das 11:00 até às 16:00 durante o verão nas<br>'+'zonas que praticam horário de verão).','Usar protetor solar FPS 30+, camisa, óculos de sol e um chapéu.<br>'+'Não fique ao sol por muito tempo.','Tome todas as precauções, incluindo: Usar óculos de sol, protetor solar FPS 30+,<br>'+'cubra o corpo com roupa com mangas, vista calças, e use um chapéu de abas largas.<br>'+'Evite a exposição ao sol nas duas horas anteriores e até às tres horas posteriores ao meio dia solar<br>'+'(cerca das 11:00 até às 16:00 durante o verão nas zonas que praticam horário de verão).'],solar_title:'Rad. Solar',solar_currentMax:'Valor máximo teórico actual',solar_ofMax:'do máximo',solar_maxToday:'Hoje, valor máximo',cloudbase_title:'Base das Nuvens',cloudbase_popup_title:'Base das Nuvens Teórica',cloudbase_popup_text:'É um cálculo simples; 1000 pés por cada 4.4 graus Fahrenheit de diferença<br>'+'entre a temperatura e o ponto de orvalho. Note que isto dá simplesmente<br>'+'a altura teórica em que nuvens tipo Cumulus se começam a formar, e o<br>'+'ar começa a ficar saturado',feet:'pés',metres:'metros',miles:'milhas',n_miles:'milhas n.',km:'km',lowest_info:'Mais Baixa',highest_info:'Máxima',lowestF_info:'Mínima',highestF_info:'Máxima',RisingVeryRapidly:'A subir muito rápidamente',RisingQuickly:'A subir rápidamente',Rising:'A subir',RisingSlowly:'A subir lentamente',Steady:'Estável',FallingSlowly:'A descer lentamente',Falling:'A descer',FallingQuickly:'A descer rápidamente',FallingVeryRapidly:'A descer muito rápidamente',maximum_info:'Máximo',max_hour_info:'Máx. por Hora',minimum_info:'Mínimo',coords:['N','NNE','NE','ENE','E','ESE','SE','SSE','S','OSO','O','OSO','O','ONO','NO','NNO','ONO'],compass:['N','NE','E','SE','S','SO','O','NO'],months:['Janeiro','Fevereiro','Março','Abril','Maio','Junho','Julho','Agosto','Setembro','Outubro','Novembro','Dezembro']};LANG.CS={canvasnosupport:'Ve vašem prohlížeči není podpora pro HTML5 Canvas... Lituji...<br>'+'Zkuste aktualizovat svůj prohlížeč na novější verzi - téměř všechny prohlížeče podporují nyní Canvas, i IE9!<br><br>'+'Budete přesměrováni na původní stránku měřidel...',led_title:'Senzor dálkového ovládání stav neznámý',led_title_ok:'Remote sensor OK',led_title_lost:'Senzor dálkového ovládání kontakt ztracen!',led_title_unknown:'Senzor dálkového ovládání stav neznámý!',led_title_offline:'Meteorologická stanice je nyní v režimu offline.',weather:'počasí',latitude:'Zeměpisná délka',longitude:'Zeměpisná šířka',elevation:'Nadm. výška',statusStr:'Nahrávání...',StatusMsg:'Stahování...',StatusHttp:'HTTP požadavek selhal',StatusRetry:'Opakování...',StatusRetryIn:'Opakování za...',StatusTimeout:'Vypršel časový limit',StatusPageLimit:'Automatická aktualizace stránky hotova, klepněte na stavovou LED pro pokračování',StatusLastUpdate:'Poslední aktualizace před',StatusMinsAgo:'minutami',StatusHoursAgo:'hodinami',StatusDaysAgo:'dny',realtimeCorrupt:'Stahovaný textový soubor poškozen! Opakování...',timer:'sec.',at:'v',temp_title_out:'Teplota',temp_title_in:'Vn. teplota',temp_out_info:'Venkovní teplota',temp_out_web:'Venkovní',temp_in_info:'Vnitřní teplota',temp_in_web:'Vnitřní',temp_trend_info:'Teplotní trend',dew_title:'Rosný bod',dew_info:'Rosný bod',dew_web:'Rosný bod',apptemp_title:'Zdánl. tepl.',apptemp_info:'Zdánlivá teplota',apptemp_web:'Zdánl. teplota',feel_title:"Feels Like",feel_info:"Feels Like teplota",feel_web:"Feels Like",chill_title:'Chlad větru',chill_info:'Chlad větru',chill_web:'Chlad větru',heat_title:'Index horka',heat_info:'Index horka',heat_web:'Index horka',humdx_title:'Humidex',humdx_info:'Humidex',humdx_web:'Humidex',rain_title:'Srážky',rrate_title:'Intenzita',rrate_info:'Intenzita srážek',LastRain_info:'Poslední srážky',LastRainedT_info:'Dnes v',LastRainedY_info:'Včera v',hum_title_out:'Vlhkost',hum_title_in:'Vn. vlhkost',hum_out_info:'Venkovní vlhkost',hum_in_info:'Vnitřní vlhkost',hum_out_web:'Venkovní',hum_in_web:'Vnitřní',baro_title:'Tlak vzd.',baro_info:'Barometrický tlak',baro_trend_info:'Tlaková tendence',wind_title:'Vítr rychlost',tenminavg_title:'Prům. rychlost větru',tenminavgwind_info:'Prům. rychlost větru (10 min)',maxavgwind_info:'Max prům. rychlost větru',tenmingust_info:'Náraz (10 min)',maxgust_info:'Maximum náraz',latest_title:'Poslední vítr',latestwind_info:'Poslední rychlost větru',bearing_info:'Směr větru',latest_web:'Poslední',tenminavg_web:'Průměr',dominant_bearing:'Převažující směr větru dnes',calm:'bezvětří',windrose:'Větrná růžice',windruntoday:'Denní proběh větru',uv_title:'UV Index',uv_levels:['Žádné riziko','Nízké riziko','Střední riziko','Vysoké riziko','Velmi vysoké riziko','Extrémní riziko'],uv_headlines:['Neměřitelný UV Index','Bez nebezpečí pro průměrné osoby','Riziko při nechráněném pobytu na slunci','Velké riziko při nechráněném pobytu na slunci','Vysoké riziko při nechráněném pobytu na slunci','Extreme riziko při nechráněném pobytu na slunci'],uv_details:['Je ještě noc nebo je velmi zatažený den.','Noste sluneční brýle za jasných dnů, používejte opalovací krém, pokud je na zemi sníh,<br>'+'který odráží UV záření, nebo máte-li zvlášť světlou pokožku.','Noste sluneční brýle a používejte krém na opalování SPF 30+, zakryjte tělo oblečením a<br>'+'kloboukem, vyhledejte stín kolem poledne, kdy je slunce nejintenzivnější.','Noste sluneční brýle a používejte krém na opalování SPF 30+, zakryjte tělo ochranným<br>'+'oděvem a kloboukem se širokou krempou, zkraťte dobu pobytu na slunci v době mezi 11:00 a 16:00 hod.,<br>'+'tj. kolem slunečního poledne letního času na tři hodiny během léta v oblastech,<br>'+'které používají letního času.','Používejte krém na opalování SPF 30+, košili, sluneční brýle a klobouk.<br>'+'Nezůstávejte na slunci příliš dlouho.','Učiňte veškerá opatření, včetně nošení slunečních brýlí a použití krému na opalování SPF 30+,<br>'+'zakryjte tělo košilí s dlouhým rukávem a kalhotami, noste velmi široký klobouk a<br>'+'vyhněte se slunci od dvou hodin před až po tři hodiny po slunečním poledni (v době od 11:00<br>'+'do 16:00 v létě v oblastech, které používají letního času).'],solar_title:'Sluneční záření',solar_currentMax:'Aktuální teoretické maximum záření',solar_ofMax:'maximum',solar_maxToday:'Dnešní maximum záření',lowest_info:'Nejnižší',highest_info:'Nejvyšší',lowestF_info:'Nejnižší',highestF_info:'Nejvyšší',RisingVeryRapidly:'Prudký vzestup',RisingQuickly:'Silný vzestup',Rising:'Vzestup',RisingSlowly:'Slabý vzestup',Steady:'Ustálený stav',FallingSlowly:'Slabý pokles',Falling:'Pokles',FallingQuickly:'Silný pokles',FallingVeryRapidly:'Prudký pokles',maximum_info:'Maximum',max_hour_info:'Max za hodinu',minimum_info:'Minimum',coords:['S','SSV','SV','VSV','V','VJV','JV','JJV','J','JJZ','JZ','ZJZ','Z','ZSZ','SZ','SSZ'],compass:['S','SV','V','JV','J','JZ','Z','SZ'],months:['Led','Úno','Bře','Dub','Kvě','Čer','Čec','Srp','Zář','Říj','Lis','Pro'],cloudbase_title:'Základna mraků',cloudbase_popup_title:'Teoretická základna mraků',cloudbase_popup_text:'Výpočet je jednoduchý; 1000 ft na každých 4,4 stupňů Fahrenheita<br>'+'rozdílu mezi teplotou a teplotou rosného bodu. Všimněte si, že to prostě<br>'+'dává teoretickou výšku, ve které se kupovité mraky začínají tvořit, kdy<br>'+'vzduch je nasycen',feet:'feet',metres:'metrů',miles:'míle',n_miles:'n.míle',km:'km'};LANG.PL={canvasnosupport:"Brak wsparcia dla HTML5 w Twojej przeglądarce...<br>Spróbuj zaktualizować przeglądarkę do nowszej wersji<br><br>Przekierowanie na 'stary' wygląd strony...",led_title:"Nieznany status zdalnego sensora",led_title_ok:"Zdalny sensor OK",led_title_lost:"Stracone połączenie ze zdalnym sensorem!",led_title_unknown:"Nieznany status zdalnego sensora!",led_title_offline:"Stacja pogoda aktualnie jest wyłączona.",weather:"pogoda",latitude:"Długość geograficzna",longitude:"Szerokość geograficzna",elevation:"Wysokość",statusStr:"Ładowanie...",StatusMsg:"Ściąganie...",StatusHttp:"Błąd przetwarzania HTTP",StatusRetry:"Ponawianie...",StatusRetryIn:"Ponowienie za...",StatusTimeout:"Przekroczony czas",StatusPageLimit:"Autoodświeżanie strony osiągnęlo limit, naciśnij diodę LED, aby odświeżyć.",StatusLastUpdate:"Ostatni odczyt",StatusMinsAgo:"minut temu",StatusHoursAgo:"godzin temu",StatusDaysAgo:"dni temu",realtimeCorrupt:"Ściąganie pliku tekstowego nie powiodło się. Ponawianie...",timer:"sekund",at:"o",temp_title_out:"Temperatura",temp_title_in:"Temperatura wewnątrz",temp_out_info:"Temperatura na zewnątrz",temp_out_web:"Na zewnątrz",temp_in_info:"Wewnątrz",temp_in_web:"Wewnątrz",temp_trend_info:"Trend temperatury",dew_title:"Punkt rosy",dew_info:"Punkt rosy",dew_web:"Punkt rosy",apptemp_title:"Odczuwalna",apptemp_info:"Temperatura odczuwalna",apptemp_web:"Odczuwalna",feel_title:"Feels Like",feel_info:"Temperatura Feels Like",feel_web:"Feels Like",chill_title:"Chłod wiatru",chill_info:"Chłod wiatru",chill_web:"Chłód wiatru",heat_title:"Indeks ciepła",heat_info:"Indeks ciepła",heat_web:"Indeks ciepła",humdx_title:"Humidex",humdx_info:"Humidex",humdx_web:"Humidex",rain_title:"Opady deszczu",rrate_title:"Stopa opadów",rrate_info:"Stopa opadów",LastRain_info:"Ostatnie opady",LastRainedT_info:"Dzisiaj o",LastRainedY_info:"Wczoraj o",hum_title_out:"Wilgotność",hum_title_in:"Wilgotność wewnątrz",hum_out_info:"Wilgotność na zewnątrz",hum_in_info:"Wilgotność wewnątrz",hum_out_web:"Na zewnątrze",hum_in_web:"Wewnątrz",baro_title:"Ciśnienie",baro_info:"Ciśnienie barometryczne",baro_trend_info:"Trend ciśnienia",wind_title:"Prędkość wiatru",tenminavg_title:"Średnia prędkość wiatru",tenminavgwind_info:"Średnia prędkość wiatru z ostatnich 10 minut",maxavgwind_info:"Maksymalna średnia prędkość wiatru",tenmingust_info:"Porywy wiatru z ostatnich 10 minut",maxgust_info:"Maksymalny poryw wiatru",latest_title:"Ostatni wiatr",latestwind_info:"Ostatnia prędkość wiatru",bearing_info:"kierunek",latest_web:"Ostatni",tenminavg_web:"Średni",dominant_bearing:"Dzisiejszy dominujący wiatr",calm:"spokojnie",windrose:"Róża wiatru",windruntoday:"Dzisiejszy wiatr",uv_title:"UV Indeks",uv_levels:["Brak","Brak ryzyka","Średnie ryzyko","Wysokie ryzyko","Bardzo wysokie ryzyko","Ekstremalne ryzyko"],uv_headlines:["Brak pomiarów indeksu UV","Brak ryzyka dla statystycznej osoby","Umiarkowane ryzyko szkód wynikających z nieosłoniętego nasłonecznienia","Wysokie ryzyko szkód spowodowanych nieosłoniętą ekspozycją na słońce","Bardzo wysokie ryzyko szkód spowodowanych nieosłoniętą ekspozycją na słońce","Ekstremalne ryzyko szkód spowodowanych nieosłoniętym nasłonecznieniem"],uv_details:["Nadal jest noc lub jest bardzo pochmurny dzień.","Noś okulary przeciwsłoneczne w jasne dni, użyj ochrony przeciwsłonecznej, jeśli śnieg jest na ziemi,<br>"+"który odbija promieniowanie UV, lub jeśli masz szczególnie jasną skórę.","Noś okulary przeciwsłoneczne i używaj kremów przeciwsłonecznych SPF 30+, zakryj ciało<br>"+"ubraniem i kapeluszem, a gdy słońce jest najbardziej intensywne, szukaj cienia około południa.","Noś okulary przeciwsłoneczne i używaj kremu przeciwsłonecznego SPF 30+, zakryj ciało<br>"+"z ochroną przeciwsłoneczną i ubraniem oraz kapelusz z szerokim rondem i skróć czas na<br>"+"słońcu z dwóch godzin przed do trzech godzin po słonecznym południu (około 11:00<br>"+"do 16:00 latem w strefach, w których obserwuje się czas letni)","Stosuj filtr przeciwsłoneczny SPF 30+, noś koszulę, okulary przeciwsłoneczne i kapelusz.<br>"+"Nie zostawaj zbyt długo w słońcu.","Podejmij wszelkie środki ostrożności, w tym:<br>"+"noś okulary przeciwsłoneczne i używać kremu do opalania z filtrem SPF 30+,<br>"+"przykryj ciało koszulą z długim rękawem i spodniami, załóż bardzo szeroki kapelusz, i<br>"+"unikaj słońca od dwóch godzin przed do trzech godzin po słonecznym południu (około 11:00<br>"+"do 16:00 latem w strefach, które obserwują czas letni)"],solar_title:"Promieniowanie słoneczne",solar_currentMax:"Obecne teoretyczne maksymalne promieniowanie",solar_ofMax:"z maksimum",solar_maxToday:"Dzisiejszy maksymalny odczyt",lowest_info:"Najniższa",highest_info:"Najwyższa",lowestF_info:"Najniższa",highestF_info:"Najwyższa",RisingVeryRapidly:"Rośnie bardzo szybko",RisingQuickly:"Rośnie szybko",Rising:"Rośnie",RisingSlowly:"Rośnie powoli",Steady:"Stabilne",FallingSlowly:"Opada wolno",Falling:"Opada",FallingQuickly:"Opada szybko",FallingVeryRapidly:"Opada bardzo szybko",maximum_info:"Maksimum",max_hour_info:"Maksymalnie na godzine",minimum_info:"Minimum",coords:["N","NNE","NE","ENE","E","ESE","SE","SSE","S","SSW","SW","WSW","W","WNW","NW","NNW"],compass:["N","NE","E","SE","S","SW","W","NW"],months:["Sty","Lut","Mar","Kwi","Maj","Cze","Lip","Sie","Wrz","Paź","Lis","Gru"],cloudbase_title:"Poziom chmur",cloudbase_popup_title:"Teoretyczny poziom chmur",cloudbase_popup_text:"Obliczenia są proste:<br>"+"1000 stóp na każde 4,4 stopnia Fahrenheita różnicy między temperaturą, a punktem rosy.<br>"+"Zauważ, że to teoretyczna wysokość, w której chmury Cumulus zaczęłyby się formować,<br>"+"a powietrze było nasycone",feet:"stopy",metres:"metry",miles:"mile",n_miles:"mile morskie",km:"km",};function changeLang(newLang,updateGauges){updateGauges=typeof updateGauges==='undefined'?!0:updateGauges;if(updateGauges){gauges.setLang(newLang)}
+$('#lang_weather').html(newLang.weather);$('#lang_latitude').html(newLang.latitude);$('#lang_longitude').html(newLang.longitude);$('#lang_elevation').html(newLang.elevation);$('#lab_temp1').html(newLang.temp_out_web);$('#lab_temp2').html(newLang.temp_in_web);$('#lab_dew1').html(newLang.dew_web);$('#lab_dew2').html(newLang.apptemp_web);$('#lab_dew3').html(newLang.chill_web);$('#lab_dew4').html(newLang.heat_web);$('#lab_dew5').html(newLang.humdx_web);$('#lab_dew6').html(newLang.feel_web);$('#lab_hum1').html(newLang.hum_out_web);$('#lab_hum2').html(newLang.hum_in_web);$('#lang_temperature').html(newLang.temp_title_out);$('#lang_rainfall').html(newLang.rain_title);$('#lang_pressure').html(newLang.baro_title);$('#lang_windSpeed').html(newLang.wind_title);$('#lang_cloudbase').html(newLang.cloudbase_title)}
\ No newline at end of file
diff --git a/webfiles/lib/steelseries/scripts/src/RGraph.common.core.js b/webfiles/lib/steelseries/scripts/src/RGraph.common.core.js
new file mode 100644
index 0000000..d519bdf
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/RGraph.common.core.js
@@ -0,0 +1,2959 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/license                           |
+    * o------------------------------------------------------------------------------o
+    */
+
+    /**
+    * Initialise the various objects
+    */
+    if (typeof(RGraph) == 'undefined') RGraph = {isRGraph:true,type:'common'};
+
+    RGraph.Registry       = {};
+    RGraph.Registry.store = [];
+    RGraph.Registry.store['chart.event.handlers']       = [];
+    RGraph.Registry.store['__rgraph_event_listeners__'] = []; // Used in the new system for tooltips
+    RGraph.background     = {};
+    RGraph.objects        = [];
+    RGraph.Resizing       = {};
+    RGraph.events         = [];
+    RGraph.cursor         = [];
+    RGraph.DOM2Events     = {};
+
+    RGraph.ObjectRegistry                    = {};
+    RGraph.ObjectRegistry.objects            = {};
+    RGraph.ObjectRegistry.objects.byUID      = [];
+    RGraph.ObjectRegistry.objects.byCanvasID = [];
+
+
+    /**
+    * Some "constants"
+    */
+    HALFPI  = (Math.PI / 2);
+    PI      = Math.PI;
+    TWOPI   = PI * 2;
+    ISOPERA = navigator.userAgent.indexOf('Opera') != -1;
+    //ISIE     is defined below
+    //ISIE6    is defined below
+    //ISIE7    is defined below
+    //ISIE8    is defined below
+    //ISIE9    is defined below
+    //ISIE9UP  is defined below
+    //ISIE10   is defined below
+    //ISIE10UP is defined below
+    //ISOLD    is defined below
+
+
+    /**
+    * Returns five values which are used as a nice scale
+    * 
+    * @param  max int    The maximum value of the graph
+    * @param  obj object The graph object
+    * @return     array   An appropriate scale
+    */
+    RGraph.getScale = function (max, obj)
+    {
+        /**
+        * Special case for 0
+        */
+        if (max == 0) {
+            return ['0.2', '0.4', '0.6', '0.8', '1.0'];
+        }
+
+        var original_max = max;
+
+        /**
+        * Manually do decimals
+        */
+        if (max <= 1) {
+            if (max > 0.5) {
+                return [0.2,0.4,0.6,0.8, Number(1).toFixed(1)];
+
+            } else if (max >= 0.1) {
+                return obj.Get('chart.scale.round') ? [0.2,0.4,0.6,0.8,1] : [0.1,0.2,0.3,0.4,0.5];
+
+            } else {
+
+                var tmp = max;
+                var exp = 0;
+
+                while (tmp < 1.01) {
+                    exp += 1;
+                    tmp *= 10;
+                }
+
+                var ret = ['2e-' + exp, '4e-' + exp, '6e-' + exp, '8e-' + exp, '10e-' + exp];
+
+
+                if (max <= ('5e-' + exp)) {
+                    ret = ['1e-' + exp, '2e-' + exp, '3e-' + exp, '4e-' + exp, '5e-' + exp];
+                }
+
+                return ret;
+            }
+        }
+
+        // Take off any decimals
+        if (String(max).indexOf('.') > 0) {
+            max = String(max).replace(/\.\d+$/, '');
+        }
+
+        var interval = Math.pow(10, Number(String(Number(max)).length - 1));
+        var topValue = interval;
+
+        while (topValue < max) {
+            topValue += (interval / 2);
+        }
+
+        // Handles cases where the max is (for example) 50.5
+        if (Number(original_max) > Number(topValue)) {
+            topValue += (interval / 2);
+        }
+
+        // Custom if the max is greater than 5 and less than 10
+        if (max < 10) {
+            topValue = (Number(original_max) <= 5 ? 5 : 10);
+        }
+        
+        /**
+        * Added 02/11/2010 to create "nicer" scales
+        */
+        if (obj && typeof(obj.Get('chart.scale.round')) == 'boolean' && obj.Get('chart.scale.round')) {
+            topValue = 10 * interval;
+        }
+
+        return [topValue * 0.2, topValue * 0.4, topValue * 0.6, topValue * 0.8, topValue];
+    }
+
+
+    /**
+    * Returns the maximum numeric value which is in an array
+    * 
+    * @param  array arr The array (can also be a number, in which case it's returned as-is)
+    * @param  int       Whether to ignore signs (ie negative/positive)
+    * @return int       The maximum value in the array
+    */
+    RGraph.array_max = function (arr)
+    {
+        var max = null;
+        
+        if (typeof(arr) == 'number') {
+            return arr;
+        }
+        
+        for (var i=0; i<arr.length; ++i) {
+            if (typeof(arr[i]) == 'number') {
+
+                var val = arguments[1] ? Math.abs(arr[i]) : arr[i];
+                
+                if (typeof(max) == 'number') {
+                    max = Math.max(max, val);
+                } else {
+                    max = val;
+                }
+            }
+        }
+        
+        return max;
+    }
+
+
+    /**
+    * Returns the maximum value which is in an array
+    * 
+    * @param  array arr The array
+    * @param  int   len The length to pad the array to
+    * @param  mixed     The value to use to pad the array (optional)
+    */
+    RGraph.array_pad = function (arr, len)
+    {
+        if (arr.length < len) {
+            var val = arguments[2] ? arguments[2] : null;
+            
+            for (var i=arr.length; i<len; ++i) {
+                arr[i] = val;
+            }
+        }
+        
+        return arr;
+    }
+
+
+    /**
+    * An array sum function
+    * 
+    * @param  array arr The  array to calculate the total of
+    * @return int       The summed total of the arrays elements
+    */
+    RGraph.array_sum = function (arr)
+    {
+        // Allow integers
+        if (typeof(arr) == 'number') {
+            return arr;
+        }
+
+        var i, sum;
+        var len = arr.length;
+
+        for(i=0,sum=0;i<len;sum+=arr[i++]);
+        return sum;
+    }
+
+
+
+    /**
+    * Takes any number of arguments and adds them to one big linear array
+    * which is then returned
+    * 
+    * @param ... mixed The data to linearise. You can strings, booleans, numbers or arrays
+    */
+    RGraph.array_linearize = function ()
+    {
+        var arr = [];
+
+        for (var i=0; i<arguments.length; ++i) {
+
+            if (typeof(arguments[i]) == 'object' && arguments[i]) {
+                for (var j=0; j<arguments[i].length; ++j) {
+                    var sub = RGraph.array_linearize(arguments[i][j]);
+                    
+                    for (var k=0; k<sub.length; ++k) {
+                        arr.push(sub[k]);
+                    }
+                }
+            } else {
+                arr.push(arguments[i]);
+            }
+        }
+
+        return arr;
+    }
+
+
+
+    /**
+    * This is a useful function which is basically a shortcut for drawing left, right, top and bottom alligned text.
+    * 
+    * @param object context The context
+    * @param string font    The font
+    * @param int    size    The size of the text
+    * @param int    x       The X coordinate
+    * @param int    y       The Y coordinate
+    * @param string text    The text to draw
+    * @parm  string         The vertical alignment. Can be null. "center" gives center aligned  text, "top" gives top aligned text.
+    *                       Anything else produces bottom aligned text. Default is bottom.
+    * @param  string        The horizontal alignment. Can be null. "center" gives center aligned  text, "right" gives right aligned text.
+    *                       Anything else produces left aligned text. Default is left.
+    * @param  bool          Whether to show a bounding box around the text. Defaults not to
+    * @param int            The angle that the text should be rotate at (IN DEGREES)
+    * @param string         Background color for the text
+    * @param bool           Whether the text is bold or not
+    */
+    RGraph.Text = function (context, font, size, x, y, text)
+    {
+        // "Cache" the args as a local variable
+        var args = arguments;
+
+        // Handle undefined - change it to an empty string
+        if ((typeof(text) != 'string' && typeof(text) != 'number') || text == 'undefined') {
+            return;
+        }
+
+
+
+
+        /**
+        * This accommodates multi-line text
+        */
+        if (typeof(text) == 'string' && text.match(/\r\n/)) {
+
+            var dimensions = RGraph.MeasureText('M', args[11], font, size);
+
+            /**
+            * Measure the text (width and height)
+            */
+
+            var arr = text.split('\r\n');
+
+            /**
+            * Adjust the Y position
+            */
+            
+            // This adjusts the initial y position
+            if (args[6] && args[6] == 'center') y = (y - (dimensions[1] * ((arr.length - 1) / 2)));
+
+            for (var i=1; i<arr.length; ++i) {
+    
+                RGraph.Text(context,
+                            font,
+                            size,
+                            args[9] == -90 ? (x + (size * 1.5)) : x,
+                            y + (dimensions[1] * i),
+                            arr[i],
+                            args[6] ? args[6] : null,
+                            args[7],
+                            args[8],
+                            args[9],
+                            args[10],
+                            args[11],
+                            args[12]);
+            }
+            
+            // Update text to just be the first line
+            text = arr[0];
+        }
+
+
+        // Accommodate MSIE
+        if (document.all && ISOLD) {
+            y += 2;
+        }
+
+
+        context.font = (args[11] ? 'Bold ': '') + size + 'pt ' + font;
+
+        var i;
+        var origX = x;
+        var origY = y;
+        var originalFillStyle = context.fillStyle;
+        var originalLineWidth = context.lineWidth;
+
+        // Need these now the angle can be specified, ie defaults for the former two args
+        if (typeof(args[6])  == 'undefined') args[6]  = 'bottom'; // Vertical alignment. Default to bottom/baseline
+        if (typeof(args[7])  == 'undefined') args[7]  = 'left';   // Horizontal alignment. Default to left
+        if (typeof(args[8])  == 'undefined') args[8]  = null;     // Show a bounding box. Useful for positioning during development. Defaults to false
+        if (typeof(args[9])  == 'undefined') args[9]  = 0;        // Angle (IN DEGREES) that the text should be drawn at. 0 is middle right, and it goes clockwise
+
+        // The alignment is recorded here for purposes of Opera compatibility
+        if (navigator.userAgent.indexOf('Opera') != -1) {
+            context.canvas.__rgraph_valign__ = args[6];
+            context.canvas.__rgraph_halign__ = args[7];
+        }
+
+        // First, translate to x/y coords
+        context.save();
+
+            context.canvas.__rgraph_originalx__ = x;
+            context.canvas.__rgraph_originaly__ = y;
+
+            context.translate(x, y);
+            x = 0;
+            y = 0;
+
+            // Rotate the canvas if need be
+            if (args[9]) {
+                context.rotate(args[9] / (180 / PI));
+            }
+
+
+            // Vertical alignment - defaults to bottom
+            if (args[6]) {
+
+                var vAlign = args[6];
+
+                if (vAlign == 'center') {
+                    context.textBaseline = 'middle';
+                } else if (vAlign == 'top') {
+                    context.textBaseline = 'top';
+                }
+            }
+
+
+            // Hoeizontal alignment - defaults to left
+            if (args[7]) {
+
+                var hAlign = args[7];
+                var width  = context.measureText(text).width;
+    
+                if (hAlign) {
+                    if (hAlign == 'center') {
+                        context.textAlign = 'center';
+                    } else if (hAlign == 'right') {
+                        context.textAlign = 'right';
+                    }
+                }
+            }
+            
+            
+            context.fillStyle = originalFillStyle;
+
+            /**
+            * Draw a bounding box if requested
+            */
+            context.save();
+                 context.fillText(text,0,0);
+                 context.lineWidth = 1;
+                
+                if (args[8]) {
+
+                    var width = context.measureText(text).width;
+                    var width_offset = (hAlign == 'center' ? (width / 2) : (hAlign == 'right' ? width : 0));
+                    var height = size * 1.4; // !!!
+                    var height_offset = (vAlign == 'center' ? (height / 2) : (vAlign == 'top' ? height : 0));
+                    var ieOffset = ISOLD ? 2 : 0;
+
+
+                    context.strokeRect(-3 - width_offset,
+                                       0 - 3 - height - ieOffset + height_offset,
+                                       width + 6,
+                                       height + 6);
+                    /**
+                    * If requested, draw a background for the text
+                    */
+                    if (args[10]) {
+                        context.fillStyle = args[10];
+                        context.fillRect(-3 - width_offset,
+                                           0 - 3 - height - ieOffset + height_offset,
+                                           width + 6,
+                                           height + 6);
+                    }
+                    
+                    context.fillStyle = originalFillStyle;
+
+
+                    /**
+                    * Do the actual drawing of the text
+                    */
+                    context.fillText(text,0,0);
+                }
+            context.restore();
+            
+            // Reset the lineWidth
+            context.lineWidth = originalLineWidth;
+
+        context.restore();
+    }
+
+
+    /**
+    * Clears the canvas by setting the width. You can specify a colour if you wish.
+    * 
+    * @param object canvas The canvas to clear
+    */
+    RGraph.Clear = function (canvas)
+    {
+        if (!canvas) {
+            return;
+        }
+        
+        RGraph.FireCustomEvent(canvas.__object__, 'onbeforeclear');
+
+        var context = canvas.getContext('2d');
+        var color   = arguments[1];
+
+        if (ISIE8 && !color) {
+            color = 'white';
+        }
+
+        /**
+        * Can now clear the canvas back to fully transparent
+        */
+        if (!color || (color && color == 'rgba(0,0,0,0)' || color == 'transparent')) {
+
+            context.clearRect(0,0,canvas.width, canvas.height);
+            
+            // Reset the globalCompositeOperation
+            context.globalCompositeOperation = 'source-over';
+
+        } else {
+
+            context.fillStyle = color;
+            context = canvas.getContext('2d');
+            context.beginPath();
+
+            if (ISIE8) {
+                context.fillRect(0,0,canvas.width,canvas.height);
+            } else {
+                context.fillRect(-10,-10,canvas.width + 20,canvas.height + 20);
+            }
+
+            context.fill();
+        }
+        
+        if (RGraph.ClearAnnotations) {
+            //RGraph.ClearAnnotations(canvas.id);
+        }
+        
+        /**
+        * This removes any background image that may be present
+        */
+        if (RGraph.Registry.Get('chart.background.image.' + canvas.id)) {
+            var img = RGraph.Registry.Get('chart.background.image.' + canvas.id);
+            img.style.position = 'absolute';
+            img.style.left     = '-10000px';
+            img.style.top      = '-10000px';
+        }
+        
+        /**
+        * This hides the tooltip that is showing IF it has the same canvas ID as
+        * that which is being cleared
+        */
+        if (RGraph.Registry.Get('chart.tooltip')) {
+            RGraph.HideTooltip();
+            //RGraph.Redraw();
+        }
+
+        /**
+        * Set the cursor to default
+        */
+        canvas.style.cursor = 'default';
+
+        RGraph.FireCustomEvent(canvas.__object__, 'onclear');
+    }
+
+
+    /**
+    * Draws the title of the graph
+    * 
+    * @param object  canvas The canvas object
+    * @param string  text   The title to write
+    * @param integer gutter The size of the gutter
+    * @param integer        The center X point (optional - if not given it will be generated from the canvas width)
+    * @param integer        Size of the text. If not given it will be 14
+    */
+    RGraph.DrawTitle = function (obj, text, gutterTop)
+    {
+        var canvas       = obj.canvas;
+        var context      = obj.context;
+        var gutterLeft   = obj.Get('chart.gutter.left');
+        var gutterRight  = obj.Get('chart.gutter.right');
+        var gutterTop    = obj.Get('chart.gutter.top');
+        var gutterBottom = obj.Get('chart.gutter.bottom');
+        var size         = arguments[4] ? arguments[4] : 12;
+        var bold         = obj.Get('chart.title.bold');
+        var centerx      = (arguments[3] ? arguments[3] : ((obj.canvas.width - gutterLeft - gutterRight) / 2) + gutterLeft);
+        var keypos       = obj.Get('chart.key.position');
+        var vpos         = obj.Get('chart.title.vpos');
+        var hpos         = obj.Get('chart.title.hpos');
+        var bgcolor      = obj.Get('chart.title.background');
+        var x            = obj.Get('chart.title.x');
+        var y            = obj.Get('chart.title.y');
+        var halign       = 'center';
+        var valign       = 'center';
+
+        // Account for 3D effect by faking the key position
+        if (obj.type == 'bar' && obj.Get('chart.variant') == '3d') {
+            keypos = 'gutter';
+        }
+
+        context.beginPath();
+        context.fillStyle = obj.Get('chart.text.color') ? obj.Get('chart.text.color') : 'black';
+
+
+
+
+
+        /**
+        * Vertically center the text if the key is not present
+        */
+        if (keypos && keypos != 'gutter') {
+            var valign = 'center';
+
+        } else if (!keypos) {
+            var valign = 'center';
+
+        } else {
+            var valign = 'bottom';
+        }
+
+
+
+
+
+        // if chart.title.vpos is a number, use that
+        if (typeof(obj.Get('chart.title.vpos')) == 'number') {
+            vpos = obj.Get('chart.title.vpos') * gutterTop;
+
+            if (obj.Get('chart.xaxispos') == 'top') {
+                vpos = obj.Get('chart.title.vpos') * gutterBottom + gutterTop + (obj.canvas.height - gutterTop - gutterBottom);
+            }
+
+        } else {
+            vpos = gutterTop - size - 5;
+
+            if (obj.Get('chart.xaxispos') == 'top') {
+                vpos = obj.canvas.height  - gutterBottom + size + 5;
+            }
+        }
+
+
+
+
+        // if chart.title.hpos is a number, use that. It's multiplied with the (entire) canvas width
+        if (typeof(hpos) == 'number') {
+            centerx = hpos * canvas.width;
+        }
+
+        /**
+        * Now the chart.title.x and chart.title.y settings override (is set) the above
+        */
+        if (typeof(x) == 'number') {
+            centerx = x;
+        }
+
+        if (typeof(y) == 'number') {
+            vpos = y;
+        }
+
+
+
+
+        /**
+        * Horizontal alignment can now (Jan 2013) be specified
+        */
+        if (typeof(obj.properties['chart.title.halign']) == 'string') {
+            halign = obj.properties['chart.title.halign'];
+        }
+        
+        /**
+        * Vertical alignment can now (Jan 2013) be specified
+        */
+        if (typeof(obj.properties['chart.title.valign']) == 'string') {
+            valign = obj.properties['chart.title.valign'];
+        }
+
+
+
+
+        
+        // Set the colour
+        if (typeof(obj.Get('chart.title.color') != null)) {
+            var oldColor = context.fillStyle
+            var newColor = obj.Get('chart.title.color')
+            context.fillStyle = newColor ? newColor : 'black';
+        }
+
+
+
+
+        /**
+        * Default font is Arial
+        */
+        var font = obj.Get('chart.text.font');
+
+
+
+
+        /**
+        * Override the default font with chart.title.font
+        */
+        if (typeof(obj.Get('chart.title.font')) == 'string') {
+            font = obj.Get('chart.title.font');
+        }
+
+
+
+
+        /**
+        * Draw the title
+        */
+        RGraph.Text(context,
+                    font,
+                    size,
+                    centerx,
+                    vpos,
+                    text,
+                    valign,
+                    halign,
+                    bgcolor != null,
+                    null,
+                    bgcolor,
+                    bold);
+        
+        // Reset the fill colour
+        context.fillStyle = oldColor;
+    }
+
+
+
+    /**
+    * This function returns the mouse position in relation to the canvas
+    * 
+    * @param object e The event object.
+    *
+    RGraph.getMouseXY = function (e)
+    {
+        var el = (ISOLD ? event.srcElement : e.target);
+        var x;
+        var y;
+
+        // ???
+        var paddingLeft = el.style.paddingLeft ? parseInt(el.style.paddingLeft) : 0;
+        var paddingTop  = el.style.paddingTop ? parseInt(el.style.paddingTop) : 0;
+        var borderLeft  = el.style.borderLeftWidth ? parseInt(el.style.borderLeftWidth) : 0;
+        var borderTop   = el.style.borderTopWidth  ? parseInt(el.style.borderTopWidth) : 0;
+        
+        if (ISIE8) e = event;
+
+        // Browser with offsetX and offsetY
+        if (typeof(e.offsetX) == 'number' && typeof(e.offsetY) == 'number') {
+            x = e.offsetX;
+            y = e.offsetY;
+
+        // FF and other
+        } else {
+            x = 0;
+            y = 0;
+
+            while (el != document.body && el) {
+                x += el.offsetLeft;
+                y += el.offsetTop;
+
+                el = el.offsetParent;
+            }
+
+            x = e.pageX - x;
+            y = e.pageY - y;
+        }
+
+        return [x, y];
+    }*/
+
+
+    RGraph.getMouseXY = function(e)
+    {
+        var el      = e.target;
+        var ca      = el;
+        var offsetX = 0;
+        var offsetY = 0;
+        var x;
+        var y;
+
+
+        // Add padding and border style widths to offset
+        var additionalX =  (parseInt(ca.style.borderLeftWidth) || 0) + (parseInt(ca.style.paddingLeft) || 0);
+        var additionalY = (parseInt(ca.style.borderTopWidth) || 0) + (parseInt(ca.style.paddingTop) || 0);
+
+
+        if (typeof(e.offsetX) == 'number' && typeof(e.offsetY) == 'number') {
+
+            x = e.offsetX - additionalX;
+            y = e.offsetY - additionalY;
+
+        } else {
+
+            if (typeof(el.offsetParent) != 'undefined') {
+                do {
+                    offsetX += el.offsetLeft;
+                    offsetY += el.offsetTop;
+                } while ((el = el.offsetParent));
+            }
+
+    
+            x = e.pageX - offsetX - additionalX;
+            y = e.pageY - offsetY - additionalY;
+        }
+
+        // We return a simple javascript object (a hash) with x and y defined
+        return [x, y];
+    }
+
+
+    /**
+    * This function returns a two element array of the canvas x/y position in
+    * relation to the page
+    * 
+    * @param object canvas
+    */
+    RGraph.getCanvasXY = function (canvas)
+    {
+        var x   = 0;
+        var y   = 0;
+        var obj = canvas;
+
+        do {
+
+            x += obj.offsetLeft;
+            y += obj.offsetTop;
+
+            obj = obj.offsetParent;
+
+        } while (obj && obj.tagName.toLowerCase() != 'body');
+
+
+        var paddingLeft = canvas.style.paddingLeft ? parseInt(canvas.style.paddingLeft) : 0;
+        var paddingTop  = canvas.style.paddingTop ? parseInt(canvas.style.paddingTop) : 0;
+        var borderLeft  = canvas.style.borderLeftWidth ? parseInt(canvas.style.borderLeftWidth) : 0;
+        var borderTop   = canvas.style.borderTopWidth  ? parseInt(canvas.style.borderTopWidth) : 0;
+
+        return [x + paddingLeft + borderLeft, y + paddingTop + borderTop];
+    }
+
+
+    /**
+    * Registers a graph object (used when the canvas is redrawn)
+    * 
+    * @param object obj The object to be registered
+    */
+    RGraph.Register = function (obj)
+    {
+        // Checking this property ensures the object is only registered once
+        if (!obj.Get('chart.noregister')) {
+            // As of 21st/1/2012 the object registry is now used
+            RGraph.ObjectRegistry.Add(obj);
+            obj.Set('chart.noregister', true);
+        }
+    }
+
+
+    /**
+    * Causes all registered objects to be redrawn
+    * 
+    * @param string An optional color to use to clear the canvas
+    */
+    RGraph.Redraw = function ()
+    {
+        var objectRegistry = RGraph.ObjectRegistry.objects.byCanvasID;
+
+        // Get all of the canvas tags on the page
+        var tags = document.getElementsByTagName('canvas');
+        for (var i=0; i<tags.length; ++i) {
+            if (tags[i].__object__ && tags[i].__object__.isRGraph) {
+                
+                // Only clear the canvas if it's not Trace'ing - this applies to the Line/Scatter Trace effects
+                if (!tags[i].noclear) {
+                    RGraph.Clear(tags[i], arguments[0] ? arguments[0] : null);
+                }
+            }
+        }
+
+        // Go through the object registry and redraw *all* of the canvas'es that have been registered
+        for (var i=0; i<objectRegistry.length; ++i) {
+            if (objectRegistry[i]) {
+                var id = objectRegistry[i][0];
+                objectRegistry[i][1].Draw();
+            }
+        }
+    }
+
+
+
+    /**
+    * Causes all registered objects ON THE GIVEN CANVAS to be redrawn
+    * 
+    * @param canvas object The canvas object to redraw
+    * @param        bool   Optional boolean which defaults to true and determines whether to clear the canvas
+    */
+    RGraph.RedrawCanvas = function (canvas)
+    {
+        var objects = RGraph.ObjectRegistry.getObjectsByCanvasID(canvas.id);
+
+        /**
+        * First clear the canvas
+        */
+        if (!arguments[1] || (typeof(arguments[1]) == 'boolean' && !arguments[1] == false) ) {
+            RGraph.Clear(canvas);
+        }
+
+        /**
+        * Now redraw all the charts associated with that canvas
+        */
+        for (var i=0; i<objects.length; ++i) {
+            if (objects[i]) {
+                if (objects[i] && objects[i].isRGraph) { // Is it an RGraph object ??
+                    objects[i].Draw();
+                }
+            }
+        }
+    }
+
+
+    /**
+    * This function draws the background for the bar chart, line chart and scatter chart.
+    * 
+    * @param  object obj The graph object
+    */
+    RGraph.background.Draw = function (obj)
+    {
+        var canvas       = obj.canvas;
+        var context      = obj.context;
+        var height       = 0;
+        var gutterLeft   = obj.Get('chart.gutter.left');
+        var gutterRight  = obj.Get('chart.gutter.right');
+        var gutterTop    = obj.Get('chart.gutter.top');
+        var gutterBottom = obj.Get('chart.gutter.bottom');
+        var variant      = obj.Get('chart.variant');
+        
+        context.fillStyle = obj.Get('chart.text.color');
+        
+        // If it's a bar and 3D variant, translate
+        if (variant == '3d') {
+            context.save();
+            context.translate(10, -5);
+        }
+
+        // X axis title
+        if (typeof(obj.Get('chart.title.xaxis')) == 'string' && obj.Get('chart.title.xaxis').length) {
+        
+            var size = obj.Get('chart.text.size') + 2;
+            var font = obj.Get('chart.text.font');
+            var bold = obj.Get('chart.title.xaxis.bold');
+
+            if (typeof(obj.Get('chart.title.xaxis.size')) == 'number') {
+                size = obj.Get('chart.title.xaxis.size');
+            }
+
+            if (typeof(obj.Get('chart.title.xaxis.font')) == 'string') {
+                font = obj.Get('chart.title.xaxis.font');
+            }
+            
+            var hpos = ((obj.canvas.width - obj.gutterLeft - obj.gutterRight) / 2) + obj.gutterLeft;
+            var vpos = obj.canvas.height - obj.Get('chart.gutter.bottom') + 25;
+            
+            if (typeof(obj.Get('chart.title.xaxis.pos')) == 'number') {
+                vpos = obj.canvas.height - (gutterBottom * obj.Get('chart.title.xaxis.pos'));
+            }
+        
+            context.beginPath();
+            RGraph.Text(context,
+                        font,
+                        size,
+                        hpos,
+                        vpos,
+                        obj.Get('chart.title.xaxis'),
+                        'center',
+                        'center',
+                        false,
+                        false,
+                        false,
+                        bold);
+            context.fill();
+        }
+
+        // Y axis title
+        if (typeof(obj.Get('chart.title.yaxis')) == 'string' && obj.Get('chart.title.yaxis').length) {
+
+            var size  = obj.Get('chart.text.size') + 2;
+            var font  = obj.Get('chart.text.font');
+            var angle = 270;
+            var bold  = obj.Get('chart.title.yaxis.bold');
+            var color = obj.Get('chart.title.yaxis.color');
+
+            if (typeof(obj.Get('chart.title.yaxis.pos')) == 'number') {
+                var yaxis_title_pos = obj.Get('chart.title.yaxis.pos') * obj.Get('chart.gutter.left');
+            } else {
+                var yaxis_title_pos = ((obj.Get('chart.gutter.left') - 25) / obj.Get('chart.gutter.left')) * obj.Get('chart.gutter.left');
+            }
+
+            if (typeof(obj.Get('chart.title.yaxis.size')) == 'number') {
+                size = obj.Get('chart.title.yaxis.size');
+            }
+
+            if (typeof(obj.Get('chart.title.yaxis.font')) == 'string') {
+                font = obj.Get('chart.title.yaxis.font');
+            }
+
+            if (obj.Get('chart.title.yaxis.align') == 'right' || obj.Get('chart.title.yaxis.position') == 'right') {
+                angle = 90;
+                yaxis_title_pos = obj.Get('chart.title.yaxis.pos') ? (obj.canvas.width - obj.Get('chart.gutter.right')) + (obj.Get('chart.title.yaxis.pos') * obj.Get('chart.gutter.right')) :
+                                                                     obj.canvas.width - obj.Get('chart.gutter.right') + obj.Get('chart.text.size') + 5;
+            } else {
+                yaxis_title_pos = yaxis_title_pos;
+            }
+            
+
+            context.beginPath();
+            context.fillStyle = color;
+            RGraph.Text(context,
+                        font,
+                        size,
+                        yaxis_title_pos,
+                        ((obj.canvas.height - obj.gutterTop - obj.gutterBottom) / 2) + obj.gutterTop,
+                        obj.Get('chart.title.yaxis'),
+                        'center',
+                        'center',
+                        false,
+                        angle,
+                        false,
+                        bold);
+            context.fill();
+        }
+
+        obj.context.beginPath();
+
+        // Draw the horizontal bars
+        context.fillStyle = obj.Get('chart.background.barcolor1');
+        height = (obj.canvas.height - gutterBottom);
+
+        for (var i=gutterTop; i < height ; i+=80) {
+            obj.context.fillRect(gutterLeft, i, obj.canvas.width - gutterLeft - gutterRight, Math.min(40, obj.canvas.height - gutterBottom - i) );
+        }
+
+            context.fillStyle = obj.Get('chart.background.barcolor2');
+            height = (RGraph.GetHeight(obj) - gutterBottom);
+    
+            for (var i= (40 + gutterTop); i < height; i+=80) {
+                obj.context.fillRect(gutterLeft, i, obj.canvas.width - gutterLeft - gutterRight, i + 40 > (obj.canvas.height - gutterBottom) ? obj.canvas.height - (gutterBottom + i) : 40);
+            }
+            
+            context.stroke();
+    
+
+        // Draw the background grid
+        if (obj.Get('chart.background.grid')) {
+
+            // If autofit is specified, use the .numhlines and .numvlines along with the width to work
+            // out the hsize and vsize
+            if (obj.Get('chart.background.grid.autofit')) {
+
+                /**
+                * Align the grid to the tickmarks
+                */
+                if (obj.Get('chart.background.grid.autofit.align')) {
+                    // Align the horizontal lines
+                    obj.Set('chart.background.grid.autofit.numhlines', obj.Get('chart.ylabels.count'));
+
+                    // Align the vertical lines for the line
+                    if (obj.type == 'line') {
+                        if (obj.Get('chart.labels') && obj.Get('chart.labels').length) {
+                            obj.Set('chart.background.grid.autofit.numvlines', obj.Get('chart.labels').length - 1);
+                        } else {
+                            obj.Set('chart.background.grid.autofit.numvlines', obj.data[0].length - 1);
+                        }
+
+                    // Align the vertical lines for the bar
+                    } else if (obj.type == 'bar' && obj.Get('chart.labels') && obj.Get('chart.labels').length) {
+                        obj.Set('chart.background.grid.autofit.numvlines', obj.Get('chart.labels').length);
+                    }
+                }
+
+                var vsize = ((obj.canvas.width - gutterLeft - gutterRight)) / obj.properties['chart.background.grid.autofit.numvlines'];
+                var hsize = (obj.canvas.height - gutterTop - gutterBottom) / obj.properties['chart.background.grid.autofit.numhlines'];
+
+                obj.Set('chart.background.grid.vsize', vsize);
+                obj.Set('chart.background.grid.hsize', hsize);
+            }
+
+            context.beginPath();
+            context.lineWidth   = obj.Get('chart.background.grid.width') ? obj.Get('chart.background.grid.width') : 1;
+            context.strokeStyle = obj.Get('chart.background.grid.color');
+
+            // Draw the horizontal lines
+            if (obj.Get('chart.background.grid.hlines')) {
+                height = (RGraph.GetHeight(obj) - gutterBottom)
+                for (y=gutterTop; y<height; y+=obj.Get('chart.background.grid.hsize')) {
+                    context.moveTo(gutterLeft, Math.round(y));
+                    context.lineTo(obj.canvas.width - gutterRight, Math.round(y));
+                }
+            }
+
+            if (obj.Get('chart.background.grid.vlines')) {
+                // Draw the vertical lines
+                var width = (obj.canvas.width - gutterRight)
+                for (x=gutterLeft; x<=width; x+=obj.Get('chart.background.grid.vsize')) {
+                    context.moveTo(Math.round(x), gutterTop);
+                    context.lineTo(Math.round(x), obj.canvas.height - gutterBottom);
+                }
+            }
+
+            if (obj.Get('chart.background.grid.border')) {
+                // Make sure a rectangle, the same colour as the grid goes around the graph
+                context.strokeStyle = obj.Get('chart.background.grid.color');
+                context.strokeRect(Math.round(gutterLeft), Math.round(gutterTop), obj.canvas.width - gutterLeft - gutterRight, obj.canvas.height - gutterTop - gutterBottom);
+            }
+        }
+
+        context.stroke();
+
+        // If it's a bar and 3D variant, translate
+        if (variant == '3d') {
+            context.restore();
+        }
+
+        // Draw the title if one is set
+        if ( typeof(obj.Get('chart.title')) == 'string') {
+
+            if (obj.type == 'gantt') {
+                gutterTop -= 10;
+            }
+
+            RGraph.DrawTitle(obj,
+                             obj.Get('chart.title'),
+                             gutterTop,
+                             null,
+                             obj.Get('chart.title.size') ? obj.Get('chart.title.size') : obj.Get('chart.text.size') + 2);
+        }
+
+        context.stroke();
+    }
+
+
+    /**
+    * Returns the day number for a particular date. Eg 1st February would be 32
+    * 
+    * @param   object obj A date object
+    * @return  int        The day number of the given date
+    */
+    RGraph.GetDays = function (obj)
+    {
+        var year  = obj.getFullYear();
+        var days  = obj.getDate();
+        var month = obj.getMonth();
+
+        if (month == 0) return days;
+        if (month >= 1) days += 31; 
+        if (month >= 2) days += 28;
+
+        // Leap years. Crude, but it functions
+        if (year >= 2008 && year % 4 == 0) days += 1;
+
+        if (month >= 3) days += 31;
+        if (month >= 4) days += 30;
+        if (month >= 5) days += 31;
+        if (month >= 6) days += 30;
+        if (month >= 7) days += 31;
+        if (month >= 8) days += 31;
+        if (month >= 9) days += 30;
+        if (month >= 10) days += 31;
+        if (month >= 11) days += 30;
+        
+        return days;
+    }
+
+
+    /**
+    * Makes a clone of an object
+    * 
+    * @param obj val The object to clone
+    */
+    RGraph.array_clone = function (obj)
+    {
+        if(obj == null || typeof(obj) != 'object') {
+            return obj;
+        }
+
+        var temp = [];
+
+        for (var i=0;i<obj.length; ++i) {
+
+            if (typeof(obj[i]) == 'number') {
+                temp[i] = (function (arg) {return Number(arg);})(obj[i]);
+            } else if (typeof(obj[i]) == 'string') {
+                temp[i] = (function (arg) {return String(arg);})(obj[i]);
+            } else if (typeof(obj[i]) == 'function') {
+                temp[i] = obj[i];
+            
+            } else {
+                temp[i] = RGraph.array_clone(obj[i]);
+            }
+        }
+
+        return temp;
+    }
+
+
+    /**
+    * Formats a number with thousand seperators so it's easier to read
+    * 
+    * @param  integer obj The chart object
+    * @param  integer num The number to format
+    * @param  string      The (optional) string to prepend to the string
+    * @param  string      The (optional) string to append to the string
+    * @return string      The formatted number
+    */
+    RGraph.number_format = function (obj, num)
+    {
+        var i;
+        var prepend = arguments[2] ? String(arguments[2]) : '';
+        var append  = arguments[3] ? String(arguments[3]) : '';
+        var output  = '';
+        var decimal = '';
+        var decimal_seperator  = obj.Get('chart.scale.point') ? obj.Get('chart.scale.point') : '.';
+        var thousand_seperator = obj.Get('chart.scale.thousand') ? obj.Get('chart.scale.thousand') : ',';
+        RegExp.$1   = '';
+        var i,j;
+
+        if (typeof(obj.Get('chart.scale.formatter')) == 'function') {
+            return obj.Get('chart.scale.formatter')(obj, num);
+        }
+
+        // Ignore the preformatted version of "1e-2"
+        if (String(num).indexOf('e') > 0) {
+            return String(prepend + String(num) + append);
+        }
+
+        // We need then number as a string
+        num = String(num);
+        
+        // Take off the decimal part - we re-append it later
+        if (num.indexOf('.') > 0) {
+            var tmp = num;
+            num     = num.replace(/\.(.*)/, ''); // The front part of the number
+            decimal = tmp.replace(/(.*)\.(.*)/, '$2'); // The decimal part of the number
+        }
+
+        // Thousand seperator
+        //var seperator = arguments[1] ? String(arguments[1]) : ',';
+        var seperator = thousand_seperator;
+        
+        /**
+        * Work backwards adding the thousand seperators
+        */
+        var foundPoint;
+        for (i=(num.length - 1),j=0; i>=0; j++,i--) {
+            var character = num.charAt(i);
+            
+            if ( j % 3 == 0 && j != 0) {
+                output += seperator;
+            }
+            
+            /**
+            * Build the output
+            */
+            output += character;
+        }
+        
+        /**
+        * Now need to reverse the string
+        */
+        var rev = output;
+        output = '';
+        for (i=(rev.length - 1); i>=0; i--) {
+            output += rev.charAt(i);
+        }
+
+        // Tidy up
+        //output = output.replace(/^-,/, '-');
+        if (output.indexOf('-' + obj.Get('chart.scale.thousand')) == 0) {
+            output = '-' + output.substr(('-' + obj.Get('chart.scale.thousand')).length);
+        }
+
+        // Reappend the decimal
+        if (decimal.length) {
+            output =  output + decimal_seperator + decimal;
+            decimal = '';
+            RegExp.$1 = '';
+        }
+
+        // Minor bugette
+        if (output.charAt(0) == '-') {
+            output = output.replace(/-/, '');
+            prepend = '-' + prepend;
+        }
+
+        return prepend + output + append;
+    }
+
+
+    /**
+    * Draws horizontal coloured bars on something like the bar, line or scatter
+    */
+    RGraph.DrawBars = function (obj)
+    {
+        var hbars = obj.Get('chart.background.hbars');
+
+        /**
+        * Draws a horizontal bar
+        */
+        obj.context.beginPath();
+        
+        for (i=0; i<hbars.length; ++i) {
+            
+            // If null is specified as the "height", set it to the upper max value
+            if (hbars[i][1] == null) {
+                hbars[i][1] = obj.max;
+            
+            // If the first index plus the second index is greater than the max value, adjust accordingly
+            } else if (hbars[i][0] + hbars[i][1] > obj.max) {
+                hbars[i][1] = obj.max - hbars[i][0];
+            }
+
+
+            // If height is negative, and the abs() value is greater than .max, use a negative max instead
+            if (Math.abs(hbars[i][1]) > obj.max) {
+                hbars[i][1] = -1 * obj.max;
+            }
+
+
+            // If start point is greater than max, change it to max
+            if (Math.abs(hbars[i][0]) > obj.max) {
+                hbars[i][0] = obj.max;
+            }
+            
+            // If start point plus height is less than negative max, use the negative max plus the start point
+            if (hbars[i][0] + hbars[i][1] < (-1 * obj.max) ) {
+                hbars[i][1] = -1 * (obj.max + hbars[i][0]);
+            }
+
+            // If the X axis is at the bottom, and a negative max is given, warn the user
+            if (obj.Get('chart.xaxispos') == 'bottom' && (hbars[i][0] < 0 || (hbars[i][1] + hbars[i][1] < 0)) ) {
+                alert('[' + obj.type.toUpperCase() + ' (ID: ' + obj.id + ') BACKGROUND HBARS] You have a negative value in one of your background hbars values, whilst the X axis is in the center');
+            }
+
+            var ystart = (obj.grapharea - (((hbars[i][0] - obj.min) / (obj.max - obj.min)) * obj.grapharea));
+            var height = (Math.min(hbars[i][1], obj.max - hbars[i][0]) / (obj.max - obj.min)) * obj.grapharea;
+
+            // Account for the X axis being in the center
+            if (obj.Get('chart.xaxispos') == 'center') {
+                ystart /= 2;
+                height /= 2;
+            }
+            
+            ystart += obj.Get('chart.gutter.top')
+
+            var x = obj.Get('chart.gutter.left');
+            var y = ystart - height;
+            var w = obj.canvas.width - obj.Get('chart.gutter.left') - obj.Get('chart.gutter.right');
+            var h = height;
+            
+            // Accommodate Opera :-/
+            if (navigator.userAgent.indexOf('Opera') != -1 && obj.Get('chart.xaxispos') == 'center' && h < 0) {
+                h *= -1;
+                y = y - h;
+            }
+            
+            /**
+            * Account for X axis at the top
+            */
+            if (obj.Get('chart.xaxispos') == 'top') {
+                y  = obj.canvas.height - y;
+                h *= -1;
+            }
+
+            obj.context.fillStyle = hbars[i][2];
+            obj.context.fillRect(x, y, w, h);
+        }
+
+        obj.context.fill();
+    }
+
+
+    /**
+    * Draws in-graph labels.
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.DrawInGraphLabels = function (obj)
+    {
+        var canvas  = obj.canvas;
+        var context = obj.context;
+        var labels  = obj.Get('chart.labels.ingraph');
+        var labels_processed = [];
+
+        // Defaults
+        var fgcolor   = 'black';
+        var bgcolor   = 'white';
+        var direction = 1;
+
+        if (!labels) {
+            return;
+        }
+
+        /**
+        * Preprocess the labels array. Numbers are expanded
+        */
+        for (var i=0; i<labels.length; ++i) {
+            if (typeof(labels[i]) == 'number') {
+                for (var j=0; j<labels[i]; ++j) {
+                    labels_processed.push(null);
+                }
+            } else if (typeof(labels[i]) == 'string' || typeof(labels[i]) == 'object') {
+                labels_processed.push(labels[i]);
+            
+            } else {
+                labels_processed.push('');
+            }
+        }
+
+        /**
+        * Turn off any shadow
+        */
+        RGraph.NoShadow(obj);
+
+        if (labels_processed && labels_processed.length > 0) {
+
+            for (var i=0; i<labels_processed.length; ++i) {
+                if (labels_processed[i]) {
+                    var coords = obj.coords[i];
+                    
+                    if (coords && coords.length > 0) {
+                        var x      = (obj.type == 'bar' ? coords[0] + (coords[2] / 2) : coords[0]);
+                        var y      = (obj.type == 'bar' ? coords[1] + (coords[3] / 2) : coords[1]);
+                        var length = typeof(labels_processed[i][4]) == 'number' ? labels_processed[i][4] : 25;
+    
+                        context.beginPath();
+                        context.fillStyle   = 'black';
+                        context.strokeStyle = 'black';
+                        
+    
+                        if (obj.type == 'bar') {
+                        
+                            /**
+                            * X axis at the top
+                            */
+                            if (obj.Get('chart.xaxispos') == 'top') {
+                                length *= -1;
+                            }
+    
+                            if (obj.Get('chart.variant') == 'dot') {
+                                context.moveTo(Math.round(x), obj.coords[i][1] - 5);
+                                context.lineTo(Math.round(x), obj.coords[i][1] - 5 - length);
+                                
+                                var text_x = Math.round(x);
+                                var text_y = obj.coords[i][1] - 5 - length;
+                            
+                            } else if (obj.Get('chart.variant') == 'arrow') {
+                                context.moveTo(Math.round(x), obj.coords[i][1] - 5);
+                                context.lineTo(Math.round(x), obj.coords[i][1] - 5 - length);
+                                
+                                var text_x = Math.round(x);
+                                var text_y = obj.coords[i][1] - 5 - length;
+                            
+                            } else {
+    
+                                context.arc(Math.round(x), y, 2.5, 0, 6.28, 0);
+                                context.moveTo(Math.round(x), y);
+                                context.lineTo(Math.round(x), y - length);
+
+                                var text_x = Math.round(x);
+                                var text_y = y - length;
+                            }
+
+                            context.stroke();
+                            context.fill();
+                            
+    
+                        } else if (obj.type == 'line') {
+                        
+                            if (
+                                typeof(labels_processed[i]) == 'object' &&
+                                typeof(labels_processed[i][3]) == 'number' &&
+                                labels_processed[i][3] == -1
+                               ) {
+
+                                context.moveTo(Math.round(x), y + 5);
+                                context.lineTo(Math.round(x), y + 5 + length);
+                                
+                                context.stroke();
+                                context.beginPath();                                
+                                
+                                // This draws the arrow
+                                context.moveTo(Math.round(x), y + 5);
+                                context.lineTo(Math.round(x) - 3, y + 10);
+                                context.lineTo(Math.round(x) + 3, y + 10);
+                                context.closePath();
+                                
+                                var text_x = x;
+                                var text_y = y + 5 + length;
+                            
+                            } else {
+                                
+                                var text_x = x;
+                                var text_y = y - 5 - length;
+
+                                context.moveTo(Math.round(x), y - 5);
+                                context.lineTo(Math.round(x), y - 5 - length);
+                                
+                                context.stroke();
+                                context.beginPath();
+                                
+                                // This draws the arrow
+                                context.moveTo(Math.round(x), y - 5);
+                                context.lineTo(Math.round(x) - 3, y - 10);
+                                context.lineTo(Math.round(x) + 3, y - 10);
+                                context.closePath();
+                            }
+                        
+                            context.fill();
+                        }
+
+                        // Taken out on the 10th Nov 2010 - unnecessary
+                        //var width = context.measureText(labels[i]).width;
+                        
+                        context.beginPath();
+                            
+                            // Fore ground color
+                            context.fillStyle = (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][1]) == 'string') ? labels_processed[i][1] : 'black';
+
+                            RGraph.Text(context,
+                                        obj.Get('chart.text.font'),
+                                        obj.Get('chart.text.size'),
+                                        text_x,
+                                        text_y,
+                                        (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][0]) == 'string') ? labels_processed[i][0] : labels_processed[i],
+                                        'bottom',
+                                        'center',
+                                        true,
+                                        null,
+                                        (typeof(labels_processed[i]) == 'object' && typeof(labels_processed[i][2]) == 'string') ? labels_processed[i][2] : 'white');
+                        context.fill();
+                    }
+                }
+            }
+        }
+    }
+
+
+    /**
+    * This function "fills in" key missing properties that various implementations lack
+    * 
+    * @param object e The event object
+    */
+    RGraph.FixEventObject = function (e)
+    {
+        if (ISOLD) {
+            var e = event;
+
+            e.pageX  = (event.clientX + document.body.scrollLeft);
+            e.pageY  = (event.clientY + document.body.scrollTop);
+            e.target = event.srcElement;
+            
+            if (!document.body.scrollTop && document.documentElement.scrollTop) {
+                e.pageX += parseInt(document.documentElement.scrollLeft);
+                e.pageY += parseInt(document.documentElement.scrollTop);
+            }
+        }
+
+        // This is mainly for FF which doesn't provide offsetX
+        if (typeof(e.offsetX) == 'undefined' && typeof(e.offsetY) == 'undefined') {
+            var coords = RGraph.getMouseXY(e);
+            e.offsetX = coords[0];
+            e.offsetY = coords[1];
+        }
+        
+        // Any browser that doesn't implement stopPropagation() (MSIE)
+        if (!e.stopPropagation) {
+            e.stopPropagation = function () {window.event.cancelBubble = true;}
+        }
+        
+        return e;
+    }
+
+    /**
+    * Thisz function hides the crosshairs coordinates
+    */
+    RGraph.HideCrosshairCoords = function ()
+    {
+        var div = RGraph.Registry.Get('chart.coordinates.coords.div');
+
+        if (   div
+            && div.style.opacity == 1
+            && div.__object__.Get('chart.crosshairs.coords.fadeout')
+           ) {
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.9;}, 50);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.8;}, 100);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.7;}, 150);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.6;}, 200);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.5;}, 250);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.4;}, 300);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.3;}, 350);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.2;}, 400);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0.1;}, 450);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.opacity = 0;}, 500);
+            setTimeout(function() {RGraph.Registry.Get('chart.coordinates.coords.div').style.display = 'none';}, 550);
+        }
+    }
+
+
+    /**
+    * Draws the3D axes/background
+    */
+    RGraph.Draw3DAxes = function (obj)
+    {
+        var gutterLeft    = obj.Get('chart.gutter.left');
+        var gutterRight   = obj.Get('chart.gutter.right');
+        var gutterTop     = obj.Get('chart.gutter.top');
+        var gutterBottom  = obj.Get('chart.gutter.bottom');
+
+        var context = obj.context;
+        var canvas  = obj.canvas;
+
+        context.strokeStyle = '#aaa';
+        context.fillStyle = '#ddd';
+
+        // Draw the vertical left side
+        context.beginPath();
+            context.moveTo(gutterLeft, gutterTop);
+            context.lineTo(gutterLeft + 10, gutterTop - 5);
+            context.lineTo(gutterLeft + 10, canvas.height - gutterBottom - 5);
+            context.lineTo(gutterLeft, canvas.height - gutterBottom);
+        context.closePath();
+        
+        context.stroke();
+        context.fill();
+
+        // Draw the bottom floor
+        context.beginPath();
+            context.moveTo(gutterLeft, canvas.height - gutterBottom);
+            context.lineTo(gutterLeft + 10, canvas.height - gutterBottom - 5);
+            context.lineTo(canvas.width - gutterRight + 10,  canvas.height - gutterBottom - 5);
+            context.lineTo(canvas.width - gutterRight, canvas.height - gutterBottom);
+        context.closePath();
+        
+        context.stroke();
+        context.fill();
+    }
+
+
+
+    /**
+    * This function attempts to "fill in" missing functions from the canvas
+    * context object. Only two at the moment - measureText() nd fillText().
+    * 
+    * @param object context The canvas 2D context
+    */
+    RGraph.OldBrowserCompat = function (context)
+    {
+        if (!context) {
+            return;
+        }
+
+        if (!context.measureText) {
+        
+            // This emulates the measureText() function
+            context.measureText = function (text)
+            {
+                var textObj = document.createElement('DIV');
+                textObj.innerHTML = text;
+                textObj.style.position = 'absolute';
+                textObj.style.top = '-100px';
+                textObj.style.left = 0;
+                document.body.appendChild(textObj);
+
+                var width = {width: textObj.offsetWidth};
+                
+                textObj.style.display = 'none';
+                
+                return width;
+            }
+        }
+
+        if (!context.fillText) {
+            // This emulates the fillText() method
+            context.fillText    = function (text, targetX, targetY)
+            {
+                return false;
+            }
+        }
+        
+        // If IE8, add addEventListener()
+        if (!context.canvas.addEventListener) {
+            window.addEventListener = function (ev, func, bubble)
+            {
+                return this.attachEvent('on' + ev, func);
+            }
+
+            context.canvas.addEventListener = function (ev, func, bubble)
+            {
+                return this.attachEvent('on' + ev, func);
+            }
+        }
+    }
+
+
+    /**
+    * Draws a rectangle with curvy corners
+    * 
+    * @param context object The context
+    * @param x       number The X coordinate (top left of the square)
+    * @param y       number The Y coordinate (top left of the square)
+    * @param w       number The width of the rectangle
+    * @param h       number The height of the rectangle
+    * @param         number The radius of the curved corners
+    * @param         boolean Whether the top left corner is curvy
+    * @param         boolean Whether the top right corner is curvy
+    * @param         boolean Whether the bottom right corner is curvy
+    * @param         boolean Whether the bottom left corner is curvy
+    */
+    RGraph.strokedCurvyRect = function (context, x, y, w, h)
+    {
+        // The corner radius
+        var r = arguments[5] ? arguments[5] : 3;
+
+        // The corners
+        var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
+        var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
+        var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
+        var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
+
+        context.beginPath();
+
+            // Top left side
+            context.moveTo(x + (corner_tl ? r : 0), y);
+            context.lineTo(x + w - (corner_tr ? r : 0), y);
+            
+            // Top right corner
+            if (corner_tr) {
+                context.arc(x + w - r, y + r, r, PI + HALFPI, TWOPI, false);
+            }
+
+            // Top right side
+            context.lineTo(x + w, y + h - (corner_br ? r : 0) );
+
+            // Bottom right corner
+            if (corner_br) {
+                context.arc(x + w - r, y - r + h, r, TWOPI, HALFPI, false);
+            }
+
+            // Bottom right side
+            context.lineTo(x + (corner_bl ? r : 0), y + h);
+
+            // Bottom left corner
+            if (corner_bl) {
+                context.arc(x + r, y - r + h, r, HALFPI, PI, false);
+            }
+
+            // Bottom left side
+            context.lineTo(x, y + (corner_tl ? r : 0) );
+
+            // Top left corner
+            if (corner_tl) {
+                context.arc(x + r, y + r, r, PI, PI + HALFPI, false);
+            }
+
+        context.stroke();
+    }
+
+
+    /**
+    * Draws a filled rectangle with curvy corners
+    * 
+    * @param context object The context
+    * @param x       number The X coordinate (top left of the square)
+    * @param y       number The Y coordinate (top left of the square)
+    * @param w       number The width of the rectangle
+    * @param h       number The height of the rectangle
+    * @param         number The radius of the curved corners
+    * @param         boolean Whether the top left corner is curvy
+    * @param         boolean Whether the top right corner is curvy
+    * @param         boolean Whether the bottom right corner is curvy
+    * @param         boolean Whether the bottom left corner is curvy
+    */
+    RGraph.filledCurvyRect = function (context, x, y, w, h)
+    {
+        // The corner radius
+        var r = arguments[5] ? arguments[5] : 3;
+
+        // The corners
+        var corner_tl = (arguments[6] || arguments[6] == null) ? true : false;
+        var corner_tr = (arguments[7] || arguments[7] == null) ? true : false;
+        var corner_br = (arguments[8] || arguments[8] == null) ? true : false;
+        var corner_bl = (arguments[9] || arguments[9] == null) ? true : false;
+
+        context.beginPath();
+
+            // First draw the corners
+
+            // Top left corner
+            if (corner_tl) {
+                context.moveTo(x + r, y + r);
+                context.arc(x + r, y + r, r, PI, PI + HALFPI, false);
+            } else {
+                context.fillRect(x, y, r, r);
+            }
+
+            // Top right corner
+            if (corner_tr) {
+                context.moveTo(x + w - r, y + r);
+                context.arc(x + w - r, y + r, r, PI + HALFPI, 0, false);
+            } else {
+                context.moveTo(x + w - r, y);
+                context.fillRect(x + w - r, y, r, r);
+            }
+
+
+            // Bottom right corner
+            if (corner_br) {
+                context.moveTo(x + w - r, y + h - r);
+                context.arc(x + w - r, y - r + h, r, 0, HALFPI, false);
+            } else {
+                context.moveTo(x + w - r, y + h - r);
+                context.fillRect(x + w - r, y + h - r, r, r);
+            }
+
+            // Bottom left corner
+            if (corner_bl) {
+                context.moveTo(x + r, y + h - r);
+                context.arc(x + r, y - r + h, r, HALFPI, PI, false);
+            } else {
+                context.moveTo(x, y + h - r);
+                context.fillRect(x, y + h - r, r, r);
+            }
+
+            // Now fill it in
+            context.fillRect(x + r, y, w - r - r, h);
+            context.fillRect(x, y + r, r + 1, h - r - r);
+            context.fillRect(x + w - r - 1, y + r, r + 1, h - r - r);
+
+        context.fill();
+    }
+
+
+    /**
+    * Hides the zoomed canvas
+    */
+    RGraph.HideZoomedCanvas = function ()
+    {
+        var interval = 15;
+        var frames   = 10;
+
+        if (typeof(__zoomedimage__) == 'object') {
+            obj = __zoomedimage__.obj;
+        } else {
+            return;
+        }
+
+        if (obj.Get('chart.zoom.fade.out')) {
+            for (var i=frames,j=1; i>=0; --i, ++j) {
+                if (typeof(__zoomedimage__) == 'object') {
+                    setTimeout("__zoomedimage__.style.opacity = " + String(i / 10), j * interval);
+                }
+            }
+
+            if (typeof(__zoomedbackground__) == 'object') {
+                setTimeout("__zoomedbackground__.style.opacity = " + String(i / frames), j * interval);
+            }
+        }
+
+        if (typeof(__zoomedimage__) == 'object') {
+            setTimeout("__zoomedimage__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? (frames * interval) + 10 : 0);
+        }
+
+        if (typeof(__zoomedbackground__) == 'object') {
+            setTimeout("__zoomedbackground__.style.display = 'none'", obj.Get('chart.zoom.fade.out') ? (frames * interval) + 10 : 0);
+        }
+    }
+
+
+    /**
+    * Adds an event handler
+    * 
+    * @param object obj   The graph object
+    * @param string event The name of the event, eg ontooltip
+    * @param object func  The callback function
+    */
+    RGraph.AddCustomEventListener = function (obj, name, func)
+    {
+        if (typeof(RGraph.events[obj.uid]) == 'undefined') {
+            RGraph.events[obj.uid] = [];
+        }
+
+        RGraph.events[obj.uid].push([obj, name, func]);
+        
+        return RGraph.events[obj.uid].length - 1;
+    }
+
+
+    /**
+    * Used to fire one of the RGraph custom events
+    * 
+    * @param object obj   The graph object that fires the event
+    * @param string event The name of the event to fire
+    */
+    RGraph.FireCustomEvent = function (obj, name)
+    {
+        if (obj && obj.isRGraph) {
+        
+            // New style of adding custom events
+            if (obj[name]) {
+                (obj[name])(obj);
+            }
+            
+            var uid = obj.uid;
+    
+            if (   typeof(uid) == 'string'
+                && typeof(RGraph.events) == 'object'
+                && typeof(RGraph.events[uid]) == 'object'
+                && RGraph.events[uid].length > 0) {
+    
+                for(var j=0; j<RGraph.events[uid].length; ++j) {
+                    if (RGraph.events[uid][j] && RGraph.events[uid][j][1] == name) {
+                        RGraph.events[uid][j][2](obj);
+                    }
+                }
+            }
+        }
+    }
+
+
+    /**
+    * This function suggests a gutter size based on the widest left label. Given that the bottom
+    * labels may be longer, this may be a little out.
+    * 
+    * @param object obj  The graph object
+    * @param array  data An array of graph data
+    * @return int        A suggested gutter setting
+    */
+    RGraph.getGutterSuggest = function (obj, data)
+    {
+        /**
+        * Calculate the minimum value
+        */
+        var min = 0;
+        for (var i=0; i<data.length; ++i) {
+            min = Math.min(min, data[i]);
+        }
+        var min = Math.abs(min);
+
+        var str = RGraph.number_format(obj, RGraph.array_max(RGraph.getScale(Math.max(min, RGraph.array_max(data)), obj)), obj.Get('chart.units.pre'), obj.Get('chart.units.post'));
+
+        // Take into account the HBar
+        if (obj.type == 'hbar') {
+
+            var str = '';
+            var len = 0;
+
+            for (var i=0; i<obj.Get('chart.labels').length; ++i) {
+                str = (obj.Get('chart.labels').length > str.length ? obj.Get('chart.labels')[i] : str);
+            }
+        }
+
+        obj.context.font = obj.Get('chart.text.size') + 'pt ' + obj.Get('chart.text.font');
+
+        len = obj.context.measureText(str).width + 5;
+
+        return (obj.type == 'hbar' ? len / 3 : len);
+    }
+
+
+    /**
+    * If you prefer, you can use the SetConfig() method to set the configuration information
+    * for your chart. You may find that setting the configuration this way eases reuse.
+    * 
+    * @param object obj    The graph object
+    * @param object config The graph configuration information
+    */
+    RGraph.SetConfig = function (obj, c)
+    {
+        for (i in c) {
+            if (typeof(i) == 'string') {
+                obj.Set(i, c[i]);
+            }
+        }
+        
+        return obj;
+    }
+
+
+    /**
+    * Clears all the custom event listeners that have been registered
+    * 
+    * @param    string Limits the clearing to this object ID
+    */
+    RGraph.RemoveAllCustomEventListeners = function ()
+    {
+        var id = arguments[0];
+
+        if (id && RGraph.events[id]) {
+            RGraph.events[id] = [];
+        } else {
+            RGraph.events = [];
+        }
+    }
+
+
+    /**
+    * Clears a particular custom event listener
+    * 
+    * @param object obj The graph object
+    * @param number i   This is the index that is return by .AddCustomEventListener()
+    */
+    RGraph.RemoveCustomEventListener = function (obj, i)
+    {
+        if (   typeof(RGraph.events) == 'object'
+            && typeof(RGraph.events[obj.id]) == 'object'
+            && typeof(RGraph.events[obj.id][i]) == 'object') {
+            
+            RGraph.events[obj.id][i] = null;
+        }
+    }
+
+
+
+    /**
+    * This draws the background
+    * 
+    * @param object obj The graph object
+    */
+    RGraph.DrawBackgroundImage = function (obj)
+    {
+        if (typeof(obj.Get('chart.background.image')) == 'string') {
+            if (typeof(obj.canvas.__rgraph_background_image__) == 'undefined') {
+                var img = new Image();
+                img.__object__  = obj;
+                img.__canvas__  = obj.canvas;
+                img.__context__ = obj.context;
+                img.src         = obj.Get('chart.background.image');
+                
+                obj.canvas.__rgraph_background_image__ = img;
+            } else {
+                img = obj.canvas.__rgraph_background_image__;
+            }
+            
+            // When the image has loaded - redraw the canvas
+            img.onload = function ()
+            {
+                obj.__rgraph_background_image_loaded__ = true;
+                RGraph.Clear(obj.canvas);
+                RGraph.RedrawCanvas(obj.canvas);
+            }
+                
+            var gutterLeft   = obj.Get('chart.gutter.left');
+            var gutterRight  = obj.Get('chart.gutter.right');
+            var gutterTop    = obj.Get('chart.gutter.top');
+            var gutterBottom = obj.Get('chart.gutter.bottom');
+            var stretch      = obj.Get('chart.background.image.stretch');
+            var align        = obj.Get('chart.background.image.align');
+    
+            // Handle chart.background.image.align
+            if (typeof(align) == 'string') {
+                if (align.indexOf('right') != -1) {
+                    var x = obj.canvas.width - img.width - gutterRight;
+                } else {
+                    var x = gutterLeft;
+                }
+    
+                if (align.indexOf('bottom') != -1) {
+                    var y = obj.canvas.height - img.height - gutterBottom;
+                } else {
+                    var y = gutterTop;
+                }
+            } else {
+                var x = gutterLeft;
+                var y = gutterTop;
+            }
+            
+            // X/Y coords take precedence over the align
+            var x = typeof(obj.Get('chart.background.image.x')) == 'number' ? obj.Get('chart.background.image.x') : x;
+            var y = typeof(obj.Get('chart.background.image.y')) == 'number' ? obj.Get('chart.background.image.y') : y;
+            var w = stretch ? obj.canvas.width - gutterLeft - gutterRight : img.width;
+            var h = stretch ? obj.canvas.height - gutterTop - gutterBottom : img.height;
+            
+            /**
+            * You can now specify the width and height of the image
+            */
+            if (typeof(obj.Get('chart.background.image.w')) == 'number') w  = obj.Get('chart.background.image.w');
+            if (typeof(obj.Get('chart.background.image.h')) == 'number') h = obj.Get('chart.background.image.h');
+    
+            obj.context.drawImage(img,x,y,w, h);
+        }
+    }
+
+
+
+    /**
+    * This function determines wshether an object has tooltips or not
+    * 
+    * @param object obj The chart object
+    */
+    RGraph.hasTooltips = function (obj)
+    {
+        if (typeof(obj.Get('chart.tooltips')) == 'object' && obj.Get('chart.tooltips')) {
+            for (var i=0; i<obj.Get('chart.tooltips').length; ++i) {
+                if (!RGraph.is_null(obj.Get('chart.tooltips')[i])) {
+                    return true;
+                }
+            }
+        } else if (typeof(obj.Get('chart.tooltips')) == 'function') {
+            return true;
+        }
+        
+        return false;
+    }
+
+
+
+    /**
+    * This function creates a (G)UID which can be used to identify objects.
+    * 
+    * @return string (g)uid The (G)UID
+    */
+    RGraph.CreateUID = function ()
+    {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c)
+        {
+            var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
+            return v.toString(16);
+        });
+    }
+
+
+
+    /**
+    * This is the new object registry, used to facilitate multiple objects per canvas.
+    * 
+    * @param object obj The object to register
+    */
+    RGraph.ObjectRegistry.Add = function (obj)
+    {
+        var uid      = obj.uid;
+        var canvasID = obj.canvas.id;
+
+        /**
+        * Index the objects by UID
+        */
+        RGraph.ObjectRegistry.objects.byUID.push([uid, obj]);
+        
+        /**
+        * Index the objects by the canvas that they're drawn on
+        */
+        RGraph.ObjectRegistry.objects.byCanvasID.push([canvasID, obj]);
+    }
+
+
+
+    /**
+    * Remove an object from the object registry
+    * 
+    * @param object obj The object to remove.
+    */
+    RGraph.ObjectRegistry.Remove = function (obj)
+    {
+        var id  = obj.id;
+        var uid = obj.uid;
+
+        for (var i=0; i<RGraph.ObjectRegistry.objects.byUID.length; ++i) {
+            if (RGraph.ObjectRegistry.objects.byUID[i] && RGraph.ObjectRegistry.objects.byUID[i][1].uid == uid) {
+                RGraph.ObjectRegistry.objects.byUID[i] = null;
+            }
+        }
+
+        // RGraph.ObjectRegistry.objects.byCanvasID.push([canvasID, obj]);
+
+        for (var i=0; i<RGraph.ObjectRegistry.objects.byCanvasID.length; ++i) {
+            if (RGraph.ObjectRegistry.objects.byCanvasID[i] && RGraph.ObjectRegistry.objects.byCanvasID[i][0] == id) {
+                RGraph.ObjectRegistry.objects.byCanvasID[i] = null;
+            }
+        }
+
+    }
+
+
+
+    /**
+    * Removes all objects from the ObjectRegistry. If either the ID of a canvas is supplied,
+    * or the canvas itself, then only objects pertaining to that canvas are cleared.
+    * 
+    * @param mixed   Either a canvas object (as returned by document.getElementById()
+    *                or the ID of a canvas (ie a string)
+    */
+    RGraph.ObjectRegistry.Clear = function ()
+    {
+        // If an ID is supplied restrict the learing to that
+        if (arguments[0]) {
+
+            var id      = (typeof(arguments[0]) == 'object' ? arguments[0].id : arguments[0]);
+            var objects = RGraph.ObjectRegistry.getObjectsByCanvasID(id);
+
+            for (var i=0; i<objects.length; ++i) {
+                RGraph.ObjectRegistry.Remove(objects[i]);
+            }
+
+        } else {
+
+            RGraph.ObjectRegistry.objects            = {};
+            RGraph.ObjectRegistry.objects.byUID      = [];
+            RGraph.ObjectRegistry.objects.byCanvasID = [];
+        }
+    }
+
+
+
+    /**
+    * Retrieves all objects for a given canvas id
+    * 
+    * @patarm id string The canvas ID to get objects for.
+    */
+    RGraph.ObjectRegistry.getObjectsByCanvasID = function (id)
+    {
+        var store = RGraph.ObjectRegistry.objects.byCanvasID;
+        var ret = [];
+
+        // Loop through all of the objects and return the appropriate ones
+        for (var i=0; i<store.length; ++i) {
+            if (store[i] && store[i][0] == id ) {
+                ret.push(store[i][1]);
+            }
+        }
+
+        return ret;
+    }
+
+
+
+    /**
+    * Retrieves the relevant object based on the X/Y position.
+    * 
+    * @param  object e The event object
+    * @return object   The applicable (if any) object
+    */
+    RGraph.ObjectRegistry.getFirstObjectByXY =
+    RGraph.ObjectRegistry.getObjectByXY = function (e)
+    {
+        var canvas  = e.target;
+        var ret     = null;
+        var objects = RGraph.ObjectRegistry.getObjectsByCanvasID(canvas.id);
+
+        for (var i=(objects.length - 1); i>=0; --i) {
+
+            var obj = objects[i].getObjectByXY(e);
+
+            if (obj) {
+                return obj;
+            }
+        }
+    }
+
+
+
+    /**
+    * Retrieves the relevant objects based on the X/Y position.
+    * NOTE This function returns an array of objects
+    * 
+    * @param  object e The event object
+    * @return          An array of pertinent objects. Note the there may be only one object
+    */
+    RGraph.ObjectRegistry.getObjectsByXY = function (e)
+    {
+        var canvas  = e.target;
+        var ret     = [];
+        var objects = RGraph.ObjectRegistry.getObjectsByCanvasID(canvas.id);
+
+        // Retrieve objects "front to back"
+        for (var i=(objects.length - 1); i>=0; --i) {
+
+            var obj = objects[i].getObjectByXY(e);
+
+            if (obj) {
+                ret.push(obj);
+            }
+        }
+        
+        return ret;
+    }
+
+
+    /**
+    * Retrieves the object with the corresponding UID
+    * 
+    * @param string uid The UID to get the relevant object for
+    */
+    RGraph.ObjectRegistry.getObjectByUID = function (uid)
+    {
+        var objects = RGraph.ObjectRegistry.objects.byUID;
+
+        for (var i=0; i<objects.length; ++i) {
+            if (objects[i] && objects[i][1].uid == uid) {
+                return objects[i][1];
+            }
+        }
+    }
+
+
+    /**
+    * Retrieves the objects that are the given type
+    * 
+    * @param  mixed canvas  The canvas to check. It can either be the canvas object itself or just the ID
+    * @param  string type   The type to look for
+    * @return array         An array of one or more objects
+    */
+    RGraph.ObjectRegistry.getObjectsByType = function (type)
+    {
+        var objects = RGraph.ObjectRegistry.objects.byUID;
+        var ret     = [];
+
+        for (var i=0; i<objects.length; ++i) {
+
+            if (objects[i] && objects[i][1] && objects[i][1].type && objects[i][1].type && objects[i][1].type == type) {
+                ret.push(objects[i][1]);
+            }
+        }
+
+        return ret;
+    }
+
+
+    /**
+    * Retrieves the FIRST object that matches the given type
+    *
+    * @param  string type   The type of object to look for
+    * @return object        The FIRST object that matches the given type
+    */
+    RGraph.ObjectRegistry.getFirstObjectByType = function (type)
+    {
+        var objects = RGraph.ObjectRegistry.objects.byUID;
+    
+        for (var i=0; i<objects.length; ++i) {
+            if (objects[i] && objects[i][1] && objects[i][1].type == type) {
+                return objects[i][1];
+            }
+        }
+        
+        return null;
+    }
+
+
+
+    /**
+    * This takes centerx, centery, x and y coordinates and returns the
+    * appropriate angle relative to the canvas angle system. Remember
+    * that the canvas angle system starts at the EAST axis
+    * 
+    * @param  number cx  The centerx coordinate
+    * @param  number cy  The centery coordinate
+    * @param  number x   The X coordinate (eg the mouseX if coming from a click)
+    * @param  number y   The Y coordinate (eg the mouseY if coming from a click)
+    * @return number     The relevant angle (measured in in RADIANS)
+    */
+    RGraph.getAngleByXY = function (cx, cy, x, y)
+    {
+        var angle = Math.atan((y - cy) / (x - cx));
+            angle = Math.abs(angle)
+
+        if (x >= cx && y >= cy) {
+            angle += TWOPI;
+
+        } else if (x >= cx && y < cy) {
+            angle = (HALFPI - angle) + (PI + HALFPI);
+
+        } else if (x < cx && y < cy) {
+            angle += PI;
+
+        } else {
+            angle = PI - angle;
+        }
+
+        /**
+        * Upper and lower limit checking
+        */
+        if (angle > TWOPI) {
+            angle -= TWOPI;
+        }
+
+        return angle;
+    }
+
+
+
+    /**
+    * This function returns the distance between two points. In effect the
+    * radius of an imaginary circle that is centered on x1 and y1. The name
+    * of this function is derived from the word "Hypoteneuse", which in
+    * trigonmetry is the longest side of a triangle
+    * 
+    * @param number x1 The original X coordinate
+    * @param number y1 The original Y coordinate
+    * @param number x2 The target X coordinate
+    * @param number y2 The target Y  coordinate
+    */
+    RGraph.getHypLength = function (x1, y1, x2, y2)
+    {
+        var ret = Math.sqrt(((x2 - x1) * (x2 - x1)) + ((y2 - y1) * (y2 - y1)));
+
+        return ret;
+    }
+
+
+
+    /**
+    * This function gets the end point (X/Y coordinates) of a given radius.
+    * You pass it the center X/Y and the radius and this function will return
+    * the endpoint X/Y coordinates.
+    * 
+    * @param number cx The center X coord
+    * @param number cy The center Y coord
+    * @param number r  The lrngth of the radius
+    */
+    RGraph.getRadiusEndPoint = function (cx, cy, angle, radius)
+    {
+        var x = cx + (Math.cos(angle) * radius);
+        var y = cy + (Math.sin(angle) * radius);
+        
+        return [x, y];
+    }
+
+
+
+    /**
+    * This installs all of the event listeners
+    * 
+    * @param object obj The chart object
+    */
+    RGraph.InstallEventListeners = function (obj)
+    {
+        /**
+        * Don't attempt to install event listeners for older versions of MSIE
+        */
+        if (RGraph.isOld()) {
+            return;
+        }
+
+        /**
+        * If this function exists, then the dynamic file has been included.
+        */
+        if (RGraph.InstallCanvasClickListener) {
+
+            RGraph.InstallWindowMousedownListener(obj);
+            RGraph.InstallWindowMouseupListener(obj);
+            RGraph.InstallCanvasMousemoveListener(obj);
+            RGraph.InstallCanvasMouseupListener(obj);
+            RGraph.InstallCanvasMousedownListener(obj);
+            RGraph.InstallCanvasClickListener(obj);
+        
+        } else if (   RGraph.hasTooltips(obj)
+                   || obj.Get('chart.adjustable')
+                   || obj.Get('chart.annotatable')
+                   || obj.Get('chart.contextmenu')
+                   || obj.Get('chart.resizable')
+                   || obj.Get('chart.key.interactive')
+                   || obj.Get('chart.events.click')
+                   || obj.Get('chart.events.mousemove')
+                  ) {
+            alert('[RGRAPH] You appear to have used dynamic features but not included the file: RGraph.common.dynamic.js');
+        }
+    }
+
+
+
+    /**
+    * Loosly mimicks the PHP function print_r();
+    */
+    RGraph.pr = function (obj)
+    {
+        var str = '';
+        var indent = (arguments[2] ? arguments[2] : '');
+
+        switch (typeof(obj)) {
+            case 'number':
+                if (indent == '') {
+                    str+= 'Number: '
+                }
+                str += String(obj);
+                break;
+
+            case 'string':
+                if (indent == '') {
+                    str+= 'String (' + obj.length + '):'
+                }
+                str += '"' + String(obj) + '"';
+                break;
+
+            case 'object':
+                // In case of null
+                if (obj == null) {
+                    str += 'null';
+                    break;
+                }
+
+                str += 'Object\n' + indent + '(\n';
+                for (var i in obj) {
+                    if (typeof(i) == 'string' || typeof(i) == 'number') {
+                        str += indent + ' ' + i + ' => ' + RGraph.pr(obj[i], true, indent + '    ') + '\n';
+                    }
+                }
+
+                var str = str + indent + ')';
+                break;
+
+            case 'function':
+                str += obj;
+                break;
+
+            case 'boolean':
+                str += 'Boolean: ' + (obj ? 'true' : 'false');
+                break;
+        }
+
+        /**
+        * Finished, now either return if we're in a recursed call, or alert()
+        * if we're not.
+        */
+        if (arguments[1]) {
+            return str;
+        } else {
+            alert(str);
+        }
+    }
+
+
+    /**
+    * Produces a dashed line
+    * 
+    * @param
+    */
+    RGraph.DashedLine = function(context, x1, y1, x2, y2)
+    {
+        /**
+        * This is the size of the dashes
+        */
+        var size = 5;
+
+        /**
+        * The optional fifth argument can be the size of the dashes
+        */
+        if (typeof(arguments[5]) == 'number') {
+            size = arguments[5];
+        }
+
+        var dx  = x2 - x1;
+        var dy  = y2 - y1;
+        var num = Math.floor(Math.sqrt((dx * dx) + (dy * dy)) / size);
+
+        var xLen = dx / num;
+        var yLen = dy / num;
+
+        var count = 0;
+
+        do {
+            (count % 2 == 0 && count > 0) ? context.lineTo(x1, y1) : context.moveTo(x1, y1);
+
+            x1 += xLen;
+            y1 += yLen;
+        } while(count++ <= num);
+    }
+
+
+    /**
+    * Makes an AJAX call. It calls the given callback (a function) when ready
+    * 
+    * @param string   url      The URL to retrieve
+    * @param function callback A function that is called when the response is ready, there's an example below
+    *                          called "myCallback".
+    */
+    RGraph.AJAX = function (url, callback)
+    {
+        // Mozilla, Safari, ...
+        if (window.XMLHttpRequest) {
+            var httpRequest = new XMLHttpRequest();
+
+        // MSIE
+        } else if (window.ActiveXObject) {
+            var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
+        }
+
+        httpRequest.onreadystatechange = function ()
+            {
+                if (this.readyState == 4 && this.status == 200) {
+                    this.__user_callback__ = callback;
+                    this.__user_callback__();
+                }
+            }
+
+        httpRequest.open('GET', url, true);
+        httpRequest.send();
+    }
+    
+    /**
+    * Rotates the canvas
+    * 
+    * @param object canvas The canvas to rotate
+    * @param  int   x      The X coordinate about which to rotate the canvas
+    * @param  int   y      The Y coordinate about which to rotate the canvas
+    * @param  int   angle  The angle(in RADIANS) to rotate the canvas by
+    */
+    RGraph.RotateCanvas = function (canvas, x, y, angle)
+    {
+        var context = canvas.getContext('2d');
+
+        context.translate(x, y);
+        context.rotate(angle);
+        context.translate(0 - x, 0 - y);    
+    }
+
+        
+    /**
+    * This draws an extra set of Y axes
+    * 
+    * @param object obj   The chart object
+    * @param object prop  An assoc array of options - see the API docs for a list of options
+    */
+    RGraph.DrawAxes =
+    RGraph.DrawYAxis = function (obj, prop)
+    {
+        /**
+        * Allow both axis.xxx and chart.xxx to prevent any confusion that may arise
+        */
+        for (i in prop) {
+            if (typeof(i) == 'string') {
+                var key = i.replace(/^chart\./, 'axis.');
+                
+                prop[key] = prop[i];
+            }
+        }
+
+
+        var gutterTop       = obj.gutterTop;
+        var gutterBottom    = obj.gutterBottom;
+        var context         = prop['axis.context'] ? prop['axis.context'] : obj.context;
+        var x               = prop['axis.x'];
+        var y               = obj.properties['chart.gutter.top'];
+        var min             = prop['axis.min'] ? prop['axis.min'] : 0;
+        var max             = prop['axis.max'];
+        var color           = prop['axis.color'] ? prop['axis.color'] : 'black';
+        var title           = prop['axis.title'] ? prop['axis.title'] : '';
+        var title_color     = prop['axis.title.color'] ? prop['axis.title.color'] : color;
+        var label_color     = prop['axis.text.color'] ? prop['axis.color'] : color;
+        var height          = obj.canvas.height - obj.gutterBottom - obj.gutterTop;
+        var numticks        = typeof(prop['axis.numticks']) == 'number' ? prop['axis.numticks'] : 10;
+        var numlabels       = prop['axis.numlabels'] ? prop['axis.numlabels'] : 5;
+        var font            = prop['axis.font'] ? prop['axis.font'] : 'Arial';
+        var size            = prop['axis.text.size'] ? prop['axis.text.size'] : 10;
+        var align           = typeof(prop['axis.align']) == 'string'? prop['axis.align'] : 'left';
+        var formatter       = prop['axis.scale.formatter'];
+        var decimals        = prop['axis.scale.decimals'];
+        var invert          = prop['axis.scale.invert'];
+        var units_pre       = prop['axis.units.pre'];
+        var units_post      = prop['axis.units.post'];
+        var linewidth       = prop['axis.linewidth'] ? prop['axis.linewidth'] : 1;
+        var notopendtick    = prop['axis.noendtick.top'];
+        var nobottomendtick = prop['axis.noendtick.bottom'];
+        var noyaxis         = prop['axis.noyaxis'];
+        
+        // This fixes missing corner pixels in Chrome
+        context.lineWidth = linewidth + 0.001;
+
+
+        /**
+        * Set the color
+        */
+        context.strokeStyle = color;
+
+        if (!noyaxis) {
+            /**
+            * Draw the main vertical line
+            */
+            context.beginPath();
+                context.moveTo(Math.round(x), y);
+                context.lineTo(Math.round(x), y + height);
+            context.stroke();
+            
+            /**
+            * Draw the axes tickmarks
+            */
+            if (numticks) {
+                
+                var gap = height / numticks;
+    
+                context.beginPath();
+                    for (var i=(notopendtick ? 1 : 0); i<=(numticks - (nobottomendtick ? 1 : 0)); ++i) {
+                        context.moveTo(align == 'right' ? x + 3 : x - 3, Math.round(y + (gap *i)));
+                        context.lineTo(x, Math.round(y + (gap *i)));
+                    }
+                context.stroke();
+            }
+        }
+
+
+        /**
+        * Draw the scale for the axes
+        */
+        context.fillStyle = label_color;
+        context.beginPath();
+            var text_len = 0;
+            for (var i=0; i<=numlabels; ++i) {
+            
+                var original = ((max - min) * ((numlabels-i) / numlabels)) + min;
+
+                var text     = RGraph.number_format(obj, original.toFixed(decimals), units_pre, units_post);
+                var text     = String(typeof(formatter) == 'function' ? formatter(obj, original) : text);
+                var text_len = Math.max(text_len, context.measureText(text).width);
+
+                if (invert) {
+                    var y = gutterTop + (height - ((height / numlabels)*i));
+                } else {
+                    var y = gutterTop + ((height / numlabels)*i);
+                }
+
+                RGraph.Text(
+                            context,
+                            font,
+                            size,
+                            x - (align == 'right' ? -5 : 5),
+                            y,
+                            text,
+                            'center',
+                            align == 'right' ? 'left' : 'right'
+                           );
+            }
+        context.stroke();
+
+        /**
+        * Draw the title for the axes
+        */
+        if (title) {
+            context.beginPath();
+                context.fillStyle = title_color
+                RGraph.Text(context, font, size + 2,
+                
+                align == 'right' ? x + size + text_len + 2 : x - size - text_len - 2,
+                
+                height / 2 + gutterTop, title, 'center', 'center', null, align == 'right' ? 90 : -90);
+            context.stroke();
+        }
+    }
+
+        
+    /**
+    * This draws an extra set of X axes
+    * 
+    * @param object obj   The chart object
+    * @param object prop  An assoc array of options - see the API docs for a list of options
+    */
+    RGraph.DrawXAxis = function (obj, prop)
+    {
+        /**
+        * Allow both axis.xxx and chart.xxx to prevent any confusion that may arise
+        */
+        for (i in prop) {
+            if (typeof(i) == 'string') {
+                var key = i.replace(/^chart\./, 'axis.');
+                
+                prop[key] = prop[i];
+            }
+        }
+
+        var context         = prop['axis.context'] ? prop['axis.context'] : obj.context;
+        var gutterLeft      = obj.gutterLeft;
+        var gutterRight     = obj.gutterRight;
+        var x               = obj.properties['chart.gutter.left'];
+        var y               = prop['axis.y'];
+        var min             = prop['axis.min'] ? prop['axis.min'] : 0;
+        var max             = prop['axis.max'] ? prop['axis.max'] : null;
+        var labels          = prop['axis.labels'] ? prop['axis.labels'] : null;
+        var labels_position = typeof(prop['axis.labels.position']) == 'string' ? prop['axis.labels.position'] : 'section';
+        var color           = prop['axis.color'] ? prop['axis.color'] : 'black';
+        var title_color     = prop['axis.title.color'] ? prop['axis.title.color'] : color;
+        var label_color     = prop['axis.text.color'] ? prop['axis.text.color'] : color;
+        var width           = obj.canvas.width - obj.gutterLeft - obj.gutterRight;
+        var height          = obj.canvas.height - obj.gutterBottom - obj.gutterTop;
+        var font            = prop['axis.text.font'] ? prop['axis.text.font'] : 'Arial';
+        var size            = prop['axis.text.size'] ? prop['axis.text.size'] : 10;
+        var align           = typeof(prop['axis.align']) == 'string'? prop['axis.align'] : 'bottom';
+        var numlabels       = prop['axis.numlabels'] ? prop['axis.numlabels'] : 5;
+        var formatter       = prop['axis.scale.formatter'];
+        var decimals        = Number(prop['axis.scale.decimals']);
+        var invert          = prop['axis.scale.invert'];
+        var units_pre       = prop['axis.units.pre'] ? prop['axis.units.pre'] : '';
+        var units_post      = prop['axis.units.post'] ? prop['axis.units.post'] : '';
+        var title           = prop['axis.title'] ? prop['axis.title'] : '';
+        var numticks        = typeof(prop['axis.numticks']) == 'number' ? prop['axis.numticks'] : (labels && labels.length ? labels.length : 10);
+        var hmargin         = prop['axis.hmargin'] ? prop['axis.hmargin'] : 0;
+        var linewidth       = prop['axis.linewidth'] ? prop['axis.linewidth'] : 1;
+        var noleftendtick   = prop['axis.noendtick.left'];
+        var norightendtick  = prop['axis.noendtick.right'];
+        var noxaxis         = prop['axis.noxaxis'];
+        
+        /**
+        * Set the linewidth
+        */
+        context.lineWidth = linewidth + 0.001;
+
+        /**
+        * Set the color
+        */
+        context.strokeStyle = color;
+
+        if (!noxaxis) {
+            /**
+            * Draw the main horizontal line
+            */
+            context.beginPath();
+                context.moveTo(x, Math.round(y));
+                context.lineTo(x + width, Math.round(y));
+            context.stroke();
+
+            /**
+            * Draw the axes tickmarks
+            */
+            context.beginPath();
+                for (var i=(noleftendtick ? 1 : 0); i<=(numticks - (norightendtick ? 1 : 0)); ++i) {
+                    context.moveTo(Math.round(x + ((width / numticks) * i)), y);
+                    context.lineTo(Math.round(x + ((width / numticks) * i)), y + (align == 'bottom' ? 3 : -3));
+                }
+            context.stroke();
+        }
+
+
+
+        /**
+        * Draw the labels
+        */
+        context.fillStyle = label_color;
+
+        if (labels) {
+            /**
+            * Draw the labels
+            */
+
+            numlabels = labels.length;
+
+            context.beginPath();
+                for (var i=0; i<labels.length; ++i) {
+                    RGraph.Text(context,
+                                font,
+                                size,
+                                labels_position == 'edge' ? ((((width - hmargin - hmargin) / (labels.length - 1)) * i) + gutterLeft + hmargin) : ((((width - hmargin - hmargin) / labels.length) * i) + ((width / labels.length) / 2) + gutterLeft + hmargin),
+                                align == 'bottom' ? y + size + 2 : y - size - 2,
+                                String(labels[i]),
+                                'center',
+                                'center');
+                }
+            context.fill();
+    
+
+
+
+
+        /**
+        * No specific labels - draw a scale
+        */
+        } else {
+
+            if (!max) {
+                alert('[DRAWXAXIS] If not specifying axis.labels you must specify axis.max!');
+            }
+
+            context.beginPath();
+                for (var i=0; i<=numlabels; ++i) {
+
+                    var original = (((max - min) / numlabels) * i) + min;
+
+                    var text = String(typeof(formatter) == 'function' ? formatter(obj, original) : RGraph.number_format(obj, original.toFixed(decimals), units_pre, units_post));
+                    
+                    if (invert) {
+                        var x = ((width - (width / numlabels) * i)) + gutterLeft;
+                    } else {
+                        var x = ((width / numlabels) * i) + gutterLeft;
+                    }
+
+                    RGraph.Text(context,
+                                font,
+                                size,
+                                x,
+                                align == 'bottom' ? y + size + 2 : y - size - 2,
+                                text,
+                                'center',
+                                'center');
+                }
+            context.fill();
+        }
+
+
+
+        /**
+        * Draw the title for the axes
+        */
+        if (title) {
+
+            var dimensions = RGraph.MeasureText(title, false, font, size + 2);
+
+            context.fillStyle = title_color
+            RGraph.Text(context,
+                        font,
+                        size + 2,
+                        width / 2 + obj.gutterLeft,
+                        align == 'bottom' ? y + dimensions[1] + 10 : y - dimensions[1] - 10,
+                        title,
+                        'center',
+                        'center');
+        }
+    }
+
+
+
+    /**
+    * Measures text by creating a DIV in the document and adding the relevant text to it.
+    * Then checking the .offsetWidth and .offsetHeight.
+    * 
+    * @param  string text   The text to measure
+    * @param  bool   bold   Whether the text is bold or not
+    * @param  string font   The font to use
+    * @param  size   number The size of the text (in pts)
+    * @return array         A two element array of the width and height of the text
+    */
+    RGraph.MeasureText = function (text, bold, font, size)
+    {
+        // Add the sizes to the cache as adding DOM elements is costly and causes slow downs
+        if (typeof(__rgraph_measuretext_cache__) == 'undefined') {
+            __rgraph_measuretext_cache__ = [];
+        }
+
+        var str = text + ':' + bold + ':' + font + ':' + size;
+        if (typeof(__rgraph_measuretext_cache__) == 'object' && __rgraph_measuretext_cache__[str]) {
+            return __rgraph_measuretext_cache__[str];
+        }
+        
+        if (!__rgraph_measuretext_cache__['text-div']) {
+            var div = document.createElement('DIV');
+                div.style.position = 'absolute';
+                div.style.top = '-100px';
+                div.style.left = '-100px';
+            document.body.appendChild(div);
+            
+            // Now store the newly created DIV
+            __rgraph_measuretext_cache__['text-div'] = div;
+
+        } else if (__rgraph_measuretext_cache__['text-div']) {
+            var div = __rgraph_measuretext_cache__['text-div'];
+        }
+
+        div.innerHTML = text.replace(/\r\n/g, '<br />');
+        div.style.fontFamily = font;
+        div.style.fontWeight = bold ? 'bold' : 'normal';
+        div.style.fontSize = size + 'pt';
+        
+        var size = [div.offsetWidth, div.offsetHeight];
+
+        //document.body.removeChild(div);
+        __rgraph_measuretext_cache__[str] = size;
+        
+        return size;
+    }
+    
+    
+    
+    /**
+    * If the effects library isn't included already this prevents an unknown function error
+    */
+    if (!RGraph.AddEffects) {
+        RGraph.AddEffects = function (obj) {}
+    }
+
+
+
+// Some other functions. Because they're rarely changed - they're hand minified
+RGraph.LinearGradient=function(obj,x1,y1,x2,y2,color1,color2){var gradient=obj.context.createLinearGradient(x1,y1,x2,y2);var numColors=arguments.length-5;for (var i=5;i<arguments.length;++i){var color=arguments[i];var stop=(i-5)/(numColors-1);gradient.addColorStop(stop,color);}return gradient;}
+RGraph.RadialGradient=function(obj,x1,y1,r1,x2,y2,r2,color1,color2){var gradient=obj.context.createRadialGradient(x1,y1,r1,x2,y2,r2);var numColors=arguments.length-7;for(var i=7;i<arguments.length; ++i){var color=arguments[i];var stop=(i-7)/(numColors-1);gradient.addColorStop(stop,color);}return gradient;}
+RGraph.array_shift=function(arr){var ret=[];for(var i=1;i<arr.length;++i){ret.push(arr[i]);}return ret;}
+RGraph.AddEventListener=function(id,e,func){var type=arguments[3]?arguments[3]:'unknown';RGraph.Registry.Get('chart.event.handlers').push([id,e,func,type]);}
+RGraph.ClearEventListeners=function(id){if(id&&id=='window'){window.removeEventListener('mousedown',window.__rgraph_mousedown_event_listener_installed__,false);window.removeEventListener('mouseup',window.__rgraph_mouseup_event_listener_installed__,false);}else{var canvas = document.getElementById(id);canvas.removeEventListener('mouseup',canvas.__rgraph_mouseup_event_listener_installed__,false);canvas.removeEventListener('mousemove',canvas.__rgraph_mousemove_event_listener_installed__,false);canvas.removeEventListener('mousedown',canvas.__rgraph_mousedown_event_listener_installed__,false);canvas.removeEventListener('click',canvas.__rgraph_click_event_listener_installed__,false);}}
+RGraph.HidePalette=function(){var div=RGraph.Registry.Get('palette');if(typeof(div)=='object'&&div){div.style.visibility='hidden';div.style.display='none';RGraph.Registry.Set('palette',null);}}
+RGraph.random=function(min,max){var dp=arguments[2]?arguments[2]:0;var r=Math.random();return Number((((max - min) * r) + min).toFixed(dp));}
+RGraph.NoShadow=function(obj){obj.context.shadowColor='rgba(0,0,0,0)';obj.context.shadowBlur=0;obj.context.shadowOffsetX=0;obj.context.shadowOffsetY=0;}
+RGraph.SetShadow=function(obj,color,offsetx,offsety,blur){obj.context.shadowColor=color;obj.context.shadowOffsetX=offsetx;obj.context.shadowOffsetY=offsety;obj.context.shadowBlur=blur;}
+RGraph.array_reverse=function(arr){var newarr=[];for(var i=arr.length-1;i>=0;i--){newarr.push(arr[i]);}return newarr;}
+RGraph.Registry.Set=function(name,value){RGraph.Registry.store[name]=value;return value;}
+RGraph.Registry.Get=function(name){return RGraph.Registry.store[name];}
+RGraph.degrees2Radians=function(degrees){return degrees*(PI/180);}
+RGraph.log=(function(n,base){var log=Math.log;return function(n,base){return log(n)/(base?log(base):1);};})();
+RGraph.is_array=function(obj){return obj!=null&&obj.constructor.toString().indexOf('Array')!=-1;}
+RGraph.trim=function(str){return RGraph.ltrim(RGraph.rtrim(str));}
+RGraph.ltrim=function(str){return str.replace(/^(\s|\0)+/, '');}
+RGraph.rtrim=function(str){return str.replace(/(\s|\0)+$/, '');}
+RGraph.GetHeight=function(obj){return obj.canvas.height;}
+RGraph.GetWidth=function(obj){return obj.canvas.width;}
+RGraph.is_null=function(arg){if(arg==null||(typeof(arg))=='object'&&!arg){return true;}return false;}
+RGraph.Timer=function(label){var d=new Date();console.log(label+': '+d.getSeconds()+'.'+d.getMilliseconds());}
+RGraph.Async=function(func){return setTimeout(func,arguments[1]?arguments[1]:1);}
+RGraph.isIE=function(){return navigator.userAgent.indexOf('MSIE')>0;};ISIE=RGraph.isIE();
+RGraph.isIE6=function(){return navigator.userAgent.indexOf('MSIE 6')>0;};ISIE6=RGraph.isIE6();
+RGraph.isIE7=function(){return navigator.userAgent.indexOf('MSIE 7')>0;};ISIE7=RGraph.isIE7();
+RGraph.isIE8=function(){return navigator.userAgent.indexOf('MSIE 8')>0;};ISIE8=RGraph.isIE8();
+RGraph.isIE9=function(){return navigator.userAgent.indexOf('MSIE 9')>0;};ISIE9=RGraph.isIE9();
+RGraph.isIE10=function(){return navigator.userAgent.indexOf('MSIE 10')>0;};ISIE10=RGraph.isIE10();
+RGraph.isIE9up=function(){navigator.userAgent.match(/MSIE (\d+)/);return Number(RegExp.$1)>=9;};ISIE9UP=RGraph.isIE9up();
+RGraph.isIE10up=function(){navigator.userAgent.match(/MSIE (\d+)/);return Number(RegExp.$1)>=10;};ISIE10UP=RGraph.isIE10up();
+RGraph.isOld=function(){return ISIE6||ISIE7||ISIE8;};ISOLD=ISIE6||ISIE7||ISIE8;
+RGraph.Reset=function(canvas){canvas.width=canvas.width;RGraph.ObjectRegistry.Clear(canvas);canvas.__rgraph_aa_translated__=false;}
+function pd(variable){RGraph.pr(variable);}
+function p(variable){RGraph.pr(variable);}
+function a(variable){alert(variable);}
+function cl(variable){return console.log(variable);}
\ No newline at end of file
diff --git a/webfiles/lib/steelseries/scripts/src/RGraph.rose.js b/webfiles/lib/steelseries/scripts/src/RGraph.rose.js
new file mode 100644
index 0000000..2e2c176
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/RGraph.rose.js
@@ -0,0 +1,1204 @@
+    /**
+    * o------------------------------------------------------------------------------o
+    * | This file is part of the RGraph package - you can learn more at:             |
+    * |                                                                              |
+    * |                          http://www.rgraph.net                               |
+    * |                                                                              |
+    * | This package is licensed under the RGraph license. For all kinds of business |
+    * | purposes there is a small one-time licensing fee to pay and for non          |
+    * | commercial  purposes it is free to use. You can read the full license here:  |
+    * |                                                                              |
+    * |                      http://www.rgraph.net/LICENSE.txt                       |
+    * o------------------------------------------------------------------------------o
+    */
+
+    if (typeof(RGraph) == 'undefined') RGraph = {};
+
+    /**
+    * The rose chart constuctor
+    *
+    * @param object canvas
+    * @param array data
+    */
+    RGraph.Rose = function (id, data)
+    {
+        this.id                = id;
+        this.canvas            = document.getElementById(id);
+        this.context           = this.canvas.getContext('2d');
+        this.data              = data;
+        this.canvas.__object__ = this;
+        this.type              = 'rose';
+        this.isRGraph          = true;
+        this.uid               = RGraph.CreateUID();
+        this.canvas.uid        = this.canvas.uid ? this.canvas.uid : RGraph.CreateUID();
+        this.colorsParsed      = false;
+
+
+        /**
+        * Compatibility with older browsers
+        */
+        RGraph.OldBrowserCompat(this.context);
+
+
+        this.centerx = 0;
+        this.centery = 0;
+        this.radius  = 0;
+        this.max     = 0;
+        this.angles  = [];
+
+        this.properties = {
+            'chart.background.axes':        true,
+            'chart.background.axes.color':  'black',
+            'chart.background.grid':        true,
+            'chart.background.grid.color':  '#ccc',
+            'chart.background.grid.size':   null,
+            'chart.background.grid.spokes': null,
+            'chart.background.grid.count':  5,
+            'chart.centerx':                null,
+            'chart.centery':                null,
+            'chart.radius':                 null,
+            'chart.colors':                 ['rgba(255,0,0,0.5)', 'rgba(255,255,0,0.5)', 'rgba(0,255,255,0.5)', 'rgb(0,255,0)', 'gray', 'blue', 'rgb(255,128,255)','green', 'pink', 'gray', 'aqua'],
+            'chart.colors.sequential':      false,
+            'chart.colors.alpha':           null,
+            'chart.margin':                 0,
+            'chart.strokestyle':            '#aaa',
+            'chart.gutter.left':            25,
+            'chart.gutter.right':           25,
+            'chart.gutter.top':             25,
+            'chart.gutter.bottom':          25,
+            'chart.title':                  '',
+            'chart.title.background':       null,
+            'chart.title.hpos':             null,
+            'chart.title.vpos':             null,
+            'chart.title.bold':             true,
+            'chart.title.font':             null,
+            'chart.title.x':                null,
+            'chart.title.y':                null,
+            'chart.title.halign':           null,
+            'chart.title.valign':           null,
+            'chart.labels':                 null,
+            'chart.labels.position':       'center',
+            'chart.labels.axes':            'nsew',
+            'chart.labels.offset':          0,
+            'chart.text.color':             'black',
+            'chart.text.font':              'Arial',
+            'chart.text.size':              10,
+            'chart.key':                    null,
+            'chart.key.background':         'white',
+            'chart.key.position':           'graph',
+            'chart.key.halign':             'right',
+            'chart.key.shadow':             false,
+            'chart.key.shadow.color':       '#666',
+            'chart.key.shadow.blur':        3,
+            'chart.key.shadow.offsetx':     2,
+            'chart.key.shadow.offsety':     2,
+            'chart.key.position.gutter.boxed': true,
+            'chart.key.position.x':         null,
+            'chart.key.position.y':         null,
+            'chart.key.color.shape':        'square',
+            'chart.key.rounded':            true,
+            'chart.key.linewidth':          1,
+            'chart.key.colors':             null,
+            'chart.contextmenu':            null,
+            'chart.tooltips':               null,
+            'chart.tooltips.event':         'onclick',
+            'chart.tooltips.effect':        'fade',
+            'chart.tooltips.css.class':     'RGraph_tooltip',
+            'chart.tooltips.highlight':     true,
+            'chart.highlight.stroke':       'rgba(0,0,0,0)',
+            'chart.highlight.fill':         'rgba(255,255,255,0.7)',
+            'chart.annotatable':            false,
+            'chart.annotate.color':         'black',
+            'chart.zoom.factor':            1.5,
+            'chart.zoom.fade.in':           true,
+            'chart.zoom.fade.out':          true,
+            'chart.zoom.hdir':              'right',
+            'chart.zoom.vdir':              'down',
+            'chart.zoom.frames':            25,
+            'chart.zoom.delay':             16.666,
+            'chart.zoom.shadow':            true,
+            'chart.zoom.background':        true,
+            'chart.zoom.action':            'zoom',
+            'chart.resizable':              false,
+            'chart.resize.handle.adjust':   [0,0],
+            'chart.resize.handle.background': null,
+            'chart.adjustable':             false,
+            'chart.ymax':                   null,
+            'chart.ymin':                   0,
+            'chart.scale.decimals':         null,
+            'chart.scale.point':            '.',
+            'chart.scale.thousand':         ',',
+            'chart.variant':                'stacked',
+            'chart.exploded':               0,
+            'chart.events.mousemove':       null,
+            'chart.events.click':           null,
+            'chart.animation.roundrobin.factor':  1,
+            'chart.animation.roundrobin.radius': true,
+            'chart.animation.grow.multiplier': 1
+        }
+
+
+
+        /**
+        * Create the $ objects. In the case of non-equi-angular rose charts it actually creates too many $ objects,
+        * but it doesn't matter.
+        */
+        var linear_data = RGraph.array_linearize(this.data);
+        for (var i=0; i<linear_data.length; ++i) {
+            this["$" + i] = {}
+        }
+
+
+        /**
+        * Translate half a pixel for antialiasing purposes - but only if it hasn't beeen
+        * done already
+        */
+        if (!this.canvas.__rgraph_aa_translated__) {
+            this.context.translate(0.5,0.5);
+
+            this.canvas.__rgraph_aa_translated__ = true;
+        }
+
+
+
+        /**
+        * Register this object
+        */
+        RGraph.Register(this);
+    }
+
+
+    /**
+    * A simple setter
+    *
+    * @param string name  The name of the property to set
+    * @param string value The value of the property
+    */
+    RGraph.Rose.prototype.Set = function (name, value)
+    {
+        /**
+        * This should be done first - prepend the propertyy name with "chart." if necessary
+        */
+        if (name.substr(0,6) != 'chart.') {
+            name = 'chart.' + name;
+        }
+
+        this.properties[name.toLowerCase()] = value;
+
+    }
+
+
+    /**
+    * A simple getter
+    *
+    * @param string name The name of the property to get
+    */
+    RGraph.Rose.prototype.Get = function (name)
+    {
+        /**
+        * This should be done first - prepend the property name with "chart." if necessary
+        */
+        if (name.substr(0,6) != 'chart.') {
+            name = 'chart.' + name;
+        }
+
+        return this.properties[name.toLowerCase()];
+    }
+
+
+    /**
+    * This method draws the rose chart
+    */
+    RGraph.Rose.prototype.Draw = function ()
+    {
+        /**
+        * Fire the onbeforedraw event
+        */
+        RGraph.FireCustomEvent(this, 'onbeforedraw');
+
+
+
+        /**
+        * This doesn't affect the chart, but is used for compatibility
+        */
+        this.gutterLeft   = this.Get('chart.gutter.left');
+        this.gutterRight  = this.Get('chart.gutter.right');
+        this.gutterTop    = this.Get('chart.gutter.top');
+        this.gutterBottom = this.Get('chart.gutter.bottom');
+
+        // Calculate the radius
+        this.radius       = (Math.min(this.canvas.width - this.gutterLeft - this.gutterRight, this.canvas.height - this.gutterTop - this.gutterBottom) / 2);
+        this.centerx      = ((this.canvas.width - this.gutterLeft - this.gutterRight) / 2) + this.gutterLeft;
+        this.centery      = ((this.canvas.height - this.gutterTop - this.gutterBottom) / 2) + this.gutterTop;
+        this.angles       = [];
+        this.total        = 0;
+        this.startRadians = 0;
+
+        /**
+        * Change the centerx marginally if the key is defined
+        */
+        if (this.Get('chart.key') && this.Get('chart.key').length > 0 && this.Get('chart.key').length >= 3) {
+            this.centerx = this.centerx - this.Get('chart.gutter.right') + 5;
+        }
+
+
+
+        // User specified radius, centerx and centery
+        if (typeof(this.Get('chart.centerx')) == 'number') this.centerx = this.Get('chart.centerx');
+        if (typeof(this.Get('chart.centery')) == 'number') this.centery = this.Get('chart.centery');
+        if (typeof(this.Get('chart.radius')) == 'number')  this.radius  = this.Get('chart.radius');
+
+        /**
+        * Parse the colors for gradients. Its down here so that the center X/Y can be used
+        */
+        if (!this.colorsParsed) {
+
+            this.parseColors();
+
+            // Don't want to do this again
+            this.colorsParsed = true;
+        }
+
+        this.DrawBackground();
+        this.DrawRose();
+        this.DrawLabels();
+
+        /**
+        * Setup the context menu if required
+        */
+        if (this.Get('chart.contextmenu')) {
+            RGraph.ShowContext(this);
+        }
+
+
+        /**
+        * This function enables resizing
+        */
+        if (this.Get('chart.resizable')) {
+            RGraph.AllowResizing(this);
+        }
+
+
+        /**
+        * This function enables adjusting
+        */
+        if (this.Get('chart.adjustable')) {
+            RGraph.AllowAdjusting(this);
+        }
+
+
+        /**
+        * This installs the event listeners
+        */
+        RGraph.InstallEventListeners(this);
+
+
+        /**
+        * Fire the RGraph ondraw event
+        */
+        RGraph.FireCustomEvent(this, 'ondraw');
+    }
+
+    /**
+    * This method draws the rose charts background
+    */
+    RGraph.Rose.prototype.DrawBackground = function ()
+    {
+        this.context.lineWidth = 1;
+
+
+
+
+
+        // Draw the background grey circles/spokes
+        if (this.properties['chart.background.grid']) {
+            if (typeof(this.properties['chart.background.grid.count']) == 'number') {
+                this.properties['chart.background.grid.size'] = this.radius / this.properties['chart.background.grid.count'];
+            }
+
+            this.context.beginPath();
+                this.context.strokeStyle = this.properties['chart.background.grid.color'];
+
+                // Radius must be greater than 0 for Opera to work
+                for (var i=this.properties['chart.background.grid.size']; i<=this.radius; i+=this.properties['chart.background.grid.size']) {
+
+                    //this.context.moveTo(this.centerx + i, this.centery);
+
+                    // Radius must be greater than 0 for Opera to work
+                    this.context.arc(this.centerx,
+                                     this.centery,
+                                     i,
+                                     0,
+                                     TWOPI,
+                                     false);
+                }
+            this.context.stroke();
+
+
+
+
+
+
+            // Draw the background lines that go from the center outwards
+            this.context.beginPath();
+                if (typeof(this.properties['chart.background.grid.spokes']) == 'number') {
+
+                    var num = (360 / this.properties['chart.background.grid.spokes']);
+
+                    for (var i=num; i<=360; i+=num) {
+
+                        // Radius must be greater than 0 for Opera to work
+                        this.context.arc(this.centerx,
+                                         this.centery,
+                                         this.radius,
+                                         (i / (180 / PI)) - HALFPI,
+                                         ((i + 0.0001) / (180 / PI)) - HALFPI,
+                                         0);
+
+                        this.context.lineTo(this.centerx, this.centery);
+                    }
+                } else {
+                    for (var i=15; i<=360; i+=15) {
+
+                        // Radius must be greater than 0 for Opera to work
+                        this.context.arc(this.centerx,
+                                         this.centery,
+                                         this.radius,
+                                         (i / (180/ PI)) - HALFPI,
+                                         ((i + 0.0001) / (180/ PI)) - HALFPI,
+                                         false);
+
+                        this.context.lineTo(this.centerx, this.centery);
+                    }
+                }
+            this.context.stroke();
+        }
+
+
+
+        if (this.Get('chart.background.axes')) {
+            this.context.beginPath();
+            this.context.strokeStyle = this.Get('chart.background.axes.color');
+
+            // Draw the X axis
+            this.context.moveTo(this.centerx - this.radius, Math.round(this.centery) );
+            this.context.lineTo(this.centerx + this.radius, Math.round(this.centery) );
+
+            // Draw the X ends
+            this.context.moveTo(Math.round(this.centerx - this.radius), this.centery - 5);
+            this.context.lineTo(Math.round(this.centerx - this.radius), this.centery + 5);
+            this.context.moveTo(Math.round(this.centerx + this.radius), this.centery - 5);
+            this.context.lineTo(Math.round(this.centerx + this.radius), this.centery + 5);
+
+            // Draw the X check marks
+            for (var i=(this.centerx - this.radius); i<(this.centerx + this.radius); i+=(this.radius / 5)) {
+                this.context.moveTo(Math.round(i),  this.centery - 3);
+                this.context.lineTo(Math.round(i),  this.centery + 3.5);
+            }
+
+            // Draw the Y check marks
+            for (var i=(this.centery - this.radius); i<(this.centery + this.radius); i+=(this.radius / 5)) {
+                this.context.moveTo(this.centerx - 3, Math.round(i));
+                this.context.lineTo(this.centerx + 3, Math.round(i));
+            }
+
+            // Draw the Y axis
+            this.context.moveTo(Math.round(this.centerx), this.centery - this.radius);
+            this.context.lineTo(Math.round(this.centerx), this.centery + this.radius);
+
+            // Draw the Y ends
+            this.context.moveTo(this.centerx - 5, Math.round(this.centery - this.radius));
+            this.context.lineTo(this.centerx + 5, Math.round(this.centery - this.radius));
+
+            this.context.moveTo(this.centerx - 5, Math.round(this.centery + this.radius));
+            this.context.lineTo(this.centerx + 5, Math.round(this.centery + this.radius));
+
+            // Stroke it
+            this.context.closePath();
+            this.context.stroke();
+        }
+    }
+
+
+
+    /**
+    * This method draws the data on the graph
+    */
+    RGraph.Rose.prototype.DrawRose = function ()
+    {
+        var max  = 0;
+        var data = this.data;
+        var margin = RGraph.degrees2Radians(this.Get('chart.margin'));
+
+        // Must be at least two data points
+        //if (data.length < 2) {
+        //    alert('[ROSE] Must be at least two data points! [' + data + ']');
+        //    return;
+        //}
+
+        // Work out the maximum value and the sum
+        if (!this.Get('chart.ymax')) {
+            // Work out the max
+            for (var i=0; i<data.length; ++i) {
+                if (typeof(data[i]) == 'number') {
+                    max = Math.max(max, data[i]);
+                } else if (typeof(data[i]) == 'object' && this.Get('chart.variant') == 'non-equi-angular') {
+                    max = Math.max(max, data[i][0]);
+
+                // Fallback is stacked
+                } else {
+                    max = Math.max(max, RGraph.array_sum(data[i]));
+                }
+            }
+
+            this.scale = RGraph.getScale(max, this);
+            this.max = this.scale[4];
+        } else {
+            var ymax = this.Get('chart.ymax');
+            var ymin = this.Get('chart.ymin');
+
+            this.scale = [
+                          ((ymax - ymin) * 0.2) + ymin,
+                          ((ymax - ymin) * 0.4) + ymin,
+                          ((ymax - ymin) * 0.6) + ymin,
+                          ((ymax - ymin) * 0.8) + ymin,
+                          ((ymax - ymin) * 1.0) + ymin
+                         ];
+            this.max = this.scale[4];
+        }
+
+        this.sum = RGraph.array_sum(data);
+
+        // Move to the centre
+        this.context.moveTo(this.centerx, this.centery);
+
+        this.context.stroke(); // Stroke the background so it stays grey
+
+        // Transparency
+        if (this.Get('chart.colors.alpha')) {
+            this.context.globalAlpha = this.Get('chart.colors.alpha');
+        }
+
+        /*******************************************************
+        * A non-equi-angular Rose chart
+        *******************************************************/
+        if (typeof(this.Get('chart.variant')) == 'string' && this.Get('chart.variant') == 'non-equi-angular') {
+            /*******************************************************
+            * NON-EQUI-ANGULAR GOES HERE
+            *******************************************************/
+            var total=0;
+            for (var i=0; i<data.length; ++i) {
+                total += data[i][1];
+            }
+
+
+            for (var i=0; i<this.data.length; ++i) {
+
+                var segmentRadians = ((this.data[i][1] / total) * TWOPI);
+                var radius         = ((this.data[i][0] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius;
+                    radius = radius * this.properties['chart.animation.grow.multiplier'];
+
+                this.context.strokeStyle = this.Get('chart.strokestyle');
+                this.context.fillStyle = this.Get('chart.colors')[0];
+
+                if (this.Get('chart.colors.sequential')) {
+                    this.context.fillStyle = this.Get('chart.colors')[i];
+                }
+
+                this.context.beginPath(); // Begin the segment
+
+//                    var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
+//                    var endAngle   = ((this.startRadians + segmentRadians) * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
+                    var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin  - segmentRadians / 2;
+                    var endAngle   = ((this.startRadians + segmentRadians) * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin  - segmentRadians / 2;
+
+                    var exploded  = this.getexploded(i, startAngle, endAngle, this.Get('chart.exploded'));
+                    var explodedX = exploded[0];
+                    var explodedY = exploded[1];
+
+
+                    this.context.arc(this.centerx + explodedX,
+                                     this.centery + explodedY,
+                                     this.Get('chart.animation.roundrobin.radius') ? radius * this.Get('chart.animation.roundrobin.factor') : radius,
+                                     startAngle,
+                                     endAngle,
+                                     0);
+                    this.context.lineTo(this.centerx + explodedX, this.centery + explodedY);
+                this.context.closePath(); // End the segment
+
+                this.context.stroke();
+                this.context.fill();
+
+                // Store the start and end angles
+
+                this.angles.push(gg = [
+                                  startAngle,
+                                  endAngle,
+                                  0,
+                                  radius,
+                                  this.centerx + explodedX,
+                                  this.centery + explodedY
+                                 ]);
+
+                this.startRadians += segmentRadians;
+            }
+        } else {
+
+            var sequentialColorIndex = 0;
+
+            /*******************************************************
+            * Draw regular segments here
+            *******************************************************/
+            for (var i=0; i<this.data.length; ++i) {
+
+                this.context.strokeStyle = this.Get('chart.strokestyle');
+                this.context.fillStyle = this.Get('chart.colors')[0];
+
+                /*******************************************************
+                * This allows sequential colors
+                *******************************************************/
+                if (this.Get('chart.colors.sequential')) {
+                    this.context.fillStyle = this.Get('chart.colors')[i];
+                }
+
+                var segmentRadians = (1 / this.data.length) * TWOPI;
+
+                if (typeof(this.data[i]) == 'number') {
+                    this.context.beginPath(); // Begin the segment
+
+                        var radius = ((this.data[i] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius;
+                            radius = radius * this.properties['chart.animation.grow.multiplier'];
+
+//                        var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
+//                        var endAngle   = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
+                        var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin - segmentRadians / 2;
+                        var endAngle   = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) + (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin - segmentRadians / 2;
+
+
+                        var exploded  = this.getexploded(i, startAngle, endAngle, this.Get('chart.exploded'));
+                        var explodedX = exploded[0];
+                        var explodedY = exploded[1];
+
+                        this.context.arc(this.centerx + explodedX,
+                                         this.centery + explodedY,
+                                         this.Get('chart.animation.roundrobin.radius') ? radius * this.Get('chart.animation.roundrobin.factor') : radius,
+                                         startAngle,
+                                         endAngle,
+                                         0);
+                        this.context.lineTo(this.centerx + explodedX, this.centery + explodedY);
+                    this.context.closePath(); // End the segment
+                    this.context.stroke();
+                    this.context.fill();
+
+                    if (endAngle == 0) {
+                        //endAngle = TWOPI;
+                    }
+
+                    // Store the start and end angles
+                    this.angles.push([
+                                      startAngle,
+                                      endAngle,
+                                      0,
+                                      radius * this.Get('chart.animation.roundrobin.factor'),
+                                      this.centerx + explodedX,
+                                      this.centery + explodedY
+                                     ]);
+
+                /*******************************************************
+                * Draw a stacked segment
+                *******************************************************/
+                } else if (typeof(this.data[i]) == 'object') {
+
+                    var margin = this.Get('chart.margin') / (180 / PI);
+
+
+                    for (var j=0; j<this.data[i].length; ++j) {
+
+                        var startAngle = (this.startRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI + margin;
+                        var endAngle  = (this.startRadians * this.Get('chart.animation.roundrobin.factor'))+ (segmentRadians * this.Get('chart.animation.roundrobin.factor')) - HALFPI - margin;
+
+                        var exploded  = this.getexploded(i, startAngle, endAngle, this.Get('chart.exploded'));
+                        var explodedX = exploded[0];
+                        var explodedY = exploded[1];
+
+                        this.context.fillStyle = this.Get('chart.colors')[j];
+
+                        // This facilitates sequential color support
+                        if (this.Get('chart.colors.sequential')) {
+                            this.context.fillStyle = this.Get('chart.colors')[sequentialColorIndex++];
+                        }
+
+                        if (j == 0) {
+                            this.context.beginPath(); // Begin the segment
+                                var startRadius = 0;
+                                var endRadius = ((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius;
+                                    endRadius = endRadius * this.properties['chart.animation.grow.multiplier'];
+
+                                this.context.arc(this.centerx + explodedX,
+                                                 this.centery + explodedY,
+                                                 this.Get('chart.animation.roundrobin.radius') ? endRadius * this.Get('chart.animation.roundrobin.factor') : endRadius,
+                                                 startAngle,
+                                                 endAngle,
+                                                 0);
+                                this.context.lineTo(this.centerx + explodedX, this.centery + explodedY);
+                            this.context.closePath(); // End the segment
+                            this.context.stroke();
+                            this.context.fill();
+
+                            this.angles.push([
+                                              startAngle,
+                                              endAngle,
+                                              0,
+                                              endRadius * this.Get('chart.animation.roundrobin.factor'),
+                                              this.centerx + explodedX,
+                                              this.centery + explodedY
+                                             ]);
+
+                        } else {
+
+                            this.context.beginPath(); // Begin the segment
+
+                                var startRadius = endRadius; // This comes from the prior iteration of this loop
+                                var endRadius = (((this.data[i][j] - this.Get('chart.ymin')) / (this.max - this.Get('chart.ymin'))) * this.radius) + startRadius;
+                                    endRadius = endRadius * this.properties['chart.animation.grow.multiplier'];
+
+                                this.context.arc(this.centerx + explodedX,
+                                                 this.centery + explodedY,
+                                                 startRadius  * this.Get('chart.animation.roundrobin.factor'),
+                                                 startAngle,
+                                                 endAngle,
+                                                 0);
+
+                                this.context.arc(this.centerx + explodedX,
+                                                 this.centery + explodedY,
+                                                 endRadius  * this.Get('chart.animation.roundrobin.factor'),
+                                                 endAngle,
+                                                 startAngle,
+                                                 true);
+
+                            this.context.closePath(); // End the segment
+                            this.context.stroke();
+                            this.context.fill();
+
+                            this.angles.push([
+                                              startAngle,
+                                              endAngle,
+                                              startRadius * this.Get('chart.animation.roundrobin.factor'),
+                                              endRadius * this.Get('chart.animation.roundrobin.factor'),
+                                              this.centerx + explodedX,
+                                              this.centery + explodedY
+                                             ]);
+                        }
+                    }
+                }
+
+                this.startRadians += segmentRadians;
+            }
+        }
+
+        // Turn off the transparency
+        if (this.Get('chart.colors.alpha')) {
+            this.context.globalAlpha = 1;
+        }
+
+        // Draw the title if any has been set
+        if (this.Get('chart.title')) {
+            RGraph.DrawTitle(this,
+                             this.Get('chart.title'),
+                             (this.canvas.height / 2) - this.radius,
+                             this.centerx,
+                             this.Get('chart.title.size') ? this.Get('chart.title.size') : this.Get('chart.text.size') + 2);
+        }
+    }
+
+
+    /**
+    * Unsuprisingly, draws the labels
+    */
+    RGraph.Rose.prototype.DrawLabels = function ()
+    {
+        this.context.lineWidth = 1;
+        var key = this.Get('chart.key');
+
+        if (key && key.length) {
+            RGraph.DrawKey(this, key, this.Get('chart.colors'));
+        }
+
+        // Set the color to black
+        this.context.fillStyle = this.properties['chart.text.color'];
+        this.context.strokeStyle = 'black';
+
+        var r          = this.radius;
+        var font_face  = this.Get('chart.text.font');
+        var font_size  = this.Get('chart.text.size');
+        var context    = this.context;
+        var axes       = this.Get('chart.labels.axes').toLowerCase();
+        var decimals   = this.Get('chart.scale.decimals');
+        var units_pre  = this.Get('chart.units.pre');
+        var units_post = this.Get('chart.units.post');
+
+        // Draw any circular labels
+        if (typeof(this.Get('chart.labels')) == 'object' && this.Get('chart.labels')) {
+            this.DrawCircularLabels(context, this.Get('chart.labels'), font_face, font_size, r + 10);
+        }
+
+
+        // Size can be specified seperately for the scale now
+        if (typeof(this.properties['chart.text.size.scale']) == 'number') {
+            font_size = this.properties['chart.text.size.scale'];
+        }
+
+
+        var color = 'rgba(255,255,255,0.8)';
+
+        // The "North" axis labels
+        if (axes.indexOf('n') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery - r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+        }
+
+        // The "South" axis labels
+        if (axes.indexOf('s') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.2), RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.4), RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.6), RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + (r * 0.8), RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx, this.centery + r, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+        }
+
+        // The "East" axis labels
+        if (axes.indexOf('e') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx + r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+        }
+
+        // The "West" axis labels
+        if (axes.indexOf('w') > -1) {
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.2), this.centery, RGraph.number_format(this, Number(this.scale[0]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.4), this.centery, RGraph.number_format(this, Number(this.scale[1]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.6), this.centery, RGraph.number_format(this, Number(this.scale[2]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - (r * 0.8), this.centery, RGraph.number_format(this, Number(this.scale[3]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+            RGraph.Text(context, font_face, font_size, this.centerx - r, this.centery, RGraph.number_format(this, Number(this.scale[4]).toFixed(decimals), units_pre, units_post), 'center', 'center', true, false, color);
+        }
+
+        if (axes.length > 0) {
+            RGraph.Text(context, font_face, font_size, this.centerx,  this.centery, typeof(this.Get('chart.ymin')) == 'number' ? RGraph.number_format(this, Number(this.Get('chart.ymin')).toFixed(this.Get('chart.scale.decimals')), units_pre, units_post) : '0', 'center', 'center', true, false, color);
+        }
+    }
+
+
+    /**
+    * Draws the circular labels that go around the charts
+    *
+    * @param labels array The labels that go around the chart
+    */
+    RGraph.Rose.prototype.DrawCircularLabels = function (context, labels, font_face, font_size, r)
+    {
+        var variant = this.Get('chart.variant');
+        var position = this.Get('chart.labels.position');
+        var r        = r + 5 + this.Get('chart.labels.offset');
+
+        for (var i=0; i<this.angles.length; ++i) {
+            if (typeof(variant) == 'string' && variant == 'non-equi-angular') {
+                var a = Number(this.angles[i][0]) + ((this.angles[i][1] - this.angles[i][0]) / 2);
+            } else {
+                var a = (TWOPI / labels.length) * (i + 1) - (TWOPI / (labels.length * 2));
+                var a = a - HALFPI + (this.Get('chart.labels.position') == 'edge' ? ((TWOPI / labels.length) / 2) : 0);
+            }
+
+            var x = this.centerx + (Math.cos(a) * r);
+            var y = this.centery + (Math.sin(a) * r);
+
+            // Horizontal alignment
+            if (x > this.centerx) {
+                halign = 'left';
+            } else if (x == this.centerx) {
+                halign = 'center';
+            } else {
+                halign = 'right';
+            }
+
+            RGraph.Text(context, font_face, font_size, x, y, String(labels[i]), 'center', halign);
+        }
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+    * This function is for use with circular graph types, eg the Pie or Rose. Pass it your event object
+    * and it will pass you back the corresponding segment details as an array:
+    *
+    * [x, y, r, startAngle, endAngle]
+    *
+    * Angles are measured in degrees, and are measured from the "east" axis (just like the canvas).
+    *
+    * @param object e   Your event object
+    */
+    RGraph.Rose.prototype.getShape =
+    RGraph.Rose.prototype.getSegment = function (e)
+    {
+        RGraph.FixEventObject(e);
+
+        var canvas  = this.canvas;
+        var context = this.context;
+        var angles  = this.angles;
+        var ret     = [];
+
+        /**
+        * Go through all of the angles checking each one
+        */
+        for (var i=0; i<angles.length ; ++i) {
+
+            var angleStart  = angles[i][0];
+            var angleEnd    = angles[i][1];
+            var radiusStart = angles[i][2];
+            var radiusEnd   = angles[i][3];
+            var centerX     = angles[i][4];
+            var centerY     = angles[i][5];
+            var mouseXY     = RGraph.getMouseXY(e);
+            var mouseX      = mouseXY[0] - centerX;
+            var mouseY      = mouseXY[1] - centerY;
+
+            // New click testing (the 0.01 is there because Opera doesn't like 0 as the radius)
+            this.context.beginPath();
+                this.context.arc(centerX, centerY, radiusStart ? radiusStart : 0.01, angleStart, angleEnd, false);
+                this.context.arc(centerX, centerY, radiusEnd, angleEnd, angleStart, true);
+            this.context.closePath();
+
+            // No stroke() or fill()
+
+
+            if (context.isPointInPath(mouseXY[0], mouseXY[1])) {
+
+                angles[i][6] = i;
+
+                if (RGraph.parseTooltipText) {
+                    var tooltip = RGraph.parseTooltipText(this.Get('chart.tooltips'), angles[i][6]);
+                }
+
+                // Add the textual keys
+                angles[i]['object']       = this;
+                angles[i]['x']            = angles[i][4];
+                angles[i]['y']            = angles[i][5];
+                angles[i]['angle.start']  = angles[i][0];
+                angles[i]['angle.end']    = angles[i][1];
+                angles[i]['radius.start'] = angles[i][2];
+                angles[i]['radius.end']   = angles[i][3];
+                angles[i]['index']        = angles[i][6];
+                angles[i]['tooltip']      = tooltip ? tooltip : null;
+
+                return angles[i];
+            }
+        }
+
+        return null;
+    }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+    /**
+    * Returns any exploded for a particular segment
+    */
+    RGraph.Rose.prototype.getexploded = function (index, startAngle, endAngle, exploded)
+    {
+        var explodedx, explodedy;
+
+        /**
+        * Retrieve any exploded - the exploded can be an array of numbers or a single number
+        * (which is applied to all segments)
+        */
+        if (typeof(exploded) == 'object' && typeof(exploded[index]) == 'number') {
+            explodedx = Math.cos(((endAngle - startAngle) / 2) + startAngle) * exploded[index];
+            explodedy = Math.sin(((endAngle - startAngle) / 2) + startAngle) * exploded[index];
+
+        } else if (typeof(exploded) == 'number') {
+            explodedx = Math.cos(((endAngle - startAngle) / 2) + startAngle) * exploded;
+            explodedy = Math.sin(((endAngle - startAngle) / 2) + startAngle) * exploded;
+
+        } else {
+            explodedx = 0;
+            explodedy = 0;
+        }
+
+        return [explodedx, explodedy];
+    }
+
+
+
+    /**
+    * This function facilitates the installation of tooltip event listeners if
+    * tooltips are defined.
+    */
+    RGraph.Rose.prototype.AllowTooltips = function ()
+    {
+        // Preload any tooltip images that are used in the tooltips
+        RGraph.PreLoadTooltipImages(this);
+
+
+        /**
+        * This installs the window mousedown event listener that lears any
+        * highlight that may be visible.
+        */
+        RGraph.InstallWindowMousedownTooltipListener(this);
+
+
+        /**
+        * This installs the canvas mousemove event listener. This function
+        * controls the pointer shape.
+        */
+        RGraph.InstallCanvasMousemoveTooltipListener(this);
+
+
+        /**
+        * This installs the canvas mouseup event listener. This is the
+        * function that actually shows the appropriate tooltip (if any).
+        */
+        RGraph.InstallCanvasMouseupTooltipListener(this);
+    }
+
+
+
+    /**
+    * Each object type has its own Highlight() function which highlights the appropriate shape
+    *
+    * @param object shape The shape to highlight
+    */
+    RGraph.Rose.prototype.Highlight = function (shape)
+    {
+        if (this.Get('chart.tooltips.highlight')) {
+            // Add the new segment highlight
+            this.context.beginPath();
+
+                this.context.strokeStyle = this.Get('chart.highlight.stroke');
+                this.context.fillStyle = this.Get('chart.highlight.fill');
+
+                this.context.arc(shape['x'], shape['y'], shape['radius.end'], shape['angle.start'], shape['angle.end'], false);
+
+                if (shape['radius.start'] > 0) {
+                    this.context.arc(shape['x'], shape['y'], shape['radius.start'], shape['angle.end'], shape['angle.start'], true);
+                } else {
+                    this.context.lineTo(shape['x'], shape['y']);
+                }
+            this.context.closePath();
+
+            this.context.stroke();
+            this.context.fill();
+        }
+    }
+
+
+
+    /**
+    * The getObjectByXY() worker method. Don't call this call:
+    *
+    * RGraph.ObjectRegistry.getObjectByXY(e)
+    *
+    * @param object e The event object
+    */
+    RGraph.Rose.prototype.getObjectByXY = function (e)
+    {
+        var mouseXY = RGraph.getMouseXY(e);
+
+        // Work out the radius
+        var radius = RGraph.getHypLength(this.centerx, this.centery, mouseXY[0], mouseXY[1]);
+
+        if (
+               mouseXY[0] > (this.centerx - this.radius)
+            && mouseXY[0] < (this.centerx + this.radius)
+            && mouseXY[1] > (this.centery - this.radius)
+            && mouseXY[1] < (this.centery + this.radius)
+            && radius <= this.radius
+            ) {
+
+            return this;
+        }
+    }
+
+
+
+    /**
+    * This function positions a tooltip when it is displayed
+    *
+    * @param obj object    The chart object
+    * @param int x         The X coordinate specified for the tooltip
+    * @param int y         The Y coordinate specified for the tooltip
+    * @param objec tooltip The tooltips DIV element
+    */
+    RGraph.Rose.prototype.positionTooltip = function (obj, x, y, tooltip, idx)
+    {
+
+        var coordX      = obj.angles[idx][4];
+        var coordY      = obj.angles[idx][5];
+        var angleStart  = obj.angles[idx][0];
+        var angleEnd    = obj.angles[idx][1];
+        var radius      = ((obj.angles[idx][3] - obj.angles[idx][2]) / 2) + obj.angles[idx][2];
+
+        var angleCenter = ((angleEnd - angleStart) / 2) + angleStart;
+        var canvasXY    = RGraph.getCanvasXY(obj.canvas);
+        var gutterLeft  = obj.Get('chart.gutter.left');
+        var gutterTop   = obj.Get('chart.gutter.top');
+        var width       = tooltip.offsetWidth;
+        var height      = tooltip.offsetHeight;
+
+
+        // By default any overflow is hidden
+        tooltip.style.overflow = '';
+
+        // The arrow
+        var img = new Image();
+            img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAFCAYAAACjKgd3AAAARUlEQVQYV2NkQAN79+797+RkhC4M5+/bd47B2dmZEVkBCgcmgcsgbAaA9GA1BCSBbhAuA/AagmwQPgMIGgIzCD0M0AMMAEFVIAa6UQgcAAAAAElFTkSuQmCC';
+            img.style.position = 'absolute';
+            img.id = '__rgraph_tooltip_pointer__';
+            img.style.top = (tooltip.offsetHeight - 2) + 'px';
+        tooltip.appendChild(img);
+
+        // Reposition the tooltip if at the edges:
+
+        // LEFT edge
+        if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width / 2)) < 10) {
+            tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width * 0.1)) + 'px';
+            tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
+            img.style.left = ((width * 0.1) - 8.5) + 'px';
+
+        // RIGHT edge
+        } else if ((canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) + (width / 2)) > (document.body.offsetWidth - 10) ) {
+            tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius) - (width * 0.9)) + 'px';
+            tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
+            img.style.left = ((width * 0.9) - 8.5) + 'px';
+
+        // Default positioning - CENTERED
+        } else {
+            tooltip.style.left = (canvasXY[0] + coordX + (Math.cos(angleCenter) * radius)- (width / 2)) + 'px';
+            tooltip.style.top = (canvasXY[1] + coordY + (Math.sin(angleCenter) * radius)- height - 5) + 'px';
+            img.style.left = ((width * 0.5) - 8.5) + 'px';
+        }
+    }
+
+
+
+    /**
+    * This method gives you the relevant radius for a particular value
+    *
+    * @param number value The relevant value to get the radius for
+    */
+    RGraph.Rose.prototype.getRadius = function (value)
+    {
+        // Range checking (the Rose minimum is always 0)
+        if (value < 0 || value > this.max) {
+            return null;
+        }
+
+        var r = (value / this.max) * this.radius;
+
+        return r;
+    }
+
+
+
+    /**
+    * This allows for easy specification of gradients
+    */
+    RGraph.Rose.prototype.parseColors = function ()
+    {
+        for (var i=0; i<this.properties['chart.colors'].length; ++i) {
+            this.properties['chart.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.colors'][i]);
+        }
+
+        /**
+        * Key colors
+        */
+        if (!RGraph.is_null(this.properties['chart.key.colors'])) {
+            for (var i=0; i<this.properties['chart.key.colors'].length; ++i) {
+                this.properties['chart.key.colors'][i] = this.parseSingleColorForGradient(this.properties['chart.key.colors'][i]);
+            }
+        }
+
+        this.properties['chart.text.color']       = this.parseSingleColorForGradient(this.properties['chart.text.color']);
+        this.properties['chart.title.color']      = this.parseSingleColorForGradient(this.properties['chart.title.color']);
+        this.properties['chart.highlight.fill']   = this.parseSingleColorForGradient(this.properties['chart.highlight.fill']);
+        this.properties['chart.highlight.stroke'] = this.parseSingleColorForGradient(this.properties['chart.highlight.stroke']);
+    }
+
+
+
+    /**
+    * This parses a single color value
+    */
+    RGraph.Rose.prototype.parseSingleColorForGradient = function (color)
+    {
+        var canvas  = this.canvas;
+        var context = this.context;
+
+        if (!color || typeof(color) != 'string') {
+            return color;
+        }
+
+        if (color.match(/^gradient\((.*)\)$/i)) {
+
+            var parts = RegExp.$1.split(':');
+
+            // Create the gradient
+            //var grad = context.createLinearGradient(0,0,canvas.width,0);
+            var grad = context.createRadialGradient(this.centerx, this.centery, 0, this.centerx, this.centery, this.radius);
+
+            var diff = 1 / (parts.length - 1);
+
+            grad.addColorStop(0, RGraph.trim(parts[0]));
+
+            for (var j=1; j<parts.length; ++j) {
+                grad.addColorStop(j * diff, RGraph.trim(parts[j]));
+            }
+        }
+
+        return grad ? grad : color;
+    }
diff --git a/webfiles/lib/steelseries/scripts/src/language.js b/webfiles/lib/steelseries/scripts/src/language.js
new file mode 100644
index 0000000..4f23cf5
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/language.js
@@ -0,0 +1,2987 @@
+/*
+ * THIS VERSION CUSTOMISED FOR CUMULUS MX DEFAULT WEB SITE
+ * Last Modified: 2021/08/02 15:51:34
+ *
+ * A language file for the starter SteelSeries gauges page for Cumulus
+ *
+ * Created by Mark Crossley, July 2011
+ *
+ * File encoding = UTF-8
+*/
+/*! Version: 2.7.0 - Updated: 28 March 2019 (Added Polish) */
+
+/*global gauges */
+
+var LANG = LANG || {};
+
+//======================================================================================================================
+// English
+//======================================================================================================================
+LANG.EN = {
+    canvasnosupport: 'No HTML5 Canvas support in your browser... Sorry...<br>' +
+                     'Try upgrading your browser to a more recent version - nearly all browsers support Canvas now, even IE9!<br><br>' +
+                     'Redirecting you to an \'old\' gauges page...',
+    //
+    led_title         : 'Remote sensor status unkonwn',
+    led_title_ok      : 'Remote sensor OK',
+    led_title_lost    : 'Remote sensor contact lost!',
+    led_title_unknown : 'Remote sensor status unknown!',
+    led_title_offline : 'The weather station is currently offline.',
+    //
+    weather           : 'weather',
+    latitude          : 'Latitude',
+    longitude         : 'Longitude',
+    elevation         : 'Elevation',
+    //
+    statusStr         : 'Loading...',
+    StatusMsg         : 'Downloading...',
+    StatusHttp        : 'HTTP Request Failed',
+    StatusRetry       : 'Retrying...',
+    StatusRetryIn     : 'Retry in...',
+    StatusTimeout     : 'Timed out',
+    StatusPageLimit   : 'Page auto-update limit reached, click the status LED to continue',
+    //
+    StatusLastUpdate  : 'Last update',
+    StatusMinsAgo     : 'minutes ago',
+    StatusHoursAgo    : 'hours ago',
+    StatusDaysAgo     : 'days ago',
+    //
+    realtimeCorrupt   : 'Text file download corrupted! Retrying...',
+    //
+    timer             : 'seconds',
+    at                : 'at',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Temperature',
+    temp_title_in     : 'Inside Temp',
+    temp_out_info     : 'Outside Temperature',
+    temp_out_web      : 'Outside',
+    temp_in_info      : 'Inside Temperature',
+    temp_in_web       : 'Inside',
+    temp_trend_info   : 'Temperature Trend',
+    //
+    dew_title         : 'Dew Point',
+    dew_info          : 'Dew Point',
+    dew_web           : 'Dew Point',
+    apptemp_title     : 'Apparent',
+    apptemp_info      : 'Apparent (Feels-Like) Temperature',
+    apptemp_web       : 'Apparent',
+    feel_title        : 'Feels Like',
+    feel_info         : 'Feels Like Temperature',
+    feel_web          : 'Feels Like',
+    chill_title       : 'Wind Chill',
+    chill_info        : 'Wind Chill',
+    chill_web         : 'Wind Chill',
+    heat_title        : 'Heat Index',
+    heat_info         : 'Heat Index',
+    heat_web          : 'Heat Index',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Rainfall',
+    rrate_title       : 'Rain Rate',
+    rrate_info        : 'Rain Rate',
+    LastRain_info     : 'Last Rain',
+    LastRainedT_info  : 'Today at',
+    LastRainedY_info  : 'Yesterday at',
+    //
+    hum_title_out     : 'Humidity',
+    hum_title_in      : 'Inside Hum',
+    hum_out_info      : 'Outside Humidity',
+    hum_in_info       : 'Inside Humidity',
+    hum_out_web       : 'Outside',
+    hum_in_web        : 'Inside',
+    //
+    baro_title        : 'Pressure',
+    baro_info         : 'Barometric Pressure',
+    baro_trend_info   : 'Pressure Trend',
+    //
+    wind_title        : 'Wind Speed',
+    tenminavg_title   : 'Average Wind Speed',
+    tenminavgwind_info: 'Average wind speed (10 min)',
+    maxavgwind_info   : 'Maximum average wind speed',
+    tenmingust_info   : 'Gust (10 min)',
+    maxgust_info      : 'Maximum gust',
+    latest_title      : 'Latest Wind',
+    latestwind_info   : 'Latest Wind Speed',
+    bearing_info      : 'Bearing',
+    latest_web        : 'Latest',
+    tenminavg_web     : 'Average',
+    dominant_bearing  : 'Dominant wind today',
+    calm              : 'calm',
+    windrose          : 'Wind Rose',
+    windruntoday      : 'Wind run today',
+    //
+    uv_title          : 'UV Index',
+    uv_levels         : ['None',
+                         'No danger',
+                         'Moderate risk',
+                         'High risk',
+                         'Very high risk',
+                         'Extreme risk'],
+    uv_headlines: ['No measurable UV Index',
+                   'No danger to the average person',
+                   'Moderate risk of harm from unprotected sun exposure',
+                   'High risk of harm from unprotected sun exposure',
+                   'Very high risk of harm from unprotected sun exposure',
+                   'Extreme risk of harm from unprotected sun exposure'],
+    uv_details: ['It is still night time or it is a very cloudy day.',
+
+                 'Wear sunglasses on bright days; use sunscreen if there is snow on the ground,<br>' +
+                 'which reflects UV radiation, or if you have particularly fair skin.',
+
+                 'Wear sunglasses and use SPF 30+ sunscreen, cover the body with clothing and<br>' +
+                 'a hat, and seek shade around midday when the sun is most intense.',
+
+                 'Wear sunglasses and use SPF 30+ sunscreen, cover the body with sun protective<br>' +
+                 'clothing and a wide-brim hat, and reduce time in the sun from two hours before<br>' +
+                 'to three hours after solar noon (roughly 11:00 AM to 4:00 PM during summer in<br>' +
+                 'zones that observe daylight saving time).',
+
+                 'Wear SPF 30+ sunscreen, a shirt, sunglasses, and a hat.<br>' +
+                 'Do not stay out in the sun for too long.',
+
+                 'Take all precautions, including: wear sunglasses and use SPF 30+ sunscreen,<br>' +
+                 'cover the body with a long-sleeve shirt and trousers, wear a very broad hat, and<br>' +
+                 'avoid the sun from two hours before to three hours after solar noon (roughly 11:00 AM<br>' +
+                 'to 4:00 PM during summer in zones that observe daylight saving time).'],
+    //
+    solar_title          : 'Solar Radiation',
+    solar_currentMax     : 'Current theoretical maximum reading',
+    solar_ofMax          : 'of maximum',
+    solar_maxToday       : 'Today\'s maximum reading',
+    //
+    cloudbase_title      : 'Cloud Base',
+    cloudbase_popup_title: 'Theoretical cloud base',
+    cloudbase_popup_text : 'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>' +
+                           'difference between the temperature and the dew point. Note that this simply<br>' +
+                           'gives the theoretical height at which Cumulus clouds would begin to form, the<br>' +
+                           'air being saturated',
+    feet              : 'feet',
+    metres            : 'metres',
+    miles             : 'miles',
+    n_miles           : 'n.miles',
+    km                : 'km',
+    //
+    lowest_info       : 'Lowest',
+    highest_info      : 'Highest',
+    lowestF_info      : 'Lowest',     // for proper translation of feminine words
+    highestF_info     : 'Highest',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Rising very rapidly',
+    RisingQuickly     : 'Rising quickly',
+    Rising            : 'Rising',
+    RisingSlowly      : 'Rising slowly',
+    Steady            : 'Steady',
+    FallingSlowly     : 'Falling slowly',
+    Falling           : 'Falling',
+    FallingQuickly    : 'Falling quickly',
+    FallingVeryRapidly: 'Falling very rapidly',
+    //
+    maximum_info      : 'Maximum',
+    max_hour_info     : 'Max per hour',
+    minimum_info      : 'Minimum',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],
+    compass           : ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'],
+    months            : ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
+};
+
+//======================================================================================================================
+// French by Ray of Tzouhalem-Maple Bay Weather, and Jacques of Weather by You!
+//======================================================================================================================
+LANG.FR = {
+    canvasnosupport: 'Votre navigateur ne supporte pas la fonction Canvas de HTML5 ...Désolé...<br>' +
+                     'Une mise à jour de votre navigateur à une version plus récente est requise - presque tous les ' +
+                     'navigateurs supportent HTML5 maintenant, incluant IE9!<br><br>' +
+                     'Je vous redirige vers le site contenant les anciennes jauges...',
+    //
+    led_title         : 'Statut du capteur - inconnu',
+    led_title_ok      : 'Statut du capteur - OK',
+    led_title_lost    : 'Contact avec le capteur - interrompu!',
+    led_title_unknown : 'Contact avec le capteur - inconnu!',
+    led_title_offline : 'La station météo est actuellement hors-ligne.',
+    //
+    weather           : 'Météo',
+    latitude          : 'Latitude',
+    longitude         : 'Longitude',
+    elevation         : 'Élévation',
+    //
+    statusStr         : 'Chargement...',
+    StatusMsg         : 'Téléchargement...',
+    StatusHttp        : 'La requête HTTP a échoué',
+    StatusRetry       : 'Réessai...',
+    StatusRetryIn     : 'Tentative dans...',
+    StatusTimeout     : 'Dépassement de temps',
+    StatusPageLimit   : 'Délais de rafraîchissement automatique atteint, cliquez la DEL de status pour continuer',
+    //
+    StatusLastUpdate  : 'Dernière mise à jour - il y a',
+    StatusMinsAgo     : 'minutes',
+    StatusHoursAgo    : 'heures',
+    StatusDaysAgo     : 'jours',
+    //
+    realtimeCorrupt   : 'Le téléchargement du fichier texte est corrompu! Réessai...',
+    //
+    timer             : 'secondes',
+    at                : 'à',
+    //
+    temp_title_out    : 'Température',
+    temp_title_in     : 'Intérieure',
+    temp_out_info     : 'Température à l\'extérieure',
+    temp_out_web      : 'À l\'extérieur',
+    temp_in_info      : 'Température à l\'intérieure',
+    temp_in_web       : 'À l\'intérieur',
+    temp_trend_info   : 'Tendances de la température',
+    dew_title         : 'Point de rosée',
+    dew_info          : 'Point de rosée',
+    dew_web           : 'Point de rosée',
+    apptemp_title     : 'Sensation',
+    apptemp_info      : 'Sensation - température ressentie',
+    apptemp_web       : 'Sensation',
+    feel_title        : "Se sent comme",
+    feel_info         : "Se sent comme Température",
+    feel_web          : "Se sent comme",
+    chill_title       : 'Refroidissement',
+    chill_info        : 'Refroidissement éolien',
+    chill_web         : 'Refroidissement',
+    //
+    heat_title        : 'Indice chaleur',
+    heat_info         : 'Indice de chaleur',
+    heat_web          : 'Indice chaleur',
+    //
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Précipitations',
+    rrate_title       : 'Débit de pluie',
+    rrate_info        : 'Débit de pluie',
+    LastRain_info     : 'Dernière pluie',
+    LastRainedT_info  : 'aujourd\'hui à',
+    LastRainedY_info  : 'hier à',
+    //
+    hum_title_out     : 'Humidité',
+    hum_title_in      : 'Intérieure',
+    hum_out_info      : 'Humidité à l\'extérieur',
+    hum_in_info       : 'Humidité à l\'intérieur',
+    hum_out_web       : 'À l\'extérieur',
+    hum_in_web        : 'À l\'intérieur',
+    //
+    baro_title        : 'Pression',
+    baro_info         : 'Pression barométrique',
+    baro_trend_info   : 'tendance barométrique',
+    //
+    wind_title        : 'Vitesse du vent',
+    tenminavg_title   : 'Vitesse moyenne',
+    tenminavgwind_info: 'Vitesse moyenne du vent (10 min)',
+    maxavgwind_info   : 'vitesse moyenne maximale',
+    tenmingust_info   : 'Rafale (10 min)',
+    maxgust_info      : 'Rafale maximale',
+    latest_title      : 'Vent récent',
+    latestwind_info   : 'Vitesse du vent (récente)',
+    bearing_info      : 'direction',
+    latest_web        : 'Récente',
+    tenminavg_web     : 'Moyenne',
+    dominant_bearing  : 'Vent dominant aujourd\'hui',
+    calm              : 'calme',
+    windrose          : 'Rose des Vents',
+    windruntoday      : 'Parcours du Vent auj.',
+    //
+    uv_title          : 'l’indice UV',
+    uv_levels         : ['Nul',
+                         'Bas',
+                         'Modéré',
+                         'Élevé',
+                         'Très élevé',
+                         'Extrême'],
+    uv_headlines: ['Aucun indice UV quantifiable',
+                   'Sans danger pour l\'individu moyen',
+                   'Peu de risques de brûlures causées par l\'exposition au soleil sans protection',
+                   'Haut risque de brûlures si exposition au soleil sans protection',
+                   'Risque très élevé de brûlure si exposition au soleil sans protection',
+                   'Très haut risque de brûlure si exposition au soleil sans protection'],
+    uv_details: ['Il fait encore nuit ou c\'est une journée très nuageuse.',
+
+                  'Protection solaire minime requise pour les activités normales.<br>' +
+                  'Portez des lunettes de soleil lors de journées ensoleillées. Si vous restez à l’extérieur pendant ' +
+                  'plus d’une heure, couvrez-vous et utilisez un écran solaire.<br>' +
+                  'La réflexion par la neige peut presque doubler l’intensité des rayons UV. Portez des lunettes de soleil ' +
+                  'et appliquez un écran solaire sur votre visage.',
+
+                  'Prenez des précautions : couvrez-vous, portez un chapeau et des lunettes de soleil, et appliquez ' +
+                  'un écran solaire, surtout si vous êtes à l’extérieur pendant 30 minutes ou plus.<br>' +
+                  'Cherchez l’ombre à mi-journée, le soleil y est à son plus fort.',
+
+                  'Protection nécessaire – les rayons UV endommagent la peau et peuvent causer des coups de soleil.<br>' +
+                  'Évitez le soleil entre 11 h et 16 h, prenez toutes les précautions : cherchez l’ombre, couvrez-vous, ' +
+                  'portez un chapeau, des lunettes de soleil et appliquez un écran solaire.',
+
+                  'Précautions supplémentaires nécessaires : la peau non protégée sera endommagée et peut brûler rapidement.<br>' +
+                  'Évitez le soleil entre 11 h et 16 h. Cherchez l’ombre, couvrez-vous, portez un chapeau ' +
+                  'et des lunettes de soleil et appliquez un écran solaire.',
+
+                  'Les valeurs de 11 ou plus sont très rares. Cependant, l’indice UV peut atteindre 14 ou ' +
+                  'plus dans les tropiques ou le sud des États-Unis.<br>' +
+                  'Prenez toutes les précautions. La peau non protégée sera endommagée et peut brûler en quelques minutes. ' +
+                  'Évitez le soleil entre 11 h et 16 h, couvrez-vous, portez un chapeau et des lunettes de soleil et appliquez un écran solaire.<br>' +
+                  'N’oubliez pas que le sable blanc et les autres surfaces brillantes réfléchissent les rayons UV et augmentent l’exposition à ces rayons.'],
+    //
+    solar_title          : 'Rayonnement solaire',
+    solar_currentMax     : 'Lecture maximale théorique courante',
+    solar_ofMax          : 'du maximum',
+    solar_maxToday       : 'Lecture maximale de la journée',
+    //
+    cloudbase_title      : 'Plafond nuageux',
+    cloudbase_popup_title: 'Plafond nuageux théorique',
+    cloudbase_popup_text : 'Le calcul est simple; 1000 pieds pour chaque différence de 4.4 degrés Fahrenheit<br>' +
+                           'entre la température et le point de rosée. A noter que cela donne simplement la<br>' +
+                           'hauteur théorique à laquelle des cumulus commenceront à se former, l\'air étant saturé.',
+
+    feet              : 'feet',
+    metres            : 'mètres',
+    miles             : 'miles',
+    n_miles           : 'miles.n',
+    km                : 'km',
+   //
+    lowest_info       : 'le plus bas',
+    highest_info      : 'le plus élevé',
+    lowestF_info      : 'la plus basse',  // for proper translation of feminine words
+    highestF_info     : 'la plus élevée', // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Augmentation très rapide',
+    RisingQuickly     : 'Augmentation rapide',
+    Rising            : 'Augmentation',
+    RisingSlowly      : 'Augmentation lente',
+    Steady            : 'Constante',
+    FallingSlowly     : 'Baisse lentement',
+    Falling           : 'Baisse',
+    FallingQuickly    : 'Baisse rapidement',
+    FallingVeryRapidly: 'Baisse très rapidement',
+    //
+    maximum_info      : 'maximum',
+    max_hour_info     : 'maximum par heure',
+    minimum_info      : 'minimum',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO'],
+    compass           : ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'],
+    months            : ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jui', 'Jul', 'Aoû', 'Sep', 'Oct', 'Nov', 'Déc']
+};
+
+//======================================================================================================================
+// Deutsch by RASter & wurzelmac (last workover: 2015 03 08)
+//======================================================================================================================
+LANG.DE = {
+    canvasnosupport: 'Ihr Browser hat keine HTML5 Canvas Unterstützung.<br>' +
+                      'Aktualisieren Sie Ihren Browser auf eine neuere Version, fast alle Browser unterstützen Canvas heutzutage, sogar der IE9!<br><br>' +
+                      'Sie werden auf eine \'Alte\' Gauge Seite umgeleitet...',
+    //
+    led_title         : 'Fernsensor: Status unbekannt',
+    led_title_ok      : 'Fernsensor: OK',
+    led_title_lost    : 'Fernsensor: Kontakt verloren!',
+    led_title_unknown : 'Fernsensor: Status unbekannt!',
+    led_title_offline : 'Die Wetterstation ist derzeit offline.',
+    //
+    weather           : 'Wetter',
+    latitude          : 'Breitengrad',
+    longitude         : 'Längengrad',
+    elevation         : 'Höhe',
+    //
+    statusStr         : 'Lade...',
+    StatusMsg         : 'Lade Daten...',
+    StatusHttp        : 'HTTP Anfrage fehlgeschlagen',
+    StatusRetry       : 'Wiederhole...',
+    StatusRetryIn     : 'Wiederhole in...',
+    StatusTimeout     : 'Zeitüberschreitung',
+    StatusPageLimit   : 'Automatisches Seitenupdate: Zeitlimit erreicht. Um fortzufahren auf die Status-LED klicken.',
+    //
+    StatusLastUpdate  : 'Letzte Aktualisierung vor',
+    StatusMinsAgo     : 'Minuten',
+    StatusHoursAgo    : 'Stunden',
+    StatusDaysAgo     : 'Tagen',
+    //
+    realtimeCorrupt   : 'Geladene Textdatei ist beschädigt! Wiederhole...',
+    //
+    timer             : 'Sekunden',
+    at                : 'um',
+    //
+    temp_title_out    : 'Temperatur',
+    temp_title_in     : 'Temp. Innen',
+    temp_out_info     : 'Außentemperatur',
+    temp_out_web      : 'Außen',
+    temp_in_info      : 'Innentemperatur',
+    temp_in_web       : 'Innen',
+    temp_trend_info   : 'Temperatur Trend',
+    //
+    dew_title         : 'Taupunkt',
+    dew_info          : 'Taupunkt',
+    dew_web           : 'Taupunkt',
+    apptemp_title     : 'Gefühlt',
+    apptemp_info      : 'Gefühlte Temperatur',
+    apptemp_web       : 'Gefühlt',
+    feel_title        : "Gefühlt wie",
+    feel_info         : "Gefühlte wie Temperatur",
+    feel_web          : "Gefühlt wie",
+    chill_title       : 'Windkühle',
+    chill_info        : 'Windkühle',
+    chill_web         : 'Windkühle',
+    heat_title        : 'Hitzeindex',
+    heat_info         : 'Hitzeindex',
+    heat_web          : 'Hitzeindex',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Regen',
+    rrate_title       : 'Regenmenge',
+    rrate_info        : 'Regenmenge',
+    LastRain_info     : 'Letzter Regen',
+    LastRainedT_info  : 'Heute um',
+    LastRainedY_info  : 'Gestern um',
+    //
+    hum_title_out     : 'Luftfeuchte',
+    hum_title_in      : 'Luftfeuchte In',
+    hum_out_info      : 'Luftfeuchte Außen',
+    hum_in_info       : 'Luftfeuchte Innen',
+    hum_out_web       : 'Außen',
+    hum_in_web        : 'Innen',
+    //
+    baro_title        : 'Luftdruck',
+    baro_info         : 'Barometrischer Luftdruck',
+    baro_trend_info   : 'Luftdruck Trend',
+    //
+    wind_title        : 'Windstärke ',
+    tenminavg_title   : 'Mittelwert Windstärke',
+    tenminavgwind_info: 'Mittelwert Windstärke (10 min)',
+    maxavgwind_info   : 'Höchster Mittelwert Windstärke',
+    tenmingust_info   : 'Windböe (10 min)',
+    maxgust_info      : 'Höchste Windböe',
+    latest_title      : 'Aktueller Wind',
+    latestwind_info   : 'Aktuelle Windstärke',
+    bearing_info      : 'Windrichtung',
+    latest_web        : 'Aktuell',
+    tenminavg_web     : 'Mittelwert',
+    dominant_bearing  : 'vorherrschende Windrichtung Heute',
+    calm              : 'ruhig',
+    windrose          : 'Windrose',
+    windruntoday      : 'Windmenge heute',
+    //
+    uv_title          : 'UV Index',
+    uv_levels         : ['keiner',
+                         'keine Gefahr',
+                         'kleines Risiko',
+                         'hohes Risiko',
+                         'sehr hohes Risiko',
+                         'extremes Risiko'],
+    uv_headlines: ['Kein messbarer UV Index',
+                   'Keine Gefahr für die durchschnittliche Person',
+                   'Kleines Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne',
+                   'Grosses Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne',
+                   'Sehr hohes Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne',
+                   'Extremes Risiko einer Schädigung durch ungeschützten Aufenthalt in der Sonne'],
+    uv_details: ['Es ist entweder Nacht oder ein sehr bewölkter Tag.',
+
+                  'Tragen Sie an hellen Tagen eine Sonnenbrille; verwenden Sie Sonnenschutzmittel<br>' +
+                  'wenn Sie besonders helle Haut haben oder wenn Schnee liegt welcher UV-Strahlung<br>' +
+                  'reflektiert.',
+
+                  'Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme mit Lichtschutzfaktor<br>' +
+                  '30 oder höher. Bedecken Sie den Körper mit Kleidung und tragen Sie einen Hut.<br>' +
+                  'Suchen Sie um die Mittagszeit, wenn die Sonne am stärksten ist, Schatten auf.',
+
+                  'Tragen Sie eine Sonnenbrille und verwenden Sie Sonnencreme mit Lichtschutzfaktor<br>' +
+                  '30 oder höher. Schützen Sie den Körper durch entsprechende Kleidung und einen<br>' +
+                  'breitkrempigen Hut. Begrenzen Sie den Aufenthalt in der Sonne zwei Stunden vor bis<br>' +
+                  'drei Stunden nach dem solaren Mittag (ca. 11:00 - 16:00 Uhr in Ländern mit<br>' +
+                  'Sommerzeit) auf ein Minimum.',
+
+                  'Benutzen Sie Sonnencreme, Lichtschutzfaktor 30 oder höher. Tragen Sie eine<br>' +
+                  'Sonnenbrille, T-Shirt und einen Hut. Bleiben Sie nicht zu lange in der Sonne.',
+
+                  'Treffen Sie alle Vorsichtsmaßnahmen: tragen Sie eine Sonnenbrille und benutzen Sie<br>' +
+                  'Sonnencreme, Lichtschutzfaktor 30 oder höher, bedecken Sie den Körper mit einem<br>' +
+                  'langärmeligen T-Shirt, tragen Sie lange Hosen und einen breiten Hut, meiden Sie die<br>' +
+                  'Sonne zwei Stunden vor bis drei Stunden nach dem solaren Mittag (ca. 11:00 - 16:00<br>' +
+                  'Uhr in Ländern mit Sommerzeit).'],
+    //
+    solar_title          : 'Sonnenstrahlung',
+    solar_currentMax     : 'Aktueller theoretischer maximaler Messwert',
+    solar_ofMax          : 'vom Maximum',
+    solar_maxToday       : 'Heutiger maximaler Messwert',
+    //
+    cloudbase_title      : 'Wolkenuntergrenze',
+    cloudbase_popup_title: 'Theoretische Wolkenuntergrenze',
+    cloudbase_popup_text : 'Die Berechnung ist einfach: 122 Meter für je 1,0 Grad Celsius Differenz zwischen<br>' +
+                           'Temperatur und Taupunkt. Beachte, dass dies nur die theoretische Höhe angibt,<br>' +
+                           'in der sich Cumulus Wolken formen, wenn die Luft gesättigt ist.',
+    feet              : 'Fuß',
+    metres            : 'Meter',
+    miles             : 'Meilen',
+    n_miles           : 'Seemeilen',
+    km                : 'km',
+    //
+    lowest_info       : 'Niedrigster',
+    highest_info      : 'Höchster',
+    lowestF_info      : 'Niedrigste',     // for proper translation of feminine words
+    highestF_info     : 'Höchste',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'sehr schnell steigend',
+    RisingQuickly     : 'schnell steigend',
+    Rising            : 'steigend',
+    RisingSlowly      : 'langsam steigend ',
+    Steady            : 'konstant',
+    FallingSlowly     : 'langsam fallend',
+    Falling           : 'fallend',
+    FallingQuickly    : 'schnell fallend',
+    FallingVeryRapidly: 'sehr schnell fallend',
+    //
+    maximum_info      : 'Maximum',
+    max_hour_info     : 'Max pro Stunde',
+    minimum_info      : 'Minimum',
+    //
+    coords            : ['N', 'NNO', 'NO', 'ONO', 'O', 'OSO', 'SO', 'SSO', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],
+    compass           : ['N', 'NO', 'O', 'SO', 'S', 'SW', 'W', 'NW'],
+    months            : ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez']
+};
+
+//======================================================================================================================
+// Nederlands (Dutch)
+//======================================================================================================================
+LANG.NL = {
+    canvasnosupport: 'Uw browser ondersteunt geen HTML5 Canvas .<br>' +
+                     'Gebruik een modernere browser of de laatste versie, bijna alle browsers ondersteunen Canvas nu, zelfs IE9!<br><br>' +
+                     'Je wordt naar de \'oude\' meters omgeleid ...',
+    //
+    led_title         : 'Buitensensor status onbekend',
+    led_title_ok      : 'Buitensensor OK',
+    led_title_lost    : 'Buitensensor kontakt verloren!',
+    led_title_unknown : 'Buitensensor status onbekend!',
+    led_title_offline : 'Het weerstation is momenteel offline.',
+    //
+    weather           : 'Weer',
+    latitude          : 'Breedtegraad',
+    longitude         : 'Lengtegraad',
+    elevation         : 'Hoogte',
+    //
+    statusStr         : 'Laden..',
+    StatusMsg         : 'Data laden...',
+    StatusHttp        : 'HTTP Aanvraag afgebroken',
+    StatusRetry       : 'Opnieuw...',
+    StatusRetryIn     : 'Opnieuw over..',
+    StatusTimeout     : 'Tijd voorbij',
+    StatusPageLimit   : 'Pagina auto-update limiet bereikt, pagina herladen om door te gaan',
+    //
+    StatusLastUpdate  : 'Laatste update',
+    StatusMinsAgo     : 'minuten geleden',
+    StatusHoursAgo    : 'uren geleden',
+    StatusDaysAgo     : 'dagen geleden',
+    //
+    realtimeCorrupt   : 'Data zijn fout! Opnieuw...',
+    //
+    timer             : 'Seconden',
+    at                : 'om',
+    //
+    temp_title_out    : 'Temperatuur',
+    temp_title_in     : 'Binnentemperatuur',
+    temp_out_info     : 'Buitentemperatuur',
+    temp_out_web      : 'Buiten',
+    temp_in_info      : 'Binnentemperatuur',
+    temp_in_web       : 'Binnen',
+    temp_trend_info   : 'Temperatuurtrend',
+    //
+    dew_title         : 'Dauwpunt',
+    dew_info          : 'Dauwpunt',
+    dew_web           : 'Dauwpunt',
+    apptemp_title     : 'Gevoel',
+    apptemp_info      : 'Gevoelstemperatuur',
+    apptemp_web       : 'Gevoel',
+    feel_title        : "Voelt als",
+    feel_info         : "Voelt als temperatuur",
+    feel_web          : "Voelt als",
+    chill_title       : "Wind Koude",
+    chill_info        : "Wind Koude",
+    chill_web         : "Wind Koude",
+    heat_title        : 'Hitteindex',
+    heat_info         : 'Hitteindex',
+    heat_web          : 'Hitteindex',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Regen',
+    rrate_title       : 'Regenhoeveelheid',
+    rrate_info        : 'Regenhoeveelheid',
+    LastRain_info     : 'Laatste regen',
+    LastRainedT_info  : 'Vandaag om',
+    LastRainedY_info  : 'Gisteren om',
+    //
+    hum_title_out     : 'Luchtvochtigheid',
+    hum_title_in      : 'Luchtvochtigheid binnen',
+    hum_out_info      : 'Luchtvochtigheid buiten',
+    hum_in_info       : 'Luchtvochtigheid binnen',
+    hum_out_web       : 'Buiten',
+    hum_in_web        : 'Binnen',
+    //
+    baro_title        : 'Luchtdruk',
+    baro_info         : 'Barometer luchtdruk',
+    baro_trend_info   : 'Barometer trend',
+    //
+    wind_title        : 'Wind ',
+    tenminavg_title   : 'Gemiddelde windsnelheid',
+    tenminavgwind_info: 'Gemiddelde windsnelheid (10 min)',
+    maxavgwind_info   : 'Hoogste gemiddelde windsnelheid',
+    tenmingust_info   : 'Wind (10 min)',
+    maxgust_info      : 'Zwaarste windvlagen',
+    latest_title      : 'Huidige',
+    latestwind_info   : 'Huidige windsnelheid',
+    bearing_info      : 'Windrichting',
+    latest_web        : 'Momenteel',
+    tenminavg_web     : 'Gemiddelde',
+    dominant_bearing  : 'Overheersende Windrichting',
+    calm              : 'Windstil',
+    windrose          : 'Windroos',
+    windruntoday      : 'Wind richting vandaag',
+    //
+    uv_title          : 'UV-Index',
+    uv_levels         : ['Geen',
+                         'Geen gevaar',
+                         'Weinig gevaar',
+                         'Hoog risico',
+                         'Zeer hoog risico',
+                         'Extreem risico'],
+    uv_headlines: ['Geen meetbare UV Index',
+                   'Geen gevaar voor de gewone mens',
+                   'Kleine kans op zonnebrand bij onbeschermde huid',
+                   'Hoog risico op zonnebrand bij onbeschermde huid',
+                   'Zeer hoog risico op zonnebrand bij onbeschermde huid',
+                   'Extreem risico op zonnebrand bij onbeschermde huid'],
+    uv_details: ['Het is nog steeds nacht of het is een zeer bewolkte dag.',
+
+                 'Draag een zonnebril bij heldere dagen, gebruik zonnecreme bij een sneeuwlaag,<br>' +
+                 'omdat die UV-straling terugkaatst, of bij zeer bleke huid.',
+
+                 'Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, draag beschermende kledij en<br>' +
+                 'een hoed en ga uit de zon tijdens de middaguren wanneer de zon op zijn hoogst staat.',
+
+                 'Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, smeer u goed in<br>' +
+                 'draag beschermende kledij met een breedgerande hoed, beperk uw tijd in de zon van twee uur voor<br>' +
+                 'tot drie uur na de middagzon (ongeveer van 11:00 uur tot 16:00 uur tijdens de zomertijd.',
+
+                 'Draag een zonnebril en gebruik creme met beschermingsfactor 30 of hoger, beschermende kledij en een hoed.<br>' +
+                 'Blijf niet te lang in de zon.',
+
+                 'Neem alle voorzorgen, waaronder: zonnebril, zonnecreme met beschermingsfactor 30 of meer,<br>' +
+                 'een t-shirt met lange mouwen, een broek en een breedgerande hoed, en<br>' +
+                 'vermijd de middagzon vanaf 11:00 uur tot 16:00 uur, tijdens de zomer.'],
+    //
+    solar_title          : 'Zonnestraling',
+    solar_currentMax     : 'Huidige theoretische maximale waarde',
+    solar_ofMax          : 'van maximum',
+    solar_maxToday       : 'Maximale  waarde vandaag',
+    //
+    cloudbase_title      : 'Wolkenbasis',
+    cloudbase_popup_title: 'Theoretische wolkenbasis',
+    cloudbase_popup_text : 'De berekening is ongecompliceerd; 1000 voet voor elke 4.4 graden Fahrenheit<br>' +
+                           'verschil tussen de temperatuur en dauwpunt. Let op dat dit eenvoudig<br>' +
+                           'de theoretische hoogte weergeeft wanneer Cumulus wolken zich zouden vormen, en de<br>' +
+                           'lucht verzadigd wordt',
+    feet              : 'feet',
+    metres            : 'meter',
+    miles             : 'mijl',
+    n_miles           : 'zeemijlen',
+    km                : 'km',
+    //
+    lowest_info       : 'Laagste',
+    highest_info      : 'Hoogste',
+    lowestF_info      : 'Laagste',     // for proper translation of feminine words
+    highestF_info     : 'Hoogste',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Zeer snel stijgend',
+    RisingQuickly     : 'Snel stijgend',
+    Rising            : 'Stijgend',
+    RisingSlowly      : 'Langzaam stijgend',
+    Steady            : 'Constant',
+    FallingSlowly     : 'Langzaam dalend',
+    Falling           : 'Dalend',
+    FallingQuickly    : 'Snel dalend',
+    FallingVeryRapidly: 'Zeer snel dalend',
+    //
+    maximum_info      : 'Maximum',
+    max_hour_info     : 'Max per uur',
+    minimum_info      : 'Minimum',
+    //
+    coords            : ['N', 'NNO', 'NO', 'ONO', 'O', 'OZO', 'ZO', 'ZZO', 'Z', 'ZZW', 'ZW', 'WZW', 'W', 'WNW', 'NW', 'NNW'],
+    compass           : ['N', 'NO', 'O', 'ZO', 'Z', 'ZW', 'W', 'NW'],
+    months            : ['Jan', 'Feb', 'Mrt', 'Apr', 'Mei', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+};
+
+//======================================================================================================================
+// Swedish
+//======================================================================================================================
+LANG.SE = {
+    canvasnosupport: 'Tyvärr... Ingen HTML5 Canvas support i din webläsare...<br>' +
+                      'Pröva att uppgradera din webläsare till en senare version!<br><br>' +
+                      'Styr om till en äldre sida med mätare...',
+    //
+    led_title         : 'Väderstationens status är okänd',
+    led_title_ok      : 'Väderstationen OK',
+    led_title_lost    : 'Har tappat kontakten med väderstationen!',
+    led_title_unknown : 'Väderstationens status är okänd!',
+    led_title_offline : 'Väderstationen är för närvarande ej nåbar.',
+    //
+    weather           : 'v&#228;der',
+    latitude          : 'Latitud',
+    longitude         : 'Longitud',
+    elevation         : 'Altitud',
+    //
+    statusStr         : 'Laddar...',
+    StatusMsg         : 'Laddar ned...',
+    StatusHttp        : 'HTTP-begäran misslyckades',
+    StatusRetry       : 'Försöker på nytt...',
+    StatusRetryIn     : 'Försök om...',
+    StatusTimeout     : 'Timed out',
+    StatusPageLimit   : 'Page auto-update limit reached, refresh your browser to continue',
+    //
+    StatusLastUpdate  : 'Senaste uppdatering för',
+    StatusMinsAgo     : 'minuter sedan',
+    StatusHoursAgo    : 'timmar sedan',
+    StatusDaysAgo     : 'dagar sedan',
+    //
+    realtimeCorrupt   : 'Den nedladdade filen är felaktig! Försöker på nytt...',
+    //
+    timer             : 'sekunder',
+    at                : 'vid',
+    //
+    temp_title_out    : 'Temperatur',
+    temp_title_in     : 'Innetemp',
+    temp_out_info     : 'Utetemp',
+    temp_out_web      : 'Ute',
+    temp_in_info      : 'Innetemp',
+    temp_in_web       : 'Inne',
+    temp_trend_info   : 'Trend - temp',
+    //
+    dew_title         : 'Daggpunkt',
+    dew_info          : 'Daggpunkt',
+    dew_web           : 'Daggpunkt',
+    apptemp_title     : 'Upplevd',
+    apptemp_info      : 'Upplevd (känns som) temperatur',
+    apptemp_web       : 'Upplevd',
+    feel_title        : "Feels Like",
+    feel_info         : "Feels Like temperatur",
+    feel_web          : "Feels Like",
+    chill_title       : 'Köldeffekt',
+    chill_info        : 'Köldeffekt',
+    chill_web         : 'Köldeffekt',
+    heat_title        : 'Värmeindex',
+    heat_info         : 'Värmeindex',
+    heat_web          : 'Värmeindex',
+    humdx_title       : 'Fuktindex',
+    humdx_info        : 'Fuktindex',
+    humdx_web         : 'Fuktindex',
+    //
+    rain_title        : 'Nederbörd',
+    rrate_title       : 'Nederbörd',
+    rrate_info        : 'Nederbördintensitet',
+    LastRain_info     : 'Senaste nederbörd',
+    LastRainedT_info  : 'Idag vid',
+    LastRainedY_info  : 'Igår vid',
+    //
+    hum_title_out     : 'Fukt. ute',
+    hum_title_in      : 'Fukt. inne',
+    hum_out_info      : 'Fukt. ute',
+    hum_in_info       : 'Fukt. inne',
+    hum_out_web       : 'Fukt. ute',
+    hum_in_web        : 'Fukt. inne',
+    //
+    baro_title        : 'Lufttryck',
+    baro_info         : 'Lufttryck',
+    baro_trend_info   : 'Trend - lufttryck',
+    //
+    wind_title        : 'Vind',
+    tenminavg_title   : 'Medelvind',
+    tenminavgwind_info: 'Medelvind (10 min)',
+    maxavgwind_info   : 'Max medelvind',
+    tenmingust_info   : 'Byvind (10 min)',
+    maxgust_info      : 'Max byvind',
+    latest_title      : 'Senaste vind',
+    latestwind_info   : 'Senaste vind',
+    bearing_info      : 'Riktning',
+    latest_web        : 'Senaste',
+    tenminavg_web     : 'Medel',
+    dominant_bearing  : 'Dominerande vindriktning',
+    calm              : 'lugn',
+    windrose          : 'Vindros',
+    windruntoday      : 'Vindsträcka',
+    //
+    uv_title          : 'UV Index',
+    uv_levels         : ['None',
+                 'Ingen fara',
+                 'Liten risk',
+                 'Hög risk',
+                 'Mycket hög risk',
+                 'Extrem risk'],
+    uv_headlines: ['No measurable UV Index',
+                    'Ingen fara för normalindividen',
+                    'Liten skaderisk vid oskyddad solexponering',
+                    'Hög skaderisk vid oskyddad solexponering',
+                    'Väldigt hög skaderisk vid oskyddad solexponering',
+                    'Extrem skaderisk vid oskyddad solexponering'],
+    uv_details: ['It is still night time or it is a very cloudy day.',
+
+                  'Använd solglasögon molnfria dagar, använd solskydd om det finns snö på marken,<br>' +
+                  'som reflekterar UV-strålningen, eller om du har omtålig hy.',
+
+                  'Använd solglasögon och solskyddsfaktor 30+, täck hud med klädsel och<br>' +
+                  'huvudbonad, sök skugga vid middagstid då solen är som intensivast.',
+
+                  'Använd solglasögon och solskyddsfaktor 30+, täck hud med solskyddande klädsel och<br>' +
+                  'bredbrättad huvudbonad, begränsa tiden i solen under två timmar före<br>' +
+                  'och tre timmar efter då solen står som högst (~11:00 till 16:00 under sommarperioden i<br>' +
+                  'områden med sommartid).',
+
+                  'Använd solskyddsfaktor 30+, skjorta, solglasögon och huvudbonad.<br>' +
+                  'Vistas inte utomhus onödigt mycket.',
+
+                  'Vidtag alla försiktighetsåtgärder: använd solglasögon och solskyddsfaktor 30+,<br>' +
+                  'täck kroppen med långärmad skjorta och långbyxor, använd bredbrättad huvudbonad,<br>' +
+                  'undvik solen under två timmar före och tre timmar efter då solen står som högst (~11:00 till<br>' +
+                  '16:00 under sommarperioden i områden med sommartid).'],
+    //
+    solar_title          : 'Solar Radiation',
+    solar_currentMax     : 'Current theoretical maximum reading',
+    solar_ofMax          : 'of maximum',
+    solar_maxToday       : 'Today\'s maximum reading',
+    //
+    cloudbase_title      : 'Molnbas',
+    cloudbase_popup_title: 'Teoretisk molnbas',
+    cloudbase_popup_text : 'Beräkningen är enkel; 1000 fot för varje 4.4 grader Fahrenheit<br>' +
+                           'skillnaden mellan temperaturen och daggpunkten. Observera att detta bara<br>' +
+                           'ger den teoretiska höjden där Cumulusmoln skulle börja bildas, när<br>' +
+                           'luften är mättad',
+    feet              : 'feet',
+    metres            : 'meter',
+    miles             : 'miles',
+    n_miles           : 'sjömil',
+    km                : 'km',
+    //
+    lowest_info       : 'Lägsta',
+    highest_info      : 'Högsta',
+    lowestF_info      : 'Lägsta',     // for proper translation of feminine words
+    highestF_info     : 'Högsta',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Stiger mycket snabbt',
+    RisingQuickly     : 'Stiger snabbt',
+    Rising            : 'Stigande',
+    RisingSlowly      : 'Stigande långsamt',
+    Steady            : 'Konstant',
+    FallingSlowly     : 'Faller långsamt',
+    Falling           : 'Fallande',
+    FallingQuickly    : 'Fallande snabbt',
+    FallingVeryRapidly: 'Fallande mycket snabbt',
+    //
+    maximum_info      : 'Max',
+    max_hour_info     : 'Max per timma',
+    minimum_info      : 'Min',
+    //
+    coords            : ['N', 'NNO', 'NO', 'ONO', 'O', 'OSO', 'SO', 'SSO', 'S', 'SSW', 'SW', 'WSW', 'W', 'WNW', 'NW', 'NNW'],
+    compass           : ['N', 'NO', 'O', 'SO', 'S', 'SW', 'W', 'NW'],
+    months            : ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+};
+
+//======================================================================================================================
+// Danish
+// ***INCOMPLETE***
+//======================================================================================================================
+LANG.DK = {
+    canvasnosupport: 'Din browser understøtter ikke HTML5 lærred...<br>' +
+                     'Opdatere din browser til en nyere version - næsten alle browsere understøter lærred nu - selv Internet Explorer 9!<br><br>' +
+                     'Du omdirigeres til vores gamle forside...',
+    //
+    led_title         : 'Status ukendt',
+    led_title_ok      : 'Status OK',
+    led_title_lost    : 'Ingen kontakt til vejrstationen!',
+    led_title_unknown : 'Status ukendt!',
+    led_title_offline : 'Vejrstationen er pt. offline.',
+    //
+    weather           : 'vejret',
+    latitude          : 'Breddegrad',
+    longitude         : 'Længdegrad',
+    elevation         : 'Højde over havet',
+    //
+    statusStr         : 'Henter...',
+    StatusMsg         : 'Downloader...',
+    StatusHttp        : 'HTTP forespørgsel fejlede',
+    StatusRetry       : 'Prøver igen...',
+    StatusRetryIn     : 'Prøver om...',
+    StatusTimeout     : 'Timed out',
+    StatusPageLimit   : 'Sidens grænse for opdateringer blev nået, opdater din browser for at fortsætte',
+    //
+    StatusLastUpdate  : 'Seneste opdatering',
+    StatusMinsAgo     : 'minutter siden',
+    StatusHoursAgo    : 'timer siden',
+    StatusDaysAgo     : 'dage siden',
+    //
+    realtimeCorrupt   : 'Fejl på vejrdatafilen - prøver igen...',
+    //
+    timer             : 'sekunder',
+    at                : 'kl.',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Temperatur',
+    temp_title_in     : 'Inde temp',
+    temp_out_info     : 'Ude temperatur',
+    temp_out_web      : 'Ude',
+    temp_in_info      : 'Inde temperatur',
+    temp_in_web       : 'Inde',
+    temp_trend_info   : 'Temperatur tendens',
+    //
+    dew_title         : 'Dugpunkt',
+    dew_info          : 'Dugpunkt',
+    dew_web           : 'Dugpunkt',
+    apptemp_title     : 'Komfort',
+    apptemp_info      : 'Komfort (føles som) temperatur',
+    apptemp_web       : 'Komfort',
+    feel_title        : "føles som",
+    feel_info         : "føles som temperatur",
+    feel_web          : "føles som",
+    chill_title       : 'Vindchill',
+    chill_info        : 'Vindchill',
+    chill_web         : 'Vindchill',
+    heat_title        : 'Hedeindex',
+    heat_info         : 'Hedeindex',
+    heat_web          : 'Hedeindex',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Regn',
+    rrate_title       : 'Regnrate',
+    rrate_info        : 'Regnrate',
+    LastRain_info     : 'Seneste regn',
+    LastRainedT_info  : 'I dag kl.',
+    LastRainedY_info  : 'I går kl.',
+    //
+    hum_title_out     : 'Fugtighed',
+    hum_title_in      : 'Inde fugt',
+    hum_out_info      : 'Ude fugtighed',
+    hum_in_info       : 'Inde fugtighed',
+    hum_out_web       : 'Ude',
+    hum_in_web        : 'Inde',
+    //
+    baro_title        : 'Barometer',
+    baro_info         : 'Barometer',
+    baro_trend_info   : 'Barometer tendens',
+    //
+    wind_title        : 'Vindhastighed',
+    tenminavg_title   : 'Gennemsnitlig vindhastighed',
+    tenminavgwind_info: 'Gennemsnitlig vindhastighed (10 min)',
+    maxavgwind_info   : 'Maximum gennemsnitlig vindhastighed',
+    tenmingust_info   : 'Vindstød (10 min)',
+    maxgust_info      : 'Maximum vindstød',
+    latest_title      : 'Seneste vind',
+    latestwind_info   : 'Seneste vindhastighed',
+    bearing_info      : 'Retning',
+    latest_web        : 'Seneste',
+    tenminavg_web     : 'Gennemsnit',
+    dominant_bearing  : 'Dominant wind today',
+    calm              : 'calm',
+    windrose          : 'Wind Rose',
+    windruntoday      : 'Wind run today',
+    //
+    uv_title          : 'UV index',
+    uv_levels         : ['Ingen',
+                         'Ingen fare',
+                         'Lille risiko',
+                         'Høj risiko',
+                         'Meget høj risiko',
+                         'Ekstrem risko'],
+    uv_headlines: ['Ingen målbar UV index',
+                   'Ingen fare for personskade',
+                   'Lille risiko for skade hvis der ikke bruges solbeskyttelse',
+                   'Stor risiko for skade, hvis der ikke bruges solbeskyttelse',
+                   'Meget stor risiko for skade, hvis der ikke bruges solbeskyttelse',
+                   'Ekstrem risiko for skade, hvis der ikke bruges solbeskyttelse'],
+    uv_details: ['Det er stadig mørkt - eller en meget skyet dag.',
+
+                 'Brug solbriller på lyse dage, brug solcreme hvis der er sne på jorden,<br/>' +
+                 'som reflekterer UV stråling, eller hvis du har en særlig sart hud.',
+
+                 'Brug solbriller og solcreme faktor 30+, tildæk kroppen med tøj og<br/>' +
+                 'hat, og søg skygge mellem 12 og 14, hvor solen er mest intens.',
+
+                 'Brug solbriller og solcreme faktor 30+, tildæk kroppen med solbeskyttende<br/>' +
+                 'tøjh og brug en bredskygget hat. Søg skygge mellem 11 og 15<br/>',
+
+                 'Brug solcreme faktor 30+, trøje, solbriller og en hat.<br/>' +
+                 'Ophold dig ikke i solen i lang tid.',
+
+                 'Tag alle forholdsregler: Brug solbriller og solcreme faktor 30+,<br/>' +
+                 'tildæk korppen med langærmet trøje og bukser. Brug en meget stor hat og<br/>' +
+                 'undgå solen mellem 11 og 15'],
+    //
+    solar_title          : 'Solstråling',
+    solar_currentMax     : 'Max. muligt',
+    solar_ofMax          : 'af maximum',
+    solar_maxToday       : 'Maximum i dag',
+    //
+    cloudbase_title      : 'skyhøjde basen',
+    cloudbase_popup_title: 'Theoretical cloud base',
+    cloudbase_popup_text : 'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>' +
+                           'difference between the temperature and the dew point. Note that this simply<br>' +
+                           'gives the theoretical height at which Cumulus clouds would begin to form, the<br>' +
+                           'air being saturated',
+    feet              : 'feet',
+    metres            : 'meters',
+    miles             : 'miles',
+    n_miles           : 'sømil',
+    km                : 'km',
+    //
+    lowest_info       : 'Laveste',
+    highest_info      : 'Højeste',
+    lowestF_info      : 'Laveste',     // for proper translation of feminine words
+    highestF_info     : 'Højeste',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Meget hurtigt stigende',
+    RisingQuickly     : 'Hurtigt stigende',
+    Rising            : 'Stigende',
+    RisingSlowly      : 'Langsomt stigende',
+    Steady            : 'Stabil',
+    FallingSlowly     : 'Langsomt faldende',
+    Falling           : 'Faldende',
+    FallingQuickly    : 'Hurtigt faldende',
+    FallingVeryRapidly: 'Meget hurtigt faldende',
+   //
+    maximum_info      : 'Maximum',
+    max_hour_info     : 'Max pr. time',
+    minimum_info      : 'Minimum',
+    //
+    coords            : ['N', 'NNØ', 'NØ', 'ØNØ', 'Ø', 'ØSØ', 'SØ', 'SSØ', 'S', 'SSV', 'SV', 'VSV', 'V', 'VNV', 'NV', 'NNV'],
+    compass           : ['N', 'NØ', 'Ø', 'SØ', 'S', 'SV', 'V', 'NV'],
+    months            : ['Jan', 'Feb', 'Mar', 'Apr', 'MaJ', 'Jun', 'Jul', 'Aug', 'Sep', 'OKt', 'Nov', 'Dec']
+};
+
+//======================================================================================================================
+// Finnish
+//======================================================================================================================
+LANG.FI = {
+    canvasnosupport: 'Selaimesi ei tue HTML5 Canvas tekniikkaa... Sorry...<br>' +
+                     'Päivitä selain uudempaan versioon - melkein kaikki tukevat Canvas tekniikkaa, myös IE9!<br><br>' +
+                     'Siirrytään sivulle ilman HMTL5/Canvas mittareita...',
+    //
+    led_title         : 'Päivityksen tila tuntematon',
+    led_title_ok      : 'Päivitys OK',
+    led_title_lost    : 'Tietoliikenneyhteys poikki!',
+    led_title_unknown : 'Päivityksen tila tuntematon!',
+    led_title_offline : 'Sääasema on offline tilassa.',
+    //
+    weather           : 'sää',
+    latitude          : 'Latitude',
+    longitude         : 'Longitude',
+    elevation         : 'Korkeus merenpinnasta',
+    //
+    statusStr         : 'Ladataan...',
+    StatusMsg         : 'Ladataan...',
+    StatusHttp        : 'HTTP pyyntö epäonnistui',
+    StatusRetry       : 'Yritetään uudelleen...',
+    StatusRetryIn     : 'Uusi yritys...',
+    StatusTimeout     : 'Aikakatkaistiin',
+    StatusPageLimit   : 'Sivun automaattisten latausten lukumäärä on saavutettu, päivitä selaimen näkymä jatkaaksesi!',
+    //
+    StatusLastUpdate  : 'Päivitetty',
+    StatusMinsAgo     : 'minuuttia sitten',
+    StatusHoursAgo    : 'tuntia sitten',
+    StatusDaysAgo     : 'päivää sitten',
+    //
+    realtimeCorrupt   : 'Tekstitiedoston lataus epäonnistui! Yritetään uudelleen...',
+    //
+    timer             : 'sekuntia',
+    at                : 'klo.',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Lämpötila',
+    temp_title_in     : 'Sisälämpötila',
+    temp_out_info     : 'Ulkolämpötila',
+    temp_out_web      : 'Ulko',
+    temp_in_info      : 'Sisälämpötila',
+    temp_in_web       : 'Sisä',
+    temp_trend_info   : 'Lämpötilan muutos',
+    //
+    dew_title         : 'Kastepiste',
+    dew_info          : 'Kastepiste',
+    dew_web           : 'Kastepiste',
+    apptemp_title     : 'Näennäinen',
+    apptemp_info      : 'Näennäinen (tuntuu-kuin) lämpötila',
+    apptemp_web       : 'Näennäinen',
+    feel_title        : "Feels Like",
+    feel_info         : "Feels Like Temperature",
+    feel_web          : "Feels Like",
+    chill_title       : 'Hyytävyys',
+    chill_info        : 'Hyytävyys',
+    chill_web         : 'Hyytävyys',
+    heat_title        : 'Tukaluus',
+    heat_info         : 'Tukaluus',
+    heat_web          : 'Tukaluus',
+    humdx_title       : 'Kosteusindeksi',
+    humdx_info        : 'Kosteusindeksi',
+    humdx_web         : 'Kosteusindeksi',
+    //
+    rain_title        : 'Sademäärä',
+    rrate_title       : 'Voimakkuus',
+    rrate_info        : 'Sateen voimakkuus',
+    LastRain_info     : 'Viimeksi satanut',
+    LastRainedT_info  : 'Tänään',
+    LastRainedY_info  : 'Eilen',
+    //
+    hum_title_out     : 'Ilmankosteus',
+    hum_title_in      : 'Sisäilmankosteus',
+    hum_out_info      : 'Ilmankosteus',
+    hum_in_info       : 'Sisäilmankosteus',
+    hum_out_web       : 'Ulko',
+    hum_in_web        : 'Sisä',
+    //
+    baro_title        : 'Ilmanpaine',
+    baro_info         : 'Ilmanpaine',
+    baro_trend_info   : 'Ilmanpaineen muutos',
+    //
+    wind_title        : 'Tuulen nopeus',
+    tenminavg_title   : 'Keskimääräinen tuulen nopeus',
+    tenminavgwind_info: 'Keskimääräinen tuulen nopeus (10 min)',
+    maxavgwind_info   : 'Korkein keskituulen nopeus',
+    tenmingust_info   : 'Puuskatuuli (10 min)',
+    maxgust_info      : 'Kovin tuulen puuska',
+    latest_title      : 'Viimeisin tuuli',
+    latestwind_info   : 'Viimeisin tuulen nopeus',
+    bearing_info      : 'Suunta',
+    latest_web        : 'Viimeisin',
+    tenminavg_web     : 'Keskimäärin',
+    dominant_bearing  : 'Hallitseva tuulen suunta tänään',
+    calm              : 'tyyntä',
+    windrose          : 'Tuuliruusu',
+    windruntoday      : 'Tuulen matka tänään',
+    //
+    uv_title          : 'UV Indeksi',
+    uv_levels         : ['n/a',
+                         'Heikko',
+                         'Kohtalainen',
+                         'Voimakas',
+                         'Hyvin voimakas',
+                         'Äärimmäisen voimakas'],
+    uv_headlines: ['Ei mitattavissa olevaa UV säteilyä',
+                   'Ei vaaraa normaali henkilölle',
+                   'Vähäinen vaara suojaamattomassa auringonpaisteessa',
+                   'Vaara suojaamattomassa auringonpaisteessa',
+                   'Suuri vaara suojaamattomassa auringonpaisteessa',
+                   'Äärimmäisen suuri vaara suojaamattomassa auringonpaisteessa'],
+    uv_details: ['On yöaika tai erittäin pilvistä.',
+
+                 'Käytä aurinkolaseja. Käytä aurinkosuojavoidetta jos maassa on lunta tai jos ihosi on erityisen herkkä.',
+
+                 'Käytä aurinkolaseja ja aurinkosuojavoidetta. Suojaa iho vaatteilla ja päähineellä <br>' +
+                 'ja pysyttele varjoisassa ympäristössä keskipäivän tienoilla, kun auringon paiste on voimakkaimmillaan.',
+
+                 'Käytä aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vähintään 15. <br>' +
+                 'Suojaa iho vaatteilla ja leveälierisellä päähineellä. Vähennä ulkonaoloa kello 11:n ja 16:n välillä.',
+
+                 'Käytä aurinkolaseja ja aurinkosuojavoidetta, jonka suojakerroin on vähintään 15. <br>' +
+                 'Suojaa iho vaatteilla ja leveälierisellä päähineellä. Vähennä ulkonaoloa kello 11:n ja 16:n välillä.',
+
+                 'Varaudu säteilyyn kaikin mahdollisin tavoin, käytä aurinkolaseja ja aurinkovoidetta, <br>' +
+                 'suojaa vartalo pitkähihaisella paidalla ja pitkillä housuilla, käytä leveälieristä päähinettä <br>' +
+                 'ja vältä aurinkoa kello 11:n ja 16:n välillä.'],
+    //
+    solar_title          : 'Auringon säteilyteho',
+    solar_currentMax     : 'Teorettinen maksimisäteily nyt',
+    solar_ofMax          : 'maksimista',
+    solar_maxToday       : 'Maksimisäteily tänään',
+    //
+    cloudbase_title      : 'Pilvien korkeus',
+    cloudbase_popup_title: 'Teoreettinen pilvien korkeus',
+    cloudbase_popup_text : 'Laskentatapa on yksinkertainen; 1000 jalkaa jokaista 4.4 Fahrenheit aste-<br><br>' +
+                           'eroa lämpötilan ja kastepisteen välillä. Huomaa että tämä yksinkertaisesti<br>' +
+                           'antaa vain teoreettisen korkeuden jossa kumpupilviä alkaisi muodostua,<br>' +
+                           'ilman ollessa kylläinen',
+    feet              : 'feet',
+    metres            : 'metriä',
+    miles             : 'miles',   // ???
+    n_miles           : 'n.miles', // ???
+    km                : 'km',
+    //
+    lowest_info       : 'Alin',
+    highest_info      : 'Korkein',
+    lowestF_info      : 'Alin',     // for proper translation of feminine words
+    highestF_info     : 'Korkein',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Nousee erittäin nopeasti',
+    RisingQuickly     : 'Nousee nopeasti',
+    Rising            : 'Nousee',
+    RisingSlowly      : 'Nousee hitaasti',
+    Steady            : 'Vakaa',
+    FallingSlowly     : 'Laskee hitaasti',
+    Falling           : 'Laskee',
+    FallingQuickly    : 'Laskee nopeasti',
+    FallingVeryRapidly: 'Laskee erittäin nopeasti',
+    //
+    maximum_info      : 'Korkein',
+    max_hour_info     : 'Suurin sademäärä tunnissa',
+    minimum_info      : 'Alin',
+    //
+    coords            : ['P', 'PKO', 'KO', 'IKO', 'I', 'IKA', 'KA', 'EKA', 'E', 'ELO', 'LO', 'LLO', 'L', 'LLU', 'LU', 'PLU'],
+    compass           : ['P', 'KO', 'I', 'KA', 'E', 'LO', 'L', 'LU'],
+    months            : ['Tammikuuta', 'Helmikuuta', 'Maaliskuuta', 'Huhtikuuta', 'Toukokuuta', 'Kesäkuuta',
+                         'Heinäkuuta', 'Elokuuta', 'Syyskuuta', 'Lokakuuta', 'Marraskuuta', 'Joulukuuta']
+};
+
+//======================================================================================================================
+// Norwegian Single Lang
+//======================================================================================================================
+LANG.NO = {
+    canvasnosupport: 'Ingen HTML5 Canvas-støtte i nettleseren din ... Beklager ...<br>' +
+                     'Prøv å oppgradere nettleseren til en nyere versjon - nesten alle nettlesere støtter Canvas nå, selv IE9!<br><br>' +
+                     'Omdirigerer deg til den \'gamle\' målersiden ...',
+    //
+    led_title         : 'Fjernsensor: Status ukjent',
+    led_title_ok      : 'Fjernsensor: OK',
+    led_title_lost    : 'Fjernsensor: Mistet kontakt!',
+    led_title_unknown : 'Fjernsensor: Status ukjent!',
+    led_title_offline : 'Værstasjonen er ikke aktiv.',
+    //
+    weather           : 'vær',
+    latitude          : 'Breddegrad',
+    longitude         : 'Lengdegrad',
+    elevation         : 'Høyde',
+    //
+    statusStr         : 'Laster...',
+    StatusMsg         : 'Laster ned...',
+    StatusHttp        : 'HTTP forespørsel mislyktes',
+    StatusRetry       : 'Prøver igjen...',
+    StatusRetryIn     : 'Prøver igjen om...',
+    StatusTimeout     : 'Tidsavbrutt',
+    StatusPageLimit   : 'Sidens automatiske oppdatering er nådd, du må oppdatere (F5) siden for å fortsette',
+    //
+    StatusLastUpdate  : 'Siste oppdatering',
+    StatusMinsAgo     : 'minutter siden',
+    StatusHoursAgo    : 'timer siden',
+    StatusDaysAgo     : 'dager siden',
+    //
+    realtimeCorrupt   : 'Tekstfilnedlasting avbrutt! Prøver på nytt ...',
+    //
+    timer             : 'sekunder',
+    at                : 'klokken',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Utetemperatur',
+    temp_title_in     : 'Innetemperatur',
+    temp_out_info     : 'Utetemperatur',
+    temp_out_web      : 'Utendørs',
+    temp_in_info      : 'Innetemperatur',
+    temp_in_web       : 'Innendørs',
+    temp_trend_info   : 'Temperaturtrend',
+    //
+    dew_title         : 'Duggpunkt',
+    dew_info          : 'Duggpunkt',
+    dew_web           : 'Duggpunkt',
+    apptemp_title     : 'Følt',
+    apptemp_info      : 'Følt temperatur',
+    apptemp_web       : 'Følt',
+    feel_title        : "Følt temp.",
+    feel_info         : "Følt temperatur",
+    feel_web          : "Følt temp.",
+    chill_title       : 'Vindfaktor',
+    chill_info        : 'Vindfaktor',
+    chill_web         : 'Vindfaktor',
+    heat_title        : 'Varmeindeks',
+    heat_info         : 'Varmeindeks',
+    heat_web          : 'Varmeindeks',
+    humdx_title       : 'Luftfuktighet',
+    humdx_info        : 'Luftfuktighet',
+    humdx_web         : 'Luftfuktighet',
+    //
+    rain_title        : 'Nedbør',
+    rrate_title       : 'Nedbør',
+    rrate_info        : 'Nedbørsrate',
+    LastRain_info     : 'Sist nedbør',
+    LastRainedT_info  : 'I dag klokken',
+    LastRainedY_info  : 'I går klokken',
+    //
+    hum_title_out     : 'Luftfuktighet',
+    hum_title_in      : 'Luftfuktighet inne',
+    hum_out_info      : 'Luftfuktighet ute',
+    hum_in_info       : 'Luftfuktighet inne',
+    hum_out_web       : 'Utendørs',
+    hum_in_web        : 'Innendørs',
+    //
+    baro_title        : 'Trykk',
+    baro_info         : 'Barometrisk trykk',
+    baro_trend_info   : 'Trykktrend',
+    //
+    wind_title        : 'Vindhastighet',
+    tenminavg_title   : 'Snitt vindhastighet',
+    tenminavgwind_info: 'Snitt vindhastighet (10 min)',
+    maxavgwind_info   : 'Maks. snitt vindhastighet',
+    tenmingust_info   : 'Vindkast (10 min)',
+    maxgust_info      : 'Høyeste vindkast',
+    latest_title      : 'Siste vind',
+    latestwind_info   : 'Siste vindhastighet',
+    bearing_info      : 'Retning',
+    latest_web        : 'Siste',
+    tenminavg_web     : 'Snitt',
+    dominant_bearing  : 'Dominerende vind i dag',
+    calm              : 'stille',
+    windrose          : 'Vindrose',
+    windruntoday      : 'Vindstrekning i dag',
+    //
+    uv_title          : 'UV Indeks',
+    uv_levels         : ['Ingen',
+                         'Ingen fare',
+                         'Liten risiko',
+                         'Høy risiko',
+                         'Veldig høy risiko',
+                         'Ekstrem risiko'],
+    uv_headlines: ['Ingen målbar UV Indeks',
+                   'Ingen fare for en \'gjennomsnittlig\' person',
+                   'Liten risiko for skade fra ubeskyttet soling',
+                   'Høy risiko for skade fra ubeskyttet soling',
+                   'Svært høy risiko for skade fra ubeskyttet soling',
+                   'Ekstrem risiko for skade fra ubeskyttet soling'],
+    uv_details: ['Det er fortsatt natt - eller det er en veldig overskyet dag.',
+
+                 'Bruk solbriller på lyse dager, bruk solkrem hvis det er snø på bakken,<br>' +
+                 'som reflekterer UV-stråling - hvis du ikke har spesielt god hud.',
+
+                 'Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>' +
+                 'en lue, søk skygge midt på dagen når solen er mest intens.',
+
+                 'Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>' +
+                 'klær og en skyggelue, reduser tid i solen fra to timer før<br>' +
+                 'til tre timer etter at solen er på det høyeste (ca 11:00 til 16:00 om sommeren i<br>' +
+                 '(soner som bruker sommertid).',
+
+                 'Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>' +
+                 'Ikke være ute i solen for lenge.',
+
+                 'Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>' +
+                 'dekk kroppen med en langermet skjorte og bukse, bruk skyggelue og<br>' +
+                 'unngå solen fra to timer før til tre timer etter at solen er på det høyeste (ca 11:00<br>' +
+                 'til 16:00 om sommeren i soner som bruker sommertid).'],
+    //
+    solar_title          : 'Solstråling',
+    solar_currentMax     : 'Nåværende teoretiske maksimale måling',
+    solar_ofMax          : 'av maksimalt',
+    solar_maxToday       : 'Dagens maksimale måling',
+    //
+    cloudbase_title      : 'Skybase',
+    cloudbase_popup_title: 'Teoretisk skybase',
+    cloudbase_popup_text : 'Beregningen er en enkel en; 1000 feet for hver 4,4 grader Fahrenheit<br>' +
+                           'forskjell mellom temperaturen og duggpunktet. Legg merke til at dette<br>' +
+                           'gir bare den teoretiske høyden hvor cumulusskyer ville begynne å dannes, når<br>' +
+                           'luften er mettet.',
+    feet              : 'feet',
+    metres            : 'meter',
+    miles             : 'miles',
+    n_miles           : 'n.mil',
+    km                : 'km',
+    //
+    lowest_info       : 'Lavest',
+    highest_info      : 'Høyest',
+    lowestF_info      : 'Lavest',     // for proper translation of feminine words
+    highestF_info     : 'Høyest',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Øker veldig raskt',
+    RisingQuickly     : 'Øker raskt',
+    Rising            : 'Øker',
+    RisingSlowly      : 'Øker sakte',
+    Steady            : 'Jevn',
+    FallingSlowly     : 'Faller sakte',
+    Falling           : 'Faller',
+    FallingQuickly    : 'Faller raskt',
+    FallingVeryRapidly: 'Faller veldig raskt',
+    //
+    maximum_info      : 'Maks.',
+    max_hour_info     : 'Maks. pr. time',
+    minimum_info      : 'Min.',
+    //
+    coords            : ['N', 'NNØ', 'NØ', 'ØNØ', 'Ø', 'ØSØ', 'SØ', 'SSØ', 'S', 'SSV', 'SV', 'VSV', 'V', 'VNV', 'NV', 'NNV'],
+    compass           : ['N', 'NØ', 'Ø', 'SØ', 'S', 'SV', 'V', 'NV'],
+    months            : ['Jan', 'Feb', 'Mar', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des']
+};
+
+//======================================================================================================================
+// Norwegian NB Lang
+//======================================================================================================================
+LANG.NB = {
+    canvasnosupport:
+            "Ingen HTML5 Canvas-støtte i nettleseren din ... Beklager ...<br>Prøv å oppgradere nettleseren til en nyere versjon - nesten alle nettlesere støtter Canvas nå, selv IE9!<br><br>Omdirigerer deg til den 'gamle' målersiden ...",
+//
+    led_title         : "Fjernsensor: Status ukjent",
+    led_title_ok      : "Fjernsensor: OK",
+    led_title_lost    : "Fjernsensor: Mistet kontakt!",
+    led_title_unknown : "Fjernsensor: Status ukjent!",
+    led_title_offline : "Værstasjonen er ikke aktiv.",
+//
+    weather           : "vær",
+    latitude          : "Breddegrad",
+    longitude         : "Lengdegrad",
+    elevation         : "Høyde",
+//
+    statusStr         : "Laster...",
+    StatusMsg         : "Laster ned...",
+    StatusHttp        : "HTTP forespørsel mislyktes",
+    StatusRetry       : "Prøver igjen...",
+    StatusRetryIn     : "Prøver igjen om...",
+    StatusTimeout     : "Tidsavbrutt",
+    StatusPageLimit   : "Automatisk oppdatering er tidsbegrenset, du må oppdatere (F5) siden for å fortsette",
+//
+    StatusLastUpdate  : "Siste oppdatering",
+    StatusMinsAgo     : "minutter siden",
+    StatusHoursAgo    : "timer siden",
+    StatusDaysAgo     : "dager siden",
+//
+    realtimeCorrupt   : "Tekstfilnedlasting avbrutt! Prøver på nytt ...",
+//
+    timer             : "sekunder",
+    at                : "klokken",
+//
+    temp_title_out    : "Temperatur",
+    temp_title_in     : "Innetemperatur",
+    temp_out_info     : "Utetemperatur",
+    temp_out_web      : "Ute",
+    temp_in_info      : "Innetemperatur",
+    temp_in_web       : "Inne",
+    temp_trend_info   : "Temperaturtrend",
+//
+    dew_title         : "Doggpunkt",
+    dew_info          : "Doggpunkt",
+    dew_web           : "Doggpunkt",
+    apptemp_title     : "Opplevd",
+    apptemp_info      : "Opplevd temperatur",
+    apptemp_web       : "Opplevd",
+    feel_title        : "Følt temp.",
+    feel_info         : "Følt temperatur",
+    feel_web          : "Følt temp.",
+    chill_title       : "Vindfaktor",
+    chill_info        : "Vindfaktor",
+    chill_web         : "Vindfaktor",
+    heat_title        : "Varmeindeks",
+    heat_info         : "Varmeindeks",
+    heat_web          : "Varmeindeks",
+    humdx_title       : "Humidex",
+    humdx_info        : "Humidex",
+    humdx_web         : "Humidex",
+//
+    rain_title        : "Nedbør",
+    rrate_title       : "Nedbør",
+    rrate_info        : "Nedbørsrate",
+    LastRain_info     : "Sist nedbør",
+    LastRainedT_info  : "I dag klokken",
+    LastRainedY_info  : "I går klokken",
+//
+    hum_title_out     : "Luftfuktighet",
+    hum_title_in      : "Luftfuktighet inne",
+    hum_out_info      : "Luftfuktighet ute",
+    hum_in_info       : "Luftfuktighet inne",
+    hum_out_web       : "Utendørs",
+    hum_in_web        : "Innendørs",
+//
+    baro_title        : "Trykk",
+    baro_info         : "Barometrisk trykk",
+    baro_trend_info   : "Trykktrend",
+//
+    wind_title        : "Vindstyrke",
+    tenminavg_title   : "Snitt vindstyrke",
+    tenminavgwind_info: "Snitt vindstyrke (10 min)",
+    maxavgwind_info   : "Maks. snitt vindstyrke",
+    tenmingust_info   : "Vindkast (10 min)",
+    maxgust_info      : "Kraftigste vindkast",
+    latest_title      : "Siste vind",
+    latestwind_info   : "Siste vind",
+    bearing_info      : "Retning",
+    latest_web        : "Siste",
+    tenminavg_web     : "Snitt",
+    dominant_bearing  : "Dominerende vind i dag",
+    calm              : "stille",
+    windrose          : "Vindrose",
+    windruntoday      : "Vindstrekning i dag",
+//
+    uv_title          : "UV Indeks",
+    uv_levels         : ["Ingen", "Ingen fare", "Liten risiko", "Høy risiko", "Veldig høy risiko", "Ekstrem risiko"],
+    uv_headlines: [
+        "Ingen målbar UV Indeks",
+        "Ingen fare for en 'gjennomsnittlig' person",
+        "Liten risiko for skade fra ubeskyttet soling",
+        "Høy risiko for skade fra ubeskyttet soling",
+        "Svært høy risiko for skade fra ubeskyttet soling",
+        "Ekstrem risiko for skade fra ubeskyttet soling",
+    ],
+    uv_details: [
+        "Det er fortsatt natt - eller det er en veldig overskyet dag.",
+        "Bruk solbriller på lyse dager, bruk solkrem hvis det er snø på bakken,<br>som reflekterer UV-stråling - hvis du ikke har spesielt god hud.",
+        "Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>en lue, søk skygge midt på dagen når solen er mest intens.",
+        "Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>klær og en skyggelue, reduser tid i solen fra to timer før<br>til tre timer etter at solen er på det høyeste (ca 11:00 til 16:00 om sommeren i<br>(soner som bruker sommertid).",
+        "Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>Ikke være ute i solen for lenge.",
+        "Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>dekk kroppen med en langermet skjorte og bukse, bruk skyggelue og<br>unngå solen fra to timer før til tre timer etter at solen er på det høyeste (ca 11:00<br>til 16:00 om sommeren i soner som bruker sommertid).",
+    ],
+//
+    solar_title       : "Solstråling",
+    solar_currentMax  : "Nåværende teoretiske maksimale måling",
+    solar_ofMax       : "av maksimalt",
+    solar_maxToday    : "Dagens maksimale måling",
+//
+    cloudbase_title   : "Skyhøyde",
+    cloudbase_popup_title: "Teoretisk skyhøyde",
+    cloudbase_popup_text:
+        "Beregningen er en enkel en: 300 meter for hver 2,5 grader Celsius<br>forskjell mellom temperaturen og duggpunktet. Legg merke til at dette<br>gir bare den teoretiske høyden hvor cumulusskyer ville begynne å dannes, <br>når luften er mettet.",
+    feet              : "fot",
+    metres            : "meter",
+    miles             : "mil",
+    n_miles           : "n.mil",
+    km                : "km",
+//
+    lowest_info       : "Lavest",
+    highest_info      : "Høyest",
+    lowestF_info      : "Lavest",
+    highestF_info     : "Høyest",
+    RisingVeryRapidly : "Øker veldig raskt",
+    RisingQuickly     : "Øker raskt",
+    Rising            : "Øker",
+    RisingSlowly      : "Øker sakte",
+    Steady            : "Jevn",
+    FallingSlowly     : "Faller sakte",
+    Falling           : "Faller",
+    FallingQuickly    : "Faller raskt",
+    FallingVeryRapidly: "Faller veldig raskt",
+//
+    maximum_info      : "Maks.",
+    max_hour_info     : "Maks. pr. time",
+    minimum_info      : "Min.",
+//
+    coords            : ["N", "NNØ", "NØ", "ØNØ", "Ø", "ØSØ", "SØ", "SSØ", "S", "SSV", "SV", "VSV", "V", "VNV", "NV", "NNV"],
+    compass           : ["N", "NØ", "Ø", "SØ", "S", "SV", "V", "NV"],
+    months            : ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"],
+};
+
+//======================================================================================================================
+// Norwegian NN Lang
+//======================================================================================================================
+LANG.NN = {
+    canvasnosupport:
+        "Nettlesar stør ikkje HTML5 Canvas-støtte ... Orsak ...<br>Oppgradere nettlesaren til ein nyare versjon - nesten alle nettlsarar støtter Canvas nå, sjølv IE9!<br><br>Omdirigerer deg til den 'gamle' sida for Instrument ...",
+//
+    led_title         : "Fjernsensor: Status ukjend",
+    led_title_ok      : "Fjernsensor: OK",
+    led_title_lost    : "Fjernsensor: Mista kontakt!",
+    led_title_unknown : "Fjernsensor: Status ukjend!",
+    led_title_offline : "Vêrstasjonen er ikkje aktiv.",
+//
+    weather           : "vêr",
+    latitude          : "Breidegrad",
+    longitude         : "Lengdegrad",
+    elevation         : "Høgde",
+//
+    statusStr         : "Lastar...",
+    StatusMsg         : "Lastar ned...",
+    StatusHttp        : "HTTP forespurnad mislykkast",
+    StatusRetry       : "Prøver igjen...",
+    StatusRetryIn     : "Prøver igjen om...",
+    StatusTimeout     : "Tidsavbrot",
+    StatusPageLimit   : "Automatisk oppdatering er tidsbegrensa, du må oppdatere (F5) sida for å fortsette",
+//
+    StatusLastUpdate  : "Siste oppdatering",
+    StatusMinsAgo     : "minutter sidan",
+    StatusHoursAgo    : "timar sidan",
+    StatusDaysAgo     : "dagar sidan",
+//
+    realtimeCorrupt   : "Tekstfilnedlasting avbrote! Prøver på nytt ...",
+//
+    timer             : "sekundar",
+    at                : "klokka",
+//
+    temp_title_out    : "Temperatur",
+    temp_title_in     : "Innetemperatur",
+    temp_out_info     : "Utetemperatur",
+    temp_out_web      : "Ute",
+    temp_in_info      : "Innetemperatur",
+    temp_in_web       : "Inne",
+    temp_trend_info   : "Temperaturtrend",
+//
+    dew_title         : "Doggpunkt",
+    dew_info          : "Doggpunkt",
+    dew_web           : "Doggpunkt",
+    apptemp_title     : "Opplevd",
+    apptemp_info      : "Opplevd temperatur",
+    apptemp_web       : "Opplevd",
+    feel_title        : "Følt temp.",
+    feel_info         : "Følt temp.",
+    feel_web          : "Følt temp.",
+    chill_title       : "Vindfaktor",
+    chill_info        : "Vindfaktor",
+    chill_web         : "Vindfaktor",
+    heat_title        : "Varmeindeks",
+    heat_info         : "Varmeindeks",
+    heat_web          : "Varmeindeks",
+    humdx_title       : "Humidex",
+    humdx_info        : "Humidex",
+    humdx_web         : "Humidex",
+//
+    rain_title        : "Nedbør",
+    rrate_title       : "Nedbør",
+    rrate_info        : "Nedbørsrate",
+    LastRain_info     : "Siste nedbør",
+    LastRainedT_info  : "I dag klokka",
+    LastRainedY_info  : "I går klokka",
+//
+    hum_title_out     : "Luftfukt",
+    hum_title_in      : "Luftfukt inne",
+    hum_out_info      : "Luftfukt ute",
+    hum_in_info       : "Luftfukt inne",
+    hum_out_web       : "Ute",
+    hum_in_web        : "Inne",
+//
+    baro_title        : "Trykk",
+    baro_info         : "Barometrisk trykk",
+    baro_trend_info   : "Trykktrend",
+    wind_title        : "Vindstyrke",
+    tenminavg_title   : "Snitt vindstyrke",
+    tenminavgwind_info: "Snitt vindstyrke (10 min)",
+    maxavgwind_info   : "Maks. snitt vindstyrke",
+    tenmingust_info   : "Vindkast (10 min)",
+    maxgust_info      : "Kraftigaste vindkast",
+    latest_title      : "Siste vind",
+    latestwind_info   : "Siste vindstyrke",
+    bearing_info      : "Retning",
+    latest_web        : "Siste",
+    tenminavg_web     : "Snitt",
+    dominant_bearing  : "Dominerande vind i dag",
+    calm              : "stille",
+    windrose          : "Vindrose",
+    windruntoday      : "Vindstrekning i dag",
+//
+    uv_title          : "UV Indeks",
+    uv_levels         : ["Inga", "Inga fare", "Liten risiko", "Høg risiko", "Veldig høg risiko", "Ekstrem risiko"],
+    uv_headlines: [
+        "Ingen målbar UV Indeks",
+        "Inga fare for ein 'gjennomsnittleg' person",
+        "Liten risiko for skade frå ubeskytta soling",
+        "Høg risiko for skade frå ubeskyttet soling",
+        "Mykje høg risiko for skade frå ubeskytta soling",
+        "Ekstrem risiko for skade frå ubeskytta soling",
+    ],
+    uv_details: [
+        "Det er fortsatt natt - eller det er ein mykje overskya dag.",
+        "Bruk solbriller på lyse dagar, bruk solkrem dersom det er snø på bakken,<br>som reflekterer UV-stråling - om du ikkje har spesiell god hud.",
+        "Bruk solbriller og SPF30 + solkrem, dekk kroppen med klær og<br>ein lue, søk skygge midt på dagen når solen er mest intens.",
+        "Bruk solbriller og SPF30 + solkrem, dekk kroppen med solbeskyttende<br>klær og ein skyggelue, reduser tid i sola frå to timer før<br>til tre timar etter at sola er på det høgaste (ca 11:00 til 16:00 om sommeren i<br>(soner som bruker sommertid).",
+        "Bruk SPF30 + solkrem, en skjorte, solbriller og solhatt.<br>Ikke være ute i solen for lenge.",
+        "Ta alle forholdsregler, inkludert: bruk av solbriller samt bruk SPF30 + solkrem,<br>dekk kroppen med ein langermet skjorte og bukse, bruk skyggelue og<br>unngå sola frå to timer før til tre timer etter at sola er på det høyeste (ca 11:00<br>til 16:00 om sommaren i soner som bruker sommartid).",
+    ],
+//
+    solar_title       : "Solstråling",
+    solar_currentMax  : "Noverande teoretiske maksimale måling",
+    solar_ofMax       : "av maksimalt",
+    solar_maxToday    : "Dagens maksimale måling",
+//
+    cloudbase_title   : "Skyhøgda",
+    cloudbase_popup_title: "Teoretisk skyhøgd",
+    cloudbase_popup_text:
+        "Berekninga er enkel: 300 meter for kvar 2,5 gradar Celsius<br>skilnad mellom temperaturen og doggpunktet. Ver merksam at dette<br>berre gjev den teoretiske høgda der cumulusskyar vert danna <br>når lufta er metta.",
+    feet              : "fot",
+    metres            : "meter",
+    miles             : "mil",
+    n_miles           : "n.mil",
+    km                : "km",
+//
+    lowest_info       : "Lågast",
+    highest_info      : "Høgast",
+    lowestF_info      : "Lågast",
+    highestF_info     : "Høgast",
+//
+    RisingVeryRapidly : "Aukar veldig raskt",
+    RisingQuickly     : "Aukar raskt",
+    Rising            : "Aukar",
+    RisingSlowly      : "Aukar sakte",
+    Steady            : "Jamn",
+    FallingSlowly     : "Fell sakte",
+    Falling           : "Fell",
+    FallingQuickly    : "Fell raskt",
+    FallingVeryRapidly: "Fell veldig raskt",
+//
+    maximum_info      : "Maks.",
+    max_hour_info     : "Maks. pr. time",
+    minimum_info      : "Min.",
+//
+    coords            : ["N", "NNA", "NA", "ANA", "A", "ASA", "SA", "SSA", "S", "SSV", "SV", "VSV", "V", "VNV", "NV", "NNV"],
+    compass           : ["N", "NA", "A", "SA", "S", "SV", "V", "NV"],
+    months            : ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Des"],
+};
+
+//======================================================================================================================
+// Italian
+//======================================================================================================================
+LANG.IT = {
+    canvasnosupport: 'HTML5 Canvas non supportato dal tuo browser... Spiacente...<br>' +
+                     'Prova ad aggiornare il tuo browser ad una versione pi&egrave; recente - quasi tutti i ' +
+                     'browser supportano Canvas adesso, eccetto IE9!<br><br>' +
+                     'Ti sto reindirizzando ad una pagina dei calibri precedente...',
+    //
+    led_title         : 'Sensori: stato sconosciuto',
+    led_title_ok      : 'Sensori: comumicazione OK',
+    led_title_lost    : 'Sensori: comunicazione non OK',
+    led_title_unknown : 'Sensori: stato sconosciuto',
+    led_title_offline : 'Stazione meteo temporaneamente OFFLINE',
+    //
+    weather           : 'meteo',
+    latitude          : 'Latitudine',
+    longitude         : 'Longitudine',
+    elevation         : 'Altezza',
+    //
+    statusStr         : 'Caricamento...',
+    StatusMsg         : 'Downloading...',
+    StatusHttp        : 'Richiesta HTTP Fallita',
+    StatusRetry       : 'Sto riprovando...',
+    StatusRetryIn     : 'Riprovo in...',
+    StatusTimeout     : 'Timed out',
+    StatusPageLimit   : 'Raggiunto limite auto-aggiornamento pagina, aggiorna la pagina per continuare',
+    //
+    StatusLastUpdate  : 'Ultimo aggiornamento',
+    StatusMinsAgo     : 'minuti fa',
+    StatusHoursAgo    : 'ore fa',
+    StatusDaysAgo     : 'giorni fa',
+    //
+    realtimeCorrupt   : 'File di testo scaricato corrotto! Sto riprovando...',
+    //
+    timer             : 'secondi',
+    at                : 'alle',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    //
+    temp_title_out    : 'Temp. est.',
+    temp_title_in     : 'Temp. int.',
+    temp_out_info     : 'Temp. esterna',
+    temp_out_web      : 'Esterna',
+    temp_in_info      : 'Temp. interna',
+    temp_in_web       : 'Interna',
+    temp_trend_info   : 'Variaz. temp.',
+    //
+    dew_title         : 'Dew Point',
+    dew_info          : 'Dew Point',
+    dew_web           : 'Dew Point',
+    apptemp_title     : 'T. apparen.',
+    apptemp_info      : 'Temp. apparente',
+    apptemp_web       : 'Temp. apparente',
+    feel_title        : "Percepita",
+    feel_info         : "Temp. Percepita",
+    feel_web          : "Temp. Percepita",
+    chill_title       : 'Wind Chill',
+    chill_info        : 'Wind Chill',
+    chill_web         : 'Wind Chill',
+    heat_title        : 'Ind. calor.',
+    heat_info         : 'Indice di calore',
+    heat_web          : 'Indice di calore',
+    humdx_title       : 'Ind. umid.',
+    humdx_info        : 'Indice di umidità',
+    humdx_web         : 'Indice di umidità',
+    //
+    rain_title        : 'Precipitaz.',
+    rrate_title       : 'Rain Rate',
+    rrate_info        : 'Rateo precipitaz.',
+    LastRain_info     : 'Ultime precipit.',
+    LastRainedT_info  : 'Oggi alle',
+    LastRainedY_info  : 'Ieri alle',
+    //
+    hum_title_out     : 'Umidità',
+    hum_title_in      : 'Umid. int.',
+    hum_out_info      : 'Umid. esterna',
+    hum_in_info       : 'Umid. interna',
+    hum_out_web       : 'Esterna',
+    hum_in_web        : 'Interna',
+    //
+    baro_title        : 'Pressione',
+    baro_info         : 'Pressione barometrica',
+    baro_trend_info   : 'Variaz. press.',
+    //
+    wind_title        : 'Vel. vento',
+    tenminavg_title   : 'Vel. media',
+    tenminavgwind_info: 'Vel. media vento (10 min. media)',
+    maxavgwind_info   : 'Vel. max. vento (10 min. media)',
+    tenmingust_info   : 'Raffica max. (ultimi 10 min.)',
+    maxgust_info      : 'Raffica max.',
+    latest_title      : 'Ult. mis.',
+    latestwind_info   : 'Ultima vel. misurata',
+    bearing_info      : 'Direzione',
+    latest_web        : 'Ultima direz.',
+    tenminavg_web     : 'Direz. media',
+    dominant_bearing  : 'Vento dominante oggi',
+    calm              : 'calmo',
+    windrose          : 'Direz. dominante',
+    windruntoday      : 'Wind run odierno',
+    //
+    uv_title          : 'Indice UV',
+    uv_levels         : ['Nessuna',
+                         'Nessun pericolo',
+                         'Rischio basso',
+                         'Rischio alto',
+                         'Rischio molto alto',
+                         'Rischio estremo'],
+    uv_headlines: ['Indice UV non misurabile',
+                   'Nessun pericolo per la maggior parte delle persone',
+                   'Lieve pericolo di scottatura da una esposizione al sole non adeguatamente protetta',
+                   'Alto rischio di scottature da una esposizione al sole non adeguatamente protetta',
+                   'Rischio molto alto di scottature da una esposizione al sole non adeguatamente protetta',
+                   'Rischio estremo di scottature da una esposizione al sole non adeguatamente protetta'],
+    uv_details: ['E\' ancora notte o è molto nuvoloso.',
+
+                 'Indossa occhiali da sole nei giorni con molta luce; usa lenti da sole con neve al suolo,<br>' +
+                 'che potrebbe riflettere radiazioni UV, o se hai pelle particolarmente chiara.',
+
+                 'Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, mantieni i vestiti ed indossa<br>' +
+                 'un cappello, riparati all\'ombra durante le ore centrali quando il sole è più intenso.',
+
+                 'Indossa occhiali da sole ed utilizza protezioni solari SPF 30+, proteggi il corpo indossando vestiti chiari<br>' +
+                 'e un cappello a tesa larga, riduci inoltre l\'esposizione al sole da due ore prima<br>' +
+                 'a tre ore dopo mezzogiorno (approssimativamente dalle 11:00 alle 16:00 durante l\'estate nelle<br>' +
+                 'zone che osservano l\'ora legale).',
+
+                 'Utilizza protezioni solari SPF 30+, una t-shirt, occhiali da sole, ed un cappello.<br>' +
+                 'Non stare al sole troppo a lungo.',
+
+                 'Prendi tutte le precauzioni, incluso: occhiali da sole, utilizzo protezioni solari SPF 30+,<br>' +
+                 'proteggi il corpo con una t-shirt a maniche lunghe e pantaloni, indossa un cappello con tesa, ed<br>' +
+                 'evita il sole da due ore prima a tre ore dopo mezzogiorno (approssimativamente dalle 11:00<br>' +
+                 'alle 16:00 durante l\'estate nelle zone che osservano l\'ora legale).'],
+    //
+    solar_title          : 'Radiazione solare',
+    solar_currentMax     : 'Attuale massima lettura teorica',
+    solar_ofMax          : 'del massimo',
+    solar_maxToday       : 'Lettura massima odierna',
+    //
+    cloudbase_title      : 'Base nuvola',
+    cloudbase_popup_title: 'base nuvola teorica',
+    cloudbase_popup_text : 'Il calcolo è semplice; 1000 piedi per ogni 4,4 gradi Fahrenheit <br>' +
+                           'differenza tra la temperatura e il punto di rugiada. Si noti che questo semplicemente <br> ' +
+                           'dà l\'altezza teorica a cui Cumulus nuvole avrebbero cominciato a formare, <br>' +
+                           'perché l\'aria essere satura',
+    feet              : 'piedi',
+    metres            : 'metri',
+    miles             : 'miglia',
+    n_miles           : 'miglia n.',
+    km                : 'km',
+    //
+    lowest_info       : 'Minimo',
+    highest_info      : 'Massimo',
+    lowestF_info      : 'Minima',      // for proper translation of feminine words
+    highestF_info     : 'Massima',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'In crescita molto rapida',
+    RisingQuickly     : 'In crescita rapida',
+    Rising            : 'In crescita',
+    RisingSlowly      : 'In crescita lenta',
+    Steady            : 'Costante',
+    FallingSlowly     : 'In lento calo',
+    Falling           : 'In calo',
+    FallingQuickly    : 'In veloce calo',
+    FallingVeryRapidly: 'In calo molto rapido',
+    //
+    maximum_info      : 'Massimo',
+    max_hour_info     : 'Max. per ora',
+    minimum_info      : 'Minimo',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'SSO', 'SO', 'OSO', 'O', 'ONO', 'NO', 'NNO'],
+    compass           : ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'],
+    months            : ['Gen', 'Feb', 'Mar', 'Apr', 'Mag', 'Giu', 'Lug', 'Ago', 'Set', 'Ott', 'Nov', 'Dic']
+};
+
+//======================================================================================================================
+// Spanish
+// ***INCOMPLETE***
+//======================================================================================================================
+LANG.ES = {
+    canvasnosupport: 'No hay soporte para HTML5 en su navegador ... Lo siento ...<br>' +
+                     'Trate de actualizar su navegador a una versión más reciente - casi todos los navegadores ' +
+                     'son compatibles con él ahora, incluso IE9!<br><br>' +
+                     'Redirigir a la antigua página de medidores ...',
+    //
+    led_title         : 'Sensor remoto en estado desconocido',
+    led_title_ok      : 'Sensor remoto funcionando correctamente',
+    led_title_lost    : 'Contacto perdido con el sensor remoto',
+    led_title_unknown : 'Sensor remoto en estado desconocido',
+    led_title_offline : 'La estación meteorológica no está conectada',
+    //
+    weather           : 'estado del tiempo',
+    latitude          : 'Latitud',
+    longitude         : 'Longitud',
+    elevation         : 'Elevación',
+    //
+    statusStr         : 'Cargando ...',
+    StatusMsg         : 'Recibiendo ...',
+    StatusHttp        : 'Error en petición HTTP',
+    StatusRetry       : 'Volviendo a probar ...',
+    StatusRetryIn     : 'Reintentando ...',
+    StatusTimeout     : 'Tiempo excedido',
+    StatusPageLimit   : 'Se ha alcanzado el limite de tiempo de actualizacion automatica, recargue la pagina para continuar',
+    //
+    StatusLastUpdate  : 'Ultima actualización a las',
+    StatusMinsAgo     : 'minutos',
+    StatusHoursAgo    : 'horas',
+    StatusDaysAgo     : 'días',
+    //
+    realtimeCorrupt   : 'Archivo dañado! Reintentando ...',
+    //
+    timer             : 'Segundos',
+    at                : 'a las',
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Temperatura',
+    temp_title_in     : 'Temp. interior',
+    temp_out_info     : 'Temperatura exterior',
+    temp_out_web      : 'Exterior',
+    temp_in_info      : 'Temperatura interior',
+    temp_in_web       : 'Interior',
+    temp_trend_info   : 'Tendencia',
+    //
+    dew_title         : 'Rocío',
+    dew_info          : 'Temperatura de rocío',
+    dew_web           : 'Rocío',
+    apptemp_title     : 'Temp. aparente',
+    apptemp_info      : 'Temperatura aparente',
+    apptemp_web       : 'Temperatura aparente',
+    feel_title        : "Feels Like",
+    feel_info         : "Temperatura Feels Like",
+    feel_web          : "Feels Like",
+    chill_title       : 'Windchill',
+    chill_info        : 'Windchill',
+    chill_web         : 'Windchill',
+    heat_title        : 'Indice de calor',
+    heat_info         : 'Indice de calor',
+    heat_web          : 'Indice de calor',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Precipitación',
+    rrate_title       : 'Intensidad de lluvia',
+    rrate_info        : 'Intensidad de lluvia',
+    LastRain_info     : 'Llovió por última vez',
+    LastRainedT_info  : 'Hoy a las',
+    LastRainedY_info  : 'Ayer a las',
+    //
+    hum_title_out     : 'Humedad',
+    hum_title_in      : 'Humedad interior',
+    hum_out_info      : 'Humedad Exterior',
+    hum_in_info       : 'Humedad interior',
+    hum_out_web       : 'Exterior',
+    hum_in_web        : 'Interior',
+    //
+    baro_title        : 'Presión',
+    baro_info         : 'Presión',
+    baro_trend_info   : 'Tendencia de presión',
+    //
+    wind_title        : 'Velocidad Viento',
+    tenminavg_title   : 'Velocidad media actual',
+    tenminavgwind_info: 'Velocidad media actual (10 min)',
+    maxavgwind_info   : 'Velocidad media máxima',
+    tenmingust_info   : 'Rácha (10 min)',
+    maxgust_info      : 'Racha máxima',
+    latest_title      : 'Viento actual',
+    latestwind_info   : 'Última lectura de viento',
+    bearing_info      : 'Dirección',
+    latest_web        : 'Actual',
+    tenminavg_web     : 'Media',
+    dominant_bearing  : 'Viento dominante hoy',
+    calm              : 'calma',
+    windrose          : 'Rosa de los Vientos',
+    windruntoday      : 'Recorrido del viento hoy',
+    //
+    uv_title          : 'Indice UV',
+    uv_levels         : ['Nulo',
+                         'Sin riesgo',
+                         'Riesgo bajo',
+                         'Riesgo alto',
+                         'Riesgo muy alto',
+                         'Riesgo extremo'],
+    uv_headlines: ['Indice UV no medible',
+                   'Sin riesgo para la población media',
+                   'Riesgo bajo de quemadura por exposición al sol sin protección',
+                   'Riesgo alto de quemadura por exposición al sol sin protección',
+                   'Riesgo muy alto de quemadura por exposición al sol sin protección',
+                   'Riesgo extremo de quemadura por exposición al sol sin protección'],
+    uv_details: ['Es aun de noche o el día está muy nublado.',
+
+                 'Use gafas de sol en días soleados; use protección solar si hay nieve en el suelo,<br>' +
+                 'que refleja la radiación UV, o si tiene la piel particularmente sensible.',
+
+                 'Use gafas de sol y protector solar factor 30 o superior, cubra el cuerpo con ropa y<br>' +
+                 'una gorra, y busque zonas de sombra al mediodía cuando el sol es más intenso.',
+
+                 'Use gafas de sol y protección solar factor 30 o superior, cubra el cuerpo con ropas que protejan del sol<br>' +
+                 'y sombreros anchos, y reduzca el tiempo al sol desde dos horas antes hasta<br>' +
+                 'tres horas después del mediodía solar (aproximadamente desde las 11:00 hasta las 16:00 en verano).',
+
+                 'Use protección solar factor 30 o superior, camisa, gafas de sol, y gorra.<br>' +
+                 'No permanezca al sol durante mucho tiempo.',
+
+                 'Tome todas las precauciones, incluyendo: usar gafas de sol y protección solar factor 30 o superior,<br>' +
+                 'cubrir el cuerpo con camisas de manga larga y pantalones, llevar sombreros de ala ancha, y<br>' +
+                 'evitar el sol desde dos horas antes hasta tres horas después del mediodía solar<br>' +
+                 '(aproximadamente desde las 11:00 hasta las 16:00 PM en verano).'],
+    //
+    solar_title          : 'Radiación solar',
+    solar_currentMax     : 'Máximo teórico en este momento',
+    solar_ofMax          : 'del máximo teórico',
+    solar_maxToday       : 'Valor máximo real hoy',
+    //
+    cloudbase_title      : 'base de las nubes',
+    cloudbase_popup_title: 'Theoretical cloud base',
+    cloudbase_popup_text : 'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>' +
+                           'difference between the temperature and the dew point. Note that this simply<br>' +
+                           'gives the theoretical height at which Cumulus clouds would begin to form, the<br>' +
+                           'air being saturated',
+    feet              : 'feet',
+    metres            : 'metros',
+    miles             : 'millas',
+    n_miles           : 'millas n.',
+    km                : 'km',
+    //
+    lowest_info       : 'Mínima',
+    highest_info      : 'Máxima',
+    lowestF_info      : 'Mínima',
+    highestF_info     : 'Máxima',
+    //
+    RisingVeryRapidly : 'Subiendo muy rápidamente',
+    RisingQuickly     : 'Subiendo rápidamente',
+    Rising            : 'Subiendo',
+    RisingSlowly      : 'Subiendo lentamente',
+    Steady            : 'Estable',
+    FallingSlowly     : 'Bajando lentamente',
+    Falling           : 'Bajando',
+    FallingQuickly    : 'Bajando rápidamente',
+    FallingVeryRapidly: 'Bajando muy rápidamente',
+    //
+    maximum_info      : 'Máxima',
+    max_hour_info     : 'Máxima por hora',
+    minimum_info      : 'Mínima',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'OSO', 'O', 'OSO', 'O', 'ONO', 'NO', 'NNO', 'ONO'],
+    compass           : ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'],
+    months            : ['enero', 'febrero', 'marzo', 'abril', 'mayo', 'junio', 'julio', 'agosto', 'septiembre', 'octubre', 'noviembre', 'diciembre']
+};
+
+//======================================================================================================================
+// Catalan
+// ***INCOMPLETE***
+//======================================================================================================================
+LANG.CT = {
+    canvasnosupport: 'No hi ha suport per HTML5 en el seu navegador ... Ho sento ...<br>' +
+                     'Intenta actualitzar el vostre navegador a una versió més recent - gairebé tots els navegadors ' +
+                     'són compatibles amb HTML5 ara, fins i tot IE9!<br><br>' +
+                     'Redirigir a una \'vella\' pàgina de mesuradors ...',
+    //
+    led_title         : 'Estat del sensor remot desconegut',
+    led_title_ok      : 'Sensor remot correcte',
+    led_title_lost    : 'Perdut contacte amb el sensor remot',
+    led_title_unknown : 'Estat del sensor remot desconegut ',
+    led_title_offline : 'L\'estació meteorològica està fora de línea',
+    //
+    weather           : 'El Temps',
+    latitude          : 'Latitud',
+    longitude         : 'Longuitud',
+    elevation         : 'Elevació',
+    //
+    statusStr         : 'Carregant ...',
+    StatusMsg         : 'Descàrrega de dades ...',
+    StatusHttp        : 'Petició HTTP Error',
+    StatusRetry       : 'Tornant a provar ...',
+    StatusRetryIn     : 'Tornant a provar en ..',
+    StatusTimeout     : 'Temps d\'espera esgotat',
+    StatusPageLimit   : 'La autoactualització de la pàgina ha arribat al límit, actualitza el teu navegador per a continuar',
+    //
+    StatusLastUpdate  : 'Última actualització',
+    StatusMinsAgo     : 'minuts',
+    StatusHoursAgo    : 'hores',
+    StatusDaysAgo     : 'dies',
+    //
+    realtimeCorrupt   : 'Descàrrega de l\'arxiu de text corrupte! reintentant ...',
+    //
+    timer             : 'segons',
+    at                : 'a les ',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Temperatura',
+    temp_title_in     : '°T Interior',
+    temp_out_info     : 'Temp exterior',
+    temp_out_web      : 'Exterior',
+    temp_in_info      : 'Temp interior',
+    temp_in_web       : 'Interior',
+    temp_trend_info   : 'Tendència',
+    //
+    dew_title         : 'Rosada',
+    dew_info          : 'Punt de rosada',
+    dew_web           : 'Punt de rosada',
+    apptemp_title     : 'Temp aparent',
+    apptemp_info      : 'Temperatura aparent',
+    apptemp_web       : 'Aparent',
+    feel_title        : "Feels Like",
+    feel_info         : "Temperatura Feels Like",
+    feel_web          : "Feels Like",
+    chill_title       : '°T sensació',
+    chill_info        : '°T sensació',
+    chill_web         : '°T sensació',
+    heat_title        : 'Índex de calor',
+    heat_info         : 'Índex de calor',
+    heat_web          : 'Índex de calor',
+    humdx_title       : '°T xafogor',
+    humdx_info        : '°T xafogor',
+    humdx_web         : '°T xafogor',
+    //
+    rain_title        : 'Pluja',
+    rrate_title       : 'Intensitat de pluja',
+    rrate_info        : 'Intensitat de pluja',
+    LastRain_info     : 'Últim dia de pluja',
+    LastRainedT_info  : 'Avui a les',
+    LastRainedY_info  : 'Ahir a les',
+    //
+    hum_title_out     : 'Humitat Exterior',
+    hum_title_in      : 'Humitat Interior',
+    hum_out_info      : 'Humitat Exterior',
+    hum_in_info       : 'Humitat Interior',
+    hum_out_web       : 'Exterior',
+    hum_in_web        : 'Interior',
+    //
+    baro_title        : 'Pressió',
+    baro_info         : 'Pressió',
+    baro_trend_info   : 'Tendència',
+    //
+    wind_title        : 'Velocitat del Vent',
+    tenminavg_title   : 'Velocitat mitjana del vent',
+    tenminavgwind_info: ' Vel. del Vent (promig 10\')',
+    maxavgwind_info   : 'Vent Màxim (promig 10\')',
+    tenmingust_info   : 'Ràfega màxima (últims 10 min)',
+    maxgust_info      : 'Ràfega màxima',
+    latest_title      : 'Direcció del vent',
+    latestwind_info   : 'Últimes velocitat del vent',
+    bearing_info      : 'última',
+    latest_web        : 'Darrer',
+    tenminavg_web     : 'Mitjana',
+    dominant_bearing  : 'Vent dominant avui',
+    calm              : 'calma',
+    windrose          : 'Rosa dels Vents',
+    windruntoday      : 'Recorregut del vent avui',
+    //
+    uv_title          : 'Index UV',
+    uv_levels         : ['Cap',
+                 'Sense perill',
+                 'Risc mínim',
+                 'Risc alt',
+                 'Risc molt alt',
+                 'Risc extrem'],
+    uv_headlines: ['Index UV no mesurable',
+                    'Sense perill per a la mitjana de les persones',
+                    'Risc baix de lesions per exposició al sol sense protecció',
+                    'Risc alt de lesions per exposició al sol sense protecció',
+                    'Risc molt alt de lesions per exposició al sol sense protecció',
+                    'Risc extrem de lesions per exposició al sol sense protecció'],
+    uv_details: ['Encara és de nit o és un dia molt tapat.',
+
+                 'Utilitza ulleres de sol en dies clars; feu servir protecció solar si hi ha neu al terra,<br>' +
+                 'que reflecteix la radiació UV, o si té la pell particularment clara.',
+
+                 'Utilitzar ulleres de sol i protecció solar SPF 30+, cobrir el cos amb roba i<br>' +
+                 'barret, busqui ombra per migdia quan el sol és més intens.',
+
+                 'Utilitzi ulleres de sol i protecció solar SPF 30+, cobriu el cos amb roba<br>' +
+                 'i un barret, reduiu l\'exposició al sol de dos<br>' +
+                 'a tres hores abans del migdia solar (normalment de 11:00 AM a 4:00 PM durant l\'estiu en <br>' +
+                 'zones que fan servir l\'horari d\'estiu).',
+
+                 'Utilitzar protecció solar SPF 30+, una camisa, ulleres de sol i barret.<br>' +
+                 'No estar al sol durant llargs períodes de temps.',
+
+                 'Prengui totes les precaucions, incloent: utilitzar ulleres de sol i protecció solar SPF 30+,<br>' +
+                 'cobrir el cos amb camises de màniga llarga i pantalons llargs, utilitzar un barret ampli, i<br>' +
+                 'evitar el sol a partir de dues hores abans o tres hores després del migdia solar (aprox. de 11:00 AM<br>' +
+                 'a 4:00 PM durant l\'estiu en zones que fan servir l\'horari d\'estiu).'],
+    //
+    solar_title          : 'Radiació Solar',
+    solar_currentMax     : 'Màxima lectura teòrica actual',
+    solar_ofMax          : 'del màxim',
+    solar_maxToday       : 'Lectura màxima d\'avui',
+    //
+    cloudbase_title      : 'base dels núvols',
+    cloudbase_popup_title: 'Theoretical cloud base',
+    cloudbase_popup_text : 'The calculation is a simple one; 1000 feet for every 4.4 degrees Fahrenheit<br>' +
+                           'difference between the temperature and the dew point. Note that this simply<br>' +
+                           'gives the theoretical height at which Cumulus clouds would begin to form, the<br>' +
+                           'air being saturated',
+    feet              : 'feet',
+    metres            : 'metres',
+    miles             : 'milles',
+    n_miles           : 'milles n.',
+    km                : 'km',
+    //
+    lowest_info       : 'Mínima',
+    highest_info      : 'Màxima',
+    lowestF_info      : 'Mínima',
+    highestF_info     : 'Màxima',
+    //
+    RisingVeryRapidly : 'Pujant molt ràpidament',
+    RisingQuickly     : 'Pujant ràpidament',
+    Rising            : 'Pujant',
+    RisingSlowly      : 'Pujant lentament',
+    Steady            : 'Estable',
+    FallingSlowly     : 'Baixant lentament',
+    Falling           : 'Baixant',
+    FallingQuickly    : 'Baixant ràpidament',
+    FallingVeryRapidly: 'Baixant molt ràpidament',
+    //
+    maximum_info      : 'Màxim',
+    max_hour_info     : 'Pluja horària màxima',
+    minimum_info      : 'Mínim',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'WSW', 'W', 'WSW', 'W', 'WNW', 'NW', 'NNW', 'WNW'],
+    compass           : ['N', 'NE', 'E', 'ES', 'S', 'SW', 'W', 'NW'],
+    months            : ['Gener', 'Febrer', 'Març', 'Abril', 'Maig', 'Juny', 'Juliol', 'Agost', 'Setembre', 'Octubre', 'Novembre', 'Desembre']
+};
+
+//======================================================================================================================
+// Greek by Dimitris Vichos
+//======================================================================================================================
+LANG.GR = {
+    canvasnosupport: 'Η έκδοση του browser που χρησιμοποιήτε δεν υποστηρίζει την γλώσσα HTML-5<br>' +
+                      'Αναβαθμίστε τον browser που χρησιμοποιήτε σε εκδοση που υποστηρίζει HTML-5 <br><br>' +
+                      'Ανακατεύθνση σελίδας στην παλιά.. gauges page...',
+    //
+    led_title         : 'Απώλεια επαφής με τον αισθητήρα',
+    led_title_ok      : 'Αισθητήρα εντάξει',
+    led_title_lost    : 'Απώλεια επαφής!',
+    led_title_unknown : 'Αγωστη κατάσταση αισθητήρα!',
+    led_title_offline : 'Ο μετεωρολογικός σταθμός είναι εκτός δικτύου.',
+    //
+    weather           : 'Καιρός',
+    latitude          : 'Βόρειο πλάτος',
+    longitude         : 'Ανατολικό μήκος',
+    elevation         : 'Υψόμετρο',
+    //
+    statusStr         : 'Φορτώνει...',
+    StatusMsg         : 'Φότρωση δεδομένων....',
+    StatusHttp        : 'Απώλεια διεύθυνσης http...',
+    StatusRetry       : 'Επανάληψη...',
+    StatusRetryIn     : 'Επανάληψη σε...',
+    StatusTimeout     : 'Λήξη χρόνου',
+    StatusPageLimit   : 'Παρακαλώ ανανεώστε τον browser....',
+    //
+    StatusLastUpdate  : 'Τελευταία λήψη δεδομένων',
+    StatusMinsAgo     : 'λεπτά πρίν',
+    StatusHoursAgo    : 'ώρες πρίν',
+    StatusDaysAgo     : 'μέρες πριν',
+    //
+    realtimeCorrupt   : 'Προσπάθεια ανάκτησης δεδομένων, επανάληψη',
+    //
+    timer             : 'Δευτερόλεπτα',
+    at                : 'στις',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    // 11 characters ===="12345678901"==== 11 characters
+    //
+    temp_title_out    : 'Θερμόμετρο',
+    temp_title_in     : 'Εσωτερική θερμοκρασία',
+    temp_out_info     : 'Εξωτερική θερμοκρασία',
+    temp_out_web      : 'Εξωτερική',
+    temp_in_info      : 'Εσωτερική θερμοκρασία',
+    temp_in_web       : 'Εσωτερική',
+    temp_trend_info   : 'Τάση θερμοκρασίας',
+    //
+    dew_title         : 'Σημείο δρόσου',
+    dew_info          : 'Σημείο δρόσου',
+    dew_web           : 'Σημείο δρόσου',
+    apptemp_title     : 'Αισθητή θερμοκρασία',
+    apptemp_info      : 'Αισθητή θερμοκρασία',
+    apptemp_web       : 'Αισθητή θερμοκρασία',
+    feel_title        : "Feels Like",
+    feel_info         : "Feels Like Temperature",
+    feel_web          : "Feels Like",
+    chill_title       : 'Αίσθηση ψύχους',
+    chill_info        : 'Αίσθηση ψύχους',
+    chill_web         : 'Αίσθηση ψύχους',
+    heat_title        : 'Δείκτης δυσφορίας',
+    heat_info         : 'Δείκτης δυσφορίας',
+    heat_web          : 'Δείκτης δυσφορίας',
+    humdx_title       : 'Δείκτης υγρασίας',
+    humdx_info        : 'Δείκτης υγρασίας',
+    humdx_web         : 'Δείκτης υγρασίας',
+    //
+    rain_title        : 'Βροχόπτωση',
+    rrate_title       : 'Ενταση βροχόπτωσης',
+    rrate_info        : 'Ενταση βροχόπτωσης',
+    LastRain_info     : 'Τελευταία βροχόπτωση',
+    LastRainedT_info  : 'Σήμερα στις',
+    LastRainedY_info  : 'χθες στις',
+    //
+    hum_title_out     : 'Υγρασία',
+    hum_title_in      : 'Εσωτερική υγρασία',
+    hum_out_info      : 'Εξωτερική υγρασία',
+    hum_in_info       : 'Εσωτερική υγρασία',
+    hum_out_web       : 'Εξωτερική',
+    hum_in_web        : 'Εσωτερική',
+    //
+    baro_title        : 'Βαρόμετρο',
+    baro_info         : 'Ατμοσφαιρική πίεση',
+    baro_trend_info   : 'Τάση πίεσης',
+    //
+    wind_title        : 'Aνεμόμετρο',
+    tenminavg_title   : 'Μέση ταχύτητα ανέμου',
+    tenminavgwind_info: 'Μέση 10λεπτη ταχύτητα ανέμου',
+    maxavgwind_info   : 'Μέγιστη μέση ταχύτητα ανέμου',
+    tenmingust_info   : 'Ριπή ανέμου',
+    maxgust_info      : 'Μέγιστη ριπή ανέμου',
+    latest_title      : 'Τελευταία ένδειξη ανέμου',
+    latestwind_info   : 'Τελευταία ταχύτητα ανέμου',
+    bearing_info      : 'Διέυθυνση',
+    latest_web        : 'Τελευταία',
+    tenminavg_web     : 'Μέση',
+    dominant_bearing  : 'Επικρατέστερη διέυθυνση',
+    calm              : 'Νηνεμία',
+    windrose          : 'Ανεμούριο',
+    windruntoday      : 'Τρέξιμο Αέρα',
+    //
+    uv_title          : 'UV Ενδειξη',
+    uv_levels         : ['Μηδενικό',
+                         'Ακίνδυνο',
+                         'Μικρή Επικυνδυνότητα',
+                         'Υψηλή Επικυνδυνότητα',
+                         'Πολύ υψηλή επικυνδυνότητα',
+                         'Ακραία επικυνδυνότητα'],
+    uv_headlines: ['Μη μετρήσιμη UV ένδεικη',
+                   'Ακίνδυνη στο μέσο επίπεδο',
+                   'Μικρός κίνδυνος στην ηλιακή ακτινοβολία',
+                   'Υψηλός κίνδυνος στην ηλιακή ακτινοβολία',
+                   'Πολύ υψηλός κίνδυνος στην ηλιακή ακτινοβολία',
+                   'Eξαιρετικά υψηλός κίνδυνος στην ηλιακή ακτινοβολία'],
+    uv_details: ['Ακόμα είναι νύχτα ή η μέρα είναι πολύ συννεφιασμένη.',
+
+                 'Φοράμε γυαλιά ηλίου; φοράμε γυαλιά ηλίου όταν το έδαφος είναι χιονοσκεπές,<br>' +
+                 'φοράμε ρούχα που αντανακλούν την ηλιακή UV ακτινοβολία.',
+
+                 'Φοράμε γυαλιά και αντηλιακό με δείκτη SPF 30+ , Ντυνόμαστε με ανοιχτόχρωμα ρούχα<br>' +
+                 'καπέλο, και αποφεύγουμε τον ήλιο τις θερμές ώρες της ημέρας.',
+
+                 'Φοράμε γυαλιά και αντηλιακό με δείκτη SPF 30+ , καλύπτουμε το σώμα με αντηλιακό<br>' +
+                 'Προγραμματίζουμε τις εξωτερικές δουλειές <br>' +
+                 '3 ώρες μετά την μέγιστη ακτινοβολία (από τις 11 το πρωί ως τις 4 το αποευμα<br>' +
+                 'Οι ζώνες της θερινής ώρας).',
+
+                 'Φοράμε αντηλιακό με δείκτη SPF 30+ , Μπλουζάκι ανοιχτόχρωμο γυαλιά ηλίου και καπέλο.<br>' +
+                 'Απόφέυγουμε την μακροχρόνια παραμονή στον ήλιο.',
+
+                 'Παίρνουμς όλες τις προφυλάξεις, συμπεριλαμβανομένων: γυαλιά ηλίου και αντηλιακό με δείκτη SPF 30+,<br>' +
+                 'Ντυνόμαστε με ανοιχτόχρωμα ρούχα ,καπέλο, και<br>' +
+                 'Αποφεύγουμε τελείως τον ήλιο 2 ώρες πρίν και τρείς ώρες μετά το μέγιστο της ηλιακής ακτινοβολίας (από τις 11 το πρωί<br>' +
+                 'ως τις 4 το απόγευμα ).'],
+    //
+    solar_title          : 'Ηλιακή ακτινοβολία',
+    solar_currentMax     : 'Τρέχουσα μέγιστη θεωρητικά ένδειξη',
+    solar_ofMax          : 'της μέγιστης',
+    solar_maxToday       : 'Σημερινή μέγιστη ένδειξη',
+    //
+    cloudbase_title      : 'Υψος βάσης νεφών',
+    cloudbase_popup_title: 'Θεωρητικό ύψος βάσης νεφών',
+    cloudbase_popup_text : 'Ο υπολογισμός είναι απλός; 1000 πόδια για κάθε 4.4 Βαθμούς Φαρενάιτ.<br>' +
+                           'Είναι η διαφορά μεταξύ της θερμοκρασίας και του σημείου δρόσου. Αυτή είναι απλή<br>' +
+                           'Δίνει το θεωρητικό ύψος των νεφών στη βάση τους, <br>' +
+                           'οταν ο αέρας είναι κορεσμένος',
+    feet              : 'πόδια',
+    metres            : 'μέτρα',
+    miles             : 'μίλια',
+    n_miles           : 'v.μίλια',
+    km                : 'km',
+    //
+    lowest_info       : 'Eλάχιστη',
+    highest_info      : 'Μέγιστη',
+    lowestF_info      : 'Ελάχιστη', // for proper translation of feminine words
+    highestF_info     : 'Μέγιστη', // for proper translation of feminine words
+    //
+    RisingVeryRapidly : 'Ραγδαία πτώση',
+    RisingQuickly     : 'ταχεία πτώση',
+    Rising            : 'πτώση',
+    RisingSlowly      : 'Αργή πτώση',
+    Steady            : 'Σταθερή',
+    FallingSlowly     : 'Αργή άνοδος',
+    Falling           : 'Ανοδος',
+    FallingQuickly    : 'Ταχεία πτώση',
+    FallingVeryRapidly: 'Ραγδαία πτώση',
+    //
+    maximum_info      : 'Mέγιστη',
+    max_hour_info     : 'Mέγιστη ωριαία',
+    minimum_info      : 'Ελάχιστη',
+    //
+    coords            : ['Β', 'ΒΒΑ', 'ΒΑ', 'ΑΒΑ', 'Α', 'ΑΝΑ', 'ΝΑ', 'ΝΝΑ', 'Ν', 'ΝΝΔ', 'ΝΔ', 'ΝΔΝ', 'Δ', 'ΔΒΔ', 'ΒΔ', 'ΒΒΔ'],
+    compass           : ['Β', 'ΒΑ', 'Α', 'ΝΑ', 'Ν', 'ΝΔ', 'Δ', 'ΒΔ'],
+    months            : ['Ιαν', 'Φεβ', 'Μαρ', 'Απρ', 'Μαι', 'Ιουν', 'Ιουλ', 'Αυγ', 'Σεπ', 'Οκτ', 'Νοε', 'Δεκ']
+};
+
+//======================================================================================================================
+// Portuguese by Werk_AG, MeteoCercal.info
+//======================================================================================================================
+LANG.PT = {
+    canvasnosupport: 'O seu browser não suporta HTML5...<br>' +
+                     'Actualize o seu navegador para uma versão mais recente!<br><br>' +
+                     'Vai ser redirecionado para uma página compativel...',
+    //
+    led_title         : 'Sensor remoto, estado desconhecido',
+    led_title_ok      : 'Aceitar sensor remoto',
+    led_title_lost    : 'Perdido o contacto com o sensor remoto',
+    led_title_unknown : 'Sensor remoto em estado desconhecido',
+    led_title_offline : 'A estação metereológica está Offline',
+    //
+    weather           : 'clima',
+    latitude          : 'Latitude',
+    longitude         : 'Longitude',
+    elevation         : 'Altitude',
+    //
+    statusStr         : 'A carregar ...',
+    StatusMsg         : 'Descarga de ...',
+    StatusHttp        : 'Erro no pedido HTTP',
+    StatusRetry       : 'Voltando a tentar...',
+    StatusRetryIn     : 'Voltando a tentar em ...',
+    StatusTimeout     : 'Tempo esgotado',
+    StatusPageLimit   : 'Foi atingido o tempo limite para auto-actualização desta página, recarregue a página para continuar.',
+    //
+    StatusLastUpdate  : 'Última actualização',
+    StatusMinsAgo     : 'minutos atrás',
+    StatusHoursAgo    : 'horas atrás',
+    StatusDaysAgo     : 'dias atrás',
+    //
+    realtimeCorrupt   : 'Ficheiro de dados corrompido! Tentando de novo...',
+    //
+    timer             : 'Segundos',
+    at                : 'a',
+    //
+    temp_title_out    : 'Temperatura',
+    temp_title_in     : 'Temp. Interior',
+    temp_out_info     : 'Temperatura Exterior',
+    temp_out_web      : 'Exterior',
+    temp_in_info      : 'Temperatura Interior',
+    temp_in_web       : 'Interior',
+    temp_trend_info   : 'Tendência Temperatura',
+    //
+    dew_title         : 'Pt. Orvalho',
+    dew_info          : 'Ponto de Orvalho',
+    dew_web           : 'Ponto de Orvalho',
+    apptemp_title     : 'Temp. Aparente',
+    apptemp_info      : 'Temperatura Aparente',
+    apptemp_web       : 'Temp. Aparente',
+    feel_title        : "Feels Like",
+    feel_info         : "Temperatura Feels Like",
+    feel_web          : "Feels Like",
+    chill_title       : 'Índice Frio',
+    chill_info        : 'Índice Frio',
+    chill_web         : 'Índice Frio',
+    heat_title        : 'Índice de Calor',
+    heat_info         : 'Índice de Calor',
+    heat_web          : 'Índice de Calor',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Pluviosidade',
+    rrate_title       : 'Taxa Pluv.',
+    rrate_info        : 'Taxa Pluviosidade',
+    LastRain_info     : 'Pluviosidade',
+    LastRainedT_info  : 'Hoje às',
+    LastRainedY_info  : 'Ontem às',
+    //
+    hum_title_out     : 'Humidade',
+    hum_title_in      : 'Humidade Interior',
+    hum_out_info      : 'Humidade Exterior',
+    hum_in_info       : 'Humidade Interior',
+    hum_out_web       : 'Exterior',
+    hum_in_web        : 'Interior',
+    //
+    baro_title        : 'Pressão Atm.',
+    baro_info         : 'Pressão',
+    baro_trend_info   : 'Tendência da Pressão',
+    //
+    wind_title        : 'Vel. Vento',
+    tenminavg_title   : 'Velocidade Média do Vento',
+    tenminavgwind_info: 'Velocidade Média do Vento (10 min)',
+    maxavgwind_info   : 'Média da Vel. Máxima do Vento',
+    tenmingust_info   : 'Rajada (10 min)',
+    maxgust_info      : 'Rajada máxima',
+    latest_title      : 'Vento, última',
+    latestwind_info   : 'Última Vel. do Vento',
+    bearing_info      : 'Direção',
+    latest_web        : 'Último',
+    tenminavg_web     : 'Média',
+    dominant_bearing  : 'Vento dominante hoje',
+    calm              : 'Calmo',
+    windrose          : 'Rosa dos Ventos',
+    windruntoday      : 'Wind Run hoje',
+    //
+    uv_title          : 'Índice UV',
+    uv_levels         : ['Nenhum',
+                         'Sem perigo',
+                         'Pequeno risco',
+                         'Alto risco',
+                         'Risco muito alto',
+                         'Risco extremo'],
+    uv_headlines: ['Índice UV não mensurável',
+                   'Sem perigo para a maioria das pessoas',
+                   'Pequeno risco de danos por exposição ao sol sem protecção',
+                   'Alto risco de danos por exposição ao sol sem protecção',
+                   'Risco muito alto de danos por exposição ao sol sem protecção',
+                   'Risco extremo de danos por exposição ao sol sem protecção'],
+    uv_details: ['Ainda é noite, ou o dia está com céu muito nublado.',
+                 'Use óculos de sol em dias ensolarados; caso tenha uma pele particularmente sencível,<br>' +
+                 'ou exista neve no solo que reflete radiação UV, utilize protector solar.',
+
+                 'Utilize óculos de sol, e protector solar SPF 30+, proteja o corpo com roupa e use<br>' +
+                 'chapéu. Por volta do meio dia, quando o sol está mais intenso, procure estar à sombra.',
+
+                 'Utilize óculos de sol, e protector solar SPF 30+, proteja o corpo com roupas de protecção<br>' +
+                 'solar e use um chapéu com abas. Reduza a exposição ao sol nas duas horas anteriores e até às<br>' +
+                 'tres horas posteriores ao meio dia solar (cerca das 11:00 até às 16:00 durante o verão nas<br>' +
+                 'zonas que praticam horário de verão).',
+
+                 'Usar protetor solar FPS 30+, camisa, óculos de sol e um chapéu.<br>' +
+                 'Não fique ao sol por muito tempo.',
+
+                 'Tome todas as precauções, incluindo: Usar óculos de sol, protetor solar FPS 30+,<br>' +
+                 'cubra o corpo com roupa com mangas, vista calças, e use um chapéu de abas largas.<br>' +
+                 'Evite a exposição ao sol nas duas horas anteriores e até às tres horas posteriores ao meio dia solar<br>' +
+                 '(cerca das 11:00 até às 16:00 durante o verão nas zonas que praticam horário de verão).'],
+    //
+    solar_title          : 'Rad. Solar',
+    solar_currentMax     : 'Valor máximo teórico actual',
+    solar_ofMax          : 'do máximo',
+    solar_maxToday       : 'Hoje, valor máximo',
+    //
+    cloudbase_title      : 'Base das Nuvens',
+    cloudbase_popup_title: 'Base das Nuvens Teórica',
+    cloudbase_popup_text : 'É um cálculo simples; 1000 pés por cada 4.4 graus Fahrenheit de diferença<br>' +
+                           'entre a temperatura e o ponto de orvalho. Note que isto dá simplesmente<br>' +
+                           'a altura teórica em que nuvens tipo Cumulus se começam a formar, e o<br>' +
+                           'ar começa a ficar saturado',
+    feet              : 'pés',
+    metres            : 'metros',
+    miles             : 'milhas',
+    n_miles           : 'milhas n.',
+    km                : 'km',
+    //
+    lowest_info       : 'Mais Baixa',
+    highest_info      : 'Máxima',
+    lowestF_info      : 'Mínima',
+    highestF_info     : 'Máxima',
+    RisingVeryRapidly : 'A subir muito rápidamente',
+    RisingQuickly     : 'A subir rápidamente',
+    Rising            : 'A subir',
+    RisingSlowly      : 'A subir lentamente',
+    Steady            : 'Estável',
+    FallingSlowly     : 'A descer lentamente',
+    Falling           : 'A descer',
+    FallingQuickly    : 'A descer rápidamente',
+    FallingVeryRapidly: 'A descer muito rápidamente',
+    //
+    maximum_info      : 'Máximo',
+    max_hour_info     : 'Máx. por Hora',
+    minimum_info      : 'Mínimo',
+    //
+    coords            : ['N', 'NNE', 'NE', 'ENE', 'E', 'ESE', 'SE', 'SSE', 'S', 'OSO', 'O', 'OSO', 'O', 'ONO', 'NO', 'NNO', 'ONO'],
+    compass           : ['N', 'NE', 'E', 'SE', 'S', 'SO', 'O', 'NO'],
+    months            : ['Janeiro', 'Fevereiro', 'Março', 'Abril', 'Maio', 'Junho', 'Julho', 'Agosto', 'Setembro', 'Outubro', 'Novembro', 'Dezembro']
+};
+
+//======================================================================================================================
+// Czech by Milos Jirik
+//======================================================================================================================
+LANG.CS = {
+    canvasnosupport: 'Ve vašem prohlížeči není podpora pro HTML5 Canvas... Lituji...<br>' +
+                     'Zkuste aktualizovat svůj prohlížeč na novější verzi - téměř všechny prohlížeče podporují nyní Canvas, i IE9!<br><br>' +
+                     'Budete přesměrováni na původní stránku měřidel...',
+    //
+    led_title         : 'Senzor dálkového ovládání stav neznámý',
+    led_title_ok      : 'Remote sensor OK',
+    led_title_lost    : 'Senzor dálkového ovládání kontakt ztracen!',
+    led_title_unknown : 'Senzor dálkového ovládání stav neznámý!',
+    led_title_offline : 'Meteorologická stanice je nyní v režimu offline.',
+    //
+    weather           : 'počasí',
+    latitude          : 'Zeměpisná délka',
+    longitude         : 'Zeměpisná šířka',
+    elevation         : 'Nadm. výška',
+    //
+    statusStr         : 'Nahrávání...',
+    StatusMsg         : 'Stahování...',
+    StatusHttp        : 'HTTP požadavek selhal',
+    StatusRetry       : 'Opakování...',
+    StatusRetryIn     : 'Opakování za...',
+    StatusTimeout     : 'Vypršel časový limit',
+    StatusPageLimit   : 'Automatická aktualizace stránky hotova, klepněte na stavovou LED pro pokračování',
+    //
+    StatusLastUpdate  : 'Poslední aktualizace před',
+    StatusMinsAgo     : 'minutami',
+    StatusHoursAgo    : 'hodinami',
+    StatusDaysAgo     : 'dny',
+    //
+    realtimeCorrupt   : 'Stahovaný textový soubor poškozen! Opakování...',
+    //
+    timer             : 'sec.',
+    at                : 'v',
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+    //        11 characters  ===="12345678901"====  11 characters
+    //
+    temp_title_out    : 'Teplota',
+    temp_title_in     : 'Vn. teplota',
+    temp_out_info     : 'Venkovní teplota',
+    temp_out_web      : 'Venkovní',
+    temp_in_info      : 'Vnitřní teplota',
+    temp_in_web       : 'Vnitřní',
+    temp_trend_info   : 'Teplotní trend',
+    //
+    dew_title         : 'Rosný bod',
+    dew_info          : 'Rosný bod',
+    dew_web           : 'Rosný bod',
+    apptemp_title     : 'Zdánl. tepl.',
+    apptemp_info      : 'Zdánlivá teplota',
+    apptemp_web       : 'Zdánl. teplota',
+    feel_title        : "Feels Like",
+    feel_info         : "Feels Like teplota",
+    feel_web          : "Feels Like",
+    chill_title       : 'Chlad větru',
+    chill_info        : 'Chlad větru',
+    chill_web         : 'Chlad větru',
+    heat_title        : 'Index horka',
+    heat_info         : 'Index horka',
+    heat_web          : 'Index horka',
+    humdx_title       : 'Humidex',
+    humdx_info        : 'Humidex',
+    humdx_web         : 'Humidex',
+    //
+    rain_title        : 'Srážky',
+    rrate_title       : 'Intenzita',
+    rrate_info        : 'Intenzita srážek',
+    LastRain_info     : 'Poslední srážky',
+    LastRainedT_info  : 'Dnes v',
+    LastRainedY_info  : 'Včera v',
+    //
+    hum_title_out     : 'Vlhkost',
+    hum_title_in      : 'Vn. vlhkost',
+    hum_out_info      : 'Venkovní vlhkost',
+    hum_in_info       : 'Vnitřní vlhkost',
+    hum_out_web       : 'Venkovní',
+    hum_in_web        : 'Vnitřní',
+    //
+    baro_title        : 'Tlak vzd.',
+    baro_info         : 'Barometrický tlak',
+    baro_trend_info   : 'Tlaková tendence',
+    //
+    wind_title        : 'Vítr rychlost',
+    tenminavg_title   : 'Prům. rychlost větru',
+    tenminavgwind_info: 'Prům. rychlost větru (10 min)',
+    maxavgwind_info   : 'Max prům. rychlost větru',
+    tenmingust_info   : 'Náraz (10 min)',
+    maxgust_info      : 'Maximum náraz',
+    latest_title      : 'Poslední vítr',
+    latestwind_info   : 'Poslední rychlost větru',
+    bearing_info      : 'Směr větru',
+    latest_web        : 'Poslední',
+    tenminavg_web     : 'Průměr',
+    dominant_bearing  : 'Převažující směr větru dnes',
+    calm              : 'bezvětří',
+    windrose          : 'Větrná růžice',
+    windruntoday      : 'Denní proběh větru',
+    //
+    uv_title          : 'UV Index',
+    uv_levels         : ['Žádné riziko',
+                         'Nízké riziko',
+                         'Střední riziko',
+                         'Vysoké riziko',
+                         'Velmi vysoké riziko',
+                         'Extrémní riziko'],
+    uv_headlines: ['Neměřitelný UV Index',
+                   'Bez nebezpečí pro průměrné osoby',
+                   'Riziko při nechráněném pobytu na slunci',
+                   'Velké riziko při nechráněném pobytu na slunci',
+                   'Vysoké riziko při nechráněném pobytu na slunci',
+                   'Extreme riziko při nechráněném pobytu na slunci'],
+    uv_details: ['Je ještě noc nebo je velmi zatažený den.',
+
+                 'Noste sluneční brýle za jasných dnů, používejte opalovací krém, pokud je na zemi sníh,<br>' +
+                 'který odráží UV záření, nebo máte-li zvlášť světlou pokožku.',
+
+                 'Noste sluneční brýle a používejte krém na opalování SPF 30+, zakryjte tělo oblečením a<br>' +
+                 'kloboukem, vyhledejte stín kolem poledne, kdy je slunce nejintenzivnější.',
+
+                 'Noste sluneční brýle a používejte krém na opalování SPF 30+, zakryjte tělo ochranným<br>' +
+                 'oděvem a kloboukem se širokou krempou, zkraťte dobu pobytu na slunci v době mezi 11:00 a 16:00 hod.,<br>' +
+                 'tj. kolem slunečního poledne letního času na tři hodiny během léta v oblastech,<br>' +
+                 'které používají letního času.',
+
+                 'Používejte krém na opalování SPF 30+, košili, sluneční brýle a klobouk.<br>' +
+                 'Nezůstávejte na slunci příliš dlouho.',
+
+                 'Učiňte veškerá opatření, včetně nošení slunečních brýlí a použití krému na opalování SPF 30+,<br>' +
+                 'zakryjte tělo košilí s dlouhým rukávem a kalhotami, noste velmi široký klobouk a<br>' +
+                 'vyhněte se slunci od dvou hodin před až po tři hodiny po slunečním poledni (v době od 11:00<br>' +
+                 'do 16:00 v létě v oblastech, které používají letního času).'],
+    //
+    solar_title          : 'Sluneční záření',
+    solar_currentMax     : 'Aktuální teoretické maximum záření',
+    solar_ofMax          : 'maximum',
+    solar_maxToday       : 'Dnešní maximum záření',
+    //
+    lowest_info          : 'Nejnižší',
+    highest_info         : 'Nejvyšší',
+    lowestF_info         : 'Nejnižší',     // for proper translation of feminine words
+    highestF_info        : 'Nejvyšší',    // for proper translation of feminine words
+    //
+    RisingVeryRapidly    : 'Prudký vzestup',
+    RisingQuickly        : 'Silný vzestup',
+    Rising               : 'Vzestup',
+    RisingSlowly         : 'Slabý vzestup',
+    Steady               : 'Ustálený stav',
+    FallingSlowly        : 'Slabý pokles',
+    Falling              : 'Pokles',
+    FallingQuickly       : 'Silný pokles',
+    FallingVeryRapidly   : 'Prudký pokles',
+    //
+    maximum_info         : 'Maximum',
+    max_hour_info        : 'Max za hodinu',
+    minimum_info         : 'Minimum',
+    //
+    coords               : ['S', 'SSV', 'SV', 'VSV', 'V', 'VJV', 'JV', 'JJV', 'J', 'JJZ', 'JZ', 'ZJZ', 'Z', 'ZSZ', 'SZ', 'SSZ'],
+    compass              : ['S', 'SV', 'V', 'JV', 'J', 'JZ', 'Z', 'SZ'],
+    months               : ['Led', 'Úno', 'Bře', 'Dub', 'Kvě', 'Čer', 'Čec', 'Srp', 'Zář', 'Říj', 'Lis', 'Pro'],
+    //
+    //
+    cloudbase_title      : 'Základna mraků',
+    cloudbase_popup_title: 'Teoretická základna mraků',
+    cloudbase_popup_text : 'Výpočet je jednoduchý; 1000 ft na každých 4,4 stupňů Fahrenheita<br>' +
+                           'rozdílu mezi teplotou a teplotou rosného bodu. Všimněte si, že to prostě<br>' +
+                           'dává teoretickou výšku, ve které se kupovité mraky začínají tvořit, kdy<br>' +
+                           'vzduch je nasycen',
+    //
+    feet   : 'feet',
+    metres : 'metrů',
+    miles  : 'míle',
+    n_miles: 'n.míle',
+    km     : 'km'
+
+};
+//======================================================================================================================
+// Polish by barcik75
+//======================================================================================================================
+LANG.PL = {
+    canvasnosupport: "Brak wsparcia dla HTML5 w Twojej przeglądarce...<br>Spróbuj zaktualizować przeglądarkę do nowszej wersji<br><br>Przekierowanie na 'stary' wygląd strony...",
+    //
+    led_title         : "Nieznany status zdalnego sensora",
+    led_title_ok      : "Zdalny sensor OK",
+    led_title_lost    : "Stracone połączenie ze zdalnym sensorem!",
+    led_title_unknown : "Nieznany status zdalnego sensora!",
+    led_title_offline : "Stacja pogoda aktualnie jest wyłączona.",
+    //
+    weather           : "pogoda",
+    latitude          : "Długość geograficzna",
+    longitude         : "Szerokość geograficzna",
+    elevation         : "Wysokość",
+    //
+    statusStr         : "Ładowanie...",
+    StatusMsg         : "Ściąganie...",
+    StatusHttp        : "Błąd przetwarzania HTTP",
+    StatusRetry       : "Ponawianie...",
+    StatusRetryIn     : "Ponowienie za...",
+    StatusTimeout     : "Przekroczony czas",
+    StatusPageLimit   : "Autoodświeżanie strony osiągnęlo limit, naciśnij diodę LED, aby odświeżyć.",
+    //
+    StatusLastUpdate  : "Ostatni odczyt",
+    StatusMinsAgo     : "minut temu",
+    StatusHoursAgo    : "godzin temu",
+    StatusDaysAgo     : "dni temu",
+    //
+    realtimeCorrupt   : "Ściąganie pliku tekstowego nie powiodło się. Ponawianie...",
+    //
+    timer             : "sekund",
+    at                : "o",
+    //
+    // MAXIMUM number of characters that can be used for the 'title' variables (such as 'LANG_EN.temp_title_out')
+        //        11 characters  ===="12345678901"====  11 characters
+        //
+    temp_title_out    : "Temperatura",
+    temp_title_in     : "Temperatura wewnątrz",
+    temp_out_info     : "Temperatura na zewnątrz",
+    temp_out_web      : "Na zewnątrz",
+    temp_in_info      : "Wewnątrz",
+    temp_in_web       : "Wewnątrz",
+    temp_trend_info   : "Trend temperatury",
+    //
+    dew_title         : "Punkt rosy",
+    dew_info          : "Punkt rosy",
+    dew_web           : "Punkt rosy",
+    apptemp_title     : "Odczuwalna",
+    apptemp_info      : "Temperatura odczuwalna",
+    apptemp_web       : "Odczuwalna",
+    feel_title        : "Feels Like",
+    feel_info         : "Temperatura Feels Like",
+    feel_web          : "Feels Like",
+    chill_title       : "Chłod wiatru",
+    chill_info        : "Chłod wiatru",
+    chill_web         : "Chłód wiatru",
+    heat_title        : "Indeks ciepła",
+    heat_info         : "Indeks ciepła",
+    heat_web          : "Indeks ciepła",
+    humdx_title       : "Humidex",
+    humdx_info        : "Humidex",
+    humdx_web         : "Humidex",
+    //
+    rain_title        : "Opady deszczu",
+    rrate_title       : "Stopa opadów",
+    rrate_info        : "Stopa opadów",
+    LastRain_info     : "Ostatnie opady",
+    LastRainedT_info  : "Dzisiaj o",
+    LastRainedY_info  : "Wczoraj o",
+    //
+    hum_title_out     : "Wilgotność",
+    hum_title_in      : "Wilgotność wewnątrz",
+    hum_out_info      : "Wilgotność na zewnątrz",
+    hum_in_info       : "Wilgotność wewnątrz",
+    hum_out_web       : "Na zewnątrze",
+    hum_in_web        : "Wewnątrz",
+    //
+    baro_title        : "Ciśnienie",
+    baro_info         : "Ciśnienie barometryczne",
+    baro_trend_info   : "Trend ciśnienia",
+    //
+    wind_title        : "Prędkość wiatru",
+    tenminavg_title   : "Średnia prędkość wiatru",
+    tenminavgwind_info: "Średnia prędkość wiatru z ostatnich 10 minut",
+    maxavgwind_info   : "Maksymalna średnia prędkość wiatru",
+    tenmingust_info   : "Porywy wiatru z ostatnich 10 minut",
+    maxgust_info      : "Maksymalny poryw wiatru",
+    latest_title      : "Ostatni wiatr",
+    latestwind_info   : "Ostatnia prędkość wiatru",
+    bearing_info      : "kierunek",
+    latest_web        : "Ostatni",
+    tenminavg_web     : "Średni",
+    dominant_bearing  : "Dzisiejszy dominujący wiatr",
+    calm              : "spokojnie",
+    windrose          : "Róża wiatru",
+    windruntoday      : "Dzisiejszy wiatr",
+    //
+    uv_title: "UV Indeks",
+    uv_levels: ["Brak",
+                "Brak ryzyka",
+                "Średnie ryzyko",
+                "Wysokie ryzyko",
+                "Bardzo wysokie ryzyko",
+                "Ekstremalne ryzyko"],
+    uv_headlines: ["Brak pomiarów indeksu UV",
+                   "Brak ryzyka dla statystycznej osoby",
+                   "Umiarkowane ryzyko szkód wynikających z nieosłoniętego nasłonecznienia",
+                   "Wysokie ryzyko szkód spowodowanych nieosłoniętą ekspozycją na słońce",
+                   "Bardzo wysokie ryzyko szkód spowodowanych nieosłoniętą ekspozycją na słońce",
+                   "Ekstremalne ryzyko szkód spowodowanych nieosłoniętym nasłonecznieniem"],
+    uv_details: ["Nadal jest noc lub jest bardzo pochmurny dzień.",
+                 "Noś okulary przeciwsłoneczne w jasne dni, użyj ochrony przeciwsłonecznej, jeśli śnieg jest na ziemi,<br>" +
+                 "który odbija promieniowanie UV, lub jeśli masz szczególnie jasną skórę.",
+
+                 "Noś okulary przeciwsłoneczne i używaj kremów przeciwsłonecznych SPF 30+, zakryj ciało<br>" +
+                 "ubraniem i kapeluszem, a gdy słońce jest najbardziej intensywne, szukaj cienia około południa.",
+
+                 "Noś okulary przeciwsłoneczne i używaj kremu przeciwsłonecznego SPF 30+, zakryj ciało<br>" +
+                 "z ochroną przeciwsłoneczną i ubraniem oraz kapelusz z szerokim rondem i skróć czas na<br>" +
+                 "słońcu z dwóch godzin przed do trzech godzin po słonecznym południu (około 11:00<br>" +
+                 "do 16:00 latem w strefach, w których obserwuje się czas letni)",
+
+                 "Stosuj filtr przeciwsłoneczny SPF 30+, noś koszulę, okulary przeciwsłoneczne i kapelusz.<br>" +
+                 "Nie zostawaj zbyt długo w słońcu.", "Podejmij wszelkie środki ostrożności, w tym:<br>" +
+                 "noś okulary przeciwsłoneczne i używać kremu do opalania z filtrem SPF 30+,<br>" +
+                 "przykryj ciało koszulą z długim rękawem i spodniami, załóż bardzo szeroki kapelusz, i<br>" +
+                 "unikaj słońca od dwóch godzin przed do trzech godzin po słonecznym południu (około 11:00<br>" +
+                 "do 16:00 latem w strefach, które obserwują czas letni)"],
+    //
+    solar_title       : "Promieniowanie słoneczne",
+    solar_currentMax  : "Obecne teoretyczne maksymalne promieniowanie",
+    solar_ofMax       : "z maksimum",
+    solar_maxToday    : "Dzisiejszy maksymalny odczyt",
+    //
+    lowest_info       : "Najniższa",
+    highest_info      : "Najwyższa",
+    lowestF_info      : "Najniższa",
+    highestF_info     : "Najwyższa",
+    //
+    RisingVeryRapidly : "Rośnie bardzo szybko",
+    RisingQuickly     : "Rośnie szybko",
+    Rising            : "Rośnie",
+    RisingSlowly      : "Rośnie powoli",
+    Steady            : "Stabilne",
+    FallingSlowly     : "Opada wolno",
+    Falling           : "Opada",
+    FallingQuickly    : "Opada szybko",
+    FallingVeryRapidly: "Opada bardzo szybko",
+    //
+    maximum_info      : "Maksimum",
+    max_hour_info     : "Maksymalnie na godzine",
+    minimum_info      : "Minimum",
+    //
+    coords            : ["N", "NNE", "NE", "ENE", "E", "ESE", "SE", "SSE", "S", "SSW", "SW", "WSW", "W", "WNW", "NW", "NNW"],
+    compass           : ["N", "NE", "E", "SE", "S", "SW", "W", "NW"],
+    months            : ["Sty", "Lut", "Mar", "Kwi", "Maj", "Cze", "Lip", "Sie", "Wrz", "Paź", "Lis", "Gru"],
+    //
+    cloudbase_title   : "Poziom chmur",
+    cloudbase_popup_title: "Teoretyczny poziom chmur",
+    cloudbase_popup_text: "Obliczenia są proste:<br>" +
+                          "1000 stóp na każde 4,4 stopnia Fahrenheita różnicy między temperaturą, a punktem rosy.<br>" +
+                          "Zauważ, że to teoretyczna wysokość, w której chmury Cumulus zaczęłyby się formować,<br>" +
+                          "a powietrze było nasycone",
+    //
+    feet              : "stopy",
+    metres            : "metry",
+    miles             : "mile",
+    n_miles           : "mile morskie",
+    km                : "km",
+};
+
+//======================================================================================================================
+
+function changeLang(newLang, updateGauges) {
+    updateGauges = typeof updateGauges === 'undefined' ? true : updateGauges;
+    // update the gauge titles etc
+    if (updateGauges) {
+        gauges.setLang(newLang);
+    }
+
+    // HTML boiler plate
+    $('#lang_weather').html(newLang.weather);
+    $('#lang_latitude').html(newLang.latitude);
+    $('#lang_longitude').html(newLang.longitude);
+    $('#lang_elevation').html(newLang.elevation);
+
+    // update the web page radio buttons
+    $('#lab_temp1').html(newLang.temp_out_web);
+    $('#lab_temp2').html(newLang.temp_in_web);
+    $('#lab_dew1').html(newLang.dew_web);
+    $('#lab_dew2').html(newLang.app_web);
+    $('#lab_dew3').html(newLang.chill_web);
+    $('#lab_dew4').html(newLang.heat_web);
+    $('#lab_dew5').html(newLang.humdx_web);
+    $('#lab_dew6').html(newLang.feel_web);
+    $('#lab_hum1').html(newLang.hum_out_web);
+    $('#lab_hum2').html(newLang.hum_in_web);
+
+    // unit table
+    $('#lang_temperature').html(newLang.temp_title_out);
+    $('#lang_rainfall').html(newLang.rain_title);
+    $('#lang_pressure').html(newLang.baro_title);
+    $('#lang_windSpeed').html(newLang.wind_title);
+    $('#lang_cloudbase').html(newLang.cloudbase_title);
+}
diff --git a/webfiles/lib/steelseries/scripts/src/steelseries.js b/webfiles/lib/steelseries/scripts/src/steelseries.js
new file mode 100644
index 0000000..1217ec2
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/steelseries.js
@@ -0,0 +1,6974 @@
+/*!
+ * Name          : steelseries.js
+ * Authors       : Gerrit Grunwald, Mark Crossley
+ * Last modified : 01.12.2015
+ * Revision      : 0.14.16
+ *
+ * Copyright (c) 2011, Gerrit Grunwald, Mark Crossley
+ * All rights reserved.
+ *
+ *  Redistribution and use in source and binary forms, with or without modification, are permitted
+ *  provided that the following conditions are met:
+ *
+ *  # Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ *  # Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ *   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING,
+ *   BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *   SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ *   DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ *   INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+ *   OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+/*globals Tween */
+/*jshint onevar:false,plusplus:false,nomen:false,bitwise:false*/
+
+var steelseries = (function () {
+    // Constants
+    var HALF_PI     = Math.PI * 0.5,
+        TWO_PI      = Math.PI * 2,
+        PI          = Math.PI,
+        RAD_FACTOR  = Math.PI / 180,
+        DEG_FACTOR  = 180 / Math.PI,
+        doc         = document,
+        lcdFontName = 'LCDMono2Ultra,Arial,Verdana,sans-serif',
+        stdFontName = 'Arial,Verdana,sans-serif';
+
+    //*************************************   C O M P O N O N E N T S   ************************************************
+    var radial = function (canvas, parameters) {
+        parameters = parameters || {};
+        var gaugeType = (undefined === parameters.gaugeType ? steelseries.GaugeType.TYPE4 : parameters.gaugeType),
+            size = (undefined === parameters.size ? 0 : parameters.size),
+            minValue = (undefined === parameters.minValue ? 0 : parameters.minValue),
+            maxValue = (undefined === parameters.maxValue ? (minValue + 100) : parameters.maxValue),
+            niceScale = (undefined === parameters.niceScale ? true : parameters.niceScale),
+            threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue: parameters.threshold),
+            thresholdRising = (undefined === parameters.thresholdRising ? true : parameters.thresholdRising),
+            section = (undefined === parameters.section ? null : parameters.section),
+            area = (undefined === parameters.area ? null : parameters.area),
+            titleString = (undefined === parameters.titleString ? '' : parameters.titleString),
+            unitString = (undefined === parameters.unitString ? '' : parameters.unitString),
+            frameDesign = (undefined === parameters.frameDesign ? steelseries.FrameDesign.METAL : parameters.frameDesign),
+            frameVisible = (undefined === parameters.frameVisible ? true : parameters.frameVisible),
+            backgroundColor = (undefined === parameters.backgroundColor ? steelseries.BackgroundColor.DARK_GRAY : parameters.backgroundColor),
+            backgroundVisible = (undefined === parameters.backgroundVisible ? true : parameters.backgroundVisible),
+            pointerType = (undefined === parameters.pointerType ? steelseries.PointerType.TYPE1 : parameters.pointerType),
+            pointerColor = (undefined === parameters.pointerColor ? steelseries.ColorDef.RED : parameters.pointerColor),
+            knobType = (undefined === parameters.knobType ? steelseries.KnobType.STANDARD_KNOB : parameters.knobType),
+            knobStyle = (undefined === parameters.knobStyle ? steelseries.KnobStyle.SILVER : parameters.knobStyle),
+            lcdColor = (undefined === parameters.lcdColor ? steelseries.LcdColor.STANDARD : parameters.lcdColor),
+            lcdVisible = (undefined === parameters.lcdVisible ? true : parameters.lcdVisible),
+            lcdDecimals = (undefined === parameters.lcdDecimals ? 2 : parameters.lcdDecimals),
+            digitalFont = (undefined === parameters.digitalFont ? false : parameters.digitalFont),
+            fractionalScaleDecimals = (undefined === parameters.fractionalScaleDecimals ? 1 : parameters.fractionalScaleDecimals),
+            ledColor = (undefined === parameters.ledColor ? steelseries.LedColor.RED_LED : parameters.ledColor),
+            ledVisible = (undefined === parameters.ledVisible ? true : parameters.ledVisible),
+            userLedColor = (undefined === parameters.userLedColor ? steelseries.LedColor.GREEN_LED : parameters.userLedColor),
+            userLedVisible = (undefined === parameters.userLedVisible ? false : parameters.userLedVisible),
+            thresholdVisible = (undefined === parameters.thresholdVisible ? true : parameters.thresholdVisible),
+            minMeasuredValueVisible = (undefined === parameters.minMeasuredValueVisible ? false : parameters.minMeasuredValueVisible),
+            maxMeasuredValueVisible = (undefined === parameters.maxMeasuredValueVisible ? false : parameters.maxMeasuredValueVisible),
+            foregroundType = (undefined === parameters.foregroundType ? steelseries.ForegroundType.TYPE1 : parameters.foregroundType),
+            foregroundVisible = (undefined === parameters.foregroundVisible ? true : parameters.foregroundVisible),
+            labelNumberFormat = (undefined === parameters.labelNumberFormat ? steelseries.LabelNumberFormat.STANDARD : parameters.labelNumberFormat),
+            playAlarm = (undefined === parameters.playAlarm ? false : parameters.playAlarm),
+            alarmSound = (undefined === parameters.alarmSound ? false : parameters.alarmSound),
+            customLayer = (undefined === parameters.customLayer ? null : parameters.customLayer),
+            tickLabelOrientation = (undefined === parameters.tickLabelOrientation ? (gaugeType === steelseries.GaugeType.TYPE1 ? steelseries.TickLabelOrientation.TANGENT : steelseries.TickLabelOrientation.NORMAL) : parameters.tickLabelOrientation),
+            trendVisible = (undefined === parameters.trendVisible ? false : parameters.trendVisible),
+            trendColors = (undefined === parameters.trendColors ? [steelseries.LedColor.RED_LED, steelseries.LedColor.GREEN_LED, steelseries.LedColor.CYAN_LED] : parameters.trendColors),
+            useOdometer = (undefined === parameters.useOdometer ? false : parameters.useOdometer),
+            odometerParams = (undefined === parameters.odometerParams ? {} : parameters.odometerParams),
+            odometerUseValue = (undefined === parameters.odometerUseValue ? false : parameters.odometerUseValue),
+            fullScaleDeflectionTime = (undefined === parameters.fullScaleDeflectionTime ? 2.5 : parameters.fullScaleDeflectionTime);
+
+        // Get the canvas context and clear it
+        var mainCtx = getCanvasContext(canvas);
+        // Has a size been specified?
+        if (size === 0) {
+            size = Math.min(mainCtx.canvas.width, mainCtx.canvas.height);
+        }
+
+        // Set the size - also clears the canvas
+        mainCtx.canvas.width = size;
+        mainCtx.canvas.height = size;
+
+        // Create audio tag for alarm sound
+        var audioElement;
+        if (playAlarm && alarmSound !== false) {
+            audioElement = doc.createElement('audio');
+            audioElement.setAttribute('src', alarmSound);
+            audioElement.setAttribute('preload', 'auto');
+        }
+
+        var value = minValue;
+        var odoValue = minValue;
+        var self = this;
+
+        // Properties
+        var minMeasuredValue = maxValue;
+        var maxMeasuredValue = minValue;
+
+        var ledBlinking = false;
+        var userLedBlinking = false;
+
+        var ledTimerId = 0;
+        var userLedTimerId = 0;
+        var tween;
+        var repainting = false;
+
+        var trendIndicator = steelseries.TrendState.OFF;
+        var trendSize = size * 0.06;
+        var trendPosX = size * 0.29;
+        var trendPosY = size * 0.36;
+
+        // GaugeType specific private variables
+        var freeAreaAngle;
+        var rotationOffset;
+        var tickmarkOffset;
+        var angleRange;
+        var angleStep;
+
+        var angle = rotationOffset + (value - minValue) * angleStep;
+
+        var imageWidth = size;
+        var imageHeight = size;
+
+        var centerX = imageWidth / 2;
+        var centerY = imageHeight / 2;
+
+        // Misc
+        var ledSize = size * 0.093457;
+        var ledPosX = 0.6 * imageWidth;
+        var ledPosY = 0.4 * imageHeight;
+        var userLedPosX = gaugeType === steelseries.GaugeType.TYPE3 ? 0.6 * imageWidth : centerX - ledSize / 2;
+        var userLedPosY = gaugeType === steelseries.GaugeType.TYPE3 ? 0.72 * imageHeight : 0.75 * imageHeight;
+        var lcdFontHeight = Math.floor(imageWidth / 10);
+        var stdFont = lcdFontHeight + 'px ' + stdFontName;
+        var lcdFont = lcdFontHeight + 'px ' + lcdFontName;
+        var lcdHeight = imageHeight * 0.13;
+        var lcdWidth = imageWidth * 0.4;
+        var lcdPosX = (imageWidth - lcdWidth) / 2;
+        var lcdPosY = imageHeight * 0.57;
+        var odoPosX, odoPosY = imageHeight * 0.61;
+        var shadowOffset = imageWidth * 0.006;
+
+        // Constants
+        var initialized = false;
+
+        // Tickmark specific private variables
+        var niceMinValue = minValue;
+        var niceMaxValue = maxValue;
+        var niceRange = maxValue - minValue;
+        var range = niceMaxValue - niceMinValue;
+        var minorTickSpacing = 0;
+        var majorTickSpacing = 0;
+        var maxNoOfMinorTicks = 10;
+        var maxNoOfMajorTicks = 10;
+
+        // Method to calculate nice values for min, max and range for the tickmarks
+        var calculate = function calculate() {
+            if (niceScale) {
+                niceRange = calcNiceNumber(maxValue - minValue, false);
+                majorTickSpacing = calcNiceNumber(niceRange / (maxNoOfMajorTicks - 1), true);
+                niceMinValue = Math.floor(minValue / majorTickSpacing) * majorTickSpacing;
+                niceMaxValue = Math.ceil(maxValue / majorTickSpacing) * majorTickSpacing;
+                minorTickSpacing = calcNiceNumber(majorTickSpacing / (maxNoOfMinorTicks - 1), true);
+                minValue = niceMinValue;
+                maxValue = niceMaxValue;
+                range = maxValue - minValue;
+            } else {
+                niceRange = (maxValue - minValue);
+                niceMinValue = minValue;
+                niceMaxValue = maxValue;
+                range = niceRange;
+                majorTickSpacing = calcNiceNumber(niceRange / (maxNoOfMajorTicks - 1), true);
+                minorTickSpacing = calcNiceNumber(majorTickSpacing / (maxNoOfMinorTicks - 1), true);
+            }
+
+            switch (gaugeType.type) {
+            case 'type1':
+                freeAreaAngle = 0;
+                rotationOffset = PI;
+                tickmarkOffset = HALF_PI;
+                angleRange = HALF_PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type2':
+                freeAreaAngle = 0;
+                rotationOffset = PI;
+                tickmarkOffset = HALF_PI;
+                angleRange = PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type3':
+                freeAreaAngle = 0;
+                rotationOffset = HALF_PI;
+                tickmarkOffset = 0;
+                angleRange = 1.5 * PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type4':
+            /* falls through */
+            default:
+                freeAreaAngle = 60 * RAD_FACTOR;
+                rotationOffset = HALF_PI + (freeAreaAngle / 2);
+                tickmarkOffset = 0;
+                angleRange = TWO_PI - freeAreaAngle;
+                angleStep = angleRange / range;
+                break;
+            }
+            angle = rotationOffset + (value - minValue) * angleStep;
+        };
+
+        // **************   Buffer creation  ********************
+        // Buffer for the frame
+        var frameBuffer = createBuffer(size, size);
+        var frameContext = frameBuffer.getContext('2d');
+
+        // Buffer for the background
+        var backgroundBuffer = createBuffer(size, size);
+        var backgroundContext = backgroundBuffer.getContext('2d');
+
+        var lcdBuffer;
+
+        // Buffer for led on painting code
+        var ledBufferOn = createBuffer(ledSize, ledSize);
+        var ledContextOn = ledBufferOn.getContext('2d');
+
+        // Buffer for led off painting code
+        var ledBufferOff = createBuffer(ledSize, ledSize);
+        var ledContextOff = ledBufferOff.getContext('2d');
+
+        // Buffer for current led painting code
+        var ledBuffer = ledBufferOff;
+
+        // Buffer for user led on painting code
+        var userLedBufferOn = createBuffer(ledSize, ledSize);
+        var userLedContextOn = userLedBufferOn.getContext('2d');
+
+        // Buffer for user led off painting code
+        var userLedBufferOff = createBuffer(ledSize, ledSize);
+        var userLedContextOff = userLedBufferOff.getContext('2d');
+
+        // Buffer for current user led painting code
+        var userLedBuffer = userLedBufferOff;
+
+        // Buffer for the minMeasuredValue indicator
+        var minMeasuredValueBuffer = createBuffer(Math.ceil(size * 0.028037), Math.ceil(size * 0.028037));
+        var minMeasuredValueCtx = minMeasuredValueBuffer.getContext('2d');
+
+        // Buffer for the maxMeasuredValue indicator
+        var maxMeasuredValueBuffer = createBuffer(Math.ceil(size * 0.028037), Math.ceil(size * 0.028037));
+        var maxMeasuredValueCtx = maxMeasuredValueBuffer.getContext('2d');
+
+        // Buffer for pointer image painting code
+        var pointerBuffer = createBuffer(size, size);
+        var pointerContext = pointerBuffer.getContext('2d');
+
+        // Buffer for static foreground painting code
+        var foregroundBuffer = createBuffer(size, size);
+        var foregroundContext = foregroundBuffer.getContext('2d');
+
+        // Buffers for trend indicators
+        var trendUpBuffer, trendSteadyBuffer, trendDownBuffer, trendOffBuffer;
+
+        // Buffer for odometer
+        var odoGauge, odoBuffer, odoContext;
+        if (useOdometer && lcdVisible) {
+            odoBuffer = createBuffer(10, 10);          // size doesn't matter, it will get reset by odometer code
+            odoContext = odoBuffer.getContext('2d');
+        }
+
+        // **************   Image creation  ********************
+        var drawLcdText = function (ctx, value) {
+            ctx.restore();
+            ctx.save();
+            ctx.textAlign = 'right';
+            ctx.strokeStyle = lcdColor.textColor;
+            ctx.fillStyle = lcdColor.textColor;
+
+            if (lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) {
+                ctx.shadowColor = 'gray';
+                ctx.shadowOffsetX = imageWidth * 0.007;
+                ctx.shadowOffsetY = imageWidth * 0.007;
+                ctx.shadowBlur = imageWidth * 0.007;
+            }
+            if (digitalFont) {
+                ctx.font = lcdFont;
+            } else {
+                ctx.font = stdFont;
+            }
+            ctx.fillText(value.toFixed(lcdDecimals), lcdPosX + lcdWidth - lcdWidth * 0.05, lcdPosY + lcdHeight * 0.5 + lcdFontHeight * 0.38, lcdWidth * 0.9);
+
+            ctx.restore();
+        };
+
+        var drawPostsImage = function (ctx) {
+            ctx.save();
+
+            if ('type1' === gaugeType.type) {
+                // Draw max center top post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.523364, imageHeight * 0.130841);
+            }
+
+            if ('type1' === gaugeType.type || 'type2' === gaugeType.type) {
+                // Draw min left post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.130841, imageHeight * 0.514018);
+            }
+
+            if ('type2' === gaugeType.type || 'type3' === gaugeType.type) {
+                // Draw max right post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.831775, imageHeight * 0.514018);
+            }
+
+            if ('type3' === gaugeType.type) {
+                // Draw min center bottom post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.523364, imageHeight * 0.831775);
+            }
+
+            if ('type4' === gaugeType.type) {
+                // Min post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.336448, imageHeight * 0.803738);
+
+                // Max post
+                ctx.drawImage(createKnobImage(Math.ceil(imageHeight * 0.037383), steelseries.KnobType.STANDARD_KNOB, knobStyle), imageWidth * 0.626168, imageHeight * 0.803738);
+            }
+
+            ctx.restore();
+
+        };
+
+        var createThresholdImage = function () {
+            var thresholdBuffer = doc.createElement('canvas');
+            thresholdBuffer.width = Math.ceil(size * 0.046728);
+            thresholdBuffer.height = Math.ceil(thresholdBuffer.width * 0.9);
+            var thresholdCtx = thresholdBuffer.getContext('2d');
+
+            thresholdCtx.save();
+            var gradThreshold = thresholdCtx.createLinearGradient(0, 0.1, 0, thresholdBuffer.height * 0.9);
+            gradThreshold.addColorStop(0, '#520000');
+            gradThreshold.addColorStop(0.3, '#fc1d00');
+            gradThreshold.addColorStop(0.59, '#fc1d00');
+            gradThreshold.addColorStop(1, '#520000');
+            thresholdCtx.fillStyle = gradThreshold;
+
+            thresholdCtx.beginPath();
+            thresholdCtx.moveTo(thresholdBuffer.width * 0.5, 0.1);
+            thresholdCtx.lineTo(thresholdBuffer.width * 0.9, thresholdBuffer.height * 0.9);
+            thresholdCtx.lineTo(thresholdBuffer.width * 0.1, thresholdBuffer.height * 0.9);
+            thresholdCtx.lineTo(thresholdBuffer.width * 0.5, 0.1);
+            thresholdCtx.closePath();
+
+            thresholdCtx.fill();
+            thresholdCtx.strokeStyle = '#FFFFFF';
+            thresholdCtx.stroke();
+
+            thresholdCtx.restore();
+
+            return thresholdBuffer;
+        };
+
+        var drawAreaSectionImage = function (ctx, start, stop, color, filled) {
+            if (start < minValue) {
+                start = minValue;
+            } else if (start > maxValue) {
+                start = maxValue;
+            }
+            if (stop < minValue) {
+                stop = minValue;
+            } else if (stop > maxValue) {
+                stop = maxValue;
+            }
+            if (start >= stop) {
+                return;
+            }
+            ctx.save();
+            ctx.strokeStyle = color;
+            ctx.fillStyle = color;
+            ctx.lineWidth = imageWidth * 0.035;
+            var startAngle = (angleRange / range * start - angleRange / range * minValue);
+            var stopAngle = startAngle + (stop - start) / (range / angleRange);
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset);
+            ctx.beginPath();
+            if (filled) {
+                ctx.moveTo(0, 0);
+                ctx.arc(0, 0, imageWidth * 0.365 - ctx.lineWidth / 2, startAngle, stopAngle, false);
+            } else {
+                ctx.arc(0, 0, imageWidth * 0.365, startAngle, stopAngle, false);
+            }
+            if (filled) {
+                ctx.moveTo(0, 0);
+                ctx.fill();
+            } else {
+                ctx.stroke();
+            }
+
+            ctx.translate(-centerX, -centerY);
+            ctx.restore();
+        };
+
+        var drawTickmarksImage = function (ctx, labelNumberFormat) {
+            var fontSize = Math.ceil(imageWidth * 0.04),
+                alpha = rotationOffset,      // Tracks total rotation
+                rotationStep = angleStep * minorTickSpacing,
+                textRotationAngle,
+                valueCounter = minValue,
+                majorTickCounter = maxNoOfMinorTicks - 1,
+                OUTER_POINT = imageWidth * 0.38,
+                MAJOR_INNER_POINT = imageWidth * 0.35,
+                MED_INNER_POINT = imageWidth * 0.355,
+                MINOR_INNER_POINT = imageWidth * 0.36,
+                TEXT_TRANSLATE_X = imageWidth * 0.3,
+                TEXT_WIDTH = imageWidth * 0.1,
+                HALF_MAX_NO_OF_MINOR_TICKS = maxNoOfMinorTicks / 2,
+                MAX_VALUE_ROUNDED = parseFloat(maxValue.toFixed(2)),
+                i;
+
+            backgroundColor.labelColor.setAlpha(1);
+            ctx.save();
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.font = fontSize + 'px ' + stdFontName;
+            ctx.strokeStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset);
+
+            if (gaugeType.type === 'type1' || gaugeType.type === 'type2') {
+                TEXT_WIDTH = imageWidth * 0.04;
+            }
+
+            for (i = minValue; parseFloat(i.toFixed(2)) <= MAX_VALUE_ROUNDED; i += minorTickSpacing) {
+                textRotationAngle = rotationStep + HALF_PI;
+                majorTickCounter++;
+                // Draw major tickmarks
+                if (majorTickCounter === maxNoOfMinorTicks) {
+                    ctx.lineWidth = 1.5;
+                    ctx.beginPath();
+                    ctx.moveTo(OUTER_POINT, 0);
+                    ctx.lineTo(MAJOR_INNER_POINT, 0);
+                    ctx.closePath();
+                    ctx.stroke();
+                    ctx.save();
+                    ctx.translate(TEXT_TRANSLATE_X, 0);
+
+                    switch (tickLabelOrientation.type) {
+                    case 'horizontal':
+                        textRotationAngle = -alpha;
+                        break;
+
+                    case 'tangent':
+                        textRotationAngle = (alpha <= HALF_PI + PI ? PI : 0);
+                        break;
+
+                    case 'normal':
+                    /* falls through */
+                    default:
+                        textRotationAngle = HALF_PI;
+                        break;
+                    }
+                    ctx.rotate(textRotationAngle);
+
+                    switch (labelNumberFormat.format) {
+                    case 'fractional':
+                        ctx.fillText((valueCounter.toFixed(fractionalScaleDecimals)), 0, 0, TEXT_WIDTH);
+                        break;
+
+                    case 'scientific':
+                        ctx.fillText((valueCounter.toPrecision(2)), 0, 0, TEXT_WIDTH);
+                        break;
+
+                    case 'standard':
+                    /* falls through */
+                    default:
+                        ctx.fillText((valueCounter.toFixed(0)), 0, 0, TEXT_WIDTH);
+                        break;
+                    }
+                    ctx.translate(-TEXT_TRANSLATE_X, 0);
+                    ctx.restore();
+
+                    valueCounter += majorTickSpacing;
+                    majorTickCounter = 0;
+                    ctx.rotate(rotationStep);
+                    alpha += rotationStep;
+                    continue;
+                }
+
+                // Draw tickmark every minor tickmark spacing
+                if (0 === maxNoOfMinorTicks % 2 && majorTickCounter === (HALF_MAX_NO_OF_MINOR_TICKS)) {
+                    ctx.lineWidth = 1;
+                    ctx.beginPath();
+                    ctx.moveTo(OUTER_POINT, 0);
+                    ctx.lineTo(MED_INNER_POINT, 0);
+                    ctx.closePath();
+                    ctx.stroke();
+                } else {
+                    ctx.lineWidth = 0.5;
+                    ctx.beginPath();
+                    ctx.moveTo(OUTER_POINT, 0);
+                    ctx.lineTo(MINOR_INNER_POINT, 0);
+                    ctx.closePath();
+                    ctx.stroke();
+                }
+                ctx.rotate(rotationStep);
+                alpha += rotationStep;
+            }
+
+            /*
+             // Logarithmic scale
+             var tmp = 0.1;
+             var minValueLog10 = 0.1;
+             var maxValueLog10 = parseInt(Math.pow(10, Math.ceil(Math.log10(maxValue))));
+             var drawLabel = true;
+             angleStep = angleRange / (maxValueLog10 - minValueLog10)
+             for (var scaleFactor = minValueLog10 ; scaleFactor <= maxValueLog10 ; scaleFactor *= 10)
+             {
+             for (var i = parseFloat((1 * scaleFactor).toFixed(1)) ; i < parseFloat((10 * scaleFactor).toFixed(1)) ; i += scaleFactor)
+             {
+             textRotationAngle =+ rotationStep + HALF_PI;
+
+             if(drawLabel)
+             {
+             ctx.lineWidth = 1.5;
+             ctx.beginPath();
+             ctx.moveTo(imageWidth * 0.38,0);
+             ctx.lineTo(imageWidth * 0.35,0);
+             ctx.closePath();
+             ctx.stroke();
+             ctx.save();
+             ctx.translate(imageWidth * 0.31, 0);
+             ctx.rotate(textRotationAngle);
+             ctx.fillText(parseFloat((i).toFixed(1)), 0, 0, imageWidth * 0.0375);
+             ctx.translate(-imageWidth * 0.31, 0);
+             ctx.restore();
+             drawLabel = false;
+             }
+             else
+             {
+             ctx.lineWidth = 0.5;
+             ctx.beginPath();
+             ctx.moveTo(imageWidth * 0.38,0);
+             ctx.lineTo(imageWidth * 0.36,0);
+             ctx.closePath();
+             ctx.stroke();
+             }
+             //doc.write('log10 scale value: ' + parseFloat((i).toFixed(1)) + '<br>');
+             //Math.log10(parseFloat((i).toFixed(1)));
+
+             ctx.rotate(rotationStep);
+             }
+             tmp = 0.1;
+             drawLabel = true;
+             }
+             */
+
+            ctx.translate(-centerX, -centerY);
+            ctx.restore();
+        };
+
+        // **************   Initialization  ********************
+        // Draw all static painting code to background
+        var init = function (parameters) {
+            parameters = parameters || {};
+            var drawFrame = (undefined === parameters.frame ? false : parameters.frame);
+            var drawBackground = (undefined === parameters.background ? false : parameters.background);
+            var drawLed = (undefined === parameters.led ? false : parameters.led);
+            var drawUserLed = (undefined === parameters.userLed ? false : parameters.userLed);
+            var drawPointer = (undefined === parameters.pointer ? false : parameters.pointer);
+            var drawForeground = (undefined === parameters.foreground ? false : parameters.foreground);
+            var drawTrend = (undefined === parameters.trend ? false : parameters.trend);
+            var drawOdo = (undefined === parameters.odo ? false : parameters.odo);
+
+            initialized = true;
+
+            // Calculate the current min and max values and the range
+            calculate();
+
+            // Create frame in frame buffer (backgroundBuffer)
+            if (drawFrame && frameVisible) {
+                drawRadialFrameImage(frameContext, frameDesign, centerX, centerY, imageWidth, imageHeight);
+            }
+
+            // Create background in background buffer (backgroundBuffer)
+            if (drawBackground && backgroundVisible) {
+                drawRadialBackgroundImage(backgroundContext, backgroundColor, centerX, centerY, imageWidth, imageHeight);
+
+                // Create custom layer in background buffer (backgroundBuffer)
+                drawRadialCustomImage(backgroundContext, customLayer, centerX, centerY, imageWidth, imageHeight);
+            }
+
+            if (drawLed) {
+                // Draw LED ON in ledBuffer_ON
+                ledContextOn.drawImage(createLedImage(Math.ceil(size * 0.093457), 1, ledColor), 0, 0);
+
+                // Draw LED OFF in ledBuffer_OFF
+                ledContextOff.drawImage(createLedImage(Math.ceil(size * 0.093457), 0, ledColor), 0, 0);
+            }
+
+            if (drawUserLed) {
+                // Draw user LED ON in userLedBuffer_ON
+                userLedContextOn.drawImage(createLedImage(Math.ceil(size * 0.093457), 1, userLedColor), 0, 0);
+
+                // Draw user LED OFF in userLedBuffer_OFF
+                userLedContextOff.drawImage(createLedImage(Math.ceil(size * 0.093457), 0, userLedColor), 0, 0);
+            }
+
+            // Draw min measured value indicator in minMeasuredValueBuffer
+            if (minMeasuredValueVisible) {
+                minMeasuredValueCtx.drawImage(createMeasuredValueImage(Math.ceil(size * 0.028037), steelseries.ColorDef.BLUE.dark.getRgbaColor(), true, true), 0, 0);
+            }
+
+            // Draw max measured value indicator in maxMeasuredValueBuffer
+            if (maxMeasuredValueVisible) {
+                maxMeasuredValueCtx.drawImage(createMeasuredValueImage(Math.ceil(size * 0.028037), steelseries.ColorDef.RED.medium.getRgbaColor(), true), 0, 0);
+            }
+
+            // Create alignment posts in background buffer (backgroundBuffer)
+            if (drawBackground && backgroundVisible) {
+                drawPostsImage(backgroundContext);
+
+                // Create section in background buffer (backgroundBuffer)
+                if (null !== section && 0 < section.length) {
+                    var sectionIndex = section.length;
+                    do {
+                        sectionIndex--;
+                        drawAreaSectionImage(backgroundContext, section[sectionIndex].start, section[sectionIndex].stop, section[sectionIndex].color, false);
+                    }
+                    while (0 < sectionIndex);
+                }
+
+                // Create area in background buffer (backgroundBuffer)
+                if (null !== area && 0 < area.length) {
+                    var areaIndex = area.length;
+                    do {
+                        areaIndex--;
+                        drawAreaSectionImage(backgroundContext, area[areaIndex].start, area[areaIndex].stop, area[areaIndex].color, true);
+                    }
+                    while (0 < areaIndex);
+                }
+
+                // Create tickmarks in background buffer (backgroundBuffer)
+                drawTickmarksImage(backgroundContext, labelNumberFormat);
+
+                // Create title in background buffer (backgroundBuffer)
+                drawTitleImage(backgroundContext, imageWidth, imageHeight, titleString, unitString, backgroundColor, true, true);
+            }
+
+            // Draw threshold image to background context
+            if (drawBackground && thresholdVisible) {
+                backgroundContext.save();
+                backgroundContext.translate(centerX, centerY);
+                backgroundContext.rotate(rotationOffset + (threshold - minValue) * angleStep + HALF_PI);
+                backgroundContext.translate(-centerX, -centerY);
+                backgroundContext.drawImage(createThresholdImage(), imageWidth * 0.475, imageHeight * 0.13);
+                backgroundContext.translate(centerX, centerY);
+                backgroundContext.restore();
+            }
+
+            // Create lcd background if selected in background buffer (backgroundBuffer)
+            if (drawBackground && lcdVisible) {
+                if (useOdometer && drawOdo) {
+                    odoGauge = new steelseries.Odometer('', {
+                            _context: odoContext,
+                            height: size * 0.075,
+                            decimals: odometerParams.decimals,
+                            digits: (odometerParams.digits === undefined ? 5 : odometerParams.digits),
+                            valueForeColor: odometerParams.valueForeColor,
+                            valueBackColor: odometerParams.valueBackColor,
+                            decimalForeColor: odometerParams.decimalForeColor,
+                            decimalBackColor: odometerParams.decimalBackColor,
+                            font: odometerParams.font,
+                            value: value
+                        });
+                    odoPosX = (imageWidth - odoBuffer.width) / 2;
+                } else if (!useOdometer) {
+                    lcdBuffer = createLcdBackgroundImage(lcdWidth, lcdHeight, lcdColor);
+                    backgroundContext.drawImage(lcdBuffer, lcdPosX, lcdPosY);
+                }
+            }
+
+            // Create pointer image in pointer buffer (contentBuffer)
+            if (drawPointer) {
+                drawPointerImage(pointerContext, imageWidth, pointerType, pointerColor, backgroundColor.labelColor);
+            }
+
+            // Create foreground in foreground buffer (foregroundBuffer)
+            if (drawForeground && foregroundVisible) {
+                var knobVisible = (pointerType.type === 'type15' || pointerType.type === 'type16' ? false : true);
+                drawRadialForegroundImage(foregroundContext, foregroundType, imageWidth, imageHeight, knobVisible, knobType, knobStyle, gaugeType);
+            }
+
+            // Create the trend indicator buffers
+            if (drawTrend && trendVisible) {
+                trendUpBuffer = createTrendIndicator(trendSize, steelseries.TrendState.UP, trendColors);
+                trendSteadyBuffer = createTrendIndicator(trendSize, steelseries.TrendState.STEADY, trendColors);
+                trendDownBuffer = createTrendIndicator(trendSize, steelseries.TrendState.DOWN, trendColors);
+                trendOffBuffer = createTrendIndicator(trendSize, steelseries.TrendState.OFF, trendColors);
+            }
+        };
+
+        var resetBuffers = function (buffers) {
+            buffers = buffers || {};
+            var resetFrame = (undefined === buffers.frame ? false : buffers.frame);
+            var resetBackground = (undefined === buffers.background ? false : buffers.background);
+            var resetLed = (undefined === buffers.led ? false : buffers.led);
+            var resetUserLed = (undefined === buffers.userLed ? false : buffers.userLed);
+            var resetPointer = (undefined === buffers.pointer ? false : buffers.pointer);
+            var resetForeground = (undefined === buffers.foreground ? false : buffers.foreground);
+
+            if (resetFrame) {
+                frameBuffer.width = size;
+                frameBuffer.height = size;
+                frameContext = frameBuffer.getContext('2d');
+            }
+
+            if (resetBackground) {
+                backgroundBuffer.width = size;
+                backgroundBuffer.height = size;
+                backgroundContext = backgroundBuffer.getContext('2d');
+            }
+
+            if (resetLed) {
+                ledBufferOn.width = Math.ceil(size * 0.093457);
+                ledBufferOn.height = Math.ceil(size * 0.093457);
+                ledContextOn = ledBufferOn.getContext('2d');
+
+                ledBufferOff.width = Math.ceil(size * 0.093457);
+                ledBufferOff.height = Math.ceil(size * 0.093457);
+                ledContextOff = ledBufferOff.getContext('2d');
+
+                // Buffer for current led painting code
+                ledBuffer = ledBufferOff;
+            }
+
+            if (resetUserLed) {
+                userLedBufferOn.width = Math.ceil(size * 0.093457);
+                userLedBufferOn.height = Math.ceil(size * 0.093457);
+                userLedContextOn = userLedBufferOn.getContext('2d');
+
+                userLedBufferOff.width = Math.ceil(size * 0.093457);
+                userLedBufferOff.height = Math.ceil(size * 0.093457);
+                userLedContextOff = userLedBufferOff.getContext('2d');
+
+                // Buffer for current user led painting code
+                userLedBuffer = userLedBufferOff;
+            }
+
+            if (resetPointer) {
+                pointerBuffer.width = size;
+                pointerBuffer.height = size;
+                pointerContext = pointerBuffer.getContext('2d');
+            }
+
+            if (resetForeground) {
+                foregroundBuffer.width = size;
+                foregroundBuffer.height = size;
+                foregroundContext = foregroundBuffer.getContext('2d');
+            }
+        };
+
+        var toggleAndRepaintLed = function () {
+            if (ledVisible) {
+                if (ledBuffer === ledBufferOn) {
+                    ledBuffer = ledBufferOff;
+                } else {
+                    ledBuffer = ledBufferOn;
+                }
+                if (!repainting) {
+                    repainting = true;
+                    requestAnimFrame(self.repaint);
+                }
+            }
+        };
+
+        var toggleAndRepaintUserLed = function () {
+            if (userLedVisible) {
+                if (userLedBuffer === userLedBufferOn) {
+                    userLedBuffer = userLedBufferOff;
+                } else {
+                    userLedBuffer = userLedBufferOn;
+                }
+                if (!repainting) {
+                    repainting = true;
+                    requestAnimFrame(self.repaint);
+                }
+            }
+        };
+
+        var blink = function (blinking) {
+            if (blinking) {
+                ledTimerId = setInterval(toggleAndRepaintLed, 1000);
+            } else {
+                clearInterval(ledTimerId);
+                ledBuffer = ledBufferOff;
+            }
+        };
+
+        var blinkUser = function (blinking) {
+            if (blinking) {
+                userLedTimerId = setInterval(toggleAndRepaintUserLed, 1000);
+            } else {
+                clearInterval(userLedTimerId);
+                userLedBuffer = userLedBufferOff;
+            }
+        };
+
+        //************************************ Public methods **************************************
+        this.setValue = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
+            if (value !== targetValue) {
+                value = targetValue;
+
+                if (value > maxMeasuredValue) {
+                    maxMeasuredValue = value;
+                }
+                if (value < minMeasuredValue) {
+                    minMeasuredValue = value;
+                }
+
+                if ((value >= threshold && !ledBlinking && thresholdRising) ||
+                    (value <= threshold && !ledBlinking && !thresholdRising)) {
+                    ledBlinking = true;
+                    blink(ledBlinking);
+                    if (playAlarm) {
+                        audioElement.play();
+                    }
+                } else if ((value < threshold && ledBlinking && thresholdRising) ||
+                           (value > threshold && ledBlinking && !thresholdRising)) {
+                    ledBlinking = false;
+                    blink(ledBlinking);
+                    if (playAlarm) {
+                        audioElement.pause();
+                    }
+                }
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.getValue = function () {
+            return value;
+        };
+
+        this.setOdoValue = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = (newValue < 0 ? 0 : newValue);
+            if (odoValue !== targetValue) {
+                odoValue = targetValue;
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.getOdoValue = function () {
+            return odoValue;
+        };
+
+        this.setValueAnimated = function (newValue, callback) {
+            newValue = parseFloat(newValue);
+            var targetValue = (newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue)),
+                gauge = this,
+                time;
+
+            if (value !== targetValue) {
+                if (undefined !== tween && tween.isPlaying) {
+                    tween.stop();
+                }
+                time = fullScaleDeflectionTime * Math.abs(targetValue - value) / (maxValue - minValue);
+                time = Math.max(time, fullScaleDeflectionTime / 5);
+                tween = new Tween({}, '', Tween.regularEaseInOut, value, targetValue, time);
+                //tween = new Tween({}, '', Tween.regularEaseInOut, value, targetValue, 1);
+                //tween = new Tween(new Object(), '', Tween.strongEaseInOut, value, targetValue, 1);
+
+                tween.onMotionChanged = function (event) {
+                    value = event.target._pos;
+
+                    if ((value >= threshold && !ledBlinking && thresholdRising) ||
+                        (value <= threshold && !ledBlinking && !thresholdRising)) {
+                        ledBlinking = true;
+                        blink(ledBlinking);
+                        if (playAlarm) {
+                            audioElement.play();
+                        }
+                    } else if ((value < threshold && ledBlinking && thresholdRising) ||
+                               (value > threshold && ledBlinking && !thresholdRising)) {
+                        ledBlinking = false;
+                        blink(ledBlinking);
+                        if (playAlarm) {
+                            audioElement.pause();
+                        }
+                    }
+
+                    if (value > maxMeasuredValue) {
+                        maxMeasuredValue = value;
+                    }
+                    if (value < minMeasuredValue) {
+                        minMeasuredValue = value;
+                    }
+                    if (!repainting) {
+                        repainting = true;
+                        requestAnimFrame(gauge.repaint);
+                    }
+                };
+
+                // do we have a callback function to process?
+                if (callback && typeof(callback) === "function") {
+                    tween.onMotionFinished = callback;
+                }
+
+                tween.start();
+            }
+            return this;
+        };
+
+        this.resetMinMeasuredValue = function () {
+            minMeasuredValue = value;
+            this.repaint();
+        };
+
+        this.resetMaxMeasuredValue = function () {
+            maxMeasuredValue = value;
+            this.repaint();
+            return this;
+        };
+
+        this.setMinMeasuredValueVisible = function (visible) {
+            minMeasuredValueVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setMaxMeasuredValueVisible = function (visible) {
+            maxMeasuredValueVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setMaxMeasuredValue = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
+            maxMeasuredValue = targetValue;
+            this.repaint();
+            return this;
+        };
+
+        this.setMinMeasuredValue = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
+            minMeasuredValue = targetValue;
+            this.repaint();
+            return this;
+        };
+
+        this.setTitleString = function (title) {
+            titleString = title;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setUnitString = function (unit) {
+            unitString = unit;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setMinValue = function (value) {
+            minValue = parseFloat(value);
+            resetBuffers({frame: true,
+                          background: true});
+            init({frame: true,
+                  background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.getMinValue = function () {
+            return minValue;
+        };
+
+        this.setMaxValue = function (value) {
+            maxValue = parseFloat(value);
+            resetBuffers({frame: true,
+                          background: true});
+            init({frame: true,
+                  background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.getMaxValue = function () {
+            return maxValue;
+        };
+
+        this.setThreshold = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
+            threshold = targetValue;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setArea = function (areaVal) {
+            area = areaVal;
+            resetBuffers({background: true,
+                          foreground: true});
+            init({background: true,
+                  foreground: true
+                  });
+            this.repaint();
+            return this;
+        };
+
+        this.setSection = function (areaSec) {
+            section = areaSec;
+            resetBuffers({background: true,
+                          foreground: true});
+            init({background: true,
+                  foreground: true
+                  });
+            this.repaint();
+            return this;
+        };
+
+        this.setThresholdVisible = function (visible) {
+            thresholdVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setThresholdRising = function (rising) {
+            thresholdRising = !!rising;
+            // reset existing threshold alerts
+            ledBlinking = !ledBlinking;
+            blink(ledBlinking);
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdDecimals = function (decimals) {
+            lcdDecimals = parseInt(decimals, 10);
+            this.repaint();
+            return this;
+        };
+
+        this.setFrameDesign = function (newFrameDesign) {
+            resetBuffers({frame: true});
+            frameDesign = newFrameDesign;
+            init({frame: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setBackgroundColor = function (newBackgroundColor) {
+            resetBuffers({background: true,
+                          pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false)       // type2 & 13 depend on background
+                });
+            backgroundColor = newBackgroundColor;
+            init({background: true,   // type2 & 13 depend on background
+                  pointer: (pointerType.type === 'type2' || pointerType.type === 'type13' ? true : false)
+                });
+            this.repaint();
+            return this;
+        };
+
+        this.setForegroundType = function (newForegroundType) {
+            resetBuffers({foreground: true});
+            foregroundType = newForegroundType;
+            init({foreground: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerType = function (newPointerType) {
+            resetBuffers({pointer: true,
+                          foreground: true
+                         });
+            pointerType = newPointerType;
+            init({pointer: true,
+                  foreground: true
+                  });
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerColor = function (newPointerColor) {
+            resetBuffers({pointer: true});
+            pointerColor = newPointerColor;
+            init({pointer: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLedColor = function (newLedColor) {
+            resetBuffers({led: true});
+            ledColor = newLedColor;
+            init({led: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedColor = function (newLedColor) {
+            resetBuffers({userLed: true});
+            userLedColor = newLedColor;
+            init({userLed: true});
+            this.repaint();
+            return this;
+        };
+
+        this.toggleUserLed = function () {
+            if (userLedBuffer === userLedBufferOn) {
+                userLedBuffer = userLedBufferOff;
+            } else {
+                userLedBuffer = userLedBufferOn;
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedOnOff = function (on) {
+            if (true === on) {
+                userLedBuffer = userLedBufferOn;
+            } else {
+                userLedBuffer = userLedBufferOff;
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.blinkUserLed = function (blink) {
+            if (blink) {
+                if (!userLedBlinking) {
+                    blinkUser(true);
+                    userLedBlinking = true;
+                }
+            } else {
+                if (userLedBlinking) {
+                    clearInterval(userLedTimerId);
+                    userLedBlinking = false;
+                }
+            }
+            return this;
+        };
+
+        this.setLedVisible = function (visible) {
+            ledVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedVisible = function (visible) {
+            userLedVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdColor = function (newLcdColor) {
+            lcdColor = newLcdColor;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setTrend = function (newValue) {
+            trendIndicator = newValue;
+            this.repaint();
+            return this;
+        };
+
+        this.setTrendVisible = function (visible) {
+            trendVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setFractionalScaleDecimals = function (decimals) {
+            fractionalScaleDecimals = parseInt(decimals, 10);
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLabelNumberFormat = function (format) {
+            labelNumberFormat = format;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.repaint = function () {
+            if (!initialized) {
+                init({frame: true,
+                      background: true,
+                      led: true,
+                      userLed: true,
+                      pointer: true,
+                      trend: true,
+                      foreground: true,
+                      odo: true});
+            }
+            mainCtx.clearRect(0, 0, size, size);
+
+            // Draw frame
+            if (frameVisible) {
+                mainCtx.drawImage(frameBuffer, 0, 0);
+            }
+
+            // Draw buffered image to visible canvas
+            mainCtx.drawImage(backgroundBuffer, 0, 0);
+
+            // Draw lcd display
+            if (lcdVisible) {
+                if (useOdometer) {
+                    odoGauge.setValue(odometerUseValue ? value : odoValue);
+                    mainCtx.drawImage(odoBuffer, odoPosX, odoPosY);
+                } else {
+                    drawLcdText(mainCtx, value);
+                }
+            }
+
+            // Draw led
+            if (ledVisible) {
+                mainCtx.drawImage(ledBuffer, ledPosX, ledPosY);
+            }
+
+            // Draw user led
+            if (userLedVisible) {
+                mainCtx.drawImage(userLedBuffer, userLedPosX, userLedPosY);
+            }
+
+            // Draw the trend indicator
+            if (trendVisible) {
+                switch (trendIndicator.state) {
+                case 'up':
+                    mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY);
+                    break;
+                case 'steady':
+                    mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY);
+                    break;
+                case 'down':
+                    mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY);
+                    break;
+                case 'off':
+                    mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY);
+                    break;
+                }
+            }
+
+            // Draw min measured value indicator
+            if (minMeasuredValueVisible) {
+                mainCtx.save();
+                mainCtx.translate(centerX, centerY);
+                mainCtx.rotate(rotationOffset + HALF_PI + (minMeasuredValue - minValue) * angleStep);
+                mainCtx.translate(-centerX, -centerY);
+                mainCtx.drawImage(minMeasuredValueBuffer, mainCtx.canvas.width * 0.4865, mainCtx.canvas.height * 0.105);
+                mainCtx.restore();
+            }
+
+            // Draw max measured value indicator
+            if (maxMeasuredValueVisible) {
+                mainCtx.save();
+                mainCtx.translate(centerX, centerY);
+                mainCtx.rotate(rotationOffset + HALF_PI + (maxMeasuredValue - minValue) * angleStep);
+                mainCtx.translate(-centerX, -centerY);
+                mainCtx.drawImage(maxMeasuredValueBuffer, mainCtx.canvas.width * 0.4865, mainCtx.canvas.height * 0.105);
+                mainCtx.restore();
+            }
+
+            angle = rotationOffset + HALF_PI + (value - minValue) * angleStep;
+
+            // Define rotation center
+            mainCtx.save();
+            mainCtx.translate(centerX, centerY);
+            mainCtx.rotate(angle);
+            mainCtx.translate(-centerX, -centerY);
+            // Set the pointer shadow params
+            mainCtx.shadowColor = 'rgba(0, 0, 0, 0.8)';
+            mainCtx.shadowOffsetX = mainCtx.shadowOffsetY = shadowOffset;
+            mainCtx.shadowBlur = shadowOffset * 2;
+            // Draw the pointer
+            mainCtx.drawImage(pointerBuffer, 0, 0);
+            // Undo the translations & shadow settings
+            mainCtx.restore();
+
+            // Draw foreground
+            if (foregroundVisible) {
+                mainCtx.drawImage(foregroundBuffer, 0, 0);
+            }
+
+            repainting = false;
+        };
+
+        // Visualize the component
+        this.repaint();
+
+        return this;
+    };
+
+    var radialBargraph = function (canvas, parameters) {
+        parameters = parameters || {};
+        var gaugeType = (undefined === parameters.gaugeType ? steelseries.GaugeType.TYPE4 : parameters.gaugeType),
+            size = (undefined === parameters.size ? 0 : parameters.size),
+            minValue = (undefined === parameters.minValue ? 0 : parameters.minValue),
+            maxValue = (undefined === parameters.maxValue ? (minValue + 100) : parameters.maxValue),
+            niceScale = (undefined === parameters.niceScale ? true : parameters.niceScale),
+            threshold = (undefined === parameters.threshold ? (maxValue - minValue) / 2 + minValue: parameters.threshold),
+            thresholdRising = (undefined === parameters.thresholdRising ? true : parameters.thresholdRising),
+            section = (undefined === parameters.section ? null : parameters.section),
+            useSectionColors = (undefined === parameters.useSectionColors ? false : parameters.useSectionColors),
+            titleString = (undefined === parameters.titleString ? '' : parameters.titleString),
+            unitString = (undefined === parameters.unitString ? '' : parameters.unitString),
+            frameDesign = (undefined === parameters.frameDesign ? steelseries.FrameDesign.METAL : parameters.frameDesign),
+            frameVisible = (undefined === parameters.frameVisible ? true : parameters.frameVisible),
+            backgroundColor = (undefined === parameters.backgroundColor ? steelseries.BackgroundColor.DARK_GRAY : parameters.backgroundColor),
+            backgroundVisible = (undefined === parameters.backgroundVisible ? true : parameters.backgroundVisible),
+            valueColor = (undefined === parameters.valueColor ? steelseries.ColorDef.RED : parameters.valueColor),
+            lcdColor = (undefined === parameters.lcdColor ? steelseries.LcdColor.STANDARD : parameters.lcdColor),
+            lcdVisible = (undefined === parameters.lcdVisible ? true : parameters.lcdVisible),
+            lcdDecimals = (undefined === parameters.lcdDecimals ? 2 : parameters.lcdDecimals),
+            digitalFont = (undefined === parameters.digitalFont ? false : parameters.digitalFont),
+            fractionalScaleDecimals = (undefined === parameters.fractionalScaleDecimals ? 1 : parameters.fractionalScaleDecimals),
+            customLayer = (undefined === parameters.customLayer ? null : parameters.customLayer),
+            ledColor = (undefined === parameters.ledColor ? steelseries.LedColor.RED_LED : parameters.ledColor),
+            ledVisible = (undefined === parameters.ledVisible ? true : parameters.ledVisible),
+            userLedColor = (undefined === parameters.userLedColor ? steelseries.LedColor.GREEN_LED : parameters.userLedColor),
+            userLedVisible = (undefined === parameters.userLedVisible ? false : parameters.userLedVisible),
+            labelNumberFormat = (undefined === parameters.labelNumberFormat ? steelseries.LabelNumberFormat.STANDARD : parameters.labelNumberFormat),
+            foregroundType = (undefined === parameters.foregroundType ? steelseries.ForegroundType.TYPE1 : parameters.foregroundType),
+            foregroundVisible = (undefined === parameters.foregroundVisible ? true : parameters.foregroundVisible),
+            playAlarm = (undefined === parameters.playAlarm ? false : parameters.playAlarm),
+            alarmSound = (undefined === parameters.alarmSound ? false : parameters.alarmSound),
+            valueGradient = (undefined === parameters.valueGradient ? null : parameters.valueGradient),
+            useValueGradient = (undefined === parameters.useValueGradient ? false : parameters.useValueGradient),
+            tickLabelOrientation = (undefined === parameters.tickLabelOrientation ? (gaugeType === steelseries.GaugeType.TYPE1 ? steelseries.TickLabelOrientation.TANGENT : steelseries.TickLabelOrientation.NORMAL) : parameters.tickLabelOrientation),
+            trendVisible = (undefined === parameters.trendVisible ? false : parameters.trendVisible),
+            trendColors = (undefined === parameters.trendColors ? [steelseries.LedColor.RED_LED, steelseries.LedColor.GREEN_LED, steelseries.LedColor.CYAN_LED] : parameters.trendColors),
+            fullScaleDeflectionTime = (undefined === parameters.fullScaleDeflectionTime ? 2.5 : parameters.fullScaleDeflectionTime);
+
+        // Get the canvas context and clear it
+        var mainCtx = getCanvasContext(canvas);
+        // Has a size been specified?
+        if (size === 0) {
+            size = Math.min(mainCtx.canvas.width, mainCtx.canvas.height);
+        }
+
+        // Set the size - also clears the canvas
+        mainCtx.canvas.width = size;
+        mainCtx.canvas.height = size;
+
+        // Create audio tag for alarm sound
+        if (playAlarm && alarmSound !== false) {
+            var audioElement = doc.createElement('audio');
+            audioElement.setAttribute('src', alarmSound);
+            audioElement.setAttribute('preload', 'auto');
+        }
+
+        var value = minValue;
+        var range = maxValue - minValue;
+        var ledBlinking = false;
+        var ledTimerId = 0;
+        var userLedBlinking = false;
+        var userLedTimerId = 0;
+        var tween;
+        var self = this;
+        var repainting = false;
+
+        // GaugeType specific private variables
+        var freeAreaAngle;
+        var rotationOffset;
+        var bargraphOffset;
+        var tickmarkOffset;
+        var angleRange;
+        var degAngleRange;
+        var angleStep;
+        var angle;
+
+        var sectionAngles = [];
+        var isSectionsVisible = false;
+        var isGradientVisible = false;
+
+        var imageWidth = size;
+        var imageHeight = size;
+
+        var centerX = imageWidth / 2;
+        var centerY = imageHeight / 2;
+
+        // Misc
+        var lcdFontHeight = Math.floor(imageWidth / 10);
+        var stdFont = lcdFontHeight + 'px ' + stdFontName;
+        var lcdFont = lcdFontHeight + 'px ' + lcdFontName;
+        var lcdHeight = imageHeight * 0.13;
+        var lcdWidth = imageWidth * 0.4;
+        var lcdPosX = (imageWidth - lcdWidth) / 2;
+        var lcdPosY = imageHeight / 2 - lcdHeight / 2;
+
+        // Constants
+        var ACTIVE_LED_POS_X = imageWidth * 0.116822;
+        var ACTIVE_LED_POS_Y = imageWidth * 0.485981;
+        var LED_SIZE = Math.ceil(size * 0.093457);
+        //var LED_POS_X = imageWidth * 0.453271;
+        var LED_POS_X = imageWidth * 0.53;
+        var LED_POS_Y = imageHeight * 0.61;
+        var USER_LED_POS_X = gaugeType === steelseries.GaugeType.TYPE3 ? 0.7 * imageWidth : centerX - LED_SIZE / 2;
+        var USER_LED_POS_Y = gaugeType === steelseries.GaugeType.TYPE3 ? 0.61 * imageHeight : 0.75 * imageHeight;
+
+        var trendIndicator = steelseries.TrendState.OFF;
+        var trendSize = size * 0.06;
+        var trendPosX = size * 0.38;
+        var trendPosY = size * 0.57;
+
+        switch (gaugeType.type) {
+        case 'type1':
+            freeAreaAngle = 0;
+            rotationOffset = PI;
+            bargraphOffset = 0;
+            tickmarkOffset = HALF_PI;
+            angleRange = HALF_PI;
+            degAngleRange = angleRange * DEG_FACTOR;
+            angleStep = angleRange / range;
+            break;
+
+        case 'type2':
+            freeAreaAngle = 0;
+            rotationOffset = PI;
+            bargraphOffset = 0;
+            tickmarkOffset = HALF_PI;
+            angleRange = PI;
+            degAngleRange = angleRange * DEG_FACTOR;
+            angleStep = angleRange / range;
+            break;
+
+        case 'type3':
+            freeAreaAngle = 0;
+            rotationOffset = HALF_PI;
+            bargraphOffset = -HALF_PI;
+            tickmarkOffset = 0;
+            angleRange = 1.5 * PI;
+            degAngleRange = angleRange * DEG_FACTOR;
+            angleStep = angleRange / range;
+            break;
+
+        case 'type4':
+        /* falls through */
+        default:
+            freeAreaAngle = 60 * RAD_FACTOR;
+            rotationOffset = HALF_PI + (freeAreaAngle / 2);
+            bargraphOffset = -TWO_PI / 6;
+            tickmarkOffset = 0;
+            angleRange = TWO_PI - freeAreaAngle;
+            degAngleRange = angleRange * DEG_FACTOR;
+            angleStep = angleRange / range;
+            break;
+        }
+
+        // Buffer for the frame
+        var frameBuffer = createBuffer(size, size);
+        var frameContext = frameBuffer.getContext('2d');
+
+        // Buffer for static background painting code
+        var backgroundBuffer = createBuffer(size, size);
+        var backgroundContext = backgroundBuffer.getContext('2d');
+
+        var lcdBuffer;
+
+        // Buffer for active bargraph led
+        var activeLedBuffer = createBuffer(Math.ceil(size * 0.060747), Math.ceil(size * 0.023364));
+        var activeLedContext = activeLedBuffer.getContext('2d');
+
+        // Buffer for led on painting code
+        var ledBufferOn = createBuffer(LED_SIZE, LED_SIZE);
+        var ledContextOn = ledBufferOn.getContext('2d');
+
+        // Buffer for led off painting code
+        var ledBufferOff = createBuffer(LED_SIZE, LED_SIZE);
+        var ledContextOff = ledBufferOff.getContext('2d');
+
+        // Buffer for current led painting code
+        var ledBuffer = ledBufferOff;
+
+        // Buffer for user led on painting code
+        var userLedBufferOn = createBuffer(LED_SIZE, LED_SIZE);
+        var userLedContextOn = userLedBufferOn.getContext('2d');
+
+        // Buffer for user led off painting code
+        var userLedBufferOff = createBuffer(LED_SIZE, LED_SIZE);
+        var userLedContextOff = userLedBufferOff.getContext('2d');
+
+        // Buffer for current user led painting code
+        var userLedBuffer = userLedBufferOff;
+        // Buffer for the background of the led
+        var ledBackground;
+
+        // Buffer for static foreground painting code
+        var foregroundBuffer = createBuffer(size, size);
+        var foregroundContext = foregroundBuffer.getContext('2d');
+
+        // Buffers for trend indicators
+        var trendUpBuffer, trendSteadyBuffer, trendDownBuffer, trendOffBuffer;
+
+        var initialized = false;
+
+        // Tickmark specific private variables
+        var niceMinValue = minValue;
+        var niceMaxValue = maxValue;
+        var niceRange = maxValue - minValue;
+        range = niceMaxValue - niceMinValue;
+        var minorTickSpacing = 0;
+        var majorTickSpacing = 0;
+        var maxNoOfMinorTicks = 10;
+        var maxNoOfMajorTicks = 10;
+
+        // Method to calculate nice values for min, max and range for the tickmarks
+        var calculate = function calculate() {
+            if (niceScale) {
+                niceRange = calcNiceNumber(maxValue - minValue, false);
+                majorTickSpacing = calcNiceNumber(niceRange / (maxNoOfMajorTicks - 1), true);
+                niceMinValue = Math.floor(minValue / majorTickSpacing) * majorTickSpacing;
+                niceMaxValue = Math.ceil(maxValue / majorTickSpacing) * majorTickSpacing;
+                minorTickSpacing = calcNiceNumber(majorTickSpacing / (maxNoOfMinorTicks - 1), true);
+                minValue = niceMinValue;
+                maxValue = niceMaxValue;
+                range = maxValue - minValue;
+            } else {
+                niceRange = (maxValue - minValue);
+                niceMinValue = minValue;
+                niceMaxValue = maxValue;
+                range = niceRange;
+                //minorTickSpacing = 1;
+                //majorTickSpacing = 10;
+                majorTickSpacing = calcNiceNumber(niceRange / (maxNoOfMajorTicks - 1), true);
+                minorTickSpacing = calcNiceNumber(majorTickSpacing / (maxNoOfMinorTicks - 1), true);
+            }
+
+            switch (gaugeType.type) {
+            case 'type1':
+                freeAreaAngle = 0;
+                rotationOffset = PI;
+                tickmarkOffset = HALF_PI;
+                angleRange = HALF_PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type2':
+                freeAreaAngle = 0;
+                rotationOffset = PI;
+                tickmarkOffset = HALF_PI;
+                angleRange = PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type3':
+                freeAreaAngle = 0;
+                rotationOffset = HALF_PI;
+                tickmarkOffset = 0;
+                angleRange = 1.5 * PI;
+                angleStep = angleRange / range;
+                break;
+
+            case 'type4':       // fall through
+            /* falls through */
+            default:
+                freeAreaAngle = 60 * RAD_FACTOR;
+                rotationOffset = HALF_PI + (freeAreaAngle / 2);
+                tickmarkOffset = 0;
+                angleRange = TWO_PI - freeAreaAngle;
+                angleStep = angleRange / range;
+                break;
+            }
+            angle = rotationOffset + (value - minValue) * angleStep;
+        };
+
+        //********************************* Private methods *********************************
+        // Draw all static painting code to background
+        var init = function (parameters) {
+            parameters = parameters || {};
+            var drawFrame = (undefined === parameters.frame ? false : parameters.frame);
+            var drawBackground = (undefined === parameters.background ? false : parameters.background);
+            var drawLed = (undefined === parameters.led ? false : parameters.led);
+            var drawUserLed = (undefined === parameters.userLed ? false : parameters.userLed);
+            var drawValue =  (undefined === parameters.value ? false : parameters.value);
+            var drawForeground = (undefined === parameters.foreground ? false : parameters.foreground);
+            var drawTrend = (undefined === parameters.trend ? false : parameters.trend);
+
+            initialized = true;
+
+            calculate();
+
+            // Create frame in frame buffer (frameBuffer)
+            if (drawFrame && frameVisible) {
+                drawRadialFrameImage(frameContext, frameDesign, centerX, centerY, imageWidth, imageHeight);
+            }
+
+            // Create background in background buffer (backgroundBuffer)
+            if (drawBackground && backgroundVisible) {
+                drawRadialBackgroundImage(backgroundContext, backgroundColor, centerX, centerY, imageWidth, imageHeight);
+
+                // Create custom layer in background buffer (backgroundBuffer)
+                drawRadialCustomImage(backgroundContext, customLayer, centerX, centerY, imageWidth, imageHeight);
+            }
+
+            if (drawLed) {
+                // Draw LED ON in ledBuffer_ON
+                ledContextOn.drawImage(createLedImage(LED_SIZE, 1, ledColor), 0, 0);
+
+                // Draw LED OFF in ledBuffer_OFF
+                ledContextOff.drawImage(createLedImage(LED_SIZE, 0, ledColor), 0, 0);
+
+                // Buffer the background of the led for blinking
+                ledBackground = backgroundContext.getImageData(LED_POS_X, LED_POS_Y, LED_SIZE, LED_SIZE);
+            }
+
+            if (drawUserLed) {
+                // Draw user LED ON in userLedBuffer_ON
+                userLedContextOn.drawImage(createLedImage(Math.ceil(LED_SIZE), 1, userLedColor), 0, 0);
+
+                // Draw user LED OFF in userLedBuffer_OFF
+                userLedContextOff.drawImage(createLedImage(Math.ceil(LED_SIZE), 0, userLedColor), 0, 0);
+            }
+
+            if (drawBackground) {
+                // Create bargraphtrack in background buffer (backgroundBuffer)
+                drawBargraphTrackImage(backgroundContext);
+            }
+
+            // Create tickmarks in background buffer (backgroundBuffer)
+            if (drawBackground  && backgroundVisible) {
+                drawTickmarksImage(backgroundContext, labelNumberFormat);
+
+                // Create title in background buffer (backgroundBuffer)
+                drawTitleImage(backgroundContext, imageWidth, imageHeight, titleString, unitString, backgroundColor, true, true);
+            }
+
+            // Create lcd background if selected in background buffer (backgroundBuffer)
+            if (drawBackground && lcdVisible) {
+                lcdBuffer = createLcdBackgroundImage(lcdWidth, lcdHeight, lcdColor);
+                backgroundContext.drawImage(lcdBuffer, lcdPosX, lcdPosY);
+            }
+
+            // Convert Section values into angles
+            isSectionsVisible = false;
+            if (useSectionColors && null !== section && 0 < section.length) {
+                isSectionsVisible = true;
+                var sectionIndex = section.length;
+                sectionAngles = [];
+                do {
+                    sectionIndex--;
+                    sectionAngles.push({start: (((section[sectionIndex].start + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
+                                         stop: (((section[sectionIndex].stop + Math.abs(minValue)) / (maxValue - minValue)) * degAngleRange),
+                                        color: customColorDef(section[sectionIndex].color)});
+                } while (0 < sectionIndex);
+            }
+
+            // Use a gradient for the valueColor?
+            isGradientVisible = false;
+            if (useValueGradient && valueGradient !== null) {
+                // force section colors off!
+                isSectionsVisible = false;
+                isGradientVisible = true;
+            }
+
+            // Create an image of an active led in active led buffer (activeLedBuffer)
+            if (drawValue) {
+                drawActiveLed(activeLedContext, valueColor);
+            }
+
+            // Create foreground in foreground buffer (foregroundBuffer)
+            if (drawForeground && foregroundVisible) {
+                drawRadialForegroundImage(foregroundContext, foregroundType, imageWidth, imageHeight, false);
+            }
+
+            // Create the trend indicator buffers
+            if (drawTrend && trendVisible) {
+                trendUpBuffer = createTrendIndicator(trendSize, steelseries.TrendState.UP, trendColors);
+                trendSteadyBuffer = createTrendIndicator(trendSize, steelseries.TrendState.STEADY, trendColors);
+                trendDownBuffer = createTrendIndicator(trendSize, steelseries.TrendState.DOWN, trendColors);
+                trendOffBuffer = createTrendIndicator(trendSize, steelseries.TrendState.OFF, trendColors);
+            }
+        };
+
+        var resetBuffers = function (buffers) {
+            buffers = buffers || {};
+            var resetFrame = (undefined === buffers.frame ? false : buffers.frame);
+            var resetBackground = (undefined === buffers.background ? false : buffers.background);
+            var resetLed = (undefined === buffers.led ? false : buffers.led);
+            var resetUserLed = (undefined === buffers.userLed ? false : buffers.userLed);
+            var resetValue = (undefined === buffers.value ? false : buffers.value);
+            var resetForeground = (undefined === buffers.foreground ? false : buffers.foreground);
+
+            // Buffer for the frame
+            if (resetFrame) {
+                frameBuffer.width = size;
+                frameBuffer.height = size;
+                frameContext = frameBuffer.getContext('2d');
+            }
+
+            // Buffer for static background painting code
+            if (resetBackground) {
+                backgroundBuffer.width = size;
+                backgroundBuffer.height = size;
+                backgroundContext = backgroundBuffer.getContext('2d');
+            }
+
+            // Buffer for active bargraph led
+            if (resetValue) {
+                activeLedBuffer.width = Math.ceil(size * 0.060747);
+                activeLedBuffer.height = Math.ceil(size * 0.023364);
+                activeLedContext = activeLedBuffer.getContext('2d');
+            }
+
+            if (resetLed) {
+                // Buffer for led on painting code
+                ledBufferOn.width = Math.ceil(LED_SIZE);
+                ledBufferOn.height = Math.ceil(LED_SIZE);
+                ledContextOn = ledBufferOn.getContext('2d');
+
+                // Buffer for led off painting code
+                ledBufferOff.width = Math.ceil(LED_SIZE);
+                ledBufferOff.height = Math.ceil(LED_SIZE);
+                ledContextOff = ledBufferOff.getContext('2d');
+
+                // Buffer for current led painting code
+                ledBuffer = ledBufferOff;
+            }
+
+            if (resetUserLed) {
+                userLedBufferOn.width = Math.ceil(LED_SIZE);
+                userLedBufferOn.height = Math.ceil(LED_SIZE);
+                userLedContextOn = userLedBufferOn.getContext('2d');
+
+                userLedBufferOff.width = Math.ceil(LED_SIZE);
+                userLedBufferOff.height = Math.ceil(LED_SIZE);
+                userLedContextOff = userLedBufferOff.getContext('2d');
+
+                // Buffer for current user led painting code
+                userLedBuffer = userLedBufferOff;
+            }
+
+            // Buffer for static foreground painting code
+            if (resetForeground) {
+                foregroundBuffer.width = size;
+                foregroundBuffer.height = size;
+                foregroundContext = foregroundBuffer.getContext('2d');
+            }
+        };
+
+        var drawBargraphTrackImage = function (ctx) {
+
+            ctx.save();
+
+            // Bargraphtrack
+
+            // Frame
+            ctx.save();
+            ctx.lineWidth = size * 0.085;
+            ctx.beginPath();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset - 4 * RAD_FACTOR);
+            ctx.translate(-centerX, -centerY);
+            ctx.arc(centerX, centerY, imageWidth * 0.355140, 0, angleRange + 8 * RAD_FACTOR, false);
+            ctx.rotate(-rotationOffset);
+            var ledTrackFrameGradient = ctx.createLinearGradient(0, 0.107476 * imageHeight, 0, 0.897195 * imageHeight);
+            ledTrackFrameGradient.addColorStop(0, '#000000');
+            ledTrackFrameGradient.addColorStop(0.22, '#333333');
+            ledTrackFrameGradient.addColorStop(0.76, '#333333');
+            ledTrackFrameGradient.addColorStop(1, '#cccccc');
+            ctx.strokeStyle = ledTrackFrameGradient;
+            ctx.stroke();
+            ctx.restore();
+
+            // Main
+            ctx.save();
+            ctx.lineWidth = size * 0.075;
+            ctx.beginPath();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset - 4 * RAD_FACTOR);
+            ctx.translate(-centerX, -centerY);
+            ctx.arc(centerX, centerY, imageWidth * 0.355140, 0, angleRange + 8 * RAD_FACTOR, false);
+            ctx.rotate(-rotationOffset);
+            var ledTrackMainGradient = ctx.createLinearGradient(0, 0.112149 * imageHeight, 0, 0.892523 * imageHeight);
+            ledTrackMainGradient.addColorStop(0, '#111111');
+            ledTrackMainGradient.addColorStop(1, '#333333');
+            ctx.strokeStyle = ledTrackMainGradient;
+            ctx.stroke();
+            ctx.restore();
+
+            // Draw inactive leds
+            var ledCenterX = (imageWidth * 0.116822 + imageWidth * 0.060747) / 2;
+            var ledCenterY = (imageWidth * 0.485981 + imageWidth * 0.023364) / 2;
+            var ledOffGradient = ctx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, 0.030373 * imageWidth);
+            ledOffGradient.addColorStop(0, '#3c3c3c');
+            ledOffGradient.addColorStop(1, '#323232');
+            var angle = 0;
+            for (angle = 0; angle <= degAngleRange; angle += 5) {
+                ctx.save();
+                ctx.translate(centerX, centerY);
+                ctx.rotate((angle * RAD_FACTOR) + bargraphOffset);
+                ctx.translate(-centerX, -centerY);
+                ctx.beginPath();
+                ctx.rect(imageWidth * 0.116822, imageWidth * 0.485981, imageWidth * 0.060747, imageWidth * 0.023364);
+                ctx.closePath();
+                ctx.fillStyle = ledOffGradient;
+                ctx.fill();
+                ctx.restore();
+            }
+
+            ctx.restore();
+        };
+
+        var drawActiveLed = function (ctx, color) {
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, 0, ctx.canvas.width, ctx.canvas.height);
+            ctx.closePath();
+            var ledCenterX = (ctx.canvas.width / 2);
+            var ledCenterY = (ctx.canvas.height / 2);
+            var ledGradient = mainCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, ctx.canvas.width / 2);
+            ledGradient.addColorStop(0, color.light.getRgbaColor());
+            ledGradient.addColorStop(1, color.dark.getRgbaColor());
+            ctx.fillStyle = ledGradient;
+            ctx.fill();
+            ctx.restore();
+        };
+
+        var drawLcdText = function (ctx, value) {
+
+            ctx.save();
+            ctx.textAlign = 'right';
+            ctx.strokeStyle = lcdColor.textColor;
+            ctx.fillStyle = lcdColor.textColor;
+
+            if (lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) {
+                ctx.shadowColor = 'gray';
+                ctx.shadowOffsetX = imageWidth * 0.007;
+                ctx.shadowOffsetY = imageWidth * 0.007;
+                ctx.shadowBlur = imageWidth * 0.007;
+            }
+
+            if (digitalFont) {
+                ctx.font = lcdFont;
+            } else {
+                ctx.font = stdFont;
+            }
+            ctx.fillText(value.toFixed(lcdDecimals), lcdPosX + lcdWidth - lcdWidth * 0.05, lcdPosY + lcdHeight * 0.5 + lcdFontHeight * 0.38, lcdWidth * 0.9);
+
+            ctx.restore();
+        };
+
+        var drawTickmarksImage = function (ctx, labelNumberFormat) {
+            var alpha = rotationOffset,      // Tracks total rotation
+                rotationStep = angleStep * minorTickSpacing,
+                textRotationAngle,
+                fontSize = Math.ceil(imageWidth * 0.04),
+                valueCounter = minValue,
+                majorTickCounter = maxNoOfMinorTicks - 1,
+                TEXT_TRANSLATE_X = imageWidth * 0.28,
+                TEXT_WIDTH = imageWidth * 0.1,
+                MAX_VALUE_ROUNDED = parseFloat(maxValue.toFixed(2)),
+                i;
+
+            backgroundColor.labelColor.setAlpha(1);
+            ctx.save();
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+            ctx.font = fontSize + 'px ' + stdFontName;
+            ctx.strokeStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset);
+
+            if (gaugeType.type === 'type1' || gaugeType.type === 'type2') {
+                TEXT_WIDTH = imageWidth * 0.0375;
+            }
+
+            for (i = minValue; parseFloat(i.toFixed(2)) <= MAX_VALUE_ROUNDED; i += minorTickSpacing) {
+                textRotationAngle = + rotationStep + HALF_PI;
+                majorTickCounter++;
+                // Draw major tickmarks
+                if (majorTickCounter === maxNoOfMinorTicks) {
+                    ctx.save();
+                    ctx.translate(TEXT_TRANSLATE_X, 0);
+
+                    switch (tickLabelOrientation.type) {
+                    case 'horizontal':
+                        textRotationAngle = -alpha;
+                        break;
+
+                    case 'tangent':
+                        textRotationAngle = (alpha <= HALF_PI + PI ? PI : 0);
+                        break;
+
+                    case 'normal':
+                    /* falls through */
+                    default:
+                        textRotationAngle = HALF_PI;
+                        break;
+                    }
+                    ctx.rotate(textRotationAngle);
+
+                    switch (labelNumberFormat.format) {
+                    case 'fractional':
+                        ctx.fillText((valueCounter.toFixed(fractionalScaleDecimals)), 0, 0, TEXT_WIDTH);
+                        break;
+
+                    case 'scientific':
+                        ctx.fillText((valueCounter.toPrecision(2)), 0, 0, TEXT_WIDTH);
+                        break;
+
+                    case 'standard':
+                    /* falls through */
+                    default:
+                        ctx.fillText((valueCounter.toFixed(0)), 0, 0, TEXT_WIDTH);
+                        break;
+                    }
+                    ctx.translate(-TEXT_TRANSLATE_X, 0);
+                    ctx.restore();
+
+                    valueCounter += majorTickSpacing;
+                    majorTickCounter = 0;
+                    ctx.rotate(rotationStep);
+                    alpha += rotationStep;
+                    continue;
+                }
+                ctx.rotate(rotationStep);
+                alpha += rotationStep;
+            }
+
+            ctx.translate(-centerX, -centerY);
+            ctx.restore();
+        };
+
+        var blink = function (blinking) {
+            if (blinking) {
+                ledTimerId = setInterval(toggleAndRepaintLed, 1000);
+            } else {
+                clearInterval(ledTimerId);
+                ledBuffer = ledBufferOff;
+            }
+        };
+
+        var blinkUser = function (blinking) {
+            if (blinking) {
+                userLedTimerId = setInterval(toggleAndRepaintUserLed, 1000);
+            } else {
+                clearInterval(userLedTimerId);
+                userLedBuffer = userLedBufferOff;
+            }
+        };
+
+        var toggleAndRepaintLed = function () {
+            if (ledVisible) {
+                if (ledBuffer === ledBufferOn) {
+                    ledBuffer = ledBufferOff;
+                } else {
+                    ledBuffer = ledBufferOn;
+                }
+                if (!repainting) {
+                    repainting = true;
+                    requestAnimFrame(self.repaint);
+                }
+            }
+        };
+
+        var toggleAndRepaintUserLed = function () {
+            if (userLedVisible) {
+                if (userLedBuffer === userLedBufferOn) {
+                    userLedBuffer = userLedBufferOff;
+                } else {
+                    userLedBuffer = userLedBufferOn;
+                }
+                if (!repainting) {
+                    repainting = true;
+                    requestAnimFrame(self.repaint);
+                }
+            }
+        };
+
+        //********************************* Public methods *********************************
+        this.setValue = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = (newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue));
+            if (value !== targetValue) {
+                value = targetValue;
+                if ((value >= threshold && !ledBlinking && thresholdRising) ||
+                    (value <= threshold && !ledBlinking && !thresholdRising)) {
+                    ledBlinking = true;
+                    blink(ledBlinking);
+                    if (playAlarm) {
+                        audioElement.play();
+                    }
+                } else if ((value < threshold && ledBlinking && thresholdRising) ||
+                           (value > threshold && ledBlinking && !thresholdRising)) {
+                    ledBlinking = false;
+                    blink(ledBlinking);
+                    if (playAlarm) {
+                        audioElement.pause();
+                    }
+                }
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.getValue = function () {
+            return value;
+        };
+
+        this.setValueAnimated = function (newValue, callback) {
+            newValue = parseFloat(newValue);
+            var targetValue = (newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue)),
+                gauge = this,
+                time;
+
+            if (value !== targetValue) {
+                if (undefined !== tween && tween.isPlaying) {
+                    tween.stop();
+                }
+
+                time = fullScaleDeflectionTime * Math.abs(targetValue - value) / (maxValue - minValue);
+                time = Math.max(time, fullScaleDeflectionTime / 5);
+                tween = new Tween({}, '', Tween.regularEaseInOut, value, targetValue, time);
+                //tween = new Tween({}, '', Tween.regularEaseInOut, value, targetValue, 1);
+                //tween = new Tween(new Object(), '', Tween.strongEaseInOut, this.value, targetValue, 1);
+                tween.onMotionChanged = function (event) {
+                    value = event.target._pos;
+
+                    if ((value >= threshold && !ledBlinking && thresholdRising) ||
+                        (value <= threshold && !ledBlinking && !thresholdRising)) {
+                        ledBlinking = true;
+                        blink(ledBlinking);
+                        if (playAlarm) {
+                            audioElement.play();
+                        }
+                    } else if ((value < threshold && ledBlinking && thresholdRising) ||
+                               (value > threshold && ledBlinking && !thresholdRising)) {
+                        ledBlinking = false;
+                        blink(ledBlinking);
+                        if (playAlarm) {
+                            audioElement.pause();
+                        }
+                    }
+                    if (!repainting) {
+                        repainting = true;
+                        requestAnimFrame(gauge.repaint);
+                    }
+                };
+
+                // do we have a callback function to process?
+                if (callback && typeof(callback) === "function") {
+                    tween.onMotionFinished = callback;
+                }
+
+                tween.start();
+            }
+            return this;
+        };
+
+        this.setFrameDesign = function (newFrameDesign) {
+            resetBuffers({frame: true});
+            frameDesign = newFrameDesign;
+            init({frame: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setBackgroundColor = function (newBackgroundColor) {
+            resetBuffers({background: true,
+                          led: true});
+            backgroundColor = newBackgroundColor;
+            init({background: true,
+                  led: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setForegroundType = function (newForegroundType) {
+            resetBuffers({foreground: true});
+            foregroundType = newForegroundType;
+            init({foreground: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setValueColor = function (newValueColor) {
+            resetBuffers({value: true});
+            valueColor = newValueColor;
+            init({value: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLedColor = function (newLedColor) {
+            resetBuffers({led: true});
+            ledColor = newLedColor;
+            init({led: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedColor = function (newLedColor) {
+            resetBuffers({userLed: true});
+            userLedColor = newLedColor;
+            init({userLed: true});
+            this.repaint();
+            return this;
+        };
+
+        this.toggleUserLed = function () {
+            if (userLedBuffer === userLedBufferOn) {
+                userLedBuffer = userLedBufferOff;
+            } else {
+                userLedBuffer = userLedBufferOn;
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedOnOff = function (on) {
+            if (true === on) {
+                userLedBuffer = userLedBufferOn;
+            } else {
+                userLedBuffer = userLedBufferOff;
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.blinkUserLed = function (blink) {
+            if (blink) {
+                if (!userLedBlinking) {
+                    blinkUser(true);
+                    userLedBlinking = true;
+                }
+            } else {
+                if (userLedBlinking) {
+                    clearInterval(userLedTimerId);
+                    userLedBlinking = false;
+                }
+            }
+            return this;
+        };
+
+        this.setLedVisible = function (visible) {
+            ledVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setUserLedVisible = function (visible) {
+            userLedVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdColor = function (newLcdColor) {
+            lcdColor = newLcdColor;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdDecimals = function (decimals) {
+            lcdDecimals = parseInt(decimals, 10);
+            this.repaint();
+            return this;
+        };
+
+        this.setSection = function (areaSec) {
+            section = areaSec;
+            init();
+            this.repaint();
+            return this;
+        };
+
+        this.setSectionActive = function (value) {
+            useSectionColors = value;
+            init();
+            this.repaint();
+            return this;
+        };
+
+        this.setGradient = function (grad) {
+            valueGradient = grad;
+            init();
+            this.repaint();
+            return this;
+        };
+
+        this.setGradientActive = function (value) {
+            useValueGradient = value;
+            init();
+            this.repaint();
+            return this;
+        };
+
+        this.setMinValue = function (value) {
+            minValue = value;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.getMinValue = function () {
+            return minValue;
+        };
+
+        this.setMaxValue = function (value) {
+            maxValue = value;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.getMaxValue = function () {
+            return maxValue;
+        };
+
+        this.setThreshold = function (newValue) {
+            newValue = parseFloat(newValue);
+            var targetValue = newValue < minValue ? minValue : (newValue > maxValue ? maxValue : newValue);
+            threshold = targetValue;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setThresholdRising = function (rising) {
+            thresholdRising = !!rising;
+            // reset existing threshold alerts
+            ledBlinking = !ledBlinking;
+            blink(ledBlinking);
+            this.repaint();
+            return this;
+        };
+
+        this.setTitleString = function (title) {
+            titleString = title;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setUnitString = function (unit) {
+            unitString = unit;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setTrend = function (newValue) {
+            trendIndicator = newValue;
+            this.repaint();
+            return this;
+        };
+
+        this.setTrendVisible = function (visible) {
+            trendVisible = !!visible;
+            this.repaint();
+            return this;
+        };
+
+        this.setFractionalScaleDecimals = function (decimals) {
+            fractionalScaleDecimals = parseInt(decimals, 10);
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+        };
+
+        this.setLabelNumberFormat = function (format) {
+            labelNumberFormat = format;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.repaint = function () {
+            var activeLedAngle = ((value - minValue) / (maxValue - minValue)) * degAngleRange,
+                activeLedColor,
+                lastActiveLedColor = valueColor,
+                angle, i,
+                currentValue,
+                gradRange,
+                fraction;
+
+            if (!initialized) {
+                init({frame: true,
+                      background: true,
+                      led: true,
+                      userLed: true,
+                      value: true,
+                      trend: true,
+                      foreground: true});
+            }
+
+            mainCtx.clearRect(0, 0, size, size);
+
+            // Draw frame image
+            if (frameVisible) {
+                mainCtx.drawImage(frameBuffer, 0, 0);
+            }
+
+            // Draw buffered image to visible canvas
+            mainCtx.drawImage(backgroundBuffer, 0, 0);
+
+            // Draw active leds
+            for (angle = 0; angle <= activeLedAngle; angle += 5) {
+                //check for LED color
+                activeLedColor = valueColor;
+                // Use a gradient for value colors?
+                if (isGradientVisible) {
+                    // Convert angle back to value
+                    currentValue = minValue + (angle / degAngleRange) * (maxValue - minValue);
+                    gradRange = valueGradient.getEnd() - valueGradient.getStart();
+                    fraction = (currentValue - minValue) / gradRange;
+                    fraction = Math.max(Math.min(fraction, 1), 0);
+                    activeLedColor = customColorDef(valueGradient.getColorAt(fraction).getRgbaColor());
+                } else if (isSectionsVisible) {
+                    for (i = 0; i < sectionAngles.length; i++) {
+                        if (angle >= sectionAngles[i].start && angle < sectionAngles[i].stop) {
+                            activeLedColor = sectionAngles[i].color;
+                            break;
+                        }
+                    }
+                }
+                // Has LED color changed? If so redraw the buffer
+                if (lastActiveLedColor.medium.getHexColor() !== activeLedColor.medium.getHexColor()) {
+                    drawActiveLed(activeLedContext, activeLedColor);
+                    lastActiveLedColor = activeLedColor;
+                }
+                mainCtx.save();
+                mainCtx.translate(centerX, centerY);
+                mainCtx.rotate((angle * RAD_FACTOR) + bargraphOffset);
+                mainCtx.translate(-centerX, -centerY);
+                mainCtx.drawImage(activeLedBuffer, ACTIVE_LED_POS_X, ACTIVE_LED_POS_Y);
+                mainCtx.restore();
+            }
+
+            // Draw lcd display
+            if (lcdVisible) {
+                drawLcdText(mainCtx, value);
+            }
+
+            // Draw led
+            if (ledVisible) {
+                mainCtx.drawImage(ledBuffer, LED_POS_X, LED_POS_Y);
+            }
+
+            // Draw user led
+            if (userLedVisible) {
+                mainCtx.drawImage(userLedBuffer, USER_LED_POS_X, USER_LED_POS_Y);
+            }
+
+            // Draw the trend indicator
+            if (trendVisible) {
+                switch (trendIndicator.state) {
+                case 'up':
+                    mainCtx.drawImage(trendUpBuffer, trendPosX, trendPosY);
+                    break;
+                case 'steady':
+                    mainCtx.drawImage(trendSteadyBuffer, trendPosX, trendPosY);
+                    break;
+                case 'down':
+                    mainCtx.drawImage(trendDownBuffer, trendPosX, trendPosY);
+                    break;
+                case 'off':
+                    mainCtx.drawImage(trendOffBuffer, trendPosX, trendPosY);
+                    break;
+                }
+            }
+
+            // Draw foreground
+            if (foregroundVisible) {
+                mainCtx.drawImage(foregroundBuffer, 0, 0);
+            }
+
+            repainting = false;
+        };
+
+        // Visualize the component
+        this.repaint();
+
+        return this;
+    };
+
+    var displaySingle = function (canvas, parameters) {
+        parameters = parameters || {};
+        var width = (undefined === parameters.width ? 0 : parameters.width),
+            height = (undefined === parameters.height ? 0 : parameters.height),
+            lcdColor = (undefined === parameters.lcdColor ? steelseries.LcdColor.STANDARD : parameters.lcdColor),
+            lcdDecimals = (undefined === parameters.lcdDecimals ? 2 : parameters.lcdDecimals),
+            unitString = (undefined === parameters.unitString ? '' : parameters.unitString),
+            unitStringVisible = (undefined === parameters.unitStringVisible ? false : parameters.unitStringVisible),
+            headerString = (undefined === parameters.headerString ? '' : parameters.headerString),
+            headerStringVisible = (undefined === parameters.headerStringVisible ? false : parameters.headerStringVisible),
+            digitalFont = (undefined === parameters.digitalFont ? false : parameters.digitalFont),
+            valuesNumeric = (undefined === parameters.valuesNumeric ? true : parameters.valuesNumeric),
+            value = (undefined === parameters.value ? 0 : parameters.value),
+            alwaysScroll = (undefined === parameters.alwaysScroll ? false : parameters.alwaysScroll),
+            autoScroll = (undefined === parameters.autoScroll ? false : parameters.autoScroll),
+            section = (undefined === parameters.section ? null : parameters.section);
+
+        var scrolling = false;
+        var scrollX = 0;
+        var scrollTimer;
+        var repainting = false;
+
+        var self = this;
+
+        // Get the canvas context and clear it
+        var mainCtx = getCanvasContext(canvas);
+        // Has a size been specified?
+        if (width === 0) {
+            width = mainCtx.canvas.width;
+        }
+        if (height === 0) {
+            height = mainCtx.canvas.height;
+        }
+
+        // Set the size - also clears the canvas
+        mainCtx.canvas.width = width;
+        mainCtx.canvas.height = height;
+
+        var imageWidth = width;
+        var imageHeight = height;
+        var textWidth = 0;
+
+        var fontHeight = Math.floor(imageHeight / 1.5);
+        var stdFont = fontHeight + 'px ' + stdFontName;
+        var lcdFont = fontHeight + 'px ' + lcdFontName;
+
+        var initialized = false;
+
+        // **************   Buffer creation  ********************
+        // Buffer for the lcd
+        var lcdBuffer;
+        var sectionBuffer = [];
+        var sectionForegroundColor = [];
+
+        // **************   Image creation  ********************
+        var drawLcdText = function (value, color) {
+            mainCtx.save();
+            mainCtx.textAlign = 'right';
+            //mainCtx.textBaseline = 'top';
+            mainCtx.strokeStyle = color;
+            mainCtx.fillStyle = color;
+
+            mainCtx.beginPath();
+            mainCtx.rect(2, 0, imageWidth - 4, imageHeight);
+            mainCtx.closePath();
+            mainCtx.clip();
+
+            if ((lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) &&
+                 section === null) {
+                mainCtx.shadowColor = 'gray';
+                mainCtx.shadowOffsetX = imageHeight * 0.035;
+                mainCtx.shadowOffsetY = imageHeight * 0.035;
+                mainCtx.shadowBlur = imageHeight * 0.055;
+            }
+
+            mainCtx.font = digitalFont ? lcdFont : stdFont;
+
+            if (valuesNumeric) {
+                // Numeric value
+                var unitWidth = 0;
+                textWidth = 0;
+                if (unitStringVisible) {
+                    mainCtx.font = Math.floor(imageHeight / 2.5) + 'px ' + stdFontName;
+                    unitWidth = mainCtx.measureText(unitString).width;
+                }
+                mainCtx.font = digitalFont ? lcdFont : stdFont;
+                var lcdText = value.toFixed(lcdDecimals);
+                textWidth = mainCtx.measureText(lcdText).width;
+                var vPos = 0.38;
+                if (headerStringVisible) {
+                    vPos = 0.52;
+                }
+
+                mainCtx.fillText(lcdText, imageWidth - unitWidth - 4 - scrollX, imageHeight * 0.5 + fontHeight * vPos);
+
+                if (unitStringVisible) {
+                    mainCtx.font = Math.floor(imageHeight / 2.5) + 'px ' + stdFontName;
+                    mainCtx.fillText(unitString, imageWidth - 2 - scrollX, imageHeight * 0.5 + fontHeight * vPos);
+                }
+                if (headerStringVisible) {
+                    mainCtx.textAlign = 'center';
+                    mainCtx.font = Math.floor(imageHeight / 3.5) + 'px ' + stdFontName;
+                    mainCtx.fillText(headerString, imageWidth / 2, imageHeight * 0.3);
+                }
+            } else {
+                // Text value
+                textWidth = mainCtx.measureText(value).width;
+                if (alwaysScroll || (autoScroll && textWidth > imageWidth - 4)) {
+                    if (!scrolling) {
+                        if (textWidth > imageWidth * 0.8) {
+                            scrollX = imageWidth - textWidth - imageWidth * 0.2; // leave 20% blank leading space to give time to read start of message
+                        } else {
+                            scrollX = 0;
+                        }
+                        scrolling = true;
+                        clearTimeout(scrollTimer);  // kill any pending animate
+                        scrollTimer = setTimeout(animate, 200);
+                    }
+                } else if (autoScroll && textWidth <= imageWidth - 4) {
+                    scrollX = 0;
+                    scrolling = false;
+                }
+                mainCtx.fillText(value, imageWidth - 2 - scrollX, imageHeight * 0.5 + fontHeight * 0.38);
+            }
+            mainCtx.restore();
+        };
+
+        var createLcdSectionImage = function (width, height, color, lcdColor) {
+            var lcdSectionBuffer = createBuffer(width, height);
+            var lcdCtx = lcdSectionBuffer.getContext('2d');
+
+            lcdCtx.save();
+            var xB = 0;
+            var yB = 0;
+            var wB = width;
+            var hB = height;
+            var rB = Math.min(width, height) * 0.095;
+
+            var lcdBackground = lcdCtx.createLinearGradient(0, yB, 0, yB + hB);
+
+            lcdBackground.addColorStop(0, '#4c4c4c');
+            lcdBackground.addColorStop(0.08, '#666666');
+            lcdBackground.addColorStop(0.92, '#666666');
+            lcdBackground.addColorStop(1, '#e6e6e6');
+            lcdCtx.fillStyle = lcdBackground;
+
+            roundedRectangle(lcdCtx, xB, yB, wB, hB, rB);
+
+            lcdCtx.fill();
+            lcdCtx.restore();
+
+            lcdCtx.save();
+
+            var rgb = getColorValues(color);
+            var hsb = rgbToHsb(rgb[0], rgb[1], rgb[2]);
+
+            var rgbStart = getColorValues(lcdColor.gradientStartColor);
+            var hsbStart = rgbToHsb(rgbStart[0], rgbStart[1], rgbStart[2]);
+            var rgbFraction1 = getColorValues(lcdColor.gradientFraction1Color);
+            var hsbFraction1 = rgbToHsb(rgbFraction1[0], rgbFraction1[1], rgbFraction1[2]);
+            var rgbFraction2 = getColorValues(lcdColor.gradientFraction2Color);
+            var hsbFraction2 = rgbToHsb(rgbFraction2[0], rgbFraction2[1], rgbFraction2[2]);
+            var rgbFraction3 = getColorValues(lcdColor.gradientFraction3Color);
+            var hsbFraction3 = rgbToHsb(rgbFraction3[0], rgbFraction3[1], rgbFraction3[2]);
+            var rgbStop = getColorValues(lcdColor.gradientStopColor);
+            var hsbStop = rgbToHsb(rgbStop[0], rgbStop[1], rgbStop[2]);
+
+            var startColor = hsbToRgb(hsb[0], hsb[1], hsbStart[2] - 0.31);
+            var fraction1Color = hsbToRgb(hsb[0], hsb[1], hsbFraction1[2] - 0.31);
+            var fraction2Color = hsbToRgb(hsb[0], hsb[1], hsbFraction2[2] - 0.31);
+            var fraction3Color = hsbToRgb(hsb[0], hsb[1], hsbFraction3[2] - 0.31);
+            var stopColor = hsbToRgb(hsb[0], hsb[1], hsbStop[2] - 0.31);
+
+            var xF = 1;
+            var yF = 1;
+            var wF = width - 2;
+            var hF = height - 2;
+            var rF = rB - 1;
+            var lcdForeground = lcdCtx.createLinearGradient(0, yF, 0, yF + hF);
+            lcdForeground.addColorStop(0, 'rgb(' + startColor[0] + ', ' + startColor[1] + ', ' + startColor[2] + ')');
+            lcdForeground.addColorStop(0.03, 'rgb(' + fraction1Color[0] + ',' + fraction1Color[1] + ',' + fraction1Color[2] + ')');
+            lcdForeground.addColorStop(0.49, 'rgb(' + fraction2Color[0] + ',' + fraction2Color[1] + ',' + fraction2Color[2] + ')');
+            lcdForeground.addColorStop(0.5, 'rgb(' + fraction3Color[0] + ',' + fraction3Color[1] + ',' + fraction3Color[2] + ')');
+            lcdForeground.addColorStop(1, 'rgb(' + stopColor[0] + ',' + stopColor[1] + ',' + stopColor[2] + ')');
+            lcdCtx.fillStyle = lcdForeground;
+
+            roundedRectangle(lcdCtx, xF, yF, wF, hF, rF);
+
+            lcdCtx.fill();
+            lcdCtx.restore();
+
+            return lcdSectionBuffer;
+        };
+
+        var createSectionForegroundColor = function (sectionColor) {
+            var rgbSection = getColorValues(sectionColor);
+            var hsbSection = rgbToHsb(rgbSection[0], rgbSection[1], rgbSection[2]);
+            var sectionForegroundRgb = hsbToRgb(hsbSection[0], 0.57, 0.83);
+            return 'rgb(' + sectionForegroundRgb[0] + ', ' + sectionForegroundRgb[1] + ', ' + sectionForegroundRgb[2] + ')';
+        };
+
+        var animate = function () {
+            if (scrolling) {
+                if (scrollX > imageWidth) {
+                    scrollX = -textWidth;
+                }
+                scrollX += 2;
+                scrollTimer = setTimeout(animate, 50);
+            } else {
+                scrollX = 0;
+            }
+            if (!repainting) {
+                repainting = true;
+                requestAnimFrame(self.repaint);
+            }
+        };
+
+        // **************   Initialization  ********************
+        var init = function () {
+            var sectionIndex;
+            initialized = true;
+
+            // Create lcd background if selected in background buffer (backgroundBuffer)
+            lcdBuffer = createLcdBackgroundImage(width, height, lcdColor);
+
+            if (null !== section && 0 < section.length) {
+                for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
+                    sectionBuffer[sectionIndex] = createLcdSectionImage(width, height, section[sectionIndex].color, lcdColor);
+                    sectionForegroundColor[sectionIndex] = createSectionForegroundColor(section[sectionIndex].color);
+                }
+            }
+
+        };
+
+        // **************   Public methods  ********************
+        this.setValue = function (newValue) {
+            if (value !== newValue) {
+                value = newValue;
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.setLcdColor = function (newLcdColor) {
+            lcdColor = newLcdColor;
+            init();
+            this.repaint();
+            return this;
+        };
+
+        this.setSection = function (newSection) {
+            section = newSection;
+            init({background: true, foreground: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setScrolling = function (scroll) {
+            if (scroll) {
+                if (scrolling) {
+                    return;
+                } else {
+                    scrolling = scroll;
+                    animate();
+                }
+            } else { //disable scrolling
+                scrolling = scroll;
+            }
+            return this;
+        };
+
+        this.repaint = function () {
+            if (!initialized) {
+                init();
+            }
+
+            //mainCtx.save();
+            mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
+
+            var lcdBackgroundBuffer = lcdBuffer;
+            var lcdTextColor = lcdColor.textColor;
+            var sectionIndex;
+            // Draw sections
+            if (null !== section && 0 < section.length) {
+                for (sectionIndex = 0 ; sectionIndex < section.length ; sectionIndex++) {
+                    if (value >= section[sectionIndex].start && value <= section[sectionIndex].stop) {
+                        lcdBackgroundBuffer = sectionBuffer[sectionIndex];
+                        lcdTextColor = sectionForegroundColor[sectionIndex];
+                        break;
+                    }
+                }
+            }
+
+            // Draw lcd background
+            mainCtx.drawImage(lcdBackgroundBuffer, 0, 0);
+
+            // Draw lcd text
+            drawLcdText(value, lcdTextColor);
+
+            repainting = false;
+        };
+
+        // Visualize the component
+        this.repaint();
+
+        return this;
+    };
+
+    var windDirection = function (canvas, parameters) {
+        parameters = parameters || {};
+        var size = (undefined === parameters.size ? 0 : parameters.size),
+            frameDesign = (undefined === parameters.frameDesign ? steelseries.FrameDesign.METAL : parameters.frameDesign),
+            frameVisible = (undefined === parameters.frameVisible ? true : parameters.frameVisible),
+            backgroundColor = (undefined === parameters.backgroundColor ? steelseries.BackgroundColor.DARK_GRAY : parameters.backgroundColor),
+            backgroundVisible = (undefined === parameters.backgroundVisible ? true : parameters.backgroundVisible),
+            pointerTypeLatest = (undefined === parameters.pointerTypeLatest ? steelseries.PointerType.TYPE1 : parameters.pointerTypeLatest),
+            pointerTypeAverage = (undefined === parameters.pointerTypeAverage ? steelseries.PointerType.TYPE8 : parameters.pointerTypeAverage),
+            pointerColor = (undefined === parameters.pointerColor ? steelseries.ColorDef.RED : parameters.pointerColor),
+            pointerColorAverage = (undefined === parameters.pointerColorAverage ? steelseries.ColorDef.BLUE : parameters.pointerColorAverage),
+            knobType = (undefined === parameters.knobType ? steelseries.KnobType.STANDARD_KNOB : parameters.knobType),
+            knobStyle = (undefined === parameters.knobStyle ? steelseries.KnobStyle.SILVER : parameters.knobStyle),
+            foregroundType = (undefined === parameters.foregroundType ? steelseries.ForegroundType.TYPE1 : parameters.foregroundType),
+            foregroundVisible = (undefined === parameters.foregroundVisible ? true : parameters.foregroundVisible),
+            pointSymbols = (undefined === parameters.pointSymbols ? ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'] : parameters.pointSymbols),
+            pointSymbolsVisible = (undefined === parameters.pointSymbolsVisible ? true : parameters.pointSymbolsVisible),
+            customLayer = (undefined === parameters.customLayer ? null : parameters.customLayer),
+            degreeScale = (undefined === parameters.degreeScale ? true : parameters.degreeScale),
+            degreeScaleHalf = (undefined === parameters.degreeScaleHalf ? false : parameters.degreeScaleHalf),
+            roseVisible = (undefined === parameters.roseVisible ? false : parameters.roseVisible),
+            lcdColor = (undefined === parameters.lcdColor ? steelseries.LcdColor.STANDARD : parameters.lcdColor),
+            lcdVisible = (undefined === parameters.lcdVisible ? true : parameters.lcdVisible),
+            digitalFont = (undefined === parameters.digitalFont ? false : parameters.digitalFont),
+            section = (undefined === parameters.section ? null : parameters.section),
+            area = (undefined === parameters.area ? null : parameters.area),
+            lcdTitleStrings = (undefined === parameters.lcdTitleStrings ? ['Latest', 'Average'] : parameters.lcdTitleStrings),
+            titleString = (undefined === parameters.titleString ? '' : parameters.titleString),
+            useColorLabels = (undefined === parameters.useColorLabels ? false : parameters.useColorLabels),
+            fullScaleDeflectionTime = (undefined === parameters.fullScaleDeflectionTime ? 2.5 : parameters.fullScaleDeflectionTime);
+
+        var tweenLatest;
+        var tweenAverage;
+        var valueLatest = 0;
+        var valueAverage = 0;
+        var angleStep = RAD_FACTOR;
+        var angleLatest = this.valueLatest;
+        var angleAverage = this.valueAverage;
+        var rotationOffset = -HALF_PI;
+        var angleRange = TWO_PI;
+        var range = 360;
+        var repainting = false;
+
+        // Get the canvas context and clear it
+        var mainCtx = getCanvasContext(canvas);
+        // Has a size been specified?
+        if (size === 0) {
+            size = Math.min(mainCtx.canvas.width, mainCtx.canvas.height);
+        }
+
+        // Set the size - also clears the canvas
+        mainCtx.canvas.width = size;
+        mainCtx.canvas.height = size;
+
+        var imageWidth = size;
+        var imageHeight = size;
+
+        var centerX = imageWidth / 2;
+        var centerY = imageHeight / 2;
+
+        var lcdFontHeight = Math.floor(imageWidth / 10);
+        var stdFont = lcdFontHeight + 'px ' + stdFontName;
+        var lcdFont = lcdFontHeight + 'px ' + lcdFontName;
+        var lcdWidth = imageWidth * 0.3;
+        var lcdHeight = imageHeight * 0.12;
+        var lcdPosX = (imageWidth - lcdWidth) / 2;
+        var lcdPosY1 = imageHeight * 0.32;
+        var lcdPosY2 = imageHeight * 0.565;
+
+        var initialized = false;
+
+        // **************   Buffer creation  ********************
+        // Buffer for all static background painting code
+        var backgroundBuffer = createBuffer(size, size);
+        var backgroundContext = backgroundBuffer.getContext('2d');
+
+        // Buffer for LCD displays
+        var lcdBuffer;
+
+        // Buffer for latest pointer images painting code
+        var pointerBufferLatest = createBuffer(size, size);
+        var pointerContextLatest = pointerBufferLatest.getContext('2d');
+
+        // Buffer for average pointer image
+        var pointerBufferAverage = createBuffer(size, size);
+        var pointerContextAverage = pointerBufferAverage.getContext('2d');
+
+        // Buffer for static foreground painting code
+        var foregroundBuffer = createBuffer(size, size);
+        var foregroundContext = foregroundBuffer.getContext('2d');
+
+        // **************   Image creation  ********************
+        var drawLcdText = function (value, bLatest) {
+            mainCtx.save();
+            mainCtx.textAlign = 'center';
+            mainCtx.strokeStyle = lcdColor.textColor;
+            mainCtx.fillStyle = lcdColor.textColor;
+
+            //convert value from -180,180 range into 0-360 range
+            while (value < -180) {
+                value += 360;
+            }
+            if (!degreeScaleHalf && value < 0) {
+                value += 360;
+            }
+
+            if (degreeScaleHalf && value > 180) {
+                value = -(360 - value);
+            }
+
+            if (value >= 0) {
+                value = '00' + Math.round(value);
+                value = value.substring(value.length, value.length - 3);
+            } else {
+                value = '00' + Math.abs(Math.round(value));
+                value = '-' + value.substring(value.length, value.length - 3);
+            }
+
+            if (lcdColor === steelseries.LcdColor.STANDARD || lcdColor === steelseries.LcdColor.STANDARD_GREEN) {
+                mainCtx.shadowColor = 'gray';
+                mainCtx.shadowOffsetX = imageWidth * 0.007;
+                mainCtx.shadowOffsetY = imageWidth * 0.007;
+                mainCtx.shadowBlur = imageWidth * 0.007;
+            }
+            mainCtx.font = (digitalFont ? lcdFont : stdFont);
+            mainCtx.fillText(value + '\u00B0', imageWidth / 2 + lcdWidth * 0.05, (bLatest ? lcdPosY1 : lcdPosY2) + lcdHeight * 0.5 + lcdFontHeight * 0.38, lcdWidth * 0.9);
+
+            mainCtx.restore();
+        };
+
+        var drawAreaSectionImage = function (ctx, start, stop, color, filled) {
+
+            ctx.save();
+            ctx.strokeStyle = color;
+            ctx.fillStyle = color;
+            ctx.lineWidth = imageWidth * 0.035;
+            var startAngle = (angleRange / range * start);
+            var stopAngle = startAngle + (stop - start) / (range / angleRange);
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset);
+            ctx.beginPath();
+            if (filled) {
+                ctx.moveTo(0, 0);
+                ctx.arc(0, 0, imageWidth * 0.365 - ctx.lineWidth / 2, startAngle, stopAngle, false);
+            } else {
+                ctx.arc(0, 0, imageWidth * 0.365, startAngle, stopAngle, false);
+            }
+            if (filled) {
+                ctx.moveTo(0, 0);
+                ctx.fill();
+            } else {
+                ctx.stroke();
+            }
+
+            ctx.translate(-centerX, -centerY);
+            ctx.restore();
+        };
+
+        var drawTickmarksImage = function (ctx) {
+            var OUTER_POINT = imageWidth * 0.38,
+                MAJOR_INNER_POINT = imageWidth * 0.35,
+                //MED_INNER_POINT = imageWidth * 0.355,
+                MINOR_INNER_POINT = imageWidth * 0.36,
+                TEXT_WIDTH = imageWidth * 0.1,
+                TEXT_TRANSLATE_X = imageWidth * 0.31,
+                CARDINAL_TRANSLATE_X = imageWidth * 0.36,
+                stdFont, smlFont,
+                i, val, to;
+
+            ctx.textAlign = 'center';
+            ctx.textBaseline = 'middle';
+
+            ctx.save();
+            ctx.strokeStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
+            ctx.translate(centerX, centerY);
+
+            if (!degreeScale) {
+
+                stdFont = 0.12 * imageWidth + 'px serif';
+                smlFont = 0.06 * imageWidth + 'px serif';
+
+                //var angleStep = RAD_FACTOR;
+                ctx.lineWidth = 1;
+                ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor();
+
+                for (i = 0; 360 > i; i += 2.5) {
+
+                    if (0 === i % 5) {
+                        ctx.beginPath();
+                        ctx.moveTo(imageWidth * 0.38, 0);
+                        ctx.lineTo(imageWidth * 0.36, 0);
+                        ctx.closePath();
+                        ctx.stroke();
+                    }
+
+                    // Draw the labels
+                    ctx.save();
+                    switch (i) {
+                    case 0: //E
+                        ctx.translate(imageWidth * 0.35, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = stdFont;
+                        ctx.fillText(pointSymbols[2], 0, 0);
+                        ctx.translate(-imageWidth * 0.35, 0);
+                        break;
+                    case 45: //SE
+                        ctx.translate(imageWidth * 0.29, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = smlFont;
+                        ctx.fillText(pointSymbols[3], 0, 0);
+                        ctx.translate(-imageWidth * 0.29, 0);
+                        break;
+                    case 90: //S
+                        ctx.translate(imageWidth * 0.35, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = stdFont;
+                        ctx.fillText(pointSymbols[4], 0, 0);
+                        ctx.translate(-imageWidth * 0.35, 0);
+                        break;
+                    case 135: //SW
+                        ctx.translate(imageWidth * 0.29, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = smlFont;
+                        ctx.fillText(pointSymbols[5], 0, 0);
+                        ctx.translate(-imageWidth * 0.29, 0);
+                        break;
+                    case 180: //W
+                        ctx.translate(imageWidth * 0.35, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = stdFont;
+                        ctx.fillText(pointSymbols[6], 0, 0);
+                        ctx.translate(-imageWidth * 0.35, 0);
+                        break;
+                    case 225: //NW
+                        ctx.translate(imageWidth * 0.29, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = smlFont;
+                        ctx.fillText(pointSymbols[7], 0, 0);
+                        ctx.translate(-imageWidth * 0.29, 0);
+                        break;
+                    case 270: //N
+                        ctx.translate(imageWidth * 0.35, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = stdFont;
+                        ctx.fillText(pointSymbols[0], 0, 0);
+                        ctx.translate(-imageWidth * 0.35, 0);
+                        break;
+                    case 315: //NE
+                        ctx.translate(imageWidth * 0.29, 0);
+                        ctx.rotate(HALF_PI);
+                        ctx.font = smlFont;
+                        ctx.fillText(pointSymbols[1], 0, 0);
+                        ctx.translate(-imageWidth * 0.29, 0);
+                        break;
+                    }
+                    ctx.restore();
+
+                    if (roseVisible && (0 === i || 22.5 === i || 45 === i || 67.5 === i || 90 === i || 112.5 === i || 135 === i || 157.5 === i || 180 === i || 202.5 === i || 225 === i || 247.5 === i || 270 === i || 292.5 === i || 315 === i || 337.5 === i || 360 === i)) {
+                        // ROSE_LINE
+                        ctx.save();
+                        ctx.beginPath();
+                        // indent the 16 half quadrant lines a bit for visual effect
+                        if (i % 45) {
+                            ctx.moveTo(imageWidth * 0.29, 0);
+                        } else {
+                            ctx.moveTo(imageWidth * 0.38, 0);
+                        }
+                        ctx.lineTo(imageWidth * 0.1, 0);
+                        ctx.closePath();
+                        ctx.restore();
+                        ctx.stroke();
+                    }
+                    ctx.rotate(angleStep * 2.5);
+                }
+            } else {
+                stdFont = Math.floor(0.1 * imageWidth) + 'px serif bold';
+                smlFont = Math.floor(imageWidth * 0.04) + 'px ' + stdFontName;
+
+                ctx.rotate(angleStep * 5);
+                for (i = 5; 360 >= i; i += 5) {
+                    // Draw the labels
+                    ctx.save();
+                    if (pointSymbolsVisible) {
+
+                        switch (i) {
+                        case 360:
+                            ctx.translate(CARDINAL_TRANSLATE_X, 0);
+                            ctx.rotate(HALF_PI);
+                            ctx.font = stdFont;
+                            ctx.fillText(pointSymbols[2], 0, 0, TEXT_WIDTH);
+                            ctx.translate(-CARDINAL_TRANSLATE_X, 0);
+                            break;
+                        case 90:
+                            ctx.translate(CARDINAL_TRANSLATE_X, 0);
+                            ctx.rotate(HALF_PI);
+                            ctx.font = stdFont;
+                            ctx.fillText(pointSymbols[4], 0, 0, TEXT_WIDTH);
+                            ctx.translate(-CARDINAL_TRANSLATE_X, 0);
+                            break;
+                        case 180:
+                            ctx.translate(CARDINAL_TRANSLATE_X, 0);
+                            ctx.rotate(HALF_PI);
+                            ctx.font = stdFont;
+                            ctx.fillText(pointSymbols[6], 0, 0, TEXT_WIDTH);
+                            ctx.translate(-CARDINAL_TRANSLATE_X, 0);
+                            break;
+                        case 270:
+                            ctx.translate(CARDINAL_TRANSLATE_X, 0);
+                            ctx.rotate(HALF_PI);
+                            ctx.font = stdFont;
+                            ctx.fillText(pointSymbols[0], 0, 0, TEXT_WIDTH);
+                            ctx.translate(-CARDINAL_TRANSLATE_X, 0);
+                            break;
+
+                        case 5:
+                        case 85:
+                        case 95:
+                        case 175:
+                        case 185:
+                        case 265:
+                        case 275:
+                        case 355:
+                            //leave room for ordinal labels
+                            break;
+
+                        default:
+                            if ((i + 90) % 20) {
+                                ctx.lineWidth = ((i + 90) % 5) ? 1.5 : 1;
+                                ctx.beginPath();
+                                ctx.moveTo(OUTER_POINT, 0);
+                                to = (i + 90) % 10 ? MINOR_INNER_POINT : MAJOR_INNER_POINT;
+                                ctx.lineTo(to, 0);
+                                ctx.closePath();
+                                ctx.stroke();
+                            } else {
+                                ctx.lineWidth = 1.5;
+                                ctx.beginPath();
+                                ctx.moveTo(OUTER_POINT, 0);
+                                ctx.lineTo(MAJOR_INNER_POINT, 0);
+                                ctx.closePath();
+                                ctx.stroke();
+                                val = (i + 90) % 360;
+                                ctx.translate(TEXT_TRANSLATE_X, 0);
+                                ctx.rotate(HALF_PI);
+                                ctx.font = smlFont;
+                                ctx.fillText(('0'.substring(val >= 100) + val), 0, 0, TEXT_WIDTH);
+                                ctx.translate(-TEXT_TRANSLATE_X, 0);
+                            }
+                        }
+                    } else {
+
+                        if ((i + 90) % 20) {
+                            ctx.lineWidth = ((i + 90) % 5) ? 1.5 : 1;
+                            ctx.beginPath();
+                            ctx.moveTo(OUTER_POINT, 0);
+                            to = (i + 90) % 10 ? MINOR_INNER_POINT : MAJOR_INNER_POINT;
+                            ctx.lineTo(to, 0);
+                            ctx.closePath();
+                            ctx.stroke();
+                        } else {
+                            ctx.lineWidth = 1.5;
+                            ctx.beginPath();
+                            ctx.moveTo(OUTER_POINT, 0);
+                            ctx.lineTo(MAJOR_INNER_POINT, 0);
+                            ctx.closePath();
+                            ctx.stroke();
+                            val = (i + 90) % 360;
+                            if (degreeScaleHalf) {
+                                //invert 180-360
+                                if (val > 180) {
+                                    val = -(360 - val);
+                                }
+                            }
+                            ctx.translate(TEXT_TRANSLATE_X, 0);
+                            ctx.rotate(HALF_PI);
+                            ctx.font = smlFont;
+                            ctx.fillText(val, 0, 0, TEXT_WIDTH);
+                            ctx.translate(-TEXT_TRANSLATE_X, 0);
+                        }
+                    }
+                    ctx.restore();
+                    ctx.rotate(angleStep * 5);
+                }
+
+            }
+            ctx.translate(-centerX, -centerY);
+            ctx.restore();
+        };
+
+        var drawLcdTitles = function (ctx) {
+            if (lcdTitleStrings.length > 0) {
+                ctx.save();
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillStyle = (useColorLabels ? pointerColor.medium.getRgbaColor() : backgroundColor.labelColor.getRgbaColor());
+                ctx.font = 0.040 * imageWidth + 'px ' + stdFontName;
+                ctx.fillText(lcdTitleStrings[0], imageWidth / 2, imageHeight * 0.29, imageWidth * 0.3);
+                ctx.fillStyle = (useColorLabels ? pointerColorAverage.medium.getRgbaColor() : backgroundColor.labelColor.getRgbaColor());
+                ctx.fillText(lcdTitleStrings[1], imageWidth / 2, imageHeight * 0.71, imageWidth * 0.3);
+                if (titleString.length > 0) {
+                    ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
+                    ctx.font = 0.0467 * imageWidth + 'px ' + stdFontName;
+                    ctx.fillText(titleString, imageWidth / 2, imageHeight * 0.5, imageWidth * 0.3);
+                }
+            }
+        };
+
+        // **************   Initialization  ********************
+        // Draw all static painting code to background
+
+        var init = function (parameters) {
+            parameters = parameters || {};
+            var drawBackground = (undefined === parameters.background ? false : parameters.background);
+            var drawPointer = (undefined === parameters.pointer ? false : parameters.pointer);
+            var drawForeground = (undefined === parameters.foreground ? false : parameters.foreground);
+
+            initialized = true;
+
+            if (drawBackground && frameVisible) {
+                drawRadialFrameImage(backgroundContext, frameDesign, centerX, centerY, imageWidth, imageHeight);
+            }
+
+            if (drawBackground && backgroundVisible) {
+                // Create background in background buffer (backgroundBuffer)
+                drawRadialBackgroundImage(backgroundContext, backgroundColor, centerX, centerY, imageWidth, imageHeight);
+
+                // Create custom layer in background buffer (backgroundBuffer)
+                drawRadialCustomImage(backgroundContext, customLayer, centerX, centerY, imageWidth, imageHeight);
+
+                // Create section in background buffer (backgroundBuffer)
+                if (null !== section && 0 < section.length) {
+                    var sectionIndex = section.length;
+                    do {
+                        sectionIndex--;
+                        drawAreaSectionImage(backgroundContext, section[sectionIndex].start, section[sectionIndex].stop, section[sectionIndex].color, false);
+                    }
+                    while (0 < sectionIndex);
+                }
+
+                // Create area in background buffer (backgroundBuffer)
+                if (null !== area && 0 < area.length) {
+                    var areaIndex = area.length;
+                    do {
+                        areaIndex--;
+                        drawAreaSectionImage(backgroundContext, area[areaIndex].start, area[areaIndex].stop, area[areaIndex].color, true);
+                    }
+                    while (0 < areaIndex);
+                }
+
+                drawTickmarksImage(backgroundContext);
+            }
+
+            if (drawBackground && roseVisible) {
+                drawRoseImage(backgroundContext, centerX, centerY, imageWidth, imageHeight, backgroundColor);
+            }
+
+            // Create lcd background if selected in background buffer (backgroundBuffer)
+            if (drawBackground && lcdVisible) {
+                lcdBuffer = createLcdBackgroundImage(lcdWidth, lcdHeight, lcdColor);
+                backgroundContext.drawImage(lcdBuffer, lcdPosX, lcdPosY1);
+                backgroundContext.drawImage(lcdBuffer, lcdPosX, lcdPosY2);
+                // Create title in background buffer (backgroundBuffer)
+                drawLcdTitles(backgroundContext);
+            }
+
+            if (drawPointer) {
+                drawPointerImage(pointerContextAverage, imageWidth, pointerTypeAverage, pointerColorAverage, backgroundColor.labelColor);
+                drawPointerImage(pointerContextLatest, imageWidth, pointerTypeLatest, pointerColor, backgroundColor.labelColor);
+            }
+
+            if (drawForeground && foregroundVisible) {
+                var knobVisible = (pointerTypeLatest.type === 'type15' || pointerTypeLatest.type === 'type16' ? false : true);
+                drawRadialForegroundImage(foregroundContext, foregroundType, imageWidth, imageHeight, knobVisible, knobType, knobStyle);
+            }
+        };
+
+        var resetBuffers = function (buffers) {
+            buffers = buffers || {};
+            var resetBackground = (undefined === buffers.background ? false : buffers.background);
+            var resetPointer = (undefined === buffers.pointer ? false : buffers.pointer);
+            var resetForeground = (undefined === buffers.foreground ? false : buffers.foreground);
+
+            // Buffer for all static background painting code
+            if (resetBackground) {
+                backgroundBuffer.width = size;
+                backgroundBuffer.height = size;
+                backgroundContext = backgroundBuffer.getContext('2d');
+            }
+            // Buffers for pointer image painting code
+            if (resetPointer) {
+                pointerBufferLatest.width = size;
+                pointerBufferLatest.height = size;
+                pointerContextLatest = pointerBufferLatest.getContext('2d');
+
+                pointerBufferAverage.width = size;
+                pointerBufferAverage.height = size;
+                pointerContextAverage = pointerBufferAverage.getContext('2d');
+            }
+            // Buffer for static foreground painting code
+            if (resetForeground) {
+                foregroundBuffer.width = size;
+                foregroundBuffer.height = size;
+                foregroundContext = foregroundBuffer.getContext('2d');
+            }
+        };
+
+        //************************************ Public methods **************************************
+        this.setValueLatest = function (newValue) {
+            // Actually need to handle 0-360 rather than 0-359
+            // 1-360 are used for directions
+            // 0 is used as a special case to indicate 'calm'
+            newValue = parseFloat(newValue);
+            newValue = newValue === 360 ? 360 : newValue % 360;
+            if (valueLatest !== newValue) {
+                valueLatest = newValue;
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.getValueLatest = function () {
+            return valueLatest;
+        };
+
+        this.setValueAverage = function (newValue) {
+            // Actually need to handle 0-360 rather than 0-359
+            // 1-360 are used for directions
+            // 0 is used as a special case to indicate 'calm'
+            newValue = parseFloat(newValue);
+            newValue = newValue === 360 ? 360 : newValue % 360;
+            if (valueAverage !== newValue) {
+                valueAverage = newValue;
+                this.repaint();
+            }
+            return this;
+        };
+
+        this.getValueAverage = function () {
+            return valueAverage;
+        };
+
+        this.setValueAnimatedLatest = function (newValue, callback) {
+            var targetValue,
+                gauge = this,
+                diff,
+                time;
+            // Actually need to handle 0-360 rather than 0-359
+            // 1-360 are used for directions
+            // 0 is used as a special case to indicate 'calm'
+            newValue = parseFloat(newValue);
+            targetValue = (newValue === 360 ? 360 : newValue % 360);
+
+            if (valueLatest !== targetValue) {
+                if (undefined !== tweenLatest && tweenLatest.isPlaying) {
+                    tweenLatest.stop();
+                }
+
+                diff = getShortestAngle(valueLatest, targetValue);
+
+                if (diff !== 0) { // 360 - 0 is a diff of zero
+                    time = fullScaleDeflectionTime * Math.abs(diff) / 180;
+                    time = Math.max(time, fullScaleDeflectionTime / 5);
+                    tweenLatest = new Tween({}, '', Tween.regularEaseInOut, valueLatest, valueLatest + diff, time);
+                    tweenLatest.onMotionChanged = function (event) {
+                        valueLatest = event.target._pos === 360 ? 360 : event.target._pos % 360;
+                        if (!repainting) {
+                            repainting = true;
+                            requestAnimFrame(gauge.repaint);
+                        }
+                    };
+
+                    tweenLatest.onMotionFinished = function () {
+                        valueLatest = targetValue;
+                        if (!repainting) {
+                            repainting = true;
+                            requestAnimFrame(gauge.repaint);
+                        }
+                        // do we have a callback function to process?
+                        if (callback && typeof(callback) === "function") {
+                            callback();
+                        }
+                    };
+
+                    tweenLatest.start();
+                } else {
+                    // target different from current, but diff is zero (0 -> 360 for instance), so just repaint
+                    valueLatest = targetValue;
+                    if (!repainting) {
+                        repainting = true;
+                        requestAnimFrame(gauge.repaint);
+                    }
+                }
+            }
+            return this;
+        };
+
+        this.setValueAnimatedAverage = function (newValue, callback) {
+            var targetValue,
+                gauge = this,
+                diff, time;
+            // Actually need to handle 0-360 rather than 0-359
+            // 1-360 are used for directions
+            // 0 is used as a special case to indicate 'calm'
+            newValue = parseFloat(newValue);
+            targetValue = (newValue === 360 ? 360 : newValue % 360);
+            if (valueAverage !== newValue) {
+                if (undefined !== tweenAverage && tweenAverage.isPlaying) {
+                    tweenAverage.stop();
+                }
+
+                diff = getShortestAngle(valueAverage, targetValue);
+                if (diff !== 0) { // 360 - 0 is a diff of zero
+                    time = fullScaleDeflectionTime * Math.abs(diff) / 180;
+                    time = Math.max(time, fullScaleDeflectionTime / 5);
+                    tweenAverage = new Tween({}, '', Tween.regularEaseInOut, valueAverage, valueAverage + diff, time);
+                    tweenAverage.onMotionChanged = function (event) {
+                        valueAverage = event.target._pos === 360 ? 360 : event.target._pos % 360;
+                        if (!repainting) {
+                            repainting = true;
+                            requestAnimFrame(gauge.repaint);
+                        }
+                    };
+
+                    tweenAverage.onMotionFinished = function () {
+                        valueAverage = targetValue;
+                        if (!repainting) {
+                            repainting = true;
+                            requestAnimFrame(gauge.repaint);
+                        }
+                        // do we have a callback function to process?
+                        if (callback && typeof(callback) === "function") {
+                            callback();
+                        }
+                    };
+
+                    tweenAverage.start();
+                } else {
+                    // target different from current, but diff is zero (0 -> 360 for instance), so just repaint
+                    valueAverage = targetValue;
+                    if (!repainting) {
+                        repainting = true;
+                        requestAnimFrame(gauge.repaint);
+                    }
+                }
+            }
+            return this;
+        };
+
+        this.setArea = function (areaVal) {
+            area = areaVal;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setSection = function (areaSec) {
+            section = areaSec;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setFrameDesign = function (newFrameDesign) {
+            frameDesign = newFrameDesign;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setBackgroundColor = function (newBackgroundColor) {
+            backgroundColor = newBackgroundColor;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setForegroundType = function (newForegroundType) {
+            resetBuffers({foreground: true});
+            foregroundType = newForegroundType;
+            init({foreground: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerColor = function (newPointerColor) {
+            resetBuffers({pointer: true});
+            pointerColor = newPointerColor;
+            init({pointer: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerColorAverage = function (newPointerColor) {
+            resetBuffers({pointer: true});
+            pointerColorAverage = newPointerColor;
+            init({pointer: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerType = function (newPointerType) {
+            pointerTypeLatest = newPointerType;
+            resetBuffers({pointer: true,
+                          foreground: true
+                         });
+            init({pointer: true,
+                  foreground: true
+                  });
+            this.repaint();
+            return this;
+        };
+
+        this.setPointerTypeAverage = function (newPointerType) {
+            pointerTypeAverage = newPointerType;
+            resetBuffers({pointer: true,
+                          foreground: true
+                         });
+            init({pointer: true,
+                  foreground: true
+                  });
+            this.repaint();
+            return this;
+        };
+
+        this.setPointSymbols = function (newPointSymbols) {
+            pointSymbols = newPointSymbols;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdColor = function (newLcdColor) {
+            lcdColor = newLcdColor;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.setLcdTitleStrings = function (titles) {
+            lcdTitleStrings = titles;
+            resetBuffers({background: true});
+            init({background: true});
+            this.repaint();
+            return this;
+        };
+
+        this.repaint = function () {
+            if (!initialized) {
+                init({frame: true,
+                      background: true,
+                      led: true,
+                      pointer: true,
+                      foreground: true});
+            }
+
+            mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
+
+            if (frameVisible || backgroundVisible) {
+                mainCtx.drawImage(backgroundBuffer, 0, 0);
+            }
+
+            // Draw lcd display
+            if (lcdVisible) {
+                drawLcdText(valueLatest, true);
+                drawLcdText(valueAverage, false);
+            }
+
+            // Define rotation angle
+            angleAverage = valueAverage * angleStep;
+
+            // we have to draw to a rotated temporary image area so we can translate in
+            // absolute x, y values when drawing to main context
+            var shadowOffset = imageWidth * 0.006;
+
+            // Define rotation center
+            mainCtx.save();
+            mainCtx.translate(centerX, centerY);
+            mainCtx.rotate(angleAverage);
+            mainCtx.translate(-centerX, -centerY);
+            // Set the pointer shadow params
+            mainCtx.shadowColor = 'rgba(0, 0, 0, 0.8)';
+            mainCtx.shadowOffsetX = mainCtx.shadowOffsetY = shadowOffset;
+            mainCtx.shadowBlur = shadowOffset * 2;
+            // Draw the pointer
+            mainCtx.drawImage(pointerBufferAverage, 0, 0);
+            // Define rotation angle difference for average pointer
+            angleLatest = valueLatest * angleStep  - angleAverage;
+            mainCtx.translate(centerX, centerY);
+            mainCtx.rotate(angleLatest);
+            mainCtx.translate(-centerX, -centerY);
+            mainCtx.drawImage(pointerBufferLatest, 0, 0);
+            mainCtx.restore();
+
+            if (foregroundVisible) {
+                mainCtx.drawImage(foregroundBuffer, 0, 0);
+            }
+
+            repainting = false;
+        };
+
+        // Visualize the component
+        this.repaint();
+
+        return this;
+    };
+
+    var led = function (canvas, parameters) {
+        parameters = parameters || {};
+        var size = (undefined === parameters.size ? 0 : parameters.size),
+            ledColor = (undefined === parameters.ledColor ? steelseries.LedColor.RED_LED : parameters.ledColor);
+
+        var ledBlinking = false;
+        var ledTimerId = 0;
+
+        // Get the canvas context and clear it
+        var mainCtx = getCanvasContext(canvas);
+        // Has a size been specified?
+        if (size === 0) {
+            size = Math.min(mainCtx.canvas.width, mainCtx.canvas.height);
+        }
+
+        // Set the size - also clears the canvas
+        mainCtx.canvas.width = size;
+        mainCtx.canvas.height = size;
+
+        var initialized = false;
+
+        // Buffer for led on painting code
+        var ledBufferOn = doc.createElement('canvas');
+        ledBufferOn.width = size;
+        ledBufferOn.height = size;
+        var ledContextOn = ledBufferOn.getContext('2d');
+
+        // Buffer for led off painting code
+        var ledBufferOff = doc.createElement('canvas');
+        ledBufferOff.width = size;
+        ledBufferOff.height = size;
+        var ledContextOff = ledBufferOff.getContext('2d');
+
+        // Buffer for current led painting code
+        var ledBuffer = ledBufferOff;
+
+        var init = function () {
+            initialized = true;
+
+            // Draw LED ON in ledBuffer_ON
+            ledContextOn.clearRect(0, 0, ledContextOn.canvas.width, ledContextOn.canvas.height);
+            ledContextOn.drawImage(createLedImage(size, 1, ledColor), 0, 0);
+
+            // Draw LED ON in ledBuffer_OFF
+            ledContextOff.clearRect(0, 0, ledContextOff.canvas.width, ledContextOff.canvas.height);
+            ledContextOff.drawImage(createLedImage(size, 0, ledColor), 0, 0);
+        };
+
+        this.toggleLed = function () {
+            if (ledBuffer === ledBufferOn) {
+                ledBuffer = ledBufferOff;
+            } else {
+                ledBuffer = ledBufferOn;
+            }
+            repaint();
+            return this;
+        };
+
+        this.setLedColor = function (newColor) {
+            ledColor = newColor;
+            initialized = false;
+            repaint();
+            return this;
+        };
+
+        this.setLedOnOff = function (on) {
+            if (!!on) {
+                ledBuffer = ledBufferOn;
+            } else {
+                ledBuffer = ledBufferOff;
+            }
+            repaint();
+            return this;
+        };
+
+        this.blink = function (blink) {
+            if (!!blink) {
+                if (!ledBlinking) {
+                    ledTimerId = setInterval(this.toggleLed, 1000);
+                    ledBlinking = true;
+                }
+            } else {
+                if (ledBlinking) {
+                    clearInterval(ledTimerId);
+                    ledBlinking = false;
+                    ledBuffer = ledBufferOff;
+                }
+            }
+            return this;
+        };
+
+        var repaint = function () {
+            if (!initialized) {
+                init();
+            }
+
+            mainCtx.save();
+            mainCtx.clearRect(0, 0, mainCtx.canvas.width, mainCtx.canvas.height);
+
+            mainCtx.drawImage(ledBuffer, 0, 0);
+
+            mainCtx.restore();
+        };
+
+        repaint();
+
+        return this;
+    };
+
+    var odometer = function (canvas, parameters) {
+        parameters = parameters || {};
+
+        // parameters
+        var _context = (undefined === parameters._context ? null : parameters._context),  // If component used internally by steelseries
+            height = (undefined === parameters.height ? 0 : parameters.height),
+            digits = (undefined === parameters.digits ? 6 : parameters.digits),
+            decimals = (undefined === parameters.decimals ? 1 : parameters.decimals),
+            decimalBackColor = (undefined === parameters.decimalBackColor ? '#F0F0F0' : parameters.decimalBackColor),
+            decimalForeColor = (undefined === parameters.decimalForeColor ? '#F01010' : parameters.decimalForeColor),
+            font = (undefined === parameters.font ? 'sans-serif' : parameters.font),
+            value = (undefined === parameters.value ? 0 : parameters.value),
+            valueBackColor = (undefined === parameters.valueBackColor ? '#050505' : parameters.valueBackColor),
+            valueForeColor = (undefined === parameters.valueForeColor ? '#F8F8F8' : parameters.valueForeColor),
+            wobbleFactor = (undefined === parameters.wobbleFactor ? 0.07 : parameters.wobbleFactor),
+            //
+            initialized = false,
+            tween, ctx,
+            repainting = false,
+            digitHeight, digitWidth, stdFont,
+            width, columnHeight, verticalSpace, zeroOffset,
+            wobble = [],
+            //buffers
+            backgroundBuffer, backgroundContext,
+            foregroundBuffer, foregroundContext,
+            digitBuffer, digitContext,
+            decimalBuffer, decimalContext;
+            // End of variables
+
+        // Get the canvas context and clear it
+        if (_context) {
+            ctx = _context;
+        } else {
+            ctx = getCanvasContext(canvas);
+        }
+
+        // Has a height been specified?
+        if (height === 0) {
+            height = ctx.canvas.height;
+        }
+
+        // Cannot display negative values yet
+        if (value < 0) {
+            value = 0;
+        }
+
+        digitHeight = Math.floor(height * 0.85);
+        stdFont = '600 ' + digitHeight + 'px ' + font;
+
+        digitWidth = Math.floor(height * 0.68);
+        width = digitWidth * (digits + decimals);
+        columnHeight = digitHeight * 11;
+        verticalSpace = columnHeight / 12;
+        zeroOffset = verticalSpace * 0.81;
+
+        // Resize and clear the main context
+        ctx.canvas.width = width;
+        ctx.canvas.height = height;
+
+        // Create buffers
+        backgroundBuffer = createBuffer(width, height);
+        backgroundContext = backgroundBuffer.getContext('2d');
+
+        foregroundBuffer = createBuffer(width, height);
+        foregroundContext = foregroundBuffer.getContext('2d');
+
+        digitBuffer = createBuffer(digitWidth, columnHeight * 1.1);
+        digitContext = digitBuffer.getContext('2d');
+
+        decimalBuffer = createBuffer(digitWidth, columnHeight * 1.1);
+        decimalContext = decimalBuffer.getContext('2d');
+
+        function init() {
+            var grad, i;
+
+            initialized = true;
+
+            // Create the foreground
+            foregroundContext.rect(0, 0, width, height);
+            grad = foregroundContext.createLinearGradient(0, 0, 0, height);
+            grad.addColorStop(0, 'rgba(0, 0, 0, 1)');
+            grad.addColorStop(0.1, 'rgba(0, 0, 0, 0.4)');
+            grad.addColorStop(0.33, 'rgba(255, 255, 255, 0.45)');
+            grad.addColorStop(0.46, 'rgba(255, 255, 255, 0)');
+            grad.addColorStop(0.9, 'rgba(0, 0, 0, 0.4)');
+            grad.addColorStop(1, 'rgba(0, 0, 0, 1)');
+            foregroundContext.fillStyle = grad;
+            foregroundContext.fill();
+
+            // Create a digit column
+            // background
+            digitContext.rect(0, 0, digitWidth, columnHeight * 1.1);
+            digitContext.fillStyle = valueBackColor;
+            digitContext.fill();
+            // edges
+            digitContext.strokeStyle = '#f0f0f0';
+            digitContext.lineWidth = '1px'; //height * 0.1 + 'px';
+            digitContext.moveTo(0, 0);
+            digitContext.lineTo(0, columnHeight * 1.1);
+            digitContext.stroke();
+            digitContext.strokeStyle = '#202020';
+            digitContext.moveTo(digitWidth, 0);
+            digitContext.lineTo(digitWidth, columnHeight * 1.1);
+            digitContext.stroke();
+            // numerals
+            digitContext.textAlign = 'center';
+            digitContext.textBaseline = 'middle';
+            digitContext.font = stdFont;
+            digitContext.fillStyle = valueForeColor;
+            // put the digits 901234567890 vertically into the buffer
+            for (i = 9; i < 21; i++) {
+                digitContext.fillText(i % 10, digitWidth * 0.5, verticalSpace * (i - 9) + verticalSpace / 2);
+            }
+
+            // Create a decimal column
+            if (decimals > 0) {
+                // background
+                decimalContext.rect(0, 0, digitWidth, columnHeight * 1.1);
+                decimalContext.fillStyle = decimalBackColor;
+                decimalContext.fill();
+                // edges
+                decimalContext.strokeStyle = '#f0f0f0';
+                decimalContext.lineWidth = '1px'; //height * 0.1 + 'px';
+                decimalContext.moveTo(0, 0);
+                decimalContext.lineTo(0, columnHeight * 1.1);
+                decimalContext.stroke();
+                decimalContext.strokeStyle = '#202020';
+                decimalContext.moveTo(digitWidth, 0);
+                decimalContext.lineTo(digitWidth, columnHeight * 1.1);
+                decimalContext.stroke();
+                // numerals
+                decimalContext.textAlign = 'center';
+                decimalContext.textBaseline = 'middle';
+                decimalContext.font = stdFont;
+                decimalContext.fillStyle = decimalForeColor;
+                // put the digits 901234567890 vertically into the buffer
+                for (i = 9; i < 21; i++) {
+                    decimalContext.fillText(i % 10, digitWidth * 0.5, verticalSpace * (i - 9) + verticalSpace / 2);
+                }
+            }
+            // wobble factors
+            for (i = 0; i < (digits + decimals); i++) {
+                wobble[i] = Math.random() * wobbleFactor * height - wobbleFactor * height / 2;
+            }
+
+        }
+
+        function drawDigits() {
+            var pos = 1,
+            val = value, i, num, numb, frac, prevNum;
+
+            // do not use Math.pow() - rounding errors!
+            for (i = 0; i < decimals; i++) {
+                val *= 10;
+            }
+
+            numb = Math.floor(val);
+            frac = val - numb;
+            numb = String(numb);
+            prevNum = 9;
+
+            for (i = 0; i < decimals + digits; i++) {
+                num = +numb.substring(numb.length - i - 1, numb.length - i) || 0;
+                if (prevNum !== 9) {
+                    frac = 0;
+                }
+                if (i < decimals) {
+                    backgroundContext.drawImage(decimalBuffer, width - digitWidth * pos, -(verticalSpace * (num + frac) + zeroOffset + wobble[i]));
+                } else {
+                    backgroundContext.drawImage(digitBuffer, width - digitWidth * pos, -(verticalSpace * (num + frac) + zeroOffset + wobble[i]));
+                }
+                pos++;
+                prevNum = num;
+            }
+        }
+
+        this.setValueAnimated = function (newVal, callback) {
+            var gauge = this;
+            newVal = parseFloat(newVal);
+
+            if (newVal < 0) {
+                newVal = 0;
+            }
+            if (value !== newVal) {
+                if (undefined !== tween && tween.isPlaying) {
+                    tween.stop();
+                }
+
+                tween = new Tween({}, '', Tween.strongEaseOut, value, newVal, 2);
+                tween.onMotionChanged = function (event) {
+                    value = event.target._pos;
+                    if (!repainting) {
+                        repainting = true;
+                        requestAnimFrame(gauge.repaint);
+                    }
+                };
+
+                // do we have a callback function to process?
+                if (callback && typeof(callback) === "function") {
+                    tween.onMotionFinished = callback;
+                }
+
+                tween.start();
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.setValue = function (newVal) {
+            value = parseFloat(newVal);
+            if (value < 0) {
+                value = 0;
+            }
+            this.repaint();
+            return this;
+        };
+
+        this.getValue = function () {
+            return value;
+        };
+
+        this.repaint = function () {
+            if (!initialized) {
+                init();
+            }
+
+            // draw digits
+            drawDigits();
+
+            // draw the foreground
+            backgroundContext.drawImage(foregroundBuffer, 0, 0);
+
+            // paint back to the main context
+            ctx.drawImage(backgroundBuffer, 0, 0);
+
+            repainting = false;
+        };
+
+        this.repaint();
+    };
+
+    //************************************  I M A G E   -   F U N C T I O N S  *****************************************
+
+    var drawRoseImage = function (ctx, centerX, centerY, imageWidth, imageHeight, backgroundColor) {
+        var fill = true,
+            i, grad,
+            symbolColor = backgroundColor.symbolColor.getRgbaColor();
+
+        ctx.save();
+        ctx.lineWidth = 1;
+        ctx.fillStyle = symbolColor;
+        ctx.strokeStyle = symbolColor;
+        ctx.translate(centerX, centerY);
+        // broken ring
+        for (i = 0; i < 360; i += 15) {
+            fill = !fill;
+
+            ctx.beginPath();
+            ctx.arc(0, 0, imageWidth * 0.26, i * RAD_FACTOR, (i + 15) * RAD_FACTOR, false);
+            ctx.arc(0, 0, imageWidth * 0.23, (i + 15) * RAD_FACTOR, i * RAD_FACTOR, true);
+            ctx.closePath();
+            if (fill) {
+                ctx.fill();
+            }
+            ctx.stroke();
+        }
+
+        ctx.translate(-centerX, -centerY);
+
+/*
+        // PATH1_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.560747, imageHeight * 0.584112);
+        ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.644859);
+        ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.560747);
+        ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.584112);
+        ctx.closePath();
+        ctx.fillStyle = fillColorPath;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH2_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.411214, imageHeight * 0.560747);
+        ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.644859);
+        ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.588785);
+        ctx.lineTo(imageWidth * 0.411214, imageHeight * 0.560747);
+        ctx.closePath();
+        ctx.fillStyle = fillColorPath;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH3_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.584112, imageHeight * 0.443925);
+        ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.359813);
+        ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.420560);
+        ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.443925);
+        ctx.closePath();
+        ctx.fillStyle = fillColorPath;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH4_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.439252, imageHeight * 0.415887);
+        ctx.lineTo(imageWidth * 0.355140, imageHeight * 0.359813);
+        ctx.lineTo(imageWidth * 0.415887, imageHeight * 0.439252);
+        ctx.lineTo(imageWidth * 0.439252, imageHeight * 0.415887);
+        ctx.closePath();
+        ctx.fillStyle = fillColorPath;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH5_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.523364, imageHeight * 0.397196);
+        ctx.lineTo(imageWidth * 0.5, imageHeight * 0.196261);
+        ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.397196);
+        ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.397196);
+        ctx.closePath();
+        var PATH5_2_GRADIENT = ctx.createLinearGradient(0.476635 * imageWidth, 0, 0.518691 * imageWidth, 0);
+        PATH5_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)');
+        PATH5_2_GRADIENT.addColorStop(0.48, 'rgb(222, 223, 218)');
+        PATH5_2_GRADIENT.addColorStop(0.49, backgroundColor.symbolColor.getRgbaColor());
+        PATH5_2_GRADIENT.addColorStop(1, backgroundColor.symbolColor.getRgbaColor());
+        ctx.fillStyle = PATH5_2_GRADIENT;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH6_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.471962, imageHeight * 0.607476);
+        ctx.lineTo(imageWidth * 0.5, imageHeight * 0.813084);
+        ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.607476);
+        ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.607476);
+        ctx.closePath();
+        var PATH6_2_GRADIENT = ctx.createLinearGradient(0.518691 * imageWidth, 0, (0.518691 + -0.037383) * imageWidth, 0);
+        PATH6_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)');
+        PATH6_2_GRADIENT.addColorStop(0.56, 'rgb(222, 223, 218)');
+        PATH6_2_GRADIENT.addColorStop(0.5601, backgroundColor.symbolColor.getRgbaColor());
+        PATH6_2_GRADIENT.addColorStop(1, backgroundColor.symbolColor.getRgbaColor());
+        ctx.fillStyle = PATH6_2_GRADIENT;
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'square';
+        ctx.lineJoin = 'miter';
+        ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor();
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH7_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.602803, imageHeight * 0.528037);
+        ctx.lineTo(imageWidth * 0.803738, imageHeight * 0.5);
+        ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.476635);
+        ctx.lineTo(imageWidth * 0.602803, imageHeight * 0.528037);
+        ctx.closePath();
+        var PATH7_2_GRADIENT = ctx.createLinearGradient(0, 0.485981 * imageHeight, 0, 0.514018 * imageHeight);
+        PATH7_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)');
+        PATH7_2_GRADIENT.addColorStop(0.48, 'rgb(222, 223, 218)');
+        PATH7_2_GRADIENT.addColorStop(0.49, backgroundColor.symbolColor.getRgbaColor());
+        PATH7_2_GRADIENT.addColorStop(1, backgroundColor.symbolColor.getRgbaColor());
+        ctx.fillStyle = PATH7_2_GRADIENT;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH8_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.392523, imageHeight * 0.476635);
+        ctx.lineTo(imageWidth * 0.191588, imageHeight * 0.5);
+        ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.528037);
+        ctx.lineTo(imageWidth * 0.392523, imageHeight * 0.476635);
+        ctx.closePath();
+        var PATH8_2_GRADIENT = ctx.createLinearGradient(0, 0.528037 * imageHeight, 0, 0.485981 * imageHeight);
+        PATH8_2_GRADIENT.addColorStop(0, 'rgb(222, 223, 218)');
+        PATH8_2_GRADIENT.addColorStop(0.52, 'rgb(222, 223, 218)');
+        PATH8_2_GRADIENT.addColorStop(0.53, backgroundColor.symbolColor.getRgbaColor());
+        PATH8_2_GRADIENT.addColorStop(1, backgroundColor.symbolColor.getRgbaColor());
+        ctx.fillStyle = PATH8_2_GRADIENT;
+        ctx.fill();
+        ctx.stroke();
+
+        // PATH9_2
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.406542, imageHeight * 0.504672);
+        ctx.bezierCurveTo(imageWidth * 0.406542, imageHeight * 0.453271, imageWidth * 0.448598, imageHeight * 0.411214, imageWidth * 0.5, imageHeight * 0.411214);
+        ctx.bezierCurveTo(imageWidth * 0.546728, imageHeight * 0.411214, imageWidth * 0.588785, imageHeight * 0.453271, imageWidth * 0.588785, imageHeight * 0.504672);
+        ctx.bezierCurveTo(imageWidth * 0.588785, imageHeight * 0.551401, imageWidth * 0.546728, imageHeight * 0.593457, imageWidth * 0.5, imageHeight * 0.593457);
+        ctx.bezierCurveTo(imageWidth * 0.448598, imageHeight * 0.593457, imageWidth * 0.406542, imageHeight * 0.551401, imageWidth * 0.406542, imageHeight * 0.504672);
+        ctx.closePath();
+        ctx.moveTo(imageWidth * 0.387850, imageHeight * 0.504672);
+        ctx.bezierCurveTo(imageWidth * 0.387850, imageHeight * 0.560747, imageWidth * 0.439252, imageHeight * 0.612149, imageWidth * 0.5, imageHeight * 0.612149);
+        ctx.bezierCurveTo(imageWidth * 0.556074, imageHeight * 0.612149, imageWidth * 0.607476, imageHeight * 0.560747, imageWidth * 0.607476, imageHeight * 0.504672);
+        ctx.bezierCurveTo(imageWidth * 0.607476, imageHeight * 0.443925, imageWidth * 0.556074, imageHeight * 0.392523, imageWidth * 0.5, imageHeight * 0.392523);
+        ctx.bezierCurveTo(imageWidth * 0.439252, imageHeight * 0.392523, imageWidth * 0.387850, imageHeight * 0.443925, imageWidth * 0.387850, imageHeight * 0.504672);
+        ctx.closePath();
+        ctx.fillStyle = fillColorPath;
+        ctx.lineWidth = 1;
+        ctx.lineCap = 'square';
+        ctx.lineJoin = 'miter';
+        ctx.strokeStyle = backgroundColor.symbolColor.getRgbaColor();
+        ctx.fill();
+        ctx.stroke();
+        ctx.restore();
+*/
+        // Replacement code, not quite the same but much smaller!
+
+        for (i = 0; 360 >= i; i += 90) {
+            // Small pointers
+            ctx.beginPath();
+            ctx.moveTo(imageWidth * 0.560747, imageHeight * 0.584112);
+            ctx.lineTo(imageWidth * 0.640186, imageHeight * 0.644859);
+            ctx.lineTo(imageWidth * 0.584112, imageHeight * 0.560747);
+            ctx.lineTo(imageWidth * 0.560747, imageHeight * 0.584112);
+            ctx.closePath();
+            ctx.fillStyle = symbolColor;
+            ctx.fill();
+            ctx.stroke();
+            // Large pointers
+            ctx.beginPath();
+            ctx.moveTo(imageWidth * 0.523364, imageHeight * 0.397196);
+            ctx.lineTo(imageWidth * 0.5, imageHeight * 0.196261);
+            ctx.lineTo(imageWidth * 0.471962, imageHeight * 0.397196);
+            ctx.lineTo(imageWidth * 0.523364, imageHeight * 0.397196);
+            ctx.closePath();
+            grad = ctx.createLinearGradient(0.476635 * imageWidth, 0, 0.518691 * imageWidth, 0);
+            grad.addColorStop(0, 'rgb(222, 223, 218)');
+            grad.addColorStop(0.48, 'rgb(222, 223, 218)');
+            grad.addColorStop(0.49, symbolColor);
+            grad.addColorStop(1, symbolColor);
+            ctx.fillStyle = grad;
+            ctx.fill();
+            ctx.stroke();
+            ctx.translate(centerX, centerY);
+            ctx.rotate(i * RAD_FACTOR);
+            ctx.translate(-centerX, -centerY);
+        }
+
+        // Central ring
+        ctx.beginPath();
+        ctx.translate(centerX, centerY);
+        ctx.arc(0, 0, imageWidth * 0.1, 0, TWO_PI, false);
+        ctx.lineWidth = imageWidth * 0.022;
+        ctx.stroke();
+        ctx.translate(-centerX, -centerY);
+
+        ctx.restore();
+
+    };
+
+    var drawPointerImage = function (ctx, size, ptrType, ptrColor, lblColor) {
+        var ptrBuffer, ptrCtx,
+            grad, radius,
+            cacheKey = size.toString() + ptrType.type + ptrColor.light.getHexColor() + ptrColor.medium.getHexColor();
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!drawPointerImage.cache[cacheKey]) {
+            // create a pointer buffer
+            ptrBuffer = createBuffer(size, size);
+            ptrCtx = ptrBuffer.getContext('2d');
+
+            switch (ptrType.type) {
+            case 'type2':
+                grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841);
+                grad.addColorStop(0, lblColor.getRgbaColor());
+                grad.addColorStop(0.36, lblColor.getRgbaColor());
+                grad.addColorStop(0.361, ptrColor.light.getRgbaColor());
+                grad.addColorStop(1, ptrColor.light.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.518691, size * 0.471962);
+                ptrCtx.lineTo(size * 0.509345, size * 0.462616);
+                ptrCtx.lineTo(size * 0.509345, size * 0.341121);
+                ptrCtx.lineTo(size * 0.504672, size * 0.130841);
+                ptrCtx.lineTo(size * 0.495327, size * 0.130841);
+                ptrCtx.lineTo(size * 0.490654, size * 0.341121);
+                ptrCtx.lineTo(size * 0.490654, size * 0.462616);
+                ptrCtx.lineTo(size * 0.481308, size * 0.471962);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+
+            case 'type3':
+                ptrCtx.beginPath();
+                ptrCtx.rect(size * 0.495327, size * 0.130841, size * 0.009345, size * 0.373831);
+                ptrCtx.closePath();
+                ptrCtx.fillStyle = ptrColor.light.getRgbaColor();
+                ptrCtx.fill();
+                break;
+
+            case 'type4':
+                grad = ptrCtx.createLinearGradient(0.467289 * size, 0, 0.528036 * size, 0);
+                grad.addColorStop(0, ptrColor.dark.getRgbaColor());
+                grad.addColorStop(0.51, ptrColor.dark.getRgbaColor());
+                grad.addColorStop(0.52, ptrColor.light.getRgbaColor());
+                grad.addColorStop(1, ptrColor.light.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.5, size * 0.126168);
+                ptrCtx.lineTo(size * 0.514018, size * 0.135514);
+                ptrCtx.lineTo(size * 0.532710, size * 0.5);
+                ptrCtx.lineTo(size * 0.523364, size * 0.602803);
+                ptrCtx.lineTo(size * 0.476635, size * 0.602803);
+                ptrCtx.lineTo(size * 0.467289, size * 0.5);
+                ptrCtx.lineTo(size * 0.485981, size * 0.135514);
+                ptrCtx.lineTo(size * 0.5, size * 0.126168);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+
+            case 'type5':
+                grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * size, 0);
+                grad.addColorStop(0, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.5, size * 0.495327);
+                ptrCtx.lineTo(size * 0.528037, size * 0.495327);
+                ptrCtx.lineTo(size * 0.5, size * 0.149532);
+                ptrCtx.lineTo(size * 0.471962, size * 0.495327);
+                ptrCtx.lineTo(size * 0.5, size * 0.495327);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+
+                ptrCtx.lineWidth = 1;
+                ptrCtx.lineCap = 'square';
+                ptrCtx.lineJoin = 'miter';
+                ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor();
+                ptrCtx.stroke();
+                break;
+
+            case 'type6':
+                ptrCtx.fillStyle = ptrColor.medium.getRgbaColor();
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.481308, size * 0.485981);
+                ptrCtx.lineTo(size * 0.481308, size * 0.392523);
+                ptrCtx.lineTo(size * 0.485981, size * 0.317757);
+                ptrCtx.lineTo(size * 0.495327, size * 0.130841);
+                ptrCtx.lineTo(size * 0.504672, size * 0.130841);
+                ptrCtx.lineTo(size * 0.514018, size * 0.317757);
+                ptrCtx.lineTo(size * 0.518691, size * 0.387850);
+                ptrCtx.lineTo(size * 0.518691, size * 0.485981);
+                ptrCtx.lineTo(size * 0.504672, size * 0.485981);
+                ptrCtx.lineTo(size * 0.504672, size * 0.387850);
+                ptrCtx.lineTo(size * 0.5, size * 0.317757);
+                ptrCtx.lineTo(size * 0.495327, size * 0.392523);
+                ptrCtx.lineTo(size * 0.495327, size * 0.485981);
+                ptrCtx.lineTo(size * 0.481308, size * 0.485981);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+
+            case 'type7':
+                grad = ptrCtx.createLinearGradient(0.481308 * size, 0, 0.518691 * size, 0);
+                grad.addColorStop(0, ptrColor.dark.getRgbaColor());
+                grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.490654, size * 0.130841);
+                ptrCtx.lineTo(size * 0.481308, size * 0.5);
+                ptrCtx.lineTo(size * 0.518691, size * 0.5);
+                ptrCtx.lineTo(size * 0.504672, size * 0.130841);
+                ptrCtx.lineTo(size * 0.490654, size * 0.130841);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+
+            case 'type8':
+                grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * size, 0);
+                grad.addColorStop(0, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor();
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.5, size * 0.532710);
+                ptrCtx.lineTo(size * 0.532710, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.532710, size * 0.5, size * 0.509345, size * 0.457943, size * 0.5, size * 0.149532);
+                ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.467289, size * 0.5, size * 0.467289, size * 0.5);
+                ptrCtx.lineTo(size * 0.5, size * 0.532710);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                ptrCtx.stroke();
+                break;
+
+            case 'type9':
+                grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * size, 0);
+                grad.addColorStop(0, 'rgb(50, 50, 50)');
+                grad.addColorStop(0.5, '#666666');
+                grad.addColorStop(1, 'rgb(50, 50, 50)');
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = '#2E2E2E';
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.495327, size * 0.233644);
+                ptrCtx.lineTo(size * 0.504672, size * 0.233644);
+                ptrCtx.lineTo(size * 0.514018, size * 0.439252);
+                ptrCtx.lineTo(size * 0.485981, size * 0.439252);
+                ptrCtx.lineTo(size * 0.495327, size * 0.233644);
+                ptrCtx.closePath();
+                ptrCtx.moveTo(size * 0.490654, size * 0.130841);
+                ptrCtx.lineTo(size * 0.471962, size * 0.471962);
+                ptrCtx.lineTo(size * 0.471962, size * 0.528037);
+                ptrCtx.bezierCurveTo(size * 0.471962, size * 0.528037, size * 0.476635, size * 0.602803, size * 0.476635, size * 0.602803);
+                ptrCtx.bezierCurveTo(size * 0.476635, size * 0.607476, size * 0.481308, size * 0.607476, size * 0.5, size * 0.607476);
+                ptrCtx.bezierCurveTo(size * 0.518691, size * 0.607476, size * 0.523364, size * 0.607476, size * 0.523364, size * 0.602803);
+                ptrCtx.bezierCurveTo(size * 0.523364, size * 0.602803, size * 0.528037, size * 0.528037, size * 0.528037, size * 0.528037);
+                ptrCtx.lineTo(size * 0.528037, size * 0.471962);
+                ptrCtx.lineTo(size * 0.509345, size * 0.130841);
+                ptrCtx.lineTo(size * 0.490654, size * 0.130841);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.495327, size * 0.219626);
+                ptrCtx.lineTo(size * 0.504672, size * 0.219626);
+                ptrCtx.lineTo(size * 0.504672, size * 0.135514);
+                ptrCtx.lineTo(size * 0.495327, size * 0.135514);
+                ptrCtx.lineTo(size * 0.495327, size * 0.219626);
+                ptrCtx.closePath();
+
+                ptrCtx.fillStyle = ptrColor.medium.getRgbaColor();
+                ptrCtx.fill();
+                break;
+
+            case 'type10':
+                // POINTER_TYPE10
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.5, size * 0.149532);
+                ptrCtx.bezierCurveTo(size * 0.5, size * 0.149532, size * 0.443925, size * 0.490654, size * 0.443925, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.443925, size * 0.532710, size * 0.467289, size * 0.556074, size * 0.5, size * 0.556074);
+                ptrCtx.bezierCurveTo(size * 0.532710, size * 0.556074, size * 0.556074, size * 0.532710, size * 0.556074, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.556074, size * 0.490654, size * 0.5, size * 0.149532, size * 0.5, size * 0.149532);
+                ptrCtx.closePath();
+                grad = ptrCtx.createLinearGradient(0.471962 * size, 0, 0.528036 * size, 0);
+                grad.addColorStop(0, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = ptrColor.medium.getRgbaColor();
+                ptrCtx.lineWidth = 1;
+                ptrCtx.lineCap = 'square';
+                ptrCtx.lineJoin = 'miter';
+                ptrCtx.fill();
+                ptrCtx.stroke();
+                break;
+
+            case 'type11':
+                // POINTER_TYPE11
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(0.5 * size, 0.168224 * size);
+                ptrCtx.lineTo(0.485981 * size, 0.5 * size);
+                ptrCtx.bezierCurveTo(0.485981 * size, 0.5 * size, 0.481308 * size, 0.584112 * size, 0.5 * size, 0.584112 * size);
+                ptrCtx.bezierCurveTo(0.514018 * size, 0.584112 * size, 0.509345 * size, 0.5 * size, 0.509345 * size, 0.5 * size);
+                ptrCtx.lineTo(0.5 * size, 0.168224 * size);
+                ptrCtx.closePath();
+                grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.584112 * size);
+                grad.addColorStop(0, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.dark.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor();
+                ptrCtx.fill();
+                ptrCtx.stroke();
+                break;
+
+            case 'type12':
+                // POINTER_TYPE12
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(0.5 * size, 0.168224 * size);
+                ptrCtx.lineTo(0.485981 * size, 0.5 * size);
+                ptrCtx.lineTo(0.5 * size, 0.504672 * size);
+                ptrCtx.lineTo(0.509345 * size, 0.5 * size);
+                ptrCtx.lineTo(0.5 * size, 0.168224 * size);
+                ptrCtx.closePath();
+                grad = ptrCtx.createLinearGradient(0, 0.168224 * size, 0, 0.504672 * size);
+                grad.addColorStop(0, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.dark.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor();
+                ptrCtx.fill();
+                ptrCtx.stroke();
+                break;
+
+            case 'type13':
+                // POINTER_TYPE13
+            case 'type14':
+                // POINTER_TYPE14 (same shape as 13)
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(0.485981 * size, 0.168224 * size);
+                ptrCtx.lineTo(0.5 * size, 0.130841 * size);
+                ptrCtx.lineTo(0.509345 * size, 0.168224 * size);
+                ptrCtx.lineTo(0.509345 * size, 0.509345 * size);
+                ptrCtx.lineTo(0.485981 * size, 0.509345 * size);
+                ptrCtx.lineTo(0.485981 * size, 0.168224 * size);
+                ptrCtx.closePath();
+                if (ptrType.type === 'type13') {
+                    // TYPE13
+                    grad = ptrCtx.createLinearGradient(0, 0.5 * size, 0, 0.130841 * size);
+                    grad.addColorStop(0, lblColor.getRgbaColor());
+                    grad.addColorStop(0.85, lblColor.getRgbaColor());
+                    grad.addColorStop(0.85, ptrColor.medium.getRgbaColor());
+                    grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                    ptrCtx.fillStyle = grad;
+                } else {
+                    // TYPE14
+                    grad = ptrCtx.createLinearGradient(0.485981 * size, 0, 0.509345 * size, 0);
+                    grad.addColorStop(0, ptrColor.veryDark.getRgbaColor());
+                    grad.addColorStop(0.5, ptrColor.light.getRgbaColor());
+                    grad.addColorStop(1, ptrColor.veryDark.getRgbaColor());
+                    ptrCtx.fillStyle = grad;
+                }
+                ptrCtx.fill();
+                break;
+
+            case 'type15':
+                // POINTER TYPE15 - Classic with crescent
+            case 'type16':
+                // POINTER TYPE16 - Classic without crescent
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.509345, size * 0.457943);
+                ptrCtx.lineTo(size * 0.5015, size * 0.13);
+                ptrCtx.lineTo(size * 0.4985, size * 0.13);
+                ptrCtx.lineTo(size * 0.490654, size * 0.457943);
+                ptrCtx.bezierCurveTo(size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943, size * 0.490654, size * 0.457943);
+                ptrCtx.bezierCurveTo(size * 0.471962, size * 0.462616, size * 0.457943, size * 0.481308, size * 0.457943, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.457943, size * 0.518691, size * 0.471962, size * 0.537383, size * 0.490654, size * 0.542056);
+                ptrCtx.bezierCurveTo(size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056, size * 0.490654, size * 0.542056);
+                if (ptrType.type === 'type15') {
+                    ptrCtx.lineTo(size * 0.490654, size * 0.57);
+                    ptrCtx.bezierCurveTo(size * 0.46, size * 0.58, size * 0.46, size * 0.62, size * 0.490654, size * 0.63);
+                    ptrCtx.bezierCurveTo(size * 0.47, size * 0.62, size * 0.48, size * 0.59, size * 0.5, size * 0.59);
+                    ptrCtx.bezierCurveTo(size * 0.53, size * 0.59, size * 0.52, size * 0.62, size * 0.509345, size * 0.63);
+                    ptrCtx.bezierCurveTo(size * 0.54, size * 0.62, size * 0.54, size * 0.58, size * 0.509345, size * 0.57);
+                    ptrCtx.lineTo(size * 0.509345, size * 0.57);
+                } else {
+                    ptrCtx.lineTo(size * 0.490654, size * 0.621495);
+                    ptrCtx.lineTo(size * 0.509345, size * 0.621495);
+                }
+                ptrCtx.lineTo(size * 0.509345, size * 0.542056);
+                ptrCtx.bezierCurveTo(size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056, size * 0.509345, size * 0.542056);
+                ptrCtx.bezierCurveTo(size * 0.528037, size * 0.537383, size * 0.542056, size * 0.518691, size * 0.542056, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.542056, size * 0.481308, size * 0.528037, size * 0.462616, size * 0.509345, size * 0.457943);
+                ptrCtx.bezierCurveTo(size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943, size * 0.509345, size * 0.457943);
+                ptrCtx.closePath();
+                if (ptrType.type === 'type15') {
+                    grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.63);
+                } else {
+                    grad = ptrCtx.createLinearGradient(0, 0, 0, size * 0.621495);
+                }
+                grad.addColorStop(0, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(0.388888, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(0.5, ptrColor.light.getRgbaColor());
+                grad.addColorStop(0.611111, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.medium.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.strokeStyle = ptrColor.dark.getRgbaColor();
+                ptrCtx.fill();
+                ptrCtx.stroke();
+                // Draw the rings
+                ptrCtx.beginPath();
+                radius = size * 0.065420 / 2;
+                ptrCtx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI);
+                grad = ptrCtx.createLinearGradient(size * 0.5 - radius, size * 0.5 + radius, 0, size * 0.5 + radius);
+                grad.addColorStop(0, '#e6b35c');
+                grad.addColorStop(0.01, '#e6b35c');
+                grad.addColorStop(0.99, '#c48200');
+                grad.addColorStop(1, '#c48200');
+                ptrCtx.fillStyle = grad;
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                ptrCtx.beginPath();
+                radius = size * 0.046728 / 2;
+                ptrCtx.arc(size * 0.5, size * 0.5, radius, 0, TWO_PI);
+                grad = ptrCtx.createRadialGradient(size * 0.5, size * 0.5, 0, size * 0.5, size * 0.5, radius);
+                grad.addColorStop(0, '#c5c5c5');
+                grad.addColorStop(0.19, '#c5c5c5');
+                grad.addColorStop(0.22, '#000000');
+                grad.addColorStop(0.8, '#000000');
+                grad.addColorStop(0.99, '#707070');
+                grad.addColorStop(1, '#707070');
+                ptrCtx.fillStyle = grad;
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+
+            case 'type1':
+            /* falls through */
+            default:
+                grad = ptrCtx.createLinearGradient(0, size * 0.471962, 0, size * 0.130841);
+                grad.addColorStop(0, ptrColor.veryDark.getRgbaColor());
+                grad.addColorStop(0.3, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(0.59, ptrColor.medium.getRgbaColor());
+                grad.addColorStop(1, ptrColor.veryDark.getRgbaColor());
+                ptrCtx.fillStyle = grad;
+                ptrCtx.beginPath();
+                ptrCtx.moveTo(size * 0.518691, size * 0.471962);
+                ptrCtx.bezierCurveTo(size * 0.514018, size * 0.457943, size * 0.509345, size * 0.415887, size * 0.509345, size * 0.401869);
+                ptrCtx.bezierCurveTo(size * 0.504672, size * 0.383177, size * 0.5, size * 0.130841, size * 0.5, size * 0.130841);
+                ptrCtx.bezierCurveTo(size * 0.5, size * 0.130841, size * 0.490654, size * 0.383177, size * 0.490654, size * 0.397196);
+                ptrCtx.bezierCurveTo(size * 0.490654, size * 0.415887, size * 0.485981, size * 0.457943, size * 0.481308, size * 0.471962);
+                ptrCtx.bezierCurveTo(size * 0.471962, size * 0.481308, size * 0.467289, size * 0.490654, size * 0.467289, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.467289, size * 0.518691, size * 0.481308, size * 0.532710, size * 0.5, size * 0.532710);
+                ptrCtx.bezierCurveTo(size * 0.518691, size * 0.532710, size * 0.532710, size * 0.518691, size * 0.532710, size * 0.5);
+                ptrCtx.bezierCurveTo(size * 0.532710, size * 0.490654, size * 0.528037, size * 0.481308, size * 0.518691, size * 0.471962);
+                ptrCtx.closePath();
+                ptrCtx.fill();
+                break;
+            }
+            // cache buffer
+            drawPointerImage.cache[cacheKey] = ptrBuffer;
+        }
+        ctx.drawImage(drawPointerImage.cache[cacheKey], 0, 0);
+        return this;
+    };
+    drawPointerImage.cache = {};
+
+    var drawRadialFrameImage = function (ctx, frameDesign, centerX, centerY, imageWidth, imageHeight) {
+        var radFBuffer, radFCtx,
+            grad, outerX, innerX, fractions, colors,
+            cacheKey = imageWidth.toString() + imageHeight + frameDesign.design;
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!drawRadialFrameImage.cache[cacheKey]) {
+            // Setup buffer
+            radFBuffer = createBuffer(imageWidth, imageHeight);
+            radFCtx = radFBuffer.getContext('2d');
+
+            // outer gray frame
+            radFCtx.fillStyle = '#848484';
+            radFCtx.strokeStyle = 'rgba(132, 132, 132, 0.5)';
+            radFCtx.beginPath();
+            radFCtx.arc(centerX, centerY, imageWidth / 2, 0, TWO_PI, true);
+            radFCtx.closePath();
+            radFCtx.fill();
+            radFCtx.stroke();
+
+            radFCtx.beginPath();
+            radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true);
+            radFCtx.closePath();
+
+            // main gradient frame
+            switch (frameDesign.design) {
+            case 'metal':
+                grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654);
+                grad.addColorStop(0, '#fefefe');
+                grad.addColorStop(0.07, 'rgb(210, 210, 210)');
+                grad.addColorStop(0.12, 'rgb(179, 179, 179)');
+                grad.addColorStop(1, 'rgb(213, 213, 213)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'brass':
+                grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654);
+                grad.addColorStop(0, 'rgb(249, 243, 155)');
+                grad.addColorStop(0.05, 'rgb(246, 226, 101)');
+                grad.addColorStop(0.10, 'rgb(240, 225, 132)');
+                grad.addColorStop(0.50, 'rgb(90, 57, 22)');
+                grad.addColorStop(0.90, 'rgb(249, 237, 139)');
+                grad.addColorStop(0.95, 'rgb(243, 226, 108)');
+                grad.addColorStop(1, 'rgb(202, 182, 113)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'steel':
+                grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654);
+                grad.addColorStop(0, 'rgb(231, 237, 237)');
+                grad.addColorStop(0.05, 'rgb(189, 199, 198)');
+                grad.addColorStop(0.10, 'rgb(192, 201, 200)');
+                grad.addColorStop(0.50, 'rgb(23, 31, 33)');
+                grad.addColorStop(0.90, 'rgb(196, 205, 204)');
+                grad.addColorStop(0.95, 'rgb(194, 204, 203)');
+                grad.addColorStop(1, 'rgb(189, 201, 199)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'gold':
+                grad = radFCtx.createLinearGradient(0, imageWidth * 0.004672, 0, imageHeight * 0.990654);
+                grad.addColorStop(0, 'rgb(255, 255, 207)');
+                grad.addColorStop(0.15, 'rgb(255, 237, 96)');
+                grad.addColorStop(0.22, 'rgb(254, 199, 57)');
+                grad.addColorStop(0.3, 'rgb(255, 249, 203)');
+                grad.addColorStop(0.38, 'rgb(255, 199, 64)');
+                grad.addColorStop(0.44, 'rgb(252, 194, 60)');
+                grad.addColorStop(0.51, 'rgb(255, 204, 59)');
+                grad.addColorStop(0.6, 'rgb(213, 134, 29)');
+                grad.addColorStop(0.68, 'rgb(255, 201, 56)');
+                grad.addColorStop(0.75, 'rgb(212, 135, 29)');
+                grad.addColorStop(1, 'rgb(247, 238, 101)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'anthracite':
+                grad = radFCtx.createLinearGradient(0, 0.004672 * imageHeight, 0, 0.995326 * imageHeight);
+                grad.addColorStop(0, 'rgb(118, 117, 135)');
+                grad.addColorStop(0.06, 'rgb(74, 74, 82)');
+                grad.addColorStop(0.12, 'rgb(50, 50, 54)');
+                grad.addColorStop(1, 'rgb(79, 79, 87)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'tiltedGray':
+                grad = radFCtx.createLinearGradient(0.233644 * imageWidth, 0.084112 * imageHeight, 0.81258 * imageWidth, 0.910919 * imageHeight);
+                grad.addColorStop(0, '#ffffff');
+                grad.addColorStop(0.07, 'rgb(210, 210, 210)');
+                grad.addColorStop(0.16, 'rgb(179, 179, 179)');
+                grad.addColorStop(0.33, '#ffffff');
+                grad.addColorStop(0.55, '#c5c5c5');
+                grad.addColorStop(0.79, '#ffffff');
+                grad.addColorStop(1, '#666666');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'tiltedBlack':
+                grad = radFCtx.createLinearGradient(0.228971 * imageWidth, 0.079439 * imageHeight, 0.802547 * imageWidth, 0.898591 * imageHeight);
+                grad.addColorStop(0, '#666666');
+                grad.addColorStop(0.21, '#000000');
+                grad.addColorStop(0.47, '#666666');
+                grad.addColorStop(0.99, '#000000');
+                grad.addColorStop(1, '#000000');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                break;
+
+            case 'glossyMetal':
+                grad = radFCtx.createRadialGradient(0.5 * imageWidth, 0.5 * imageHeight, 0, 0.5 * imageWidth, 0.5 * imageWidth, 0.5 * imageWidth);
+                grad.addColorStop(0, 'rgb(207, 207, 207)');
+                grad.addColorStop(0.96, 'rgb(205, 204, 205)');
+                grad.addColorStop(1, 'rgb(244, 244, 244)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+                radFCtx.beginPath();
+                radFCtx.arc(0.5 * imageWidth, 0.5 * imageHeight, 0.973962 * imageWidth / 2, 0, TWO_PI);
+                radFCtx.closePath();
+                grad = radFCtx.createLinearGradient(0, imageHeight - 0.971962 * imageHeight, 0, 0.971962 * imageHeight);
+                grad.addColorStop(0, 'rgb(249, 249, 249)');
+                grad.addColorStop(0.23, 'rgb(200, 195, 191)');
+                grad.addColorStop(0.36, '#ffffff');
+                grad.addColorStop(0.59, 'rgb(29, 29, 29)');
+                grad.addColorStop(0.76, 'rgb(200, 194, 192)');
+                grad.addColorStop(1, 'rgb(209, 209, 209)');
+                radFCtx.fillStyle = grad;
+                radFCtx.fill();
+
+                radFCtx.beginPath();
+                radFCtx.arc(0.5 * imageWidth, 0.5 * imageHeight, 0.869158 * imageWidth / 2, 0, TWO_PI);
+                radFCtx.closePath();
+                radFCtx.fillStyle = '#f6f6f6';
+                radFCtx.fill();
+
+                radFCtx.beginPath();
+                radFCtx.arc(0.5 * imageWidth, 0.5 * imageHeight, 0.85 * imageWidth / 2, 0, TWO_PI);
+                radFCtx.closePath();
+                radFCtx.fillStyle = '#333333';
+                radFCtx.fill();
+                break;
+
+            case 'blackMetal':
+                fractions = [0,
+                             0.125,
+                             0.347222,
+                             0.5,
+                             0.680555,
+                             0.875,
+                             1];
+
+                colors = [ new RgbaColor(254, 254, 254, 1),
+                           new RgbaColor(0, 0, 0, 1),
+                           new RgbaColor(153, 153, 153, 1),
+                           new RgbaColor(0, 0, 0, 1),
+                           new RgbaColor(153, 153, 153, 1),
+                           new RgbaColor(0, 0, 0, 1),
+                           new RgbaColor(254, 254, 254, 1)];
+
+                radFCtx.save();
+                radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true);
+                radFCtx.clip();
+                outerX = imageWidth * 0.495327;
+                innerX = imageWidth * 0.420560;
+                grad = new ConicalGradient(fractions, colors);
+                grad.fillCircle(radFCtx, centerX, centerY, innerX, outerX);
+                // fade outer edge
+                radFCtx.strokeStyle = '#848484';
+                radFCtx.strokeStyle = 'rgba(132, 132, 132, 0.8)';
+                radFCtx.beginPath();
+                radFCtx.lineWidth = imageWidth / 90;
+                radFCtx.arc(centerX, centerY, imageWidth / 2, 0, TWO_PI, true);
+                radFCtx.closePath();
+                radFCtx.stroke();
+                radFCtx.restore();
+                break;
+
+            case 'shinyMetal':
+                fractions = [0,
+                             0.125,
+                             0.25,
+                             0.347222,
+                             0.5,
+                             0.652777,
+                             0.75,
+                             0.875,
+                             1];
+
+                colors = [ new RgbaColor(254, 254, 254, 1),
+                           new RgbaColor(210, 210, 210, 1),
+                           new RgbaColor(179, 179, 179, 1),
+                           new RgbaColor(238, 238, 238, 1),
+                           new RgbaColor(160, 160, 160, 1),
+                           new RgbaColor(238, 238, 238, 1),
+                           new RgbaColor(179, 179, 179, 1),
+                           new RgbaColor(210, 210, 210, 1),
+                           new RgbaColor(254, 254, 254, 1)];
+
+                radFCtx.save();
+                radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true);
+                radFCtx.clip();
+                outerX = imageWidth * 0.495327;
+                innerX = imageWidth * 0.420560;
+                grad = new ConicalGradient(fractions, colors);
+                grad.fillCircle(radFCtx, centerX, centerY, innerX, outerX);
+                // fade outer edge
+                radFCtx.strokeStyle = '#848484';
+                radFCtx.strokeStyle = 'rgba(132, 132, 132, 0.8)';
+                radFCtx.beginPath();
+                radFCtx.lineWidth = imageWidth / 90;
+                radFCtx.arc(centerX, centerY, imageWidth / 2, 0, TWO_PI, true);
+                radFCtx.closePath();
+                radFCtx.stroke();
+                radFCtx.restore();
+                break;
+
+            case 'chrome':
+                fractions = [0,
+                             0.09,
+                             0.12,
+                             0.16,
+                             0.25,
+                             0.29,
+                             0.33,
+                             0.38,
+                             0.48,
+                             0.52,
+                             0.63,
+                             0.68,
+                             0.8,
+                             0.83,
+                             0.87,
+                             0.97,
+                             1];
+
+                colors = [ new RgbaColor(255, 255, 255, 1),
+                           new RgbaColor(255, 255, 255, 1),
+                           new RgbaColor(136, 136, 138, 1),
+                           new RgbaColor(164, 185, 190, 1),
+                           new RgbaColor(158, 179, 182, 1),
+                           new RgbaColor(112, 112, 112, 1),
+                           new RgbaColor(221, 227, 227, 1),
+                           new RgbaColor(155, 176, 179, 1),
+                           new RgbaColor(156, 176, 177, 1),
+                           new RgbaColor(254, 255, 255, 1),
+                           new RgbaColor(255, 255, 255, 1),
+                           new RgbaColor(156, 180, 180, 1),
+                           new RgbaColor(198, 209, 211, 1),
+                           new RgbaColor(246, 248, 247, 1),
+                           new RgbaColor(204, 216, 216, 1),
+                           new RgbaColor(164, 188, 190, 1),
+                           new RgbaColor(255, 255, 255, 1)];
+
+                radFCtx.save();
+                radFCtx.arc(centerX, centerY, imageWidth * 0.990654 / 2, 0, TWO_PI, true);
+                radFCtx.clip();
+                outerX = imageWidth * 0.495327;
+                innerX = imageWidth * 0.420560;
+                grad = new ConicalGradient(fractions, colors);
+                grad.fillCircle(radFCtx, centerX, centerY, innerX, outerX);
+                // fade outer edge
+                radFCtx.strokeStyle = '#848484';
+                radFCtx.strokeStyle = 'rgba(132, 132, 132, 0.8)';
+                radFCtx.beginPath();
+                radFCtx.lineWidth = imageWidth / 90;
+                radFCtx.arc(centerX, centerY, imageWidth / 2, 0, TWO_PI, true);
+                radFCtx.closePath();
+                radFCtx.stroke();
+                radFCtx.restore();
+
+                break;
+            }
+
+            // inner bright frame
+            radFCtx.fillStyle = 'rgb(191, 191, 191)';
+            radFCtx.beginPath();
+            radFCtx.arc(centerX, centerY, imageWidth * 0.841121 / 2, 0, TWO_PI, true);
+            radFCtx.closePath();
+            radFCtx.fill();
+
+            // clip out center so it is transparent if the background is not visible
+            radFCtx.globalCompositeOperation = 'destination-out';
+            // Background ellipse
+            radFCtx.beginPath();
+            radFCtx.arc(centerX, centerY, imageWidth * 0.83 / 2, 0, TWO_PI, true);
+            radFCtx.closePath();
+            radFCtx.fill();
+
+            // cache the buffer
+            drawRadialFrameImage.cache[cacheKey] = radFBuffer;
+        }
+        ctx.drawImage(drawRadialFrameImage.cache[cacheKey], 0, 0);
+        return this;
+    };
+    drawRadialFrameImage.cache = {};
+
+    var drawRadialBackgroundImage = function (ctx, backgroundColor, centerX, centerY, imageWidth, imageHeight) {
+        var radBBuffer, radBCtx,
+            grad, fractions, colors,
+            backgroundOffsetX = imageWidth * 0.831775 / 2,
+            mono, textureColor, texture,
+            radius, turnRadius, stepSize,
+            end, i,
+            cacheKey = imageWidth.toString() + imageHeight + backgroundColor.name;
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!drawRadialBackgroundImage.cache[cacheKey]) {
+            // Setup buffer
+            radBBuffer = createBuffer(imageWidth, imageHeight);
+            radBCtx = radBBuffer.getContext('2d');
+
+            // Background ellipse
+            radBCtx.beginPath();
+            radBCtx.arc(centerX, centerY, backgroundOffsetX, 0, TWO_PI, true);
+            radBCtx.closePath();
+
+            // If the backgroundColor is a texture fill it with the texture instead of the gradient
+            if (backgroundColor.name === 'CARBON' || backgroundColor.name === 'PUNCHED_SHEET' ||
+                backgroundColor.name === 'BRUSHED_METAL' || backgroundColor.name === 'BRUSHED_STAINLESS') {
+
+                if (backgroundColor.name === 'CARBON') {
+                    radBCtx.fillStyle = radBCtx.createPattern(carbonBuffer, 'repeat');
+                    radBCtx.fill();
+                }
+
+                if (backgroundColor.name === 'PUNCHED_SHEET') {
+                    radBCtx.fillStyle = radBCtx.createPattern(punchedSheetBuffer, 'repeat');
+                    radBCtx.fill();
+                }
+
+                // Add another inner shadow to make the look more realistic
+                grad = radBCtx.createLinearGradient(backgroundOffsetX, 0, imageWidth - backgroundOffsetX, 0);
+                grad.addColorStop(0, 'rgba(0, 0, 0, 0.25)');
+                grad.addColorStop(0.5, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(1, 'rgba(0, 0, 0, 0.25)');
+                radBCtx.fillStyle = grad;
+                radBCtx.beginPath();
+                radBCtx.arc(centerX, centerY, backgroundOffsetX, 0, TWO_PI, true);
+                radBCtx.closePath();
+                radBCtx.fill();
+
+                if (backgroundColor.name === 'BRUSHED_METAL' || backgroundColor.name === 'BRUSHED_STAINLESS') {
+                    mono = (backgroundColor.name === 'BRUSHED_METAL' ? true : false);
+                    textureColor = parseInt(backgroundColor.gradientStop.getHexColor().substr(-6), 16);
+                    texture = brushedMetalTexture(textureColor, 5, 0.1, mono, 0.5);
+                    radBCtx.fillStyle = radBCtx.createPattern(texture.fill(0, 0, imageWidth, imageHeight), 'no-repeat');
+                    radBCtx.fill();
+                }
+            } else if (backgroundColor.name === 'STAINLESS' || backgroundColor.name === 'TURNED') {
+                // Define the fractions of the conical gradient paint
+                fractions = [0,
+                             0.03,
+                             0.10,
+                             0.14,
+                             0.24,
+                             0.33,
+                             0.38,
+                             0.5,
+                             0.62,
+                             0.67,
+                             0.76,
+                             0.81,
+                             0.85,
+                             0.97,
+                             1];
+
+                // Define the colors of the conical gradient paint
+                colors = [new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#B2B2B4'),
+                          new RgbaColor('#ACACAE'),
+                          new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#8E8E8E'),
+                          new RgbaColor('#8E8E8E'),
+                          new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#8E8E8E'),
+                          new RgbaColor('#8E8E8E'),
+                          new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#ACACAE'),
+                          new RgbaColor('#B2B2B4'),
+                          new RgbaColor('#FDFDFD'),
+                          new RgbaColor('#FDFDFD')];
+
+                grad = new ConicalGradient(fractions, colors);
+                grad.fillCircle(radBCtx, centerX, centerY, 0, backgroundOffsetX);
+
+                if (backgroundColor.name === 'TURNED') {
+                    // Define the turning radius
+                    radius = backgroundOffsetX;
+                    turnRadius = radius * 0.55;
+                    // Step size proporational to radius
+                    stepSize = RAD_FACTOR * (500 / radius);
+                    // Save before we start
+                    radBCtx.save();
+                    // restrict the turnings to the desired area
+                    radBCtx.beginPath();
+                    radBCtx.arc(centerX, centerY, radius, 0, TWO_PI);
+                    radBCtx.closePath();
+                    radBCtx.clip();
+                    // set the style for the turnings
+                    radBCtx.lineWidth = 0.5;
+                    end = TWO_PI - stepSize * 0.3;
+                    // Step the engine round'n'round
+                    for (i = 0 ; i < end; i += stepSize) {
+                        // draw a 'turn'
+                        radBCtx.strokeStyle = 'rgba(240, 240, 255, 0.25)';
+                        radBCtx.beginPath();
+                        radBCtx.arc(centerX + turnRadius, centerY, turnRadius, 0, TWO_PI);
+                        radBCtx.stroke();
+                        // rotate the 'piece' a fraction to draw 'shadow'
+                        radBCtx.translate(centerX, centerY);
+                        radBCtx.rotate(stepSize * 0.3);
+                        radBCtx.translate(-centerX, -centerY);
+                        // draw a 'turn'
+                        radBCtx.strokeStyle = 'rgba(25, 10, 10, 0.1)';
+                        radBCtx.beginPath();
+                        radBCtx.arc(centerX + turnRadius, centerY, turnRadius, 0, TWO_PI);
+                        radBCtx.stroke();
+                        // now rotate on to the next 'scribe' position minus the 'fraction'
+                        radBCtx.translate(centerX, centerY);
+                        radBCtx.rotate(stepSize - stepSize * 0.3);
+                        radBCtx.translate(-centerX, -centerY);
+                    }
+                    // Restore canvas now we are done
+                    radBCtx.restore();
+                }
+            } else {
+                grad = radBCtx.createLinearGradient(0, imageWidth * 0.084112, 0, backgroundOffsetX * 2);
+                grad.addColorStop(0, backgroundColor.gradientStart.getRgbaColor());
+                grad.addColorStop(0.4, backgroundColor.gradientFraction.getRgbaColor());
+                grad.addColorStop(1, backgroundColor.gradientStop.getRgbaColor());
+                radBCtx.fillStyle = grad;
+                radBCtx.fill();
+            }
+            // Inner shadow
+            grad = radBCtx.createRadialGradient(centerX, centerY, 0, centerX, centerY, backgroundOffsetX);
+            grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+            grad.addColorStop(0.7, 'rgba(0, 0, 0, 0)');
+            grad.addColorStop(0.71, 'rgba(0, 0, 0, 0)');
+            grad.addColorStop(0.86, 'rgba(0, 0, 0, 0.03)');
+            grad.addColorStop(0.92, 'rgba(0, 0, 0, 0.07)');
+            grad.addColorStop(0.97, 'rgba(0, 0, 0, 0.15)');
+            grad.addColorStop(1, 'rgba(0, 0, 0, 0.3)');
+            radBCtx.fillStyle = grad;
+
+            radBCtx.beginPath();
+            radBCtx.arc(centerX, centerY, backgroundOffsetX, 0, TWO_PI, true);
+            radBCtx.closePath();
+            radBCtx.fill();
+
+            // cache the buffer
+            drawRadialBackgroundImage.cache[cacheKey] = radBBuffer;
+        }
+        ctx.drawImage(drawRadialBackgroundImage.cache[cacheKey], 0, 0);
+        return this;
+    };
+    drawRadialBackgroundImage.cache = {};
+
+    var drawRadialCustomImage = function (ctx, img, centerX, centerY, imageWidth, imageHeight) {
+        var drawWidth = imageWidth * 0.831775,
+            drawHeight = imageHeight * 0.831775,
+            x = (imageWidth - drawWidth) / 2,
+            y = (imageHeight - drawHeight) / 2;
+
+        if (img !== null && img.height > 0 && img.width > 0) {
+            ctx.save();
+            // Set the clipping area
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, imageWidth * 0.831775 / 2, 0, TWO_PI, true);
+            ctx.clip();
+            // Add the image
+            ctx.drawImage(img, x, y, drawWidth, drawHeight);
+            ctx.restore();
+        }
+        return this;
+    };
+
+    var drawRadialForegroundImage = function (ctx, foregroundType, imageWidth, imageHeight, withCenterKnob, knob, style, gaugeType, orientation) {
+        var radFgBuffer, radFgCtx,
+            knobSize = Math.ceil(imageHeight * 0.084112),
+            knobX = imageWidth * 0.5 - knobSize / 2,
+            knobY = imageHeight * 0.5 - knobSize / 2,
+            shadowOffset = imageWidth * 0.008,
+            gradHighlight, gradHighlight2,
+            cacheKey = foregroundType.type + imageWidth + imageHeight + withCenterKnob + (knob !== undefined ? knob.type : '-') +
+                       (style !== undefined ? style.style : '-') + (orientation !== undefined ? orientation.type : '-');
+
+        // check if we have already created and cached this buffer, if so return it and exit
+        if (!drawRadialForegroundImage.cache[cacheKey]) {
+            // Setup buffer
+            radFgBuffer = createBuffer(imageWidth, imageHeight);
+            radFgCtx = radFgBuffer.getContext('2d');
+
+            // center post
+            if (withCenterKnob) {
+                // Set the pointer shadow params
+                radFgCtx.shadowColor = 'rgba(0, 0, 0, 0.8)';
+                radFgCtx.shadowOffsetX = radFgCtx.shadowOffsetY = shadowOffset;
+                radFgCtx.shadowBlur = shadowOffset * 2;
+
+                if (gaugeType === steelseries.GaugeType.TYPE5) {
+                    if (steelseries.Orientation.WEST === orientation) {
+                        knobX = imageWidth * 0.733644 - knobSize / 2;
+                        radFgCtx.drawImage(createKnobImage(knobSize, knob, style), knobX, knobY);
+                    } else if (steelseries.Orientation.EAST === orientation) {
+                        knobX = imageWidth * (1 - 0.733644) - knobSize / 2;
+                        radFgCtx.drawImage(createKnobImage(knobSize, knob, style), knobX, knobY);
+                    } else {
+                        knobY = imageHeight * 0.733644 - knobSize / 2;
+                        radFgCtx.drawImage(createKnobImage(knobSize, knob, style), knobX, imageHeight * 0.6857);
+                    }
+                } else {
+                    radFgCtx.drawImage(createKnobImage(knobSize, knob, style), knobX, knobY);
+                }
+                // Undo shadow drawing
+                radFgCtx.shadowOffsetX = radFgCtx.shadowOffsetY = 0;
+                radFgCtx.shadowBlur = 0;
+            }
+
+            // highlight
+            switch (foregroundType.type) {
+            case 'type2':
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.135514, imageHeight * 0.696261);
+                radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.588785, imageWidth * 0.317757, imageHeight * 0.5, imageWidth * 0.462616, imageHeight * 0.425233);
+                radFgCtx.bezierCurveTo(imageWidth * 0.612149, imageHeight * 0.345794, imageWidth * 0.733644, imageHeight * 0.317757, imageWidth * 0.873831, imageHeight * 0.322429);
+                radFgCtx.bezierCurveTo(imageWidth * 0.766355, imageHeight * 0.112149, imageWidth * 0.528037, imageHeight * 0.023364, imageWidth * 0.313084, imageHeight * 0.130841);
+                radFgCtx.bezierCurveTo(imageWidth * 0.098130, imageHeight * 0.238317, imageWidth * 0.028037, imageHeight * 0.485981, imageWidth * 0.135514, imageHeight * 0.696261);
+                radFgCtx.closePath();
+                gradHighlight = radFgCtx.createLinearGradient(0.313084 * imageWidth, 0.135514 * imageHeight, 0.495528 * imageWidth, 0.493582 * imageHeight);
+                gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)');
+                gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)');
+                break;
+
+            case 'type3':
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345);
+                radFgCtx.bezierCurveTo(imageWidth * 0.210280, imageHeight * 0.556074, imageWidth * 0.462616, imageHeight * 0.560747, imageWidth * 0.5, imageHeight * 0.560747);
+                radFgCtx.bezierCurveTo(imageWidth * 0.537383, imageHeight * 0.560747, imageWidth * 0.794392, imageHeight * 0.560747, imageWidth * 0.915887, imageHeight * 0.509345);
+                radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112);
+                radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345);
+                radFgCtx.closePath();
+                gradHighlight = radFgCtx.createLinearGradient(0, 0.093457 * imageHeight, 0, 0.556073 * imageHeight);
+                gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)');
+                gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)');
+                break;
+
+            case 'type4':
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.677570, imageHeight * 0.242990);
+                radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.308411, imageWidth * 0.822429, imageHeight * 0.411214, imageWidth * 0.813084, imageHeight * 0.528037);
+                radFgCtx.bezierCurveTo(imageWidth * 0.799065, imageHeight * 0.654205, imageWidth * 0.719626, imageHeight * 0.757009, imageWidth * 0.593457, imageHeight * 0.799065);
+                radFgCtx.bezierCurveTo(imageWidth * 0.485981, imageHeight * 0.831775, imageWidth * 0.369158, imageHeight * 0.808411, imageWidth * 0.285046, imageHeight * 0.728971);
+                radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.719626, imageWidth * 0.252336, imageHeight * 0.714953, imageWidth * 0.233644, imageHeight * 0.728971);
+                radFgCtx.bezierCurveTo(imageWidth * 0.214953, imageHeight * 0.747663, imageWidth * 0.219626, imageHeight * 0.771028, imageWidth * 0.228971, imageHeight * 0.775700);
+                radFgCtx.bezierCurveTo(imageWidth * 0.331775, imageHeight * 0.878504, imageWidth * 0.476635, imageHeight * 0.915887, imageWidth * 0.616822, imageHeight * 0.869158);
+                radFgCtx.bezierCurveTo(imageWidth * 0.771028, imageHeight * 0.822429, imageWidth * 0.873831, imageHeight * 0.691588, imageWidth * 0.887850, imageHeight * 0.532710);
+                radFgCtx.bezierCurveTo(imageWidth * 0.897196, imageHeight * 0.387850, imageWidth * 0.836448, imageHeight * 0.257009, imageWidth * 0.719626, imageHeight * 0.182242);
+                radFgCtx.bezierCurveTo(imageWidth * 0.705607, imageHeight * 0.172897, imageWidth * 0.682242, imageHeight * 0.163551, imageWidth * 0.663551, imageHeight * 0.186915);
+                radFgCtx.bezierCurveTo(imageWidth * 0.654205, imageHeight * 0.205607, imageWidth * 0.668224, imageHeight * 0.238317, imageWidth * 0.677570, imageHeight * 0.242990);
+                radFgCtx.closePath();
+                gradHighlight = radFgCtx.createRadialGradient((0.5) * imageWidth, ((0.5) * imageHeight), 0, ((0.5) * imageWidth), ((0.5) * imageHeight), 0.387850 * imageWidth);
+                gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0)');
+                gradHighlight.addColorStop(0.82, 'rgba(255, 255, 255, 0)');
+                gradHighlight.addColorStop(0.83, 'rgba(255, 255, 255, 0)');
+                gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.15)');
+
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.261682, imageHeight * 0.224299);
+                radFgCtx.bezierCurveTo(imageWidth * 0.285046, imageHeight * 0.238317, imageWidth * 0.252336, imageHeight * 0.285046, imageWidth * 0.242990, imageHeight * 0.317757);
+                radFgCtx.bezierCurveTo(imageWidth * 0.242990, imageHeight * 0.350467, imageWidth * 0.271028, imageHeight * 0.383177, imageWidth * 0.271028, imageHeight * 0.397196);
+                radFgCtx.bezierCurveTo(imageWidth * 0.275700, imageHeight * 0.415887, imageWidth * 0.261682, imageHeight * 0.457943, imageWidth * 0.238317, imageHeight * 0.509345);
+                radFgCtx.bezierCurveTo(imageWidth * 0.224299, imageHeight * 0.542056, imageWidth * 0.177570, imageHeight * 0.612149, imageWidth * 0.158878, imageHeight * 0.612149);
+                radFgCtx.bezierCurveTo(imageWidth * 0.144859, imageHeight * 0.612149, imageWidth * 0.088785, imageHeight * 0.546728, imageWidth * 0.130841, imageHeight * 0.369158);
+                radFgCtx.bezierCurveTo(imageWidth * 0.140186, imageHeight * 0.336448, imageWidth * 0.214953, imageHeight * 0.200934, imageWidth * 0.261682, imageHeight * 0.224299);
+                radFgCtx.closePath();
+                gradHighlight2 = radFgCtx.createLinearGradient(0.130841 * imageWidth, 0.369158 * imageHeight, 0.273839 * imageWidth, 0.412877 * imageHeight);
+                gradHighlight2.addColorStop(0, 'rgba(255, 255, 255, 0.275)');
+                gradHighlight2.addColorStop(1, 'rgba(255, 255, 255, 0.015)');
+                radFgCtx.fillStyle = gradHighlight2;
+                radFgCtx.fill();
+                break;
+
+            case 'type5':
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.5);
+                radFgCtx.bezierCurveTo(imageWidth * 0.084112, imageHeight * 0.271028, imageWidth * 0.271028, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112);
+                radFgCtx.bezierCurveTo(imageWidth * 0.700934, imageHeight * 0.084112, imageWidth * 0.864485, imageHeight * 0.224299, imageWidth * 0.906542, imageHeight * 0.411214);
+                radFgCtx.bezierCurveTo(imageWidth * 0.911214, imageHeight * 0.439252, imageWidth * 0.911214, imageHeight * 0.518691, imageWidth * 0.845794, imageHeight * 0.537383);
+                radFgCtx.bezierCurveTo(imageWidth * 0.794392, imageHeight * 0.546728, imageWidth * 0.551401, imageHeight * 0.411214, imageWidth * 0.392523, imageHeight * 0.457943);
+                radFgCtx.bezierCurveTo(imageWidth * 0.168224, imageHeight * 0.509345, imageWidth * 0.135514, imageHeight * 0.775700, imageWidth * 0.093457, imageHeight * 0.593457);
+                radFgCtx.bezierCurveTo(imageWidth * 0.088785, imageHeight * 0.560747, imageWidth * 0.084112, imageHeight * 0.532710, imageWidth * 0.084112, imageHeight * 0.5);
+                radFgCtx.closePath();
+                gradHighlight = radFgCtx.createLinearGradient(0, 0.084112 * imageHeight, 0, 0.644859 * imageHeight);
+                gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)');
+                gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)');
+                break;
+
+            case 'type1':
+            /* falls through */
+            default:
+                radFgCtx.beginPath();
+                radFgCtx.moveTo(imageWidth * 0.084112, imageHeight * 0.509345);
+                radFgCtx.bezierCurveTo(imageWidth * 0.205607, imageHeight * 0.448598, imageWidth * 0.336448, imageHeight * 0.415887, imageWidth * 0.5, imageHeight * 0.415887);
+                radFgCtx.bezierCurveTo(imageWidth * 0.672897, imageHeight * 0.415887, imageWidth * 0.789719, imageHeight * 0.443925, imageWidth * 0.915887, imageHeight * 0.509345);
+                radFgCtx.bezierCurveTo(imageWidth * 0.915887, imageHeight * 0.275700, imageWidth * 0.738317, imageHeight * 0.084112, imageWidth * 0.5, imageHeight * 0.084112);
+                radFgCtx.bezierCurveTo(imageWidth * 0.261682, imageHeight * 0.084112, imageWidth * 0.084112, imageHeight * 0.275700, imageWidth * 0.084112, imageHeight * 0.509345);
+                radFgCtx.closePath();
+                gradHighlight = radFgCtx.createLinearGradient(0, 0.088785 * imageHeight, 0, 0.490654 * imageHeight);
+                gradHighlight.addColorStop(0, 'rgba(255, 255, 255, 0.275)');
+                gradHighlight.addColorStop(1, 'rgba(255, 255, 255, 0.015)');
+                break;
+            }
+            radFgCtx.fillStyle = gradHighlight;
+            radFgCtx.fill();
+
+            // cache the buffer
+            drawRadialForegroundImage.cache[cacheKey] = radFgBuffer;
+        }
+        ctx.drawImage(drawRadialForegroundImage.cache[cacheKey], 0, 0);
+        return this;
+    };
+    drawRadialForegroundImage.cache = {};
+
+    var createKnobImage = function (size, knob, style) {
+        var knobBuffer, knobCtx,
+            maxPostCenterX = size / 2,
+            maxPostCenterY = size / 2,
+            grad,
+            cacheKey = size.toString() + knob.type + style.style;
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!createKnobImage.cache[cacheKey]) {
+            knobBuffer = createBuffer(size * 1.18889, size * 1.18889);
+            knobCtx = knobBuffer.getContext('2d');
+
+            switch (knob.type) {
+            case 'metalKnob':
+                // METALKNOB_FRAME
+                knobCtx.beginPath();
+                knobCtx.moveTo(0, size * 0.5);
+                knobCtx.bezierCurveTo(0, size * 0.222222, size * 0.222222, 0, size * 0.5, 0);
+                knobCtx.bezierCurveTo(size * 0.777777, 0, size, size * 0.222222, size, size * 0.5);
+                knobCtx.bezierCurveTo(size, size * 0.777777, size * 0.777777, size, size * 0.5, size);
+                knobCtx.bezierCurveTo(size * 0.222222, size, 0, size * 0.777777, 0, size * 0.5);
+                knobCtx.closePath();
+                grad = knobCtx.createLinearGradient(0, 0, 0, size);
+                grad.addColorStop(0, 'rgb(92, 95, 101)');
+                grad.addColorStop(0.47, 'rgb(46, 49, 53)');
+                grad.addColorStop(1, 'rgb(22, 23, 26)');
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+
+                // METALKNOB_MAIN
+                knobCtx.beginPath();
+                knobCtx.moveTo(size * 0.055555, size * 0.5);
+                knobCtx.bezierCurveTo(size * 0.055555, size * 0.277777, size * 0.277777, size * 0.055555, size * 0.5, size * 0.055555);
+                knobCtx.bezierCurveTo(size * 0.722222, size * 0.055555, size * 0.944444, size * 0.277777, size * 0.944444, size * 0.5);
+                knobCtx.bezierCurveTo(size * 0.944444, size * 0.722222, size * 0.722222, size * 0.944444, size * 0.5, size * 0.944444);
+                knobCtx.bezierCurveTo(size * 0.277777, size * 0.944444, size * 0.055555, size * 0.722222, size * 0.055555, size * 0.5);
+                knobCtx.closePath();
+                grad = knobCtx.createLinearGradient(0, 0.055555 * size, 0, 0.944443 * size);
+                switch (style.style) {
+                case 'black':
+                    grad.addColorStop(0, 'rgb(43, 42, 47)');
+                    grad.addColorStop(1, 'rgb(26, 27, 32)');
+                    break;
+
+                case 'brass':
+                    grad.addColorStop(0, 'rgb(150, 110, 54)');
+                    grad.addColorStop(1, 'rgb(124, 95, 61)');
+                    break;
+
+                case 'silver':
+                /* falls through */
+                default:
+                    grad.addColorStop(0, 'rgb(204, 204, 204)');
+                    grad.addColorStop(1, 'rgb(87, 92, 98)');
+                    break;
+                }
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+
+                // METALKNOB_LOWERHL
+                knobCtx.beginPath();
+                knobCtx.moveTo(size * 0.777777, size * 0.833333);
+                knobCtx.bezierCurveTo(size * 0.722222, size * 0.722222, size * 0.611111, size * 0.666666, size * 0.5, size * 0.666666);
+                knobCtx.bezierCurveTo(size * 0.388888, size * 0.666666, size * 0.277777, size * 0.722222, size * 0.222222, size * 0.833333);
+                knobCtx.bezierCurveTo(size * 0.277777, size * 0.888888, size * 0.388888, size * 0.944444, size * 0.5, size * 0.944444);
+                knobCtx.bezierCurveTo(size * 0.611111, size * 0.944444, size * 0.722222, size * 0.888888, size * 0.777777, size * 0.833333);
+                knobCtx.closePath();
+                grad = knobCtx.createRadialGradient((0.555555) * size, ((0.944444) * size), 0, ((0.555555) * size), ((0.944444) * size), 0.388888 * size);
+                grad.addColorStop(0, 'rgba(255, 255, 255, 0.6)');
+                grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+
+                // METALKNOB_UPPERHL
+                knobCtx.beginPath();
+                knobCtx.moveTo(size * 0.944444, size * 0.277777);
+                knobCtx.bezierCurveTo(size * 0.833333, size * 0.111111, size * 0.666666, 0, size * 0.5, 0);
+                knobCtx.bezierCurveTo(size * 0.333333, 0, size * 0.166666, size * 0.111111, size * 0.055555, size * 0.277777);
+                knobCtx.bezierCurveTo(size * 0.166666, size * 0.333333, size * 0.333333, size * 0.388888, size * 0.5, size * 0.388888);
+                knobCtx.bezierCurveTo(size * 0.666666, size * 0.388888, size * 0.833333, size * 0.333333, size * 0.944444, size * 0.277777);
+                knobCtx.closePath();
+                grad = knobCtx.createRadialGradient(0.5 * size, 0, 0, ((0.5) * size), 0, 0.583333 * size);
+                grad.addColorStop(0, 'rgba(255, 255, 255, 0.749019)');
+                grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+
+                // METALKNOB_INNERFRAME
+                knobCtx.beginPath();
+                knobCtx.moveTo(size * 0.277777, size * 0.555555);
+                knobCtx.bezierCurveTo(size * 0.277777, size * 0.388888, size * 0.388888, size * 0.277777, size * 0.5, size * 0.277777);
+                knobCtx.bezierCurveTo(size * 0.611111, size * 0.277777, size * 0.777777, size * 0.388888, size * 0.777777, size * 0.555555);
+                knobCtx.bezierCurveTo(size * 0.777777, size * 0.666666, size * 0.611111, size * 0.777777, size * 0.5, size * 0.777777);
+                knobCtx.bezierCurveTo(size * 0.388888, size * 0.777777, size * 0.277777, size * 0.666666, size * 0.277777, size * 0.555555);
+                knobCtx.closePath();
+                grad = knobCtx.createLinearGradient(0, 0.277777 * size, 0, 0.722221 * size);
+                grad.addColorStop(0, '#000000');
+                grad.addColorStop(1, 'rgb(204, 204, 204)');
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+
+                // METALKNOB_INNERBACKGROUND
+                knobCtx.beginPath();
+                knobCtx.moveTo(size * 0.333333, size * 0.555555);
+                knobCtx.bezierCurveTo(size * 0.333333, size * 0.444444, size * 0.388888, size * 0.333333, size * 0.5, size * 0.333333);
+                knobCtx.bezierCurveTo(size * 0.611111, size * 0.333333, size * 0.722222, size * 0.444444, size * 0.722222, size * 0.555555);
+                knobCtx.bezierCurveTo(size * 0.722222, size * 0.611111, size * 0.611111, size * 0.722222, size * 0.5, size * 0.722222);
+                knobCtx.bezierCurveTo(size * 0.388888, size * 0.722222, size * 0.333333, size * 0.611111, size * 0.333333, size * 0.555555);
+                knobCtx.closePath();
+                grad = knobCtx.createLinearGradient(0, 0.333333 * size, 0, 0.666666 * size);
+                grad.addColorStop(0, 'rgb(10, 9, 1)');
+                grad.addColorStop(1, 'rgb(42, 41, 37)');
+                knobCtx.fillStyle = grad;
+                knobCtx.fill();
+                break;
+
+            case 'standardKnob':
+                grad = knobCtx.createLinearGradient(0, 0, 0, size);
+                grad.addColorStop(0, 'rgb(180, 180, 180)');
+                grad.addColorStop(0.46, 'rgb(63, 63, 63)');
+                grad.addColorStop(1, 'rgb(40, 40, 40)');
+                knobCtx.fillStyle = grad;
+                knobCtx.beginPath();
+                knobCtx.arc(maxPostCenterX, maxPostCenterY, size / 2, 0, TWO_PI, true);
+                knobCtx.closePath();
+                knobCtx.fill();
+                grad = knobCtx.createLinearGradient(0, size - size * 0.77, 0, size - size * 0.77 + size * 0.77);
+                switch (style.style) {
+                case 'black':
+                    grad.addColorStop(0, 'rgb(191, 191, 191)');
+                    grad.addColorStop(0.5, 'rgb(45, 44, 49)');
+                    grad.addColorStop(1, 'rgb(125, 126, 128)');
+                    break;
+
+                case 'brass':
+                    grad.addColorStop(0, 'rgb(223, 208, 174)');
+                    grad.addColorStop(0.5, 'rgb(123, 95, 63)');
+                    grad.addColorStop(1, 'rgb(207, 190, 157)');
+                    break;
+
+                case 'silver':
+                /* falls through */
+                default:
+                    grad.addColorStop(0, 'rgb(215, 215, 215)');
+                    grad.addColorStop(0.5, 'rgb(116, 116, 116)');
+                    grad.addColorStop(1, 'rgb(215, 215, 215)');
+                    break;
+                }
+                knobCtx.fillStyle = grad;
+                knobCtx.beginPath();
+                knobCtx.arc(maxPostCenterX, maxPostCenterY, size * 0.77 / 2, 0, TWO_PI, true);
+                knobCtx.closePath();
+                knobCtx.fill();
+
+                grad = knobCtx.createRadialGradient(maxPostCenterX, maxPostCenterY, 0, maxPostCenterX, maxPostCenterY, size * 0.77 / 2);
+                grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(0.75, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(0.76, 'rgba(0, 0, 0, 0.01)');
+                grad.addColorStop(1, 'rgba(0, 0, 0, 0.2)');
+                knobCtx.fillStyle = grad;
+                knobCtx.beginPath();
+                knobCtx.arc(maxPostCenterX, maxPostCenterY, size * 0.77 / 2, 0, TWO_PI, true);
+                knobCtx.closePath();
+                knobCtx.fill();
+                break;
+            }
+
+            // cache the buffer
+            createKnobImage.cache[cacheKey] = knobBuffer;
+        }
+        return createKnobImage.cache[cacheKey];
+    };
+    createKnobImage.cache = {};
+
+    var createLedImage = function (size, state, ledColor) {
+        var ledBuffer, ledCtx,
+            // Bug in Chrome browser, radialGradients do not draw correctly if the center is not an integer value
+            ledCenterX = 2 * Math.round(size / 4),
+            ledCenterY = 2 * Math.round(size / 4),
+            grad,
+            cacheKey = size.toString() + state + ledColor.outerColor_ON;
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!createLedImage.cache[cacheKey]) {
+            ledBuffer = createBuffer(size, size);
+            ledCtx = ledBuffer.getContext('2d');
+
+            switch (state) {
+            case 0: // LED OFF
+                // OFF Gradient
+                grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2);
+                grad.addColorStop(0, ledColor.innerColor1_OFF);
+                grad.addColorStop(0.2, ledColor.innerColor2_OFF);
+                grad.addColorStop(1, ledColor.outerColor_OFF);
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, ledCenterY, size * 0.5 / 2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+
+                // InnerShadow
+                grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2);
+                grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(1, 'rgba(0, 0, 0, 0.4)');
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, ledCenterY, size * 0.5 / 2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+
+                // LightReflex
+                grad = ledCtx.createLinearGradient(0, 0.35 * size, 0, 0.35 * size + 0.15 * size);
+                grad.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
+                grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, 0.35 * size + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+                break;
+
+            case 1: // LED ON
+                // ON Gradient
+                grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2);
+                grad.addColorStop(0, ledColor.innerColor1_ON);
+                grad.addColorStop(0.2, ledColor.innerColor2_ON);
+                grad.addColorStop(1, ledColor.outerColor_ON);
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, ledCenterY, size * 0.5 / 2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+
+                // InnerShadow
+                grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size * 0.5 / 2);
+                grad.addColorStop(0, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(0.8, 'rgba(0, 0, 0, 0)');
+                grad.addColorStop(1, 'rgba(0, 0, 0, 0.4)');
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, ledCenterY, size * 0.5 / 2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+
+                // LightReflex
+                grad = ledCtx.createLinearGradient(0, 0.35 * size, 0, 0.35 * size + 0.15 * size);
+                grad.addColorStop(0, 'rgba(255, 255, 255, 0.4)');
+                grad.addColorStop(1, 'rgba(255, 255, 255, 0)');
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, 0.35 * size + 0.2 * size / 2, size * 0.2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+
+                // Corona
+                grad = ledCtx.createRadialGradient(ledCenterX, ledCenterY, 0, ledCenterX, ledCenterY, size / 2);
+                grad.addColorStop(0, setAlpha(ledColor.coronaColor, 0));
+                grad.addColorStop(0.6, setAlpha(ledColor.coronaColor, 0.4));
+                grad.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.25));
+                grad.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.15));
+                grad.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05));
+                grad.addColorStop(1, setAlpha(ledColor.coronaColor, 0));
+                ledCtx.fillStyle = grad;
+
+                ledCtx.beginPath();
+                ledCtx.arc(ledCenterX, ledCenterY, size / 2, 0, TWO_PI, true);
+                ledCtx.closePath();
+                ledCtx.fill();
+                break;
+            }
+            // cache the buffer
+            createLedImage.cache[cacheKey] = ledBuffer;
+        }
+        return createLedImage.cache[cacheKey];
+    };
+    createLedImage.cache = {};
+
+    var createLcdBackgroundImage = function (width, height, lcdColor) {
+        var lcdBuffer, lcdCtx,
+            xB = 0,
+            yB = 0,
+            wB = width,
+            hB = height,
+            rB = Math.min(width, height) * 0.095,
+            grad,
+            xF = 1,
+            yF = 1,
+            wF = width - 2,
+            hF = height - 2,
+            rF = rB - 1,
+            cacheKey = width.toString() + height + JSON.stringify(lcdColor);
+
+        // check if we have already created and cached this buffer, if not create it
+        if (!createLcdBackgroundImage.cache[cacheKey]) {
+            lcdBuffer = createBuffer(width, height);
+            lcdCtx = lcdBuffer.getContext('2d');
+            // background
+            grad = lcdCtx.createLinearGradient(0, yB, 0, yB + hB);
+            grad.addColorStop(0, '#4c4c4c');
+            grad.addColorStop(0.08, '#666666');
+            grad.addColorStop(0.92, '#666666');
+            grad.addColorStop(1, '#e6e6e6');
+            lcdCtx.fillStyle = grad;
+            roundedRectangle(lcdCtx, xB, yB, wB, hB, rB);
+            lcdCtx.fill();
+
+            // foreground
+            grad = lcdCtx.createLinearGradient(0, yF, 0, yF + hF);
+            grad.addColorStop(0, lcdColor.gradientStartColor);
+            grad.addColorStop(0.03, lcdColor.gradientFraction1Color);
+            grad.addColorStop(0.49, lcdColor.gradientFraction2Color);
+            grad.addColorStop(0.5, lcdColor.gradientFraction3Color);
+            grad.addColorStop(1, lcdColor.gradientStopColor);
+            lcdCtx.fillStyle = grad;
+            roundedRectangle(lcdCtx, xF, yF, wF, hF, rF);
+            lcdCtx.fill();
+            // cache the buffer
+            createLcdBackgroundImage.cache[cacheKey] = lcdBuffer;
+        }
+        return createLcdBackgroundImage.cache[cacheKey];
+    };
+    createLcdBackgroundImage.cache = {};
+
+    var createMeasuredValueImage = function (size, indicatorColor, radial, vertical) {
+        var indicatorBuffer, indicatorCtx,
+            cacheKey = size.toString() + indicatorColor + radial + vertical;
+
+        // check if we have already created and cached this buffer, if so return it and exit
+        if (!createMeasuredValueImage.cache[cacheKey]) {
+            indicatorBuffer = doc.createElement('canvas');
+            indicatorCtx = indicatorBuffer.getContext('2d');
+            indicatorBuffer.width = size;
+            indicatorBuffer.height = size;
+            indicatorCtx.fillStyle = indicatorColor;
+            if (radial) {
+                indicatorCtx.beginPath();
+                indicatorCtx.moveTo(size * 0.5, size);
+                indicatorCtx.lineTo(0, 0);
+                indicatorCtx.lineTo(size, 0);
+                indicatorCtx.closePath();
+                indicatorCtx.fill();
+            } else {
+                if (vertical) {
+                    indicatorCtx.beginPath();
+                    indicatorCtx.moveTo(size, size * 0.5);
+                    indicatorCtx.lineTo(0, 0);
+                    indicatorCtx.lineTo(0, size);
+                    indicatorCtx.closePath();
+                    indicatorCtx.fill();
+                } else {
+                    indicatorCtx.beginPath();
+                    indicatorCtx.moveTo(size * 0.5, 0);
+                    indicatorCtx.lineTo(size, size);
+                    indicatorCtx.lineTo(0, size);
+                    indicatorCtx.closePath();
+                    indicatorCtx.fill();
+                }
+            }
+            // cache the buffer
+            createMeasuredValueImage.cache[cacheKey] = indicatorBuffer;
+        }
+        return createMeasuredValueImage.cache[cacheKey];
+    };
+    createMeasuredValueImage.cache = {};
+
+    var createTrendIndicator = function (width, onSection, colors) {
+        var height = width * 2,
+            trendBuffer, trendCtx,
+            fill,
+            cacheKey = onSection.state + width + JSON.stringify(colors),
+
+            drawUpArrow = function () {
+                // draw up arrow (red)
+                var ledColor = colors[0];
+
+                if (onSection.state === 'up') {
+                    fill = trendCtx.createRadialGradient(0.5 * width, 0.2 * height, 0, 0.5 * width, 0.2 * height, 0.5 * width);
+                    fill.addColorStop(0, ledColor.innerColor1_ON);
+                    fill.addColorStop(0.2, ledColor.innerColor2_ON);
+                    fill.addColorStop(1, ledColor.outerColor_ON);
+                } else {
+                    fill = trendCtx.createLinearGradient(0, 0, 0, 0.5 * height);
+                    fill.addColorStop(0, '#323232');
+                    fill.addColorStop(1, '#5c5c5c');
+                }
+                trendCtx.fillStyle = fill;
+                trendCtx.beginPath();
+                trendCtx.moveTo(0.5 * width, 0);
+                trendCtx.lineTo(width, 0.2 * height);
+                trendCtx.lineTo(0.752 * width, 0.2 * height);
+                trendCtx.lineTo(0.752 * width, 0.37 * height);
+                trendCtx.lineTo(0.252 * width, 0.37 * height);
+                trendCtx.lineTo(0.252 * width, 0.2 * height);
+                trendCtx.lineTo(0, 0.2 * height);
+                trendCtx.closePath();
+                trendCtx.fill();
+                if (onSection.state !== 'up') {
+                    // Inner shadow
+                    trendCtx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0, 0.2 * height);
+                    trendCtx.lineTo(0.5 * width, 0);
+                    trendCtx.lineTo(width, 0.2 * height);
+                    trendCtx.moveTo(0.252 * width, 0.2 * height);
+                    trendCtx.lineTo(0.252 * width, 0.37 * height);
+                    trendCtx.stroke();
+                    // Inner highlight
+                    trendCtx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.252 * width, 0.37 * height);
+                    trendCtx.lineTo(0.752 * width, 0.37 * height);
+                    trendCtx.lineTo(0.752 * width, 0.2 * height);
+                    trendCtx.lineTo(width, 0.2 * height);
+                    trendCtx.stroke();
+                } else {
+                    // draw halo
+                    fill = trendCtx.createRadialGradient(0.5 * width, 0.2 * height, 0, 0.5 * width, 0.2 * height, 0.7 * width);
+                    fill.addColorStop(0, setAlpha(ledColor.coronaColor, 0));
+                    fill.addColorStop(0.5, setAlpha(ledColor.coronaColor, 0.3));
+                    fill.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.2));
+                    fill.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.1));
+                    fill.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05));
+                    fill.addColorStop(1, setAlpha(ledColor.coronaColor, 0));
+                    trendCtx.fillStyle = fill;
+
+                    trendCtx.beginPath();
+                    trendCtx.arc(0.5 * width, 0.2 * height, 0.7 * width, 0, TWO_PI, true);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                }
+            },
+
+            drawEquals = function () {
+                // draw equal symbol
+                var ledColor = colors[1];
+
+                trendCtx.beginPath();
+                if (onSection.state === 'steady') {
+                    fill = ledColor.outerColor_ON;
+                    trendCtx.fillStyle = fill;
+                    trendCtx.rect(0.128 * width, 0.41 * height, 0.744 * width, 0.074 * height);
+                    trendCtx.rect(0.128 * width, 0.516 * height, 0.744 * width, 0.074 * height);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                } else {
+                    fill = trendCtx.createLinearGradient(0, 0.41 * height, 0, 0.41 * height + 0.074 * height);
+                    fill.addColorStop(0, '#323232');
+                    fill.addColorStop(1, '#5c5c5c');
+                    trendCtx.fillStyle = fill;
+                    trendCtx.rect(0.128 * width, 0.41 * height, 0.744 * width, 0.074 * height);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                    fill = trendCtx.createLinearGradient(0, 0.516 * height, 0, 0.516 * height + 0.074 * height);
+                    fill.addColorStop(0, '#323232');
+                    fill.addColorStop(1, '#5c5c5c');
+                    trendCtx.fillStyle = fill;
+                    trendCtx.rect(0.128 * width, 0.516 * height, 0.744 * width, 0.074 * height);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                }
+                if (onSection.state !== 'steady') {
+                    // inner shadow
+                    trendCtx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.128 * width, 0.41 * height + 0.074 * height);
+                    trendCtx.lineTo(0.128 * width, 0.41 * height);
+                    trendCtx.lineTo(0.128 * width + 0.744 * width, 0.41 * height);
+                    trendCtx.stroke();
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.128 * width, 0.516 * height + 0.074 * height);
+                    trendCtx.lineTo(0.128 * width, 0.516 * height);
+                    trendCtx.lineTo(0.128 * width + 0.744 * width, 0.516 * height);
+                    trendCtx.stroke();
+                    // inner highlight
+                    trendCtx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.128 * width + 0.744 * width, 0.41 * height);
+                    trendCtx.lineTo(0.128 * width + 0.744 * width, 0.41 * height + 0.074 * height);
+                    trendCtx.lineTo(0.128 * width, 0.41 * height + 0.074 * height);
+                    trendCtx.stroke();
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.128 * width + 0.744 * width, 0.516 * height);
+                    trendCtx.lineTo(0.128 * width + 0.744 * width, 0.516 * height + 0.074 * height);
+                    trendCtx.lineTo(0.128 * width, 0.516 * height + 0.074 * height);
+                    trendCtx.stroke();
+                } else {
+                    // draw halo
+                    fill = trendCtx.createRadialGradient(0.5 * width, 0.5 * height, 0, 0.5 * width, 0.5 * height, 0.7 * width);
+                    fill.addColorStop(0, setAlpha(ledColor.coronaColor, 0));
+                    fill.addColorStop(0.5, setAlpha(ledColor.coronaColor, 0.3));
+                    fill.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.2));
+                    fill.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.1));
+                    fill.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05));
+                    fill.addColorStop(1, setAlpha(ledColor.coronaColor, 0));
+                    trendCtx.fillStyle = fill;
+                    trendCtx.beginPath();
+                    trendCtx.arc(0.5 * width, 0.5 * height, 0.7 * width, 0, TWO_PI, true);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                }
+            },
+
+            drawDownArrow = function () {
+                // draw down arrow
+                var ledColor = colors[2];
+                if (onSection.state === 'down') {
+                    fill = trendCtx.createRadialGradient(0.5 * width, 0.8 * height, 0, 0.5 * width, 0.8 * height, 0.5 * width);
+                    fill.addColorStop(0, ledColor.innerColor1_ON);
+                    fill.addColorStop(0.2, ledColor.innerColor2_ON);
+                    fill.addColorStop(1, ledColor.outerColor_ON);
+                } else {
+                    fill = trendCtx.createLinearGradient(0, 0.63 * height, 0, height);
+                    fill.addColorStop(0, '#323232');
+                    fill.addColorStop(1, '#5c5c5c');
+                }
+                trendCtx.beginPath();
+                trendCtx.fillStyle = fill;
+                trendCtx.moveTo(0.5 * width, height);
+                trendCtx.lineTo(width, 0.8 * height);
+                trendCtx.lineTo(0.725 * width, 0.8 * height);
+                trendCtx.lineTo(0.725 * width, 0.63 * height);
+                trendCtx.lineTo(0.252 * width, 0.63 * height);
+                trendCtx.lineTo(0.252 * width, 0.8 * height);
+                trendCtx.lineTo(0, 0.8 * height);
+                trendCtx.closePath();
+                trendCtx.fill();
+                if (onSection.state !== 'down') {
+                    // Inner shadow
+                    trendCtx.strokeStyle = 'rgba(0, 0, 0, 0.4)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0, 0.8 * height);
+                    trendCtx.lineTo(0.252 * width, 0.8 * height);
+                    trendCtx.moveTo(0.252 * width, 0.63 * height);
+                    trendCtx.lineTo(0.752 * width, 0.63 * height);
+                    trendCtx.stroke();
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.752 * width, 0.8 * height);
+                    trendCtx.lineTo(width, 0.8 * height);
+                    trendCtx.stroke();
+                    // Inner highlight
+                    trendCtx.strokeStyle = 'rgba(255, 255, 255, 0.3)';
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0, 0.8 * height);
+                    trendCtx.lineTo(0.5 * width, height);
+                    trendCtx.lineTo(width, 0.8 * height);
+                    trendCtx.stroke();
+                    trendCtx.beginPath();
+                    trendCtx.moveTo(0.752 * width, 0.8 * height);
+                    trendCtx.lineTo(0.752 * width, 0.63 * height);
+                    trendCtx.stroke();
+                } else {
+                    // draw halo
+                    fill = trendCtx.createRadialGradient(0.5 * width, 0.8 * height, 0, 0.5 * width, 0.8 * height, 0.7 * width);
+                    fill.addColorStop(0, setAlpha(ledColor.coronaColor, 0));
+                    fill.addColorStop(0.5, setAlpha(ledColor.coronaColor, 0.3));
+                    fill.addColorStop(0.7, setAlpha(ledColor.coronaColor, 0.2));
+                    fill.addColorStop(0.8, setAlpha(ledColor.coronaColor, 0.1));
+                    fill.addColorStop(0.85, setAlpha(ledColor.coronaColor, 0.05));
+                    fill.addColorStop(1, setAlpha(ledColor.coronaColor, 0));
+                    trendCtx.fillStyle = fill;
+                    trendCtx.beginPath();
+                    trendCtx.arc(0.5 * width, 0.8 * height, 0.7 * width, 0, TWO_PI, true);
+                    trendCtx.closePath();
+                    trendCtx.fill();
+                }
+            };
+
+        // Check if we have already cached this indicator, if not create it
+        if (!createTrendIndicator.cache[cacheKey]) {
+            // create oversized buffer for the glow
+            trendBuffer = createBuffer(width * 2, width * 4);
+            trendCtx = trendBuffer.getContext('2d');
+            trendCtx.translate(width * 0.5, width * 0.5);
+            // Must draw the active section last so the 'glow' is on top
+            switch (onSection.state) {
+            case 'up':
+                drawDownArrow();
+                drawEquals();
+                drawUpArrow();
+                break;
+            case 'steady':
+                drawDownArrow();
+                drawUpArrow();
+                drawEquals();
+                break;
+            case 'down':
+            /* falls through */
+            default:
+                drawUpArrow();
+                drawEquals();
+                drawDownArrow();
+                break;
+            }
+            // cache the buffer
+            createTrendIndicator.cache[cacheKey] = trendBuffer;
+        }
+        return createTrendIndicator.cache[cacheKey];
+    };
+    createTrendIndicator.cache = {};
+
+    var drawTitleImage = function (ctx, imageWidth, imageHeight, titleString, unitString, backgroundColor, vertical, radial, altPos, gaugeType) {
+        gaugeType = (undefined === gaugeType ? gaugeType = steelseries.GaugeType.TYPE1 : gaugeType);
+        ctx.save();
+        ctx.textAlign = (radial ? 'center' : 'left');
+        ctx.textBaseline = 'middle';
+        ctx.strokeStyle = backgroundColor.labelColor.getRgbaColor();
+        ctx.fillStyle = backgroundColor.labelColor.getRgbaColor();
+
+        if (radial) {
+            ctx.font = 0.046728 * imageWidth + 'px ' + stdFontName;
+            ctx.fillText(titleString, imageWidth / 2, imageHeight * 0.3, imageWidth * 0.3);
+            ctx.fillText(unitString, imageWidth / 2, imageHeight * 0.38, imageWidth * 0.3);
+        } else {
+            // linear
+            if (vertical) {
+                ctx.font = 0.1 * imageWidth + 'px ' + stdFontName;
+                ctx.save();
+                ctx.translate(0.671428 * imageWidth, 0.1375 * imageHeight);
+                ctx.rotate(1.570796);
+                ctx.fillText(titleString, 0, 0);
+                ctx.translate(-0.671428 * imageWidth, -0.1375 * imageHeight);
+                ctx.restore();
+                ctx.font = 0.071428 * imageWidth + 'px ' + stdFontName;
+                if (altPos) {
+                    // LCD visible
+                    if (gaugeType.type === 'type2') {
+                        ctx.textAlign = 'right';
+                        ctx.fillText(unitString, 0.36 * imageWidth, imageHeight * 0.79, imageWidth * 0.25);
+                    } else {
+                        ctx.fillText(unitString, 0.63 * imageWidth, imageHeight * 0.85, imageWidth * 0.2);
+                    }
+                } else {
+                    // LCD hidden
+                    ctx.textAlign = 'center';
+                    if (gaugeType.type === 'type2') {
+                        ctx.fillText(unitString, imageWidth / 2, imageHeight * 0.92, imageWidth * 0.2);
+                    } else {
+                        ctx.fillText(unitString, imageWidth / 2, imageHeight * 0.89, imageWidth * 0.2);
+                    }
+                }
+            } else { //linear horizontal
+                ctx.font = 0.035 * imageWidth + 'px ' + stdFontName;
+                ctx.fillText(titleString, imageWidth * 0.15, imageHeight * 0.25, imageWidth * 0.3);
+                ctx.font = 0.025 * imageWidth + 'px ' + stdFontName;
+                ctx.fillText(unitString, imageWidth * 0.0625, imageHeight * 0.7, imageWidth * 0.07);
+            }
+        }
+        ctx.restore();
+    };
+
+    //*****************************************   T E X T U R E S   ****************************************************
+    var carbonBuffer = drawToBuffer(12, 12, function (ctx) {
+            var imageWidth = ctx.canvas.width,
+                imageHeight = ctx.canvas.height,
+                offsetX = 0,
+                offsetY = 0,
+                grad;
+
+            ctx.save();
+
+            // RULB
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, 0, imageWidth * 0.5, imageHeight * 0.5);
+            ctx.closePath();
+            ctx.restore();
+
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.5 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, 'rgb(35, 35, 35)');
+            grad.addColorStop(1, 'rgb(23, 23, 23)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RULF
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.083333, 0, imageWidth * 0.333333, imageHeight * 0.416666);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.083333;
+            offsetY = 0;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, 'rgb(38, 38, 38)');
+            grad.addColorStop(1, 'rgb(30, 30, 30)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RLRB
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.5, imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.5;
+            offsetY = 0.5;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.5 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, 'rgb(35, 35, 35)');
+            grad.addColorStop(1, 'rgb(23, 23, 23)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RLRF
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.583333, imageHeight * 0.5, imageWidth * 0.333333, imageHeight * 0.416666);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.583333;
+            offsetY = 0.5;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, 'rgb(38, 38, 38)');
+            grad.addColorStop(1, 'rgb(30, 30, 30)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RURB
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.5, 0, imageWidth * 0.5, imageHeight * 0.5);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.5;
+            offsetY = 0;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.5 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, '#303030');
+            grad.addColorStop(1, 'rgb(40, 40, 40)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RURF
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.583333, imageHeight * 0.083333, imageWidth * 0.333333, imageHeight * 0.416666);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.583333;
+            offsetY = 0.083333;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, 'rgb(53, 53, 53)');
+            grad.addColorStop(1, 'rgb(45, 45, 45)');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RLLB
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(0, imageHeight * 0.5, imageWidth * 0.5, imageHeight * 0.5);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0;
+            offsetY = 0.5;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.5 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, '#303030');
+            grad.addColorStop(1, '#282828');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            // RLLF
+            ctx.save();
+            ctx.beginPath();
+            ctx.rect(imageWidth * 0.083333, imageHeight * 0.583333, imageWidth * 0.333333, imageHeight * 0.416666);
+            ctx.closePath();
+            ctx.restore();
+            offsetX = 0.083333;
+            offsetY = 0.583333;
+            grad = ctx.createLinearGradient(0, offsetY * imageHeight, 0, 0.416666 * imageHeight + offsetY * imageHeight);
+            grad.addColorStop(0, '#353535');
+            grad.addColorStop(1, '#2d2d2d');
+            ctx.fillStyle = grad;
+            ctx.fill();
+
+            ctx.restore();
+        });
+
+    var punchedSheetBuffer = drawToBuffer(15, 15, function (ctx) {
+        var imageWidth = ctx.canvas.width,
+            imageHeight = ctx.canvas.height,
+            grad;
+
+        ctx.save();
+
+        // BACK
+        ctx.save();
+        ctx.beginPath();
+        ctx.rect(0, 0, imageWidth, imageHeight);
+        ctx.closePath();
+        ctx.restore();
+        ctx.fillStyle = '#1D2123';
+        ctx.fill();
+
+        // ULB
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(0, imageHeight * 0.266666);
+        ctx.bezierCurveTo(0, imageHeight * 0.4, imageWidth * 0.066666, imageHeight * 0.466666, imageWidth * 0.2, imageHeight * 0.466666);
+        ctx.bezierCurveTo(imageWidth * 0.333333, imageHeight * 0.466666, imageWidth * 0.4, imageHeight * 0.4, imageWidth * 0.4, imageHeight * 0.266666);
+        ctx.bezierCurveTo(imageWidth * 0.4, imageHeight * 0.133333, imageWidth * 0.333333, imageHeight * 0.066666, imageWidth * 0.2, imageHeight * 0.066666);
+        ctx.bezierCurveTo(imageWidth * 0.066666, imageHeight * 0.066666, 0, imageHeight * 0.133333, 0, imageHeight * 0.266666);
+        ctx.closePath();
+        grad = ctx.createLinearGradient(0, 0.066666 * imageHeight, 0, 0.466666 * imageHeight);
+        grad.addColorStop(0, '#000000');
+        grad.addColorStop(1, '#444444');
+        ctx.fillStyle = grad;
+        ctx.fill();
+
+        // ULF
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(0, imageHeight * 0.2);
+        ctx.bezierCurveTo(0, imageHeight * 0.333333, imageWidth * 0.066666, imageHeight * 0.4, imageWidth * 0.2, imageHeight * 0.4);
+        ctx.bezierCurveTo(imageWidth * 0.333333, imageHeight * 0.4, imageWidth * 0.4, imageHeight * 0.333333, imageWidth * 0.4, imageHeight * 0.2);
+        ctx.bezierCurveTo(imageWidth * 0.4, imageHeight * 0.066666, imageWidth * 0.333333, 0, imageWidth * 0.2, 0);
+        ctx.bezierCurveTo(imageWidth * 0.066666, 0, 0, imageHeight * 0.066666, 0, imageHeight * 0.2);
+        ctx.closePath();
+        ctx.fillStyle = '#050506';
+        ctx.fill();
+
+        // LRB
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.466666, imageHeight * 0.733333);
+        ctx.bezierCurveTo(imageWidth * 0.466666, imageHeight * 0.866666, imageWidth * 0.533333, imageHeight * 0.933333, imageWidth * 0.666666, imageHeight * 0.933333);
+        ctx.bezierCurveTo(imageWidth * 0.8, imageHeight * 0.933333, imageWidth * 0.866666, imageHeight * 0.866666, imageWidth * 0.866666, imageHeight * 0.733333);
+        ctx.bezierCurveTo(imageWidth * 0.866666, imageHeight * 0.6, imageWidth * 0.8, imageHeight * 0.533333, imageWidth * 0.666666, imageHeight * 0.533333);
+        ctx.bezierCurveTo(imageWidth * 0.533333, imageHeight * 0.533333, imageWidth * 0.466666, imageHeight * 0.6, imageWidth * 0.466666, imageHeight * 0.733333);
+        ctx.closePath();
+        grad = ctx.createLinearGradient(0, 0.533333 * imageHeight, 0, 0.933333 * imageHeight);
+        grad.addColorStop(0, '#000000');
+        grad.addColorStop(1, '#444444');
+        ctx.fillStyle = grad;
+        ctx.fill();
+
+        // LRF
+        ctx.save();
+        ctx.beginPath();
+        ctx.moveTo(imageWidth * 0.466666, imageHeight * 0.666666);
+        ctx.bezierCurveTo(imageWidth * 0.466666, imageHeight * 0.8, imageWidth * 0.533333, imageHeight * 0.866666, imageWidth * 0.666666, imageHeight * 0.866666);
+        ctx.bezierCurveTo(imageWidth * 0.8, imageHeight * 0.866666, imageWidth * 0.866666, imageHeight * 0.8, imageWidth * 0.866666, imageHeight * 0.666666);
+        ctx.bezierCurveTo(imageWidth * 0.866666, imageHeight * 0.533333, imageWidth * 0.8, imageHeight * 0.466666, imageWidth * 0.666666, imageHeight * 0.466666);
+        ctx.bezierCurveTo(imageWidth * 0.533333, imageHeight * 0.466666, imageWidth * 0.466666, imageHeight * 0.533333, imageWidth * 0.466666, imageHeight * 0.666666);
+        ctx.closePath();
+        ctx.fillStyle = '#050506';
+        ctx.fill();
+
+        ctx.restore();
+    });
+
+    var brushedMetalTexture = function (color, radius, amount, monochrome, shine) {
+
+        this.fill = function (startX, startY, endX, endY) {
+            var i, x, y,                        // loop counters
+                sinArr,
+                width, height,
+                outCanvas, outCanvasContext,    // output canvas
+                inPixels, outPixels,            // pixel arrays
+                //alpha = color & 0xff000000;
+                alpha = 255,
+                red = (color >> 16) & 0xff,
+                green = (color >> 8) & 0xff,
+                blue = color & 0xff,
+                n = 0,
+                variation = 255 * amount,
+                totR, totG, totB,
+                indx, tr, tg, tb, f;
+
+            startX = Math.floor(startX);
+            startY = Math.floor(startY);
+            endX = Math.ceil(endX);
+            endY = Math.ceil(endY);
+
+            width = endX - startX;
+            height = endY - startY;
+
+            // Create output canvas
+            outCanvas = createBuffer(width, height);
+            outCanvasContext = outCanvas.getContext('2d');
+
+            // Create pixel arrays
+            inPixels = outCanvasContext.createImageData(width, height);
+            outPixels = outCanvasContext.createImageData(width, height);
+
+            // Precreate sin() values
+            if (shine !== 0) {
+                sinArr = [];
+                for (i = 0; i < width; i++) {
+                    sinArr[i] = (255 * shine * Math.sin(i / width * PI)) | 0;
+                }
+            }
+
+            for (y = 0; y < height; y++) {
+                // The pixel array is addressed as 4 elements per pixel [r,g,b,a]
+                if (radius !== 0) {
+                    totR = totG = totB = 0;
+                }
+                for (x = 0; x < width; x ++) {
+                    indx = (y * width * 4) + (x * 4);
+                    tr = red;
+                    tg = green;
+                    tb = blue;
+                    if (shine !== 0) {
+                        f = sinArr[x];
+                        tr += f;
+                        tg += f;
+                        tb += f;
+                    }
+
+                    if (monochrome) {
+                        n = ((2 * Math.random() - 1) * variation) | 0;
+                        inPixels.data[indx]   = clamp(tr + n);
+                        inPixels.data[indx + 1] = clamp(tg + n);
+                        inPixels.data[indx + 2] = clamp(tb + n);
+                        inPixels.data[indx + 3] = alpha;
+                    } else {
+                        inPixels.data[indx]   = random(tr, variation);
+                        inPixels.data[indx + 1] = random(tg, variation);
+                        inPixels.data[indx + 2] = random(tb, variation);
+                        inPixels.data[indx + 3] = alpha;
+                    }
+                }
+            }
+
+            if (radius > 0) {
+                horizontalBlur(inPixels, outPixels, width, height, radius, alpha);
+                outCanvasContext.putImageData(outPixels, startX, startY);
+            } else {
+                outCanvasContext.putImageData(inPixels, startX, startY);
+            }
+            return outCanvas;
+        };
+
+        function random(x, vari) {
+            x += ((2 * Math.random() - 1) * vari) | 0;
+            return (x < 0 ? 0 : (x > 255 ? 255 : x));
+        }
+
+        function clamp(C) {
+            return (C < 0 ? 0 : (C > 255 ? 255 : C));
+        }
+
+        function horizontalBlur(inPix, outPix, width, height, radius, alpha) {
+            var x, y,       // loop counters
+                i, mul, indx,
+                totR, totG, totB;
+
+            if (radius >= width) {
+                radius = width - 1;
+            }
+            mul = 1 / (radius * 2 + 1);
+            indx = 0;
+            for (y = 0; y < height; y++) {
+                totR = totG = totB = 0;
+                for (x = 0; x < radius ; x++) {
+                    i = (indx + x) * 4;
+                    totR += inPix.data[i];
+                    totG += inPix.data[i + 1];
+                    totB += inPix.data[i + 2];
+                }
+                for (x = 0; x < width; x++) {
+                    if (x > radius) {
+                        i = (indx - radius - 1) * 4;
+                        totR -= inPix.data[i];
+                        totG -= inPix.data[i + 1];
+                        totB -= inPix.data[i + 2];
+                    }
+                    if (x + radius < width) {
+                        i = (indx + radius) * 4;
+                        totR += inPix.data[i];
+                        totG += inPix.data[i + 1];
+                        totB += inPix.data[i + 2];
+                    }
+                    i = indx * 4;
+                    outPix.data[i] = (totR * mul) | 0;
+                    outPix.data[i + 1] = (totG * mul) | 0;
+                    outPix.data[i + 2] = (totB * mul) | 0;
+                    outPix.data[i + 3] = alpha;
+                    indx++;
+                }
+            }
+        }
+
+        return this;
+    };
+
+    //********************************************   T O O L S   *******************************************************
+    var RgbaColor = function (r, g, b, a) {
+        var red, green, blue, alpha;
+
+        if (arguments.length === 1) {
+            // hexadecimal input #112233
+            b = parseInt(r.substr(5, 2), 16);
+            g = parseInt(r.substr(3, 2), 16);
+            r = parseInt(r.substr(1, 2), 16);
+            a = 1;
+        } else if (arguments.length === 3) {
+            a = 1;
+        }
+
+        function validateColors() {
+            red = range(r, 255);
+            green = range(g, 255);
+            blue = range(b, 255);
+            alpha = range(a, 1);
+        }
+
+        validateColors();
+
+        this.getRed = function () {
+            return red;
+        };
+
+        this.setRed = function (r) {
+            red = range(r, 255);
+        };
+
+        this.getGreen = function () {
+            return green;
+        };
+
+        this.setGreen = function (g) {
+            green = range(g, 255);
+        };
+
+        this.getBlue = function () {
+            return blue;
+        };
+
+        this.setBlue = function (b) {
+            blue = range(b, 255);
+        };
+
+        this.getAlpha = function () {
+            return alpha;
+        };
+
+        this.setAlpha = function (a) {
+            alpha = range(a, 1);
+        };
+
+        this.getRgbaColor = function () {
+            return 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')';
+        };
+
+        this.getRgbColor = function () {
+            return 'rgb(' + red + ', ' + green + ', ' + blue + ')';
+        };
+
+        this.getHexColor = function () {
+            return '#' + red.toString(16) + green.toString(16) + blue.toString(16);
+        };
+    };
+
+    var ConicalGradient = function (fractions, colors) {
+        var limit = fractions.length - 1,
+            i;
+
+        // Pre-multipy fractions array into range -PI to PI
+        for (i = 0; i <= limit; i++) {
+            fractions[i] = TWO_PI * fractions[i] - PI;
+        }
+
+        this.fillCircle = function (ctx, centerX, centerY, innerX, outerX) {
+            var angle,
+                radius = Math.ceil(outerX),
+                diameter = radius * 2,
+                pixels, alpha,
+                x, y, dx, dy, dy2, distance,
+                indx, pixColor,
+                buffer, bufferCtx;
+
+// Original Version using rotated lines
+/*
+            ctx.save();
+            ctx.lineWidth = 1.5;
+            ctx.translate(centerX, centerY);
+            ctx.rotate(rotationOffset);
+            ctx.translate(-centerX, -centerY);
+            for (i = 0, size = fractions.length - 1; i < size; i++) {
+                startAngle = TWO_PI * fractions[i];
+                stopAngle = TWO_PI * fractions[i + 1];
+                range = stopAngle - startAngle;
+                startColor = colors[i];
+                stopColor = colors[i + 1];
+                for (angle = startAngle; angle < stopAngle; angle += angleStep) {
+                    ctx.beginPath();
+                    ctx.fillStyle = getColorFromFraction(startColor, stopColor, range, (angle - startAngle)).getRgbaColor();
+                    ctx.strokeStyle = ctx.fillStyle;
+                    if (innerX > 0) {
+                        ctx.arc(centerX, centerY, innerX, angle + angleStep, angle, true);
+                    } else {
+                        ctx.moveTo(centerX, centerY);
+                    }
+                    ctx.arc(centerX, centerY, outerX, angle, angle + angleStep);
+                    ctx.fill();
+                    ctx.stroke();
+                }
+            }
+*/
+// End - Original Version
+
+            // Create pixel array
+            pixels = ctx.createImageData(diameter, diameter);
+            alpha = 255;
+
+            for (y = 0; y < diameter; y++) {
+                dy = radius - y;
+                dy2 = dy * dy;
+                for (x = 0; x < diameter; x++) {
+                    dx = x - radius;
+                    distance = Math.sqrt((dx * dx) + dy2);
+                    if (distance <= radius && distance >= innerX) { // pixels are transparent by default, so only paint the ones we need
+                        angle = Math.atan2(dx, dy);
+                        for (i = 0; i < limit; i++) {
+                            if (angle >= fractions[i] && angle < fractions[i + 1]) {
+                                pixColor = getColorFromFraction(colors[i], colors[i + 1], fractions[i + 1] - fractions[i], angle - fractions[i], true);
+                            }
+                        }
+                        // The pixel array is addressed as 4 elements per pixel [r,g,b,a]
+                        indx = ((diameter - y) * diameter * 4) + (x * 4);  // plot is 180 rotated from orginal method, so apply a simple invert (diameter - y)
+                        pixels.data[indx]     = pixColor[0];
+                        pixels.data[indx + 1] = pixColor[1];
+                        pixels.data[indx + 2] = pixColor[2];
+                        pixels.data[indx + 3] = alpha;
+                    }
+                }
+            }
+
+            // Create a new buffer to apply the raw data so we can rotate it
+            buffer = createBuffer(diameter, diameter);
+            bufferCtx = buffer.getContext('2d');
+            bufferCtx.putImageData(pixels, 0, 0);
+            // Apply the image buffer
+            ctx.drawImage(buffer, centerX - radius, centerY - radius);
+        };
+
+        this.fillRect = function (ctx, centerX, centerY, width, height, thicknessX, thicknessY) {
+            var angle,
+                width2,
+                height2,
+                pixels, alpha,
+                x, y, dx, dy,
+                indx,
+                pixColor,
+                buffer, bufferCtx;
+
+            width = Math.ceil(width);
+            height = Math.ceil(height);
+            width2 = width / 2;
+            height2 = height / 2;
+            thicknessX = Math.ceil(thicknessX);
+            thicknessY = Math.ceil(thicknessY);
+
+            // Create pixel array
+            pixels = ctx.createImageData(width, height);
+            alpha = 255;
+
+            for (y = 0; y < height; y++) {
+                dy = height2 - y;
+                for (x = 0; x < width; x++) {
+                    if (y > thicknessY && y <= height - thicknessY) {
+                        // we are in the range where we only draw the sides
+                        if (x > thicknessX && x < width - thicknessX) {
+                            // we are in the empty 'middle', jump to the next edge
+                            x = width - thicknessX;
+                        }
+                    }
+                    dx = x - width2;
+                    angle = Math.atan2(dx, dy);
+                    for (i = 0; i < limit; i++) {
+                        if (angle >= fractions[i] && angle < fractions[i + 1]) {
+                            pixColor = getColorFromFraction(colors[i], colors[i + 1], fractions[i + 1] - fractions[i], angle - fractions[i], true);
+                        }
+                    }
+                    // The pixel array is addressed as 4 elements per pixel [r,g,b,a]
+                    indx = ((height - y) * width * 4) + (x * 4); // plot is 180 rotated from orginal method, so apply a simple invert (height - y)
+                    pixels.data[indx]     = pixColor[0];
+                    pixels.data[indx + 1] = pixColor[0];
+                    pixels.data[indx + 2] = pixColor[0];
+                    pixels.data[indx + 3] = alpha;
+                }
+            }
+            // Create a new buffer to apply the raw data so we can clip it when drawing to canvas
+            buffer = createBuffer(width, height);
+            bufferCtx = buffer.getContext('2d');
+            bufferCtx.putImageData(pixels, 0, 0);
+
+            // draw the buffer back to the canvas
+            ctx.drawImage(buffer, centerX - width2, centerY - height2);
+        };
+
+    };
+
+    var GradientWrapper = function (start, end, fractions, colors) {
+
+        this.getColorAt = function (fraction) {
+            var lowerLimit = 0,
+                lowerIndex = 0,
+                upperLimit = 1,
+                upperIndex = 1,
+                i,
+                interpolationFraction;
+
+            fraction = (fraction < 0 ? 0 : (fraction > 1 ? 1 : fraction));
+
+            for (i = 0; i < fractions.length; i++) {
+                if (fractions[i] < fraction && lowerLimit < fractions[i]) {
+                    lowerLimit = fractions[i];
+                    lowerIndex = i;
+                }
+                if (fractions[i] === fraction) {
+                    return colors[i];
+                }
+                if (fractions[i] > fraction && upperLimit >= fractions[i]) {
+                    upperLimit = fractions[i];
+                    upperIndex = i;
+                }
+            }
+            interpolationFraction = (fraction - lowerLimit) / (upperLimit - lowerLimit);
+            return getColorFromFraction(colors[lowerIndex], colors[upperIndex], 1, interpolationFraction);
+        };
+
+        this.getStart = function () {
+            return start;
+        };
+
+        this.getEnd = function () {
+            return end;
+        };
+    };
+
+    function setAlpha(hex, alpha) {
+        var hexColor = ('#' === hex.charAt(0)) ? hex.substring(1, 7) : hex,
+            red = parseInt((hexColor).substring(0, 2), 16),
+            green = parseInt((hexColor).substring(2, 4), 16),
+            blue = parseInt((hexColor).substring(4, 6), 16),
+            color = 'rgba(' + red + ',' + green + ',' + blue + ',' + alpha + ')';
+
+        return color;
+    }
+
+    function getColorFromFraction(sourceColor, destinationColor, range, fraction, returnRawData) {
+        var INT_TO_FLOAT = 1 / 255,
+            sourceRed = sourceColor.getRed(),
+            sourceGreen = sourceColor.getGreen(),
+            sourceBlue = sourceColor.getBlue(),
+            sourceAlpha = sourceColor.getAlpha(),
+
+            deltaRed = destinationColor.getRed() - sourceRed,
+            deltaGreen = destinationColor.getGreen() - sourceGreen,
+            deltaBlue = destinationColor.getBlue() - sourceBlue,
+            deltaAlpha = destinationColor.getAlpha() * INT_TO_FLOAT - sourceAlpha * INT_TO_FLOAT,
+
+            fractionRed = deltaRed / range * fraction,
+            fractionGreen = deltaGreen / range * fraction,
+            fractionBlue = deltaBlue / range * fraction,
+            fractionAlpha = deltaAlpha / range * fraction;
+
+        returnRawData = returnRawData || false;
+        if (returnRawData) {
+            return [(sourceRed + fractionRed).toFixed(0), (sourceGreen + fractionGreen).toFixed(0), (sourceBlue + fractionBlue).toFixed(0), sourceAlpha + fractionAlpha];
+        } else {
+            return new RgbaColor((sourceRed + fractionRed).toFixed(0), (sourceGreen + fractionGreen).toFixed(0), (sourceBlue + fractionBlue).toFixed(0), sourceAlpha + fractionAlpha);
+        }
+    }
+
+    function section(start, stop, color) {
+        return {start : start,
+                stop : stop,
+                color : color};
+    }
+
+    Math.log10 = function (value) {
+        return (Math.log(value) / Math.LN10);
+    };
+
+    function calcNiceNumber(range, round) {
+        var exponent = Math.floor(Math.log10(range)),   // exponent of range
+            fraction = range / Math.pow(10, exponent),  // fractional part of range
+            niceFraction;                               // nice, rounded fraction
+
+        if (round) {
+            if (1.5 > fraction) {
+                niceFraction = 1;
+            } else if (3 > fraction) {
+                niceFraction = 2;
+            } else if (7 > fraction) {
+                niceFraction = 5;
+            } else {
+                niceFraction = 10;
+            }
+        } else {
+            if (1 >= fraction) {
+                niceFraction = 1;
+            } else if (2 >= fraction) {
+                niceFraction = 2;
+            } else if (5 >= fraction) {
+                niceFraction = 5;
+            } else {
+                niceFraction = 10;
+            }
+        }
+        return niceFraction * Math.pow(10, exponent);
+    }
+
+    function roundedRectangle(ctx, x, y, w, h, radius) {
+        var r = x + w,
+            b = y + h;
+        ctx.beginPath();
+        ctx.moveTo(x + radius, y);
+        ctx.lineTo(r - radius, y);
+        ctx.quadraticCurveTo(r, y, r, y + radius);
+        ctx.lineTo(r, y + h - radius);
+        ctx.quadraticCurveTo(r, b, r - radius, b);
+        ctx.lineTo(x + radius, b);
+        ctx.quadraticCurveTo(x, b, x, b - radius);
+        ctx.lineTo(x, y + radius);
+        ctx.quadraticCurveTo(x, y, x + radius, y);
+        ctx.closePath();
+//        ctx.stroke();
+    }
+
+    function createBuffer(width, height) {
+        var buffer = doc.createElement('canvas');
+        buffer.width = width;
+        buffer.height = height;
+        return buffer;
+    }
+
+    function drawToBuffer(width, height, drawFunction) {
+        var buffer = doc.createElement('canvas');
+        buffer.width = width;
+        buffer.height = height;
+        drawFunction(buffer.getContext('2d'));
+        return buffer;
+    }
+
+    function getColorValues(color) {
+        var colorData,
+            lookupBuffer = drawToBuffer(1, 1, function (ctx) {
+                ctx.fillStyle = color;
+                ctx.beginPath();
+                ctx.rect(0, 0, 1, 1);
+                ctx.fill();
+            });
+        colorData = lookupBuffer.getContext('2d').getImageData(0, 0, 2, 2).data;
+
+        /*
+        for (var i = 0; i < data.length; i += 4) {
+            var red = data[i];       // red
+            var green = data[i + 1]; // green
+            var blue = data[i + 2];  // blue
+            //var alpha = data[i + 3]; // alpha
+            console.log(red + ', ' + green + ', ' + blue);
+        }
+        */
+
+        return [colorData[0], colorData[1], colorData[2], colorData[3]];
+    }
+
+    function customColorDef(color) {
+        var VERY_DARK,
+            DARK,
+            LIGHT,
+            LIGHTER,
+            VERY_LIGHT,
+            values = getColorValues(color),
+            rgbaCol = new RgbaColor(values[0], values[1], values[2], values[3]);
+
+        VERY_DARK = darker(rgbaCol, 0.32);
+        DARK = darker(rgbaCol, 0.62);
+        LIGHT = lighter(rgbaCol, 0.84);
+        LIGHTER = lighter(rgbaCol, 0.94);
+        VERY_LIGHT = lighter(rgbaCol, 1);
+
+        return new ColorDef(VERY_DARK, DARK, rgbaCol, LIGHT, LIGHTER, VERY_LIGHT);
+    }
+
+    function rgbToHsl(red, green, blue) {
+        var min, max, hue, saturation, lightness, delta;
+
+        red /= 255;
+        green /= 255;
+        blue /= 255;
+
+        max = Math.max(red, green, blue);
+        min = Math.min(red, green, blue);
+        lightness = (max + min) / 2;
+
+        if (max === min) {
+            hue = saturation = 0; // achromatic
+        } else {
+            delta = max - min;
+            saturation = lightness > 0.5 ? delta / (2 - max - min) : delta / (max + min);
+            switch (max) {
+            case red:
+                hue = (green - blue) / delta + (green < blue ? 6 : 0);
+                break;
+            case green:
+                hue = (blue - red) / delta + 2;
+                break;
+            case blue:
+                hue = (red - green) / delta + 4;
+                break;
+            }
+            hue /= 6;
+        }
+        return [hue, saturation, lightness];
+    }
+
+    function hsbToRgb(hue, saturation, brightness) {
+        var r, g, b,
+            i = Math.floor(hue * 6),
+            f = hue * 6 - i,
+            p = brightness * (1 - saturation),
+            q = brightness * (1 - f * saturation),
+            t = brightness * (1 - (1 - f) * saturation);
+
+        switch (i % 6) {
+        case 0:
+            r = brightness;
+            g = t;
+            b = p;
+            break;
+        case 1:
+            r = q;
+            g = brightness;
+            b = p;
+            break;
+        case 2:
+            r = p;
+            g = brightness;
+            b = t;
+            break;
+        case 3:
+            r = p;
+            g = q;
+            b = brightness;
+            break;
+        case 4:
+            r = t;
+            g = p;
+            b = brightness;
+            break;
+        case 5:
+            r = brightness;
+            g = p;
+            b = q;
+            break;
+        }
+
+        return [Math.floor(r * 255), Math.floor(g * 255), Math.floor(b * 255)];
+    }
+
+    function rgbToHsb(r, g, b) {
+        var min, max, hue, saturation, brightness, delta;
+
+        r = r / 255;
+        g = g / 255;
+        b = b / 255;
+        max = Math.max(r, g, b);
+        min = Math.min(r, g, b);
+        brightness = max;
+        delta = max - min;
+        saturation = max === 0 ? 0 : delta / max;
+
+        if (max === min) {
+            hue = 0; // achromatic
+        } else {
+            switch (max) {
+            case r:
+                hue = (g - b) / delta + (g < b ? 6 : 0);
+                break;
+            case g:
+                hue = (b - r) / delta + 2;
+                break;
+            case b:
+                hue = (r - g) / delta + 4;
+                break;
+            }
+            hue /= 6;
+        }
+        return [hue, saturation, brightness];
+    }
+
+    function range(value, limit) {
+        return (value < 0 ? 0 : (value > limit ? limit : value));
+    }
+
+    function darker(color, fraction) {
+        var red = Math.floor(color.getRed() * (1 - fraction)),
+            green = Math.floor(color.getGreen() * (1 - fraction)),
+            blue = Math.floor(color.getBlue() * (1 - fraction));
+
+        red = range(red, 255);
+        green = range(green, 255);
+        blue = range(blue, 255);
+
+        return new RgbaColor(red, green, blue, color.getAlpha());
+    }
+
+    function lighter(color, fraction) {
+        var red = Math.round(color.getRed() * (1 + fraction)),
+            green = Math.round(color.getGreen() * (1 + fraction)),
+            blue = Math.round(color.getBlue() * (1 + fraction));
+
+        red = range(red, 255);
+        green = range(green, 255);
+        blue = range(blue, 255);
+
+        return new RgbaColor(red, green, blue, color.getAlpha());
+    }
+
+    function wrap(value, lower, upper) {
+        var distance, times;
+        if (upper <= lower) {
+            throw 'Rotary bounds are of negative or zero size';
+        }
+
+        distance = upper - lower;
+        times = Math.floor((value - lower) / distance);
+
+        return value - (times * distance);
+    }
+
+    function getShortestAngle(from, to) {
+        return wrap((to - from), -180, 180);
+    }
+
+    // shim layer
+    var requestAnimFrame = (function () {
+        return  window.requestAnimationFrame   ||
+            window.webkitRequestAnimationFrame ||
+            window.mozRequestAnimationFrame    ||
+            window.oRequestAnimationFrame      ||
+            window.msRequestAnimationFrame     ||
+            function (callback) {
+                window.setTimeout(callback, 1000 / 16);
+            };
+    }());
+
+    function getCanvasContext(elementOrId) {
+        var element = (typeof elementOrId === 'string' || elementOrId instanceof String) ?
+            doc.getElementById(elementOrId) : elementOrId;
+        return element.getContext('2d');
+    }
+    //****************************************   C O N S T A N T S   ***************************************************
+    var BackgroundColorDef;
+    (function () {
+        BackgroundColorDef = function (gradientStart, gradientFraction, gradientStop, labelColor, symbolColor, name) {
+            this.gradientStart = gradientStart;
+            this.gradientFraction = gradientFraction;
+            this.gradientStop = gradientStop;
+            this.labelColor = labelColor;
+            this.symbolColor = symbolColor;
+            this.name = name;
+        };
+    }());
+
+    var LcdColorDef;
+    (function () {
+        LcdColorDef = function (gradientStartColor, gradientFraction1Color, gradientFraction2Color, gradientFraction3Color, gradientStopColor, textColor) {
+            this.gradientStartColor = gradientStartColor;
+            this.gradientFraction1Color = gradientFraction1Color;
+            this.gradientFraction2Color = gradientFraction2Color;
+            this.gradientFraction3Color = gradientFraction3Color;
+            this.gradientStopColor = gradientStopColor;
+            this.textColor = textColor;
+        };
+    }());
+
+    var ColorDef;
+    (function () {
+        ColorDef = function (veryDark, dark, medium, light, lighter, veryLight) {
+            this.veryDark = veryDark;
+            this.dark = dark;
+            this.medium = medium;
+            this.light = light;
+            this.lighter = lighter;
+            this.veryLight = veryLight;
+        };
+    }());
+
+    var LedColorDef;
+    (function () {
+        LedColorDef = function (innerColor1_ON, innerColor2_ON, outerColor_ON, coronaColor, innerColor1_OFF, innerColor2_OFF, outerColor_OFF) {
+            this.innerColor1_ON = innerColor1_ON;
+            this.innerColor2_ON = innerColor2_ON;
+            this.outerColor_ON = outerColor_ON;
+            this.coronaColor = coronaColor;
+            this.innerColor1_OFF = innerColor1_OFF;
+            this.innerColor2_OFF = innerColor2_OFF;
+            this.outerColor_OFF = outerColor_OFF;
+        };
+    }());
+
+    var GaugeTypeDef;
+    (function () {
+        GaugeTypeDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var OrientationDef;
+    (function () {
+        OrientationDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var KnobTypeDef;
+    (function () {
+        KnobTypeDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var KnobStyleDef;
+    (function () {
+        KnobStyleDef = function (style) {
+            this.style = style;
+        };
+    }());
+
+    var FrameDesignDef;
+    (function () {
+        FrameDesignDef = function (design) {
+            this.design = design;
+        };
+    }());
+
+    var PointerTypeDef;
+    (function () {
+        PointerTypeDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var ForegroundTypeDef;
+    (function () {
+        ForegroundTypeDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var LabelNumberFormatDef;
+    (function () {
+        LabelNumberFormatDef = function (format) {
+            this.format = format;
+        };
+    }());
+
+    var TickLabelOrientationDef;
+    (function () {
+        TickLabelOrientationDef = function (type) {
+            this.type = type;
+        };
+    }());
+
+    var TrendStateDef;
+    (function () {
+        TrendStateDef = function (state) {
+            this.state = state;
+        };
+    }());
+
+    //*************************   I m p l e m e n t a t i o n s   o f   d e f i n i t i o n s   ************************
+    var backgroundColor = {
+        DARK_GRAY: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(153, 153, 153, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'DARK_GRAY'),
+        SATIN_GRAY: new BackgroundColorDef(new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(45, 57, 57, 1), new RgbaColor(167, 184, 180, 1), new RgbaColor(137, 154, 150, 1), 'SATIN_GRAY'),
+        LIGHT_GRAY: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'LIGHT_GRAY'),
+        WHITE: new BackgroundColorDef(new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'WHITE'),
+        BLACK: new BackgroundColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(150, 150, 150, 1), 'BLACK'),
+        BEIGE: new BackgroundColorDef(new RgbaColor(178, 172, 150, 1), new RgbaColor(204, 205, 184, 1), new RgbaColor(231, 231, 214, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BEIGE'),
+        BROWN: new BackgroundColorDef(new RgbaColor(245, 225, 193, 1), new RgbaColor(245, 225, 193, 1), new RgbaColor(255, 250, 240, 1), new RgbaColor(109, 73, 47, 1), new RgbaColor(89, 53, 27, 1), 'BROWN'),
+        RED: new BackgroundColorDef(new RgbaColor(198, 93, 95, 1), new RgbaColor(212, 132, 134, 1), new RgbaColor(242, 218, 218, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(90, 0, 0, 1), 'RED'),
+        GREEN: new BackgroundColorDef(new RgbaColor(65, 120, 40, 1), new RgbaColor(129, 171, 95, 1), new RgbaColor(218, 237, 202, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 90, 0, 1), 'GREEN'),
+        BLUE: new BackgroundColorDef(new RgbaColor(45, 83, 122, 1), new RgbaColor(115, 144, 170, 1), new RgbaColor(227, 234, 238, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(0, 0, 90, 1), 'BLUE'),
+        ANTHRACITE: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(250, 250, 250, 1), new RgbaColor(180, 180, 180, 1), 'ANTHRACITE'),
+        MUD: new BackgroundColorDef(new RgbaColor(80, 86, 82, 1), new RgbaColor(70, 76, 72, 1), new RgbaColor(57, 62, 58, 1), new RgbaColor(255, 255, 240, 1), new RgbaColor(225, 225, 210, 1), 'MUD'),
+        PUNCHED_SHEET: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'PUNCHED_SHEET'),
+        CARBON: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(180, 180, 180, 1), 'CARBON'),
+        STAINLESS: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'STAINLESS'),
+        BRUSHED_METAL: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(69, 69, 74, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_METAL'),
+        BRUSHED_STAINLESS: new BackgroundColorDef(new RgbaColor(50, 50, 54, 1), new RgbaColor(47, 47, 51, 1), new RgbaColor(110, 110, 112, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'BRUSHED_STAINLESS'),
+        TURNED: new BackgroundColorDef(new RgbaColor(130, 130, 130, 1), new RgbaColor(181, 181, 181, 1), new RgbaColor(253, 253, 253, 1), new RgbaColor(0, 0, 0, 1), new RgbaColor(80, 80, 80, 1), 'TURNED')
+    };
+
+    var lcdColor = {
+        BEIGE: new LcdColorDef('#c8c8b1', 'rgb(241, 237, 207)', 'rgb(234, 230, 194)', 'rgb(225, 220, 183)', 'rgb(237, 232, 191)', '#000000'),
+        BLUE: new LcdColorDef('#ffffff', 'rgb(231, 246, 255)', 'rgb(170, 224, 255)', 'rgb(136, 212, 255)', 'rgb(192, 232, 255)', '#124564'),
+        ORANGE: new LcdColorDef('#ffffff', 'rgb(255, 245, 225)', 'rgb(255, 217, 147)', 'rgb(255, 201, 104)', 'rgb(255, 227, 173)', '#503700'),
+        RED: new LcdColorDef('#ffffff', 'rgb(255, 225, 225)', 'rgb(253, 152, 152)', 'rgb(252, 114, 115)', 'rgb(254, 178, 178)', '#4f0c0e'),
+        YELLOW: new LcdColorDef('#ffffff', 'rgb(245, 255, 186)', 'rgb(210, 255, 0)', 'rgb(158, 205, 0)', 'rgb(210, 255, 0)', '#405300'),
+        WHITE: new LcdColorDef('#ffffff', '#ffffff', 'rgb(241, 246, 242)', 'rgb(229, 239, 244)', '#ffffff', '#000000'),
+        GRAY: new LcdColorDef('#414141', 'rgb(117, 117, 117)', 'rgb(87, 87, 87)', '#414141', 'rgb(81, 81, 81)', '#ffffff'),
+        BLACK: new LcdColorDef('#414141', '#666666', '#333333', '#000000', '#333333', '#cccccc'),
+        GREEN: new LcdColorDef('rgb(33, 67, 67)', 'rgb(33, 67, 67)', 'rgb(29, 58, 58)', 'rgb(28, 57, 57)', 'rgb(23, 46, 46)', 'rgba(0, 185, 165, 255)'),
+        BLUE2: new LcdColorDef('rgb(0, 68, 103)', 'rgb(8, 109, 165)', 'rgb(0, 72, 117)', 'rgb(0, 72, 117)', 'rgb(0, 68, 103)', 'rgb(111, 182, 228)'),
+        BLUE_BLACK: new LcdColorDef('rgb(22, 125, 212)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(3, 162, 254)', 'rgb(11, 172, 244)', '#000000'),
+        BLUE_DARKBLUE: new LcdColorDef('rgb(18, 33, 88)', 'rgb(18, 33, 88)', 'rgb(19, 30, 90)', 'rgb(17, 31, 94)', 'rgb(21, 25, 90)', 'rgb(23, 99, 221)'),
+        BLUE_GRAY: new LcdColorDef('rgb(135, 174, 255)', 'rgb(101, 159, 255)', 'rgb(44, 93, 255)', 'rgb(27, 65, 254)', 'rgb(12, 50, 255)', '#b2b4ed'),
+        STANDARD: new LcdColorDef('rgb(131, 133, 119)', 'rgb(176, 183, 167)', 'rgb(165, 174, 153)', 'rgb(166, 175, 156)', 'rgb(175, 184, 165)', 'rgb(35, 42, 52)'),
+        STANDARD_GREEN: new LcdColorDef('#ffffff', 'rgb(219, 230, 220)', 'rgb(179, 194, 178)', 'rgb(153, 176, 151)', 'rgb(114, 138, 109)', '#080C06'),
+        BLUE_BLUE: new LcdColorDef('rgb(100, 168, 253)', 'rgb(100, 168, 253)', 'rgb(95, 160, 250)', 'rgb(80, 144, 252)', 'rgb(74, 134, 255)', '#002cbb'),
+        RED_DARKRED: new LcdColorDef('rgb(72, 36, 50)', 'rgb(185, 111, 110)', 'rgb(148, 66, 72)', 'rgb(83, 19, 20)', 'rgb(7, 6, 14)', '#FE8B92'),
+        DARKBLUE: new LcdColorDef('rgb(14, 24, 31)', 'rgb(46, 105, 144)', 'rgb(19, 64, 96)', 'rgb(6, 20, 29)', 'rgb(8, 9, 10)', '#3DB3FF'),
+        LILA: new LcdColorDef('rgb(175, 164, 255)', 'rgb(188, 168, 253)', 'rgb(176, 159, 255)', 'rgb(174, 147, 252)', 'rgb(168, 136, 233)', '#076148'),
+        BLACKRED: new LcdColorDef('rgb(8, 12, 11)', 'rgb(10, 11, 13)', 'rgb(11, 10, 15)', 'rgb(7, 13, 9)', 'rgb(9, 13, 14)', '#B50026'),
+        DARKGREEN: new LcdColorDef('rgb(25, 85, 0)', 'rgb(47, 154, 0)', 'rgb(30, 101, 0)', 'rgb(30, 101, 0)', 'rgb(25, 85, 0)', '#233123'),
+        AMBER: new LcdColorDef('rgb(182, 71, 0)', 'rgb(236, 155, 25)', 'rgb(212, 93, 5)', 'rgb(212, 93, 5)', 'rgb(182, 71, 0)', '#593A0A'),
+        LIGHTBLUE: new LcdColorDef('rgb(125, 146, 184)', 'rgb(197, 212, 231)', 'rgb(138, 155, 194)', 'rgb(138, 155, 194)', 'rgb(125, 146, 184)', '#090051'),
+        SECTIONS: new LcdColorDef('#b2b2b2', '#ffffff', '#c4c4c4', '#c4c4c4', '#b2b2b2', '#000000')
+    };
+
+    var color = {
+        RED: new ColorDef(new RgbaColor(82, 0, 0, 1), new RgbaColor(158, 0, 19, 1), new RgbaColor(213, 0, 25, 1), new RgbaColor(240, 82, 88, 1), new RgbaColor(255, 171, 173, 1), new RgbaColor(255, 217, 218, 1)),
+        GREEN: new ColorDef(new RgbaColor(8, 54, 4, 1), new RgbaColor(0, 107, 14, 1), new RgbaColor(15, 148, 0, 1), new RgbaColor(121, 186, 37, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1)),
+        BLUE: new ColorDef(new RgbaColor(0, 11, 68, 1), new RgbaColor(0, 73, 135, 1), new RgbaColor(0, 108, 201, 1), new RgbaColor(0, 141, 242, 1), new RgbaColor(122, 200, 255, 1), new RgbaColor(204, 236, 255, 1)),
+        ORANGE: new ColorDef(new RgbaColor(118, 83, 30, 1), new RgbaColor(215, 67, 0, 1), new RgbaColor(240, 117, 0, 1), new RgbaColor(255, 166, 0, 1), new RgbaColor(255, 255, 128, 1), new RgbaColor(255, 247, 194, 1)),
+        YELLOW: new ColorDef(new RgbaColor(41, 41, 0, 1), new RgbaColor(102, 102, 0, 1), new RgbaColor(177, 165, 0, 1), new RgbaColor(255, 242, 0, 1), new RgbaColor(255, 250, 153, 1), new RgbaColor(255, 252, 204, 1)),
+        CYAN: new ColorDef(new RgbaColor(15, 109, 109, 1), new RgbaColor(0, 109, 144, 1), new RgbaColor(0, 144, 191, 1), new RgbaColor(0, 174, 239, 1), new RgbaColor(153, 223, 249, 1), new RgbaColor(204, 239, 252, 1)),
+        MAGENTA: new ColorDef(new RgbaColor(98, 0, 114, 1), new RgbaColor(128, 24, 72, 1), new RgbaColor(191, 36, 107, 1), new RgbaColor(255, 48, 143, 1), new RgbaColor(255, 172, 210, 1), new RgbaColor(255, 214, 23, 1)),
+        WHITE: new ColorDef(new RgbaColor(210, 210, 210, 1), new RgbaColor(220, 220, 220, 1), new RgbaColor(235, 235, 235, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1), new RgbaColor(255, 255, 255, 1)),
+        GRAY: new ColorDef(new RgbaColor(25, 25, 25, 1), new RgbaColor(51, 51, 51, 1), new RgbaColor(76, 76, 76, 1), new RgbaColor(128, 128, 128, 1), new RgbaColor(204, 204, 204, 1), new RgbaColor(243, 243, 243, 1)),
+        BLACK: new ColorDef(new RgbaColor(0, 0, 0, 1), new RgbaColor(5, 5, 5, 1), new RgbaColor(10, 10, 10, 1), new RgbaColor(15, 15, 15, 1), new RgbaColor(20, 20, 20, 1), new RgbaColor(25, 25, 25, 1)),
+        RAITH: new ColorDef(new RgbaColor(0, 32, 65, 1), new RgbaColor(0, 65, 125, 1), new RgbaColor(0, 106, 172, 1), new RgbaColor(130, 180, 214, 1), new RgbaColor(148, 203, 242, 1), new RgbaColor(191, 229, 255, 1)),
+        GREEN_LCD: new ColorDef(new RgbaColor(0, 55, 45, 1), new RgbaColor(15, 109, 93, 1), new RgbaColor(0, 185, 165, 1), new RgbaColor(48, 255, 204, 1), new RgbaColor(153, 255, 227, 1), new RgbaColor(204, 255, 241, 1)),
+        JUG_GREEN: new ColorDef(new RgbaColor(0, 56, 0, 1), new RgbaColor(32, 69, 36, 1), new RgbaColor(50, 161, 0, 1), new RgbaColor(129, 206, 0, 1), new RgbaColor(190, 231, 141, 1), new RgbaColor(234, 247, 218, 1))
+    };
+
+    var ledColor = {
+        RED_LED: new LedColorDef('#FF9A89', '#FF9A89', '#FF3300', '#FF8D70', '#7E1C00', '#7E1C00', '#641B00'),
+        GREEN_LED: new LedColorDef('#9AFF89', '#9AFF89', '#59FF2A', '#A5FF00', '#1C7E00', '#1C7E00', '#1B6400'),
+        BLUE_LED: new LedColorDef('#899AFF', '#899AFF', '#0033FF', '#708DFF', '#001C7E', '#001C7E', '#001B64'),
+        ORANGE_LED: new LedColorDef('#FEA23F', '#FEA23F', '#FD6C00', '#FD6C00', '#592800', '#592800', '#421F00'),
+        YELLOW_LED: new LedColorDef('#FFFF62', '#FFFF62', '#FFFF00', '#FFFF00', '#6B6D00', '#6B6D00', '#515300'),
+        CYAN_LED: new LedColorDef('#00FFFF', '#00FFFF', '#1BC3C3', '#00FFFF', '#083B3B', '#083B3B', '#052727'),
+        MAGENTA_LED: new LedColorDef('#D300FF', '#D300FF', '#8600CB', '#C300FF', '#38004B', '#38004B', '#280035')
+    };
+
+    var gaugeType = {
+        TYPE1: new GaugeTypeDef('type1'),
+        TYPE2: new GaugeTypeDef('type2'),
+        TYPE3: new GaugeTypeDef('type3'),
+        TYPE4: new GaugeTypeDef('type4'),
+        TYPE5: new GaugeTypeDef('type5')
+    };
+
+    var orientation = {
+        NORTH: new OrientationDef('north'),
+        SOUTH: new OrientationDef('south'),
+        EAST: new OrientationDef('east'),
+        WEST: new OrientationDef('west')
+    };
+
+    var knobType = {
+        STANDARD_KNOB: new KnobTypeDef('standardKnob'),
+        METAL_KNOB: new KnobTypeDef('metalKnob')
+    };
+
+    var knobStyle = {
+        BLACK: new KnobStyleDef('black'),
+        BRASS: new KnobStyleDef('brass'),
+        SILVER: new KnobStyleDef('silver')
+    };
+
+    var frameDesign = {
+        BLACK_METAL: new FrameDesignDef('blackMetal'),
+        METAL: new FrameDesignDef('metal'),
+        SHINY_METAL: new FrameDesignDef('shinyMetal'),
+        BRASS: new FrameDesignDef('brass'),
+        STEEL: new FrameDesignDef('steel'),
+        CHROME: new FrameDesignDef('chrome'),
+        GOLD: new FrameDesignDef('gold'),
+        ANTHRACITE: new FrameDesignDef('anthracite'),
+        TILTED_GRAY: new FrameDesignDef('tiltedGray'),
+        TILTED_BLACK: new FrameDesignDef('tiltedBlack'),
+        GLOSSY_METAL: new FrameDesignDef('glossyMetal')
+    };
+
+    var pointerType = {
+        TYPE1: new PointerTypeDef('type1'),
+        TYPE2: new PointerTypeDef('type2'),
+        TYPE3: new PointerTypeDef('type3'),
+        TYPE4: new PointerTypeDef('type4'),
+        TYPE5: new PointerTypeDef('type5'),
+        TYPE6: new PointerTypeDef('type6'),
+        TYPE7: new PointerTypeDef('type7'),
+        TYPE8: new PointerTypeDef('type8'),
+        TYPE9: new PointerTypeDef('type9'),
+        TYPE10: new PointerTypeDef('type10'),
+        TYPE11: new PointerTypeDef('type11'),
+        TYPE12: new PointerTypeDef('type12'),
+        TYPE13: new PointerTypeDef('type13'),
+        TYPE14: new PointerTypeDef('type14'),
+        TYPE15: new PointerTypeDef('type15'),
+        TYPE16: new PointerTypeDef('type16')
+    };
+
+    var foregroundType = {
+        TYPE1: new ForegroundTypeDef('type1'),
+        TYPE2: new ForegroundTypeDef('type2'),
+        TYPE3: new ForegroundTypeDef('type3'),
+        TYPE4: new ForegroundTypeDef('type4'),
+        TYPE5: new ForegroundTypeDef('type5')
+    };
+
+    var labelNumberFormat = {
+        STANDARD: new LabelNumberFormatDef('standard'),
+        FRACTIONAL: new LabelNumberFormatDef('fractional'),
+        SCIENTIFIC: new LabelNumberFormatDef('scientific')
+    };
+
+    var tickLabelOrientation = {
+        NORMAL: new TickLabelOrientationDef('normal'),
+        HORIZONTAL: new TickLabelOrientationDef('horizontal'),
+        TANGENT: new TickLabelOrientationDef('tangent')
+    };
+
+    var trendState = {
+        UP: new TrendStateDef('up'),
+        STEADY: new TrendStateDef('steady'),
+        DOWN: new TrendStateDef('down'),
+        OFF: new TrendStateDef('off')
+    };
+
+    //**********************************   E X P O R T   F U N C T I O N S   *******************************************
+    return {
+        // Components EXTERNAL : INTERNAL
+        Radial : radial,
+        RadialBargraph : radialBargraph,
+        DisplaySingle: displaySingle,
+        WindDirection : windDirection,
+        Led : led,
+        Odometer: odometer,
+
+        // Images
+        drawFrame : drawRadialFrameImage,
+        drawBackground : drawRadialBackgroundImage,
+        drawForeground : drawRadialForegroundImage,
+
+        // Tools
+        rgbaColor :  RgbaColor,
+        ConicalGradient : ConicalGradient,
+        setAlpha : setAlpha,
+        getColorFromFraction : getColorFromFraction,
+        gradientWrapper : GradientWrapper,
+
+        // Constants
+        BackgroundColor : backgroundColor,
+        LcdColor : lcdColor,
+        ColorDef : color,
+        LedColor : ledColor,
+        GaugeType : gaugeType,
+        Orientation: orientation,
+        FrameDesign : frameDesign,
+        PointerType : pointerType,
+        ForegroundType : foregroundType,
+        KnobType : knobType,
+        KnobStyle: knobStyle,
+        LabelNumberFormat: labelNumberFormat,
+        TickLabelOrientation: tickLabelOrientation,
+        TrendState: trendState,
+
+        // Other
+        Section : section
+    };
+}());
diff --git a/webfiles/lib/steelseries/scripts/src/steelseries.min.js b/webfiles/lib/steelseries/scripts/src/steelseries.min.js
new file mode 100644
index 0000000..4fe248e
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/steelseries.min.js
@@ -0,0 +1,25 @@
+/*!
+ * Name          : steelseries.js
+ * Authors       : Gerrit Grunwald, Mark Crossley
+ * Last modified : 01.12.2015
+ * Revision      : 0.14.16
+ *
+ * Copyright (c) 2011, Gerrit Grunwald, Mark Crossley
+ * All rights reserved.
+ *
+ *  Redistribution and use in source and binary forms, with or without modification, are permitted
+ *  provided that the following conditions are met:
+ *
+ *  # Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ *  # Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ *   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING,
+ *   BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *   SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ *   DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ *   INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+ *   OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+var steelseries=function(){function u(n,t){var i="#"===n.charAt(0)?n.substring(1,7):n,r=parseInt(i.substring(0,2),16),u=parseInt(i.substring(2,4),16),f=parseInt(i.substring(4,6),16);return"rgba("+r+","+u+","+f+","+t+")"}function kt(t,i,r,u,f){var c=1/255,e=t.getRed(),o=t.getGreen(),s=t.getBlue(),h=t.getAlpha(),p=i.getRed()-e,w=i.getGreen()-o,b=i.getBlue()-s,k=i.getAlpha()*c-h*c,l=p/r*u,a=w/r*u,v=b/r*u,y=k/r*u;return f=f||!1,f?[(e+l).toFixed(0),(o+a).toFixed(0),(s+v).toFixed(0),h+y]:new n((e+l).toFixed(0),(o+a).toFixed(0),(s+v).toFixed(0),h+y)}function gi(n,t,i){return{start:n,stop:t,color:i}}function k(n,t){var r=Math.floor(Math.log10(n)),i=n/Math.pow(10,r),u;return u=t?1.5>i?1:3>i?2:7>i?5:10:1>=i?1:2>=i?2:5>=i?5:10,u*Math.pow(10,r)}function dt(n,t,i,r,u,f){var e=t+r,o=i+u;n.beginPath();n.moveTo(t+f,i);n.lineTo(e-f,i);n.quadraticCurveTo(e,i,e,i+f);n.lineTo(e,i+u-f);n.quadraticCurveTo(e,o,e-f,o);n.lineTo(t+f,o);n.quadraticCurveTo(t,o,t,o-f);n.lineTo(t,i+f);n.quadraticCurveTo(t,i,t+f,i);n.closePath()}function r(n,t){var i=d.createElement("canvas");return i.width=n,i.height=t,i}function ii(n,t,i){var r=d.createElement("canvas");return r.width=n,r.height=t,i(r.getContext("2d")),r}function rt(n){var t,i=ii(1,1,function(t){t.fillStyle=n;t.beginPath();t.rect(0,0,1,1);t.fill()});return t=i.getContext("2d").getImageData(0,0,2,2).data,[t[0],t[1],t[2],t[3]]}function ei(t){var u,f,e,o,s,r=rt(t),i=new n(r[0],r[1],r[2],r[3]);return u=oi(i,.32),f=oi(i,.62),e=ri(i,.84),o=ri(i,.94),s=ri(i,1),new y(u,f,i,e,o,s)}function st(n,t,i){var r,u,f,h=Math.floor(n*6),c=n*6-h,e=i*(1-t),o=i*(1-c*t),s=i*(1-(1-c)*t);switch(h%6){case 0:r=i;u=s;f=e;break;case 1:r=o;u=i;f=e;break;case 2:r=e;u=i;f=s;break;case 3:r=e;u=o;f=i;break;case 4:r=s;u=e;f=i;break;case 5:r=i;u=e;f=o}return[Math.floor(r*255),Math.floor(u*255),Math.floor(f*255)]}function ot(n,t,i){var e,r,u,o,s,f;if(n=n/255,t=t/255,i=i/255,r=Math.max(n,t,i),e=Math.min(n,t,i),s=r,f=r-e,o=r===0?0:f/r,r===e)u=0;else{switch(r){case n:u=(t-i)/f+(t<i?6:0);break;case t:u=(i-n)/f+2;break;case i:u=(n-t)/f+4}u/=6}return[u,o,s]}function p(n,t){return n<0?0:n>t?t:n}function oi(t,i){var r=Math.floor(t.getRed()*(1-i)),u=Math.floor(t.getGreen()*(1-i)),f=Math.floor(t.getBlue()*(1-i));return r=p(r,255),u=p(u,255),f=p(f,255),new n(r,u,f,t.getAlpha())}function ri(t,i){var r=Math.round(t.getRed()*(1+i)),u=Math.round(t.getGreen()*(1+i)),f=Math.round(t.getBlue()*(1+i));return r=p(r,255),u=p(u,255),f=p(f,255),new n(r,u,f,t.getAlpha())}function nr(n,t,i){var r,u;if(i<=t)throw"Rotary bounds are of negative or zero size";return r=i-t,u=Math.floor((n-t)/r),n-u*r}function si(n,t){return nr(t-n,-180,180)}function ht(n){var t=typeof n=="string"||n instanceof String?d.getElementById(n):n;return t.getContext("2d")}var i=Math.PI*.5,t=Math.PI*2,o=Math.PI,c=Math.PI/180,pt=180/Math.PI,d=document,wt="LCDMono2Ultra,Arial,Verdana,sans-serif",s="Arial,Verdana,sans-serif",hi=function(n,u){var yi;u=u||{};var vt=undefined===u.gaugeType?steelseries.GaugeType.TYPE4:u.gaugeType,f=undefined===u.size?0:u.size,h=undefined===u.minValue?0:u.minValue,b=undefined===u.maxValue?h+100:u.maxValue,ve=undefined===u.niceScale?!0:u.niceScale,gt=undefined===u.threshold?(b-h)/2+h:u.threshold,ti=undefined===u.thresholdRising?!0:u.thresholdRising,ci=undefined===u.section?null:u.section,li=undefined===u.area?null:u.area,vu=undefined===u.titleString?"":u.titleString,yu=undefined===u.unitString?"":u.unitString,pu=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,wu=undefined===u.frameVisible?!0:u.frameVisible,ai=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,bu=undefined===u.backgroundVisible?!0:u.backgroundVisible,oi=undefined===u.pointerType?steelseries.PointerType.TYPE1:u.pointerType,ku=undefined===u.pointerColor?steelseries.ColorDef.RED:u.pointerColor,ye=undefined===u.knobType?steelseries.KnobType.STANDARD_KNOB:u.knobType,vi=undefined===u.knobStyle?steelseries.KnobStyle.SILVER:u.knobStyle,di=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,iu=undefined===u.lcdVisible?!0:u.lcdVisible,du=undefined===u.lcdDecimals?2:u.lcdDecimals,pe=undefined===u.digitalFont?!1:u.digitalFont,gu=undefined===u.fractionalScaleDecimals?1:u.fractionalScaleDecimals,ru=undefined===u.ledColor?steelseries.LedColor.RED_LED:u.ledColor,uu=undefined===u.ledVisible?!0:u.ledVisible,fu=undefined===u.userLedColor?steelseries.LedColor.GREEN_LED:u.userLedColor,eu=undefined===u.userLedVisible?!1:u.userLedVisible,nf=undefined===u.thresholdVisible?!0:u.thresholdVisible,ou=undefined===u.minMeasuredValueVisible?!1:u.minMeasuredValueVisible,su=undefined===u.maxMeasuredValueVisible?!1:u.maxMeasuredValueVisible,tf=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,rf=undefined===u.foregroundVisible?!0:u.foregroundVisible,uf=undefined===u.labelNumberFormat?steelseries.LabelNumberFormat.STANDARD:u.labelNumberFormat,rr=undefined===u.playAlarm?!1:u.playAlarm,ff=undefined===u.alarmSound?!1:u.alarmSound,we=undefined===u.customLayer?null:u.customLayer,be=undefined===u.tickLabelOrientation?vt===steelseries.GaugeType.TYPE1?steelseries.TickLabelOrientation.TANGENT:steelseries.TickLabelOrientation.NORMAL:u.tickLabelOrientation,hu=undefined===u.trendVisible?!1:u.trendVisible,lr=undefined===u.trendColors?[steelseries.LedColor.RED_LED,steelseries.LedColor.GREEN_LED,steelseries.LedColor.CYAN_LED]:u.trendColors,ar=undefined===u.useOdometer?!1:u.useOdometer,si=undefined===u.odometerParams?{}:u.odometerParams,ke=undefined===u.odometerUseValue?!1:u.odometerUseValue,ef=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,e=ht(n);f===0&&(f=Math.min(e.canvas.width,e.canvas.height));e.canvas.width=f;e.canvas.height=f;rr&&ff!==!1&&(yi=d.createElement("audio"),yi.setAttribute("src",ff),yi.setAttribute("preload","auto"));var p=h,vr=h,of=this,pi=b,wi=h,ut=!1,yr=!1,sf=0,cu=0,bi,ki=!1,hf=steelseries.TrendState.OFF,pr=f*.06,wr=f*.29,br=f*.36,gi,yt,kr,pt,kt,lu=yt+(p-h)*kt,y=f,rt=f,st=y/2,lt=rt/2,ii=f*.093457,de=.6*y,ge=.4*rt,no=vt===steelseries.GaugeType.TYPE3?.6*y:st-ii/2,to=vt===steelseries.GaugeType.TYPE3?.72*rt:.75*rt,au=Math.floor(y/10),io=au+"px "+s,ro=au+"px "+wt,cf=rt*.13,ur=y*.4,lf=(y-ur)/2,af=rt*.57,vf,uo=rt*.61,yf=y*.006,pf=!1,dr=h,gr=b,fr=b-h,ri=gr-dr,nu=0,ui=0,nr=10,wf=10,fo=function(){ve?(fr=k(b-h,!1),ui=k(fr/(wf-1),!0),dr=Math.floor(h/ui)*ui,gr=Math.ceil(b/ui)*ui,nu=k(ui/(nr-1),!0),h=dr,b=gr,ri=b-h):(fr=b-h,dr=h,gr=b,ri=fr,ui=k(fr/(wf-1),!0),nu=k(ui/(nr-1),!0));switch(vt.type){case"type1":gi=0;yt=o;kr=i;pt=i;kt=pt/ri;break;case"type2":gi=0;yt=o;kr=i;pt=o;kt=pt/ri;break;case"type3":gi=0;yt=i;kr=0;pt=1.5*o;kt=pt/ri;break;case"type4":default:gi=60*c;yt=i+gi/2;kr=0;pt=t-gi;kt=pt/ri}lu=yt+(p-h)*kt},er=r(f,f),bf=er.getContext("2d"),or=r(f,f),at=or.getContext("2d"),kf,tr=r(ii,ii),df=tr.getContext("2d"),hi=r(ii,ii),gf=hi.getContext("2d"),ir=hi,ei=r(ii,ii),ne=ei.getContext("2d"),ni=r(ii,ii),te=ni.getContext("2d"),dt=ni,ie=r(Math.ceil(f*.028037),Math.ceil(f*.028037)),eo=ie.getContext("2d"),re=r(Math.ceil(f*.028037),Math.ceil(f*.028037)),oo=re.getContext("2d"),sr=r(f,f),ue=sr.getContext("2d"),hr=r(f,f),fe=hr.getContext("2d"),ee,oe,se,he,ce,tu,le;ar&&iu&&(tu=r(10,10),le=tu.getContext("2d"));var so=function(n,t){n.restore();n.save();n.textAlign="right";n.strokeStyle=di.textColor;n.fillStyle=di.textColor;(di===steelseries.LcdColor.STANDARD||di===steelseries.LcdColor.STANDARD_GREEN)&&(n.shadowColor="gray",n.shadowOffsetX=y*.007,n.shadowOffsetY=y*.007,n.shadowBlur=y*.007);n.font=pe?ro:io;n.fillText(t.toFixed(du),lf+ur-ur*.05,af+cf*.5+au*.38,ur*.9);n.restore()},ho=function(n){n.save();"type1"===vt.type&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.523364,rt*.130841);("type1"===vt.type||"type2"===vt.type)&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.130841,rt*.514018);("type2"===vt.type||"type3"===vt.type)&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.831775,rt*.514018);"type3"===vt.type&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.523364,rt*.831775);"type4"===vt.type&&(n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.336448,rt*.803738),n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.626168,rt*.803738));n.restore()},co=function(){var t=d.createElement("canvas"),n,i;return t.width=Math.ceil(f*.046728),t.height=Math.ceil(t.width*.9),n=t.getContext("2d"),n.save(),i=n.createLinearGradient(0,.1,0,t.height*.9),i.addColorStop(0,"#520000"),i.addColorStop(.3,"#fc1d00"),i.addColorStop(.59,"#fc1d00"),i.addColorStop(1,"#520000"),n.fillStyle=i,n.beginPath(),n.moveTo(t.width*.5,.1),n.lineTo(t.width*.9,t.height*.9),n.lineTo(t.width*.1,t.height*.9),n.lineTo(t.width*.5,.1),n.closePath(),n.fill(),n.strokeStyle="#FFFFFF",n.stroke(),n.restore(),t},ae=function(n,t,i,r,u){if(t<h?t=h:t>b&&(t=b),i<h?i=h:i>b&&(i=b),!(t>=i)){n.save();n.strokeStyle=r;n.fillStyle=r;n.lineWidth=y*.035;var f=pt/ri*t-pt/ri*h,e=f+(i-t)/(ri/pt);n.translate(st,lt);n.rotate(yt);n.beginPath();u?(n.moveTo(0,0),n.arc(0,0,y*.365-n.lineWidth/2,f,e,!1)):n.arc(0,0,y*.365,f,e,!1);u?(n.moveTo(0,0),n.fill()):n.stroke();n.translate(-st,-lt);n.restore()}},lo=function(n,t){var w=Math.ceil(y*.04),f=yt,r=kt*nu,u,e=h,c=nr-1,a=y*.38,k=y*.35,d=y*.355,g=y*.36,p=y*.3,l=y*.1,nt=nr/2,tt=parseFloat(b.toFixed(2)),v;for(ai.labelColor.setAlpha(1),n.save(),n.textAlign="center",n.textBaseline="middle",n.font=w+"px "+s,n.strokeStyle=ai.labelColor.getRgbaColor(),n.fillStyle=ai.labelColor.getRgbaColor(),n.translate(st,lt),n.rotate(yt),(vt.type==="type1"||vt.type==="type2")&&(l=y*.04),v=h;parseFloat(v.toFixed(2))<=tt;v+=nu){if(u=r+i,c++,c===nr){n.lineWidth=1.5;n.beginPath();n.moveTo(a,0);n.lineTo(k,0);n.closePath();n.stroke();n.save();n.translate(p,0);switch(be.type){case"horizontal":u=-f;break;case"tangent":u=f<=i+o?o:0;break;case"normal":default:u=i}n.rotate(u);switch(t.format){case"fractional":n.fillText(e.toFixed(gu),0,0,l);break;case"scientific":n.fillText(e.toPrecision(2),0,0,l);break;case"standard":default:n.fillText(e.toFixed(0),0,0,l)}n.translate(-p,0);n.restore();e+=ui;c=0;n.rotate(r);f+=r;continue}0==nr%2&&c===nt?(n.lineWidth=1,n.beginPath(),n.moveTo(a,0),n.lineTo(d,0),n.closePath(),n.stroke()):(n.lineWidth=.5,n.beginPath(),n.moveTo(a,0),n.lineTo(g,0),n.closePath(),n.stroke());n.rotate(r);f+=r}n.translate(-st,-lt);n.restore()},ot=function(n){var t,r,e;n=n||{};var o=undefined===n.frame?!1:n.frame,u=undefined===n.background?!1:n.background,s=undefined===n.led?!1:n.led,c=undefined===n.userLed?!1:n.userLed,l=undefined===n.pointer?!1:n.pointer,v=undefined===n.foreground?!1:n.foreground,b=undefined===n.trend?!1:n.trend,k=undefined===n.odo?!1:n.odo;if(pf=!0,fo(),o&&wu&&g(bf,pu,st,lt,y,rt),u&&bu&&(nt(at,ai,st,lt,y,rt),bt(at,we,st,lt,y,rt)),s&&(df.drawImage(a(Math.ceil(f*.093457),1,ru),0,0),gf.drawImage(a(Math.ceil(f*.093457),0,ru),0,0)),c&&(ne.drawImage(a(Math.ceil(f*.093457),1,fu),0,0),te.drawImage(a(Math.ceil(f*.093457),0,fu),0,0)),ou&&eo.drawImage(et(Math.ceil(f*.028037),steelseries.ColorDef.BLUE.dark.getRgbaColor(),!0,!0),0,0),su&&oo.drawImage(et(Math.ceil(f*.028037),steelseries.ColorDef.RED.medium.getRgbaColor(),!0),0,0),u&&bu){if(ho(at),null!==ci&&0<ci.length){t=ci.length;do t--,ae(at,ci[t].start,ci[t].stop,ci[t].color,!1);while(0<t)}if(null!==li&&0<li.length){r=li.length;do r--,ae(at,li[r].start,li[r].stop,li[r].color,!0);while(0<r)}lo(at,uf);fi(at,y,rt,vu,yu,ai,!0,!0)}u&&nf&&(at.save(),at.translate(st,lt),at.rotate(yt+(gt-h)*kt+i),at.translate(-st,-lt),at.drawImage(co(),y*.475,rt*.13),at.translate(st,lt),at.restore());u&&iu&&(ar&&k?(ce=new steelseries.Odometer("",{_context:le,height:f*.075,decimals:si.decimals,digits:si.digits===undefined?5:si.digits,valueForeColor:si.valueForeColor,valueBackColor:si.valueBackColor,decimalForeColor:si.decimalForeColor,decimalBackColor:si.decimalBackColor,font:si.font,value:p}),vf=(y-tu.width)/2):ar||(kf=it(ur,cf,di),at.drawImage(kf,lf,af)));l&&ft(ue,y,oi,ku,ai.labelColor);v&&rf&&(e=oi.type==="type15"||oi.type==="type16"?!1:!0,tt(fe,tf,y,rt,e,ye,vi,vt));b&&hu&&(ee=w(pr,steelseries.TrendState.UP,lr),oe=w(pr,steelseries.TrendState.STEADY,lr),se=w(pr,steelseries.TrendState.DOWN,lr),he=w(pr,steelseries.TrendState.OFF,lr))},ct=function(n){n=n||{};var t=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,r=undefined===n.led?!1:n.led,u=undefined===n.userLed?!1:n.userLed,e=undefined===n.pointer?!1:n.pointer,o=undefined===n.foreground?!1:n.foreground;t&&(er.width=f,er.height=f,bf=er.getContext("2d"));i&&(or.width=f,or.height=f,at=or.getContext("2d"));r&&(tr.width=Math.ceil(f*.093457),tr.height=Math.ceil(f*.093457),df=tr.getContext("2d"),hi.width=Math.ceil(f*.093457),hi.height=Math.ceil(f*.093457),gf=hi.getContext("2d"),ir=hi);u&&(ei.width=Math.ceil(f*.093457),ei.height=Math.ceil(f*.093457),ne=ei.getContext("2d"),ni.width=Math.ceil(f*.093457),ni.height=Math.ceil(f*.093457),te=ni.getContext("2d"),dt=ni);e&&(sr.width=f,sr.height=f,ue=sr.getContext("2d"));o&&(hr.width=f,hr.height=f,fe=hr.getContext("2d"))},ao=function(){uu&&(ir=ir===tr?hi:tr,ki||(ki=!0,v(of.repaint)))},vo=function(){eu&&(dt=dt===ei?ni:ei,ki||(ki=!0,v(of.repaint)))},cr=function(n){n?sf=setInterval(ao,1e3):(clearInterval(sf),ir=hi)},yo=function(n){n?cu=setInterval(vo,1e3):(clearInterval(cu),dt=ni)};return this.setValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return p!==t&&(p=t,p>wi&&(wi=p),p<pi&&(pi=p),p>=gt&&!ut&&ti||p<=gt&&!ut&&!ti?(ut=!0,cr(ut),rr&&yi.play()):(p<gt&&ut&&ti||p>gt&&ut&&!ti)&&(ut=!1,cr(ut),rr&&yi.pause()),this.repaint()),this},this.getValue=function(){return p},this.setOdoValue=function(n){n=parseFloat(n);var t=n<0?0:n;return vr!==t&&(vr=t,this.repaint()),this},this.getOdoValue=function(){return vr},this.setValueAnimated=function(n,t){n=parseFloat(n);var r=n<h?h:n>b?b:n,u=this,i;return p!==r&&(undefined!==bi&&bi.isPlaying&&bi.stop(),i=ef*Math.abs(r-p)/(b-h),i=Math.max(i,ef/5),bi=new Tween({},"",Tween.regularEaseInOut,p,r,i),bi.onMotionChanged=function(n){p=n.target._pos;p>=gt&&!ut&&ti||p<=gt&&!ut&&!ti?(ut=!0,cr(ut),rr&&yi.play()):(p<gt&&ut&&ti||p>gt&&ut&&!ti)&&(ut=!1,cr(ut),rr&&yi.pause());p>wi&&(wi=p);p<pi&&(pi=p);ki||(ki=!0,v(u.repaint))},t&&typeof t=="function"&&(bi.onMotionFinished=t),bi.start()),this},this.resetMinMeasuredValue=function(){pi=p;this.repaint()},this.resetMaxMeasuredValue=function(){return wi=p,this.repaint(),this},this.setMinMeasuredValueVisible=function(n){return ou=!!n,this.repaint(),this},this.setMaxMeasuredValueVisible=function(n){return su=!!n,this.repaint(),this},this.setMaxMeasuredValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return wi=t,this.repaint(),this},this.setMinMeasuredValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return pi=t,this.repaint(),this},this.setTitleString=function(n){return vu=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setUnitString=function(n){return yu=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setMinValue=function(n){return h=parseFloat(n),ct({frame:!0,background:!0}),ot({frame:!0,background:!0}),this.repaint(),this},this.getMinValue=function(){return h},this.setMaxValue=function(n){return b=parseFloat(n),ct({frame:!0,background:!0}),ot({frame:!0,background:!0}),this.repaint(),this},this.getMaxValue=function(){return b},this.setThreshold=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return gt=t,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setArea=function(n){return li=n,ct({background:!0,foreground:!0}),ot({background:!0,foreground:!0}),this.repaint(),this},this.setSection=function(n){return ci=n,ct({background:!0,foreground:!0}),ot({background:!0,foreground:!0}),this.repaint(),this},this.setThresholdVisible=function(n){return nf=!!n,this.repaint(),this},this.setThresholdRising=function(n){return ti=!!n,ut=!ut,cr(ut),this.repaint(),this},this.setLcdDecimals=function(n){return du=parseInt(n,10),this.repaint(),this},this.setFrameDesign=function(n){return ct({frame:!0}),pu=n,ot({frame:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return ct({background:!0,pointer:oi.type==="type2"||oi.type==="type13"?!0:!1}),ai=n,ot({background:!0,pointer:oi.type==="type2"||oi.type==="type13"?!0:!1}),this.repaint(),this},this.setForegroundType=function(n){return ct({foreground:!0}),tf=n,ot({foreground:!0}),this.repaint(),this},this.setPointerType=function(n){return ct({pointer:!0,foreground:!0}),oi=n,ot({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointerColor=function(n){return ct({pointer:!0}),ku=n,ot({pointer:!0}),this.repaint(),this},this.setLedColor=function(n){return ct({led:!0}),ru=n,ot({led:!0}),this.repaint(),this},this.setUserLedColor=function(n){return ct({userLed:!0}),fu=n,ot({userLed:!0}),this.repaint(),this},this.toggleUserLed=function(){return dt=dt===ei?ni:ei,this.repaint(),this},this.setUserLedOnOff=function(n){return dt=!0===n?ei:ni,this.repaint(),this},this.blinkUserLed=function(n){return n?yr||(yo(!0),yr=!0):yr&&(clearInterval(cu),yr=!1),this},this.setLedVisible=function(n){return uu=!!n,this.repaint(),this},this.setUserLedVisible=function(n){return eu=!!n,this.repaint(),this},this.setLcdColor=function(n){return di=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setTrend=function(n){return hf=n,this.repaint(),this},this.setTrendVisible=function(n){return hu=!!n,this.repaint(),this},this.setFractionalScaleDecimals=function(n){return gu=parseInt(n,10),ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setLabelNumberFormat=function(n){return uf=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.repaint=function(){if(pf||ot({frame:!0,background:!0,led:!0,userLed:!0,pointer:!0,trend:!0,foreground:!0,odo:!0}),e.clearRect(0,0,f,f),wu&&e.drawImage(er,0,0),e.drawImage(or,0,0),iu&&(ar?(ce.setValue(ke?p:vr),e.drawImage(tu,vf,uo)):so(e,p)),uu&&e.drawImage(ir,de,ge),eu&&e.drawImage(dt,no,to),hu)switch(hf.state){case"up":e.drawImage(ee,wr,br);break;case"steady":e.drawImage(oe,wr,br);break;case"down":e.drawImage(se,wr,br);break;case"off":e.drawImage(he,wr,br)}ou&&(e.save(),e.translate(st,lt),e.rotate(yt+i+(pi-h)*kt),e.translate(-st,-lt),e.drawImage(ie,e.canvas.width*.4865,e.canvas.height*.105),e.restore());su&&(e.save(),e.translate(st,lt),e.rotate(yt+i+(wi-h)*kt),e.translate(-st,-lt),e.drawImage(re,e.canvas.width*.4865,e.canvas.height*.105),e.restore());lu=yt+i+(p-h)*kt;e.save();e.translate(st,lt);e.rotate(lu);e.translate(-st,-lt);e.shadowColor="rgba(0, 0, 0, 0.8)";e.shadowOffsetX=e.shadowOffsetY=yf;e.shadowBlur=yf*2;e.drawImage(sr,0,0);e.restore();rf&&e.drawImage(hr,0,0);ki=!1},this.repaint(),this},ci=function(n,u){var li;u=u||{};var hi=undefined===u.gaugeType?steelseries.GaugeType.TYPE4:u.gaugeType,h=undefined===u.size?0:u.size,f=undefined===u.minValue?0:u.minValue,l=undefined===u.maxValue?f+100:u.maxValue,re=undefined===u.niceScale?!0:u.niceScale,gt=undefined===u.threshold?(l-f)/2+f:u.threshold,ni=undefined===u.thresholdRising?!0:u.thresholdRising,ci=undefined===u.section?null:u.section,su=undefined===u.useSectionColors?!1:u.useSectionColors,hu=undefined===u.titleString?"":u.titleString,cu=undefined===u.unitString?"":u.unitString,lu=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,au=undefined===u.frameVisible?!0:u.frameVisible,yi=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,vu=undefined===u.backgroundVisible?!0:u.backgroundVisible,sr=undefined===u.valueColor?steelseries.ColorDef.RED:u.valueColor,pi=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,yu=undefined===u.lcdVisible?!0:u.lcdVisible,pu=undefined===u.lcdDecimals?2:u.lcdDecimals,ue=undefined===u.digitalFont?!1:u.digitalFont,wu=undefined===u.fractionalScaleDecimals?1:u.fractionalScaleDecimals,fe=undefined===u.customLayer?null:u.customLayer,dr=undefined===u.ledColor?steelseries.LedColor.RED_LED:u.ledColor,gr=undefined===u.ledVisible?!0:u.ledVisible,nu=undefined===u.userLedColor?steelseries.LedColor.GREEN_LED:u.userLedColor,tu=undefined===u.userLedVisible?!1:u.userLedVisible,bu=undefined===u.labelNumberFormat?steelseries.LabelNumberFormat.STANDARD:u.labelNumberFormat,ku=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,du=undefined===u.foregroundVisible?!0:u.foregroundVisible,gi=undefined===u.playAlarm?!1:u.playAlarm,gu=undefined===u.alarmSound?!1:u.alarmSound,nr=undefined===u.valueGradient?null:u.valueGradient,nf=undefined===u.useValueGradient?!1:u.useValueGradient,ee=undefined===u.tickLabelOrientation?hi===steelseries.GaugeType.TYPE1?steelseries.TickLabelOrientation.TANGENT:steelseries.TickLabelOrientation.NORMAL:u.tickLabelOrientation,iu=undefined===u.trendVisible?!1:u.trendVisible,hr=undefined===u.trendColors?[steelseries.LedColor.RED_LED,steelseries.LedColor.GREEN_LED,steelseries.LedColor.CYAN_LED]:u.trendColors,tf=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,p=ht(n);h===0&&(h=Math.min(p.canvas.width,p.canvas.height));p.canvas.width=h;p.canvas.height=h;gi&&gu!==!1&&(li=d.createElement("audio"),li.setAttribute("src",gu),li.setAttribute("preload","auto"));var ft=f,vt=l-f,rt=!1,rf=0,cr=!1,ru=0,ai,uf=this,vi=!1,at,ot,wi,ui,b,ti,kt,oe,bi=[],lr=!1,uu=!1,e=h,st=h,et=e/2,ct=st/2,fu=Math.floor(e/10),se=fu+"px "+s,he=fu+"px "+wt,eu=st*.13,tr=e*.4,ff=(e-tr)/2,ef=st/2-eu/2,ce=e*.116822,le=e*.485981,y=Math.ceil(h*.093457),of=e*.53,sf=st*.61,ae=hi===steelseries.GaugeType.TYPE3?.7*e:et-y/2,ve=hi===steelseries.GaugeType.TYPE3?.61*st:.75*st,hf=steelseries.TrendState.OFF,ar=h*.06,vr=h*.38,yr=h*.57;switch(hi.type){case"type1":at=0;ot=o;wi=0;ui=i;b=i;ti=b*pt;kt=b/vt;break;case"type2":at=0;ot=o;wi=0;ui=i;b=o;ti=b*pt;kt=b/vt;break;case"type3":at=0;ot=i;wi=-i;ui=0;b=1.5*o;ti=b*pt;kt=b/vt;break;case"type4":default:at=60*c;ot=i+at/2;wi=-t/6;ui=0;b=t-at;ti=b*pt;kt=b/vt}var ir=r(h,h),cf=ir.getContext("2d"),rr=r(h,h),oi=rr.getContext("2d"),lf,ur=r(Math.ceil(h*.060747),Math.ceil(h*.023364)),ou=ur.getContext("2d"),ki=r(y,y),af=ki.getContext("2d"),si=r(y,y),vf=si.getContext("2d"),di=si,ii=r(y,y),yf=ii.getContext("2d"),dt=r(y,y),pf=dt.getContext("2d"),yt=dt,ye,fr=r(h,h),wf=fr.getContext("2d"),bf,kf,df,gf,ne=!1,pr=f,wr=l,er=l-f;vt=wr-pr;var br=0,ri=0,kr=10,te=10,pe=function(){re?(er=k(l-f,!1),ri=k(er/(te-1),!0),pr=Math.floor(f/ri)*ri,wr=Math.ceil(l/ri)*ri,br=k(ri/(kr-1),!0),f=pr,l=wr,vt=l-f):(er=l-f,pr=f,wr=l,vt=er,ri=k(er/(te-1),!0),br=k(ri/(kr-1),!0));switch(hi.type){case"type1":at=0;ot=o;ui=i;b=i;kt=b/vt;break;case"type2":at=0;ot=o;ui=i;b=o;kt=b/vt;break;case"type3":at=0;ot=i;ui=0;b=1.5*o;kt=b/vt;break;case"type4":default:at=60*c;ot=i+at/2;ui=0;b=t-at;kt=b/vt}oe=ot+(ft-f)*kt},ut=function(n){var t;n=n||{};var r=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,u=undefined===n.led?!1:n.led,o=undefined===n.userLed?!1:n.userLed,s=undefined===n.value?!1:n.value,h=undefined===n.foreground?!1:n.foreground,c=undefined===n.trend?!1:n.trend;if(ne=!0,pe(),r&&au&&g(cf,lu,et,ct,e,st),i&&vu&&(nt(oi,yi,et,ct,e,st),bt(oi,fe,et,ct,e,st)),u&&(af.drawImage(a(y,1,dr),0,0),vf.drawImage(a(y,0,dr),0,0),ye=oi.getImageData(of,sf,y,y)),o&&(yf.drawImage(a(Math.ceil(y),1,nu),0,0),pf.drawImage(a(Math.ceil(y),0,nu),0,0)),i&&we(oi),i&&vu&&(ke(oi,bu),fi(oi,e,st,hu,cu,yi,!0,!0)),i&&yu&&(lf=it(tr,eu,pi),oi.drawImage(lf,ff,ef)),lr=!1,su&&null!==ci&&0<ci.length){lr=!0;t=ci.length;bi=[];do t--,bi.push({start:(ci[t].start+Math.abs(f))/(l-f)*ti,stop:(ci[t].stop+Math.abs(f))/(l-f)*ti,color:ei(ci[t].color)});while(0<t)}uu=!1;nf&&nr!==null&&(lr=!1,uu=!0);s&&ie(ou,sr);h&&du&&tt(wf,ku,e,st,!1);c&&iu&&(bf=w(ar,steelseries.TrendState.UP,hr),kf=w(ar,steelseries.TrendState.STEADY,hr),df=w(ar,steelseries.TrendState.DOWN,hr),gf=w(ar,steelseries.TrendState.OFF,hr))},lt=function(n){n=n||{};var t=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,r=undefined===n.led?!1:n.led,u=undefined===n.userLed?!1:n.userLed,f=undefined===n.value?!1:n.value,e=undefined===n.foreground?!1:n.foreground;t&&(ir.width=h,ir.height=h,cf=ir.getContext("2d"));i&&(rr.width=h,rr.height=h,oi=rr.getContext("2d"));f&&(ur.width=Math.ceil(h*.060747),ur.height=Math.ceil(h*.023364),ou=ur.getContext("2d"));r&&(ki.width=Math.ceil(y),ki.height=Math.ceil(y),af=ki.getContext("2d"),si.width=Math.ceil(y),si.height=Math.ceil(y),vf=si.getContext("2d"),di=si);u&&(ii.width=Math.ceil(y),ii.height=Math.ceil(y),yf=ii.getContext("2d"),dt.width=Math.ceil(y),dt.height=Math.ceil(y),pf=dt.getContext("2d"),yt=dt);e&&(fr.width=h,fr.height=h,wf=fr.getContext("2d"))},we=function(n){var t,r,i;n.save();n.save();n.lineWidth=h*.085;n.beginPath();n.translate(et,ct);n.rotate(ot-4*c);n.translate(-et,-ct);n.arc(et,ct,e*.35514,0,b+8*c,!1);n.rotate(-ot);t=n.createLinearGradient(0,.107476*st,0,.897195*st);t.addColorStop(0,"#000000");t.addColorStop(.22,"#333333");t.addColorStop(.76,"#333333");t.addColorStop(1,"#cccccc");n.strokeStyle=t;n.stroke();n.restore();n.save();n.lineWidth=h*.075;n.beginPath();n.translate(et,ct);n.rotate(ot-4*c);n.translate(-et,-ct);n.arc(et,ct,e*.35514,0,b+8*c,!1);n.rotate(-ot);r=n.createLinearGradient(0,.112149*st,0,.892523*st);r.addColorStop(0,"#111111");r.addColorStop(1,"#333333");n.strokeStyle=r;n.stroke();n.restore();var f=(e*.116822+e*.060747)/2,o=(e*.485981+e*.023364)/2,u=n.createRadialGradient(f,o,0,f,o,.030373*e);for(u.addColorStop(0,"#3c3c3c"),u.addColorStop(1,"#323232"),i=0,i=0;i<=ti;i+=5)n.save(),n.translate(et,ct),n.rotate(i*c+wi),n.translate(-et,-ct),n.beginPath(),n.rect(e*.116822,e*.485981,e*.060747,e*.023364),n.closePath(),n.fillStyle=u,n.fill(),n.restore();n.restore()},ie=function(n,t){n.save();n.beginPath();n.rect(0,0,n.canvas.width,n.canvas.height);n.closePath();var r=n.canvas.width/2,u=n.canvas.height/2,i=p.createRadialGradient(r,u,0,r,u,n.canvas.width/2);i.addColorStop(0,t.light.getRgbaColor());i.addColorStop(1,t.dark.getRgbaColor());n.fillStyle=i;n.fill();n.restore()},be=function(n,t){n.save();n.textAlign="right";n.strokeStyle=pi.textColor;n.fillStyle=pi.textColor;(pi===steelseries.LcdColor.STANDARD||pi===steelseries.LcdColor.STANDARD_GREEN)&&(n.shadowColor="gray",n.shadowOffsetX=e*.007,n.shadowOffsetY=e*.007,n.shadowBlur=e*.007);n.font=ue?he:se;n.fillText(t.toFixed(pu),ff+tr-tr*.05,ef+eu*.5+fu*.38,tr*.9);n.restore()},ke=function(n,t){var h=ot,r=kt*br,u,w=Math.ceil(e*.04),c=f,v=kr-1,p=e*.28,a=e*.1,b=parseFloat(l.toFixed(2)),y;for(yi.labelColor.setAlpha(1),n.save(),n.textAlign="center",n.textBaseline="middle",n.font=w+"px "+s,n.strokeStyle=yi.labelColor.getRgbaColor(),n.fillStyle=yi.labelColor.getRgbaColor(),n.translate(et,ct),n.rotate(ot),(hi.type==="type1"||hi.type==="type2")&&(a=e*.0375),y=f;parseFloat(y.toFixed(2))<=b;y+=br){if(u=+r+i,v++,v===kr){n.save();n.translate(p,0);switch(ee.type){case"horizontal":u=-h;break;case"tangent":u=h<=i+o?o:0;break;case"normal":default:u=i}n.rotate(u);switch(t.format){case"fractional":n.fillText(c.toFixed(wu),0,0,a);break;case"scientific":n.fillText(c.toPrecision(2),0,0,a);break;case"standard":default:n.fillText(c.toFixed(0),0,0,a)}n.translate(-p,0);n.restore();c+=ri;v=0;n.rotate(r);h+=r;continue}n.rotate(r);h+=r}n.translate(-et,-ct);n.restore()},or=function(n){n?rf=setInterval(ge,1e3):(clearInterval(rf),di=si)},de=function(n){n?ru=setInterval(no,1e3):(clearInterval(ru),yt=dt)},ge=function(){gr&&(di=di===ki?si:ki,vi||(vi=!0,v(uf.repaint)))},no=function(){tu&&(yt=yt===ii?dt:ii,vi||(vi=!0,v(uf.repaint)))};return this.setValue=function(n){n=parseFloat(n);var t=n<f?f:n>l?l:n;return ft!==t&&(ft=t,ft>=gt&&!rt&&ni||ft<=gt&&!rt&&!ni?(rt=!0,or(rt),gi&&li.play()):(ft<gt&&rt&&ni||ft>gt&&rt&&!ni)&&(rt=!1,or(rt),gi&&li.pause()),this.repaint()),this},this.getValue=function(){return ft},this.setValueAnimated=function(n,t){n=parseFloat(n);var r=n<f?f:n>l?l:n,u=this,i;return ft!==r&&(undefined!==ai&&ai.isPlaying&&ai.stop(),i=tf*Math.abs(r-ft)/(l-f),i=Math.max(i,tf/5),ai=new Tween({},"",Tween.regularEaseInOut,ft,r,i),ai.onMotionChanged=function(n){ft=n.target._pos;ft>=gt&&!rt&&ni||ft<=gt&&!rt&&!ni?(rt=!0,or(rt),gi&&li.play()):(ft<gt&&rt&&ni||ft>gt&&rt&&!ni)&&(rt=!1,or(rt),gi&&li.pause());vi||(vi=!0,v(u.repaint))},t&&typeof t=="function"&&(ai.onMotionFinished=t),ai.start()),this},this.setFrameDesign=function(n){return lt({frame:!0}),lu=n,ut({frame:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return lt({background:!0,led:!0}),yi=n,ut({background:!0,led:!0}),this.repaint(),this},this.setForegroundType=function(n){return lt({foreground:!0}),ku=n,ut({foreground:!0}),this.repaint(),this},this.setValueColor=function(n){return lt({value:!0}),sr=n,ut({value:!0}),this.repaint(),this},this.setLedColor=function(n){return lt({led:!0}),dr=n,ut({led:!0}),this.repaint(),this},this.setUserLedColor=function(n){return lt({userLed:!0}),nu=n,ut({userLed:!0}),this.repaint(),this},this.toggleUserLed=function(){return yt=yt===ii?dt:ii,this.repaint(),this},this.setUserLedOnOff=function(n){return yt=!0===n?ii:dt,this.repaint(),this},this.blinkUserLed=function(n){return n?cr||(de(!0),cr=!0):cr&&(clearInterval(ru),cr=!1),this},this.setLedVisible=function(n){return gr=!!n,this.repaint(),this},this.setUserLedVisible=function(n){return tu=!!n,this.repaint(),this},this.setLcdColor=function(n){return pi=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setLcdDecimals=function(n){return pu=parseInt(n,10),this.repaint(),this},this.setSection=function(n){return ci=n,ut(),this.repaint(),this},this.setSectionActive=function(n){return su=n,ut(),this.repaint(),this},this.setGradient=function(n){return nr=n,ut(),this.repaint(),this},this.setGradientActive=function(n){return nf=n,ut(),this.repaint(),this},this.setMinValue=function(n){return f=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.getMinValue=function(){return f},this.setMaxValue=function(n){return l=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.getMaxValue=function(){return l},this.setThreshold=function(n){n=parseFloat(n);var t=n<f?f:n>l?l:n;return gt=t,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setThresholdRising=function(n){return ni=!!n,rt=!rt,or(rt),this.repaint(),this},this.setTitleString=function(n){return hu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setUnitString=function(n){return cu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setTrend=function(n){return hf=n,this.repaint(),this},this.setTrendVisible=function(n){return iu=!!n,this.repaint(),this},this.setFractionalScaleDecimals=function(n){wu=parseInt(n,10);lt({background:!0});ut({background:!0});this.repaint()},this.setLabelNumberFormat=function(n){return bu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.repaint=function(){var s=(ft-f)/(l-f)*ti,t,u=sr,n,i,e,o,r;for(ne||ut({frame:!0,background:!0,led:!0,userLed:!0,value:!0,trend:!0,foreground:!0}),p.clearRect(0,0,h,h),au&&p.drawImage(ir,0,0),p.drawImage(rr,0,0),n=0;n<=s;n+=5){if(t=sr,uu)e=f+n/ti*(l-f),o=nr.getEnd()-nr.getStart(),r=(e-f)/o,r=Math.max(Math.min(r,1),0),t=ei(nr.getColorAt(r).getRgbaColor());else if(lr)for(i=0;i<bi.length;i++)if(n>=bi[i].start&&n<bi[i].stop){t=bi[i].color;break}u.medium.getHexColor()!==t.medium.getHexColor()&&(ie(ou,t),u=t);p.save();p.translate(et,ct);p.rotate(n*c+wi);p.translate(-et,-ct);p.drawImage(ur,ce,le);p.restore()}if(yu&&be(p,ft),gr&&p.drawImage(di,of,sf),tu&&p.drawImage(yt,ae,ve),iu)switch(hf.state){case"up":p.drawImage(bf,vr,yr);break;case"steady":p.drawImage(kf,vr,yr);break;case"down":p.drawImage(df,vr,yr);break;case"off":p.drawImage(gf,vr,yr)}du&&p.drawImage(fr,0,0);vi=!1},this.repaint(),this},li=function(n,t){t=t||{};var l=undefined===t.width?0:t.width,a=undefined===t.height?0:t.height,y=undefined===t.lcdColor?steelseries.LcdColor.STANDARD:t.lcdColor,bt=undefined===t.lcdDecimals?2:t.lcdDecimals,nt=undefined===t.unitString?"":t.unitString,tt=undefined===t.unitStringVisible?!1:t.unitStringVisible,kt=undefined===t.headerString?"":t.headerString,ut=undefined===t.headerStringVisible?!1:t.headerStringVisible,ft=undefined===t.digitalFont?!1:t.digitalFont,gt=undefined===t.valuesNumeric?!0:t.valuesNumeric,p=undefined===t.value?0:t.value,ni=undefined===t.alwaysScroll?!1:t.alwaysScroll,et=undefined===t.autoScroll?!1:t.autoScroll,u=undefined===t.section?null:t.section,c=!1,o=0,b,k=!1,ti=this,i=ht(n);l===0&&(l=i.canvas.width);a===0&&(a=i.canvas.height);i.canvas.width=l;i.canvas.height=a;var e=l,f=a,h=0,w=Math.floor(f/1.5),ct=w+"px "+s,lt=w+"px "+wt,at=!1,vt,yt=[],pt=[],ii=function(n,t){var l,a,r;i.save();i.textAlign="right";i.strokeStyle=t;i.fillStyle=t;i.beginPath();i.rect(2,0,e-4,f);i.closePath();i.clip();(y===steelseries.LcdColor.STANDARD||y===steelseries.LcdColor.STANDARD_GREEN)&&u===null&&(i.shadowColor="gray",i.shadowOffsetX=f*.035,i.shadowOffsetY=f*.035,i.shadowBlur=f*.055);i.font=ft?lt:ct;gt?(l=0,h=0,tt&&(i.font=Math.floor(f/2.5)+"px "+s,l=i.measureText(nt).width),i.font=ft?lt:ct,a=n.toFixed(bt),h=i.measureText(a).width,r=.38,ut&&(r=.52),i.fillText(a,e-l-4-o,f*.5+w*r),tt&&(i.font=Math.floor(f/2.5)+"px "+s,i.fillText(nt,e-2-o,f*.5+w*r)),ut&&(i.textAlign="center",i.font=Math.floor(f/3.5)+"px "+s,i.fillText(kt,e/2,f*.3))):(h=i.measureText(n).width,ni||et&&h>e-4?c||(o=h>e*.8?e-h-e*.2:0,c=!0,clearTimeout(b),b=setTimeout(d,200)):et&&h<=e-4&&(o=0,c=!1),i.fillText(n,e-2-o,f*.5+w*.38));i.restore()},ri=function(n,t,i,u){var tt=r(n,t),f=tt.getContext("2d");f.save();var h=0,et=n,it=t,ut=Math.min(n,t)*.095,s=f.createLinearGradient(0,h,0,h+it);s.addColorStop(0,"#4c4c4c");s.addColorStop(.08,"#666666");s.addColorStop(.92,"#666666");s.addColorStop(1,"#e6e6e6");f.fillStyle=s;dt(f,0,h,et,it,ut);f.fill();f.restore();f.save();var c=rt(i),e=ot(c[0],c[1],c[2]),l=rt(u.gradientStartColor),ht=ot(l[0],l[1],l[2]),a=rt(u.gradientFraction1Color),ct=ot(a[0],a[1],a[2]),v=rt(u.gradientFraction2Color),lt=ot(v[0],v[1],v[2]),y=rt(u.gradientFraction3Color),at=ot(y[0],y[1],y[2]),p=rt(u.gradientStopColor),vt=ot(p[0],p[1],p[2]),w=st(e[0],e[1],ht[2]-.31),b=st(e[0],e[1],ct[2]-.31),k=st(e[0],e[1],lt[2]-.31),d=st(e[0],e[1],at[2]-.31),g=st(e[0],e[1],vt[2]-.31),nt=1,yt=n-2,ft=t-2,pt=ut-1,o=f.createLinearGradient(0,nt,0,nt+ft);return o.addColorStop(0,"rgb("+w[0]+", "+w[1]+", "+w[2]+")"),o.addColorStop(.03,"rgb("+b[0]+","+b[1]+","+b[2]+")"),o.addColorStop(.49,"rgb("+k[0]+","+k[1]+","+k[2]+")"),o.addColorStop(.5,"rgb("+d[0]+","+d[1]+","+d[2]+")"),o.addColorStop(1,"rgb("+g[0]+","+g[1]+","+g[2]+")"),f.fillStyle=o,dt(f,1,nt,yt,ft,pt),f.fill(),f.restore(),tt},ui=function(n){var t=rt(n),r=ot(t[0],t[1],t[2]),i=st(r[0],.57,.83);return"rgb("+i[0]+", "+i[1]+", "+i[2]+")"},d=function(){c?(o>e&&(o=-h),o+=2,b=setTimeout(d,50)):o=0;k||(k=!0,v(ti.repaint))},g=function(){var n;if(at=!0,vt=it(l,a,y),null!==u&&0<u.length)for(n=0;n<u.length;n++)yt[n]=ri(l,a,u[n].color,y),pt[n]=ui(u[n].color)};return this.setValue=function(n){return p!==n&&(p=n,this.repaint()),this},this.setLcdColor=function(n){return y=n,g(),this.repaint(),this},this.setSection=function(n){return u=n,g({background:!0,foreground:!0}),this.repaint(),this},this.setScrolling=function(n){if(n){if(c)return;c=n;d()}else c=n;return this},this.repaint=function(){at||g();i.clearRect(0,0,i.canvas.width,i.canvas.height);var t=vt,r=y.textColor,n;if(null!==u&&0<u.length)for(n=0;n<u.length;n++)if(p>=u[n].start&&p<=u[n].stop){t=yt[n];r=pt[n];break}i.drawImage(t,0,0);ii(p,r);k=!1},this.repaint(),this},ai=function(n,u){u=u||{};var o=undefined===u.size?0:u.size,hi=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,ci=undefined===u.frameVisible?!0:u.frameVisible,rt=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,li=undefined===u.backgroundVisible?!0:u.backgroundVisible,dt=undefined===u.pointerTypeLatest?steelseries.PointerType.TYPE1:u.pointerTypeLatest,ai=undefined===u.pointerTypeAverage?steelseries.PointerType.TYPE8:u.pointerTypeAverage,ii=undefined===u.pointerColor?steelseries.ColorDef.RED:u.pointerColor,ri=undefined===u.pointerColorAverage?steelseries.ColorDef.BLUE:u.pointerColorAverage,ar=undefined===u.knobType?steelseries.KnobType.STANDARD_KNOB:u.knobType,vr=undefined===u.knobStyle?steelseries.KnobStyle.SILVER:u.knobStyle,vi=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,yi=undefined===u.foregroundVisible?!0:u.foregroundVisible,h=undefined===u.pointSymbols?["N","NE","E","SE","S","SW","W","NW"]:u.pointSymbols,yr=undefined===u.pointSymbolsVisible?!0:u.pointSymbolsVisible,pr=undefined===u.customLayer?null:u.customLayer,wr=undefined===u.degreeScale?!0:u.degreeScale,ui=undefined===u.degreeScaleHalf?!1:u.degreeScaleHalf,wi=undefined===u.roseVisible?!1:u.roseVisible,lt=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,bi=undefined===u.lcdVisible?!0:u.lcdVisible,br=undefined===u.digitalFont?!1:u.digitalFont,et=undefined===u.section?null:u.section,ot=undefined===u.area?null:u.area,gt=undefined===u.lcdTitleStrings?["Latest","Average"]:u.lcdTitleStrings,ki=undefined===u.titleString?"":u.titleString,di=undefined===u.useColorLabels?!1:u.useColorLabels,ni=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,st,ct,y=0,p=0,at=c,gi=this.valueLatest,fi=this.valueAverage,kr=-i,nr=t,tr=360,l=!1,e=ht(n);o===0&&(o=Math.min(e.canvas.width,e.canvas.height));e.canvas.width=o;e.canvas.height=o;var f=o,w=o,b=f/2,k=w/2,ei=Math.floor(f/10),dr=ei+"px "+s,gr=ei+"px "+wt,ti=f*.3,ir=w*.12,rr=(f-ti)/2,ur=w*.32,fr=w*.565,er=!1,vt=r(o,o),ut=vt.getContext("2d"),oi,yt=r(o,o),or=yt.getContext("2d"),pt=r(o,o),sr=pt.getContext("2d"),kt=r(o,o),hr=kt.getContext("2d"),cr=function(n,t){for(e.save(),e.textAlign="center",e.strokeStyle=lt.textColor,e.fillStyle=lt.textColor;n<-180;)n+=360;!ui&&n<0&&(n+=360);ui&&n>180&&(n=-(360-n));n>=0?(n="00"+Math.round(n),n=n.substring(n.length,n.length-3)):(n="00"+Math.abs(Math.round(n)),n="-"+n.substring(n.length,n.length-3));(lt===steelseries.LcdColor.STANDARD||lt===steelseries.LcdColor.STANDARD_GREEN)&&(e.shadowColor="gray",e.shadowOffsetX=f*.007,e.shadowOffsetY=f*.007,e.shadowBlur=f*.007);e.font=br?gr:dr;e.fillText(n+"°",f/2+ti*.05,(t?ur:fr)+ir*.5+ei*.38,ti*.9);e.restore()},lr=function(n,t,i,r,u){n.save();n.strokeStyle=r;n.fillStyle=r;n.lineWidth=f*.035;var e=nr/tr*t,o=e+(i-t)/(tr/nr);n.translate(b,k);n.rotate(kr);n.beginPath();u?(n.moveTo(0,0),n.arc(0,0,f*.365-n.lineWidth/2,e,o,!1)):n.arc(0,0,f*.365,e,o,!1);u?(n.moveTo(0,0),n.fill()):n.stroke();n.translate(-b,-k);n.restore()},nu=function(n){var l=f*.38,a=f*.35,p=f*.36,c=f*.1,v=f*.31,u=f*.36,r,e,t,o,y;if(n.textAlign="center",n.textBaseline="middle",n.save(),n.strokeStyle=rt.labelColor.getRgbaColor(),n.fillStyle=rt.labelColor.getRgbaColor(),n.translate(b,k),wr)for(r=Math.floor(.1*f)+"px serif bold",e=Math.floor(f*.04)+"px "+s,n.rotate(at*5),t=5;360>=t;t+=5){if(n.save(),yr)switch(t){case 360:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[2],0,0,c);n.translate(-u,0);break;case 90:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[4],0,0,c);n.translate(-u,0);break;case 180:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[6],0,0,c);n.translate(-u,0);break;case 270:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[0],0,0,c);n.translate(-u,0);break;case 5:case 85:case 95:case 175:case 185:case 265:case 275:case 355:break;default:(t+90)%20?(n.lineWidth=(t+90)%5?1.5:1,n.beginPath(),n.moveTo(l,0),y=(t+90)%10?p:a,n.lineTo(y,0),n.closePath(),n.stroke()):(n.lineWidth=1.5,n.beginPath(),n.moveTo(l,0),n.lineTo(a,0),n.closePath(),n.stroke(),o=(t+90)%360,n.translate(v,0),n.rotate(i),n.font=e,n.fillText("0".substring(o>=100)+o,0,0,c),n.translate(-v,0))}else(t+90)%20?(n.lineWidth=(t+90)%5?1.5:1,n.beginPath(),n.moveTo(l,0),y=(t+90)%10?p:a,n.lineTo(y,0),n.closePath(),n.stroke()):(n.lineWidth=1.5,n.beginPath(),n.moveTo(l,0),n.lineTo(a,0),n.closePath(),n.stroke(),o=(t+90)%360,ui&&o>180&&(o=-(360-o)),n.translate(v,0),n.rotate(i),n.font=e,n.fillText(o,0,0,c),n.translate(-v,0));n.restore();n.rotate(at*5)}else for(r=.12*f+"px serif",e=.06*f+"px serif",n.lineWidth=1,n.strokeStyle=rt.symbolColor.getRgbaColor(),t=0;360>t;t+=2.5){0==t%5&&(n.beginPath(),n.moveTo(f*.38,0),n.lineTo(f*.36,0),n.closePath(),n.stroke());n.save();switch(t){case 0:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[2],0,0);n.translate(-f*.35,0);break;case 45:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[3],0,0);n.translate(-f*.29,0);break;case 90:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[4],0,0);n.translate(-f*.35,0);break;case 135:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[5],0,0);n.translate(-f*.29,0);break;case 180:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[6],0,0);n.translate(-f*.35,0);break;case 225:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[7],0,0);n.translate(-f*.29,0);break;case 270:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[0],0,0);n.translate(-f*.35,0);break;case 315:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[1],0,0);n.translate(-f*.29,0)}n.restore();wi&&(0===t||22.5===t||45===t||67.5===t||90===t||112.5===t||135===t||157.5===t||180===t||202.5===t||225===t||247.5===t||270===t||292.5===t||315===t||337.5===t||360===t)&&(n.save(),n.beginPath(),t%45?n.moveTo(f*.29,0):n.moveTo(f*.38,0),n.lineTo(f*.1,0),n.closePath(),n.restore(),n.stroke());n.rotate(at*2.5)}n.translate(-b,-k);n.restore()},tu=function(n){gt.length>0&&(n.save(),n.textAlign="center",n.textBaseline="middle",n.fillStyle=di?ii.medium.getRgbaColor():rt.labelColor.getRgbaColor(),n.font=.04*f+"px "+s,n.fillText(gt[0],f/2,w*.29,f*.3),n.fillStyle=di?ri.medium.getRgbaColor():rt.labelColor.getRgbaColor(),n.fillText(gt[1],f/2,w*.71,f*.3),ki.length>0&&(n.fillStyle=rt.labelColor.getRgbaColor(),n.font=.0467*f+"px "+s,n.fillText(ki,f/2,w*.5,f*.3)))},a=function(n){var t,i,u;n=n||{};var r=undefined===n.background?!1:n.background,e=undefined===n.pointer?!1:n.pointer,o=undefined===n.foreground?!1:n.foreground;if(er=!0,r&&ci&&g(ut,hi,b,k,f,w),r&&li){if(nt(ut,rt,b,k,f,w),bt(ut,pr,b,k,f,w),null!==et&&0<et.length){t=et.length;do t--,lr(ut,et[t].start,et[t].stop,et[t].color,!1);while(0<t)}if(null!==ot&&0<ot.length){i=ot.length;do i--,lr(ut,ot[i].start,ot[i].stop,ot[i].color,!0);while(0<i)}nu(ut)}r&&wi&&pi(ut,b,k,f,w,rt);r&&bi&&(oi=it(ti,ir,lt),ut.drawImage(oi,rr,ur),ut.drawImage(oi,rr,fr),tu(ut));e&&(ft(sr,f,ai,ri,rt.labelColor),ft(or,f,dt,ii,rt.labelColor));o&&yi&&(u=dt.type==="type15"||dt.type==="type16"?!1:!0,tt(hr,vi,f,w,u,ar,vr))},d=function(n){n=n||{};var t=undefined===n.background?!1:n.background,i=undefined===n.pointer?!1:n.pointer,r=undefined===n.foreground?!1:n.foreground;t&&(vt.width=o,vt.height=o,ut=vt.getContext("2d"));i&&(yt.width=o,yt.height=o,or=yt.getContext("2d"),pt.width=o,pt.height=o,sr=pt.getContext("2d"));r&&(kt.width=o,kt.height=o,hr=kt.getContext("2d"))};return this.setValueLatest=function(n){return n=parseFloat(n),n=n===360?360:n%360,y!==n&&(y=n,this.repaint()),this},this.getValueLatest=function(){return y},this.setValueAverage=function(n){return n=parseFloat(n),n=n===360?360:n%360,p!==n&&(p=n,this.repaint()),this},this.getValueAverage=function(){return p},this.setValueAnimatedLatest=function(n,t){var i,f=this,r,u;return n=parseFloat(n),i=n===360?360:n%360,y!==i&&(undefined!==st&&st.isPlaying&&st.stop(),r=si(y,i),r!==0?(u=ni*Math.abs(r)/180,u=Math.max(u,ni/5),st=new Tween({},"",Tween.regularEaseInOut,y,y+r,u),st.onMotionChanged=function(n){y=n.target._pos===360?360:n.target._pos%360;l||(l=!0,v(f.repaint))},st.onMotionFinished=function(){y=i;l||(l=!0,v(f.repaint));t&&typeof t=="function"&&t()},st.start()):(y=i,l||(l=!0,v(f.repaint)))),this},this.setValueAnimatedAverage=function(n,t){var i,f=this,r,u;return n=parseFloat(n),i=n===360?360:n%360,p!==n&&(undefined!==ct&&ct.isPlaying&&ct.stop(),r=si(p,i),r!==0?(u=ni*Math.abs(r)/180,u=Math.max(u,ni/5),ct=new Tween({},"",Tween.regularEaseInOut,p,p+r,u),ct.onMotionChanged=function(n){p=n.target._pos===360?360:n.target._pos%360;l||(l=!0,v(f.repaint))},ct.onMotionFinished=function(){p=i;l||(l=!0,v(f.repaint));t&&typeof t=="function"&&t()},ct.start()):(p=i,l||(l=!0,v(f.repaint)))),this},this.setArea=function(n){return ot=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setSection=function(n){return et=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setFrameDesign=function(n){return hi=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return rt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setForegroundType=function(n){return d({foreground:!0}),vi=n,a({foreground:!0}),this.repaint(),this},this.setPointerColor=function(n){return d({pointer:!0}),ii=n,a({pointer:!0}),this.repaint(),this},this.setPointerColorAverage=function(n){return d({pointer:!0}),ri=n,a({pointer:!0}),this.repaint(),this},this.setPointerType=function(n){return dt=n,d({pointer:!0,foreground:!0}),a({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointerTypeAverage=function(n){return ai=n,d({pointer:!0,foreground:!0}),a({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointSymbols=function(n){return h=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setLcdColor=function(n){return lt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setLcdTitleStrings=function(n){return gt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.repaint=function(){er||a({frame:!0,background:!0,led:!0,pointer:!0,foreground:!0});e.clearRect(0,0,e.canvas.width,e.canvas.height);(ci||li)&&e.drawImage(vt,0,0);bi&&(cr(y,!0),cr(p,!1));fi=p*at;var n=f*.006;e.save();e.translate(b,k);e.rotate(fi);e.translate(-b,-k);e.shadowColor="rgba(0, 0, 0, 0.8)";e.shadowOffsetX=e.shadowOffsetY=n;e.shadowBlur=n*2;e.drawImage(pt,0,0);gi=y*at-fi;e.translate(b,k);e.rotate(gi);e.translate(-b,-k);e.drawImage(yt,0,0);e.restore();yi&&e.drawImage(kt,0,0);l=!1},this.repaint(),this},vi=function(n,t){var c,f,o,u,s;t=t||{};var i=undefined===t.size?0:t.size,v=undefined===t.ledColor?steelseries.LedColor.RED_LED:t.ledColor,h=!1,y=0,r=ht(n);i===0&&(i=Math.min(r.canvas.width,r.canvas.height));r.canvas.width=i;r.canvas.height=i;c=!1;f=d.createElement("canvas");f.width=i;f.height=i;o=f.getContext("2d");u=d.createElement("canvas");u.width=i;u.height=i;var l=u.getContext("2d"),e=u,p=function(){c=!0;o.clearRect(0,0,o.canvas.width,o.canvas.height);o.drawImage(a(i,1,v),0,0);l.clearRect(0,0,l.canvas.width,l.canvas.height);l.drawImage(a(i,0,v),0,0)};return this.toggleLed=function(){return e=e===f?u:f,s(),this},this.setLedColor=function(n){return v=n,c=!1,s(),this},this.setLedOnOff=function(n){return e=n?f:u,s(),this},this.blink=function(n){return n?h||(y=setInterval(this.toggleLed,1e3),h=!0):h&&(clearInterval(y),h=!1,e=u),this},s=function(){c||p();r.save();r.clearRect(0,0,r.canvas.width,r.canvas.height);r.drawImage(e,0,0);r.restore()},s(),this},yi=function(n,t){function pt(){var t,n;for(st=!0,p.rect(0,0,l,e),t=p.createLinearGradient(0,0,0,e),t.addColorStop(0,"rgba(0, 0, 0, 1)"),t.addColorStop(.1,"rgba(0, 0, 0, 0.4)"),t.addColorStop(.33,"rgba(255, 255, 255, 0.45)"),t.addColorStop(.46,"rgba(255, 255, 255, 0)"),t.addColorStop(.9,"rgba(0, 0, 0, 0.4)"),t.addColorStop(1,"rgba(0, 0, 0, 1)"),p.fillStyle=t,p.fill(),i.rect(0,0,f,s*1.1),i.fillStyle=vt,i.fill(),i.strokeStyle="#f0f0f0",i.lineWidth="1px",i.moveTo(0,0),i.lineTo(0,s*1.1),i.stroke(),i.strokeStyle="#202020",i.moveTo(f,0),i.lineTo(f,s*1.1),i.stroke(),i.textAlign="center",i.textBaseline="middle",i.font=g,i.fillStyle=yt,n=9;n<21;n++)i.fillText(n%10,f*.5,h*(n-9)+h/2);if(a>0)for(u.rect(0,0,f,s*1.1),u.fillStyle=ct,u.fill(),u.strokeStyle="#f0f0f0",u.lineWidth="1px",u.moveTo(0,0),u.lineTo(0,s*1.1),u.stroke(),u.strokeStyle="#202020",u.moveTo(f,0),u.lineTo(f,s*1.1),u.stroke(),u.textAlign="center",u.textBaseline="middle",u.font=g,u.fillStyle=lt,n=9;n<21;n++)u.fillText(n%10,f*.5,h*(n-9)+h/2);for(n=0;n<b+a;n++)tt[n]=Math.random()*ot*e-ot*e/2}function wt(){for(var u=1,e=o,i,t,r,s,n=0;n<a;n++)e*=10;for(t=Math.floor(e),r=e-t,t=String(t),s=9,n=0;n<a+b;n++)i=+t.substring(t.length-n-1,t.length-n)||0,s!==9&&(r=0),n<a?w.drawImage(ft,l-f*u,-(h*(i+r)+nt+tt[n])):w.drawImage(ut,l-f*u,-(h*(i+r)+nt+tt[n])),u++,s=i}t=t||{};var et=undefined===t._context?null:t._context,e=undefined===t.height?0:t.height,b=undefined===t.digits?6:t.digits,a=undefined===t.decimals?1:t.decimals,ct=undefined===t.decimalBackColor?"#F0F0F0":t.decimalBackColor,lt=undefined===t.decimalForeColor?"#F01010":t.decimalForeColor,at=undefined===t.font?"sans-serif":t.font,o=undefined===t.value?0:t.value,vt=undefined===t.valueBackColor?"#050505":t.valueBackColor,yt=undefined===t.valueForeColor?"#F8F8F8":t.valueForeColor,ot=undefined===t.wobbleFactor?.07:t.wobbleFactor,st=!1,c,y,k=!1,d,f,g,l,s,h,nt,tt=[],it,w,rt,p,ut,i,ft,u;y=et?et:ht(n);e===0&&(e=y.canvas.height);o<0&&(o=0);d=Math.floor(e*.85);g="600 "+d+"px "+at;f=Math.floor(e*.68);l=f*(b+a);s=d*11;h=s/12;nt=h*.81;y.canvas.width=l;y.canvas.height=e;it=r(l,e);w=it.getContext("2d");rt=r(l,e);p=rt.getContext("2d");ut=r(f,s*1.1);i=ut.getContext("2d");ft=r(f,s*1.1);u=ft.getContext("2d");this.setValueAnimated=function(n,t){var i=this;return n=parseFloat(n),n<0&&(n=0),o!==n&&(undefined!==c&&c.isPlaying&&c.stop(),c=new Tween({},"",Tween.strongEaseOut,o,n,2),c.onMotionChanged=function(n){o=n.target._pos;k||(k=!0,v(i.repaint))},t&&typeof t=="function"&&(c.onMotionFinished=t),c.start()),this.repaint(),this};this.setValue=function(n){return o=parseFloat(n),o<0&&(o=0),this.repaint(),this};this.getValue=function(){return o};this.repaint=function(){st||pt();wt();w.drawImage(rt,0,0);y.drawImage(it,0,0);k=!1};this.repaint()},pi=function(n,i,r,u,f,e){var l=!0,o,s,h=e.symbolColor.getRgbaColor();for(n.save(),n.lineWidth=1,n.fillStyle=h,n.strokeStyle=h,n.translate(i,r),o=0;o<360;o+=15)l=!l,n.beginPath(),n.arc(0,0,u*.26,o*c,(o+15)*c,!1),n.arc(0,0,u*.23,(o+15)*c,o*c,!0),n.closePath(),l&&n.fill(),n.stroke();for(n.translate(-i,-r),o=0;360>=o;o+=90)n.beginPath(),n.moveTo(u*.560747,f*.584112),n.lineTo(u*.640186,f*.644859),n.lineTo(u*.584112,f*.560747),n.lineTo(u*.560747,f*.584112),n.closePath(),n.fillStyle=h,n.fill(),n.stroke(),n.beginPath(),n.moveTo(u*.523364,f*.397196),n.lineTo(u*.5,f*.196261),n.lineTo(u*.471962,f*.397196),n.lineTo(u*.523364,f*.397196),n.closePath(),s=n.createLinearGradient(.476635*u,0,.518691*u,0),s.addColorStop(0,"rgb(222, 223, 218)"),s.addColorStop(.48,"rgb(222, 223, 218)"),s.addColorStop(.49,h),s.addColorStop(1,h),n.fillStyle=s,n.fill(),n.stroke(),n.translate(i,r),n.rotate(o*c),n.translate(-i,-r);n.beginPath();n.translate(i,r);n.arc(0,0,u*.1,0,t,!1);n.lineWidth=u*.022;n.stroke();n.translate(-i,-r);n.restore()},ft=function(n,i,u,f,e){var c,o,s,h,l=i.toString()+u.type+f.light.getHexColor()+f.medium.getHexColor();if(!ft.cache[l]){c=r(i,i);o=c.getContext("2d");switch(u.type){case"type2":s=o.createLinearGradient(0,i*.471962,0,i*.130841);s.addColorStop(0,e.getRgbaColor());s.addColorStop(.36,e.getRgbaColor());s.addColorStop(.361,f.light.getRgbaColor());s.addColorStop(1,f.light.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.518691,i*.471962);o.lineTo(i*.509345,i*.462616);o.lineTo(i*.509345,i*.341121);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.495327,i*.130841);o.lineTo(i*.490654,i*.341121);o.lineTo(i*.490654,i*.462616);o.lineTo(i*.481308,i*.471962);o.closePath();o.fill();break;case"type3":o.beginPath();o.rect(i*.495327,i*.130841,i*.009345,i*.373831);o.closePath();o.fillStyle=f.light.getRgbaColor();o.fill();break;case"type4":s=o.createLinearGradient(.467289*i,0,.528036*i,0);s.addColorStop(0,f.dark.getRgbaColor());s.addColorStop(.51,f.dark.getRgbaColor());s.addColorStop(.52,f.light.getRgbaColor());s.addColorStop(1,f.light.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.5,i*.126168);o.lineTo(i*.514018,i*.135514);o.lineTo(i*.53271,i*.5);o.lineTo(i*.523364,i*.602803);o.lineTo(i*.476635,i*.602803);o.lineTo(i*.467289,i*.5);o.lineTo(i*.485981,i*.135514);o.lineTo(i*.5,i*.126168);o.closePath();o.fill();break;case"type5":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.5,i*.495327);o.lineTo(i*.528037,i*.495327);o.lineTo(i*.5,i*.149532);o.lineTo(i*.471962,i*.495327);o.lineTo(i*.5,i*.495327);o.closePath();o.fill();o.lineWidth=1;o.lineCap="square";o.lineJoin="miter";o.strokeStyle=f.dark.getRgbaColor();o.stroke();break;case"type6":o.fillStyle=f.medium.getRgbaColor();o.beginPath();o.moveTo(i*.481308,i*.485981);o.lineTo(i*.481308,i*.392523);o.lineTo(i*.485981,i*.317757);o.lineTo(i*.495327,i*.130841);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.514018,i*.317757);o.lineTo(i*.518691,i*.38785);o.lineTo(i*.518691,i*.485981);o.lineTo(i*.504672,i*.485981);o.lineTo(i*.504672,i*.38785);o.lineTo(i*.5,i*.317757);o.lineTo(i*.495327,i*.392523);o.lineTo(i*.495327,i*.485981);o.lineTo(i*.481308,i*.485981);o.closePath();o.fill();break;case"type7":s=o.createLinearGradient(.481308*i,0,.518691*i,0);s.addColorStop(0,f.dark.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.490654,i*.130841);o.lineTo(i*.481308,i*.5);o.lineTo(i*.518691,i*.5);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.490654,i*.130841);o.closePath();o.fill();break;case"type8":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.beginPath();o.moveTo(i*.5,i*.53271);o.lineTo(i*.53271,i*.5);o.bezierCurveTo(i*.53271,i*.5,i*.509345,i*.457943,i*.5,i*.149532);o.bezierCurveTo(i*.490654,i*.457943,i*.467289,i*.5,i*.467289,i*.5);o.lineTo(i*.5,i*.53271);o.closePath();o.fill();o.stroke();break;case"type9":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,"rgb(50, 50, 50)");s.addColorStop(.5,"#666666");s.addColorStop(1,"rgb(50, 50, 50)");o.fillStyle=s;o.strokeStyle="#2E2E2E";o.beginPath();o.moveTo(i*.495327,i*.233644);o.lineTo(i*.504672,i*.233644);o.lineTo(i*.514018,i*.439252);o.lineTo(i*.485981,i*.439252);o.lineTo(i*.495327,i*.233644);o.closePath();o.moveTo(i*.490654,i*.130841);o.lineTo(i*.471962,i*.471962);o.lineTo(i*.471962,i*.528037);o.bezierCurveTo(i*.471962,i*.528037,i*.476635,i*.602803,i*.476635,i*.602803);o.bezierCurveTo(i*.476635,i*.607476,i*.481308,i*.607476,i*.5,i*.607476);o.bezierCurveTo(i*.518691,i*.607476,i*.523364,i*.607476,i*.523364,i*.602803);o.bezierCurveTo(i*.523364,i*.602803,i*.528037,i*.528037,i*.528037,i*.528037);o.lineTo(i*.528037,i*.471962);o.lineTo(i*.509345,i*.130841);o.lineTo(i*.490654,i*.130841);o.closePath();o.fill();o.beginPath();o.moveTo(i*.495327,i*.219626);o.lineTo(i*.504672,i*.219626);o.lineTo(i*.504672,i*.135514);o.lineTo(i*.495327,i*.135514);o.lineTo(i*.495327,i*.219626);o.closePath();o.fillStyle=f.medium.getRgbaColor();o.fill();break;case"type10":o.beginPath();o.moveTo(i*.5,i*.149532);o.bezierCurveTo(i*.5,i*.149532,i*.443925,i*.490654,i*.443925,i*.5);o.bezierCurveTo(i*.443925,i*.53271,i*.467289,i*.556074,i*.5,i*.556074);o.bezierCurveTo(i*.53271,i*.556074,i*.556074,i*.53271,i*.556074,i*.5);o.bezierCurveTo(i*.556074,i*.490654,i*.5,i*.149532,i*.5,i*.149532);o.closePath();s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.medium.getRgbaColor();o.lineWidth=1;o.lineCap="square";o.lineJoin="miter";o.fill();o.stroke();break;case"type11":o.beginPath();o.moveTo(.5*i,.168224*i);o.lineTo(.485981*i,.5*i);o.bezierCurveTo(.485981*i,.5*i,.481308*i,.584112*i,.5*i,.584112*i);o.bezierCurveTo(.514018*i,.584112*i,.509345*i,.5*i,.509345*i,.5*i);o.lineTo(.5*i,.168224*i);o.closePath();s=o.createLinearGradient(0,.168224*i,0,.584112*i);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(1,f.dark.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();break;case"type12":o.beginPath();o.moveTo(.5*i,.168224*i);o.lineTo(.485981*i,.5*i);o.lineTo(.5*i,.504672*i);o.lineTo(.509345*i,.5*i);o.lineTo(.5*i,.168224*i);o.closePath();s=o.createLinearGradient(0,.168224*i,0,.504672*i);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(1,f.dark.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();break;case"type13":case"type14":o.beginPath();o.moveTo(.485981*i,.168224*i);o.lineTo(.5*i,.130841*i);o.lineTo(.509345*i,.168224*i);o.lineTo(.509345*i,.509345*i);o.lineTo(.485981*i,.509345*i);o.lineTo(.485981*i,.168224*i);o.closePath();u.type==="type13"?(s=o.createLinearGradient(0,.5*i,0,.130841*i),s.addColorStop(0,e.getRgbaColor()),s.addColorStop(.85,e.getRgbaColor()),s.addColorStop(.85,f.medium.getRgbaColor()),s.addColorStop(1,f.medium.getRgbaColor()),o.fillStyle=s):(s=o.createLinearGradient(.485981*i,0,.509345*i,0),s.addColorStop(0,f.veryDark.getRgbaColor()),s.addColorStop(.5,f.light.getRgbaColor()),s.addColorStop(1,f.veryDark.getRgbaColor()),o.fillStyle=s);o.fill();break;case"type15":case"type16":o.beginPath();o.moveTo(i*.509345,i*.457943);o.lineTo(i*.5015,i*.13);o.lineTo(i*.4985,i*.13);o.lineTo(i*.490654,i*.457943);o.bezierCurveTo(i*.490654,i*.457943,i*.490654,i*.457943,i*.490654,i*.457943);o.bezierCurveTo(i*.471962,i*.462616,i*.457943,i*.481308,i*.457943,i*.5);o.bezierCurveTo(i*.457943,i*.518691,i*.471962,i*.537383,i*.490654,i*.542056);o.bezierCurveTo(i*.490654,i*.542056,i*.490654,i*.542056,i*.490654,i*.542056);u.type==="type15"?(o.lineTo(i*.490654,i*.57),o.bezierCurveTo(i*.46,i*.58,i*.46,i*.62,i*.490654,i*.63),o.bezierCurveTo(i*.47,i*.62,i*.48,i*.59,i*.5,i*.59),o.bezierCurveTo(i*.53,i*.59,i*.52,i*.62,i*.509345,i*.63),o.bezierCurveTo(i*.54,i*.62,i*.54,i*.58,i*.509345,i*.57),o.lineTo(i*.509345,i*.57)):(o.lineTo(i*.490654,i*.621495),o.lineTo(i*.509345,i*.621495));o.lineTo(i*.509345,i*.542056);o.bezierCurveTo(i*.509345,i*.542056,i*.509345,i*.542056,i*.509345,i*.542056);o.bezierCurveTo(i*.528037,i*.537383,i*.542056,i*.518691,i*.542056,i*.5);o.bezierCurveTo(i*.542056,i*.481308,i*.528037,i*.462616,i*.509345,i*.457943);o.bezierCurveTo(i*.509345,i*.457943,i*.509345,i*.457943,i*.509345,i*.457943);o.closePath();s=u.type==="type15"?o.createLinearGradient(0,0,0,i*.63):o.createLinearGradient(0,0,0,i*.621495);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(.388888,f.medium.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.611111,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();o.beginPath();h=i*.06542/2;o.arc(i*.5,i*.5,h,0,t);s=o.createLinearGradient(i*.5-h,i*.5+h,0,i*.5+h);s.addColorStop(0,"#e6b35c");s.addColorStop(.01,"#e6b35c");s.addColorStop(.99,"#c48200");s.addColorStop(1,"#c48200");o.fillStyle=s;o.closePath();o.fill();o.beginPath();h=i*.046728/2;o.arc(i*.5,i*.5,h,0,t);s=o.createRadialGradient(i*.5,i*.5,0,i*.5,i*.5,h);s.addColorStop(0,"#c5c5c5");s.addColorStop(.19,"#c5c5c5");s.addColorStop(.22,"#000000");s.addColorStop(.8,"#000000");s.addColorStop(.99,"#707070");s.addColorStop(1,"#707070");o.fillStyle=s;o.closePath();o.fill();break;case"type1":default:s=o.createLinearGradient(0,i*.471962,0,i*.130841);s.addColorStop(0,f.veryDark.getRgbaColor());s.addColorStop(.3,f.medium.getRgbaColor());s.addColorStop(.59,f.medium.getRgbaColor());s.addColorStop(1,f.veryDark.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.518691,i*.471962);o.bezierCurveTo(i*.514018,i*.457943,i*.509345,i*.415887,i*.509345,i*.401869);o.bezierCurveTo(i*.504672,i*.383177,i*.5,i*.130841,i*.5,i*.130841);o.bezierCurveTo(i*.5,i*.130841,i*.490654,i*.383177,i*.490654,i*.397196);o.bezierCurveTo(i*.490654,i*.415887,i*.485981,i*.457943,i*.481308,i*.471962);o.bezierCurveTo(i*.471962,i*.481308,i*.467289,i*.490654,i*.467289,i*.5);o.bezierCurveTo(i*.467289,i*.518691,i*.481308,i*.53271,i*.5,i*.53271);o.bezierCurveTo(i*.518691,i*.53271,i*.53271,i*.518691,i*.53271,i*.5);o.bezierCurveTo(i*.53271,i*.490654,i*.528037,i*.481308,i*.518691,i*.471962);o.closePath();o.fill()}ft.cache[l]=c}return n.drawImage(ft.cache[l],0,0),this},g,nt,bt,tt,l,a,it,et,w,v,e,f,y,ut,ct,vt,ui,gt,b,h,lt,ni,ti,yt;ft.cache={};g=function(i,u,f,e,o,s){var p,h,c,l,a,v,y,w=o.toString()+s+u.design;if(!g.cache[w]){p=r(o,s);h=p.getContext("2d");h.fillStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.5)";h.beginPath();h.arc(f,e,o/2,0,t,!0);h.closePath();h.fill();h.stroke();h.beginPath();h.arc(f,e,o*.990654/2,0,t,!0);h.closePath();switch(u.design){case"metal":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"#fefefe");c.addColorStop(.07,"rgb(210, 210, 210)");c.addColorStop(.12,"rgb(179, 179, 179)");c.addColorStop(1,"rgb(213, 213, 213)");h.fillStyle=c;h.fill();break;case"brass":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(249, 243, 155)");c.addColorStop(.05,"rgb(246, 226, 101)");c.addColorStop(.1,"rgb(240, 225, 132)");c.addColorStop(.5,"rgb(90, 57, 22)");c.addColorStop(.9,"rgb(249, 237, 139)");c.addColorStop(.95,"rgb(243, 226, 108)");c.addColorStop(1,"rgb(202, 182, 113)");h.fillStyle=c;h.fill();break;case"steel":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(231, 237, 237)");c.addColorStop(.05,"rgb(189, 199, 198)");c.addColorStop(.1,"rgb(192, 201, 200)");c.addColorStop(.5,"rgb(23, 31, 33)");c.addColorStop(.9,"rgb(196, 205, 204)");c.addColorStop(.95,"rgb(194, 204, 203)");c.addColorStop(1,"rgb(189, 201, 199)");h.fillStyle=c;h.fill();break;case"gold":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(255, 255, 207)");c.addColorStop(.15,"rgb(255, 237, 96)");c.addColorStop(.22,"rgb(254, 199, 57)");c.addColorStop(.3,"rgb(255, 249, 203)");c.addColorStop(.38,"rgb(255, 199, 64)");c.addColorStop(.44,"rgb(252, 194, 60)");c.addColorStop(.51,"rgb(255, 204, 59)");c.addColorStop(.6,"rgb(213, 134, 29)");c.addColorStop(.68,"rgb(255, 201, 56)");c.addColorStop(.75,"rgb(212, 135, 29)");c.addColorStop(1,"rgb(247, 238, 101)");h.fillStyle=c;h.fill();break;case"anthracite":c=h.createLinearGradient(0,.004672*s,0,.995326*s);c.addColorStop(0,"rgb(118, 117, 135)");c.addColorStop(.06,"rgb(74, 74, 82)");c.addColorStop(.12,"rgb(50, 50, 54)");c.addColorStop(1,"rgb(79, 79, 87)");h.fillStyle=c;h.fill();break;case"tiltedGray":c=h.createLinearGradient(.233644*o,.084112*s,.81258*o,.910919*s);c.addColorStop(0,"#ffffff");c.addColorStop(.07,"rgb(210, 210, 210)");c.addColorStop(.16,"rgb(179, 179, 179)");c.addColorStop(.33,"#ffffff");c.addColorStop(.55,"#c5c5c5");c.addColorStop(.79,"#ffffff");c.addColorStop(1,"#666666");h.fillStyle=c;h.fill();break;case"tiltedBlack":c=h.createLinearGradient(.228971*o,.079439*s,.802547*o,.898591*s);c.addColorStop(0,"#666666");c.addColorStop(.21,"#000000");c.addColorStop(.47,"#666666");c.addColorStop(.99,"#000000");c.addColorStop(1,"#000000");h.fillStyle=c;h.fill();break;case"glossyMetal":c=h.createRadialGradient(.5*o,.5*s,0,.5*o,.5*o,.5*o);c.addColorStop(0,"rgb(207, 207, 207)");c.addColorStop(.96,"rgb(205, 204, 205)");c.addColorStop(1,"rgb(244, 244, 244)");h.fillStyle=c;h.fill();h.beginPath();h.arc(.5*o,.5*s,.973962*o/2,0,t);h.closePath();c=h.createLinearGradient(0,s-.971962*s,0,.971962*s);c.addColorStop(0,"rgb(249, 249, 249)");c.addColorStop(.23,"rgb(200, 195, 191)");c.addColorStop(.36,"#ffffff");c.addColorStop(.59,"rgb(29, 29, 29)");c.addColorStop(.76,"rgb(200, 194, 192)");c.addColorStop(1,"rgb(209, 209, 209)");h.fillStyle=c;h.fill();h.beginPath();h.arc(.5*o,.5*s,.869158*o/2,0,t);h.closePath();h.fillStyle="#f6f6f6";h.fill();h.beginPath();h.arc(.5*o,.5*s,.85*o/2,0,t);h.closePath();h.fillStyle="#333333";h.fill();break;case"blackMetal":v=[0,.125,.347222,.5,.680555,.875,1];y=[new n(254,254,254,1),new n(0,0,0,1),new n(153,153,153,1),new n(0,0,0,1),new n(153,153,153,1),new n(0,0,0,1),new n(254,254,254,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore();break;case"shinyMetal":v=[0,.125,.25,.347222,.5,.652777,.75,.875,1];y=[new n(254,254,254,1),new n(210,210,210,1),new n(179,179,179,1),new n(238,238,238,1),new n(160,160,160,1),new n(238,238,238,1),new n(179,179,179,1),new n(210,210,210,1),new n(254,254,254,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore();break;case"chrome":v=[0,.09,.12,.16,.25,.29,.33,.38,.48,.52,.63,.68,.8,.83,.87,.97,1];y=[new n(255,255,255,1),new n(255,255,255,1),new n(136,136,138,1),new n(164,185,190,1),new n(158,179,182,1),new n(112,112,112,1),new n(221,227,227,1),new n(155,176,179,1),new n(156,176,177,1),new n(254,255,255,1),new n(255,255,255,1),new n(156,180,180,1),new n(198,209,211,1),new n(246,248,247,1),new n(204,216,216,1),new n(164,188,190,1),new n(255,255,255,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore()}h.fillStyle="rgb(191, 191, 191)";h.beginPath();h.arc(f,e,o*.841121/2,0,t,!0);h.closePath();h.fill();h.globalCompositeOperation="destination-out";h.beginPath();h.arc(f,e,o*.83/2,0,t,!0);h.closePath();h.fill();g.cache[w]=p}return i.drawImage(g.cache[w],0,0),this};g.cache={};nt=function(i,u,f,e,o,s){var w,h,l,d,g,a=o*.831775/2,tt,it,rt,p,y,v,ut,b,k=o.toString()+s+u.name;if(!nt.cache[k]){if(w=r(o,s),h=w.getContext("2d"),h.beginPath(),h.arc(f,e,a,0,t,!0),h.closePath(),u.name==="CARBON"||u.name==="PUNCHED_SHEET"||u.name==="BRUSHED_METAL"||u.name==="BRUSHED_STAINLESS")u.name==="CARBON"&&(h.fillStyle=h.createPattern(wi,"repeat"),h.fill()),u.name==="PUNCHED_SHEET"&&(h.fillStyle=h.createPattern(bi,"repeat"),h.fill()),l=h.createLinearGradient(a,0,o-a,0),l.addColorStop(0,"rgba(0, 0, 0, 0.25)"),l.addColorStop(.5,"rgba(0, 0, 0, 0)"),l.addColorStop(1,"rgba(0, 0, 0, 0.25)"),h.fillStyle=l,h.beginPath(),h.arc(f,e,a,0,t,!0),h.closePath(),h.fill(),(u.name==="BRUSHED_METAL"||u.name==="BRUSHED_STAINLESS")&&(tt=u.name==="BRUSHED_METAL"?!0:!1,it=parseInt(u.gradientStop.getHexColor().substr(-6),16),rt=ki(it,5,.1,tt,.5),h.fillStyle=h.createPattern(rt.fill(0,0,o,s),"no-repeat"),h.fill());else if(u.name==="STAINLESS"||u.name==="TURNED"){if(d=[0,.03,.1,.14,.24,.33,.38,.5,.62,.67,.76,.81,.85,.97,1],g=[new n("#FDFDFD"),new n("#FDFDFD"),new n("#B2B2B4"),new n("#ACACAE"),new n("#FDFDFD"),new n("#8E8E8E"),new n("#8E8E8E"),new n("#FDFDFD"),new n("#8E8E8E"),new n("#8E8E8E"),new n("#FDFDFD"),new n("#ACACAE"),new n("#B2B2B4"),new n("#FDFDFD"),new n("#FDFDFD")],l=new at(d,g),l.fillCircle(h,f,e,0,a),u.name==="TURNED"){for(p=a,y=p*.55,v=c*(500/p),h.save(),h.beginPath(),h.arc(f,e,p,0,t),h.closePath(),h.clip(),h.lineWidth=.5,ut=t-v*.3,b=0;b<ut;b+=v)h.strokeStyle="rgba(240, 240, 255, 0.25)",h.beginPath(),h.arc(f+y,e,y,0,t),h.stroke(),h.translate(f,e),h.rotate(v*.3),h.translate(-f,-e),h.strokeStyle="rgba(25, 10, 10, 0.1)",h.beginPath(),h.arc(f+y,e,y,0,t),h.stroke(),h.translate(f,e),h.rotate(v-v*.3),h.translate(-f,-e);h.restore()}}else l=h.createLinearGradient(0,o*.084112,0,a*2),l.addColorStop(0,u.gradientStart.getRgbaColor()),l.addColorStop(.4,u.gradientFraction.getRgbaColor()),l.addColorStop(1,u.gradientStop.getRgbaColor()),h.fillStyle=l,h.fill();l=h.createRadialGradient(f,e,0,f,e,a);l.addColorStop(0,"rgba(0, 0, 0, 0)");l.addColorStop(.7,"rgba(0, 0, 0, 0)");l.addColorStop(.71,"rgba(0, 0, 0, 0)");l.addColorStop(.86,"rgba(0, 0, 0, 0.03)");l.addColorStop(.92,"rgba(0, 0, 0, 0.07)");l.addColorStop(.97,"rgba(0, 0, 0, 0.15)");l.addColorStop(1,"rgba(0, 0, 0, 0.3)");h.fillStyle=l;h.beginPath();h.arc(f,e,a,0,t,!0);h.closePath();h.fill();nt.cache[k]=w}return i.drawImage(nt.cache[k],0,0),this};nt.cache={};bt=function(n,i,r,u,f,e){var o=f*.831775,s=e*.831775,h=(f-o)/2,c=(e-s)/2;return i!==null&&i.height>0&&i.width>0&&(n.save(),n.beginPath(),n.arc(r,u,f*.831775/2,0,t,!0),n.clip(),n.drawImage(i,h,c,o,s),n.restore()),this};tt=function(n,t,i,u,f,e,o,s,h){var b,c,v=Math.ceil(u*.084112),y=i*.5-v/2,p=u*.5-v/2,d=i*.008,a,w,k=t.type+i+u+f+(e!==undefined?e.type:"-")+(o!==undefined?o.style:"-")+(h!==undefined?h.type:"-");if(!tt.cache[k]){b=r(i,u);c=b.getContext("2d");f&&(c.shadowColor="rgba(0, 0, 0, 0.8)",c.shadowOffsetX=c.shadowOffsetY=d,c.shadowBlur=d*2,s===steelseries.GaugeType.TYPE5?steelseries.Orientation.WEST===h?(y=i*.733644-v/2,c.drawImage(l(v,e,o),y,p)):steelseries.Orientation.EAST===h?(y=i*(1-.733644)-v/2,c.drawImage(l(v,e,o),y,p)):(p=u*.733644-v/2,c.drawImage(l(v,e,o),y,u*.6857)):c.drawImage(l(v,e,o),y,p),c.shadowOffsetX=c.shadowOffsetY=0,c.shadowBlur=0);switch(t.type){case"type2":c.beginPath();c.moveTo(i*.135514,u*.696261);c.bezierCurveTo(i*.214953,u*.588785,i*.317757,u*.5,i*.462616,u*.425233);c.bezierCurveTo(i*.612149,u*.345794,i*.733644,u*.317757,i*.873831,u*.322429);c.bezierCurveTo(i*.766355,u*.112149,i*.528037,u*.023364,i*.313084,u*.130841);c.bezierCurveTo(i*.09813,u*.238317,i*.028037,u*.485981,i*.135514,u*.696261);c.closePath();a=c.createLinearGradient(.313084*i,.135514*u,.495528*i,.493582*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type3":c.beginPath();c.moveTo(i*.084112,u*.509345);c.bezierCurveTo(i*.21028,u*.556074,i*.462616,u*.560747,i*.5,u*.560747);c.bezierCurveTo(i*.537383,u*.560747,i*.794392,u*.560747,i*.915887,u*.509345);c.bezierCurveTo(i*.915887,u*.2757,i*.738317,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.261682,u*.084112,i*.084112,u*.2757,i*.084112,u*.509345);c.closePath();a=c.createLinearGradient(0,.093457*u,0,.556073*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type4":c.beginPath();c.moveTo(i*.67757,u*.24299);c.bezierCurveTo(i*.771028,u*.308411,i*.822429,u*.411214,i*.813084,u*.528037);c.bezierCurveTo(i*.799065,u*.654205,i*.719626,u*.757009,i*.593457,u*.799065);c.bezierCurveTo(i*.485981,u*.831775,i*.369158,u*.808411,i*.285046,u*.728971);c.bezierCurveTo(i*.2757,u*.719626,i*.252336,u*.714953,i*.233644,u*.728971);c.bezierCurveTo(i*.214953,u*.747663,i*.219626,u*.771028,i*.228971,u*.7757);c.bezierCurveTo(i*.331775,u*.878504,i*.476635,u*.915887,i*.616822,u*.869158);c.bezierCurveTo(i*.771028,u*.822429,i*.873831,u*.691588,i*.88785,u*.53271);c.bezierCurveTo(i*.897196,u*.38785,i*.836448,u*.257009,i*.719626,u*.182242);c.bezierCurveTo(i*.705607,u*.172897,i*.682242,u*.163551,i*.663551,u*.186915);c.bezierCurveTo(i*.654205,u*.205607,i*.668224,u*.238317,i*.67757,u*.24299);c.closePath();a=c.createRadialGradient(.5*i,.5*u,0,.5*i,.5*u,.38785*i);a.addColorStop(0,"rgba(255, 255, 255, 0)");a.addColorStop(.82,"rgba(255, 255, 255, 0)");a.addColorStop(.83,"rgba(255, 255, 255, 0)");a.addColorStop(1,"rgba(255, 255, 255, 0.15)");c.beginPath();c.moveTo(i*.261682,u*.224299);c.bezierCurveTo(i*.285046,u*.238317,i*.252336,u*.285046,i*.24299,u*.317757);c.bezierCurveTo(i*.24299,u*.350467,i*.271028,u*.383177,i*.271028,u*.397196);c.bezierCurveTo(i*.2757,u*.415887,i*.261682,u*.457943,i*.238317,u*.509345);c.bezierCurveTo(i*.224299,u*.542056,i*.17757,u*.612149,i*.158878,u*.612149);c.bezierCurveTo(i*.144859,u*.612149,i*.088785,u*.546728,i*.130841,u*.369158);c.bezierCurveTo(i*.140186,u*.336448,i*.214953,u*.200934,i*.261682,u*.224299);c.closePath();w=c.createLinearGradient(.130841*i,.369158*u,.273839*i,.412877*u);w.addColorStop(0,"rgba(255, 255, 255, 0.275)");w.addColorStop(1,"rgba(255, 255, 255, 0.015)");c.fillStyle=w;c.fill();break;case"type5":c.beginPath();c.moveTo(i*.084112,u*.5);c.bezierCurveTo(i*.084112,u*.271028,i*.271028,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.700934,u*.084112,i*.864485,u*.224299,i*.906542,u*.411214);c.bezierCurveTo(i*.911214,u*.439252,i*.911214,u*.518691,i*.845794,u*.537383);c.bezierCurveTo(i*.794392,u*.546728,i*.551401,u*.411214,i*.392523,u*.457943);c.bezierCurveTo(i*.168224,u*.509345,i*.135514,u*.7757,i*.093457,u*.593457);c.bezierCurveTo(i*.088785,u*.560747,i*.084112,u*.53271,i*.084112,u*.5);c.closePath();a=c.createLinearGradient(0,.084112*u,0,.644859*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type1":default:c.beginPath();c.moveTo(i*.084112,u*.509345);c.bezierCurveTo(i*.205607,u*.448598,i*.336448,u*.415887,i*.5,u*.415887);c.bezierCurveTo(i*.672897,u*.415887,i*.789719,u*.443925,i*.915887,u*.509345);c.bezierCurveTo(i*.915887,u*.2757,i*.738317,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.261682,u*.084112,i*.084112,u*.2757,i*.084112,u*.509345);c.closePath();a=c.createLinearGradient(0,.088785*u,0,.490654*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)")}c.fillStyle=a;c.fill();tt.cache[k]=b}return n.drawImage(tt.cache[k],0,0),this};tt.cache={};l=function(n,i,u){var h,f,o=n/2,s=n/2,e,c=n.toString()+i.type+u.style;if(!l.cache[c]){h=r(n*1.18889,n*1.18889);f=h.getContext("2d");switch(i.type){case"metalKnob":f.beginPath();f.moveTo(0,n*.5);f.bezierCurveTo(0,n*.222222,n*.222222,0,n*.5,0);f.bezierCurveTo(n*.777777,0,n,n*.222222,n,n*.5);f.bezierCurveTo(n,n*.777777,n*.777777,n,n*.5,n);f.bezierCurveTo(n*.222222,n,0,n*.777777,0,n*.5);f.closePath();e=f.createLinearGradient(0,0,0,n);e.addColorStop(0,"rgb(92, 95, 101)");e.addColorStop(.47,"rgb(46, 49, 53)");e.addColorStop(1,"rgb(22, 23, 26)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.055555,n*.5);f.bezierCurveTo(n*.055555,n*.277777,n*.277777,n*.055555,n*.5,n*.055555);f.bezierCurveTo(n*.722222,n*.055555,n*.944444,n*.277777,n*.944444,n*.5);f.bezierCurveTo(n*.944444,n*.722222,n*.722222,n*.944444,n*.5,n*.944444);f.bezierCurveTo(n*.277777,n*.944444,n*.055555,n*.722222,n*.055555,n*.5);f.closePath();e=f.createLinearGradient(0,.055555*n,0,.944443*n);switch(u.style){case"black":e.addColorStop(0,"rgb(43, 42, 47)");e.addColorStop(1,"rgb(26, 27, 32)");break;case"brass":e.addColorStop(0,"rgb(150, 110, 54)");e.addColorStop(1,"rgb(124, 95, 61)");break;case"silver":default:e.addColorStop(0,"rgb(204, 204, 204)");e.addColorStop(1,"rgb(87, 92, 98)")}f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.777777,n*.833333);f.bezierCurveTo(n*.722222,n*.722222,n*.611111,n*.666666,n*.5,n*.666666);f.bezierCurveTo(n*.388888,n*.666666,n*.277777,n*.722222,n*.222222,n*.833333);f.bezierCurveTo(n*.277777,n*.888888,n*.388888,n*.944444,n*.5,n*.944444);f.bezierCurveTo(n*.611111,n*.944444,n*.722222,n*.888888,n*.777777,n*.833333);f.closePath();e=f.createRadialGradient(.555555*n,.944444*n,0,.555555*n,.944444*n,.388888*n);e.addColorStop(0,"rgba(255, 255, 255, 0.6)");e.addColorStop(1,"rgba(255, 255, 255, 0)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.944444,n*.277777);f.bezierCurveTo(n*.833333,n*.111111,n*.666666,0,n*.5,0);f.bezierCurveTo(n*.333333,0,n*.166666,n*.111111,n*.055555,n*.277777);f.bezierCurveTo(n*.166666,n*.333333,n*.333333,n*.388888,n*.5,n*.388888);f.bezierCurveTo(n*.666666,n*.388888,n*.833333,n*.333333,n*.944444,n*.277777);f.closePath();e=f.createRadialGradient(.5*n,0,0,.5*n,0,.583333*n);e.addColorStop(0,"rgba(255, 255, 255, 0.749019)");e.addColorStop(1,"rgba(255, 255, 255, 0)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.277777,n*.555555);f.bezierCurveTo(n*.277777,n*.388888,n*.388888,n*.277777,n*.5,n*.277777);f.bezierCurveTo(n*.611111,n*.277777,n*.777777,n*.388888,n*.777777,n*.555555);f.bezierCurveTo(n*.777777,n*.666666,n*.611111,n*.777777,n*.5,n*.777777);f.bezierCurveTo(n*.388888,n*.777777,n*.277777,n*.666666,n*.277777,n*.555555);f.closePath();e=f.createLinearGradient(0,.277777*n,0,.722221*n);e.addColorStop(0,"#000000");e.addColorStop(1,"rgb(204, 204, 204)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.333333,n*.555555);f.bezierCurveTo(n*.333333,n*.444444,n*.388888,n*.333333,n*.5,n*.333333);f.bezierCurveTo(n*.611111,n*.333333,n*.722222,n*.444444,n*.722222,n*.555555);f.bezierCurveTo(n*.722222,n*.611111,n*.611111,n*.722222,n*.5,n*.722222);f.bezierCurveTo(n*.388888,n*.722222,n*.333333,n*.611111,n*.333333,n*.555555);f.closePath();e=f.createLinearGradient(0,.333333*n,0,.666666*n);e.addColorStop(0,"rgb(10, 9, 1)");e.addColorStop(1,"rgb(42, 41, 37)");f.fillStyle=e;f.fill();break;case"standardKnob":e=f.createLinearGradient(0,0,0,n);e.addColorStop(0,"rgb(180, 180, 180)");e.addColorStop(.46,"rgb(63, 63, 63)");e.addColorStop(1,"rgb(40, 40, 40)");f.fillStyle=e;f.beginPath();f.arc(o,s,n/2,0,t,!0);f.closePath();f.fill();e=f.createLinearGradient(0,n-n*.77,0,n-n*.77+n*.77);switch(u.style){case"black":e.addColorStop(0,"rgb(191, 191, 191)");e.addColorStop(.5,"rgb(45, 44, 49)");e.addColorStop(1,"rgb(125, 126, 128)");break;case"brass":e.addColorStop(0,"rgb(223, 208, 174)");e.addColorStop(.5,"rgb(123, 95, 63)");e.addColorStop(1,"rgb(207, 190, 157)");break;case"silver":default:e.addColorStop(0,"rgb(215, 215, 215)");e.addColorStop(.5,"rgb(116, 116, 116)");e.addColorStop(1,"rgb(215, 215, 215)")}f.fillStyle=e;f.beginPath();f.arc(o,s,n*.77/2,0,t,!0);f.closePath();f.fill();e=f.createRadialGradient(o,s,0,o,s,n*.77/2);e.addColorStop(0,"rgba(0, 0, 0, 0)");e.addColorStop(.75,"rgba(0, 0, 0, 0)");e.addColorStop(.76,"rgba(0, 0, 0, 0.01)");e.addColorStop(1,"rgba(0, 0, 0, 0.2)");f.fillStyle=e;f.beginPath();f.arc(o,s,n*.77/2,0,t,!0);f.closePath();f.fill()}l.cache[c]=h}return l.cache[c]};l.cache={};a=function(n,i,f){var c,e,s=2*Math.round(n/4),h=2*Math.round(n/4),o,l=n.toString()+i+f.outerColor_ON;if(!a.cache[l]){c=r(n,n);e=c.getContext("2d");switch(i){case 0:o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,f.innerColor1_OFF);o.addColorStop(.2,f.innerColor2_OFF);o.addColorStop(1,f.outerColor_OFF);e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,"rgba(0, 0, 0, 0)");o.addColorStop(.8,"rgba(0, 0, 0, 0)");o.addColorStop(1,"rgba(0, 0, 0, 0.4)");e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createLinearGradient(0,.35*n,0,.35*n+.15*n);o.addColorStop(0,"rgba(255, 255, 255, 0.4)");o.addColorStop(1,"rgba(255, 255, 255, 0)");e.fillStyle=o;e.beginPath();e.arc(s,.35*n+.2*n/2,n*.2,0,t,!0);e.closePath();e.fill();break;case 1:o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,f.innerColor1_ON);o.addColorStop(.2,f.innerColor2_ON);o.addColorStop(1,f.outerColor_ON);e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,"rgba(0, 0, 0, 0)");o.addColorStop(.8,"rgba(0, 0, 0, 0)");o.addColorStop(1,"rgba(0, 0, 0, 0.4)");e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createLinearGradient(0,.35*n,0,.35*n+.15*n);o.addColorStop(0,"rgba(255, 255, 255, 0.4)");o.addColorStop(1,"rgba(255, 255, 255, 0)");e.fillStyle=o;e.beginPath();e.arc(s,.35*n+.2*n/2,n*.2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n/2);o.addColorStop(0,u(f.coronaColor,0));o.addColorStop(.6,u(f.coronaColor,.4));o.addColorStop(.7,u(f.coronaColor,.25));o.addColorStop(.8,u(f.coronaColor,.15));o.addColorStop(.85,u(f.coronaColor,.05));o.addColorStop(1,u(f.coronaColor,0));e.fillStyle=o;e.beginPath();e.arc(s,h,n/2,0,t,!0);e.closePath();e.fill()}a.cache[l]=c}return a.cache[l]};a.cache={};it=function(n,t,i){var e,f,o=0,v=n,c=t,l=Math.min(n,t)*.095,u,s=1,y=n-2,a=t-2,p=l-1,h=n.toString()+t+JSON.stringify(i);return it.cache[h]||(e=r(n,t),f=e.getContext("2d"),u=f.createLinearGradient(0,o,0,o+c),u.addColorStop(0,"#4c4c4c"),u.addColorStop(.08,"#666666"),u.addColorStop(.92,"#666666"),u.addColorStop(1,"#e6e6e6"),f.fillStyle=u,dt(f,0,o,v,c,l),f.fill(),u=f.createLinearGradient(0,s,0,s+a),u.addColorStop(0,i.gradientStartColor),u.addColorStop(.03,i.gradientFraction1Color),u.addColorStop(.49,i.gradientFraction2Color),u.addColorStop(.5,i.gradientFraction3Color),u.addColorStop(1,i.gradientStopColor),f.fillStyle=u,dt(f,1,s,y,a,p),f.fill(),it.cache[h]=e),it.cache[h]};it.cache={};et=function(n,t,i,r){var f,u,e=n.toString()+t+i+r;return et.cache[e]||(f=d.createElement("canvas"),u=f.getContext("2d"),f.width=n,f.height=n,u.fillStyle=t,i?(u.beginPath(),u.moveTo(n*.5,n),u.lineTo(0,0),u.lineTo(n,0),u.closePath(),u.fill()):r?(u.beginPath(),u.moveTo(n,n*.5),u.lineTo(0,0),u.lineTo(0,n),u.closePath(),u.fill()):(u.beginPath(),u.moveTo(n*.5,0),u.lineTo(n,n),u.lineTo(0,n),u.closePath(),u.fill()),et.cache[e]=f),et.cache[e]};et.cache={};w=function(n,i,f){var o=n*2,h,e,s,c=i.state+n+JSON.stringify(f),l=function(){var r=f[0];i.state==="up"?(s=e.createRadialGradient(.5*n,.2*o,0,.5*n,.2*o,.5*n),s.addColorStop(0,r.innerColor1_ON),s.addColorStop(.2,r.innerColor2_ON),s.addColorStop(1,r.outerColor_ON)):(s=e.createLinearGradient(0,0,0,.5*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"));e.fillStyle=s;e.beginPath();e.moveTo(.5*n,0);e.lineTo(n,.2*o);e.lineTo(.752*n,.2*o);e.lineTo(.752*n,.37*o);e.lineTo(.252*n,.37*o);e.lineTo(.252*n,.2*o);e.lineTo(0,.2*o);e.closePath();e.fill();i.state!=="up"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(0,.2*o),e.lineTo(.5*n,0),e.lineTo(n,.2*o),e.moveTo(.252*n,.2*o),e.lineTo(.252*n,.37*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(.252*n,.37*o),e.lineTo(.752*n,.37*o),e.lineTo(.752*n,.2*o),e.lineTo(n,.2*o),e.stroke()):(s=e.createRadialGradient(.5*n,.2*o,0,.5*n,.2*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.2*o,.7*n,0,t,!0),e.closePath(),e.fill())},a=function(){var r=f[1];e.beginPath();i.state==="steady"?(s=r.outerColor_ON,e.fillStyle=s,e.rect(.128*n,.41*o,.744*n,.074*o),e.rect(.128*n,.516*o,.744*n,.074*o),e.closePath(),e.fill()):(s=e.createLinearGradient(0,.41*o,0,.41*o+.074*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"),e.fillStyle=s,e.rect(.128*n,.41*o,.744*n,.074*o),e.closePath(),e.fill(),s=e.createLinearGradient(0,.516*o,0,.516*o+.074*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"),e.fillStyle=s,e.rect(.128*n,.516*o,.744*n,.074*o),e.closePath(),e.fill());i.state!=="steady"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(.128*n,.41*o+.074*o),e.lineTo(.128*n,.41*o),e.lineTo(.128*n+.744*n,.41*o),e.stroke(),e.beginPath(),e.moveTo(.128*n,.516*o+.074*o),e.lineTo(.128*n,.516*o),e.lineTo(.128*n+.744*n,.516*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(.128*n+.744*n,.41*o),e.lineTo(.128*n+.744*n,.41*o+.074*o),e.lineTo(.128*n,.41*o+.074*o),e.stroke(),e.beginPath(),e.moveTo(.128*n+.744*n,.516*o),e.lineTo(.128*n+.744*n,.516*o+.074*o),e.lineTo(.128*n,.516*o+.074*o),e.stroke()):(s=e.createRadialGradient(.5*n,.5*o,0,.5*n,.5*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.5*o,.7*n,0,t,!0),e.closePath(),e.fill())},v=function(){var r=f[2];i.state==="down"?(s=e.createRadialGradient(.5*n,.8*o,0,.5*n,.8*o,.5*n),s.addColorStop(0,r.innerColor1_ON),s.addColorStop(.2,r.innerColor2_ON),s.addColorStop(1,r.outerColor_ON)):(s=e.createLinearGradient(0,.63*o,0,o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"));e.beginPath();e.fillStyle=s;e.moveTo(.5*n,o);e.lineTo(n,.8*o);e.lineTo(.725*n,.8*o);e.lineTo(.725*n,.63*o);e.lineTo(.252*n,.63*o);e.lineTo(.252*n,.8*o);e.lineTo(0,.8*o);e.closePath();e.fill();i.state!=="down"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(0,.8*o),e.lineTo(.252*n,.8*o),e.moveTo(.252*n,.63*o),e.lineTo(.752*n,.63*o),e.stroke(),e.beginPath(),e.moveTo(.752*n,.8*o),e.lineTo(n,.8*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(0,.8*o),e.lineTo(.5*n,o),e.lineTo(n,.8*o),e.stroke(),e.beginPath(),e.moveTo(.752*n,.8*o),e.lineTo(.752*n,.63*o),e.stroke()):(s=e.createRadialGradient(.5*n,.8*o,0,.5*n,.8*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.8*o,.7*n,0,t,!0),e.closePath(),e.fill())};if(!w.cache[c]){h=r(n*2,n*4);e=h.getContext("2d");e.translate(n*.5,n*.5);switch(i.state){case"up":v();a();l();break;case"steady":v();l();a();break;case"down":default:l();a();v()}w.cache[c]=h}return w.cache[c]};w.cache={};var fi=function(n,t,i,r,u,f,e,o,h,c){c=undefined===c?c=steelseries.GaugeType.TYPE1:c;n.save();n.textAlign=o?"center":"left";n.textBaseline="middle";n.strokeStyle=f.labelColor.getRgbaColor();n.fillStyle=f.labelColor.getRgbaColor();o?(n.font=.046728*t+"px "+s,n.fillText(r,t/2,i*.3,t*.3),n.fillText(u,t/2,i*.38,t*.3)):e?(n.font=.1*t+"px "+s,n.save(),n.translate(.671428*t,.1375*i),n.rotate(1.570796),n.fillText(r,0,0),n.translate(-.671428*t,-.1375*i),n.restore(),n.font=.071428*t+"px "+s,h?c.type==="type2"?(n.textAlign="right",n.fillText(u,.36*t,i*.79,t*.25)):n.fillText(u,.63*t,i*.85,t*.2):(n.textAlign="center",c.type==="type2"?n.fillText(u,t/2,i*.92,t*.2):n.fillText(u,t/2,i*.89,t*.2))):(n.font=.035*t+"px "+s,n.fillText(r,t*.15,i*.25,t*.3),n.font=.025*t+"px "+s,n.fillText(u,t*.0625,i*.7,t*.07));n.restore()},wi=ii(12,12,function(n){var u=n.canvas.width,t=n.canvas.height,f=0,r=0,i;n.save();n.save();n.beginPath();n.rect(0,0,u*.5,t*.5);n.closePath();n.restore();i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"rgb(35, 35, 35)");i.addColorStop(1,"rgb(23, 23, 23)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.083333,0,u*.333333,t*.416666);n.closePath();n.restore();f=.083333;r=0;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(38, 38, 38)");i.addColorStop(1,"rgb(30, 30, 30)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.5,t*.5,u*.5,t*.5);n.closePath();n.restore();f=.5;r=.5;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"rgb(35, 35, 35)");i.addColorStop(1,"rgb(23, 23, 23)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.583333,t*.5,u*.333333,t*.416666);n.closePath();n.restore();f=.583333;r=.5;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(38, 38, 38)");i.addColorStop(1,"rgb(30, 30, 30)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.5,0,u*.5,t*.5);n.closePath();n.restore();f=.5;r=0;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"#303030");i.addColorStop(1,"rgb(40, 40, 40)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.583333,t*.083333,u*.333333,t*.416666);n.closePath();n.restore();f=.583333;r=.083333;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(53, 53, 53)");i.addColorStop(1,"rgb(45, 45, 45)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(0,t*.5,u*.5,t*.5);n.closePath();n.restore();f=0;r=.5;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"#303030");i.addColorStop(1,"#282828");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.083333,t*.583333,u*.333333,t*.416666);n.closePath();n.restore();f=.083333;r=.583333;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"#353535");i.addColorStop(1,"#2d2d2d");n.fillStyle=i;n.fill();n.restore()}),bi=ii(15,15,function(n){var i=n.canvas.width,t=n.canvas.height,r;n.save();n.save();n.beginPath();n.rect(0,0,i,t);n.closePath();n.restore();n.fillStyle="#1D2123";n.fill();n.save();n.beginPath();n.moveTo(0,t*.266666);n.bezierCurveTo(0,t*.4,i*.066666,t*.466666,i*.2,t*.466666);n.bezierCurveTo(i*.333333,t*.466666,i*.4,t*.4,i*.4,t*.266666);n.bezierCurveTo(i*.4,t*.133333,i*.333333,t*.066666,i*.2,t*.066666);n.bezierCurveTo(i*.066666,t*.066666,0,t*.133333,0,t*.266666);n.closePath();r=n.createLinearGradient(0,.066666*t,0,.466666*t);r.addColorStop(0,"#000000");r.addColorStop(1,"#444444");n.fillStyle=r;n.fill();n.save();n.beginPath();n.moveTo(0,t*.2);n.bezierCurveTo(0,t*.333333,i*.066666,t*.4,i*.2,t*.4);n.bezierCurveTo(i*.333333,t*.4,i*.4,t*.333333,i*.4,t*.2);n.bezierCurveTo(i*.4,t*.066666,i*.333333,0,i*.2,0);n.bezierCurveTo(i*.066666,0,0,t*.066666,0,t*.2);n.closePath();n.fillStyle="#050506";n.fill();n.save();n.beginPath();n.moveTo(i*.466666,t*.733333);n.bezierCurveTo(i*.466666,t*.866666,i*.533333,t*.933333,i*.666666,t*.933333);n.bezierCurveTo(i*.8,t*.933333,i*.866666,t*.866666,i*.866666,t*.733333);n.bezierCurveTo(i*.866666,t*.6,i*.8,t*.533333,i*.666666,t*.533333);n.bezierCurveTo(i*.533333,t*.533333,i*.466666,t*.6,i*.466666,t*.733333);n.closePath();r=n.createLinearGradient(0,.533333*t,0,.933333*t);r.addColorStop(0,"#000000");r.addColorStop(1,"#444444");n.fillStyle=r;n.fill();n.save();n.beginPath();n.moveTo(i*.466666,t*.666666);n.bezierCurveTo(i*.466666,t*.8,i*.533333,t*.866666,i*.666666,t*.866666);n.bezierCurveTo(i*.8,t*.866666,i*.866666,t*.8,i*.866666,t*.666666);n.bezierCurveTo(i*.866666,t*.533333,i*.8,t*.466666,i*.666666,t*.466666);n.bezierCurveTo(i*.533333,t*.466666,i*.466666,t*.533333,i*.466666,t*.666666);n.closePath();n.fillStyle="#050506";n.fill();n.restore()}),ki=function(n,t,i,u,f){function e(n,t){return n+=(2*Math.random()-1)*t|0,n<0?0:n>255?255:n}function s(n){return n<0?0:n>255?255:n}function h(n,t,i,r,u,f){var o,v,e,a,s,h,c,l;for(u>=i&&(u=i-1),a=1/(u*2+1),s=0,v=0;v<r;v++){for(h=c=l=0,o=0;o<u;o++)e=(s+o)*4,h+=n.data[e],c+=n.data[e+1],l+=n.data[e+2];for(o=0;o<i;o++)o>u&&(e=(s-u-1)*4,h-=n.data[e],c-=n.data[e+1],l-=n.data[e+2]),o+u<i&&(e=(s+u)*4,h+=n.data[e],c+=n.data[e+1],l+=n.data[e+2]),e=s*4,t.data[e]=h*a|0,t.data[e+1]=c*a|0,t.data[e+2]=l*a|0,t.data[e+3]=f,s++}}return this.fill=function(c,l,a,v){var k,d,nt,ot,p,b,st,g,y,ht,ct=255,lt=n>>16&255,at=n>>8&255,vt=n&255,tt=0,it=255*i,yt,pt,wt,w,rt,ut,ft,et;if(c=Math.floor(c),l=Math.floor(l),a=Math.ceil(a),v=Math.ceil(v),p=a-c,b=v-l,st=r(p,b),g=st.getContext("2d"),y=g.createImageData(p,b),ht=g.createImageData(p,b),f!==0)for(ot=[],k=0;k<p;k++)ot[k]=255*f*Math.sin(k/p*o)|0;for(nt=0;nt<b;nt++)for(t!==0&&(yt=pt=wt=0),d=0;d<p;d++)w=nt*p*4+d*4,rt=lt,ut=at,ft=vt,f!==0&&(et=ot[d],rt+=et,ut+=et,ft+=et),u?(tt=(2*Math.random()-1)*it|0,y.data[w]=s(rt+tt),y.data[w+1]=s(ut+tt),y.data[w+2]=s(ft+tt),y.data[w+3]=ct):(y.data[w]=e(rt,it),y.data[w+1]=e(ut,it),y.data[w+2]=e(ft,it),y.data[w+3]=ct);return t>0?(h(y,ht,p,b,t,ct),g.putImageData(ht,c,l)):g.putImageData(y,c,l),st},this},n=function(n,t,i,r){function s(){u=p(n,255);f=p(t,255);e=p(i,255);o=p(r,1)}var u,f,e,o;arguments.length===1?(i=parseInt(n.substr(5,2),16),t=parseInt(n.substr(3,2),16),n=parseInt(n.substr(1,2),16),r=1):arguments.length===3&&(r=1);s();this.getRed=function(){return u};this.setRed=function(n){u=p(n,255)};this.getGreen=function(){return f};this.setGreen=function(n){f=p(n,255)};this.getBlue=function(){return e};this.setBlue=function(n){e=p(n,255)};this.getAlpha=function(){return o};this.setAlpha=function(n){o=p(n,1)};this.getRgbaColor=function(){return"rgba("+u+", "+f+", "+e+", "+o+")"};this.getRgbColor=function(){return"rgb("+u+", "+f+", "+e+")"};this.getHexColor=function(){return"#"+u.toString(16)+f.toString(16)+e.toString(16)}},at=function(n,i){for(var f=n.length-1,u=0;u<=f;u++)n[u]=t*n[u]-o;this.fillCircle=function(t,e,o,s,h){var w,l=Math.ceil(h),c=l*2,a,tt,v,y,b,k,it,g,p,d,nt,rt;for(a=t.createImageData(c,c),tt=255,y=0;y<c;y++)for(k=l-y,it=k*k,v=0;v<c;v++)if(b=v-l,g=Math.sqrt(b*b+it),g<=l&&g>=s){for(w=Math.atan2(b,k),u=0;u<f;u++)w>=n[u]&&w<n[u+1]&&(d=kt(i[u],i[u+1],n[u+1]-n[u],w-n[u],!0));p=(c-y)*c*4+v*4;a.data[p]=d[0];a.data[p+1]=d[1];a.data[p+2]=d[2];a.data[p+3]=tt}nt=r(c,c);rt=nt.getContext("2d");rt.putImageData(a,0,0);t.drawImage(nt,e-l,o-l)};this.fillRect=function(t,e,o,s,h,c,l){var w,k,d,y,nt,a,v,tt,it,p,b,g,rt;for(s=Math.ceil(s),h=Math.ceil(h),k=s/2,d=h/2,c=Math.ceil(c),l=Math.ceil(l),y=t.createImageData(s,h),nt=255,v=0;v<h;v++)for(it=d-v,a=0;a<s;a++){for(v>l&&v<=h-l&&a>c&&a<s-c&&(a=s-c),tt=a-k,w=Math.atan2(tt,it),u=0;u<f;u++)w>=n[u]&&w<n[u+1]&&(b=kt(i[u],i[u+1],n[u+1]-n[u],w-n[u],!0));p=(h-v)*s*4+a*4;y.data[p]=b[0];y.data[p+1]=b[0];y.data[p+2]=b[0];y.data[p+3]=nt}g=r(s,h);rt=g.getContext("2d");rt.putImageData(y,0,0);t.drawImage(g,e-k,o-d)}},di=function(n,t,i,r){this.getColorAt=function(n){var u=0,e=0,f=1,o=1,t,s;for(n=n<0?0:n>1?1:n,t=0;t<i.length;t++){if(i[t]<n&&u<i[t]&&(u=i[t],e=t),i[t]===n)return r[t];i[t]>n&&f>=i[t]&&(f=i[t],o=t)}return s=(n-u)/(f-u),kt(r[e],r[o],1,s)};this.getStart=function(){return n};this.getEnd=function(){return t}};Math.log10=function(n){return Math.log(n)/Math.LN10};v=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/16)}}(),function(){e=function(n,t,i,r,u,f){this.gradientStart=n;this.gradientFraction=t;this.gradientStop=i;this.labelColor=r;this.symbolColor=u;this.name=f}}(),function(){f=function(n,t,i,r,u,f){this.gradientStartColor=n;this.gradientFraction1Color=t;this.gradientFraction2Color=i;this.gradientFraction3Color=r;this.gradientStopColor=u;this.textColor=f}}(),function(){y=function(n,t,i,r,u,f){this.veryDark=n;this.dark=t;this.medium=i;this.light=r;this.lighter=u;this.veryLight=f}}(),function(){ut=function(n,t,i,r,u,f,e){this.innerColor1_ON=n;this.innerColor2_ON=t;this.outerColor_ON=i;this.coronaColor=r;this.innerColor1_OFF=u;this.innerColor2_OFF=f;this.outerColor_OFF=e}}(),function(){ct=function(n){this.type=n}}(),function(){vt=function(n){this.type=n}}(),function(){ui=function(n){this.type=n}}(),function(){gt=function(n){this.style=n}}(),function(){b=function(n){this.design=n}}(),function(){h=function(n){this.type=n}}(),function(){lt=function(n){this.type=n}}(),function(){ni=function(n){this.format=n}}(),function(){ti=function(n){this.type=n}}(),function(){yt=function(n){this.state=n}}();var tr={DARK_GRAY:new e(new n(0,0,0,1),new n(51,51,51,1),new n(153,153,153,1),new n(255,255,255,1),new n(180,180,180,1),"DARK_GRAY"),SATIN_GRAY:new e(new n(45,57,57,1),new n(45,57,57,1),new n(45,57,57,1),new n(167,184,180,1),new n(137,154,150,1),"SATIN_GRAY"),LIGHT_GRAY:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"LIGHT_GRAY"),WHITE:new e(new n(255,255,255,1),new n(255,255,255,1),new n(255,255,255,1),new n(0,0,0,1),new n(80,80,80,1),"WHITE"),BLACK:new e(new n(0,0,0,1),new n(0,0,0,1),new n(0,0,0,1),new n(255,255,255,1),new n(150,150,150,1),"BLACK"),BEIGE:new e(new n(178,172,150,1),new n(204,205,184,1),new n(231,231,214,1),new n(0,0,0,1),new n(80,80,80,1),"BEIGE"),BROWN:new e(new n(245,225,193,1),new n(245,225,193,1),new n(255,250,240,1),new n(109,73,47,1),new n(89,53,27,1),"BROWN"),RED:new e(new n(198,93,95,1),new n(212,132,134,1),new n(242,218,218,1),new n(0,0,0,1),new n(90,0,0,1),"RED"),GREEN:new e(new n(65,120,40,1),new n(129,171,95,1),new n(218,237,202,1),new n(0,0,0,1),new n(0,90,0,1),"GREEN"),BLUE:new e(new n(45,83,122,1),new n(115,144,170,1),new n(227,234,238,1),new n(0,0,0,1),new n(0,0,90,1),"BLUE"),ANTHRACITE:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(250,250,250,1),new n(180,180,180,1),"ANTHRACITE"),MUD:new e(new n(80,86,82,1),new n(70,76,72,1),new n(57,62,58,1),new n(255,255,240,1),new n(225,225,210,1),"MUD"),PUNCHED_SHEET:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(255,255,255,1),new n(180,180,180,1),"PUNCHED_SHEET"),CARBON:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(255,255,255,1),new n(180,180,180,1),"CARBON"),STAINLESS:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"STAINLESS"),BRUSHED_METAL:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(0,0,0,1),new n(80,80,80,1),"BRUSHED_METAL"),BRUSHED_STAINLESS:new e(new n(50,50,54,1),new n(47,47,51,1),new n(110,110,112,1),new n(0,0,0,1),new n(80,80,80,1),"BRUSHED_STAINLESS"),TURNED:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"TURNED")},ir={BEIGE:new f("#c8c8b1","rgb(241, 237, 207)","rgb(234, 230, 194)","rgb(225, 220, 183)","rgb(237, 232, 191)","#000000"),BLUE:new f("#ffffff","rgb(231, 246, 255)","rgb(170, 224, 255)","rgb(136, 212, 255)","rgb(192, 232, 255)","#124564"),ORANGE:new f("#ffffff","rgb(255, 245, 225)","rgb(255, 217, 147)","rgb(255, 201, 104)","rgb(255, 227, 173)","#503700"),RED:new f("#ffffff","rgb(255, 225, 225)","rgb(253, 152, 152)","rgb(252, 114, 115)","rgb(254, 178, 178)","#4f0c0e"),YELLOW:new f("#ffffff","rgb(245, 255, 186)","rgb(210, 255, 0)","rgb(158, 205, 0)","rgb(210, 255, 0)","#405300"),WHITE:new f("#ffffff","#ffffff","rgb(241, 246, 242)","rgb(229, 239, 244)","#ffffff","#000000"),GRAY:new f("#414141","rgb(117, 117, 117)","rgb(87, 87, 87)","#414141","rgb(81, 81, 81)","#ffffff"),BLACK:new f("#414141","#666666","#333333","#000000","#333333","#cccccc"),GREEN:new f("rgb(33, 67, 67)","rgb(33, 67, 67)","rgb(29, 58, 58)","rgb(28, 57, 57)","rgb(23, 46, 46)","rgba(0, 185, 165, 255)"),BLUE2:new f("rgb(0, 68, 103)","rgb(8, 109, 165)","rgb(0, 72, 117)","rgb(0, 72, 117)","rgb(0, 68, 103)","rgb(111, 182, 228)"),BLUE_BLACK:new f("rgb(22, 125, 212)","rgb(3, 162, 254)","rgb(3, 162, 254)","rgb(3, 162, 254)","rgb(11, 172, 244)","#000000"),BLUE_DARKBLUE:new f("rgb(18, 33, 88)","rgb(18, 33, 88)","rgb(19, 30, 90)","rgb(17, 31, 94)","rgb(21, 25, 90)","rgb(23, 99, 221)"),BLUE_GRAY:new f("rgb(135, 174, 255)","rgb(101, 159, 255)","rgb(44, 93, 255)","rgb(27, 65, 254)","rgb(12, 50, 255)","#b2b4ed"),STANDARD:new f("rgb(131, 133, 119)","rgb(176, 183, 167)","rgb(165, 174, 153)","rgb(166, 175, 156)","rgb(175, 184, 165)","rgb(35, 42, 52)"),STANDARD_GREEN:new f("#ffffff","rgb(219, 230, 220)","rgb(179, 194, 178)","rgb(153, 176, 151)","rgb(114, 138, 109)","#080C06"),BLUE_BLUE:new f("rgb(100, 168, 253)","rgb(100, 168, 253)","rgb(95, 160, 250)","rgb(80, 144, 252)","rgb(74, 134, 255)","#002cbb"),RED_DARKRED:new f("rgb(72, 36, 50)","rgb(185, 111, 110)","rgb(148, 66, 72)","rgb(83, 19, 20)","rgb(7, 6, 14)","#FE8B92"),DARKBLUE:new f("rgb(14, 24, 31)","rgb(46, 105, 144)","rgb(19, 64, 96)","rgb(6, 20, 29)","rgb(8, 9, 10)","#3DB3FF"),LILA:new f("rgb(175, 164, 255)","rgb(188, 168, 253)","rgb(176, 159, 255)","rgb(174, 147, 252)","rgb(168, 136, 233)","#076148"),BLACKRED:new f("rgb(8, 12, 11)","rgb(10, 11, 13)","rgb(11, 10, 15)","rgb(7, 13, 9)","rgb(9, 13, 14)","#B50026"),DARKGREEN:new f("rgb(25, 85, 0)","rgb(47, 154, 0)","rgb(30, 101, 0)","rgb(30, 101, 0)","rgb(25, 85, 0)","#233123"),AMBER:new f("rgb(182, 71, 0)","rgb(236, 155, 25)","rgb(212, 93, 5)","rgb(212, 93, 5)","rgb(182, 71, 0)","#593A0A"),LIGHTBLUE:new f("rgb(125, 146, 184)","rgb(197, 212, 231)","rgb(138, 155, 194)","rgb(138, 155, 194)","rgb(125, 146, 184)","#090051"),SECTIONS:new f("#b2b2b2","#ffffff","#c4c4c4","#c4c4c4","#b2b2b2","#000000")},rr={RED:new y(new n(82,0,0,1),new n(158,0,19,1),new n(213,0,25,1),new n(240,82,88,1),new n(255,171,173,1),new n(255,217,218,1)),GREEN:new y(new n(8,54,4,1),new n(0,107,14,1),new n(15,148,0,1),new n(121,186,37,1),new n(190,231,141,1),new n(234,247,218,1)),BLUE:new y(new n(0,11,68,1),new n(0,73,135,1),new n(0,108,201,1),new n(0,141,242,1),new n(122,200,255,1),new n(204,236,255,1)),ORANGE:new y(new n(118,83,30,1),new n(215,67,0,1),new n(240,117,0,1),new n(255,166,0,1),new n(255,255,128,1),new n(255,247,194,1)),YELLOW:new y(new n(41,41,0,1),new n(102,102,0,1),new n(177,165,0,1),new n(255,242,0,1),new n(255,250,153,1),new n(255,252,204,1)),CYAN:new y(new n(15,109,109,1),new n(0,109,144,1),new n(0,144,191,1),new n(0,174,239,1),new n(153,223,249,1),new n(204,239,252,1)),MAGENTA:new y(new n(98,0,114,1),new n(128,24,72,1),new n(191,36,107,1),new n(255,48,143,1),new n(255,172,210,1),new n(255,214,23,1)),WHITE:new y(new n(210,210,210,1),new n(220,220,220,1),new n(235,235,235,1),new n(255,255,255,1),new n(255,255,255,1),new n(255,255,255,1)),GRAY:new y(new n(25,25,25,1),new n(51,51,51,1),new n(76,76,76,1),new n(128,128,128,1),new n(204,204,204,1),new n(243,243,243,1)),BLACK:new y(new n(0,0,0,1),new n(5,5,5,1),new n(10,10,10,1),new n(15,15,15,1),new n(20,20,20,1),new n(25,25,25,1)),RAITH:new y(new n(0,32,65,1),new n(0,65,125,1),new n(0,106,172,1),new n(130,180,214,1),new n(148,203,242,1),new n(191,229,255,1)),GREEN_LCD:new y(new n(0,55,45,1),new n(15,109,93,1),new n(0,185,165,1),new n(48,255,204,1),new n(153,255,227,1),new n(204,255,241,1)),JUG_GREEN:new y(new n(0,56,0,1),new n(32,69,36,1),new n(50,161,0,1),new n(129,206,0,1),new n(190,231,141,1),new n(234,247,218,1))},ur={RED_LED:new ut("#FF9A89","#FF9A89","#FF3300","#FF8D70","#7E1C00","#7E1C00","#641B00"),GREEN_LED:new ut("#9AFF89","#9AFF89","#59FF2A","#A5FF00","#1C7E00","#1C7E00","#1B6400"),BLUE_LED:new ut("#899AFF","#899AFF","#0033FF","#708DFF","#001C7E","#001C7E","#001B64"),ORANGE_LED:new ut("#FEA23F","#FEA23F","#FD6C00","#FD6C00","#592800","#592800","#421F00"),YELLOW_LED:new ut("#FFFF62","#FFFF62","#FFFF00","#FFFF00","#6B6D00","#6B6D00","#515300"),CYAN_LED:new ut("#00FFFF","#00FFFF","#1BC3C3","#00FFFF","#083B3B","#083B3B","#052727"),MAGENTA_LED:new ut("#D300FF","#D300FF","#8600CB","#C300FF","#38004B","#38004B","#280035")},fr={TYPE1:new ct("type1"),TYPE2:new ct("type2"),TYPE3:new ct("type3"),TYPE4:new ct("type4"),TYPE5:new ct("type5")},er={NORTH:new vt("north"),SOUTH:new vt("south"),EAST:new vt("east"),WEST:new vt("west")},or={STANDARD_KNOB:new ui("standardKnob"),METAL_KNOB:new ui("metalKnob")},sr={BLACK:new gt("black"),BRASS:new gt("brass"),SILVER:new gt("silver")},hr={BLACK_METAL:new b("blackMetal"),METAL:new b("metal"),SHINY_METAL:new b("shinyMetal"),BRASS:new b("brass"),STEEL:new b("steel"),CHROME:new b("chrome"),GOLD:new b("gold"),ANTHRACITE:new b("anthracite"),TILTED_GRAY:new b("tiltedGray"),TILTED_BLACK:new b("tiltedBlack"),GLOSSY_METAL:new b("glossyMetal")},cr={TYPE1:new h("type1"),TYPE2:new h("type2"),TYPE3:new h("type3"),TYPE4:new h("type4"),TYPE5:new h("type5"),TYPE6:new h("type6"),TYPE7:new h("type7"),TYPE8:new h("type8"),TYPE9:new h("type9"),TYPE10:new h("type10"),TYPE11:new h("type11"),TYPE12:new h("type12"),TYPE13:new h("type13"),TYPE14:new h("type14"),TYPE15:new h("type15"),TYPE16:new h("type16")},lr={TYPE1:new lt("type1"),TYPE2:new lt("type2"),TYPE3:new lt("type3"),TYPE4:new lt("type4"),TYPE5:new lt("type5")},ar={STANDARD:new ni("standard"),FRACTIONAL:new ni("fractional"),SCIENTIFIC:new ni("scientific")},vr={NORMAL:new ti("normal"),HORIZONTAL:new ti("horizontal"),TANGENT:new ti("tangent")},yr={UP:new yt("up"),STEADY:new yt("steady"),DOWN:new yt("down"),OFF:new yt("off")};return{Radial:hi,RadialBargraph:ci,DisplaySingle:li,WindDirection:ai,Led:vi,Odometer:yi,drawFrame:g,drawBackground:nt,drawForeground:tt,rgbaColor:n,ConicalGradient:at,setAlpha:u,getColorFromFraction:kt,gradientWrapper:di,BackgroundColor:tr,LcdColor:ir,ColorDef:rr,LedColor:ur,GaugeType:fr,Orientation:er,FrameDesign:hr,PointerType:cr,ForegroundType:lr,KnobType:or,KnobStyle:sr,LabelNumberFormat:ar,TickLabelOrientation:vr,TrendState:yr,Section:gi}}()
+//# sourceMappingURL=steelseries.min.js.map
diff --git a/webfiles/lib/steelseries/scripts/src/tween.js b/webfiles/lib/steelseries/scripts/src/tween.js
new file mode 100644
index 0000000..73d1cdd
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/tween.js
@@ -0,0 +1,380 @@
+/*!*********************************************************************
+TERMS OF USE - EASING EQUATIONS
+Open source under the BSD License.
+Copyright (c) 2001 Robert Penner
+JavaScript version copyright (C) 2006 by Philippe Maegerman
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+
+   * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+   * Neither the name of the author nor the names of contributors may
+be used to endorse or promote products derived from this software
+without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*****************************************/
+function Delegate() {}
+Delegate.create = function (o, f) {
+	var a = [], i, l = arguments.length;
+	for (i = 2; i < l; i++) {
+		a[i - 2] = arguments[i];
+	}
+	return function () {
+		var aP = [].concat(arguments, a);
+		f.apply(o, aP);
+	};
+};
+
+/*
+object:
+  type:Object
+    The object you want to modify. It can be any object, a visual object that you want to animate ( document.body.style ) or an anymous object ( new Object() ).
+property:
+  type:String
+    The property that is updated on the target object, it can be empty ('')
+easing:
+  type:Function
+    The easing that will be applied to motion.
+start:
+  type:Number
+    Start value
+end:
+  type:Number
+    End value
+duration:
+  type:Number
+    Animation duration in seconds
+suffixe:
+ type:String
+   A string to append to the updated property ('%','pt','em' ...).
+*/
+
+var Tween = function (obj, prop, func, begin, finish, duration, suffixe) {
+	this.init(obj, prop, func, begin, finish, duration, suffixe);
+};
+var t = Tween.prototype;
+
+t.obj = {};
+t.prop = '';
+t.func = function (t, b, c, d) { return c * t / d + b; };
+t.begin = 0;
+t.change = 0;
+t.prevTime = 0;
+t.prevPos = 0;
+t.looping = false;
+t._duration = 0;
+t._time = 0;
+t._pos = 0;
+t._position = 0;
+t._startTime = 0;
+t._finish = 0;
+t.name = '';
+t.suffixe = '';
+t._listeners = [];
+t.setTime = function (t) {
+	this.prevTime = this._time;
+	if (t > this.getDuration()) {
+		if (this.looping) {
+			this.rewind(t - this._duration);
+			this.update();
+			this.broadcastMessage('onMotionLooped', {target: this, type: 'onMotionLooped'});
+		} else {
+			this._time = this._duration;
+			this.update();
+			this.stop();
+			this.broadcastMessage('onMotionFinished', {target: this, type: 'onMotionFinished'});
+		}
+	} else if (t < 0) {
+		this.rewind();
+		this.update();
+	} else {
+		this._time = t;
+		this.update();
+	}
+};
+t.getTime = function () {
+	return this._time;
+};
+t.setDuration = function (d) {
+	this._duration = (d === null || d <= 0) ? 100000 : d;
+};
+t.getDuration = function () {
+	return this._duration;
+};
+t.setPosition = function (p) {
+	this.prevPos = this._pos;
+	var a = this.suffixe !== '' ? this.suffixe : '';
+	this.obj[this.prop] = Math.round(p) + a;
+	this._pos = p;
+	this.broadcastMessage('onMotionChanged', {target: this, type: 'onMotionChanged'});
+};
+t.getPosition = function (t) {
+	if (t === undefined) {
+		t = this._time;
+	}
+	return this.func(t, this.begin, this.change, this._duration);
+};
+t.setFinish = function (f) {
+	this.change = f - this.begin;
+};
+t.getFinish = function () {
+	return this.begin + this.change;
+};
+t.init = function (obj, prop, func, begin, finish, duration, suffixe) {
+	if (!arguments.length) {
+		return;
+	}
+	this._listeners = [];
+	this.addListener(this);
+	if (suffixe) {
+		this.suffixe = suffixe;
+	}
+	this.obj = obj;
+	this.prop = prop;
+	this.begin = begin;
+	this._pos = begin;
+	this.setDuration(duration);
+	if (func !== null && func !== '') {
+		this.func = func;
+	}
+	this.setFinish(finish);
+};
+t.start = function () {
+	this.rewind();
+	this.startEnterFrame();
+	this.broadcastMessage('onMotionStarted', {target: this, type: 'onMotionStarted'});
+	//alert('in');
+};
+t.rewind = function (t) {
+	this.stop();
+	this._time = (t === undefined) ? 0 : t;
+	this.fixTime();
+	this.update();
+};
+t.fforward = function () {
+	this._time = this._duration;
+	this.fixTime();
+	this.update();
+};
+t.update = function () {
+	this.setPosition(this.getPosition(this._time));
+};
+t.startEnterFrame = function () {
+	this.stopEnterFrame();
+	this.isPlaying = true;
+	this.onEnterFrame();
+};
+t.onEnterFrame = function () {
+	if (this.isPlaying) {
+		this.nextFrame();
+		// To get real smooth movement you have to set the timeout to 0 instead of 25
+		setTimeout(Delegate.create(this, this.onEnterFrame), 25);
+	}
+};
+t.nextFrame = function () {
+	this.setTime((this.getTimer() - this._startTime) / 1000);
+};
+t.stop = function () {
+	this.stopEnterFrame();
+	this.broadcastMessage('onMotionStopped', {target: this, type: 'onMotionStopped'});
+};
+t.stopEnterFrame = function () {
+	this.isPlaying = false;
+};
+t.playing = function () {
+    return this.isPlaying;
+};
+t.continueTo = function (finish, duration) {
+	this.begin = this._pos;
+	this.setFinish(finish);
+	if (this._duration !== undefined) {
+		this.setDuration(duration);
+	}
+	this.start();
+};
+t.resume = function () {
+	this.fixTime();
+	this.startEnterFrame();
+	this.broadcastMessage('onMotionResumed', {target: this, type: 'onMotionResumed'});
+};
+t.yoyo = function () {
+	this.continueTo(this.begin, this._time);
+};
+t.addListener = function (o) {
+	this.removeListener(o);
+	return this._listeners.push(o);
+};
+t.removeListener = function (o) {
+	var a = this._listeners,
+		i = a.length;
+	while (i--) {
+		if (a[i] === o) {
+			a.splice(i, 1);
+			return true;
+		}
+	}
+	return false;
+};
+t.broadcastMessage = function () {
+	var arr = [], i, e, a = this._listeners,
+		l = a.length;
+	for (i = 0; i < arguments.length; i++) {
+		arr.push(arguments[i]);
+	}
+	e = arr.shift();
+
+	for (i = 0; i < l; i++) {
+		if (a[i][e]) {
+			a[i][e].apply(a[i], arr);
+		}
+	}
+};
+t.fixTime = function () {
+	this._startTime = this.getTimer() - this._time * 1000;
+};
+t.getTimer = function () {
+	return new Date().getTime() - this._time;
+};
+Tween.backEaseIn = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	return c * (t /= d) * t * ((s + 1) * t - s) + b;
+};
+Tween.backEaseOut = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	return c * ((t = t / d - 1) * t * ((s + 1) * t + s) + 1) + b;
+};
+Tween.backEaseInOut = function (t, b, c, d, a, p) {
+	var s = 1.70158;
+	if ((t /= d / 2) < 1) {
+		return c / 2 * (t * t * (((s *= (1.525)) + 1) * t - s)) + b;
+	}
+	return c / 2 * ((t -= 2) * t * (((s *= (1.525)) + 1) * t + s) + 2) + b;
+};
+Tween.elasticEaseIn = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d) === 1) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * 0.3;
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+
+	return -(a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+
+};
+Tween.elasticEaseOut = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d) === 1) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * 0.3;
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+	return (a * Math.pow(2, -10 * t) * Math.sin((t * d - s) * (2 * Math.PI) / p) + c + b);
+};
+Tween.elasticEaseInOut = function (t, b, c, d, a, p) {
+	var s;
+	if (t === 0) {
+		return b;
+	}
+	if ((t /= d / 2) === 2) {
+		return b + c;
+	}
+	if (!p) {
+		p = d * (0.3 * 1.5);
+	}
+	if (!a || a < Math.abs(c)) {
+		a = c;
+		s = p / 4;
+	} else {
+		s = p / (2 * Math.PI) * Math.asin(c / a);
+	}
+	if (t < 1) {
+		return -0.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
+	}
+	return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * 0.5 + c + b;
+};
+Tween.bounceEaseOut = function (t, b, c, d) {
+	if ((t /= d) < (1 / 2.75)) {
+		return c * (7.5625 * t * t) + b;
+	} else if (t < (2 / 2.75)) {
+		return c * (7.5625 * (t -= (1.5 / 2.75)) * t + 0.75) + b;
+	} else if (t < (2.5 / 2.75)) {
+		return c * (7.5625 * (t -= (2.25 / 2.75)) * t + 0.9375) + b;
+	} else {
+		return c * (7.5625 * (t -= (2.625 / 2.75)) * t + 0.984375) + b;
+	}
+};
+Tween.bounceEaseIn = function (t, b, c, d) {
+	return c - Tween.bounceEaseOut(d - t, 0, c, d) + b;
+};
+Tween.bounceEaseInOut = function (t, b, c, d) {
+	if (t < d / 2) {
+		return Tween.bounceEaseIn(t * 2, 0, c, d) * 0.5 + b;
+	} else {
+		return Tween.bounceEaseOut(t * 2 - d, 0, c, d) * 0.5 + c * 0.5 + b;
+	}
+};
+Tween.strongEaseInOut = function (t, b, c, d) {
+	return c * (t /= d) * t * t * t * t + b;
+};
+Tween.regularEaseIn = function (t, b, c, d) {
+	return c * (t /= d) * t + b;
+};
+Tween.regularEaseOut = function (t, b, c, d) {
+	return -c * (t /= d) * (t - 2) + b;
+};
+Tween.regularEaseInOut = function (t, b, c, d) {
+	if ((t /= d / 2) < 1) {
+		return c / 2 * t * t + b;
+	}
+	return -c / 2 * ((--t) * (t - 2) - 1) + b;
+};
+Tween.strongEaseIn = function (t, b, c, d) {
+	return c * (t /= d) * t * t * t * t + b;
+};
+Tween.strongEaseOut = function (t, b, c, d) {
+	return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
+};
+Tween.strongEaseInOut = function (t, b, c, d) {
+	if ((t /= d / 2) < 1) {
+		return c / 2 * t * t * t * t * t + b;
+	}
+	return c / 2 * ((t -= 2) * t * t * t * t + 2) + b;
+};
diff --git a/webfiles/lib/steelseries/scripts/src/tween.min.js b/webfiles/lib/steelseries/scripts/src/tween.min.js
new file mode 100644
index 0000000..50b21ce
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/src/tween.min.js
@@ -0,0 +1,31 @@
+/*!*********************************************************************
+TERMS OF USE - EASING EQUATIONS
+Open source under the BSD License.
+Copyright (c) 2001 Robert Penner
+JavaScript version copyright (C) 2006 by Philippe Maegerman
+All rights reserved.
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+   * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+   * Neither the name of the author nor the names of contributors may
+be used to endorse or promote products derived from this software
+without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*****************************************/
+function Delegate(){}Delegate.create=function(n,t){for(var r=[],u=arguments.length,i=2;i<u;i++)r[i-2]=arguments[i];return function(){var i=[].concat(arguments,r);t.apply(n,i)}};var Tween=function(n,t,i,r,u,f,e){this.init(n,t,i,r,u,f,e)},t=Tween.prototype;t.obj={},t.prop="",t.func=function(n,t,i,r){return i*n/r+t},t.begin=0,t.change=0,t.prevTime=0,t.prevPos=0,t.looping=!1,t._duration=0,t._time=0,t._pos=0,t._position=0,t._startTime=0,t._finish=0,t.name="",t.suffixe="",t._listeners=[],t.setTime=function(n){this.prevTime=this._time,n>this.getDuration()?this.looping?(this.rewind(n-this._duration),this.update(),this.broadcastMessage("onMotionLooped",{target:this,type:"onMotionLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onMotionFinished",{target:this,type:"onMotionFinished"})):n<0?(this.rewind(),this.update()):(this._time=n,this.update())},t.getTime=function(){return this._time},t.setDuration=function(n){this._duration=n===null||n<=0?1e5:n},t.getDuration=function(){return this._duration},t.setPosition=function(n){this.prevPos=this._pos;var t=this.suffixe!==""?this.suffixe:"";this.obj[this.prop]=Math.round(n)+t,this._pos=n,this.broadcastMessage("onMotionChanged",{target:this,type:"onMotionChanged"})},t.getPosition=function(n){return n===undefined&&(n=this._time),this.func(n,this.begin,this.change,this._duration)},t.setFinish=function(n){this.change=n-this.begin},t.getFinish=function(){return this.begin+this.change},t.init=function(n,t,i,r,u,f,e){arguments.length&&(this._listeners=[],this.addListener(this),e&&(this.suffixe=e),this.obj=n,this.prop=t,this.begin=r,this._pos=r,this.setDuration(f),i!==null&&i!==""&&(this.func=i),this.setFinish(u))},t.start=function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"})},t.rewind=function(n){this.stop(),this._time=n===undefined?0:n,this.fixTime(),this.update()},t.fforward=function(){this._time=this._duration,this.fixTime(),this.update()},t.update=function(){this.setPosition(this.getPosition(this._time))},t.startEnterFrame=function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},t.onEnterFrame=function(){this.isPlaying&&(this.nextFrame(),setTimeout(Delegate.create(this,this.onEnterFrame),25))},t.nextFrame=function(){this.setTime((this.getTimer()-this._startTime)/1e3)},t.stop=function(){this.stopEnterFrame(),this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"})},t.stopEnterFrame=function(){this.isPlaying=!1},t.playing=function(){return this.isPlaying},t.continueTo=function(n,t){this.begin=this._pos,this.setFinish(n),this._duration!==undefined&&this.setDuration(t),this.start()},t.resume=function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionResumed"})},t.yoyo=function(){this.continueTo(this.begin,this._time)},t.addListener=function(n){return this.removeListener(n),this._listeners.push(n)},t.removeListener=function(n){for(var t=this._listeners,i=t.length;i--;)if(t[i]===n)return t.splice(i,1),!0;return!1},t.broadcastMessage=function(){for(var i=[],r,t=this._listeners,u=t.length,n=0;n<arguments.length;n++)i.push(arguments[n]);for(r=i.shift(),n=0;n<u;n++)t[n][r]&&t[n][r].apply(t[n],i)},t.fixTime=function(){this._startTime=this.getTimer()-this._time*1e3},t.getTimer=function(){return(new Date).getTime()-this._time},Tween.backEaseIn=function(n,t,i,r){var u=1.70158;return i*(n/=r)*n*((u+1)*n-u)+t},Tween.backEaseOut=function(n,t,i,r){var u=1.70158;return i*((n=n/r-1)*n*((u+1)*n+u)+1)+t},Tween.backEaseInOut=function(n,t,i,r){var u=1.70158;return(n/=r/2)<1?i/2*n*n*(((u*=1.525)+1)*n-u)+t:i/2*((n-=2)*n*(((u*=1.525)+1)*n+u)+2)+t},Tween.elasticEaseIn=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r)==1?t+i:(f||(f=r*.3),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),-(u*Math.pow(2,10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f))+t)},Tween.elasticEaseOut=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r)==1?t+i:(f||(f=r*.3),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),u*Math.pow(2,-10*n)*Math.sin((n*r-e)*2*Math.PI/f)+i+t)},Tween.elasticEaseInOut=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r/2)==2?t+i:(f||(f=r*.3*1.5),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),n<1)?-.5*u*Math.pow(2,10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f)+t:u*Math.pow(2,-10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f)*.5+i+t},Tween.bounceEaseOut=function(n,t,i,r){return(n/=r)<1/2.75?i*7.5625*n*n+t:n<2/2.75?i*(7.5625*(n-=1.5/2.75)*n+.75)+t:n<2.5/2.75?i*(7.5625*(n-=2.25/2.75)*n+.9375)+t:i*(7.5625*(n-=2.625/2.75)*n+.984375)+t},Tween.bounceEaseIn=function(n,t,i,r){return i-Tween.bounceEaseOut(r-n,0,i,r)+t},Tween.bounceEaseInOut=function(n,t,i,r){return n<r/2?Tween.bounceEaseIn(n*2,0,i,r)*.5+t:Tween.bounceEaseOut(n*2-r,0,i,r)*.5+i*.5+t},Tween.strongEaseInOut=function(n,t,i,r){return i*(n/=r)*n*n*n*n+t},Tween.regularEaseIn=function(n,t,i,r){return i*(n/=r)*n+t},Tween.regularEaseOut=function(n,t,i,r){return-i*(n/=r)*(n-2)+t},Tween.regularEaseInOut=function(n,t,i,r){return(n/=r/2)<1?i/2*n*n+t:-i/2*(--n*(n-2)-1)+t},Tween.strongEaseIn=function(n,t,i,r){return i*(n/=r)*n*n*n*n+t},Tween.strongEaseOut=function(n,t,i,r){return i*((n=n/r-1)*n*n*n*n+1)+t},Tween.strongEaseInOut=function(n,t,i,r){return(n/=r/2)<1?i/2*n*n*n*n*n+t:i/2*((n-=2)*n*n*n*n+2)+t}
\ No newline at end of file
diff --git a/webfiles/lib/steelseries/scripts/steelseries_tween.min.js b/webfiles/lib/steelseries/scripts/steelseries_tween.min.js
new file mode 100644
index 0000000..caf3c2b
--- /dev/null
+++ b/webfiles/lib/steelseries/scripts/steelseries_tween.min.js
@@ -0,0 +1,55 @@
+/*!
+ * Name          : steelseries.js
+ * Authors       : Gerrit Grunwald, Mark Crossley
+ * Last modified : 30.01.2015
+ * Revision      : 0.14.13
+ *
+ * Copyright (c) 2011, Gerrit Grunwald, Mark Crossley
+ * All rights reserved.
+ *
+ *  Redistribution and use in source and binary forms, with or without modification, are permitted
+ *  provided that the following conditions are met:
+ *
+ *  # Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
+ *  # Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following
+ *    disclaimer in the documentation and/or other materials provided with the distribution.
+ *
+ *   THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING,
+ *   BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT
+ *   SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+ *   DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES, LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+ *   INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE
+ *   OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+var steelseries=function(){function kt(t,i,r,u,f){var c=1/255,e=t.getRed(),o=t.getGreen(),s=t.getBlue(),h=t.getAlpha(),p=i.getRed()-e,w=i.getGreen()-o,b=i.getBlue()-s,k=i.getAlpha()*c-h*c,l=p/r*u,a=w/r*u,v=b/r*u,y=k/r*u;return f=f||!1,f?[(e+l).toFixed(0),(o+a).toFixed(0),(s+v).toFixed(0),h+y]:new n((e+l).toFixed(0),(o+a).toFixed(0),(s+v).toFixed(0),h+y)}function gi(n,t,i){return{start:n,stop:t,color:i}}function k(n,t){var r=Math.floor(Math.log10(n)),i=n/Math.pow(10,r),u;return u=t?1.5>i?1:3>i?2:7>i?5:10:1>=i?1:2>=i?2:5>=i?5:10,u*Math.pow(10,r)}function dt(n,t,i,r,u,f){var e=t+r,o=i+u;n.beginPath();n.moveTo(t+f,i);n.lineTo(e-f,i);n.quadraticCurveTo(e,i,e,i+f);n.lineTo(e,i+u-f);n.quadraticCurveTo(e,o,e-f,o);n.lineTo(t+f,o);n.quadraticCurveTo(t,o,t,o-f);n.lineTo(t,i+f);n.quadraticCurveTo(t,i,t+f,i);n.closePath()}function r(n,t){var i=d.createElement("canvas");return i.width=n,i.height=t,i}function ii(n,t,i){var r=d.createElement("canvas");return r.width=n,r.height=t,i(r.getContext("2d")),r}function rt(n){var t,i=ii(1,1,function(t){t.fillStyle=n;t.beginPath();t.rect(0,0,1,1);t.fill()});return t=i.getContext("2d").getImageData(0,0,2,2).data,[t[0],t[1],t[2],t[3]]}function ei(t){var u,f,e,o,s,r=rt(t),i=new n(r[0],r[1],r[2],r[3]);return u=oi(i,.32),f=oi(i,.62),e=ri(i,.84),o=ri(i,.94),s=ri(i,1),new y(u,f,i,e,o,s)}function st(n,t,i){var r,u,f,h=Math.floor(n*6),c=n*6-h,e=i*(1-t),o=i*(1-c*t),s=i*(1-(1-c)*t);switch(h%6){case 0:r=i;u=s;f=e;break;case 1:r=o;u=i;f=e;break;case 2:r=e;u=i;f=s;break;case 3:r=e;u=o;f=i;break;case 4:r=s;u=e;f=i;break;case 5:r=i;u=e;f=o}return[Math.floor(r*255),Math.floor(u*255),Math.floor(f*255)]}function ot(n,t,i){var e,r,u,o,s,f;if(n=n/255,t=t/255,i=i/255,r=Math.max(n,t,i),e=Math.min(n,t,i),s=r,f=r-e,o=r===0?0:f/r,r===e)u=0;else{switch(r){case n:u=(t-i)/f+(t<i?6:0);break;case t:u=(i-n)/f+2;break;case i:u=(n-t)/f+4}u/=6}return[u,o,s]}function p(n,t){return n<0?0:n>t?t:n}function oi(t,i){var r=Math.floor(t.getRed()*(1-i)),u=Math.floor(t.getGreen()*(1-i)),f=Math.floor(t.getBlue()*(1-i));return r=p(r,255),u=p(u,255),f=p(f,255),new n(r,u,f,t.getAlpha())}function ri(t,i){var r=Math.round(t.getRed()*(1+i)),u=Math.round(t.getGreen()*(1+i)),f=Math.round(t.getBlue()*(1+i));return r=p(r,255),u=p(u,255),f=p(f,255),new n(r,u,f,t.getAlpha())}function nr(n,t,i){var r,u;if(i<=t)throw"Rotary bounds are of negative or zero size";return r=i-t,u=Math.floor((n-t)/r),n-u*r}function si(n,t){return nr(t-n,-180,180)}function ht(n){var t=typeof n=="string"||n instanceof String?d.getElementById(n):n;return t.getContext("2d")}var i=Math.PI*.5,t=Math.PI*2,o=Math.PI,c=Math.PI/180,pt=180/Math.PI,d=document,wt="LCDMono2Ultra,Arial,Verdana,sans-serif",s="Arial,Verdana,sans-serif",hi=function(n,u){var yi;u=u||{};var vt=undefined===u.gaugeType?steelseries.GaugeType.TYPE4:u.gaugeType,f=undefined===u.size?0:u.size,h=undefined===u.minValue?0:u.minValue,b=undefined===u.maxValue?h+100:u.maxValue,ve=undefined===u.niceScale?!0:u.niceScale,gt=undefined===u.threshold?(b-h)/2+h:u.threshold,ti=undefined===u.thresholdRising?!0:u.thresholdRising,ci=undefined===u.section?null:u.section,li=undefined===u.area?null:u.area,vu=undefined===u.titleString?"":u.titleString,yu=undefined===u.unitString?"":u.unitString,pu=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,wu=undefined===u.frameVisible?!0:u.frameVisible,ai=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,bu=undefined===u.backgroundVisible?!0:u.backgroundVisible,oi=undefined===u.pointerType?steelseries.PointerType.TYPE1:u.pointerType,ku=undefined===u.pointerColor?steelseries.ColorDef.RED:u.pointerColor,ye=undefined===u.knobType?steelseries.KnobType.STANDARD_KNOB:u.knobType,vi=undefined===u.knobStyle?steelseries.KnobStyle.SILVER:u.knobStyle,di=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,iu=undefined===u.lcdVisible?!0:u.lcdVisible,du=undefined===u.lcdDecimals?2:u.lcdDecimals,pe=undefined===u.digitalFont?!1:u.digitalFont,gu=undefined===u.fractionalScaleDecimals?1:u.fractionalScaleDecimals,ru=undefined===u.ledColor?steelseries.LedColor.RED_LED:u.ledColor,uu=undefined===u.ledVisible?!0:u.ledVisible,fu=undefined===u.userLedColor?steelseries.LedColor.GREEN_LED:u.userLedColor,eu=undefined===u.userLedVisible?!1:u.userLedVisible,nf=undefined===u.thresholdVisible?!0:u.thresholdVisible,ou=undefined===u.minMeasuredValueVisible?!1:u.minMeasuredValueVisible,su=undefined===u.maxMeasuredValueVisible?!1:u.maxMeasuredValueVisible,tf=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,rf=undefined===u.foregroundVisible?!0:u.foregroundVisible,uf=undefined===u.labelNumberFormat?steelseries.LabelNumberFormat.STANDARD:u.labelNumberFormat,rr=undefined===u.playAlarm?!1:u.playAlarm,ff=undefined===u.alarmSound?!1:u.alarmSound,we=undefined===u.customLayer?null:u.customLayer,be=undefined===u.tickLabelOrientation?vt===steelseries.GaugeType.TYPE1?steelseries.TickLabelOrientation.TANGENT:steelseries.TickLabelOrientation.NORMAL:u.tickLabelOrientation,hu=undefined===u.trendVisible?!1:u.trendVisible,lr=undefined===u.trendColors?[steelseries.LedColor.RED_LED,steelseries.LedColor.GREEN_LED,steelseries.LedColor.CYAN_LED]:u.trendColors,ar=undefined===u.useOdometer?!1:u.useOdometer,si=undefined===u.odometerParams?{}:u.odometerParams,ke=undefined===u.odometerUseValue?!1:u.odometerUseValue,ef=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,e=ht(n);f===0&&(f=Math.min(e.canvas.width,e.canvas.height));e.canvas.width=f;e.canvas.height=f;rr&&ff!==!1&&(yi=d.createElement("audio"),yi.setAttribute("src",ff),yi.setAttribute("preload","auto"));var p=h,vr=h,of=this,pi=b,wi=h,ut=!1,yr=!1,sf=0,cu=0,bi,ki=!1,hf=steelseries.TrendState.OFF,pr=f*.06,wr=f*.29,br=f*.36,gi,yt,kr,pt,kt,lu=yt+(p-h)*kt,y=f,rt=f,st=y/2,lt=rt/2,ii=f*.093457,de=.6*y,ge=.4*rt,no=vt===steelseries.GaugeType.TYPE3?.6*y:st-ii/2,to=vt===steelseries.GaugeType.TYPE3?.72*rt:.75*rt,au=Math.floor(y/10),io=au+"px "+s,ro=au+"px "+wt,cf=rt*.13,ur=y*.4,lf=(y-ur)/2,af=rt*.57,vf,uo=rt*.61,yf=y*.006,pf=!1,dr=h,gr=b,fr=b-h,ri=gr-dr,nu=0,ui=0,nr=10,wf=10,fo=function(){ve?(fr=k(b-h,!1),ui=k(fr/(wf-1),!0),dr=Math.floor(h/ui)*ui,gr=Math.ceil(b/ui)*ui,nu=k(ui/(nr-1),!0),h=dr,b=gr,ri=b-h):(fr=b-h,dr=h,gr=b,ri=fr,ui=k(fr/(wf-1),!0),nu=k(ui/(nr-1),!0));switch(vt.type){case"type1":gi=0;yt=o;kr=i;pt=i;kt=pt/ri;break;case"type2":gi=0;yt=o;kr=i;pt=o;kt=pt/ri;break;case"type3":gi=0;yt=i;kr=0;pt=1.5*o;kt=pt/ri;break;case"type4":default:gi=60*c;yt=i+gi/2;kr=0;pt=t-gi;kt=pt/ri}lu=yt+(p-h)*kt},er=r(f,f),bf=er.getContext("2d"),or=r(f,f),at=or.getContext("2d"),kf,tr=r(ii,ii),df=tr.getContext("2d"),hi=r(ii,ii),gf=hi.getContext("2d"),ir=hi,ei=r(ii,ii),ne=ei.getContext("2d"),ni=r(ii,ii),te=ni.getContext("2d"),dt=ni,ie=r(Math.ceil(f*.028037),Math.ceil(f*.028037)),eo=ie.getContext("2d"),re=r(Math.ceil(f*.028037),Math.ceil(f*.028037)),oo=re.getContext("2d"),sr=r(f,f),ue=sr.getContext("2d"),hr=r(f,f),fe=hr.getContext("2d"),ee,oe,se,he,ce,tu,le;ar&&iu&&(tu=r(10,10),le=tu.getContext("2d"));var so=function(n,t){n.restore();n.save();n.textAlign="right";n.strokeStyle=di.textColor;n.fillStyle=di.textColor;(di===steelseries.LcdColor.STANDARD||di===steelseries.LcdColor.STANDARD_GREEN)&&(n.shadowColor="gray",n.shadowOffsetX=y*.007,n.shadowOffsetY=y*.007,n.shadowBlur=y*.007);n.font=pe?ro:io;n.fillText(t.toFixed(du),lf+ur-ur*.05,af+cf*.5+au*.38,ur*.9);n.restore()},ho=function(n){n.save();"type1"===vt.type&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.523364,rt*.130841);("type1"===vt.type||"type2"===vt.type)&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.130841,rt*.514018);("type2"===vt.type||"type3"===vt.type)&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.831775,rt*.514018);"type3"===vt.type&&n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.523364,rt*.831775);"type4"===vt.type&&(n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.336448,rt*.803738),n.drawImage(l(Math.ceil(rt*.037383),steelseries.KnobType.STANDARD_KNOB,vi),y*.626168,rt*.803738));n.restore()},co=function(){var t=d.createElement("canvas"),n,i;return t.width=Math.ceil(f*.046728),t.height=Math.ceil(t.width*.9),n=t.getContext("2d"),n.save(),i=n.createLinearGradient(0,.1,0,t.height*.9),i.addColorStop(0,"#520000"),i.addColorStop(.3,"#fc1d00"),i.addColorStop(.59,"#fc1d00"),i.addColorStop(1,"#520000"),n.fillStyle=i,n.beginPath(),n.moveTo(t.width*.5,.1),n.lineTo(t.width*.9,t.height*.9),n.lineTo(t.width*.1,t.height*.9),n.lineTo(t.width*.5,.1),n.closePath(),n.fill(),n.strokeStyle="#FFFFFF",n.stroke(),n.restore(),t},ae=function(n,t,i,r,u){if(t<h?t=h:t>b&&(t=b),i<h?i=h:i>b&&(i=b),!(t>=i)){n.save();n.strokeStyle=r;n.fillStyle=r;n.lineWidth=y*.035;var f=pt/ri*t-pt/ri*h,e=f+(i-t)/(ri/pt);n.translate(st,lt);n.rotate(yt);n.beginPath();u?(n.moveTo(0,0),n.arc(0,0,y*.365-n.lineWidth/2,f,e,!1)):n.arc(0,0,y*.365,f,e,!1);u?(n.moveTo(0,0),n.fill()):n.stroke();n.translate(-st,-lt);n.restore()}},lo=function(n,t){var w=Math.ceil(y*.04),f=yt,r=kt*nu,u,e=h,c=nr-1,a=y*.38,k=y*.35,d=y*.355,g=y*.36,p=y*.3,l=y*.1,nt=nr/2,tt=parseFloat(b.toFixed(2)),v;for(ai.labelColor.setAlpha(1),n.save(),n.textAlign="center",n.textBaseline="middle",n.font=w+"px"+s,n.strokeStyle=ai.labelColor.getRgbaColor(),n.fillStyle=ai.labelColor.getRgbaColor(),n.translate(st,lt),n.rotate(yt),(vt.type==="type1"||vt.type==="type2")&&(l=y*.04),v=h;parseFloat(v.toFixed(2))<=tt;v+=nu){if(u=r+i,c++,c===nr){n.lineWidth=1.5;n.beginPath();n.moveTo(a,0);n.lineTo(k,0);n.closePath();n.stroke();n.save();n.translate(p,0);switch(be.type){case"horizontal":u=-f;break;case"tangent":u=f<=i+o?o:0;break;case"normal":default:u=i}n.rotate(u);switch(t.format){case"fractional":n.fillText(e.toFixed(gu),0,0,l);break;case"scientific":n.fillText(e.toPrecision(2),0,0,l);break;case"standard":default:n.fillText(e.toFixed(0),0,0,l)}n.translate(-p,0);n.restore();e+=ui;c=0;n.rotate(r);f+=r;continue}0==nr%2&&c===nt?(n.lineWidth=1,n.beginPath(),n.moveTo(a,0),n.lineTo(d,0),n.closePath(),n.stroke()):(n.lineWidth=.5,n.beginPath(),n.moveTo(a,0),n.lineTo(g,0),n.closePath(),n.stroke());n.rotate(r);f+=r}n.translate(-st,-lt);n.restore()},ot=function(n){var t,r,e;n=n||{};var o=undefined===n.frame?!1:n.frame,u=undefined===n.background?!1:n.background,s=undefined===n.led?!1:n.led,c=undefined===n.userLed?!1:n.userLed,l=undefined===n.pointer?!1:n.pointer,v=undefined===n.foreground?!1:n.foreground,b=undefined===n.trend?!1:n.trend,k=undefined===n.odo?!1:n.odo;if(pf=!0,fo(),o&&wu&&g(bf,pu,st,lt,y,rt),u&&bu&&(nt(at,ai,st,lt,y,rt),bt(at,we,st,lt,y,rt)),s&&(df.drawImage(a(Math.ceil(f*.093457),1,ru),0,0),gf.drawImage(a(Math.ceil(f*.093457),0,ru),0,0)),c&&(ne.drawImage(a(Math.ceil(f*.093457),1,fu),0,0),te.drawImage(a(Math.ceil(f*.093457),0,fu),0,0)),ou&&eo.drawImage(et(Math.ceil(f*.028037),steelseries.ColorDef.BLUE.dark.getRgbaColor(),!0,!0),0,0),su&&oo.drawImage(et(Math.ceil(f*.028037),steelseries.ColorDef.RED.medium.getRgbaColor(),!0),0,0),u&&bu){if(ho(at),null!==ci&&0<ci.length){t=ci.length;do t--,ae(at,ci[t].start,ci[t].stop,ci[t].color,!1);while(0<t)}if(null!==li&&0<li.length){r=li.length;do r--,ae(at,li[r].start,li[r].stop,li[r].color,!0);while(0<r)}lo(at,uf);fi(at,y,rt,vu,yu,ai,!0,!0)}u&&nf&&(at.save(),at.translate(st,lt),at.rotate(yt+(gt-h)*kt+i),at.translate(-st,-lt),at.drawImage(co(),y*.475,rt*.13),at.translate(st,lt),at.restore());u&&iu&&(ar&&k?(ce=new steelseries.Odometer("",{_context:le,height:f*.075,decimals:si.decimals,digits:si.digits===undefined?5:si.digits,valueForeColor:si.valueForeColor,valueBackColor:si.valueBackColor,decimalForeColor:si.decimalForeColor,decimalBackColor:si.decimalBackColor,font:si.font,value:p}),vf=(y-tu.width)/2):ar||(kf=it(ur,cf,di),at.drawImage(kf,lf,af)));l&&ft(ue,y,oi,ku,ai.labelColor);v&&rf&&(e=oi.type==="type15"||oi.type==="type16"?!1:!0,tt(fe,tf,y,rt,e,ye,vi,vt));b&&hu&&(ee=w(pr,steelseries.TrendState.UP,lr),oe=w(pr,steelseries.TrendState.STEADY,lr),se=w(pr,steelseries.TrendState.DOWN,lr),he=w(pr,steelseries.TrendState.OFF,lr))},ct=function(n){n=n||{};var t=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,r=undefined===n.led?!1:n.led,u=undefined===n.userLed?!1:n.userLed,e=undefined===n.pointer?!1:n.pointer,o=undefined===n.foreground?!1:n.foreground;t&&(er.width=f,er.height=f,bf=er.getContext("2d"));i&&(or.width=f,or.height=f,at=or.getContext("2d"));r&&(tr.width=Math.ceil(f*.093457),tr.height=Math.ceil(f*.093457),df=tr.getContext("2d"),hi.width=Math.ceil(f*.093457),hi.height=Math.ceil(f*.093457),gf=hi.getContext("2d"),ir=hi);u&&(ei.width=Math.ceil(f*.093457),ei.height=Math.ceil(f*.093457),ne=ei.getContext("2d"),ni.width=Math.ceil(f*.093457),ni.height=Math.ceil(f*.093457),te=ni.getContext("2d"),dt=ni);e&&(sr.width=f,sr.height=f,ue=sr.getContext("2d"));o&&(hr.width=f,hr.height=f,fe=hr.getContext("2d"))},ao=function(){uu&&(ir=ir===tr?hi:tr,ki||(ki=!0,v(of.repaint)))},vo=function(){eu&&(dt=dt===ei?ni:ei,ki||(ki=!0,v(of.repaint)))},cr=function(n){n?sf=setInterval(ao,1e3):(clearInterval(sf),ir=hi)},yo=function(n){n?cu=setInterval(vo,1e3):(clearInterval(cu),dt=ni)};return this.setValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return p!==t&&(p=t,p>wi&&(wi=p),p<pi&&(pi=p),p>=gt&&!ut&&ti||p<=gt&&!ut&&!ti?(ut=!0,cr(ut),rr&&yi.play()):(p<gt&&ut&&ti||p>gt&&ut&&!ti)&&(ut=!1,cr(ut),rr&&yi.pause()),this.repaint()),this},this.getValue=function(){return p},this.setOdoValue=function(n){n=parseFloat(n);var t=n<0?0:n;return vr!==t&&(vr=t,this.repaint()),this},this.getOdoValue=function(){return vr},this.setValueAnimated=function(n,t){n=parseFloat(n);var r=n<h?h:n>b?b:n,u=this,i;return p!==r&&(undefined!==bi&&bi.isPlaying&&bi.stop(),i=ef*Math.abs(r-p)/(b-h),i=Math.max(i,ef/5),bi=new Tween({},"",Tween.regularEaseInOut,p,r,i),bi.onMotionChanged=function(n){p=n.target._pos;p>=gt&&!ut&&ti||p<=gt&&!ut&&!ti?(ut=!0,cr(ut),rr&&yi.play()):(p<gt&&ut&&ti||p>gt&&ut&&!ti)&&(ut=!1,cr(ut),rr&&yi.pause());p>wi&&(wi=p);p<pi&&(pi=p);ki||(ki=!0,v(u.repaint))},t&&typeof t=="function"&&(bi.onMotionFinished=t),bi.start()),this},this.resetMinMeasuredValue=function(){pi=p;this.repaint()},this.resetMaxMeasuredValue=function(){return wi=p,this.repaint(),this},this.setMinMeasuredValueVisible=function(n){return ou=!!n,this.repaint(),this},this.setMaxMeasuredValueVisible=function(n){return su=!!n,this.repaint(),this},this.setMaxMeasuredValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return wi=t,this.repaint(),this},this.setMinMeasuredValue=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return pi=t,this.repaint(),this},this.setTitleString=function(n){return vu=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setUnitString=function(n){return yu=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setMinValue=function(n){return h=parseFloat(n),ct({frame:!0,background:!0}),ot({frame:!0,background:!0}),this.repaint(),this},this.getMinValue=function(){return h},this.setMaxValue=function(n){return b=parseFloat(n),ct({frame:!0,background:!0}),ot({frame:!0,background:!0}),this.repaint(),this},this.getMaxValue=function(){return b},this.setThreshold=function(n){n=parseFloat(n);var t=n<h?h:n>b?b:n;return gt=t,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setArea=function(n){return li=n,ct({background:!0,foreground:!0}),ot({background:!0,foreground:!0}),this.repaint(),this},this.setSection=function(n){return ci=n,ct({background:!0,foreground:!0}),ot({background:!0,foreground:!0}),this.repaint(),this},this.setThresholdVisible=function(n){return nf=!!n,this.repaint(),this},this.setThresholdRising=function(n){return ti=!!n,ut=!ut,cr(ut),this.repaint(),this},this.setLcdDecimals=function(n){return du=parseInt(n,10),this.repaint(),this},this.setFrameDesign=function(n){return ct({frame:!0}),pu=n,ot({frame:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return ct({background:!0,pointer:oi.type==="type2"||oi.type==="type13"?!0:!1}),ai=n,ot({background:!0,pointer:oi.type==="type2"||oi.type==="type13"?!0:!1}),this.repaint(),this},this.setForegroundType=function(n){return ct({foreground:!0}),tf=n,ot({foreground:!0}),this.repaint(),this},this.setPointerType=function(n){return ct({pointer:!0,foreground:!0}),oi=n,ot({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointerColor=function(n){return ct({pointer:!0}),ku=n,ot({pointer:!0}),this.repaint(),this},this.setLedColor=function(n){return ct({led:!0}),ru=n,ot({led:!0}),this.repaint(),this},this.setUserLedColor=function(n){return ct({userLed:!0}),fu=n,ot({userLed:!0}),this.repaint(),this},this.toggleUserLed=function(){return dt=dt===ei?ni:ei,this.repaint(),this},this.setUserLedOnOff=function(n){return dt=!0===n?ei:ni,this.repaint(),this},this.blinkUserLed=function(n){return n?yr||(yo(!0),yr=!0):yr&&(clearInterval(cu),yr=!1),this},this.setLedVisible=function(n){return uu=!!n,this.repaint(),this},this.setUserLedVisible=function(n){return eu=!!n,this.repaint(),this},this.setLcdColor=function(n){return di=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setTrend=function(n){return hf=n,this.repaint(),this},this.setTrendVisible=function(n){return hu=!!n,this.repaint(),this},this.setFractionalScaleDecimals=function(n){return gu=parseInt(n,10),ct({background:!0}),ot({background:!0}),this.repaint(),this},this.setLabelNumberFormat=function(n){return uf=n,ct({background:!0}),ot({background:!0}),this.repaint(),this},this.repaint=function(){if(pf||ot({frame:!0,background:!0,led:!0,userLed:!0,pointer:!0,trend:!0,foreground:!0,odo:!0}),e.clearRect(0,0,f,f),wu&&e.drawImage(er,0,0),e.drawImage(or,0,0),iu&&(ar?(ce.setValue(ke?p:vr),e.drawImage(tu,vf,uo)):so(e,p)),uu&&e.drawImage(ir,de,ge),eu&&e.drawImage(dt,no,to),hu)switch(hf.state){case"up":e.drawImage(ee,wr,br);break;case"steady":e.drawImage(oe,wr,br);break;case"down":e.drawImage(se,wr,br);break;case"off":e.drawImage(he,wr,br)}ou&&(e.save(),e.translate(st,lt),e.rotate(yt+i+(pi-h)*kt),e.translate(-st,-lt),e.drawImage(ie,e.canvas.width*.4865,e.canvas.height*.105),e.restore());su&&(e.save(),e.translate(st,lt),e.rotate(yt+i+(wi-h)*kt),e.translate(-st,-lt),e.drawImage(re,e.canvas.width*.4865,e.canvas.height*.105),e.restore());lu=yt+i+(p-h)*kt;e.save();e.translate(st,lt);e.rotate(lu);e.translate(-st,-lt);e.shadowColor="rgba(0, 0, 0, 0.8)";e.shadowOffsetX=e.shadowOffsetY=yf;e.shadowBlur=yf*2;e.drawImage(sr,0,0);e.restore();rf&&e.drawImage(hr,0,0);ki=!1},this.repaint(),this},ci=function(n,u){var li;u=u||{};var hi=undefined===u.gaugeType?steelseries.GaugeType.TYPE4:u.gaugeType,h=undefined===u.size?0:u.size,f=undefined===u.minValue?0:u.minValue,l=undefined===u.maxValue?f+100:u.maxValue,re=undefined===u.niceScale?!0:u.niceScale,gt=undefined===u.threshold?(l-f)/2+f:u.threshold,ni=undefined===u.thresholdRising?!0:u.thresholdRising,ci=undefined===u.section?null:u.section,su=undefined===u.useSectionColors?!1:u.useSectionColors,hu=undefined===u.titleString?"":u.titleString,cu=undefined===u.unitString?"":u.unitString,lu=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,au=undefined===u.frameVisible?!0:u.frameVisible,yi=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,vu=undefined===u.backgroundVisible?!0:u.backgroundVisible,sr=undefined===u.valueColor?steelseries.ColorDef.RED:u.valueColor,pi=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,yu=undefined===u.lcdVisible?!0:u.lcdVisible,pu=undefined===u.lcdDecimals?2:u.lcdDecimals,ue=undefined===u.digitalFont?!1:u.digitalFont,wu=undefined===u.fractionalScaleDecimals?1:u.fractionalScaleDecimals,fe=undefined===u.customLayer?null:u.customLayer,dr=undefined===u.ledColor?steelseries.LedColor.RED_LED:u.ledColor,gr=undefined===u.ledVisible?!0:u.ledVisible,nu=undefined===u.userLedColor?steelseries.LedColor.GREEN_LED:u.userLedColor,tu=undefined===u.userLedVisible?!1:u.userLedVisible,bu=undefined===u.labelNumberFormat?steelseries.LabelNumberFormat.STANDARD:u.labelNumberFormat,ku=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,du=undefined===u.foregroundVisible?!0:u.foregroundVisible,gi=undefined===u.playAlarm?!1:u.playAlarm,gu=undefined===u.alarmSound?!1:u.alarmSound,nr=undefined===u.valueGradient?null:u.valueGradient,nf=undefined===u.useValueGradient?!1:u.useValueGradient,ee=undefined===u.tickLabelOrientation?hi===steelseries.GaugeType.TYPE1?steelseries.TickLabelOrientation.TANGENT:steelseries.TickLabelOrientation.NORMAL:u.tickLabelOrientation,iu=undefined===u.trendVisible?!1:u.trendVisible,hr=undefined===u.trendColors?[steelseries.LedColor.RED_LED,steelseries.LedColor.GREEN_LED,steelseries.LedColor.CYAN_LED]:u.trendColors,tf=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,p=ht(n);h===0&&(h=Math.min(p.canvas.width,p.canvas.height));p.canvas.width=h;p.canvas.height=h;gi&&gu!==!1&&(li=d.createElement("audio"),li.setAttribute("src",gu),li.setAttribute("preload","auto"));var ft=f,vt=l-f,rt=!1,rf=0,cr=!1,ru=0,ai,uf=this,vi=!1,at,ot,wi,ui,b,ti,kt,oe,bi=[],lr=!1,uu=!1,e=h,st=h,et=e/2,ct=st/2,fu=Math.floor(e/10),se=fu+"px "+s,he=fu+"px "+wt,eu=st*.13,tr=e*.4,ff=(e-tr)/2,ef=st/2-eu/2,ce=e*.116822,le=e*.485981,y=Math.ceil(h*.093457),of=e*.53,sf=st*.61,ae=hi===steelseries.GaugeType.TYPE3?.7*e:et-y/2,ve=hi===steelseries.GaugeType.TYPE3?.61*st:.75*st,hf=steelseries.TrendState.OFF,ar=h*.06,vr=h*.38,yr=h*.57;switch(hi.type){case"type1":at=0;ot=o;wi=0;ui=i;b=i;ti=b*pt;kt=b/vt;break;case"type2":at=0;ot=o;wi=0;ui=i;b=o;ti=b*pt;kt=b/vt;break;case"type3":at=0;ot=i;wi=-i;ui=0;b=1.5*o;ti=b*pt;kt=b/vt;break;case"type4":default:at=60*c;ot=i+at/2;wi=-t/6;ui=0;b=t-at;ti=b*pt;kt=b/vt}var ir=r(h,h),cf=ir.getContext("2d"),rr=r(h,h),oi=rr.getContext("2d"),lf,ur=r(Math.ceil(h*.060747),Math.ceil(h*.023364)),ou=ur.getContext("2d"),ki=r(y,y),af=ki.getContext("2d"),si=r(y,y),vf=si.getContext("2d"),di=si,ii=r(y,y),yf=ii.getContext("2d"),dt=r(y,y),pf=dt.getContext("2d"),yt=dt,ye,fr=r(h,h),wf=fr.getContext("2d"),bf,kf,df,gf,ne=!1,pr=f,wr=l,er=l-f;vt=wr-pr;var br=0,ri=0,kr=10,te=10,pe=function(){re?(er=k(l-f,!1),ri=k(er/(te-1),!0),pr=Math.floor(f/ri)*ri,wr=Math.ceil(l/ri)*ri,br=k(ri/(kr-1),!0),f=pr,l=wr,vt=l-f):(er=l-f,pr=f,wr=l,vt=er,ri=k(er/(te-1),!0),br=k(ri/(kr-1),!0));switch(hi.type){case"type1":at=0;ot=o;ui=i;b=i;kt=b/vt;break;case"type2":at=0;ot=o;ui=i;b=o;kt=b/vt;break;case"type3":at=0;ot=i;ui=0;b=1.5*o;kt=b/vt;break;case"type4":default:at=60*c;ot=i+at/2;ui=0;b=t-at;kt=b/vt}oe=ot+(ft-f)*kt},ut=function(n){var t;n=n||{};var r=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,u=undefined===n.led?!1:n.led,o=undefined===n.userLed?!1:n.userLed,s=undefined===n.value?!1:n.value,h=undefined===n.foreground?!1:n.foreground,c=undefined===n.trend?!1:n.trend;if(ne=!0,pe(),r&&au&&g(cf,lu,et,ct,e,st),i&&vu&&(nt(oi,yi,et,ct,e,st),bt(oi,fe,et,ct,e,st)),u&&(af.drawImage(a(y,1,dr),0,0),vf.drawImage(a(y,0,dr),0,0),ye=oi.getImageData(of,sf,y,y)),o&&(yf.drawImage(a(Math.ceil(y),1,nu),0,0),pf.drawImage(a(Math.ceil(y),0,nu),0,0)),i&&we(oi),i&&vu&&(ke(oi,bu),fi(oi,e,st,hu,cu,yi,!0,!0)),i&&yu&&(lf=it(tr,eu,pi),oi.drawImage(lf,ff,ef)),lr=!1,su&&null!==ci&&0<ci.length){lr=!0;t=ci.length;bi=[];do t--,bi.push({start:(ci[t].start+Math.abs(f))/(l-f)*ti,stop:(ci[t].stop+Math.abs(f))/(l-f)*ti,color:ei(ci[t].color)});while(0<t)}uu=!1;nf&&nr!==null&&(lr=!1,uu=!0);s&&ie(ou,sr);h&&du&&tt(wf,ku,e,st,!1);c&&iu&&(bf=w(ar,steelseries.TrendState.UP,hr),kf=w(ar,steelseries.TrendState.STEADY,hr),df=w(ar,steelseries.TrendState.DOWN,hr),gf=w(ar,steelseries.TrendState.OFF,hr))},lt=function(n){n=n||{};var t=undefined===n.frame?!1:n.frame,i=undefined===n.background?!1:n.background,r=undefined===n.led?!1:n.led,u=undefined===n.userLed?!1:n.userLed,f=undefined===n.value?!1:n.value,e=undefined===n.foreground?!1:n.foreground;t&&(ir.width=h,ir.height=h,cf=ir.getContext("2d"));i&&(rr.width=h,rr.height=h,oi=rr.getContext("2d"));f&&(ur.width=Math.ceil(h*.060747),ur.height=Math.ceil(h*.023364),ou=ur.getContext("2d"));r&&(ki.width=Math.ceil(y),ki.height=Math.ceil(y),af=ki.getContext("2d"),si.width=Math.ceil(y),si.height=Math.ceil(y),vf=si.getContext("2d"),di=si);u&&(ii.width=Math.ceil(y),ii.height=Math.ceil(y),yf=ii.getContext("2d"),dt.width=Math.ceil(y),dt.height=Math.ceil(y),pf=dt.getContext("2d"),yt=dt);e&&(fr.width=h,fr.height=h,wf=fr.getContext("2d"))},we=function(n){var t,r,i;n.save();n.save();n.lineWidth=h*.085;n.beginPath();n.translate(et,ct);n.rotate(ot-4*c);n.translate(-et,-ct);n.arc(et,ct,e*.35514,0,b+8*c,!1);n.rotate(-ot);t=n.createLinearGradient(0,.107476*st,0,.897195*st);t.addColorStop(0,"#000000");t.addColorStop(.22,"#333333");t.addColorStop(.76,"#333333");t.addColorStop(1,"#cccccc");n.strokeStyle=t;n.stroke();n.restore();n.save();n.lineWidth=h*.075;n.beginPath();n.translate(et,ct);n.rotate(ot-4*c);n.translate(-et,-ct);n.arc(et,ct,e*.35514,0,b+8*c,!1);n.rotate(-ot);r=n.createLinearGradient(0,.112149*st,0,.892523*st);r.addColorStop(0,"#111111");r.addColorStop(1,"#333333");n.strokeStyle=r;n.stroke();n.restore();var f=(e*.116822+e*.060747)/2,o=(e*.485981+e*.023364)/2,u=n.createRadialGradient(f,o,0,f,o,.030373*e);for(u.addColorStop(0,"#3c3c3c"),u.addColorStop(1,"#323232"),i=0,i=0;i<=ti;i+=5)n.save(),n.translate(et,ct),n.rotate(i*c+wi),n.translate(-et,-ct),n.beginPath(),n.rect(e*.116822,e*.485981,e*.060747,e*.023364),n.closePath(),n.fillStyle=u,n.fill(),n.restore();n.restore()},ie=function(n,t){n.save();n.beginPath();n.rect(0,0,n.canvas.width,n.canvas.height);n.closePath();var r=n.canvas.width/2,u=n.canvas.height/2,i=p.createRadialGradient(r,u,0,r,u,n.canvas.width/2);i.addColorStop(0,t.light.getRgbaColor());i.addColorStop(1,t.dark.getRgbaColor());n.fillStyle=i;n.fill();n.restore()},be=function(n,t){n.save();n.textAlign="right";n.strokeStyle=pi.textColor;n.fillStyle=pi.textColor;(pi===steelseries.LcdColor.STANDARD||pi===steelseries.LcdColor.STANDARD_GREEN)&&(n.shadowColor="gray",n.shadowOffsetX=e*.007,n.shadowOffsetY=e*.007,n.shadowBlur=e*.007);n.font=ue?he:se;n.fillText(t.toFixed(pu),ff+tr-tr*.05,ef+eu*.5+fu*.38,tr*.9);n.restore()},ke=function(n,t){var h=ot,r=kt*br,u,w=Math.ceil(e*.04),c=f,v=kr-1,p=e*.28,a=e*.1,b=parseFloat(l.toFixed(2)),y;for(yi.labelColor.setAlpha(1),n.save(),n.textAlign="center",n.textBaseline="middle",n.font=w+"px "+s,n.strokeStyle=yi.labelColor.getRgbaColor(),n.fillStyle=yi.labelColor.getRgbaColor(),n.translate(et,ct),n.rotate(ot),(hi.type==="type1"||hi.type==="type2")&&(a=e*.0375),y=f;parseFloat(y.toFixed(2))<=b;y+=br){if(u=+r+i,v++,v===kr){n.save();n.translate(p,0);switch(ee.type){case"horizontal":u=-h;break;case"tangent":u=h<=i+o?o:0;break;case"normal":default:u=i}n.rotate(u);switch(t.format){case"fractional":n.fillText(c.toFixed(wu),0,0,a);break;case"scientific":n.fillText(c.toPrecision(2),0,0,a);break;case"standard":default:n.fillText(c.toFixed(0),0,0,a)}n.translate(-p,0);n.restore();c+=ri;v=0;n.rotate(r);h+=r;continue}n.rotate(r);h+=r}n.translate(-et,-ct);n.restore()},or=function(n){n?rf=setInterval(ge,1e3):(clearInterval(rf),di=si)},de=function(n){n?ru=setInterval(no,1e3):(clearInterval(ru),yt=dt)},ge=function(){gr&&(di=di===ki?si:ki,vi||(vi=!0,v(uf.repaint)))},no=function(){tu&&(yt=yt===ii?dt:ii,vi||(vi=!0,v(uf.repaint)))};return this.setValue=function(n){n=parseFloat(n);var t=n<f?f:n>l?l:n;return ft!==t&&(ft=t,ft>=gt&&!rt&&ni||ft<=gt&&!rt&&!ni?(rt=!0,or(rt),gi&&li.play()):(ft<gt&&rt&&ni||ft>gt&&rt&&!ni)&&(rt=!1,or(rt),gi&&li.pause()),this.repaint()),this},this.getValue=function(){return ft},this.setValueAnimated=function(n,t){n=parseFloat(n);var r=n<f?f:n>l?l:n,u=this,i;return ft!==r&&(undefined!==ai&&ai.isPlaying&&ai.stop(),i=tf*Math.abs(r-ft)/(l-f),i=Math.max(i,tf/5),ai=new Tween({},"",Tween.regularEaseInOut,ft,r,i),ai.onMotionChanged=function(n){ft=n.target._pos;ft>=gt&&!rt&&ni||ft<=gt&&!rt&&!ni?(rt=!0,or(rt),gi&&li.play()):(ft<gt&&rt&&ni||ft>gt&&rt&&!ni)&&(rt=!1,or(rt),gi&&li.pause());vi||(vi=!0,v(u.repaint))},t&&typeof t=="function"&&(ai.onMotionFinished=t),ai.start()),this},this.setFrameDesign=function(n){return lt({frame:!0}),lu=n,ut({frame:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return lt({background:!0,led:!0}),yi=n,ut({background:!0,led:!0}),this.repaint(),this},this.setForegroundType=function(n){return lt({foreground:!0}),ku=n,ut({foreground:!0}),this.repaint(),this},this.setValueColor=function(n){return lt({value:!0}),sr=n,ut({value:!0}),this.repaint(),this},this.setLedColor=function(n){return lt({led:!0}),dr=n,ut({led:!0}),this.repaint(),this},this.setUserLedColor=function(n){return lt({userLed:!0}),nu=n,ut({userLed:!0}),this.repaint(),this},this.toggleUserLed=function(){return yt=yt===ii?dt:ii,this.repaint(),this},this.setUserLedOnOff=function(n){return yt=!0===n?ii:dt,this.repaint(),this},this.blinkUserLed=function(n){return n?cr||(de(!0),cr=!0):cr&&(clearInterval(ru),cr=!1),this},this.setLedVisible=function(n){return gr=!!n,this.repaint(),this},this.setUserLedVisible=function(n){return tu=!!n,this.repaint(),this},this.setLcdColor=function(n){return pi=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setLcdDecimals=function(n){return pu=parseInt(n,10),this.repaint(),this},this.setSection=function(n){return ci=n,ut(),this.repaint(),this},this.setSectionActive=function(n){return su=n,ut(),this.repaint(),this},this.setGradient=function(n){return nr=n,ut(),this.repaint(),this},this.setGradientActive=function(n){return nf=n,ut(),this.repaint(),this},this.setMinValue=function(n){return f=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.getMinValue=function(){return f},this.setMaxValue=function(n){return l=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.getMaxValue=function(){return l},this.setThreshold=function(n){n=parseFloat(n);var t=n<f?f:n>l?l:n;return gt=t,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setThresholdRising=function(n){return ni=!!n,rt=!rt,or(rt),this.repaint(),this},this.setTitleString=function(n){return hu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setUnitString=function(n){return cu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.setTrend=function(n){return hf=n,this.repaint(),this},this.setTrendVisible=function(n){return iu=!!n,this.repaint(),this},this.setFractionalScaleDecimals=function(n){wu=parseInt(n,10);lt({background:!0});ut({background:!0});this.repaint()},this.setLabelNumberFormat=function(n){return bu=n,lt({background:!0}),ut({background:!0}),this.repaint(),this},this.repaint=function(){var s=(ft-f)/(l-f)*ti,t,u=sr,n,i,e,o,r;for(ne||ut({frame:!0,background:!0,led:!0,userLed:!0,value:!0,trend:!0,foreground:!0}),p.clearRect(0,0,h,h),au&&p.drawImage(ir,0,0),p.drawImage(rr,0,0),n=0;n<=s;n+=5){if(t=sr,uu)e=f+n/ti*(l-f),o=nr.getEnd()-nr.getStart(),r=(e-f)/o,r=Math.max(Math.min(r,1),0),t=ei(nr.getColorAt(r).getRgbaColor());else if(lr)for(i=0;i<bi.length;i++)if(n>=bi[i].start&&n<bi[i].stop){t=bi[i].color;break}u.medium.getHexColor()!==t.medium.getHexColor()&&(ie(ou,t),u=t);p.save();p.translate(et,ct);p.rotate(n*c+wi);p.translate(-et,-ct);p.drawImage(ur,ce,le);p.restore()}if(yu&&be(p,ft),gr&&p.drawImage(di,of,sf),tu&&p.drawImage(yt,ae,ve),iu)switch(hf.state){case"up":p.drawImage(bf,vr,yr);break;case"steady":p.drawImage(kf,vr,yr);break;case"down":p.drawImage(df,vr,yr);break;case"off":p.drawImage(gf,vr,yr)}du&&p.drawImage(fr,0,0);vi=!1},this.repaint(),this},li=function(n,t){t=t||{};var l=undefined===t.width?0:t.width,a=undefined===t.height?0:t.height,y=undefined===t.lcdColor?steelseries.LcdColor.STANDARD:t.lcdColor,bt=undefined===t.lcdDecimals?2:t.lcdDecimals,nt=undefined===t.unitString?"":t.unitString,tt=undefined===t.unitStringVisible?!1:t.unitStringVisible,kt=undefined===t.headerString?"":t.headerString,ut=undefined===t.headerStringVisible?!1:t.headerStringVisible,ft=undefined===t.digitalFont?!1:t.digitalFont,gt=undefined===t.valuesNumeric?!0:t.valuesNumeric,p=undefined===t.value?0:t.value,ni=undefined===t.alwaysScroll?!1:t.alwaysScroll,et=undefined===t.autoScroll?!1:t.autoScroll,u=undefined===t.section?null:t.section,c=!1,o=0,b,k=!1,ti=this,i=ht(n);l===0&&(l=i.canvas.width);a===0&&(a=i.canvas.height);i.canvas.width=l;i.canvas.height=a;var e=l,f=a,h=0,w=Math.floor(f/1.5),ct=w+"px "+s,lt=w+"px "+wt,at=!1,vt,yt=[],pt=[],ii=function(n,t){var l,a,r;i.save();i.textAlign="right";i.strokeStyle=t;i.fillStyle=t;i.beginPath();i.rect(2,0,e-4,f);i.closePath();i.clip();(y===steelseries.LcdColor.STANDARD||y===steelseries.LcdColor.STANDARD_GREEN)&&u===null&&(i.shadowColor="gray",i.shadowOffsetX=f*.035,i.shadowOffsetY=f*.035,i.shadowBlur=f*.055);i.font=ft?lt:ct;gt?(l=0,h=0,tt&&(i.font=Math.floor(f/2.5)+"px "+s,l=i.measureText(nt).width),i.font=ft?lt:ct,a=n.toFixed(bt),h=i.measureText(a).width,r=.38,ut&&(r=.52),i.fillText(a,e-l-4-o,f*.5+w*r),tt&&(i.font=Math.floor(f/2.5)+"px "+s,i.fillText(nt,e-2-o,f*.5+w*r)),ut&&(i.textAlign="center",i.font=Math.floor(f/3.5)+"px "+s,i.fillText(kt,e/2,f*.3))):(h=i.measureText(n).width,ni||et&&h>e-4?c||(o=h>e*.8?e-h-e*.2:0,c=!0,clearTimeout(b),b=setTimeout(d,200)):et&&h<=e-4&&(o=0,c=!1),i.fillText(n,e-2-o,f*.5+w*.38));i.restore()},ri=function(n,t,i,u){var tt=r(n,t),f=tt.getContext("2d");f.save();var h=0,et=n,it=t,ut=Math.min(n,t)*.095,s=f.createLinearGradient(0,h,0,h+it);s.addColorStop(0,"#4c4c4c");s.addColorStop(.08,"#666666");s.addColorStop(.92,"#666666");s.addColorStop(1,"#e6e6e6");f.fillStyle=s;dt(f,0,h,et,it,ut);f.fill();f.restore();f.save();var c=rt(i),e=ot(c[0],c[1],c[2]),l=rt(u.gradientStartColor),ht=ot(l[0],l[1],l[2]),a=rt(u.gradientFraction1Color),ct=ot(a[0],a[1],a[2]),v=rt(u.gradientFraction2Color),lt=ot(v[0],v[1],v[2]),y=rt(u.gradientFraction3Color),at=ot(y[0],y[1],y[2]),p=rt(u.gradientStopColor),vt=ot(p[0],p[1],p[2]),w=st(e[0],e[1],ht[2]-.31),b=st(e[0],e[1],ct[2]-.31),k=st(e[0],e[1],lt[2]-.31),d=st(e[0],e[1],at[2]-.31),g=st(e[0],e[1],vt[2]-.31),nt=1,yt=n-2,ft=t-2,pt=ut-1,o=f.createLinearGradient(0,nt,0,nt+ft);return o.addColorStop(0,"rgb("+w[0]+", "+w[1]+", "+w[2]+")"),o.addColorStop(.03,"rgb("+b[0]+","+b[1]+","+b[2]+")"),o.addColorStop(.49,"rgb("+k[0]+","+k[1]+","+k[2]+")"),o.addColorStop(.5,"rgb("+d[0]+","+d[1]+","+d[2]+")"),o.addColorStop(1,"rgb("+g[0]+","+g[1]+","+g[2]+")"),f.fillStyle=o,dt(f,1,nt,yt,ft,pt),f.fill(),f.restore(),tt},ui=function(n){var t=rt(n),r=ot(t[0],t[1],t[2]),i=st(r[0],.57,.83);return"rgb("+i[0]+", "+i[1]+", "+i[2]+")"},d=function(){c?(o>e&&(o=-h),o+=2,b=setTimeout(d,50)):o=0;k||(k=!0,v(ti.repaint))},g=function(){var n;if(at=!0,vt=it(l,a,y),null!==u&&0<u.length)for(n=0;n<u.length;n++)yt[n]=ri(l,a,u[n].color,y),pt[n]=ui(u[n].color)};return this.setValue=function(n){return p!==n&&(p=n,this.repaint()),this},this.setLcdColor=function(n){return y=n,g(),this.repaint(),this},this.setSection=function(n){return u=n,g({background:!0,foreground:!0}),this.repaint(),this},this.setScrolling=function(n){if(n){if(c)return;c=n;d()}else c=n;return this},this.repaint=function(){at||g();i.clearRect(0,0,i.canvas.width,i.canvas.height);var t=vt,r=y.textColor,n;if(null!==u&&0<u.length)for(n=0;n<u.length;n++)if(p>=u[n].start&&p<=u[n].stop){t=yt[n];r=pt[n];break}i.drawImage(t,0,0);ii(p,r);k=!1},this.repaint(),this},ai=function(n,u){u=u||{};var o=undefined===u.size?0:u.size,hi=undefined===u.frameDesign?steelseries.FrameDesign.METAL:u.frameDesign,ci=undefined===u.frameVisible?!0:u.frameVisible,rt=undefined===u.backgroundColor?steelseries.BackgroundColor.DARK_GRAY:u.backgroundColor,li=undefined===u.backgroundVisible?!0:u.backgroundVisible,dt=undefined===u.pointerTypeLatest?steelseries.PointerType.TYPE1:u.pointerTypeLatest,ai=undefined===u.pointerTypeAverage?steelseries.PointerType.TYPE8:u.pointerTypeAverage,ii=undefined===u.pointerColor?steelseries.ColorDef.RED:u.pointerColor,ri=undefined===u.pointerColorAverage?steelseries.ColorDef.BLUE:u.pointerColorAverage,ar=undefined===u.knobType?steelseries.KnobType.STANDARD_KNOB:u.knobType,vr=undefined===u.knobStyle?steelseries.KnobStyle.SILVER:u.knobStyle,vi=undefined===u.foregroundType?steelseries.ForegroundType.TYPE1:u.foregroundType,yi=undefined===u.foregroundVisible?!0:u.foregroundVisible,h=undefined===u.pointSymbols?["N","NE","E","SE","S","SW","W","NW"]:u.pointSymbols,yr=undefined===u.pointSymbolsVisible?!0:u.pointSymbolsVisible,pr=undefined===u.customLayer?null:u.customLayer,wr=undefined===u.degreeScale?!0:u.degreeScale,ui=undefined===u.degreeScaleHalf?!1:u.degreeScaleHalf,wi=undefined===u.roseVisible?!1:u.roseVisible,lt=undefined===u.lcdColor?steelseries.LcdColor.STANDARD:u.lcdColor,bi=undefined===u.lcdVisible?!0:u.lcdVisible,br=undefined===u.digitalFont?!1:u.digitalFont,et=undefined===u.section?null:u.section,ot=undefined===u.area?null:u.area,gt=undefined===u.lcdTitleStrings?["Latest","Average"]:u.lcdTitleStrings,ki=undefined===u.titleString?"":u.titleString,di=undefined===u.useColorLabels?!1:u.useColorLabels,ni=undefined===u.fullScaleDeflectionTime?2.5:u.fullScaleDeflectionTime,st,ct,y=0,p=0,at=c,gi=this.valueLatest,fi=this.valueAverage,kr=-i,nr=t,tr=360,l=!1,e=ht(n);o===0&&(o=Math.min(e.canvas.width,e.canvas.height));e.canvas.width=o;e.canvas.height=o;var f=o,w=o,b=f/2,k=w/2,ei=Math.floor(f/10),dr=ei+"px "+s,gr=ei+"px "+wt,ti=f*.3,ir=w*.12,rr=(f-ti)/2,ur=w*.32,fr=w*.565,er=!1,vt=r(o,o),ut=vt.getContext("2d"),oi,yt=r(o,o),or=yt.getContext("2d"),pt=r(o,o),sr=pt.getContext("2d"),kt=r(o,o),hr=kt.getContext("2d"),cr=function(n,t){for(e.save(),e.textAlign="center",e.strokeStyle=lt.textColor,e.fillStyle=lt.textColor;n<-180;)n+=360;!ui&&n<0&&(n+=360);ui&&n>180&&(n=-(360-n));n>=0?(n="00"+Math.round(n),n=n.substring(n.length,n.length-3)):(n="00"+Math.abs(Math.round(n)),n="-"+n.substring(n.length,n.length-3));(lt===steelseries.LcdColor.STANDARD||lt===steelseries.LcdColor.STANDARD_GREEN)&&(e.shadowColor="gray",e.shadowOffsetX=f*.007,e.shadowOffsetY=f*.007,e.shadowBlur=f*.007);e.font=br?gr:dr;e.fillText(n+"°",f/2+ti*.05,(t?ur:fr)+ir*.5+ei*.38,ti*.9);e.restore()},lr=function(n,t,i,r,u){n.save();n.strokeStyle=r;n.fillStyle=r;n.lineWidth=f*.035;var e=nr/tr*t,o=e+(i-t)/(tr/nr);n.translate(b,k);n.rotate(kr);n.beginPath();u?(n.moveTo(0,0),n.arc(0,0,f*.365-n.lineWidth/2,e,o,!1)):n.arc(0,0,f*.365,e,o,!1);u?(n.moveTo(0,0),n.fill()):n.stroke();n.translate(-b,-k);n.restore()},nu=function(n){var l=f*.38,a=f*.35,p=f*.36,c=f*.1,v=f*.31,u=f*.36,r,e,t,o,y;if(n.textAlign="center",n.textBaseline="middle",n.save(),n.strokeStyle=rt.labelColor.getRgbaColor(),n.fillStyle=rt.labelColor.getRgbaColor(),n.translate(b,k),wr)for(r=Math.floor(.1*f)+"px serif bold",e=Math.floor(f*.04)+"px "+s,n.rotate(at*5),t=5;360>=t;t+=5){if(n.save(),yr)switch(t){case 360:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[2],0,0,c);n.translate(-u,0);break;case 90:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[4],0,0,c);n.translate(-u,0);break;case 180:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[6],0,0,c);n.translate(-u,0);break;case 270:n.translate(u,0);n.rotate(i);n.font=r;n.fillText(h[0],0,0,c);n.translate(-u,0);break;case 5:case 85:case 95:case 175:case 185:case 265:case 275:case 355:break;default:(t+90)%20?(n.lineWidth=(t+90)%5?1.5:1,n.beginPath(),n.moveTo(l,0),y=(t+90)%10?p:a,n.lineTo(y,0),n.closePath(),n.stroke()):(n.lineWidth=1.5,n.beginPath(),n.moveTo(l,0),n.lineTo(a,0),n.closePath(),n.stroke(),o=(t+90)%360,n.translate(v,0),n.rotate(i),n.font=e,n.fillText("0".substring(o>=100)+o,0,0,c),n.translate(-v,0))}else(t+90)%20?(n.lineWidth=(t+90)%5?1.5:1,n.beginPath(),n.moveTo(l,0),y=(t+90)%10?p:a,n.lineTo(y,0),n.closePath(),n.stroke()):(n.lineWidth=1.5,n.beginPath(),n.moveTo(l,0),n.lineTo(a,0),n.closePath(),n.stroke(),o=(t+90)%360,ui&&o>180&&(o=-(360-o)),n.translate(v,0),n.rotate(i),n.font=e,n.fillText(o,0,0,c),n.translate(-v,0));n.restore();n.rotate(at*5)}else for(r=.12*f+"px serif",e=.06*f+"px serif",n.lineWidth=1,n.strokeStyle=rt.symbolColor.getRgbaColor(),t=0;360>t;t+=2.5){0==t%5&&(n.beginPath(),n.moveTo(f*.38,0),n.lineTo(f*.36,0),n.closePath(),n.stroke());n.save();switch(t){case 0:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[2],0,0);n.translate(-f*.35,0);break;case 45:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[3],0,0);n.translate(-f*.29,0);break;case 90:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[4],0,0);n.translate(-f*.35,0);break;case 135:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[5],0,0);n.translate(-f*.29,0);break;case 180:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[6],0,0);n.translate(-f*.35,0);break;case 225:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[7],0,0);n.translate(-f*.29,0);break;case 270:n.translate(f*.35,0);n.rotate(i);n.font=r;n.fillText(h[0],0,0);n.translate(-f*.35,0);break;case 315:n.translate(f*.29,0);n.rotate(i);n.font=e;n.fillText(h[1],0,0);n.translate(-f*.29,0)}n.restore();wi&&(0===t||22.5===t||45===t||67.5===t||90===t||112.5===t||135===t||157.5===t||180===t||202.5===t||225===t||247.5===t||270===t||292.5===t||315===t||337.5===t||360===t)&&(n.save(),n.beginPath(),t%45?n.moveTo(f*.29,0):n.moveTo(f*.38,0),n.lineTo(f*.1,0),n.closePath(),n.restore(),n.stroke());n.rotate(at*2.5)}n.translate(-b,-k);n.restore()},tu=function(n){gt.length>0&&(n.save(),n.textAlign="center",n.textBaseline="middle",n.fillStyle=di?ii.medium.getRgbaColor():rt.labelColor.getRgbaColor(),n.font=.04*f+"px "+s,n.fillText(gt[0],f/2,w*.29,f*.3),n.fillStyle=di?ri.medium.getRgbaColor():rt.labelColor.getRgbaColor(),n.fillText(gt[1],f/2,w*.71,f*.3),ki.length>0&&(n.fillStyle=rt.labelColor.getRgbaColor(),n.font=.0467*f+"px "+s,n.fillText(ki,f/2,w*.5,f*.3)))},a=function(n){var t,i,u;n=n||{};var r=undefined===n.background?!1:n.background,e=undefined===n.pointer?!1:n.pointer,o=undefined===n.foreground?!1:n.foreground;if(er=!0,r&&ci&&g(ut,hi,b,k,f,w),r&&li){if(nt(ut,rt,b,k,f,w),bt(ut,pr,b,k,f,w),null!==et&&0<et.length){t=et.length;do t--,lr(ut,et[t].start,et[t].stop,et[t].color,!1);while(0<t)}if(null!==ot&&0<ot.length){i=ot.length;do i--,lr(ut,ot[i].start,ot[i].stop,ot[i].color,!0);while(0<i)}nu(ut)}r&&wi&&pi(ut,b,k,f,w,rt);r&&bi&&(oi=it(ti,ir,lt),ut.drawImage(oi,rr,ur),ut.drawImage(oi,rr,fr),tu(ut));e&&(ft(sr,f,ai,ri,rt.labelColor),ft(or,f,dt,ii,rt.labelColor));o&&yi&&(u=dt.type==="type15"||dt.type==="type16"?!1:!0,tt(hr,vi,f,w,u,ar,vr))},d=function(n){n=n||{};var t=undefined===n.background?!1:n.background,i=undefined===n.pointer?!1:n.pointer,r=undefined===n.foreground?!1:n.foreground;t&&(vt.width=o,vt.height=o,ut=vt.getContext("2d"));i&&(yt.width=o,yt.height=o,or=yt.getContext("2d"),pt.width=o,pt.height=o,sr=pt.getContext("2d"));r&&(kt.width=o,kt.height=o,hr=kt.getContext("2d"))};return this.setValueLatest=function(n){return n=parseFloat(n),n=n===360?360:n%360,y!==n&&(y=n,this.repaint()),this},this.getValueLatest=function(){return y},this.setValueAverage=function(n){return n=parseFloat(n),n=n===360?360:n%360,p!==n&&(p=n,this.repaint()),this},this.getValueAverage=function(){return p},this.setValueAnimatedLatest=function(n,t){var i,f=this,r,u;return n=parseFloat(n),i=n===360?360:n%360,y!==i&&(undefined!==st&&st.isPlaying&&st.stop(),r=si(y,i),r!==0?(u=ni*Math.abs(r)/180,u=Math.max(u,ni/5),st=new Tween({},"",Tween.regularEaseInOut,y,y+r,u),st.onMotionChanged=function(n){y=n.target._pos===360?360:n.target._pos%360;l||(l=!0,v(f.repaint))},st.onMotionFinished=function(){y=i;l||(l=!0,v(f.repaint));t&&typeof t=="function"&&t()},st.start()):(y=i,l||(l=!0,v(f.repaint)))),this},this.setValueAnimatedAverage=function(n,t){var i,f=this,r,u;return n=parseFloat(n),i=n===360?360:n%360,p!==n&&(undefined!==ct&&ct.isPlaying&&ct.stop(),r=si(p,i),r!==0?(u=ni*Math.abs(r)/180,u=Math.max(u,ni/5),ct=new Tween({},"",Tween.regularEaseInOut,p,p+r,u),ct.onMotionChanged=function(n){p=n.target._pos===360?360:n.target._pos%360;l||(l=!0,v(f.repaint))},ct.onMotionFinished=function(){p=i;l||(l=!0,v(f.repaint));t&&typeof t=="function"&&t()},ct.start()):(p=i,l||(l=!0,v(f.repaint)))),this},this.setArea=function(n){return ot=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setSection=function(n){return et=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setFrameDesign=function(n){return hi=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setBackgroundColor=function(n){return rt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setForegroundType=function(n){return d({foreground:!0}),vi=n,a({foreground:!0}),this.repaint(),this},this.setPointerColor=function(n){return d({pointer:!0}),ii=n,a({pointer:!0}),this.repaint(),this},this.setPointerColorAverage=function(n){return d({pointer:!0}),ri=n,a({pointer:!0}),this.repaint(),this},this.setPointerType=function(n){return dt=n,d({pointer:!0,foreground:!0}),a({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointerTypeAverage=function(n){return ai=n,d({pointer:!0,foreground:!0}),a({pointer:!0,foreground:!0}),this.repaint(),this},this.setPointSymbols=function(n){return h=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setLcdColor=function(n){return lt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.setLcdTitleStrings=function(n){return gt=n,d({background:!0}),a({background:!0}),this.repaint(),this},this.repaint=function(){er||a({frame:!0,background:!0,led:!0,pointer:!0,foreground:!0});e.clearRect(0,0,e.canvas.width,e.canvas.height);(ci||li)&&e.drawImage(vt,0,0);bi&&(cr(y,!0),cr(p,!1));fi=p*at;var n=f*.006;e.save();e.translate(b,k);e.rotate(fi);e.translate(-b,-k);e.shadowColor="rgba(0, 0, 0, 0.8)";e.shadowOffsetX=e.shadowOffsetY=n;e.shadowBlur=n*2;e.drawImage(pt,0,0);gi=y*at-fi;e.translate(b,k);e.rotate(gi);e.translate(-b,-k);e.drawImage(yt,0,0);e.restore();yi&&e.drawImage(kt,0,0);l=!1},this.repaint(),this},vi=function(n,t){var c,f,o,u,s;t=t||{};var i=undefined===t.size?0:t.size,v=undefined===t.ledColor?steelseries.LedColor.RED_LED:t.ledColor,h=!1,y=0,r=ht(n);i===0&&(i=Math.min(r.canvas.width,r.canvas.height));r.canvas.width=i;r.canvas.height=i;c=!1;f=d.createElement("canvas");f.width=i;f.height=i;o=f.getContext("2d");u=d.createElement("canvas");u.width=i;u.height=i;var l=u.getContext("2d"),e=u,p=function(){c=!0;o.clearRect(0,0,o.canvas.width,o.canvas.height);o.drawImage(a(i,1,v),0,0);l.clearRect(0,0,l.canvas.width,l.canvas.height);l.drawImage(a(i,0,v),0,0)};return this.toggleLed=function(){return e=e===f?u:f,s(),this},this.setLedColor=function(n){return v=n,c=!1,s(),this},this.setLedOnOff=function(n){return e=n?f:u,s(),this},this.blink=function(n){return n?h||(y=setInterval(this.toggleLed,1e3),h=!0):h&&(clearInterval(y),h=!1,e=u),this},s=function(){c||p();r.save();r.clearRect(0,0,r.canvas.width,r.canvas.height);r.drawImage(e,0,0);r.restore()},s(),this},yi=function(n,t){function pt(){var t,n;for(st=!0,p.rect(0,0,l,e),t=p.createLinearGradient(0,0,0,e),t.addColorStop(0,"rgba(0, 0, 0, 1)"),t.addColorStop(.1,"rgba(0, 0, 0, 0.4)"),t.addColorStop(.33,"rgba(255, 255, 255, 0.45)"),t.addColorStop(.46,"rgba(255, 255, 255, 0)"),t.addColorStop(.9,"rgba(0, 0, 0, 0.4)"),t.addColorStop(1,"rgba(0, 0, 0, 1)"),p.fillStyle=t,p.fill(),i.rect(0,0,f,s*1.1),i.fillStyle=vt,i.fill(),i.strokeStyle="#f0f0f0",i.lineWidth="1px",i.moveTo(0,0),i.lineTo(0,s*1.1),i.stroke(),i.strokeStyle="#202020",i.moveTo(f,0),i.lineTo(f,s*1.1),i.stroke(),i.textAlign="center",i.textBaseline="middle",i.font=g,i.fillStyle=yt,n=9;n<21;n++)i.fillText(n%10,f*.5,h*(n-9)+h/2);if(a>0)for(u.rect(0,0,f,s*1.1),u.fillStyle=ct,u.fill(),u.strokeStyle="#f0f0f0",u.lineWidth="1px",u.moveTo(0,0),u.lineTo(0,s*1.1),u.stroke(),u.strokeStyle="#202020",u.moveTo(f,0),u.lineTo(f,s*1.1),u.stroke(),u.textAlign="center",u.textBaseline="middle",u.font=g,u.fillStyle=lt,n=9;n<21;n++)u.fillText(n%10,f*.5,h*(n-9)+h/2);for(n=0;n<b+a;n++)tt[n]=Math.random()*ot*e-ot*e/2}function wt(){for(var u=1,e=o,i,t,r,s,n=0;n<a;n++)e*=10;for(t=Math.floor(e),r=e-t,t=String(t),s=9,n=0;n<a+b;n++)i=+t.substring(t.length-n-1,t.length-n)||0,s!==9&&(r=0),n<a?w.drawImage(ft,l-f*u,-(h*(i+r)+nt+tt[n])):w.drawImage(ut,l-f*u,-(h*(i+r)+nt+tt[n])),u++,s=i}t=t||{};var et=undefined===t._context?null:t._context,e=undefined===t.height?0:t.height,b=undefined===t.digits?6:t.digits,a=undefined===t.decimals?1:t.decimals,ct=undefined===t.decimalBackColor?"#F0F0F0":t.decimalBackColor,lt=undefined===t.decimalForeColor?"#F01010":t.decimalForeColor,at=undefined===t.font?"sans-serif":t.font,o=undefined===t.value?0:t.value,vt=undefined===t.valueBackColor?"#050505":t.valueBackColor,yt=undefined===t.valueForeColor?"#F8F8F8":t.valueForeColor,ot=undefined===t.wobbleFactor?.07:t.wobbleFactor,st=!1,c,y,k=!1,d,f,g,l,s,h,nt,tt=[],it,w,rt,p,ut,i,ft,u;y=et?et:ht(n);e===0&&(e=y.canvas.height);o<0&&(o=0);d=Math.floor(e*.85);g="600 "+d+"px "+at;f=Math.floor(e*.68);l=f*(b+a);s=d*11;h=s/12;nt=h*.81;y.canvas.width=l;y.canvas.height=e;it=r(l,e);w=it.getContext("2d");rt=r(l,e);p=rt.getContext("2d");ut=r(f,s*1.1);i=ut.getContext("2d");ft=r(f,s*1.1);u=ft.getContext("2d");this.setValueAnimated=function(n,t){var i=this;return n=parseFloat(n),n<0&&(n=0),o!==n&&(undefined!==c&&c.isPlaying&&c.stop(),c=new Tween({},"",Tween.strongEaseOut,o,n,2),c.onMotionChanged=function(n){o=n.target._pos;k||(k=!0,v(i.repaint))},t&&typeof t=="function"&&(c.onMotionFinished=t),c.start()),this.repaint(),this};this.setValue=function(n){return o=parseFloat(n),o<0&&(o=0),this.repaint(),this};this.getValue=function(){return o};this.repaint=function(){st||pt();wt();w.drawImage(rt,0,0);y.drawImage(it,0,0);k=!1};this.repaint()},pi=function(n,i,r,u,f,e){var l=!0,o,s,h=e.symbolColor.getRgbaColor();for(n.save(),n.lineWidth=1,n.fillStyle=h,n.strokeStyle=h,n.translate(i,r),o=0;o<360;o+=15)l=!l,n.beginPath(),n.arc(0,0,u*.26,o*c,(o+15)*c,!1),n.arc(0,0,u*.23,(o+15)*c,o*c,!0),n.closePath(),l&&n.fill(),n.stroke();for(n.translate(-i,-r),o=0;360>=o;o+=90)n.beginPath(),n.moveTo(u*.560747,f*.584112),n.lineTo(u*.640186,f*.644859),n.lineTo(u*.584112,f*.560747),n.lineTo(u*.560747,f*.584112),n.closePath(),n.fillStyle=h,n.fill(),n.stroke(),n.beginPath(),n.moveTo(u*.523364,f*.397196),n.lineTo(u*.5,f*.196261),n.lineTo(u*.471962,f*.397196),n.lineTo(u*.523364,f*.397196),n.closePath(),s=n.createLinearGradient(.476635*u,0,.518691*u,0),s.addColorStop(0,"rgb(222, 223, 218)"),s.addColorStop(.48,"rgb(222, 223, 218)"),s.addColorStop(.49,h),s.addColorStop(1,h),n.fillStyle=s,n.fill(),n.stroke(),n.translate(i,r),n.rotate(o*c),n.translate(-i,-r);n.beginPath();n.translate(i,r);n.arc(0,0,u*.1,0,t,!1);n.lineWidth=u*.022;n.stroke();n.translate(-i,-r);n.restore()},ft=function(n,i,u,f,e){var c,o,s,h,l=i.toString()+u.type+f.light.getHexColor()+f.medium.getHexColor();if(!ft.cache[l]){c=r(i,i);o=c.getContext("2d");switch(u.type){case"type2":s=o.createLinearGradient(0,i*.471962,0,i*.130841);s.addColorStop(0,e.getRgbaColor());s.addColorStop(.36,e.getRgbaColor());s.addColorStop(.361,f.light.getRgbaColor());s.addColorStop(1,f.light.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.518691,i*.471962);o.lineTo(i*.509345,i*.462616);o.lineTo(i*.509345,i*.341121);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.495327,i*.130841);o.lineTo(i*.490654,i*.341121);o.lineTo(i*.490654,i*.462616);o.lineTo(i*.481308,i*.471962);o.closePath();o.fill();break;case"type3":o.beginPath();o.rect(i*.495327,i*.130841,i*.009345,i*.373831);o.closePath();o.fillStyle=f.light.getRgbaColor();o.fill();break;case"type4":s=o.createLinearGradient(.467289*i,0,.528036*i,0);s.addColorStop(0,f.dark.getRgbaColor());s.addColorStop(.51,f.dark.getRgbaColor());s.addColorStop(.52,f.light.getRgbaColor());s.addColorStop(1,f.light.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.5,i*.126168);o.lineTo(i*.514018,i*.135514);o.lineTo(i*.53271,i*.5);o.lineTo(i*.523364,i*.602803);o.lineTo(i*.476635,i*.602803);o.lineTo(i*.467289,i*.5);o.lineTo(i*.485981,i*.135514);o.lineTo(i*.5,i*.126168);o.closePath();o.fill();break;case"type5":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.5,i*.495327);o.lineTo(i*.528037,i*.495327);o.lineTo(i*.5,i*.149532);o.lineTo(i*.471962,i*.495327);o.lineTo(i*.5,i*.495327);o.closePath();o.fill();o.lineWidth=1;o.lineCap="square";o.lineJoin="miter";o.strokeStyle=f.dark.getRgbaColor();o.stroke();break;case"type6":o.fillStyle=f.medium.getRgbaColor();o.beginPath();o.moveTo(i*.481308,i*.485981);o.lineTo(i*.481308,i*.392523);o.lineTo(i*.485981,i*.317757);o.lineTo(i*.495327,i*.130841);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.514018,i*.317757);o.lineTo(i*.518691,i*.38785);o.lineTo(i*.518691,i*.485981);o.lineTo(i*.504672,i*.485981);o.lineTo(i*.504672,i*.38785);o.lineTo(i*.5,i*.317757);o.lineTo(i*.495327,i*.392523);o.lineTo(i*.495327,i*.485981);o.lineTo(i*.481308,i*.485981);o.closePath();o.fill();break;case"type7":s=o.createLinearGradient(.481308*i,0,.518691*i,0);s.addColorStop(0,f.dark.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.490654,i*.130841);o.lineTo(i*.481308,i*.5);o.lineTo(i*.518691,i*.5);o.lineTo(i*.504672,i*.130841);o.lineTo(i*.490654,i*.130841);o.closePath();o.fill();break;case"type8":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.beginPath();o.moveTo(i*.5,i*.53271);o.lineTo(i*.53271,i*.5);o.bezierCurveTo(i*.53271,i*.5,i*.509345,i*.457943,i*.5,i*.149532);o.bezierCurveTo(i*.490654,i*.457943,i*.467289,i*.5,i*.467289,i*.5);o.lineTo(i*.5,i*.53271);o.closePath();o.fill();o.stroke();break;case"type9":s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,"rgb(50, 50, 50)");s.addColorStop(.5,"#666666");s.addColorStop(1,"rgb(50, 50, 50)");o.fillStyle=s;o.strokeStyle="#2E2E2E";o.beginPath();o.moveTo(i*.495327,i*.233644);o.lineTo(i*.504672,i*.233644);o.lineTo(i*.514018,i*.439252);o.lineTo(i*.485981,i*.439252);o.lineTo(i*.495327,i*.233644);o.closePath();o.moveTo(i*.490654,i*.130841);o.lineTo(i*.471962,i*.471962);o.lineTo(i*.471962,i*.528037);o.bezierCurveTo(i*.471962,i*.528037,i*.476635,i*.602803,i*.476635,i*.602803);o.bezierCurveTo(i*.476635,i*.607476,i*.481308,i*.607476,i*.5,i*.607476);o.bezierCurveTo(i*.518691,i*.607476,i*.523364,i*.607476,i*.523364,i*.602803);o.bezierCurveTo(i*.523364,i*.602803,i*.528037,i*.528037,i*.528037,i*.528037);o.lineTo(i*.528037,i*.471962);o.lineTo(i*.509345,i*.130841);o.lineTo(i*.490654,i*.130841);o.closePath();o.fill();o.beginPath();o.moveTo(i*.495327,i*.219626);o.lineTo(i*.504672,i*.219626);o.lineTo(i*.504672,i*.135514);o.lineTo(i*.495327,i*.135514);o.lineTo(i*.495327,i*.219626);o.closePath();o.fillStyle=f.medium.getRgbaColor();o.fill();break;case"type10":o.beginPath();o.moveTo(i*.5,i*.149532);o.bezierCurveTo(i*.5,i*.149532,i*.443925,i*.490654,i*.443925,i*.5);o.bezierCurveTo(i*.443925,i*.53271,i*.467289,i*.556074,i*.5,i*.556074);o.bezierCurveTo(i*.53271,i*.556074,i*.556074,i*.53271,i*.556074,i*.5);o.bezierCurveTo(i*.556074,i*.490654,i*.5,i*.149532,i*.5,i*.149532);o.closePath();s=o.createLinearGradient(.471962*i,0,.528036*i,0);s.addColorStop(0,f.light.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.5,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.medium.getRgbaColor();o.lineWidth=1;o.lineCap="square";o.lineJoin="miter";o.fill();o.stroke();break;case"type11":o.beginPath();o.moveTo(.5*i,.168224*i);o.lineTo(.485981*i,.5*i);o.bezierCurveTo(.485981*i,.5*i,.481308*i,.584112*i,.5*i,.584112*i);o.bezierCurveTo(.514018*i,.584112*i,.509345*i,.5*i,.509345*i,.5*i);o.lineTo(.5*i,.168224*i);o.closePath();s=o.createLinearGradient(0,.168224*i,0,.584112*i);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(1,f.dark.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();break;case"type12":o.beginPath();o.moveTo(.5*i,.168224*i);o.lineTo(.485981*i,.5*i);o.lineTo(.5*i,.504672*i);o.lineTo(.509345*i,.5*i);o.lineTo(.5*i,.168224*i);o.closePath();s=o.createLinearGradient(0,.168224*i,0,.504672*i);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(1,f.dark.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();break;case"type13":case"type14":o.beginPath();o.moveTo(.485981*i,.168224*i);o.lineTo(.5*i,.130841*i);o.lineTo(.509345*i,.168224*i);o.lineTo(.509345*i,.509345*i);o.lineTo(.485981*i,.509345*i);o.lineTo(.485981*i,.168224*i);o.closePath();u.type==="type13"?(s=o.createLinearGradient(0,.5*i,0,.130841*i),s.addColorStop(0,e.getRgbaColor()),s.addColorStop(.85,e.getRgbaColor()),s.addColorStop(.85,f.medium.getRgbaColor()),s.addColorStop(1,f.medium.getRgbaColor()),o.fillStyle=s):(s=o.createLinearGradient(.485981*i,0,.509345*i,0),s.addColorStop(0,f.veryDark.getRgbaColor()),s.addColorStop(.5,f.light.getRgbaColor()),s.addColorStop(1,f.veryDark.getRgbaColor()),o.fillStyle=s);o.fill();break;case"type15":case"type16":o.beginPath();o.moveTo(i*.509345,i*.457943);o.lineTo(i*.5015,i*.13);o.lineTo(i*.4985,i*.13);o.lineTo(i*.490654,i*.457943);o.bezierCurveTo(i*.490654,i*.457943,i*.490654,i*.457943,i*.490654,i*.457943);o.bezierCurveTo(i*.471962,i*.462616,i*.457943,i*.481308,i*.457943,i*.5);o.bezierCurveTo(i*.457943,i*.518691,i*.471962,i*.537383,i*.490654,i*.542056);o.bezierCurveTo(i*.490654,i*.542056,i*.490654,i*.542056,i*.490654,i*.542056);u.type==="type15"?(o.lineTo(i*.490654,i*.57),o.bezierCurveTo(i*.46,i*.58,i*.46,i*.62,i*.490654,i*.63),o.bezierCurveTo(i*.47,i*.62,i*.48,i*.59,i*.5,i*.59),o.bezierCurveTo(i*.53,i*.59,i*.52,i*.62,i*.509345,i*.63),o.bezierCurveTo(i*.54,i*.62,i*.54,i*.58,i*.509345,i*.57),o.lineTo(i*.509345,i*.57)):(o.lineTo(i*.490654,i*.621495),o.lineTo(i*.509345,i*.621495));o.lineTo(i*.509345,i*.542056);o.bezierCurveTo(i*.509345,i*.542056,i*.509345,i*.542056,i*.509345,i*.542056);o.bezierCurveTo(i*.528037,i*.537383,i*.542056,i*.518691,i*.542056,i*.5);o.bezierCurveTo(i*.542056,i*.481308,i*.528037,i*.462616,i*.509345,i*.457943);o.bezierCurveTo(i*.509345,i*.457943,i*.509345,i*.457943,i*.509345,i*.457943);o.closePath();s=u.type==="type15"?o.createLinearGradient(0,0,0,i*.63):o.createLinearGradient(0,0,0,i*.621495);s.addColorStop(0,f.medium.getRgbaColor());s.addColorStop(.388888,f.medium.getRgbaColor());s.addColorStop(.5,f.light.getRgbaColor());s.addColorStop(.611111,f.medium.getRgbaColor());s.addColorStop(1,f.medium.getRgbaColor());o.fillStyle=s;o.strokeStyle=f.dark.getRgbaColor();o.fill();o.stroke();o.beginPath();h=i*.06542/2;o.arc(i*.5,i*.5,h,0,t);s=o.createLinearGradient(i*.5-h,i*.5+h,0,i*.5+h);s.addColorStop(0,"#e6b35c");s.addColorStop(.01,"#e6b35c");s.addColorStop(.99,"#c48200");s.addColorStop(1,"#c48200");o.fillStyle=s;o.closePath();o.fill();o.beginPath();h=i*.046728/2;o.arc(i*.5,i*.5,h,0,t);s=o.createRadialGradient(i*.5,i*.5,0,i*.5,i*.5,h);s.addColorStop(0,"#c5c5c5");s.addColorStop(.19,"#c5c5c5");s.addColorStop(.22,"#000000");s.addColorStop(.8,"#000000");s.addColorStop(.99,"#707070");s.addColorStop(1,"#707070");o.fillStyle=s;o.closePath();o.fill();break;case"type1":default:s=o.createLinearGradient(0,i*.471962,0,i*.130841);s.addColorStop(0,f.veryDark.getRgbaColor());s.addColorStop(.3,f.medium.getRgbaColor());s.addColorStop(.59,f.medium.getRgbaColor());s.addColorStop(1,f.veryDark.getRgbaColor());o.fillStyle=s;o.beginPath();o.moveTo(i*.518691,i*.471962);o.bezierCurveTo(i*.514018,i*.457943,i*.509345,i*.415887,i*.509345,i*.401869);o.bezierCurveTo(i*.504672,i*.383177,i*.5,i*.130841,i*.5,i*.130841);o.bezierCurveTo(i*.5,i*.130841,i*.490654,i*.383177,i*.490654,i*.397196);o.bezierCurveTo(i*.490654,i*.415887,i*.485981,i*.457943,i*.481308,i*.471962);o.bezierCurveTo(i*.471962,i*.481308,i*.467289,i*.490654,i*.467289,i*.5);o.bezierCurveTo(i*.467289,i*.518691,i*.481308,i*.53271,i*.5,i*.53271);o.bezierCurveTo(i*.518691,i*.53271,i*.53271,i*.518691,i*.53271,i*.5);o.bezierCurveTo(i*.53271,i*.490654,i*.528037,i*.481308,i*.518691,i*.471962);o.closePath();o.fill()}ft.cache[l]=c}return n.drawImage(ft.cache[l],0,0),this},g,nt,bt,tt,l,a,it,et,w,v,e,f,y,ut,ct,vt,ui,gt,b,h,lt,ni,ti,yt;ft.cache={};g=function(i,u,f,e,o,s){var p,h,c,l,a,v,y,w=o.toString()+s+u.design;if(!g.cache[w]){p=r(o,s);h=p.getContext("2d");h.fillStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.5)";h.beginPath();h.arc(f,e,o/2,0,t,!0);h.closePath();h.fill();h.stroke();h.beginPath();h.arc(f,e,o*.990654/2,0,t,!0);h.closePath();switch(u.design){case"metal":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"#fefefe");c.addColorStop(.07,"rgb(210, 210, 210)");c.addColorStop(.12,"rgb(179, 179, 179)");c.addColorStop(1,"rgb(213, 213, 213)");h.fillStyle=c;h.fill();break;case"brass":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(249, 243, 155)");c.addColorStop(.05,"rgb(246, 226, 101)");c.addColorStop(.1,"rgb(240, 225, 132)");c.addColorStop(.5,"rgb(90, 57, 22)");c.addColorStop(.9,"rgb(249, 237, 139)");c.addColorStop(.95,"rgb(243, 226, 108)");c.addColorStop(1,"rgb(202, 182, 113)");h.fillStyle=c;h.fill();break;case"steel":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(231, 237, 237)");c.addColorStop(.05,"rgb(189, 199, 198)");c.addColorStop(.1,"rgb(192, 201, 200)");c.addColorStop(.5,"rgb(23, 31, 33)");c.addColorStop(.9,"rgb(196, 205, 204)");c.addColorStop(.95,"rgb(194, 204, 203)");c.addColorStop(1,"rgb(189, 201, 199)");h.fillStyle=c;h.fill();break;case"gold":c=h.createLinearGradient(0,o*.004672,0,s*.990654);c.addColorStop(0,"rgb(255, 255, 207)");c.addColorStop(.15,"rgb(255, 237, 96)");c.addColorStop(.22,"rgb(254, 199, 57)");c.addColorStop(.3,"rgb(255, 249, 203)");c.addColorStop(.38,"rgb(255, 199, 64)");c.addColorStop(.44,"rgb(252, 194, 60)");c.addColorStop(.51,"rgb(255, 204, 59)");c.addColorStop(.6,"rgb(213, 134, 29)");c.addColorStop(.68,"rgb(255, 201, 56)");c.addColorStop(.75,"rgb(212, 135, 29)");c.addColorStop(1,"rgb(247, 238, 101)");h.fillStyle=c;h.fill();break;case"anthracite":c=h.createLinearGradient(0,.004672*s,0,.995326*s);c.addColorStop(0,"rgb(118, 117, 135)");c.addColorStop(.06,"rgb(74, 74, 82)");c.addColorStop(.12,"rgb(50, 50, 54)");c.addColorStop(1,"rgb(79, 79, 87)");h.fillStyle=c;h.fill();break;case"tiltedGray":c=h.createLinearGradient(.233644*o,.084112*s,.81258*o,.910919*s);c.addColorStop(0,"#ffffff");c.addColorStop(.07,"rgb(210, 210, 210)");c.addColorStop(.16,"rgb(179, 179, 179)");c.addColorStop(.33,"#ffffff");c.addColorStop(.55,"#c5c5c5");c.addColorStop(.79,"#ffffff");c.addColorStop(1,"#666666");h.fillStyle=c;h.fill();break;case"tiltedBlack":c=h.createLinearGradient(.228971*o,.079439*s,.802547*o,.898591*s);c.addColorStop(0,"#666666");c.addColorStop(.21,"#000000");c.addColorStop(.47,"#666666");c.addColorStop(.99,"#000000");c.addColorStop(1,"#000000");h.fillStyle=c;h.fill();break;case"glossyMetal":c=h.createRadialGradient(.5*o,.5*s,0,.5*o,.5*o,.5*o);c.addColorStop(0,"rgb(207, 207, 207)");c.addColorStop(.96,"rgb(205, 204, 205)");c.addColorStop(1,"rgb(244, 244, 244)");h.fillStyle=c;h.fill();h.beginPath();h.arc(.5*o,.5*s,.973962*o/2,0,t);h.closePath();c=h.createLinearGradient(0,s-.971962*s,0,.971962*s);c.addColorStop(0,"rgb(249, 249, 249)");c.addColorStop(.23,"rgb(200, 195, 191)");c.addColorStop(.36,"#ffffff");c.addColorStop(.59,"rgb(29, 29, 29)");c.addColorStop(.76,"rgb(200, 194, 192)");c.addColorStop(1,"rgb(209, 209, 209)");h.fillStyle=c;h.fill();h.beginPath();h.arc(.5*o,.5*s,.869158*o/2,0,t);h.closePath();h.fillStyle="#f6f6f6";h.fill();h.beginPath();h.arc(.5*o,.5*s,.85*o/2,0,t);h.closePath();h.fillStyle="#333333";h.fill();break;case"blackMetal":v=[0,.125,.347222,.5,.680555,.875,1];y=[new n(254,254,254,1),new n(0,0,0,1),new n(153,153,153,1),new n(0,0,0,1),new n(153,153,153,1),new n(0,0,0,1),new n(254,254,254,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore();break;case"shinyMetal":v=[0,.125,.25,.347222,.5,.652777,.75,.875,1];y=[new n(254,254,254,1),new n(210,210,210,1),new n(179,179,179,1),new n(238,238,238,1),new n(160,160,160,1),new n(238,238,238,1),new n(179,179,179,1),new n(210,210,210,1),new n(254,254,254,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore();break;case"chrome":v=[0,.09,.12,.16,.25,.29,.33,.38,.48,.52,.63,.68,.8,.83,.87,.97,1];y=[new n(255,255,255,1),new n(255,255,255,1),new n(136,136,138,1),new n(164,185,190,1),new n(158,179,182,1),new n(112,112,112,1),new n(221,227,227,1),new n(155,176,179,1),new n(156,176,177,1),new n(254,255,255,1),new n(255,255,255,1),new n(156,180,180,1),new n(198,209,211,1),new n(246,248,247,1),new n(204,216,216,1),new n(164,188,190,1),new n(255,255,255,1)];h.save();h.arc(f,e,o*.990654/2,0,t,!0);h.clip();l=o*.495327;a=o*.42056;c=new at(v,y);c.fillCircle(h,f,e,a,l);h.strokeStyle="#848484";h.strokeStyle="rgba(132, 132, 132, 0.8)";h.beginPath();h.lineWidth=o/90;h.arc(f,e,o/2,0,t,!0);h.closePath();h.stroke();h.restore()}h.fillStyle="rgb(191, 191, 191)";h.beginPath();h.arc(f,e,o*.841121/2,0,t,!0);h.closePath();h.fill();h.globalCompositeOperation="destination-out";h.beginPath();h.arc(f,e,o*.83/2,0,t,!0);h.closePath();h.fill();g.cache[w]=p}return i.drawImage(g.cache[w],0,0),this};g.cache={};nt=function(i,u,f,e,o,s){var w,h,l,d,g,a=o*.831775/2,tt,it,rt,p,y,v,ut,b,k=o.toString()+s+u.name;if(!nt.cache[k]){if(w=r(o,s),h=w.getContext("2d"),h.beginPath(),h.arc(f,e,a,0,t,!0),h.closePath(),u.name==="CARBON"||u.name==="PUNCHED_SHEET"||u.name==="BRUSHED_METAL"||u.name==="BRUSHED_STAINLESS")u.name==="CARBON"&&(h.fillStyle=h.createPattern(wi,"repeat"),h.fill()),u.name==="PUNCHED_SHEET"&&(h.fillStyle=h.createPattern(bi,"repeat"),h.fill()),l=h.createLinearGradient(a,0,o-a,0),l.addColorStop(0,"rgba(0, 0, 0, 0.25)"),l.addColorStop(.5,"rgba(0, 0, 0, 0)"),l.addColorStop(1,"rgba(0, 0, 0, 0.25)"),h.fillStyle=l,h.beginPath(),h.arc(f,e,a,0,t,!0),h.closePath(),h.fill(),(u.name==="BRUSHED_METAL"||u.name==="BRUSHED_STAINLESS")&&(tt=u.name==="BRUSHED_METAL"?!0:!1,it=parseInt(u.gradientStop.getHexColor().substr(-6),16),rt=ki(it,5,.1,tt,.5),h.fillStyle=h.createPattern(rt.fill(0,0,o,s),"no-repeat"),h.fill());else if(u.name==="STAINLESS"||u.name==="TURNED"){if(d=[0,.03,.1,.14,.24,.33,.38,.5,.62,.67,.76,.81,.85,.97,1],g=[new n("#FDFDFD"),new n("#FDFDFD"),new n("#B2B2B4"),new n("#ACACAE"),new n("#FDFDFD"),new n("#8E8E8E"),new n("#8E8E8E"),new n("#FDFDFD"),new n("#8E8E8E"),new n("#8E8E8E"),new n("#FDFDFD"),new n("#ACACAE"),new n("#B2B2B4"),new n("#FDFDFD"),new n("#FDFDFD")],l=new at(d,g),l.fillCircle(h,f,e,0,a),u.name==="TURNED"){for(p=a,y=p*.55,v=c*(500/p),h.save(),h.beginPath(),h.arc(f,e,p,0,t),h.closePath(),h.clip(),h.lineWidth=.5,ut=t-v*.3,b=0;b<ut;b+=v)h.strokeStyle="rgba(240, 240, 255, 0.25)",h.beginPath(),h.arc(f+y,e,y,0,t),h.stroke(),h.translate(f,e),h.rotate(v*.3),h.translate(-f,-e),h.strokeStyle="rgba(25, 10, 10, 0.1)",h.beginPath(),h.arc(f+y,e,y,0,t),h.stroke(),h.translate(f,e),h.rotate(v-v*.3),h.translate(-f,-e);h.restore()}}else l=h.createLinearGradient(0,o*.084112,0,a*2),l.addColorStop(0,u.gradientStart.getRgbaColor()),l.addColorStop(.4,u.gradientFraction.getRgbaColor()),l.addColorStop(1,u.gradientStop.getRgbaColor()),h.fillStyle=l,h.fill();l=h.createRadialGradient(f,e,0,f,e,a);l.addColorStop(0,"rgba(0, 0, 0, 0)");l.addColorStop(.7,"rgba(0, 0, 0, 0)");l.addColorStop(.71,"rgba(0, 0, 0, 0)");l.addColorStop(.86,"rgba(0, 0, 0, 0.03)");l.addColorStop(.92,"rgba(0, 0, 0, 0.07)");l.addColorStop(.97,"rgba(0, 0, 0, 0.15)");l.addColorStop(1,"rgba(0, 0, 0, 0.3)");h.fillStyle=l;h.beginPath();h.arc(f,e,a,0,t,!0);h.closePath();h.fill();nt.cache[k]=w}return i.drawImage(nt.cache[k],0,0),this};nt.cache={};bt=function(n,i,r,u,f,e){var o=f*.831775,s=e*.831775,h=(f-o)/2,c=(e-s)/2;return i!==null&&i.height>0&&i.width>0&&(n.save(),n.beginPath(),n.arc(r,u,f*.831775/2,0,t,!0),n.clip(),n.drawImage(i,h,c,o,s),n.restore()),this};tt=function(n,t,i,u,f,e,o,s,h){var b,c,v=Math.ceil(u*.084112),y=i*.5-v/2,p=u*.5-v/2,d=i*.008,a,w,k=t.type+i+u+f+(e!==undefined?e.type:"-")+(o!==undefined?o.style:"-")+(h!==undefined?h.type:"-");if(!tt.cache[k]){b=r(i,u);c=b.getContext("2d");f&&(c.shadowColor="rgba(0, 0, 0, 0.8)",c.shadowOffsetX=c.shadowOffsetY=d,c.shadowBlur=d*2,s===steelseries.GaugeType.TYPE5?steelseries.Orientation.WEST===h?(y=i*.733644-v/2,c.drawImage(l(v,e,o),y,p)):steelseries.Orientation.EAST===h?(y=i*(1-.733644)-v/2,c.drawImage(l(v,e,o),y,p)):(p=u*.733644-v/2,c.drawImage(l(v,e,o),y,u*.6857)):c.drawImage(l(v,e,o),y,p),c.shadowOffsetX=c.shadowOffsetY=0,c.shadowBlur=0);switch(t.type){case"type2":c.beginPath();c.moveTo(i*.135514,u*.696261);c.bezierCurveTo(i*.214953,u*.588785,i*.317757,u*.5,i*.462616,u*.425233);c.bezierCurveTo(i*.612149,u*.345794,i*.733644,u*.317757,i*.873831,u*.322429);c.bezierCurveTo(i*.766355,u*.112149,i*.528037,u*.023364,i*.313084,u*.130841);c.bezierCurveTo(i*.09813,u*.238317,i*.028037,u*.485981,i*.135514,u*.696261);c.closePath();a=c.createLinearGradient(.313084*i,.135514*u,.495528*i,.493582*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type3":c.beginPath();c.moveTo(i*.084112,u*.509345);c.bezierCurveTo(i*.21028,u*.556074,i*.462616,u*.560747,i*.5,u*.560747);c.bezierCurveTo(i*.537383,u*.560747,i*.794392,u*.560747,i*.915887,u*.509345);c.bezierCurveTo(i*.915887,u*.2757,i*.738317,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.261682,u*.084112,i*.084112,u*.2757,i*.084112,u*.509345);c.closePath();a=c.createLinearGradient(0,.093457*u,0,.556073*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type4":c.beginPath();c.moveTo(i*.67757,u*.24299);c.bezierCurveTo(i*.771028,u*.308411,i*.822429,u*.411214,i*.813084,u*.528037);c.bezierCurveTo(i*.799065,u*.654205,i*.719626,u*.757009,i*.593457,u*.799065);c.bezierCurveTo(i*.485981,u*.831775,i*.369158,u*.808411,i*.285046,u*.728971);c.bezierCurveTo(i*.2757,u*.719626,i*.252336,u*.714953,i*.233644,u*.728971);c.bezierCurveTo(i*.214953,u*.747663,i*.219626,u*.771028,i*.228971,u*.7757);c.bezierCurveTo(i*.331775,u*.878504,i*.476635,u*.915887,i*.616822,u*.869158);c.bezierCurveTo(i*.771028,u*.822429,i*.873831,u*.691588,i*.88785,u*.53271);c.bezierCurveTo(i*.897196,u*.38785,i*.836448,u*.257009,i*.719626,u*.182242);c.bezierCurveTo(i*.705607,u*.172897,i*.682242,u*.163551,i*.663551,u*.186915);c.bezierCurveTo(i*.654205,u*.205607,i*.668224,u*.238317,i*.67757,u*.24299);c.closePath();a=c.createRadialGradient(.5*i,.5*u,0,.5*i,.5*u,.38785*i);a.addColorStop(0,"rgba(255, 255, 255, 0)");a.addColorStop(.82,"rgba(255, 255, 255, 0)");a.addColorStop(.83,"rgba(255, 255, 255, 0)");a.addColorStop(1,"rgba(255, 255, 255, 0.15)");c.beginPath();c.moveTo(i*.261682,u*.224299);c.bezierCurveTo(i*.285046,u*.238317,i*.252336,u*.285046,i*.24299,u*.317757);c.bezierCurveTo(i*.24299,u*.350467,i*.271028,u*.383177,i*.271028,u*.397196);c.bezierCurveTo(i*.2757,u*.415887,i*.261682,u*.457943,i*.238317,u*.509345);c.bezierCurveTo(i*.224299,u*.542056,i*.17757,u*.612149,i*.158878,u*.612149);c.bezierCurveTo(i*.144859,u*.612149,i*.088785,u*.546728,i*.130841,u*.369158);c.bezierCurveTo(i*.140186,u*.336448,i*.214953,u*.200934,i*.261682,u*.224299);c.closePath();w=c.createLinearGradient(.130841*i,.369158*u,.273839*i,.412877*u);w.addColorStop(0,"rgba(255, 255, 255, 0.275)");w.addColorStop(1,"rgba(255, 255, 255, 0.015)");c.fillStyle=w;c.fill();break;case"type5":c.beginPath();c.moveTo(i*.084112,u*.5);c.bezierCurveTo(i*.084112,u*.271028,i*.271028,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.700934,u*.084112,i*.864485,u*.224299,i*.906542,u*.411214);c.bezierCurveTo(i*.911214,u*.439252,i*.911214,u*.518691,i*.845794,u*.537383);c.bezierCurveTo(i*.794392,u*.546728,i*.551401,u*.411214,i*.392523,u*.457943);c.bezierCurveTo(i*.168224,u*.509345,i*.135514,u*.7757,i*.093457,u*.593457);c.bezierCurveTo(i*.088785,u*.560747,i*.084112,u*.53271,i*.084112,u*.5);c.closePath();a=c.createLinearGradient(0,.084112*u,0,.644859*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)");break;case"type1":default:c.beginPath();c.moveTo(i*.084112,u*.509345);c.bezierCurveTo(i*.205607,u*.448598,i*.336448,u*.415887,i*.5,u*.415887);c.bezierCurveTo(i*.672897,u*.415887,i*.789719,u*.443925,i*.915887,u*.509345);c.bezierCurveTo(i*.915887,u*.2757,i*.738317,u*.084112,i*.5,u*.084112);c.bezierCurveTo(i*.261682,u*.084112,i*.084112,u*.2757,i*.084112,u*.509345);c.closePath();a=c.createLinearGradient(0,.088785*u,0,.490654*u);a.addColorStop(0,"rgba(255, 255, 255, 0.275)");a.addColorStop(1,"rgba(255, 255, 255, 0.015)")}c.fillStyle=a;c.fill();tt.cache[k]=b}return n.drawImage(tt.cache[k],0,0),this};tt.cache={};l=function(n,i,u){var h,f,o=n/2,s=n/2,e,c=n.toString()+i.type+u.style;if(!l.cache[c]){h=r(n*1.18889,n*1.18889);f=h.getContext("2d");switch(i.type){case"metalKnob":f.beginPath();f.moveTo(0,n*.5);f.bezierCurveTo(0,n*.222222,n*.222222,0,n*.5,0);f.bezierCurveTo(n*.777777,0,n,n*.222222,n,n*.5);f.bezierCurveTo(n,n*.777777,n*.777777,n,n*.5,n);f.bezierCurveTo(n*.222222,n,0,n*.777777,0,n*.5);f.closePath();e=f.createLinearGradient(0,0,0,n);e.addColorStop(0,"rgb(92, 95, 101)");e.addColorStop(.47,"rgb(46, 49, 53)");e.addColorStop(1,"rgb(22, 23, 26)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.055555,n*.5);f.bezierCurveTo(n*.055555,n*.277777,n*.277777,n*.055555,n*.5,n*.055555);f.bezierCurveTo(n*.722222,n*.055555,n*.944444,n*.277777,n*.944444,n*.5);f.bezierCurveTo(n*.944444,n*.722222,n*.722222,n*.944444,n*.5,n*.944444);f.bezierCurveTo(n*.277777,n*.944444,n*.055555,n*.722222,n*.055555,n*.5);f.closePath();e=f.createLinearGradient(0,.055555*n,0,.944443*n);switch(u.style){case"black":e.addColorStop(0,"rgb(43, 42, 47)");e.addColorStop(1,"rgb(26, 27, 32)");break;case"brass":e.addColorStop(0,"rgb(150, 110, 54)");e.addColorStop(1,"rgb(124, 95, 61)");break;case"silver":default:e.addColorStop(0,"rgb(204, 204, 204)");e.addColorStop(1,"rgb(87, 92, 98)")}f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.777777,n*.833333);f.bezierCurveTo(n*.722222,n*.722222,n*.611111,n*.666666,n*.5,n*.666666);f.bezierCurveTo(n*.388888,n*.666666,n*.277777,n*.722222,n*.222222,n*.833333);f.bezierCurveTo(n*.277777,n*.888888,n*.388888,n*.944444,n*.5,n*.944444);f.bezierCurveTo(n*.611111,n*.944444,n*.722222,n*.888888,n*.777777,n*.833333);f.closePath();e=f.createRadialGradient(.555555*n,.944444*n,0,.555555*n,.944444*n,.388888*n);e.addColorStop(0,"rgba(255, 255, 255, 0.6)");e.addColorStop(1,"rgba(255, 255, 255, 0)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.944444,n*.277777);f.bezierCurveTo(n*.833333,n*.111111,n*.666666,0,n*.5,0);f.bezierCurveTo(n*.333333,0,n*.166666,n*.111111,n*.055555,n*.277777);f.bezierCurveTo(n*.166666,n*.333333,n*.333333,n*.388888,n*.5,n*.388888);f.bezierCurveTo(n*.666666,n*.388888,n*.833333,n*.333333,n*.944444,n*.277777);f.closePath();e=f.createRadialGradient(.5*n,0,0,.5*n,0,.583333*n);e.addColorStop(0,"rgba(255, 255, 255, 0.749019)");e.addColorStop(1,"rgba(255, 255, 255, 0)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.277777,n*.555555);f.bezierCurveTo(n*.277777,n*.388888,n*.388888,n*.277777,n*.5,n*.277777);f.bezierCurveTo(n*.611111,n*.277777,n*.777777,n*.388888,n*.777777,n*.555555);f.bezierCurveTo(n*.777777,n*.666666,n*.611111,n*.777777,n*.5,n*.777777);f.bezierCurveTo(n*.388888,n*.777777,n*.277777,n*.666666,n*.277777,n*.555555);f.closePath();e=f.createLinearGradient(0,.277777*n,0,.722221*n);e.addColorStop(0,"#000000");e.addColorStop(1,"rgb(204, 204, 204)");f.fillStyle=e;f.fill();f.beginPath();f.moveTo(n*.333333,n*.555555);f.bezierCurveTo(n*.333333,n*.444444,n*.388888,n*.333333,n*.5,n*.333333);f.bezierCurveTo(n*.611111,n*.333333,n*.722222,n*.444444,n*.722222,n*.555555);f.bezierCurveTo(n*.722222,n*.611111,n*.611111,n*.722222,n*.5,n*.722222);f.bezierCurveTo(n*.388888,n*.722222,n*.333333,n*.611111,n*.333333,n*.555555);f.closePath();e=f.createLinearGradient(0,.333333*n,0,.666666*n);e.addColorStop(0,"rgb(10, 9, 1)");e.addColorStop(1,"rgb(42, 41, 37)");f.fillStyle=e;f.fill();break;case"standardKnob":e=f.createLinearGradient(0,0,0,n);e.addColorStop(0,"rgb(180, 180, 180)");e.addColorStop(.46,"rgb(63, 63, 63)");e.addColorStop(1,"rgb(40, 40, 40)");f.fillStyle=e;f.beginPath();f.arc(o,s,n/2,0,t,!0);f.closePath();f.fill();e=f.createLinearGradient(0,n-n*.77,0,n-n*.77+n*.77);switch(u.style){case"black":e.addColorStop(0,"rgb(191, 191, 191)");e.addColorStop(.5,"rgb(45, 44, 49)");e.addColorStop(1,"rgb(125, 126, 128)");break;case"brass":e.addColorStop(0,"rgb(223, 208, 174)");e.addColorStop(.5,"rgb(123, 95, 63)");e.addColorStop(1,"rgb(207, 190, 157)");break;case"silver":default:e.addColorStop(0,"rgb(215, 215, 215)");e.addColorStop(.5,"rgb(116, 116, 116)");e.addColorStop(1,"rgb(215, 215, 215)")}f.fillStyle=e;f.beginPath();f.arc(o,s,n*.77/2,0,t,!0);f.closePath();f.fill();e=f.createRadialGradient(o,s,0,o,s,n*.77/2);e.addColorStop(0,"rgba(0, 0, 0, 0)");e.addColorStop(.75,"rgba(0, 0, 0, 0)");e.addColorStop(.76,"rgba(0, 0, 0, 0.01)");e.addColorStop(1,"rgba(0, 0, 0, 0.2)");f.fillStyle=e;f.beginPath();f.arc(o,s,n*.77/2,0,t,!0);f.closePath();f.fill()}l.cache[c]=h}return l.cache[c]};l.cache={};a=function(n,i,f){var c,e,s=n/2,h=n/2,o,l=n.toString()+i+f.outerColor_ON;if(!a.cache[l]){c=r(n,n);e=c.getContext("2d");switch(i){case 0:o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,f.innerColor1_OFF);o.addColorStop(.2,f.innerColor2_OFF);o.addColorStop(1,f.outerColor_OFF);e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,"rgba(0, 0, 0, 0)");o.addColorStop(.8,"rgba(0, 0, 0, 0)");o.addColorStop(1,"rgba(0, 0, 0, 0.4)");e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createLinearGradient(0,.35*n,0,.35*n+.15*n);o.addColorStop(0,"rgba(255, 255, 255, 0.4)");o.addColorStop(1,"rgba(255, 255, 255, 0)");e.fillStyle=o;e.beginPath();e.arc(s,.35*n+.2*n/2,n*.2,0,t,!0);e.closePath();e.fill();break;case 1:o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,f.innerColor1_ON);o.addColorStop(.2,f.innerColor2_ON);o.addColorStop(1,f.outerColor_ON);e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n*.5/2);o.addColorStop(0,"rgba(0, 0, 0, 0)");o.addColorStop(.8,"rgba(0, 0, 0, 0)");o.addColorStop(1,"rgba(0, 0, 0, 0.4)");e.fillStyle=o;e.beginPath();e.arc(s,h,n*.5/2,0,t,!0);e.closePath();e.fill();o=e.createLinearGradient(0,.35*n,0,.35*n+.15*n);o.addColorStop(0,"rgba(255, 255, 255, 0.4)");o.addColorStop(1,"rgba(255, 255, 255, 0)");e.fillStyle=o;e.beginPath();e.arc(s,.35*n+.2*n/2,n*.2,0,t,!0);e.closePath();e.fill();o=e.createRadialGradient(s,h,0,s,h,n/2);o.addColorStop(0,u(f.coronaColor,0));o.addColorStop(.6,u(f.coronaColor,.4));o.addColorStop(.7,u(f.coronaColor,.25));o.addColorStop(.8,u(f.coronaColor,.15));o.addColorStop(.85,u(f.coronaColor,.05));o.addColorStop(1,u(f.coronaColor,0));e.fillStyle=o;e.beginPath();e.arc(s,h,n/2,0,t,!0);e.closePath();e.fill()}a.cache[l]=c}return a.cache[l]};a.cache={};it=function(n,t,i){var e,f,o=0,v=n,c=t,l=Math.min(n,t)*.095,u,s=1,y=n-2,a=t-2,p=l-1,h=n.toString()+t+JSON.stringify(i);return it.cache[h]||(e=r(n,t),f=e.getContext("2d"),u=f.createLinearGradient(0,o,0,o+c),u.addColorStop(0,"#4c4c4c"),u.addColorStop(.08,"#666666"),u.addColorStop(.92,"#666666"),u.addColorStop(1,"#e6e6e6"),f.fillStyle=u,dt(f,0,o,v,c,l),f.fill(),u=f.createLinearGradient(0,s,0,s+a),u.addColorStop(0,i.gradientStartColor),u.addColorStop(.03,i.gradientFraction1Color),u.addColorStop(.49,i.gradientFraction2Color),u.addColorStop(.5,i.gradientFraction3Color),u.addColorStop(1,i.gradientStopColor),f.fillStyle=u,dt(f,1,s,y,a,p),f.fill(),it.cache[h]=e),it.cache[h]};it.cache={};et=function(n,t,i,r){var f,u,e=n.toString()+t+i+r;return et.cache[e]||(f=d.createElement("canvas"),u=f.getContext("2d"),f.width=n,f.height=n,u.fillStyle=t,i?(u.beginPath(),u.moveTo(n*.5,n),u.lineTo(0,0),u.lineTo(n,0),u.closePath(),u.fill()):r?(u.beginPath(),u.moveTo(n,n*.5),u.lineTo(0,0),u.lineTo(0,n),u.closePath(),u.fill()):(u.beginPath(),u.moveTo(n*.5,0),u.lineTo(n,n),u.lineTo(0,n),u.closePath(),u.fill()),et.cache[e]=f),et.cache[e]};et.cache={};w=function(n,i,f){var o=n*2,h,e,s,c=i.state+n+JSON.stringify(f),l=function(){var r=f[0];i.state==="up"?(s=e.createRadialGradient(.5*n,.2*o,0,.5*n,.2*o,.5*n),s.addColorStop(0,r.innerColor1_ON),s.addColorStop(.2,r.innerColor2_ON),s.addColorStop(1,r.outerColor_ON)):(s=e.createLinearGradient(0,0,0,.5*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"));e.fillStyle=s;e.beginPath();e.moveTo(.5*n,0);e.lineTo(n,.2*o);e.lineTo(.752*n,.2*o);e.lineTo(.752*n,.37*o);e.lineTo(.252*n,.37*o);e.lineTo(.252*n,.2*o);e.lineTo(0,.2*o);e.closePath();e.fill();i.state!=="up"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(0,.2*o),e.lineTo(.5*n,0),e.lineTo(n,.2*o),e.moveTo(.252*n,.2*o),e.lineTo(.252*n,.37*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(.252*n,.37*o),e.lineTo(.752*n,.37*o),e.lineTo(.752*n,.2*o),e.lineTo(n,.2*o),e.stroke()):(s=e.createRadialGradient(.5*n,.2*o,0,.5*n,.2*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.2*o,.7*n,0,t,!0),e.closePath(),e.fill())},a=function(){var r=f[1];e.beginPath();i.state==="steady"?(s=r.outerColor_ON,e.fillStyle=s,e.rect(.128*n,.41*o,.744*n,.074*o),e.rect(.128*n,.516*o,.744*n,.074*o),e.closePath(),e.fill()):(s=e.createLinearGradient(0,.41*o,0,.41*o+.074*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"),e.fillStyle=s,e.rect(.128*n,.41*o,.744*n,.074*o),e.closePath(),e.fill(),s=e.createLinearGradient(0,.516*o,0,.516*o+.074*o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"),e.fillStyle=s,e.rect(.128*n,.516*o,.744*n,.074*o),e.closePath(),e.fill());i.state!=="steady"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(.128*n,.41*o+.074*o),e.lineTo(.128*n,.41*o),e.lineTo(.128*n+.744*n,.41*o),e.stroke(),e.beginPath(),e.moveTo(.128*n,.516*o+.074*o),e.lineTo(.128*n,.516*o),e.lineTo(.128*n+.744*n,.516*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(.128*n+.744*n,.41*o),e.lineTo(.128*n+.744*n,.41*o+.074*o),e.lineTo(.128*n,.41*o+.074*o),e.stroke(),e.beginPath(),e.moveTo(.128*n+.744*n,.516*o),e.lineTo(.128*n+.744*n,.516*o+.074*o),e.lineTo(.128*n,.516*o+.074*o),e.stroke()):(s=e.createRadialGradient(.5*n,.5*o,0,.5*n,.5*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.5*o,.7*n,0,t,!0),e.closePath(),e.fill())},v=function(){var r=f[2];i.state==="down"?(s=e.createRadialGradient(.5*n,.8*o,0,.5*n,.8*o,.5*n),s.addColorStop(0,r.innerColor1_ON),s.addColorStop(.2,r.innerColor2_ON),s.addColorStop(1,r.outerColor_ON)):(s=e.createLinearGradient(0,.63*o,0,o),s.addColorStop(0,"#323232"),s.addColorStop(1,"#5c5c5c"));e.beginPath();e.fillStyle=s;e.moveTo(.5*n,o);e.lineTo(n,.8*o);e.lineTo(.725*n,.8*o);e.lineTo(.725*n,.63*o);e.lineTo(.252*n,.63*o);e.lineTo(.252*n,.8*o);e.lineTo(0,.8*o);e.closePath();e.fill();i.state!=="down"?(e.strokeStyle="rgba(0, 0, 0, 0.4)",e.beginPath(),e.moveTo(0,.8*o),e.lineTo(.252*n,.8*o),e.moveTo(.252*n,.63*o),e.lineTo(.752*n,.63*o),e.stroke(),e.beginPath(),e.moveTo(.752*n,.8*o),e.lineTo(n,.8*o),e.stroke(),e.strokeStyle="rgba(255, 255, 255, 0.3)",e.beginPath(),e.moveTo(0,.8*o),e.lineTo(.5*n,o),e.lineTo(n,.8*o),e.stroke(),e.beginPath(),e.moveTo(.752*n,.8*o),e.lineTo(.752*n,.63*o),e.stroke()):(s=e.createRadialGradient(.5*n,.8*o,0,.5*n,.8*o,.7*n),s.addColorStop(0,u(r.coronaColor,0)),s.addColorStop(.5,u(r.coronaColor,.3)),s.addColorStop(.7,u(r.coronaColor,.2)),s.addColorStop(.8,u(r.coronaColor,.1)),s.addColorStop(.85,u(r.coronaColor,.05)),s.addColorStop(1,u(r.coronaColor,0)),e.fillStyle=s,e.beginPath(),e.arc(.5*n,.8*o,.7*n,0,t,!0),e.closePath(),e.fill())};if(!w.cache[c]){h=r(n*2,n*4);e=h.getContext("2d");e.translate(n*.5,n*.5);switch(i.state){case"up":v();a();l();break;case"steady":v();l();a();break;case"down":default:l();a();v()}w.cache[c]=h}return w.cache[c]};w.cache={};var fi=function(n,t,i,r,u,f,e,o,h,c){c=undefined===c?c=steelseries.GaugeType.TYPE1:c;n.save();n.textAlign=o?"center":"left";n.textBaseline="middle";n.strokeStyle=f.labelColor.getRgbaColor();n.fillStyle=f.labelColor.getRgbaColor();o?(n.font=.046728*t+"px "+s,n.fillText(r,t/2,i*.3,t*.3),n.fillText(u,t/2,i*.38,t*.3)):e?(n.font=.1*t+"px "+s,n.save(),n.translate(.671428*t,.1375*i),n.rotate(1.570796),n.fillText(r,0,0),n.translate(-.671428*t,-.1375*i),n.restore(),n.font=.071428*t+"px "+s,h?c.type==="type2"?(n.textAlign="right",n.fillText(u,.36*t,i*.79,t*.25)):n.fillText(u,.63*t,i*.85,t*.2):(n.textAlign="center",c.type==="type2"?n.fillText(u,t/2,i*.92,t*.2):n.fillText(u,t/2,i*.89,t*.2))):(n.font=.035*t+"px "+s,n.fillText(r,t*.15,i*.25,t*.3),n.font=.025*t+"px "+s,n.fillText(u,t*.0625,i*.7,t*.07));n.restore()},wi=ii(12,12,function(n){var u=n.canvas.width,t=n.canvas.height,f=0,r=0,i;n.save();n.save();n.beginPath();n.rect(0,0,u*.5,t*.5);n.closePath();n.restore();i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"rgb(35, 35, 35)");i.addColorStop(1,"rgb(23, 23, 23)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.083333,0,u*.333333,t*.416666);n.closePath();n.restore();f=.083333;r=0;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(38, 38, 38)");i.addColorStop(1,"rgb(30, 30, 30)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.5,t*.5,u*.5,t*.5);n.closePath();n.restore();f=.5;r=.5;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"rgb(35, 35, 35)");i.addColorStop(1,"rgb(23, 23, 23)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.583333,t*.5,u*.333333,t*.416666);n.closePath();n.restore();f=.583333;r=.5;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(38, 38, 38)");i.addColorStop(1,"rgb(30, 30, 30)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.5,0,u*.5,t*.5);n.closePath();n.restore();f=.5;r=0;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"#303030");i.addColorStop(1,"rgb(40, 40, 40)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.583333,t*.083333,u*.333333,t*.416666);n.closePath();n.restore();f=.583333;r=.083333;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"rgb(53, 53, 53)");i.addColorStop(1,"rgb(45, 45, 45)");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(0,t*.5,u*.5,t*.5);n.closePath();n.restore();f=0;r=.5;i=n.createLinearGradient(0,r*t,0,.5*t+r*t);i.addColorStop(0,"#303030");i.addColorStop(1,"#282828");n.fillStyle=i;n.fill();n.save();n.beginPath();n.rect(u*.083333,t*.583333,u*.333333,t*.416666);n.closePath();n.restore();f=.083333;r=.583333;i=n.createLinearGradient(0,r*t,0,.416666*t+r*t);i.addColorStop(0,"#353535");i.addColorStop(1,"#2d2d2d");n.fillStyle=i;n.fill();n.restore()}),bi=ii(15,15,function(n){var i=n.canvas.width,t=n.canvas.height,r;n.save();n.save();n.beginPath();n.rect(0,0,i,t);n.closePath();n.restore();n.fillStyle="#1D2123";n.fill();n.save();n.beginPath();n.moveTo(0,t*.266666);n.bezierCurveTo(0,t*.4,i*.066666,t*.466666,i*.2,t*.466666);n.bezierCurveTo(i*.333333,t*.466666,i*.4,t*.4,i*.4,t*.266666);n.bezierCurveTo(i*.4,t*.133333,i*.333333,t*.066666,i*.2,t*.066666);n.bezierCurveTo(i*.066666,t*.066666,0,t*.133333,0,t*.266666);n.closePath();r=n.createLinearGradient(0,.066666*t,0,.466666*t);r.addColorStop(0,"#000000");r.addColorStop(1,"#444444");n.fillStyle=r;n.fill();n.save();n.beginPath();n.moveTo(0,t*.2);n.bezierCurveTo(0,t*.333333,i*.066666,t*.4,i*.2,t*.4);n.bezierCurveTo(i*.333333,t*.4,i*.4,t*.333333,i*.4,t*.2);n.bezierCurveTo(i*.4,t*.066666,i*.333333,0,i*.2,0);n.bezierCurveTo(i*.066666,0,0,t*.066666,0,t*.2);n.closePath();n.fillStyle="#050506";n.fill();n.save();n.beginPath();n.moveTo(i*.466666,t*.733333);n.bezierCurveTo(i*.466666,t*.866666,i*.533333,t*.933333,i*.666666,t*.933333);n.bezierCurveTo(i*.8,t*.933333,i*.866666,t*.866666,i*.866666,t*.733333);n.bezierCurveTo(i*.866666,t*.6,i*.8,t*.533333,i*.666666,t*.533333);n.bezierCurveTo(i*.533333,t*.533333,i*.466666,t*.6,i*.466666,t*.733333);n.closePath();r=n.createLinearGradient(0,.533333*t,0,.933333*t);r.addColorStop(0,"#000000");r.addColorStop(1,"#444444");n.fillStyle=r;n.fill();n.save();n.beginPath();n.moveTo(i*.466666,t*.666666);n.bezierCurveTo(i*.466666,t*.8,i*.533333,t*.866666,i*.666666,t*.866666);n.bezierCurveTo(i*.8,t*.866666,i*.866666,t*.8,i*.866666,t*.666666);n.bezierCurveTo(i*.866666,t*.533333,i*.8,t*.466666,i*.666666,t*.466666);n.bezierCurveTo(i*.533333,t*.466666,i*.466666,t*.533333,i*.466666,t*.666666);n.closePath();n.fillStyle="#050506";n.fill();n.restore()}),ki=function(n,t,i,u,f){function e(n,t){return n+=(2*Math.random()-1)*t|0,n<0?0:n>255?255:n}function s(n){return n<0?0:n>255?255:n}function h(n,t,i,r,u,f){var o,v,e,a,s,h,c,l;for(u>=i&&(u=i-1),a=1/(u*2+1),s=0,v=0;v<r;v++){for(h=c=l=0,o=0;o<u;o++)e=(s+o)*4,h+=n.data[e],c+=n.data[e+1],l+=n.data[e+2];for(o=0;o<i;o++)o>u&&(e=(s-u-1)*4,h-=n.data[e],c-=n.data[e+1],l-=n.data[e+2]),o+u<i&&(e=(s+u)*4,h+=n.data[e],c+=n.data[e+1],l+=n.data[e+2]),e=s*4,t.data[e]=h*a|0,t.data[e+1]=c*a|0,t.data[e+2]=l*a|0,t.data[e+3]=f,s++}}return this.fill=function(c,l,a,v){var k,d,nt,ot,p,b,st,g,y,ht,ct=255,lt=n>>16&255,at=n>>8&255,vt=n&255,tt=0,it=255*i,yt,pt,wt,w,rt,ut,ft,et;if(c=Math.floor(c),l=Math.floor(l),a=Math.ceil(a),v=Math.ceil(v),p=a-c,b=v-l,st=r(p,b),g=st.getContext("2d"),y=g.createImageData(p,b),ht=g.createImageData(p,b),f!==0)for(ot=[],k=0;k<p;k++)ot[k]=255*f*Math.sin(k/p*o)|0;for(nt=0;nt<b;nt++)for(t!==0&&(yt=pt=wt=0),d=0;d<p;d++)w=nt*p*4+d*4,rt=lt,ut=at,ft=vt,f!==0&&(et=ot[d],rt+=et,ut+=et,ft+=et),u?(tt=(2*Math.random()-1)*it|0,y.data[w]=s(rt+tt),y.data[w+1]=s(ut+tt),y.data[w+2]=s(ft+tt),y.data[w+3]=ct):(y.data[w]=e(rt,it),y.data[w+1]=e(ut,it),y.data[w+2]=e(ft,it),y.data[w+3]=ct);return t>0?(h(y,ht,p,b,t,ct),g.putImageData(ht,c,l)):g.putImageData(y,c,l),st},this},n=function(n,t,i,r){function s(){u=p(n,255);f=p(t,255);e=p(i,255);o=p(r,1)}var u,f,e,o;arguments.length===1?(i=parseInt(n.substr(5,2),16),t=parseInt(n.substr(3,2),16),n=parseInt(n.substr(1,2),16),r=1):arguments.length===3&&(r=1);s();this.getRed=function(){return u};this.setRed=function(n){u=p(n,255)};this.getGreen=function(){return f};this.setGreen=function(n){f=p(n,255)};this.getBlue=function(){return e};this.setBlue=function(n){e=p(n,255)};this.getAlpha=function(){return o};this.setAlpha=function(n){o=p(n,1)};this.getRgbaColor=function(){return"rgba("+u+", "+f+", "+e+", "+o+")"};this.getRgbColor=function(){return"rgb("+u+", "+f+", "+e+")"};this.getHexColor=function(){return"#"+u.toString(16)+f.toString(16)+e.toString(16)}},at=function(n,i){for(var f=n.length-1,u=0;u<=f;u++)n[u]=t*n[u]-o;this.fillCircle=function(t,e,o,s,h){var w,l=Math.ceil(h),c=l*2,a,tt,v,y,b,k,it,g,p,d,nt,rt;for(a=t.createImageData(c,c),tt=255,y=0;y<c;y++)for(k=l-y,it=k*k,v=0;v<c;v++)if(b=v-l,g=Math.sqrt(b*b+it),g<=l&&g>=s){for(w=Math.atan2(b,k),u=0;u<f;u++)w>=n[u]&&w<n[u+1]&&(d=kt(i[u],i[u+1],n[u+1]-n[u],w-n[u],!0));p=(c-y)*c*4+v*4;a.data[p]=d[0];a.data[p+1]=d[1];a.data[p+2]=d[2];a.data[p+3]=tt}nt=r(c,c);rt=nt.getContext("2d");rt.putImageData(a,0,0);t.drawImage(nt,e-l,o-l)};this.fillRect=function(t,e,o,s,h,c,l){var w,k,d,y,nt,a,v,tt,it,p,b,g,rt;for(s=Math.ceil(s),h=Math.ceil(h),k=s/2,d=h/2,c=Math.ceil(c),l=Math.ceil(l),y=t.createImageData(s,h),nt=255,v=0;v<h;v++)for(it=d-v,a=0;a<s;a++){for(v>l&&v<=h-l&&a>c&&a<s-c&&(a=s-c),tt=a-k,w=Math.atan2(tt,it),u=0;u<f;u++)w>=n[u]&&w<n[u+1]&&(b=kt(i[u],i[u+1],n[u+1]-n[u],w-n[u],!0));p=(h-v)*s*4+a*4;y.data[p]=b[0];y.data[p+1]=b[0];y.data[p+2]=b[0];y.data[p+3]=nt}g=r(s,h);rt=g.getContext("2d");rt.putImageData(y,0,0);t.drawImage(g,e-k,o-d)}},di=function(n,t,i,r){this.getColorAt=function(n){var u=0,e=0,f=1,o=1,t,s;for(n=n<0?0:n>1?1:n,t=0;t<i.length;t++){if(i[t]<n&&u<i[t]&&(u=i[t],e=t),i[t]===n)return r[t];i[t]>n&&f>=i[t]&&(f=i[t],o=t)}return s=(n-u)/(f-u),kt(r[e],r[o],1,s)};this.getStart=function(){return n};this.getEnd=function(){return t}},u=function(n,t){var i="#"===n.charAt(0)?n.substring(1,7):n,r=parseInt(i.substring(0,2),16),u=parseInt(i.substring(2,4),16),f=parseInt(i.substring(4,6),16);return"rgba("+r+","+u+","+f+","+t+")"};Math.log10=function(n){return Math.log(n)/Math.LN10};v=function(){return window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.oRequestAnimationFrame||window.msRequestAnimationFrame||function(n){window.setTimeout(n,1e3/16)}}(),function(){e=function(n,t,i,r,u,f){this.gradientStart=n;this.gradientFraction=t;this.gradientStop=i;this.labelColor=r;this.symbolColor=u;this.name=f}}(),function(){f=function(n,t,i,r,u,f){this.gradientStartColor=n;this.gradientFraction1Color=t;this.gradientFraction2Color=i;this.gradientFraction3Color=r;this.gradientStopColor=u;this.textColor=f}}(),function(){y=function(n,t,i,r,u,f){this.veryDark=n;this.dark=t;this.medium=i;this.light=r;this.lighter=u;this.veryLight=f}}(),function(){ut=function(n,t,i,r,u,f,e){this.innerColor1_ON=n;this.innerColor2_ON=t;this.outerColor_ON=i;this.coronaColor=r;this.innerColor1_OFF=u;this.innerColor2_OFF=f;this.outerColor_OFF=e}}(),function(){ct=function(n){this.type=n}}(),function(){vt=function(n){this.type=n}}(),function(){ui=function(n){this.type=n}}(),function(){gt=function(n){this.style=n}}(),function(){b=function(n){this.design=n}}(),function(){h=function(n){this.type=n}}(),function(){lt=function(n){this.type=n}}(),function(){ni=function(n){this.format=n}}(),function(){ti=function(n){this.type=n}}(),function(){yt=function(n){this.state=n}}();var tr={DARK_GRAY:new e(new n(0,0,0,1),new n(51,51,51,1),new n(153,153,153,1),new n(255,255,255,1),new n(180,180,180,1),"DARK_GRAY"),SATIN_GRAY:new e(new n(45,57,57,1),new n(45,57,57,1),new n(45,57,57,1),new n(167,184,180,1),new n(137,154,150,1),"SATIN_GRAY"),LIGHT_GRAY:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"LIGHT_GRAY"),WHITE:new e(new n(255,255,255,1),new n(255,255,255,1),new n(255,255,255,1),new n(0,0,0,1),new n(80,80,80,1),"WHITE"),BLACK:new e(new n(0,0,0,1),new n(0,0,0,1),new n(0,0,0,1),new n(255,255,255,1),new n(150,150,150,1),"BLACK"),BEIGE:new e(new n(178,172,150,1),new n(204,205,184,1),new n(231,231,214,1),new n(0,0,0,1),new n(80,80,80,1),"BEIGE"),BROWN:new e(new n(245,225,193,1),new n(245,225,193,1),new n(255,250,240,1),new n(109,73,47,1),new n(89,53,27,1),"BROWN"),RED:new e(new n(198,93,95,1),new n(212,132,134,1),new n(242,218,218,1),new n(0,0,0,1),new n(90,0,0,1),"RED"),GREEN:new e(new n(65,120,40,1),new n(129,171,95,1),new n(218,237,202,1),new n(0,0,0,1),new n(0,90,0,1),"GREEN"),BLUE:new e(new n(45,83,122,1),new n(115,144,170,1),new n(227,234,238,1),new n(0,0,0,1),new n(0,0,90,1),"BLUE"),ANTHRACITE:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(250,250,250,1),new n(180,180,180,1),"ANTHRACITE"),MUD:new e(new n(80,86,82,1),new n(70,76,72,1),new n(57,62,58,1),new n(255,255,240,1),new n(225,225,210,1),"MUD"),PUNCHED_SHEET:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(255,255,255,1),new n(180,180,180,1),"PUNCHED_SHEET"),CARBON:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(255,255,255,1),new n(180,180,180,1),"CARBON"),STAINLESS:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"STAINLESS"),BRUSHED_METAL:new e(new n(50,50,54,1),new n(47,47,51,1),new n(69,69,74,1),new n(0,0,0,1),new n(80,80,80,1),"BRUSHED_METAL"),BRUSHED_STAINLESS:new e(new n(50,50,54,1),new n(47,47,51,1),new n(110,110,112,1),new n(0,0,0,1),new n(80,80,80,1),"BRUSHED_STAINLESS"),TURNED:new e(new n(130,130,130,1),new n(181,181,181,1),new n(253,253,253,1),new n(0,0,0,1),new n(80,80,80,1),"TURNED")},ir={BEIGE:new f("#c8c8b1","rgb(241, 237, 207)","rgb(234, 230, 194)","rgb(225, 220, 183)","rgb(237, 232, 191)","#000000"),BLUE:new f("#ffffff","rgb(231, 246, 255)","rgb(170, 224, 255)","rgb(136, 212, 255)","rgb(192, 232, 255)","#124564"),ORANGE:new f("#ffffff","rgb(255, 245, 225)","rgb(255, 217, 147)","rgb(255, 201, 104)","rgb(255, 227, 173)","#503700"),RED:new f("#ffffff","rgb(255, 225, 225)","rgb(253, 152, 152)","rgb(252, 114, 115)","rgb(254, 178, 178)","#4f0c0e"),YELLOW:new f("#ffffff","rgb(245, 255, 186)","rgb(210, 255, 0)","rgb(158, 205, 0)","rgb(210, 255, 0)","#405300"),WHITE:new f("#ffffff","#ffffff","rgb(241, 246, 242)","rgb(229, 239, 244)","#ffffff","#000000"),GRAY:new f("#414141","rgb(117, 117, 117)","rgb(87, 87, 87)","#414141","rgb(81, 81, 81)","#ffffff"),BLACK:new f("#414141","#666666","#333333","#000000","#333333","#cccccc"),GREEN:new f("rgb(33, 67, 67)","rgb(33, 67, 67)","rgb(29, 58, 58)","rgb(28, 57, 57)","rgb(23, 46, 46)","rgba(0, 185, 165, 255)"),BLUE2:new f("rgb(0, 68, 103)","rgb(8, 109, 165)","rgb(0, 72, 117)","rgb(0, 72, 117)","rgb(0, 68, 103)","rgb(111, 182, 228)"),BLUE_BLACK:new f("rgb(22, 125, 212)","rgb(3, 162, 254)","rgb(3, 162, 254)","rgb(3, 162, 254)","rgb(11, 172, 244)","#000000"),BLUE_DARKBLUE:new f("rgb(18, 33, 88)","rgb(18, 33, 88)","rgb(19, 30, 90)","rgb(17, 31, 94)","rgb(21, 25, 90)","rgb(23, 99, 221)"),BLUE_GRAY:new f("rgb(135, 174, 255)","rgb(101, 159, 255)","rgb(44, 93, 255)","rgb(27, 65, 254)","rgb(12, 50, 255)","#b2b4ed"),STANDARD:new f("rgb(131, 133, 119)","rgb(176, 183, 167)","rgb(165, 174, 153)","rgb(166, 175, 156)","rgb(175, 184, 165)","rgb(35, 42, 52)"),STANDARD_GREEN:new f("#ffffff","rgb(219, 230, 220)","rgb(179, 194, 178)","rgb(153, 176, 151)","rgb(114, 138, 109)","#080C06"),BLUE_BLUE:new f("rgb(100, 168, 253)","rgb(100, 168, 253)","rgb(95, 160, 250)","rgb(80, 144, 252)","rgb(74, 134, 255)","#002cbb"),RED_DARKRED:new f("rgb(72, 36, 50)","rgb(185, 111, 110)","rgb(148, 66, 72)","rgb(83, 19, 20)","rgb(7, 6, 14)","#FE8B92"),DARKBLUE:new f("rgb(14, 24, 31)","rgb(46, 105, 144)","rgb(19, 64, 96)","rgb(6, 20, 29)","rgb(8, 9, 10)","#3DB3FF"),LILA:new f("rgb(175, 164, 255)","rgb(188, 168, 253)","rgb(176, 159, 255)","rgb(174, 147, 252)","rgb(168, 136, 233)","#076148"),BLACKRED:new f("rgb(8, 12, 11)","rgb(10, 11, 13)","rgb(11, 10, 15)","rgb(7, 13, 9)","rgb(9, 13, 14)","#B50026"),DARKGREEN:new f("rgb(25, 85, 0)","rgb(47, 154, 0)","rgb(30, 101, 0)","rgb(30, 101, 0)","rgb(25, 85, 0)","#233123"),AMBER:new f("rgb(182, 71, 0)","rgb(236, 155, 25)","rgb(212, 93, 5)","rgb(212, 93, 5)","rgb(182, 71, 0)","#593A0A"),LIGHTBLUE:new f("rgb(125, 146, 184)","rgb(197, 212, 231)","rgb(138, 155, 194)","rgb(138, 155, 194)","rgb(125, 146, 184)","#090051"),SECTIONS:new f("#b2b2b2","#ffffff","#c4c4c4","#c4c4c4","#b2b2b2","#000000")},rr={RED:new y(new n(82,0,0,1),new n(158,0,19,1),new n(213,0,25,1),new n(240,82,88,1),new n(255,171,173,1),new n(255,217,218,1)),GREEN:new y(new n(8,54,4,1),new n(0,107,14,1),new n(15,148,0,1),new n(121,186,37,1),new n(190,231,141,1),new n(234,247,218,1)),BLUE:new y(new n(0,11,68,1),new n(0,73,135,1),new n(0,108,201,1),new n(0,141,242,1),new n(122,200,255,1),new n(204,236,255,1)),ORANGE:new y(new n(118,83,30,1),new n(215,67,0,1),new n(240,117,0,1),new n(255,166,0,1),new n(255,255,128,1),new n(255,247,194,1)),YELLOW:new y(new n(41,41,0,1),new n(102,102,0,1),new n(177,165,0,1),new n(255,242,0,1),new n(255,250,153,1),new n(255,252,204,1)),CYAN:new y(new n(15,109,109,1),new n(0,109,144,1),new n(0,144,191,1),new n(0,174,239,1),new n(153,223,249,1),new n(204,239,252,1)),MAGENTA:new y(new n(98,0,114,1),new n(128,24,72,1),new n(191,36,107,1),new n(255,48,143,1),new n(255,172,210,1),new n(255,214,23,1)),WHITE:new y(new n(210,210,210,1),new n(220,220,220,1),new n(235,235,235,1),new n(255,255,255,1),new n(255,255,255,1),new n(255,255,255,1)),GRAY:new y(new n(25,25,25,1),new n(51,51,51,1),new n(76,76,76,1),new n(128,128,128,1),new n(204,204,204,1),new n(243,243,243,1)),BLACK:new y(new n(0,0,0,1),new n(5,5,5,1),new n(10,10,10,1),new n(15,15,15,1),new n(20,20,20,1),new n(25,25,25,1)),RAITH:new y(new n(0,32,65,1),new n(0,65,125,1),new n(0,106,172,1),new n(130,180,214,1),new n(148,203,242,1),new n(191,229,255,1)),GREEN_LCD:new y(new n(0,55,45,1),new n(15,109,93,1),new n(0,185,165,1),new n(48,255,204,1),new n(153,255,227,1),new n(204,255,241,1)),JUG_GREEN:new y(new n(0,56,0,1),new n(32,69,36,1),new n(50,161,0,1),new n(129,206,0,1),new n(190,231,141,1),new n(234,247,218,1))},ur={RED_LED:new ut("#FF9A89","#FF9A89","#FF3300","#FF8D70","#7E1C00","#7E1C00","#641B00"),GREEN_LED:new ut("#9AFF89","#9AFF89","#59FF2A","#A5FF00","#1C7E00","#1C7E00","#1B6400"),BLUE_LED:new ut("#899AFF","#899AFF","#0033FF","#708DFF","#001C7E","#001C7E","#001B64"),ORANGE_LED:new ut("#FEA23F","#FEA23F","#FD6C00","#FD6C00","#592800","#592800","#421F00"),YELLOW_LED:new ut("#FFFF62","#FFFF62","#FFFF00","#FFFF00","#6B6D00","#6B6D00","#515300"),CYAN_LED:new ut("#00FFFF","#00FFFF","#1BC3C3","#00FFFF","#083B3B","#083B3B","#052727"),MAGENTA_LED:new ut("#D300FF","#D300FF","#8600CB","#C300FF","#38004B","#38004B","#280035")},fr={TYPE1:new ct("type1"),TYPE2:new ct("type2"),TYPE3:new ct("type3"),TYPE4:new ct("type4"),TYPE5:new ct("type5")},er={NORTH:new vt("north"),SOUTH:new vt("south"),EAST:new vt("east"),WEST:new vt("west")},or={STANDARD_KNOB:new ui("standardKnob"),METAL_KNOB:new ui("metalKnob")},sr={BLACK:new gt("black"),BRASS:new gt("brass"),SILVER:new gt("silver")},hr={BLACK_METAL:new b("blackMetal"),METAL:new b("metal"),SHINY_METAL:new b("shinyMetal"),BRASS:new b("brass"),STEEL:new b("steel"),CHROME:new b("chrome"),GOLD:new b("gold"),ANTHRACITE:new b("anthracite"),TILTED_GRAY:new b("tiltedGray"),TILTED_BLACK:new b("tiltedBlack"),GLOSSY_METAL:new b("glossyMetal")},cr={TYPE1:new h("type1"),TYPE2:new h("type2"),TYPE3:new h("type3"),TYPE4:new h("type4"),TYPE5:new h("type5"),TYPE6:new h("type6"),TYPE7:new h("type7"),TYPE8:new h("type8"),TYPE9:new h("type9"),TYPE10:new h("type10"),TYPE11:new h("type11"),TYPE12:new h("type12"),TYPE13:new h("type13"),TYPE14:new h("type14"),TYPE15:new h("type15"),TYPE16:new h("type16")},lr={TYPE1:new lt("type1"),TYPE2:new lt("type2"),TYPE3:new lt("type3"),TYPE4:new lt("type4"),TYPE5:new lt("type5")},ar={STANDARD:new ni("standard"),FRACTIONAL:new ni("fractional"),SCIENTIFIC:new ni("scientific")},vr={NORMAL:new ti("normal"),HORIZONTAL:new ti("horizontal"),TANGENT:new ti("tangent")},yr={UP:new yt("up"),STEADY:new yt("steady"),DOWN:new yt("down"),OFF:new yt("off")};return{Radial:hi,RadialBargraph:ci,DisplaySingle:li,WindDirection:ai,Led:vi,Odometer:yi,drawFrame:g,drawBackground:nt,drawForeground:tt,rgbaColor:n,ConicalGradient:at,setAlpha:u,getColorFromFraction:kt,gradientWrapper:di,BackgroundColor:tr,LcdColor:ir,ColorDef:rr,LedColor:ur,GaugeType:fr,Orientation:er,FrameDesign:hr,PointerType:cr,ForegroundType:lr,KnobType:or,KnobStyle:sr,LabelNumberFormat:ar,TickLabelOrientation:vr,TrendState:yr,Section:gi}}()
+/*!*********************************************************************
+TERMS OF USE - EASING EQUATIONS
+Open source under the BSD License.
+Copyright (c) 2001 Robert Penner
+JavaScript version copyright (C) 2006 by Philippe Maegerman
+All rights reserved.
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are
+met:
+   * Redistributions of source code must retain the above copyright
+notice, this list of conditions and the following disclaimer.
+   * Redistributions in binary form must reproduce the above
+copyright notice, this list of conditions and the following disclaimer
+in the documentation and/or other materials provided with the
+distribution.
+   * Neither the name of the author nor the names of contributors may
+be used to endorse or promote products derived from this software
+without specific prior written permission.
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
+"AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
+LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
+A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
+OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
+SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
+LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
+DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
+THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+*****************************************/
+function Delegate(){}Delegate.create=function(n,t){for(var r=[],u=arguments.length,i=2;i<u;i++)r[i-2]=arguments[i];return function(){var i=[].concat(arguments,r);t.apply(n,i)}};var Tween=function(n,t,i,r,u,f,e){this.init(n,t,i,r,u,f,e)},t=Tween.prototype;t.obj={},t.prop="",t.func=function(n,t,i,r){return i*n/r+t},t.begin=0,t.change=0,t.prevTime=0,t.prevPos=0,t.looping=!1,t._duration=0,t._time=0,t._pos=0,t._position=0,t._startTime=0,t._finish=0,t.name="",t.suffixe="",t._listeners=[],t.setTime=function(n){this.prevTime=this._time,n>this.getDuration()?this.looping?(this.rewind(n-this._duration),this.update(),this.broadcastMessage("onMotionLooped",{target:this,type:"onMotionLooped"})):(this._time=this._duration,this.update(),this.stop(),this.broadcastMessage("onMotionFinished",{target:this,type:"onMotionFinished"})):n<0?(this.rewind(),this.update()):(this._time=n,this.update())},t.getTime=function(){return this._time},t.setDuration=function(n){this._duration=n===null||n<=0?1e5:n},t.getDuration=function(){return this._duration},t.setPosition=function(n){this.prevPos=this._pos;var t=this.suffixe!==""?this.suffixe:"";this.obj[this.prop]=Math.round(n)+t,this._pos=n,this.broadcastMessage("onMotionChanged",{target:this,type:"onMotionChanged"})},t.getPosition=function(n){return n===undefined&&(n=this._time),this.func(n,this.begin,this.change,this._duration)},t.setFinish=function(n){this.change=n-this.begin},t.getFinish=function(){return this.begin+this.change},t.init=function(n,t,i,r,u,f,e){arguments.length&&(this._listeners=[],this.addListener(this),e&&(this.suffixe=e),this.obj=n,this.prop=t,this.begin=r,this._pos=r,this.setDuration(f),i!==null&&i!==""&&(this.func=i),this.setFinish(u))},t.start=function(){this.rewind(),this.startEnterFrame(),this.broadcastMessage("onMotionStarted",{target:this,type:"onMotionStarted"})},t.rewind=function(n){this.stop(),this._time=n===undefined?0:n,this.fixTime(),this.update()},t.fforward=function(){this._time=this._duration,this.fixTime(),this.update()},t.update=function(){this.setPosition(this.getPosition(this._time))},t.startEnterFrame=function(){this.stopEnterFrame(),this.isPlaying=!0,this.onEnterFrame()},t.onEnterFrame=function(){this.isPlaying&&(this.nextFrame(),setTimeout(Delegate.create(this,this.onEnterFrame),25))},t.nextFrame=function(){this.setTime((this.getTimer()-this._startTime)/1e3)},t.stop=function(){this.stopEnterFrame(),this.broadcastMessage("onMotionStopped",{target:this,type:"onMotionStopped"})},t.stopEnterFrame=function(){this.isPlaying=!1},t.playing=function(){return this.isPlaying},t.continueTo=function(n,t){this.begin=this._pos,this.setFinish(n),this._duration!==undefined&&this.setDuration(t),this.start()},t.resume=function(){this.fixTime(),this.startEnterFrame(),this.broadcastMessage("onMotionResumed",{target:this,type:"onMotionResumed"})},t.yoyo=function(){this.continueTo(this.begin,this._time)},t.addListener=function(n){return this.removeListener(n),this._listeners.push(n)},t.removeListener=function(n){for(var t=this._listeners,i=t.length;i--;)if(t[i]===n)return t.splice(i,1),!0;return!1},t.broadcastMessage=function(){for(var i=[],r,t=this._listeners,u=t.length,n=0;n<arguments.length;n++)i.push(arguments[n]);for(r=i.shift(),n=0;n<u;n++)t[n][r]&&t[n][r].apply(t[n],i)},t.fixTime=function(){this._startTime=this.getTimer()-this._time*1e3},t.getTimer=function(){return(new Date).getTime()-this._time},Tween.backEaseIn=function(n,t,i,r){var u=1.70158;return i*(n/=r)*n*((u+1)*n-u)+t},Tween.backEaseOut=function(n,t,i,r){var u=1.70158;return i*((n=n/r-1)*n*((u+1)*n+u)+1)+t},Tween.backEaseInOut=function(n,t,i,r){var u=1.70158;return(n/=r/2)<1?i/2*n*n*(((u*=1.525)+1)*n-u)+t:i/2*((n-=2)*n*(((u*=1.525)+1)*n+u)+2)+t},Tween.elasticEaseIn=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r)==1?t+i:(f||(f=r*.3),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),-(u*Math.pow(2,10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f))+t)},Tween.elasticEaseOut=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r)==1?t+i:(f||(f=r*.3),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),u*Math.pow(2,-10*n)*Math.sin((n*r-e)*2*Math.PI/f)+i+t)},Tween.elasticEaseInOut=function(n,t,i,r,u,f){var e;return n===0?t:(n/=r/2)==2?t+i:(f||(f=r*.3*1.5),!u||u<Math.abs(i)?(u=i,e=f/4):e=f/(2*Math.PI)*Math.asin(i/u),n<1)?-.5*u*Math.pow(2,10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f)+t:u*Math.pow(2,-10*(n-=1))*Math.sin((n*r-e)*2*Math.PI/f)*.5+i+t},Tween.bounceEaseOut=function(n,t,i,r){return(n/=r)<1/2.75?i*7.5625*n*n+t:n<2/2.75?i*(7.5625*(n-=1.5/2.75)*n+.75)+t:n<2.5/2.75?i*(7.5625*(n-=2.25/2.75)*n+.9375)+t:i*(7.5625*(n-=2.625/2.75)*n+.984375)+t},Tween.bounceEaseIn=function(n,t,i,r){return i-Tween.bounceEaseOut(r-n,0,i,r)+t},Tween.bounceEaseInOut=function(n,t,i,r){return n<r/2?Tween.bounceEaseIn(n*2,0,i,r)*.5+t:Tween.bounceEaseOut(n*2-r,0,i,r)*.5+i*.5+t},Tween.strongEaseInOut=function(n,t,i,r){return i*(n/=r)*n*n*n*n+t},Tween.regularEaseIn=function(n,t,i,r){return i*(n/=r)*n+t},Tween.regularEaseOut=function(n,t,i,r){return-i*(n/=r)*(n-2)+t},Tween.regularEaseInOut=function(n,t,i,r){return(n/=r/2)<1?i/2*n*n+t:-i/2*(--n*(n-2)-1)+t},Tween.strongEaseIn=function(n,t,i,r){return i*(n/=r)*n*n*n*n+t},Tween.strongEaseOut=function(n,t,i,r){return i*((n=n/r-1)*n*n*n*n+1)+t},Tween.strongEaseInOut=function(n,t,i,r){return(n/=r/2)<1?i/2*n*n*n*n*n+t:i/2*((n-=2)*n*n*n*n+2)+t}
diff --git a/webfiles/monthlyrecord.htm b/webfiles/monthlyrecord.htm
new file mode 100644
index 0000000..8166932
--- /dev/null
+++ b/webfiles/monthlyrecord.htm
@@ -0,0 +1,265 @@
+<!--
+	monthlyrecord.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:23:33
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local		-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<script src="js/monthlyrecdata.js"></script>
+		<style>
+			.mx-button {margin-bottom: 5px; border-radius: 4px;}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Monthly records<span class="subText"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records for <span id="MonthName">January</span></h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;" >
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span id="TempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="TempHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span id="TempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="TempLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span id="DewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="DewPointHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span id="DewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="DewPointLT"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span id="AppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="AppTempHT"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span id="AppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="AppTempLT"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span id="FeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="FeelsLikeHT"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span id="FeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="FeelsLikeLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span id="WChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="WChillLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span id="HeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="HeatIndexHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span id="MinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="MinTempHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span id="MaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="MaxTempLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span id="HumH"></span>&nbsp;%</td>
+											<td class=""><span id="HumHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity</td>
+											<td class="w3-right-align"><span id="HumL"></span>&nbsp;%</td>
+											<td class=""><span id="HumLT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span id="HighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="HighDailyTempRangeT"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span id="LowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span id="LowDailyTempRangeT"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span id="RainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span id="RainRateHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span id="HourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="HourlyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span id="Rain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="Rain24HourHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span id="DailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="DailyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span id="MonthlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span id="MonthlyRainHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span id="LongestDryPeriod"></span>&nbsp;days</td>
+											<td class=""><span id="LongestDryPeriodT"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span id="LongestWetPeriod"></span>&nbsp;days</td>
+											<td class=""><span id="LongestWetPeriodT"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span id="GustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span id="GustHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span id="WindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span id="WindHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span id="WindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span id="WindRunHT"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span id="PressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span id="PressHT"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span id="PressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span id="PressLT"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="w3-row-padding w3-hide">	<!--	Row 2 of 3/4 width panel (hidden)	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Main panel</h2>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>Select the required month below.</p>
+								<div id="btnArray" 	class="w3-bar-block w3-center">
+									<button id="btnMon0" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(0)" aria-pressed="false">January</button>
+									<button id="btnMon1" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onClick="changeData(1)" aria-pressed="false">February</button>
+									<button id="btnMon2" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(2)" aria-pressed="false">March</button>
+									<button id="btnMon3" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(3)" aria-pressed="false">April</button>
+									<button id="btnMon4" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(4)" aria-pressed="false">May</button>
+									<button id="btnMon5" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(5)" aria-pressed="false">June</button>
+									<button id="btnMon6" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(6)" aria-pressed="false">July</button>
+									<button id="btnMon7" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(7)" aria-pressed="false">August</button>
+									<button id="btnMon8" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(8)" aria-pressed="false">September</button>
+									<button id="btnMon9" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(9)" aria-pressed="false">October</button>
+									<button id="btnMon10" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(10)" aria-pressed="false">November</button>
+									<button id="btnMon11" class="w3-bar-item w3-btn w3-theme-l2 w3-theme-hvr at-slim mx-button" onclick="changeData(11)" aria-pressed="false">December</button>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/noaareport.htm b/webfiles/noaareport.htm
new file mode 100644
index 0000000..cc25846
--- /dev/null
+++ b/webfiles/noaareport.htm
@@ -0,0 +1,130 @@
+<!--
+	noaareport.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2021/06/10 15:48:11
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3schools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility JavaScript's for all pages.	-->
+		<script src="js/noaarpts.js"></script>
+		<style>
+			#year, #month {
+				padding-bottom: 4px;
+				padding-top: 5px;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<!--	START OF PAGE CONTENT	Don't change anything above	-->
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">
+				<div class="w3-col l12">
+					<!--	Page Title goes HERE	-->
+					<div class="at-flex-between at-flex-items-center">
+						<h1>NOAA Reports<span class="subText"></span></h1>
+					</div>
+				</div>
+			</div>	<!--	End of title row	-->
+			<!--	Start of main content panels	-->
+			<div class="w3-row site-width w3-theme-light">
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">
+						<div class="w3-col s12">
+							<div id="NOAAMenu" class="w3-bar">
+								<div class="w3-bar-item at-slim">
+									<select id="year" class="w3-select w3-theme-l4" onchange="getYearRpt(this.value);"></select>
+								</div>
+								<div class="w3-bar-item at-slim">
+									<select id="month" class="w3-select w3-theme-l4" onchange="getMonRpt(this.value);">
+										<option id="opt-year" value="0" style="text-transform: uppercase;">Annual</option>
+										<option id="opt-1" value="1">January</option>
+										<option id="opt-2" value="2">February</option>
+										<option id="opt-3" value="3">March</option>
+										<option id="opt-4" value="4">April</option>
+										<option id="opt-5" value="5">May</option>
+										<option id="opt-6" value="6">June</option>
+										<option id="opt-7" value="7">July</option>
+										<option id="opt-8" value="8">August</option>
+										<option id="opt-9" value="9">September</option>
+										<option id="opt-10" value="10">October</option>
+										<option id="opt-11" value="11">November</option>
+										<option id="opt-12" value="12">December</option>
+									</select>
+								</div>
+							</div>
+						</div>
+					</div>
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width panel on all screens	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<!--	Panel title here	-->
+								<!-- <h3><span id="RptTitle"></span></h3> -->
+								<!--	Panel content goes here	-->
+								<pre class="w3-responsive" style="min-height:500px;"><span id="noaareport">Loading report...</span></pre>
+								<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+				<!--	Start of Sidebar	-->
+				<div class="w3-col l3 m12">
+					<div class="w3-row-padding">
+						<!--	First panel of sidebar	-->
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<!--	Sidebar content here	-->
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<!--	You can remove the above line if you wish	-->
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	CHANGE NOTHING BELOW HERE	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/webfiles/record.htm b/webfiles/record.htm
new file mode 100644
index 0000000..c79273c
--- /dev/null
+++ b/webfiles/record.htm
@@ -0,0 +1,240 @@
+<!--
+	record.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 10:25:28
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Records Since <span data-cmxdata="recordsbegandate"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;" >
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="tempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TtempH"></span></td>
+										</tr>
+											<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="tempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TtempL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="dewpointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TdewpointH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="dewpointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TdewpointL"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="apptempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TapptempH"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="apptempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TapptempL"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="feelslikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TfeelslikeH"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="feelslikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TfeelslikeL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="wchillH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TwchillH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="heatindexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TheatindexH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="mintempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TmintempH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="maxtempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TmaxtempL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="humH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="ThumH"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="humL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="ThumL"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="HighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="THighDailyTempRange"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="LowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="TLowDailyTempRange"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="rrateM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="TrrateM"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallhH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallhH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="r24hourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="Tr24hourH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="rfallmH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="TrfallmH"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="LongestDryPeriod"></span>&nbsp;days</td>
+											<td class=""><span data-cmxdata="TLongestDryPeriod"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="LongestWetPeriod"></span>&nbsp;days</td>
+											<td class=""><span data-cmxdata="TLongestWetPeriod"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="gustM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="TgustM"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="wspeedH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="TwspeedH"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="windrunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="TwindrunH"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="pressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="TpressH"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="pressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="TpressL"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>Records began on <span data-cmxdata="recordsbegandate"></span>. Here are the extremes recorded since then.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/selectachart.htm b/webfiles/selectachart.htm
new file mode 100644
index 0000000..5ef65c8
--- /dev/null
+++ b/webfiles/selectachart.htm
@@ -0,0 +1,137 @@
+<!--
+	selectachart.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/02/10 14:48:11
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local		-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+		<style>
+			#chartcontainer {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+			.narrow-width {
+				max-width: 500px;
+			}
+			.select-value {
+				width:75%;
+				display:inline-block;
+			}
+			.select-color {
+				width:20%;
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of main content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Charts based on data you select<span class="subText"></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	Column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>
+			</div>	<!--	End of first column of first row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Start of second row	-->
+				<div class="w3-col s12">
+					<div class="w3-center">
+						<!--	Selector buttons	-->
+						<div class="at-flex-between" style="flex-wrap:wrap"> <!--	Main flex container: between forces content left & right -->
+							<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2">	<!--	Left bar for selectors	-->
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data0" id="data0" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour0" id="colour0" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data1" id="data1" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour1" id="colour1" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data2" id="data2" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour2" id="colour2" onchange="updateColour(this)"></select>
+								</div>
+							</div>
+							<div class="at-flex-justify" style="max-width:550px;flex-wrap:wrap;flex:2"> <!--	Right bar for selectors	-->
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data3" id="data3" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour3" id="colour3" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data4" id="data4" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour4" id="colour4" onchange="updateColour(this)"></select>
+								</div>
+								<div class="" style="max-width:170px;min-height:2.5em;">
+									<select class="w3-select select-value" name="data5" id="data5" onchange="procDataSelect(this)"></select>
+									<select class="w3-select select-color" name="colour5" id="colour5" onchange="updateColour(this)"></select>
+								</div>
+							</div>
+						</div>
+						<div class="w3-panel">Click on a button to display the corresponding chart.&nbsp; Mouse over the chart to see the values at any given time.</div>
+					</div>
+				</div>
+			</div>	<!--	End of first column of second row	-->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/selectachart.js"></script>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/thismonth.htm b/webfiles/thismonth.htm
new file mode 100644
index 0000000..20fa2e3
--- /dev/null
+++ b/webfiles/thismonth.htm
@@ -0,0 +1,235 @@
+<!--
+	thismonth.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:16:14
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1><span data-cmxdata="monthname"></span> highs &amp; lows</h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class=""><span data-cmxdata="monthname"></span> <span data-cmxdata="year"></span> records</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;">
+										<tr class="w3-theme-d5">
+											<td colspan="3">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthTempHT"></span> on <span data-cmxdata="MonthTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthTempLT"></span> on <span data-cmxdata="MonthTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDewPointHT"></span> on <span data-cmxdata="MonthDewPointHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDewPointLT"></span> on <span data-cmxdata="MonthDewPointLD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthAppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthAppTempHT"></span> on <span data-cmxdata="MonthAppTempHD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthAppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthAppTempLT"></span> on <span data-cmxdata="MonthAppTempLD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthFeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthFeelsLikeHT"></span> on <span data-cmxdata="MonthFeelsLikeHD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthFeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthFeelsLikeLT"></span> on <span data-cmxdata="MonthFeelsLikeLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthWChillLT"></span> on <span data-cmxdata="MonthWChillLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHeatIndexHT"></span> on <span data-cmxdata="MonthHeatIndexHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthMinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthMinTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthMaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthMaxTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHumH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="MonthHumHT"></span> on <span data-cmxdata="MonthHumHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHumL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="MonthHumLT"></span> on <span data-cmxdata="MonthHumLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHighDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="MonthLowDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthRainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="MonthRainRateHT"></span> on <span data-cmxdata="MonthRainRateHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthHourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthHourlyRainHT"></span> on <span data-cmxdata="MonthHourlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthRain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthRain24HourHT"></span> on <span data-cmxdata="MonthRain24HourHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthDailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="MonthDailyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLongestDryPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="MonthLongestDryPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthLongestWetPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="MonthLongestWetPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthGustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="MonthGustHT"></span> on <span data-cmxdata="MonthGustHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10 minute average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="MonthWindHT"></span> on <span data-cmxdata="MonthWindHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthWindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="MonthWindRunHD"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthPressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="MonthPressHT"></span> on <span data-cmxdata="MonthPressHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="MonthPressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="MonthPressLT"></span> on <span data-cmxdata="MonthPressLD"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>The high and low records for the month of <span data-cmxdata="monthname"></span> <span data-cmxdata="year"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/thisyear.htm b/webfiles/thisyear.htm
new file mode 100644
index 0000000..a5cb131
--- /dev/null
+++ b/webfiles/thisyear.htm
@@ -0,0 +1,240 @@
+<!--
+	thisyear.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 09:19:30
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Records for this year <span class="subText"><span data-cmxdata="year"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Records for <span data-cmxdata="year"></span></h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%;">
+										<tr>
+											<td colspan="3" class="w3-theme-d5">Temperature and Humidity </td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearTempHT"></span> on <span data-cmxdata="YearTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearTempLT"></span> on <span data-cmxdata="YearTempLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDewPointH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearDewPointHT"></span> on <span data-cmxdata="YearDewPointHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Dew Point</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDewPointL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearDewPointLT"></span> on <span data-cmxdata="YearDewPointLD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">High Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="YearAppTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearAppTempHT"></span> on <span data-cmxdata="YearAppTempHD"></span></td>
+										</tr>
+										<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+											<td class="">Low Apparent</td>
+											<td class="w3-right-align"><span data-cmxdata="YearAppTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearAppTempLT"></span> on <span data-cmxdata="YearAppTempLD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">High Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="YearFeelsLikeH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearFeelsLikeHT"></span> on <span data-cmxdata="YearFeelsLikeHD"></span></td>
+										</tr>
+										<tr data-cmx-feels class="w3-theme-l2">
+											<td class="">Low Feels Like</td>
+											<td class="w3-right-align"><span data-cmxdata="YearFeelsLikeL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearFeelsLikeLT"></span> on <span data-cmxdata="YearFeelsLikeLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Wind Chill</td>
+											<td class="w3-right-align"><span data-cmxdata="YearWChillL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearWChillLT"></span> on <span data-cmxdata="YearWChillLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Heat Index</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHeatIndexH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+										<td class=""><span data-cmxdata="YearHeatIndexHT"></span> on <span data-cmxdata="YearHeatIndexHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Minimum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMinTempH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearMinTempHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Maximum Temperature</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMaxTempL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearMaxTempLD"></span></td>
+											</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Humidity</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHumH"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="YearHumHT"></span> on <span data-cmxdata="YearHumHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Humidity </td>
+											<td class="w3-right-align"><span data-cmxdata="YearHumL"></span>&nbsp;%</td>
+											<td class=""><span data-cmxdata="YearHumLT"></span> on <span data-cmxdata="YearHumLD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">High Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHighDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearHighDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-l2">
+											<td class="">Low Daily Range</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLowDailyTempRange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+											<td class=""><span data-cmxdata="YearLowDailyTempRangeD"></span></td>
+										</tr>
+										<tr class="w3-theme-d4">
+											<td colspan="3">Rainfall</td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Rain Rate</td>
+											<td class="w3-right-align"><span data-cmxdata="YearRainRateH"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+											<td class=""><span data-cmxdata="YearRainRateHT"></span> on <span data-cmxdata="YearRainRateHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Hourly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearHourlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearHourlyRainHT"></span> on <span data-cmxdata="YearHourlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High 24 Hour Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearRain24HourH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearRain24HourHT"></span> on <span data-cmxdata="YearRain24HourHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Daily Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearDailyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearDailyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">High Monthly Rainfall</td>
+											<td class="w3-right-align"><span data-cmxdata="YearMonthlyRainH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+											<td class=""><span data-cmxdata="YearMonthlyRainHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Dry Period</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLongestDryPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="YearLongestDryPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-l3">
+											<td class="">Longest Wet Period</td>
+											<td class="w3-right-align"><span data-cmxdata="YearLongestWetPeriod"></span>&nbsp;days</td>
+											<td class="">to <span data-cmxdata="YearLongestWetPeriodD"></span></td>
+										</tr>
+										<tr class="w3-theme-d3">
+											<td colspan="3">Wind</td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Gust</td>
+											<td class="w3-right-align"><span data-cmxdata="YearGustH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="YearGustHT"></span> on <span data-cmxdata="YearGustHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Wind Speed <span class="subText">(10-minute Average)</span></td>
+											<td class="w3-right-align"><span data-cmxdata="YearWindH"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+											<td class=""><span data-cmxdata="YearWindHT"></span> on <span data-cmxdata="YearWindHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l4">
+											<td class="">High Daily Wind Run</td>
+											<td class="w3-right-align"><span data-cmxdata="YearWindRunH"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+											<td class=""><span data-cmxdata="YearWindRunHD"></span></td>
+										</tr>
+										<tr class="w3-theme-d2">
+											<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">High Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="YearPressH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="YearPressHT"></span> on <span data-cmxdata="YearPressHD"></span></td>
+										</tr>
+										<tr class="w3-theme-l5">
+											<td class="">Low Pressure</td>
+											<td class="w3-right-align"><span data-cmxdata="YearPressL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+											<td class=""><span data-cmxdata="YearPressLT"></span> on <span data-cmxdata="YearPressLD"></span></td>
+										</tr>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>The high and low records for <span data-cmxdata="year"></span>.</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/today.htm b/webfiles/today.htm
new file mode 100644
index 0000000..30eb1b6
--- /dev/null
+++ b/webfiles/today.htm
@@ -0,0 +1,239 @@
+<!--
+	today.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 10:11:12
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Today <span class="subText"><span data-cmxdata="date"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2>Today&#39;s  data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<td colspan="3">Temperature and Humidity</td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent Temperature</td>
+												<td><span data-cmxdata="apptempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempTH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent Temperature</td>
+												<td><span data-cmxdata="apptempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempTL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeTH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TwchillTL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TheatindexTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humTH"></span> %</td>
+												<td>at <span data-cmxdata="ThumTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humTL"></span> %</td>
+												<td>at <span data-cmxdata="ThumTL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td colspan="3">Rainfall</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Today</td>
+												<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate Max</td>
+												<td><span data-cmxdata="rrateTM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td>at <span data-cmxdata="TrrateTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="ThourlyrainTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High 24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="Train24hourTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Days Since Last Dry Day</td>
+												<td><span data-cmxdata="ConsecutiveRainDays"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Days Since It Last Rained</td>
+												<td><span data-cmxdata="ConsecutiveDryDays"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td colspan="3">Wind</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Gust</td>
+												<td><span data-cmxdata="wgustTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td>at <span data-cmxdata="TwgustTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Speed <span class="subText">(10 minute average)</span></td>
+												<td><span data-cmxdata="windTM"></span>&nbsp;<span data-cmxdata="windunit"></span> (<span data-cmxdata="Tbeaufort"></span>)</td>
+												<td>at <span data-cmxdata="TwindTM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressTH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressTL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressTL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
+												<td colspan="3" class="w3-theme-d1">Solar</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarTH"></span> W/m<sup>2</sup></td>
+												<td>at <span data-cmxdata="TsolarTH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="SunshineHours"></span> hrs</td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+												<td>High UV Index</td>
+												<td><span data-cmxdata="UVTH"></span></td>
+												<td>at <span data-cmxdata="TUVTH"></span></td>
+											</tr>
+											</tbody>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 screen width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows the highs, lows and current values for today.<br>
+									This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used at this station ends at
+									<span data-cmxdata="rollovertime"></span>.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/todayyest.htm b/webfiles/todayyest.htm
new file mode 100644
index 0000000..abe291e
--- /dev/null
+++ b/webfiles/todayyest.htm
@@ -0,0 +1,283 @@
+<!--
+	todayT.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/10/15 11:15:18
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX - Today vs Yesterday</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between at-flex-items-center">
+					<img src="images/CumulusMX-Logo.png" alt="CumulusmX Logo" class="w3-image logo"/>
+					<div class="w3-right-align statusPanel">
+						<h5 class="location w3-hide-small">Latitude:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|</span>Longitude:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|</span>Altitude:&nbsp;<span data-cmxdata="altitude"></span></h5>
+						<h6 class="location w3-hide-medium w3-hide-large">Lat:<span data-cmxdata="latitude"></span><span class="at-divider">|</span>Lon:<span data-cmxdata="longitude"></span><span class="at-divider">|</span>Alt:<span data-cmxdata="altitude"></span></h6>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Today vs Yesterday <span class="subText"> (<span data-cmxdata="yesterday"></span>)</span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2>Today and Yesterday&#39;s  data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<th style="width:50%">Temperature and Humidity</th>
+												<th style="width:10%">Today</th>
+												<th style="width:15%"></th>
+												<th style="width:10%">Yesterday</th>
+												<th style="width:15%"></th>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempTH"></span></td>
+												<td><span data-cmxdata="tempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempTL"></span></td>
+												<td><span data-cmxdata="tempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TtempYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprange"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="temprangeY"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent<span class="w3-hide-medium w3-hide-small"> Temperature</span></td>
+												<td><span data-cmxdata="apptempTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempTH"></span></td>
+												<td><span data-cmxdata="apptempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempYH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent<span class="w3-hide-medium w3-hide-small"> Temperature</span></td>
+												<td><span data-cmxdata="apptempTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempTL"></span></td>
+												<td><span data-cmxdata="apptempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TapptempYL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeTH"></span></td>
+												<td><span data-cmxdata="feelslikeYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeYH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeTL"></span></td>
+												<td><span data-cmxdata="feelslikeYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TfeelslikeYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillTL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwchillTL"></span></td>
+												<td><span data-cmxdata="wchillYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwchillYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexTH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TheatindexTH"></span></td>
+												<td><span data-cmxdata="heatindexYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TheatindexYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humTH"></span> %</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </spaw3-hide-medium w3-hide-smalln><span data-cmxdata="ThumTH"></span></td>
+												<td><span data-cmxdata="humYH"></span>&nbsp;%</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humTL"></span> %</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumTL"></span></td>
+												<td><span data-cmxdata="humYL"></span>&nbsp;%</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThumYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td>Rainfall</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall</td>
+												<td><span data-cmxdata="rfall"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="rfallY"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate<span class="w3-hide-medium w3-hide-small"> Max</span></td>
+												<td><span data-cmxdata="rrateTM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TrrateTM"></span></td>
+												<td><span data-cmxdata="rrateYM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TrrateYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td><span class="w3-hide-medium w3-hide-small">High </span>Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThourlyrainTH"></span></td>
+												<td><span data-cmxdata="hourlyrainYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="ThourlyrainYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td><span class="w3-hide-medium w3-hide-small">High </span>24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourTH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="Train24hourTH"></span></td>
+												<td><span data-cmxdata="rain24hourYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="Train24hourYH"></span></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td>Wind</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Highest Gust</td>
+												<td><span data-cmxdata="wgustTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwgustTM"></span></td>
+												<td><span data-cmxdata="wgustYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwgustYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Highest Avg Speed</td>
+												<td><span data-cmxdata="windTM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwindTM"></span></td>
+												<td><span data-cmxdata="windYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TwindYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrun"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+												<td><span data-cmxdata="windrunY"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearing"></span>&deg; <span data-cmxdata="domwinddir"></span></td>
+												<td></td>
+												<td><span data-cmxdata="domwindbearingY"></span>&deg; <span data-cmxdata="domwinddirY"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td>Pressure (sea level)</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressTH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressTH"></span></td>
+												<td><span data-cmxdata="pressYH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressTL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressTL"></span></td>
+												<td><span data-cmxdata="pressYL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TpressYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar>
+												<td>Solar</td>
+												<td colspan="2">Today</td>
+												<td colspan="2">Yesterday</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarTH"></span> W/m<sup>2</sup></td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TsolarTH"></span></td>
+												<td><span data-cmxdata="solarYH"></span>&nbsp;W/m&sup2;</td>
+												<td><span class="w3-hide-medium w3-hide-small">at </span><span data-cmxdata="TsolarYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="SunshineHours"></span> hrs</td>
+												<td></td>
+												<td><span data-cmxdata="YSunshineHours"></span>&nbsp;hrs</td>
+												<td></td>
+											</tr>
+											</tbody>
+									</table>
+									<p class="w3-small">Page data updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 screen width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">	<!--	Full width of sidebar -->
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows the highs, lows and current values for today and yesterday.<br>
+									This page is updated every <span data-cmxdata="interval"></span> minutes. The meteorological day used <span class="w3-hide-medium w3-hide-small">at </span>this station ends at
+									<span data-cmxdata="rollovertime"></span>.
+								</p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<!--	Footer	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/trends.htm b/webfiles/trends.htm
new file mode 100644
index 0000000..4cb3704
--- /dev/null
+++ b/webfiles/trends.htm
@@ -0,0 +1,125 @@
+<!--
+	trends.htm		v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2023/03/16 09:46:57
+	Page: 1 main panel plus a sidebar
+	NOTE: Once uploaded this page does not need to be uploaded again unless edited.
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3schools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+
+		<style>
+			#chartcontainer  {
+				min-height: 550px;
+				margin-top:16px;
+				margin-bottom: 16px;
+			}
+			.mx-button {
+				margin-bottom: 5px;
+				border-radius: 4px;
+			}
+			.graphs-width {
+				max-width:1250px;
+				margin: auto
+			}
+		</style>
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of main content	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Trends</h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	First Row	-->
+				<div class="w3-col s12">	<!--	First column of first row	-->
+					<div class="w3-panel w3-card w3-theme-white">
+						<figure>
+							<div id="chartcontainer"></div>
+						</figure>
+					</div>
+				</div>	<!--	End of first column of first row	-->
+			</div>
+			<div class="w3-row-padding w3-theme-light graphs-width">	<!--	Second row	-->
+				<div class="w3-col s12">
+					<div class="w3-cardX w3-panelX w3-center">
+						<div class="w3-bar w3-center">
+							<select id="mySelect" aria-label="select data type for graph" class="w3-bar-item w3-select w3-theme-l2  at-slim">
+								<option value="temp" selected>Temperature</option>
+								<option value="dailytemp">Daily Temperature</option>
+								<option value="press">Pressure</option>
+								<option value="wind">Wind Speed</option>
+								<option value="windDir">Wind Direction</option>
+								<option value="humidity">Humidity</option>
+								<option value="rain">Rainfall</option>
+								<option value="dailyrain">Daily Rain</option>
+								<option value="solar">Solar</option>
+								<option value="sunhours">Sunshine Hours</option>
+								<option value="airquality">Air Quality</option>
+								<option value="extratemp">Extra Temperature</option>
+								<option value="extrahum">Extra Humidity</option>
+								<option value="extradew">Extra Dew Point</option>
+								<option value="soiltemp">Soil Temperature</option>
+								<option value="soilmoist">Soil Moisture</option>
+								<option value="leafwet">Leaf Wetness</option>
+								<option value="usertemp">User Temperature</option>
+								<option value="co2">CO&#8322; Sensor</option>
+							</select>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of row	-->
+		</div>	<!--	End of Content	-->
+		<div class="w3-row-padding"></div>
+			<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+		<script src="https://code.highcharts.com/stock/10.3.3/highstock.js"></script>
+		<script src="https://code.highcharts.com/stock/10.3.3/modules/exporting.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/export-data.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/accessibility.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/modules/boost.js"></script>
+		<script src="https://code.highcharts.com/10.3.3/themes/grid.js"></script>
+		<script src="js/cumuluscharts.js"></script>	<!--	Script needed to run charts	-->
+	</body>
+</html>
\ No newline at end of file
diff --git a/webfiles/upload.php b/webfiles/upload.php
new file mode 100644
index 0000000..5f02dd0
--- /dev/null
+++ b/webfiles/upload.php
@@ -0,0 +1,364 @@
+<?php
+// Last modified: 2023/03/23 11:10:44
+
+/*
+******** PHP Upload script for Cumulus MX ********
+
+Use as an alternative to FTP/SFTP upload of data
+
+Mark Crossley - 2023
+
+*/
+
+// *** YOU NEED TO CHANGE THIS VALUE ***
+// Our signature secret
+$secret = 'change_this_to_the_value_in_CMX';
+
+// limitPath: restricts the upload script to placing files in the same folder structure as the script resides
+// That is you cannot specify something like /etc/init.d/sudo as a filename
+// Setting this to false allows the script to attempt to write anywhere in your filesystem that it has permission
+$limitPath = true;
+
+// logs additional information to the reponses sent back to CMX, do not enable unless asked
+$debug = false;
+
+
+// *****************************************
+// *** DO NOT CHANGE ANYTHING BELOW HERE ***
+// *****************************************
+
+ob_start();
+
+if ($secret === 'change_this_to_the_value_in_CMX') {
+    exitCode(500, 'You must change the default secret');
+}
+
+if ($debug) {
+    $headers =  getallheaders();
+    foreach($headers as $key=>$val){
+    echo "$key: $val\n";
+    }
+    echo 'CWD = '.getcwd()."\n";
+}
+
+// first check for GET/POST
+if ($_SERVER['REQUEST_METHOD'] === 'GET') {
+    // used for testing the compression response
+?>
+<html>
+    <body>
+        Welcome to upload.php<br>
+<?php
+    echo str_repeat("xx xx", 1000), "<br>"
+?>
+    </body>
+</html>
+<?php
+    exit;
+} elseif ($_SERVER['REQUEST_METHOD'] != 'POST') {
+    exitCode(500, 'Error: Must use POST method');
+}
+
+// ---------------------------------------------------------------
+// Get all the mandatory data we need from the POST message
+// ---------------------------------------------------------------
+
+// We need a timestamp to check the signature and validity
+$receivedTime = $_SERVER['REQUEST_TIME'];
+if (isset($_SERVER['HTTP_TS'])) {
+    $requestTime = $_SERVER['HTTP_TS'];
+} else {
+    exitCode(422, 'Error: No timestamp');
+}
+
+if (abs($receivedTime - $requestTime) > 10) {
+    $msg = "Error: TimeStamp is out of date\n" .
+        "Data TS   = $requestTime\n" .
+        "Server TS = $receivedTime\n";
+    exitCode(422, $msg);
+}
+
+// The signature to test
+if (isset($_SERVER['HTTP_SIGNATURE'])) {
+    $signatureSent = $_SERVER['HTTP_SIGNATURE'];
+} else {
+    exitCode(422, 'Error: No signature');
+}
+
+if (isset($_SERVER['HTTP_FILE'])) {
+    $name = $_SERVER['HTTP_FILE'];
+
+    // first check if the file is escaping our local folder structure
+    if ($limitPath) {
+        $name_dir = pathinfo($name)['dirname'];
+        $name_fullpath = resolvePath($name_dir);
+        $cwd = getcwd();
+
+        if (substr($name_fullpath, 0, strlen($cwd)) !== $cwd) {
+            exitCode(500, 'Error: Attempting to escape local folder structure');
+        }
+    }
+
+    // if the file exists, check the file is writable
+    if (file_exists($name)) {
+        if (!is_writable($name)) {
+            exitCode(500, "Error: Target file $name is not writable by this user " . `whoami`);
+        }
+    } else {
+        if (!touch($name)) {
+            exitCode(500, "Error: Cannot create the target file $name with this user " . `whoami`);
+        }
+    }
+} else {
+    exitCode(422, 'Error: No filename');
+}
+
+// Now what are we doing with the file?
+if (isset($_SERVER["HTTP_ACTION"])) {
+    $action = $_SERVER['HTTP_ACTION'];
+} else {
+    exitCode(422, 'Error: No action');
+}
+
+if ($action !== 'replace' && $action !== 'append') {
+    exitCode(422, "Error: Invalid header ACTION = $action");
+}
+
+// If appending - get the earlist timestamp - JS timestamps overflow PHP int!
+if ($action === 'append') {
+    if (isset($_SERVER['HTTP_OLDEST'])) {
+        $oldestTs = (float)$_SERVER['HTTP_OLDEST'];
+    } else {
+        exitCode(422, 'Error: No oldest timestamp');
+    }
+}
+
+$utf8 = $_SERVER['HTTP_UTF8'];
+if ($utf8 != '0' && $utf8 != '1') {
+    // default to UTF-8 as before if not supplied
+    $utf8 = '1';
+}
+
+$binary = $_SERVER['HTTP_BINARY'];
+if ($binary != '0' && $binary != '1') {
+    exitCode(422, "Error: Invalid header BINARY = $binary");
+}
+
+if (isset($_SERVER['HTTP_RAW_POST_DATA'])) {
+    $data = $_SERVER['HTTP_RAW_POST_DATA'];
+} else {
+    $data = file_get_contents('php://input');
+}
+
+if (strlen($data) == 0) {
+    exitCode(422, 'Error: No data sent');
+}
+
+if (isset($_SERVER['HTTP_CONTENT_ENCODING'])) {
+    if ($_SERVER['HTTP_CONTENT_ENCODING'] == 'gzip') {
+        echo "Unzipping data\n";
+        $data = gzdecode($data);
+    } elseif ($_SERVER['HTTP_CONTENT_ENCODING'] == 'deflate') {
+        echo "Inflating data\n";
+        $data = gzinflate($data);
+    }
+}
+
+if ($debug) {
+    //echo "Data = $data\n";
+}
+
+// ---------------------------------------------------------------
+// Check the signature sent matches what we calculate
+// ---------------------------------------------------------------
+$ourSignature = CalculateSignature($secret, $requestTime . $name . $data);
+if ($signatureSent != $ourSignature) {
+    $msg = "Error: Invalid signature\n" .
+        "Data Sig   = $signatureSent\n" .
+        "Server Sig = $ourSignature\n" .
+        "Server sig data = " . $requestTime . $name . substr($data, 0, 50);
+    exitCode(422, $msg);
+}
+
+// change encoding if required
+if ($utf8 == '0') {
+    $data = mb_convert_encoding($data, "ISO-8859-1", "UTF-8");
+}
+
+// ---------------------------------------------------------------
+// Finally, do the processing
+// ---------------------------------------------------------------
+
+if ($action === 'replace') {
+    // do we need to decode a base64 string back to binary data
+    echo 'Opening ' . ($binary == '1' ? 'binary' : 'text') . " file $name for replacement\n";
+    if ($binary == '1') {
+        $data =  base64_decode($data);
+    }
+    WriteFile($name, $data, $binary == '1');
+    exitCode(200);
+} else if ($action === 'append') {
+    // first check we have some data to append!
+    $dataObj = json_decode($data, false);
+    if (is_null($dataObj)) {
+        exitCode(500, 'No valid JSON data in the received data');
+    }
+
+    // next check we have an existing file to append
+    // if not then just write the new data to a dest file
+    echo "Opening text file $name for appending\n";
+    if (!file_exists($name) || filesize($name) === 0) {
+        echo "No existing file to append data - $name\n";
+        WriteFile($name, $data);
+        exitCode(200);
+    }
+
+    // open the target file for reading
+    if (!$outFile = fopen($name, 'r')) {
+        exitCode(500, "Failed to open file $name");
+    }
+
+    $fileObj = json_decode(fgets($outFile), false);
+    fclose($outFile);
+
+    // no valid data in the dest file
+    if (is_null($fileObj)) {
+        echo "No valid JSON data in - $name\n";
+        echo "Writing data as a new file\n";
+        WriteFile($name, $data);
+        exitCode(200);
+    }
+
+    if ($debug) {
+        echo "New data:\n";
+        var_dump($dataObj);
+        echo "\n";
+    }
+
+    // remove the old data
+    foreach ($fileObj as $key => $val) {
+        if (is_null($val)) {
+            continue;
+        }
+
+        // $val format is [[ts,val],[ts,val]...]
+        if ($debug) {
+            echo "Processing entry $key\n";
+        }
+
+        $arr = $val;
+        do {
+            if (sizeof($arr) > 0 && $arr[0][0] < $oldestTs) {
+                if ($debug) {
+                    echo "Removing entry $key - ".$arr[0][0]."\n";
+                }
+                array_shift($arr);
+            } else {
+                break;
+            }
+        } while(true);
+        $fileObj->$key = $arr;
+    }
+
+    // append the new data
+    foreach ($dataObj as $key => $val) {
+        if (is_null($val)) {
+            continue;
+        }
+
+        if ($debug) {
+            echo "Appending new data: $key - ".sizeof($val)."\n";
+        }
+
+        if (sizeof($val) > 0) {
+            $fileObj->$key = array_merge($fileObj->$key,  $val);
+        }
+    }
+
+    // write the file back again
+    echo "Appending text file $name\n";
+    WriteFile($name, json_encode($fileObj));
+
+} else {
+    exitCode(422, 'Error: Invalid action'. $action);
+}
+
+exitCode(200);
+
+///////// end of script //////////
+
+// ---------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------
+
+function CalculateSignature($secret, $data) {
+    return hash_hmac('sha256', $data, $secret, false);
+}
+
+
+function WriteFile($filename, $content, $binary=false) {
+        // open the target file for writing
+        $mode = 'w' . ($binary ? 'b': '');
+
+        $outFile = fopen($filename, $mode) or die("Cannot create file $filename with mode $mode");
+        if (!$outFile) {
+            echo "Failed to open file $filename - mode $mode";
+            http_response_code(500);
+            exit;
+        }
+
+        echo 'Writing ' . ($binary ? 'binary': 'text') . " file $filename\n";
+
+        if (fwrite($outFile, $content) == FALSE) {
+            echo "Write failed";
+            http_response_code(500);
+        } else {
+            echo 'Write complete';
+        }
+
+        fclose($outFile);
+}
+
+set_exception_handler(function($ex) {
+    echo "\nException occurred!\n\n";
+    echo print_r($ex);
+    exitCode(500);
+});
+
+
+function resolvePath($path) {
+    if(DIRECTORY_SEPARATOR !== '/') {
+        $path = str_replace(DIRECTORY_SEPARATOR, '/', $path);
+    }
+    $search = explode('/', $path);
+    $search = array_filter($search, function($part) {
+        return $part !== '.';
+    });
+    $append = array();
+    $match = false;
+    while(count($search) > 0) {
+        $match = realpath(implode('/', $search));
+        if($match !== false) {
+            break;
+        }
+        array_unshift($append, array_pop($search));
+    };
+    if($match === false) {
+        $match = getcwd();
+    }
+    if(count($append) > 0) {
+        $match .= DIRECTORY_SEPARATOR . implode(DIRECTORY_SEPARATOR, $append);
+    }
+    return $match;
+}
+
+function exitCode($code, $msg=null) {
+    if (null !== $msg)
+        echo $msg;
+    http_response_code($code);
+    //header('Connection: close');
+    header('Content-Length: '.ob_get_length());
+    ob_end_flush(); // Strange behaviour, will not work
+    flush(); // Unless both are called !
+    exit;
+}
\ No newline at end of file
diff --git a/webfiles/yesterday.htm b/webfiles/yesterday.htm
new file mode 100644
index 0000000..f04923a
--- /dev/null
+++ b/webfiles/yesterday.htm
@@ -0,0 +1,225 @@
+<!--
+	yesterday.htm	v:0.0.1		d:Feb 2021	Neil Thomas
+	Last modified: 2022/07/27 10:10:28
+	Page: 1 main panel plus a sidebar
+-->
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<meta name="description" content="weather data">
+		<meta name="keywords" content="Cumulus, weather, data, weather station">
+		<title>Cumulus MX</title>
+		<link rel="icon" type="image/png" href="images/favicon.png">
+
+		<!--	jQuery Local	-->
+		<script src="lib/jquery/jquery-latest.min.js"></script>
+
+		<!--	Fonts	System will default to a sans-serif font if no Internet connection -->
+		<link rel="preconnect" href="https://fonts.gstatic.com">
+		<link href="https://fonts.googleapis.com/css2?family=Rosario:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
+
+		<!--	All Styles	-->
+		<link href="css/w3Pro.css" rel="stylesheet">			<!--	Basic w3shools responsive styles	-->
+		<link href="css/colours.css" rel="stylesheet">		<!--	Slightly enhanced w3schools colours	-->
+  		<link href="css/mx-templates.css" rel="stylesheet">	<!--	Specific styles for these templates.	-->
+
+		<!--	Scripts	-->
+		<script src="js/setpagedata.js"></script>	<!--	Utility javascripts for all pages.	-->
+	</head>
+	<body>
+		<div id="Header" class="w3-row w3-top w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<div class="at-flex-between" style="align-items:center; flex-wrap:wrap;">
+					<img src="images/CumulusMX-Logo.png" class="w3-image logo" alt="Header logo"/>
+					<div class="w3-right-align" style="max-width:600px;">
+						<h5>Lat<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="latitude"></span><span class="at-divider">|<wbr></span>Long<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="longitude"></span><span class="at-divider">|<wbr></span>Alt<span class="w3-hide-small">itude</span>:&nbsp;<span data-cmxdata="altitude"></span></h5>
+					</div>
+				</div>
+				<!--	Start of Menu	-->
+				<div id="Main_Menu" class="w3-bar w3-theme-d4 w3-theme-bdr">
+				</div>
+				<!--	Mobile menu	-->
+				<div id="Main_Menu_Mobile" class="w3-bar-block w3-hide w3-hide-large">
+				</div>	<!-- End of Mobile menu -->
+			</div>
+		</div>
+		<div id="Content">	<!--	Start of panel content	-->
+			<div class="w3-row-padding w3-theme-light site-width">	<!--	Page Title	-->
+				<div class="w3-col l12">
+					<h1>Yesterday <span class="subText"><span data-cmxdata="yesterday"></span></span></h1>
+				</div>
+			</div>	<!--	End of title row	-->
+			<div class="w3-row site-width w3-theme-light">	<!--	Start of Main panel	-->
+				<div class="w3-col l9 m12">	<!--	3/4 width panel	-->
+					<div class="w3-row-padding">	<!--	Row 1 of 3/4 width panel	-->
+						<div class="w3-col s12">		<!-- 	Full width of above panel	-->
+							<div class="w3-panel w3-card w3-theme-white">
+								<h2 class="">Yesterday's data</h2>
+								<div class="w3-responsive">
+									<table class="w3-table w3-hoverable" style="width:100%">
+										<tbody>
+											<tr class="w3-theme-d5">
+												<td colspan="3">Temperature and Humidity</td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Temperature</td>
+												<td><span data-cmxdata="tempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Temperature</td>
+												<td><span data-cmxdata="tempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TtempYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Temperature Range</td>
+												<td><span data-cmxdata="temprangeY"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>High Apparent Temperature</td>
+												<td><span data-cmxdata="apptempYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempYH"></span></td>
+											</tr>
+											<tr data-cmx-apparent class="w3-theme-l2 w3-hide">
+												<td>Low Apparent Temperature</td>
+												<td><span data-cmxdata="apptempYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TapptempYL"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>High Feels Like</td>
+												<td><span data-cmxdata="feelslikeYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeYH"></span></td>
+											</tr>
+											<tr data-cmx-feels class="w3-theme-l2">
+												<td>Low Feels Like</td>
+												<td><span data-cmxdata="feelslikeYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TfeelslikeYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Wind Chill</td>
+												<td><span data-cmxdata="wchillYL"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TwchillYL"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Heat Index</td>
+												<td><span data-cmxdata="heatindexYH"></span>&nbsp;<span data-cmxdata="tempunit"></span></td>
+												<td>at <span data-cmxdata="TheatindexYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>High Humidity</td>
+												<td><span data-cmxdata="humYH"></span>&nbsp;%</td>
+												<td>at <span data-cmxdata="ThumYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l2">
+												<td>Low Humidity</td>
+												<td><span data-cmxdata="humYL"></span>&nbsp;%</td>
+												<td>at <span data-cmxdata="ThumYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d4">
+												<td colspan="3">Rainfall</td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Yesterday</td>
+												<td><span data-cmxdata="rfallY"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>Rainfall Rate Max</td>
+												<td><span data-cmxdata="rrateYM"></span>&nbsp;<span data-cmxdata="rainunit"></span>/hr</td>
+												<td>at <span data-cmxdata="TrrateYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High Hourly Rainfall</td>
+												<td><span data-cmxdata="hourlyrainYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="ThourlyrainYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l3">
+												<td>High 24 Hour Rainfall</td>
+												<td><span data-cmxdata="rain24hourYH"></span>&nbsp;<span data-cmxdata="rainunit"></span></td>
+												<td>at <span data-cmxdata="Train24hourYH"></span></td>
+											</tr>
+											<tr class="w3-theme-d3">
+												<td colspan="3">Wind</td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Gust</td>
+												<td><span data-cmxdata="wgustYM"></span>&nbsp;<span data-cmxdata="windunit"></span></td>
+												<td>at <span data-cmxdata="TwgustYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>High Speed <span class="subText">(10 minute average)</span></td>
+												<td><span data-cmxdata="windYM"></span>&nbsp;<span data-cmxdata="windunit"></span> (<span data-cmxdata="Ybeaufort"></span>)</td>
+												<td>at <span data-cmxdata="TwindYM"></span></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Wind Run</td>
+												<td><span data-cmxdata="windrunY"></span>&nbsp;<span data-cmxdata="windrununit"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l4">
+												<td>Dominant Direction</td>
+												<td><span data-cmxdata="domwindbearingY"></span>&deg; <span data-cmxdata="domwinddirY"></span></td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-d2">
+												<td colspan="3">Pressure <span class="subText">(sea level)</span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>High Pressure</td>
+												<td><span data-cmxdata="pressYH"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l5">
+												<td>Low Pressure</td>
+												<td><span data-cmxdata="pressYL"></span>&nbsp;<span data-cmxdata="pressunit"></span></td>
+												<td>at <span data-cmxdata="TpressYL"></span></td>
+											</tr>
+											<tr class="w3-theme-d1 w3-hide" data-cmx-solar data-cmx-uv>
+												<td colspan="3">Solar</td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>High Solar Radiation</td>
+												<td><span data-cmxdata="solarYH"></span>&nbsp;W/m&sup2;</td>
+												<td>at <span data-cmxdata="TsolarYH"></span></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-solar>
+												<td>Hours of Sunshine</td>
+												<td><span data-cmxdata="YSunshineHours"></span>&nbsp;hrs</td>
+												<td></td>
+											</tr>
+											<tr class="w3-theme-l6 w3-hide" data-cmx-uv>
+												<td>High UV Index</td>
+												<td><span data-cmxdata="UVYH"></span></td>
+												<td>at <span data-cmxdata="TUVYH"></span></td>
+											</tr>
+										</tbody>
+									</table>
+									<p class="w3-small credits">Page updated <span data-cmxdata="update"></span>.</p>
+								</div>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div class="w3-col l3 m12">	<!--	Start of Sidebar 1/4 width	-->
+					<div class="w3-row-padding">
+						<div class="w3-col l12">
+							<div class="w3-panel w3-container w3-theme-light">
+								<h3 class="w3-center">Welcome to <br/><span class="subText"><span data-cmxdata="longlocation"></span></span></h3>
+								<p>This page shows a summary of the data for the 24 hrs up to <span data-cmxdata="rollovertime"></span> local time. </p>
+							</div>
+						</div>
+					</div>
+				</div>
+			</div>	<!--	End of panel content -->
+		</div>	<!--	End of content	-->
+		<div id="Footer" class="w3-row w3-bottom w3-theme-dark w3-theme-bdr">
+			<div class="w3-row-padding site-width">
+				<p><em>Cumulus MX Template by Neil Thomas <script>document.write(new Date().getFullYear());</script>
+				<span class="w3-right">Powered by <span class="w3-theme-txt">Cumulus MX</span> v:<span data-cmxdata="version"></span>, b:<span data-cmxdata="build"></span></span></em></p>
+			</div>
+		</div>
+	</body>
+</html>
\ No newline at end of file