TypeScript usage example

TypeScript_Example.ts

interface Window {
	console:any;
	attachEvent:any;
	// top:any;
    Redirects:any;
    lUN:any;
}

// var $:any;
// var $$:any;

declare var $:any;
declare var $$:any;


// https://github.com/borisyankov/DefinitelyTyped
// callback function     :(...args)=>any
// optional parameter:   ? 


// Avoid `console` errors in browsers that lack a console.
(function ()
{
    var method;
    var noop = function () { };
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeStamp', 'trace', 'warn'
    ];

    var length = methods.length;
	window.console = window.console || {};
    var console = (window.console = window.console || {});

    while (length--)
    {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method])
        {
            console[method] = noop;
        }
    }
}());


var REQ = 
{
	XMLHttpFactories: [
		function () { return new XMLHttpRequest() },
		function () { return new ActiveXObject("Msxml2.XMLHTTP") },
		function () { return new ActiveXObject("Msxml3.XMLHTTP") },
		function () { return new ActiveXObject("Microsoft.XMLHTTP") }
	]

	, createXMLHTTPObject: function ()
    {
		var xmlhttp = false;
		for (var i = 0; i < this.XMLHttpFactories.length; i++)
		{
			try
			{
				xmlhttp = this.XMLHttpFactories[i]();
			}
			catch (e)
			{
				continue;
			}
			break;
		} // Next i

		return xmlhttp;
	} // End Function createXMLHTTPObject


	, urlEncode: function (pd)
    {
		if (typeof pd == 'string' || pd instanceof String)
			return pd; // encodeURI(pd); // Might be stringified JSON

		var k, i = 0, str = "";;
		for (k in pd)
		{
			//if(i!=0)
			str += "&";

			str += encodeURIComponent(k) + "=" + encodeURIComponent(pd[k]);
			++i;
		}

		return str;
	}

    // REQ.webMethod("AJAX.aspx", "popDrop", cbSuccess, cbError, postData);
	, "webMethod": function (url:string, method:string, onSuccess:(...args)=>any, onError:(...args)=>any, onDone:(...args)=>any, postData, addParams?)
	{
	    var url:string = url + "/" + method;
	    this.sendRequest(url
            , function (r) // onsSuccess
            {
                if (onSuccess)
		            onSuccess(r, addParams);
            }
            
            , function (r) // onError
            {
                if (onError)
                {
                    var ex = null;
                    try 
                    {
                        ex = JSON.parse(r.responseText);
                    }
                    catch (e) 
                    {
                        // logMyErrors(e);
                    }

                    onError(r, ex);
                }
                else
                    alert('HTTP error ' + r.status);
            }

            , onDone // Always
		    , postData, "application/json; charset=utf-8", "POST"
        );
	}

	, "get": function (url:string, onSuccess:(...args)=>any, postData)
    {
	    this.sendRequest(url, onSuccess, null, null, postData, 'application/urlencode', "GET");
	}

	, "post": function (url:string, onSuccess:(...args)=>any, postData:(...args)=>any, contentType?)
	{
	    this.sendRequest(url, onSuccess, null, null, postData, 'application/x-www-form-urlencoded', "POST");
	}

	, "postJSON": function (url:string, onSuccess:(...args)=>any, postData?, contentType?)
	{
	    this.sendRequest(url, onSuccess, null, null, postData, 'application/json; charset=UTF-8', "POST");
	}

	, "sendRequest": function (url:string, onSuccess:(...args)=>any, onError:(...args)=>any, onDone:(...args)=>any, postData, contentType, method)
	{
	    url += ((url.indexOf('?') === -1) ? "?" : "&") + "no_cache=" + (new Date()).getTime();
	    
		if (postData)
		{
			if (!method)
				method = "POST";

			if (method.toUpperCase() === "GET")
				url += this.urlEncode(postData);
			else
			{
				if (!contentType)
				    contentType = 'application/x-www-form-urlencoded';

				if (contentType.indexOf("application/json") != -1)
				{
				    if (!(typeof postData == 'string' || postData instanceof String))
				        postData = JSON.stringify(postData);
				}

				if (contentType.indexOf("application/x-www-form-urlencoded") != -1)
				    postData = this.urlEncode(postData);
			}

		}
		else if (!method)
			method = "GET";


		var req = this.createXMLHTTPObject();
		if (!req) return;

		if (false)
		{
		    if (url.indexOf("popDrop") === -1)
		    { 
		        console.log("url: " + url);
		        console.log("method: " + method);
		        console.log("contentType: " + contentType);
			    console.log("data:");
			    if (method.toUpperCase() === "GET")
				    console.log(url);
			    else
			        console.log(postData);
		    }
		}

		// req.onerror = function (e)
	    // {
	    //     console.log(e);
	    //     console.log("Error Status: " + e.target.status);
	    // };

		req.open(method, url, true);
		// req.setRequestHeader('User-Agent', 'XMLHTTP/1.0');
		req.setRequestHeader('cache-control', 'no-cache');

		if (postData)
			req.setRequestHeader('Content-type', contentType);

		req.onreadystatechange = function ()
		{
			if (req.readyState != 4) return;
			
			if (!(req.status != 200 && req.status != 304 && req.status != 0))
			{
			    // if (url.indexOf("FormsTranslation") !== -1) console.log(req);

			    if (onSuccess)
			        onSuccess(req.responseText);
			}
			
			if (req.status != 200 && req.status != 304 && req.status != 0)
			{
			    if (onError)
			        onError(req);
			    else
			    {
			        alert('HTTP error ' + req.status);
			        // return;
			    }
			}

			if (onDone)
			    onDone(req);
		}

		if (req.readyState == 4) return;
		req.send(postData);
	}

} // End Obj REQ
;




/* @license: Licensed under The MIT License. See license.txt and http://www.datejs.com/license/. 
https://github.com/datejs/Datejs/blob/master/src/core.js
https://code.google.com/p/datejs/wiki/FormatSpecifiers
http://stackoverflow.com/questions/3552461/how-to-format-a-javascript-date
http://blog.stevenlevithan.com/archives/date-time-format
http://stackoverflow.com/questions/6002808/is-there-any-way-to-get-current-time-in-nanoseconds-using-javascript
*/

var FormatTools =
{

    // https://github.com/datejs/Datejs/blob/master/src/globalization/en-US.js
    $i18n:
    {
        dayNames: ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
        , abbreviatedDayNames: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]
        , shortestDayNames: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]
        , firstLetterDayNames: ["S", "M", "T", "W", "T", "F", "S"]

        , monthNames: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
        , abbreviatedMonthNames: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]

        , amDesignator: "AM"
        , pmDesignator: "PM"
    }


    // Pad number with 0
    , p: function (val, len)
    {
        val = String(val);
        len = len || 2;
        while (val.length < len) val = "0" + val;
        return val;
    }

    // Pad with n "0"-chars
    , mp: function (d, n)
    {
        var i = 3, res = this.p(d.getMilliseconds(), 3).substr(0, n);

        for (; i < n; ++i)
            res += "0";

        return res;
    }


    , tzo: function (d)
    {
        var o = d.getTimezoneOffset();
        return (o > 0 ? "-" : "+") + this.p(Math.floor(Math.abs(o) / 60) * 100 + Math.abs(o) % 60, 4)
    }


    , tz: function (date)
    {
        var timezone = /\b(?:[PMCEA][SDP]T|(?:Pacific|Mountain|Central|Eastern|Atlantic) (?:Standard|Daylight|Prevailing) Time|(?:GMT|UTC)(?:[-+]\d{4})?)\b/g,
        timezoneClip = /[^-+\dA-Z]/g;
        return (String(date).match(timezone) || [""]).pop().replace(timezoneClip, "");
    }

    , ord: function (num)
    {
        if (num <= 0)
            return num.toString();

        switch (num % 100)
        {
            case 11:
            case 12:
            case 13:
                return num + "th";
        }

        switch (num % 10)
        {
            case 1:
                return num + "st";
            case 2:
                return num + "nd";
            case 3:
                return num + "rd";
            default:
                return num + "th";
        }

    } // End Function ord

    , "format": function (str)
    {
        if (!str)
            return str;

        str = str.toString();

        if (arguments.length < 2)
            return str;

        var t = typeof arguments[1],
            args = "string" == t || "number" == t ? Array.prototype.slice.call(arguments) : arguments[1];

        for (var arg in args)
            str = str.replace(new RegExp("\\{" + arg + "\\}", "gi"), args[arg]);

        return str
    }

    , "formatDate": function (x, formatString)
    {
        // "S dd'd'.MM (MMMM).yyyy ".replace(/(\\)?(dd?d?d?|MM?M?M?|yy?y?y?|hh?|HH?|mm?|ss?|tt?|S)/g, 
        return formatString.replace(/d{1,4}|M{1,4}|f{1,7}|yy(?:yy)?|([HhmsTt])\1?|[oSZ]|"[^"]*"|'[^']*'/g,
            function (m)
            {
                var p = this.p
                    , mp = this.mp.bind(this)
                    , tzo = this.tzo.bind(this)
                    , tz = this.tz.bind(this)
                    , ord = this.ord.bind(this)
                    , i18n = this.$i18n;


                x.h = x.getHours;

                if (m.charAt(0) === "\\")
                {
                    return m.replace("\\", "");
                }

                switch (m)
                {
                    case "hh":
                        return p(x.h() < 13 ? (x.h() === 0 ? 12 : x.h()) : (x.h() - 12));
                    case "h":
                        return x.h() < 13 ? (x.h() === 0 ? 12 : x.h()) : (x.h() - 12);
                    case "HH":
                        return p(x.h());
                    case "H":
                        return x.h();
                    case "mm":
                        return p(x.getMinutes());
                    case "m":
                        return x.getMinutes();
                    case "ss":
                        return p(x.getSeconds());
                    case "s":
                        return x.getSeconds();
                    case "yyyy":
                        return p(x.getFullYear(), 4);
                    case "yy":
                        return p(x.getFullYear());
                    case "dddd":
                        return i18n.dayNames[x.getDay()];
                    case "ddd":
                        return i18n.abbreviatedDayNames[x.getDay()];
                    case "dd":
                        return p(x.getDate());
                    case "d":
                        return x.getDate();
                    case "MMMM":
                        return i18n.monthNames[x.getMonth()];
                    case "MMM":
                        return i18n.abbreviatedMonthNames[x.getMonth()];
                    case "MM":
                        return p((x.getMonth() + 1));
                    case "M":
                        return x.getMonth() + 1;
                    case "t":
                        return (x.h() < 12 ? i18n.amDesignator.substring(0, 1) : i18n.pmDesignator.substring(0, 1)).toLowerCase();
                    case "tt":
                        return (x.h() < 12 ? i18n.amDesignator : i18n.pmDesignator).toLowerCase();
                    case "T":
                        return x.h() < 12 ? i18n.amDesignator.substring(0, 1) : i18n.pmDesignator.substring(0, 1);
                    case "TT":
                        return x.h() < 12 ? i18n.amDesignator : i18n.pmDesignator;
                    case "S":
                        return ord(x.getDate());
                    case "fffffff":
                        return mp(x, 7);
                    case "ffffff":
                        return mp(x, 6);
                    case "fffff":
                        return mp(x, 5);
                    case "ffff":
                        return mp(x, 4);
                    case "fff":
                        return mp(x, 3);
                    case "ff":
                        return mp(x, 2);
                    case "f":
                        return mp(x, 1);
                    case "o":
                        return tzo(x);
                    case "Z":
                        return tz(x);
                    default:
                        return m;
                } // End Switch
            } // End Fn
            .bind(this)
            //.apply(this, arguments)
        );
    }

};


// var x = new Date();
// FormatTools.formatDate(x, "dddd (ddd)   S dd'd'.MM (MMM MMMM).yyyy HH:mm:ss.fff t tt T TT (o) {Z}")

// FormatTools.format("hello {foo} name", { foo: "bar" });
// FormatTools.formatString("hello {foo} name");



var HtmlTools =
    {
        "DomReady": function(a,b,c)
        {
            b=document,c='addEventListener';
            b[c] ? b[c]('DOMContentLoaded', a) : window.attachEvent('onload', a);
        }

        // dispatch event cross browser
        ,"dispatchEvent": function(el, e)
        {
            // console.log("dispatching");
            
            if ("createEvent" in document)
            {
                var evt = document.createEvent("HTMLEvents");
                evt.initEvent(e, false, true);
                el.dispatchEvent(evt);
            }
            else
            {
                el.fireEvent("on" + e);
            }
                
        }
        
        ,"userAgent": function()
        {
            var s = null;
            if (navigator && navigator.userAgent && navigator.userAgent != null) 
                s = navigator.userAgent.toLowerCase();
            else
                s = "";
                
            var uai = {
                Android: function() {
                    return s.match(/android|opera mobi|opera mini/i);
                },
                BlackBerry: function() {
                    return s.match(/blackberry/i);
                },
                iOS: function() {
                    return s.match(/iphone|ipad|ipod/i);
                },
                WindowsMobile: function() {
                    return s.match(/iemobile|windows ce|pocket pc/i);
                },
                anyMobile: function() {
                    return (uai.Android() || uai.BlackBerry() || uai.iOS() || uai.WindowsMobile());
                }
				,hasWindowResizeBug: null
            };
            
            uai.hasWindowResizeBug = uai.anyMobile();
            
            return uai;
        }
        
        

        // add event cross browser
        // HtmlTools(elem, "click", function(evt){});
        ,"addEvent": function(elem, event, fn)
        {
            if (elem.addEventListener)
                elem.addEventListener(event, fn, false);
            else
            {
                elem.attachEvent("on" + event, function ()
                {
                    // set the this pointer same as addEventListener when fn is called
                    return (fn.call(elem, window.event));
                });
            }
        }

        // Populate dropdown with data
        ,"popDrop": function (sel, data)
        {
            // console.log(data);

            if (typeof sel === 'string' || sel instanceof String)
                sel = document.getElementById(sel);

            sel.options.length = 0; // clear out existing items

            var ogl = sel.getElementsByTagName('optgroup');
            for (var i = ogl.length - 1; i >= 0; i--)
                sel.removeChild(ogl[i]);


            var docfrag = document.createDocumentFragment();
            
            // var combinationGroup = document.createElement("optgroup");
            // combinationGroup.label = GroupName;

            // var data = [{ t: "Internet Explorer", v: "MSFT" }, { t: "Mozilla Firefox", v: "MOZ" }, { t: "Safari", v: "AAPL" }, { t: "Chrome", v: "GOOG" }, { t: "Opera", v: "O" }];
            for (var i = 0; i < data.length; i++)
            {
                // opts.push('<option value="' + value.abc + '" text="' + value.abc + '" />');
                // var opt = document.createElement('option');
                // opt.value = cuisines[i];
                // if (opt.textContent) opt.textContent = cuisines[i];
                // else opt.innerText = cuisines[i];
                
                var d = data[i];
                var opt = new Option(d.t, d.v, null, d.s);
                // if(d.s) opt.selected = true;

                docfrag.appendChild(opt);

                // sel.appendChild(opt);
            } // Next i 

            sel.appendChild(docfrag);
            this.dispatchEvent(sel, "change")
        } // End Function PopDrop

    } // End Obj HtmlTools
;



var BD = {
	Base: $$.Base,

    footer: 
    {
        save: function ()
        {
            console.log("saving footer");
        },

        cancel: function ()
        {
            console.log("cancel footer");

            if (typeof window.parent.parent.Redirects.closePage == 'function')
                window.parent.parent.Redirects.closePage();
        },

        setUser: function (u)
        {
            var uN = <HTMLSpanElement> window.parent.document.querySelector('.buttonFrame .bfUsername');

            if (!uN)
                return;

            if (uN.textContent)
                uN.textContent = u;
            else if (uN.innerText)
                uN.innerText = u;
        },

        last : 0,

        rotUsr: function ()
        {
            var a = ["Max Powers", "John Galt", "John Doe", "OMG", "NULL", "Albert Rösti", "Albertul Einsteinstor", "Egon Gigax", "Anna Bolika", "Moe Lester", "Sue Yoo"];
            // var i = parseInt(Math.random() * a.length, 10);
            // while (i === this.last) i = parseInt(Math.random() * a.length, 10);
            // console.log(a[i]);
            // BD.footer.setUser(a[i]);
            BD.footer.setUser(a[this.last]);
            this.last++;
            this.last %= a.length;
        },

        setButtons: function ()
        {
            var foot =<HTMLDivElement> window.parent.document.getElementsByClassName("Footer")[0];

            if (!foot)
                return;

            var footer = [
                 '<div class="buttonFrame" id="buttonFrame">'
                ,'<span class="bfUsername">&nbsp;</span>'
            ];
            
            // footer.push('<input id="btn_ftrSave" name="btn_ftrSave" onclick="document.querySelector(\'[id$=\\\'ifrmFormTemplate\\\']\').contentWindow.BD.footer.save(); return false;" type="submit" style="float:right;" value="Speichern">');

            if (typeof window.parent.parent.Redirects.closePage == 'function')
                footer.push('<input id="btn_ftrCancel" name="btn_ftrCancel"  onclick="document.querySelector(\'[id$=\\\'ifrmFormTemplate\\\']\').contentWindow.BD.footer.cancel(); return false;" type="submit" style="float:right; margin-right: 1px;" value="Abbrechen">');

            foot.insertAdjacentHTML('afterend', footer.join(""));

            var fB = document.getElementById.bind(foot.ownerDocument);
            // fB("btn_ftrSave").value = "Speichern";
            fB("btn_ftrCancel").value = "Abbrechen";
        },

        set: function ()
        {
            this.setButtons();
            
            if (typeof (window.top.lUN) != 'undefined')
            {
                this.setUser(window.top.lUN());
            }
            else
                // this.setUser("привет мир 你好世界");
                this.setUser("Albert Rösti");

            // setInterval(this.rotUsr.bind(this), 1000);
        }

    },



	webM: function(name, cbSuccess:(...args)=>any, pd, cbError:(...args)=>any, cbAlways:(...args)=>any)
	{
	    REQ.webMethod("AJAX.aspx", name, cbSuccess, cbError, cbAlways, pd);
	},

	popDropDb: function (ddId, sql, so)
	{
	    if(typeof(so) === 'undefined')
	        so = null;

	    var postData = {
	        "resourceName": sql,
	        "in_sprache": "DE",
	        "in_master": so,
	    };

	    // console.log(postData);

	    var callback = function (r, aParam)
	    {
	        // console.log(r);
	        // console.log(aParam);
	        HtmlTools.popDrop(ddId, JSON.parse(r));
	    };

	    this.webM("popDrop", callback, postData);
	},

	Id: function (id):HTMLInputElement { return <HTMLInputElement>document.getElementById(id); },
	
	val: function (id)
	{
	    return BD.Id(id).value;
	},

	setVal: function (id, val)
	{
	    return BD.Id(id).value = val;;
	},
	
	getFormValues: function ()
	{
	    var val = this.val;

	    var obj =
        {
              "so": val("selSO")
            , "gb": val("selGB")
            , "grp": val("selGRP")
            , "kat": val("selKAT")
            , "von": val("txtDateFrom")
            , "bis": val("txtDateTo")
            , "value": val("txtValue")
        };

	    if(obj.value)
	        obj.value = obj.value.replace(/,/g, '.')
	    
	    return obj;
	},


    List: null,


	LoadGrid:function()
	{
	    var postData = this.getFormValues();

	    var contain = this.Id("Container");
	    var res = this.Id("Result");
	    contain.removeChild(res);
	    
	    var divRes = document.createElement("div");
	    divRes.setAttribute("id", "Result");
	    divRes.setAttribute("class", "Result");
	    contain.appendChild(divRes);

	    var callback = function (r)
	    {
	        $('#Result').css('height', $('#Container').height() - $('#Filter').height() - 20);
	        
	        this.List = BD.Base.SlickGrid.Fill(null, eval('(' + r + ')'), false);
	        // Portal.Loaded();
	    }.bind(this);

	    // console.log("loadgrid:");
	    REQ.post("BD.ashx", callback, postData);
	},


    pT: null,

	onResizeWindow: function (event)
	{
	    // $('#Result').css('height', $('#Result').css('max-height'))
	    
	    // if iPad set fixed-width && prevent infinite resize-recursion...
	    if(HtmlTools.userAgent().hasWindowResizeBug)
	    {
	        $('#Result').width("780px");

	        if(this.pT)
	        {
	            var diff = (new Date()).getTime() - this.pT.getTime();
	            if(diff < 1000)
	            {
	                return;
	            }
	        }
	        
	        this.pT = new Date();
	        // document.body.insertAdjacentHTML('afterbegin', '<span>Resize '  + (new Date()).getTime() +  ' </span><br />');
	    }
	    
	    // $('#Result').css('height', $('#Container').height() - $('#Filter').height() - 20);
        // $('#Result').css('width', $('#Container').width() );
	    
	    
	    /*
	    if (this.List)
	    {
	        console.log("OMG");

	        var totalWidth = 0
	            , maxWidth = document.getElementById('Result').offsetWidth
                , faktor
                , cols = this.List.getColumns()
	        ;
	        console.log(cols);

	        for (i = 0; i < cols.length; ++i)
	        {
	            totalWidth += cols[i].width;
	        }
	        faktor = maxWidth / totalWidth;


	        for (i = 0; i < cols.length; ++i)
	        {
	            cols[i].width = cols[i].width * faktor;
	        }

	        this.List.setColumns(cols);
	    }
        */
        
	    if (BD.List) BD.List.resizeCanvas();
	    // if (BD.List) console.log("resizinga");
	},

	setDefaultValues: function ()
	{
	    HtmlTools.addEvent(window, "resize", this.onResizeWindow.bind(this));

	    this.populateYeardd();
	    this.populateSOdd();
	    this.populateGRPdd();

	    var nd = new Date();
	    var dFrom = new Date(nd.getFullYear(), nd.getMonth(), 1);
	    var dTo = new Date(nd.getFullYear(), nd.getMonth() + 1, 0);

	    var defaultValues = {
	         "txtDateFrom": FormatTools.formatDate(dFrom, "dd.MM.yyyy")
            ,"txtDateTo": FormatTools.formatDate(dTo, "dd.MM.yyyy")
	    };

	    for (var id in defaultValues)
	    {
	        var e = this.Id(id);
	        if (e)
	            e.value = defaultValues[id];
	    } // Next id

	    this.initDatePicker();
	    this.footer.set();

	    if (window.parent.location.href.indexOf("Forms/building.aspx") == -1)
	        document.getElementById("divTileHead").style.display = "block";

	    this.Id("selYear").value = 2014;
	    HtmlTools.dispatchEvent(this.Id("selYear"), "change");
	},

	populateYeardd: function ()
	{
	    this.popDropDb("selYear", "BD_Years.sql");
	},

	populateSOdd: function()
	{
	    this.popDropDb("selSO", "BD_Standort.sql");
	},

    populateGBdd: function(so_uid)
    {
        // console.log("populateGBdd");
        // console.log(so_uid);
        this.popDropDb("selGB", "BD_Gebaeude.sql", so_uid);
    },

    populateGRPdd: function ()
    {
        this.popDropDb("selGRP", "BD_Datengruppe_Dropdown.sql");
    },

    populateKATdd: function (bddg_uid)
    {
        // console.log("populateKATdd");
        // console.log(bddg_uid);
        this.popDropDb("selKAT", "BD_Datenkategorie_Dropdown.sql", bddg_uid);
    },

    setChangeListeners: function ()
    {
        var Id = this.Id;
        var selSO = Id("selSO");
        var selGB = Id("selGB");
        var selGRP = Id("selGRP");
        var selKAT = Id("selKAT");

        HtmlTools.addEvent(selSO, "change", function ()
        {
            // console.log("changeEvent selSO");
            // console.log(selSO.value);
            BD.populateGBdd(selSO.value);

            if (selSO.value == "addNew")
            {
                // addActivityItem();
            }
        });

        HtmlTools.addEvent(selGB, "change", function ()
        {
            // console.log("changeEvent selGB");
            // console.log(selGB.value);
            BD.LoadGrid();
        });

        HtmlTools.addEvent(selGRP, "change", function ()
        {
            // console.log("changeEvent selGRP");
            // console.log(selGRP.value);
            BD.populateKATdd(selGRP.value);
        });

        HtmlTools.addEvent(selKAT, "change", function ()
        {
            // console.log("changeEvent selKAT");
            // console.log(selKAT.value);
            BD.LoadGrid();
        });


        var selMonth = this.Id("selMonth");
        var selYear = this.Id("selYear");

        HtmlTools.addEvent(selMonth, "change", function ()
        {
            BD.autoSetDateFromToByMonth(selMonth.value, selYear.value);
        });

        HtmlTools.addEvent(selYear, "change", function ()
        {
            BD.autoSetDateFromToByMonth(selMonth.value, selYear.value);
        });
    },

    initDatePicker: function ()
    {
        // Initialize datepicker 
        var qs = document.getElementsByClassName("datepick");
        for (var i = 0; i < qs.length; ++i)
        {
            $(qs[i]).datepicker(
            {
                //showOn: "button"
                showOn: "both"
                , buttonImage: "../images/calBlack.png"
                , buttonImageOnly: true
                //, buttonImageOnly: false
                , dateFormat: 'dd.mm.yy'
                , changeMonth: true
                , changeYear: true
                , showWeek: false // true
                , firstDay: 1
                , showOtherMonths: true //false 
                , selectOtherMonths: true
                , showButtonPanel: true
                //, numberOfMonths: 3 
                //, regional: "fr"
                //, monthNamesShort: ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'] 
                //, dayNamesMin: ['So','Mo','Di','Mi','Do','Fr','Sa'] 
            }); // End datepicker

            // console.log(mGlobalLanguage);

            // $(qs[i]).datepicker("option", $.datepicker.regional['de']);  
            // $(qs[i]).datepicker("option", $.datepicker.regional['FR']);
        } // Next i 
    },

    autoSetDateFromToByMonth: function (month, year)
    {
        var dFrom = new Date(year, month, 1);
        var dTo = new Date(year, month - -1, 0);
        
        this.Id("txtDateFrom").value = FormatTools.formatDate(dFrom, "dd.MM.yyyy");
        this.Id("txtDateTo").value = FormatTools.formatDate(dTo, "dd.MM.yyyy");
    },

    translateForm: function ()
    {
        var cbSuccess = function (d)
        {
            d = JSON.parse(d);
            // console.log(JSON.stringify(d, null, 2));

            for (var k in d)
            {
                var r:any = d[k];

                var tel = <any>document.querySelector(r.S);

                if (tel)
                {
                    if (tel.textContent)
                        tel.textContent = r.T;
                    else if (tel.innerText)
                        tel.innerText = r.T;
                    else if (tel.value)
                        tel.value = r.T;
                    else
                    {
                        console.log("OMG, no property set (translation)");
                        console.log(r);
                    }

                }
                else
                {
                    console.log("OMG - Element not found (translation).");
                    console.log(r);
                }

            }
        };


        REQ.postJSON("../ajax/FormsTranslation.ashx", cbSuccess);
        return;
        var r = null;
        // Table, not dictionary:
        for (var i = 0; i < r.length; ++i)
        {
            var tel = <any>document.querySelector(r[i].S);

            if (tel)
            {
                if (tel.textContent)
                    tel.textContent = r[i].T;
                else if (tel.innerText)
                    tel.innerText = r[i].T;
                else if (tel.value)
                    tel.value = r[i].T;
                else
                {
                    console.log("OMG, no property set (translation)");
                    console.log(r[i]);
                }

            }
            else
            {
                console.log("OMG - Element not found (translation).");
                console.log(r[i]);
            }


            // console.log(r[i].DATA_TYPE);
            // console.log(r[i].IS_NULLABLE);
            // console.log(r[i].IS_NULLABLE);
            // console.log(r[i].TABLE_NAME);
        } // Next i 
    },

    resetError: function ()
    {
        
    },

    checkError: function()
    {
        this.resetError();

        return false;
    },

	speichern: function (btn)
	{
	    // btn.setAttribute("disabled", true);
	    // btn.setAttribute("editable", true);
	    
	    btn.disabled = true;
	    

	    if(this.checkError())
	        return;

	    var postData = this.getFormValues();
	    
	    // console.log(postData);
	    var cbSuccess = function (r, aParam)
	    {
	        // console.log("Save - Success");
	        BD.setVal("txtValue", "");
	        // console.log(r);
	        // console.log(aParam);
	        BD.LoadGrid();
	    };

	    var cbError = function (r, ex)
	    {
	        console.log("Save - Error");
	        // console.log(r);
	        console.log("Status: " + r.status);
	        console.log("StatusText: " + r.statusText);
	        // console.log("ResponseText: " + r.responseText);
	        if (ex)
	        {
	            console.log("Message: " + ex.Message);
	            alert("Speichern fehlgeschlagen. \nDie eingegebenen Daten sind ungültig.\nUrsache: \n  - " + ex.Message);
	        }
	        else
	            alert("Speichern fehlgeschlagen. \nDie eingegebenen Daten sind ungültig.\nMögliche Ursachen: \n  - Das Datum-von/bis ist ungültig\n  - Der eingegebene Wert ist keine Zahl");
	    };

	    var cbAlways = function (r)
	    {
	        // console.log("Save - Always");
	        // console.log(r);

	        // btn.removeAttribute("disabled");  // Zu schnell - muss zuerst ein wenig warten
	        setTimeout(function ()
	        {
	            btn.removeAttribute("disabled");
	        }, 1000);

	    };

	    this.webM("speichern", cbSuccess, postData, cbError, cbAlways);
	}, // End Function speichern 

    deleteEntry: function (bd_uid)
    {
        // console.log("delete bd:" + bd_uid);

        this.webM("deleteEntry",
            function (r)
            {
                // console.log("Delete successful");
                BD.LoadGrid();
            }
            , { "bd_uid": bd_uid }
        );
        
    }, // End Function deleteEntry 

	
};