init on github

.gitignore

@@ -0,0 +1,3 @@
+*.hg
+.hgignore
+.dropbox.attr

.hgignore

@@ -0,0 +1,5 @@
+syntax: glob
+.git*
+*~
+*.bak
+.dropbox.attr

Readme.md

@@ -0,0 +1,3 @@
+### JS snippets
+
+Some my snippets in javascript

contexthelp.readme

@@ -0,0 +1 @@
+Add context help to your web page. It is usefull if standard "title" is not enough for you

contexthelp/contexthelp.css

@@ -0,0 +1,25 @@
+/* floating box of context help */
+#helptip{
+	position: fixed;
+	background-color: #BFE;
+	border-radius: 5px;
+	color: black;
+	max-width: 400px;
+	max-height: 500px;
+	padding: 5px;
+	z-index: 100;
+}
+/* label on help tip */
+.redtxt{
+	color: red;
+	margin-top: 20px;
+}
+/* context help caller */
+.helperdiv{
+	position: fixed;
+	right: 0px;
+	top: 0px;
+}
+/* anchor with text "context help" inside helperdiv */
+.helperanchor{
+}

contexthelp/contexthelp.js

@@ -0,0 +1,161 @@
+/*
+ * function ContextHelp()
+ * creates contexthelp object with methods:
+ *    init(A,L)  - call this method first, where
+ *       A - object with help text, A = {ID1 or Name1: text1, ID2 or Name2: text2, ...}
+ *          where ID or Name is id or name of HTML object you want to make context help
+ *       L - (optional) label for help text (placed below text, have class redtxt)
+ *    mkLabel(L) - add default hyperlink-like "button" for help calling, L - text on "button"
+ *    activate() - call this method to activate help if you don't use default mkLabel
+ */
+
+function ContextHelp(){
+	this.activate = _ContextHelp.callHelp;
+	this.mkLabel = function(helplabel){_ContextHelp.mkLabel(helplabel);};
+	this.init = function(helpArr, helpLbl){_ContextHelp.init(helpArr, helpLbl);};
+	return this;
+}
+
+_ContextHelp = function(){
+// create element and put it into the DOM tree
+function creEl(Tag, Parent, Class, ID){
+	var el = document.createElement(Tag);
+	if(Class) el.className = Class;
+	if(ID) el.id = ID;
+	if(Parent){
+		Parent.appendChild(el);
+		el = Parent.lastElementChild;
+	}
+	return el;
+}
+function addLbl(lbl){
+	if(!lbl) lbl = "Context help";
+	var d = creEl("div", document.body, "helperdiv");
+	var a = creEl("a", d, "helperanchor");
+	a.href = "#";
+	a.innerHTML = lbl;
+	a.onclick = startHelp;
+}
+function initHelpText(helpArr, HL){
+	HelpText = helpArr;
+	if(HL) helpLabel = HL;
+}
+
+var tipobj = null;
+var HelpText = null;
+var helpLabel = "Click on this window or press ESC key to close helps";
+
+function pE(e){
+	if(e){
+		e.stopPropagation();
+		e.preventDefault();
+	}
+}
+
+var oC, oK, oM;
+function startHelp(e){
+	pE(e);
+	if(!HelpText) return false;
+	oC = document.body.onclick;
+	oM = document.body.onmouseover;
+	oK = document.body.onkeydown;
+	document.body.onkeydown = onkey;
+	document.body.onclick = Help;
+	document.body.onmouseover = checkobj;
+	onkey(null, true); // remove old help tips
+}
+
+function Help(e){
+	pE(e);
+	if(!helptip(e)) return;
+	document.body.onclick = oC;
+	document.body.onmouseover = oM;
+}
+
+var oldclc, oldmout, oldcur;
+function checkobj(e){
+	pE(e);
+	var obj = e.target;
+	if(obj == document.body) return;
+	if(typeof(obj.helpText) == "undefined"){
+		var ht = getHT(obj);
+		obj.helpText = ht;
+	}
+	oldclc = obj.onclick;
+	oldmout = obj.onmouseout;
+	obj.onclick = Help;
+	obj.onmouseout = releaseonclick;
+	oldcur = obj.style.cursor;
+	if(obj.helpText) obj.style.cursor = "help";
+}
+function releaseonclick(e){
+	pE(e);
+	var obj = e.target;
+	obj.onmouseout = oldmout;
+	obj.onclick = oldclc;
+	if(oldcur) obj.style.cursor = oldcur;
+	else obj.style.cursor = "";
+}
+function helptip(e){
+	var ss = e.target.helpText, helper;
+	releaseonclick(e);
+	if(ss && ss.length > 0){
+		tipobj = document.createElement("DIV");
+		tipobj.id = 'helptip';
+		tipobj.setAttribute("name", "helptip");
+		tipobj.onclick = function(e){document.body.removeChild(e.target);};
+		tipobj.innerHTML = ss;
+		helper = document.createElement("DIV");
+		helper.className = 'redtxt';
+		helper.innerHTML = helpLabel;
+		helper.onclick = function(evt){evt.stopPropagation();
+			document.body.removeChild(evt.target.parentNode);};
+		tipobj.appendChild(helper);
+		document.body.appendChild(tipobj);
+		positiontip(e);
+	}else return 0;
+	return (ss.length);
+}
+
+function getHT(obj){
+	var objid = obj.id, objname = obj.name;
+	var ss="", nm;
+	objid = obj.id; objname = obj.name;
+	if(!objid && !objname) return null
+	if(!objid && objname) nm = objname;
+	else nm = objid;
+	ss = HelpText[nm];
+	return ss;
+}
+
+function positiontip(e){
+	var wd = tipobj.offsetWidth, ht = tipobj.offsetHeight;
+	var curX = e.clientX + 25;
+	var curY = e.clientY - ht/2;
+	var btmedge = document.body.clientHeight - curY - 15;
+	var rightedge = document.body.clientWidth - curX - 15;
+	if(rightedge < wd) curX -= wd+50;
+	if(btmedge < ht) curY -= ht-btmedge+15;
+	if(curY < 15) curY = 15;
+	tipobj.style.left = curX+"px";
+	tipobj.style.top = curY+"px";
+}
+
+function onkey(e, store){
+	if(e && e.keyCode != 27) return;
+	var helps = document.getElementsByName('helptip');
+	var l = helps.length-1;
+	for(var i=l; i>-1; i--) document.body.removeChild(helps[i]);
+	if(!store){
+		document.body.onkeydown = oK;
+		document.body.onclick = oC;
+		document.body.onmouseover = oM;
+	}
+}
+
+return{
+	mkLabel:  addLbl,
+	callHelp: startHelp,
+	init:     initHelpText
+}
+}();

datetime.readme

@@ -0,0 +1 @@
+insert date/time picker (calendar form)

datetime/datetime.css

@@ -0,0 +1,114 @@
+/* form with data & time */
+.datetime{
+	width: 150px;
+}
+/* button showdate */
+.dpBtn{
+	width: 22px;
+}
+/* input for time value */
+.dpTime{
+	width: 80px;
+}
+/* the div that holds the date picker calendar */
+.dpDiv{
+	position: absolute;
+	z-index: 10;
+}
+/* the table (within the div) that holds the date picker calendar */
+.dpTable{
+	font-family: Tahoma, Arial, Helvetica, sans-serif;
+	font-size: 12px;
+	text-align: center;
+	color: #505050;
+	background: #ECF5F8;
+	border: 0px;
+	border-radius: 10px;
+	width: 180px;
+}
+/* a table row that holds date numbers (either blank or 1-31) */
+.dpTR{
+}
+/* the top table row that holds the month, year, and forward/backward buttons */
+.dpTitleTR{
+}
+/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
+.dpDayTR{
+}
+/* the bottom table row, that has the "This Month" and "Close" buttons */
+.dpTodayButtonTR{
+}
+/* a table cell that holds a date number (either blank or 1-31) */
+.dpTD{
+	border: 0px;
+	width: 25px;
+}
+/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
+.dpDayHighlightTD{
+	border: 0px;
+	background-color: #CCCCCC;
+}
+/*.dpDayHighlightTD:hover,*/
+.dpTD:hover,.dpDayHighlight:hover{
+	font-style: oblique;
+	background-color: #aca998;
+	cursor: pointer;
+	color: red;
+}
+/* the table cell that holds the name of the month and the year */
+.dpTitleTD{
+	border: 0px;
+}
+/* the table cell that holds the time */
+.dpFullTitleTD{
+	border: 0px;
+}
+/* a table cell that holds one of the forward/backward buttons */
+.dpButtonTD{
+	border: 0px;
+}
+/* the table cell that holds the "This Month" or "Close" button at the bottom */
+.dpTodayButtonTD{
+	border: 0px;
+}
+/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
+.dpDayTD{
+	background-color: #CCCCCC;
+	border: 0px;
+	color: white;
+}
+/* additional style information for the text that indicates the month and year */
+.dpTitleText{
+	font-size: 12px;
+	color: gray;
+	text-align: center;
+	font-weight: bold;
+}
+/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */
+.dpDayHighlight{
+	color: 4060ff;
+	font-weight: bold;
+}
+/* the forward/backward buttons at the top */
+.dpButton{
+	font-family: Verdana, Tahoma, Arial, Helvetica, sans-serif;
+	font-size: 6pt;
+	background: #8FCADB;
+	padding: 2px;
+	width: 20pt;
+	border: 0px solid #64A6B9;
+	color: white;
+	font-weight: bold;
+	margin-bottom: 1px;
+}
+/* the "This Month" and "Close" buttons at the bottom */
+.dpTodayButton{
+	font-family: Arial, Verdana, Tahoma, Helvetica, sans-serif;
+	font-size: 10px;
+	color: white;
+	background: #8FCADB;
+	font-weight: bold;
+	border: 0px solid #64A6B9;
+	padding: 1px 3px 1px 3px;
+	margin-right: 3px;
+}

datetime/datetime.js

@@ -0,0 +1,372 @@
+/*
+ * function DatePicker(targetDateFieldID, displayBelowThisObject, dtFormat,
+ * 							dtSep, sundayfirst, dayArray, monthArray)
+ * inits datepicker form
+ * arguments:
+ *    targetDateFieldID - (required) ID of field bounded to datepicker
+ *    displayBelowThisObject - (opt) object below which datepicher will be placed
+ *    dtFormat - (opt) date format: "dmy", "ymd" or "mdy"
+ *    dtSep - (opt) separator of date fields
+ *    sundayfirst - (opt) bool == true if sunday is first in week
+ *    dayArray - (opt) array with daynames (on your language); format: SuMoTuWeThFrSa[Su]
+ *    monthArray - (opt) array with month names
+ *
+ * returns object with properties:
+ *    getDate - returns Date() object from targetDateFieldID
+ *    display - show/hide datepicker; return true if shown or false
+ *
+ * after closing if there is global function datePickerClosed, it will run
+ */
+
+
+/*
+var elementsCache = {};
+function $(id) {
+	if (elementsCache[id] === undefined)
+		elementsCache[id] = document.getElementById(id);
+	return elementsCache[id];
+}
+*/
+
+function DatePicker(targetDateFieldID, displayBelowThisObject, dtFormat,
+						dtSep, sundayfirst, dayArray, monthArray){
+	// if we weren't told what node to display the datepicker beneath, just display it
+	// beneath the date field we're updating
+	var targetDateField = $(targetDateFieldID);
+	if(!targetDateField){
+		alert("Undefined element with ID==\""+targetDateFieldID+"\"");
+		return null;
+	}
+	if(!displayBelowThisObject)
+		displayBelowThisObject = targetDateField;
+	var x = displayBelowThisObject.offsetLeft;
+	var y = displayBelowThisObject.offsetTop + displayBelowThisObject.offsetHeight ;
+	// deal with elements inside tables and such
+	var parent = displayBelowThisObject;
+	while(parent.offsetParent){
+		parent = parent.offsetParent;
+		x += parent.offsetLeft;
+		y += parent.offsetTop ;
+	}
+	_DatePicker.setDefVars(dtFormat, dtSep, sundayfirst, dayArray, monthArray);
+	this.getDate = function(){return _DatePicker.parseUserString(targetDateFieldID);};
+	this.display = function(){return _DatePicker.drawDatePicker(targetDateField, x, y)};
+	return this;
+}
+
+_DatePicker = function(){
+var sundayfirst = true; // whether a week starts from sunday
+var defaultDateSeparator = "/";        // common values would be "/" or "."
+var defaultDateFormat = "mdy"    // valid values are "mdy", "dmy", and "ymd"
+var dateSeparator = defaultDateSeparator;
+var dateFormat = defaultDateFormat;
+
+var datePickerDivID = "datepicker";
+
+const AllowableSeparators = "./-"; // chars that could be separators
+
+var dayArrayEn   = new Array('Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su');
+var monthArrayEn = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July',
+	'August', 'September', 'October', 'November', 'December');
+
+var dayArray = dayArrayEn, monthArray = monthArrayEn; // arrays with date and month
+
+var timefieldValue = null;  // value of datetime field
+var targetDateField = null; // target field for datepicker
+
+function setDefVars(dtFormat, dtSep, sundayfrst, dayArr, monthArr){
+	// if a date separator character was given, update the dateSeparator variable
+	if(dtSep && dtSep.length == 1 && AllowableSeparators.indexOf(dtSep) != -1)
+		dateSeparator = dtSep;
+	else
+		dateSeparator = defaultDateSeparator;
+	// if a date format was given, update the dateFormat variable
+	if(dtFormat)
+		dateFormat = dtFormat;
+	else
+		dateFormat = defaultDateFormat;
+	if(typeof(sundayfrst) != "undefined") sundayfirst = sundayfrst;
+	else sundayfirst = true;
+	if(dayArr && dayArr.length > 6){
+		dayArray = dayArr;
+		if(dayArr.length == 7) dayArray[7] = dayArr[0];
+	}else
+		dayArray = dayArrayEn;
+	if(monthArr && monthArr.length == 12)
+		monthArray = monthArr;
+	else
+		monthArray = monthArrayEn;
+}
+
+function drawDatePicker(TDF, x, y){
+	targetDateField = TDF;
+	var dt = getFieldDate(targetDateField.value);
+	// the datepicker table will be drawn inside of a <div> with an ID defined by the
+	// global datePickerDivID variable. If such a div doesn't yet exist on the HTML
+	// document we're working with, add one.
+	if(!document.getElementById(datePickerDivID)){
+		var newNode = document.createElement("div");
+		newNode.setAttribute("id", datePickerDivID);
+		newNode.setAttribute("class", "dpDiv");
+		newNode.setAttribute("style", "visibility: hidden;");
+		document.body.appendChild(newNode);
+	}
+	// move the datepicker div to the proper x,y coordinate and toggle the visiblity
+	var pickerDiv = document.getElementById(datePickerDivID);
+	pickerDiv.style.left = x + "px";
+	pickerDiv.style.top = y + "px";
+	pickerDiv.style.visibility = (pickerDiv.style.visibility == "visible" ? "hidden" : "visible");
+	pickerDiv.style.display = (pickerDiv.style.display == "block" ? "none" : "block");
+	// draw the datepicker table
+	if(pickerDiv.style.display == "none") return false;
+	else{
+		refreshDatePicker(targetDateField, dt.getFullYear(), dt.getMonth(), dt.getDate());
+		return true;
+	}
+}
+
+// create element and put it into the DOM tree
+function creEl(Tag, Parent, Class, ID){
+	var el = document.createElement(Tag);
+	if(Class) el.className = Class;
+	if(ID) el.id = ID;
+	if(Parent){
+		Parent.appendChild(el);
+		el = Parent.lastElementChild;
+	}
+	return el;
+}
+// create a day in calendar
+function creTD(tr, cls, thisDay){
+	var td = creEl("td", tr, cls);
+	var DS = getDateString(thisDay);
+	td.onclick = function(){updateDateField(targetDateField, DS);};
+	return td;
+}
+// make string from time element
+function getTimeString(time){
+	var hourString = "00" + time.getHours();
+	var minuteString = "00" + time.getMinutes();
+	hourString = hourString.substring(hourString.length - 2);
+	minuteString = minuteString.substring(minuteString.length - 2);
+	var timeString = hourString + ':' + minuteString;
+	return timeString;
+}
+// create time field and fill it with current time
+function creTimeInput(parent){
+	var sp = creEl("span", parent); sp.innerHTML = "time: ";
+	var inp = creEl("input", parent, "dpTime", "dp_Time");
+	if(!timefieldValue){
+		var tm = new Date();
+		timefieldValue = getTimeString(tm);
+	}
+	inp.value = timefieldValue;
+	inp.type = "time";
+	inp.onchange = function(){timefieldValue=this.value;};
+}
+/**
+This is the function that actually draws the datepicker calendar.
+*/
+function refreshDatePicker(targetDateField, year, month, day){
+	/*
+	Convenience function for writing the code for the buttons that bring us back or forward
+	a month.
+	*/
+	function getButtonCode(parent, dateVal, adjust, label, title){
+		var newMonth = (dateVal.getMonth () + adjust) % 12;
+		var newYear = dateVal.getFullYear() + parseInt((dateVal.getMonth() + adjust) / 12);
+		if(newMonth < 0){
+			newMonth += 12;
+			newYear += -1;
+		}
+		var btn = creEl("button", parent, "dpButton");
+		btn.title = title; btn.innerHTML = label;
+		btn.onclick = function(){refreshDatePicker(targetDateField, newYear, newMonth);};
+		return btn;
+	}
+	// if no arguments are passed, use today's date; otherwise, month and year
+	// are required (if a day is passed, it will be highlighted later)
+	var thisDay;
+	if ((month >= 0) && (year > 0)) {
+		thisDay = new Date(year, month, 1);
+	}else{
+		thisDay = new Date()
+		day = thisDay.getDate();
+		thisDay.setDate(1);
+	}
+	var outer = document.getElementById(datePickerDivID);
+	// clear old content
+	if(outer.childNodes &&  outer.childNodes.length)
+		for(i = outer.childNodes.length-1; i>-1; i--) outer.removeChild(outer.childNodes[i]);
+	// the calendar will be drawn as a table
+	// you can customize the table elements with a global CSS style sheet,
+	// or by hardcoding style and formatting elements below
+	var tbl = creEl("table", outer, "dpTable"); tbl.cols = 7;
+	var tr = creEl("tr", tbl, "dpTitleTR");
+	// here we add time input string
+	var td = creEl("td", tr, "dpFullTitleTD"); td.colSpan = 7;
+	creTimeInput(td);
+	// this is the title bar, which displays the month and the buttons to
+	// go back to a previous month or forward to the next month
+	tr = creEl("tr", tbl, "dpTitleTR");
+	td = creEl("td", tr, "dpButtonTD"); td.align = "center";
+	getButtonCode(td, thisDay, -12, "&lt;&lt;","Previous year");
+	creEl("br", td);
+	getButtonCode(td, thisDay, -1, "&lt;","Previous month");
+	td = creEl("td", tr, "dpTitleTD"); td.colSpan = 5;
+	var div = creEl("div", td, "dpTitleText");
+	div.innerHTML = monthArray[ thisDay.getMonth()] + " " + thisDay.getFullYear();
+	td = creEl("td", tr, "dpButtonTD"); td.align = "center";
+	getButtonCode(td, thisDay, 12, "&gt;&gt;", "Next year");
+	creEl("br", td);
+	getButtonCode(td, thisDay, 1, "&gt;","Next month");
+	// this is the row that indicates which day of the week we're on
+	tr = creEl("tr", tbl, "dpDayTR");
+	var dDate = sundayfirst ? 0 : 1;
+	for(i = 0; i < 7; i++){
+		td = creEl("td", tr, "dpDayTD"); td.innerHTML = dayArray[i+dDate];
+	}
+	tr = creEl("tr", tbl, "dpTR");
+	// first, the leading blanks
+	if(sundayfirst)
+		for (i = thisDay.getDay(); i > 0; i--)
+			creEl("td", tr, "dpTD");
+	else
+		for (i = (thisDay.getDay()+6)%7; i > 0; i--)
+			creEl("td", tr, "dpTD");
+	// now, the days of the month
+	do{
+		dayNum = thisDay.getDate();
+		var cls = (dayNum == day) ? "dpDayHighlightTD" : "dpTD";
+		td = creTD(tr, cls, thisDay);
+		var blk = td;
+		if(dayNum == day)
+			blk = creEl("div", td, "dpDayHighlight");
+		blk.innerHTML = dayNum;
+		// if this is a Saturday/Sunday, start a new row
+			if(thisDay.getDay() == (sundayfirst ? 6 : 0))
+				tr = creEl("tr", tbl, "dpTR");
+		// increment the day
+		thisDay.setDate(thisDay.getDate() + 1);
+	}while (thisDay.getDate() > 1)
+	// fill in any trailing blanks
+	if(thisDay.getDay() != (sundayfirst ? 0 : 1)){
+		if(sundayfirst)
+			for (i = thisDay.getDay(); i < 6; i++)
+				creEl("td", tr, "dpTD");
+		else
+			for (i = (thisDay.getDay()+6)%7; i < 6; i++)
+				creEl("td", tr, "dpTD");
+	}
+	// add a button to allow the user to easily return to today, or close the calendar
+	var today = new Date();
+	tr = creEl("tr", tbl, "dpTodayButtonTR");
+	td = creEl("td", tr, "dpTodayButtonTD"); td.colSpan = 3;
+	var btn = creEl("button", td, "dpTodayButton"); btn.innerHTML = "Today";
+	btn.onclick = function(){refreshDatePicker(targetDateField);};
+	creEl("td", tr, "dpButtonTD");
+	td = creEl("td", tr, "dpTodayButtonTD"); td.colSpan = 3;
+	btn = creEl("button", td, "dpTodayButton"); btn.innerHTML = "Close";
+	btn.onclick = function(){updateDateField(targetDateField);};
+}
+
+/**
+Convert a JavaScript Date object to a string, based on the dateFormat and dateSeparator
+variables at the beginning of this script library.
+*/
+function getDateString(dateVal){
+	var dayString = "00" + dateVal.getDate();
+	var monthString = "00" + (dateVal.getMonth()+1);
+	dayString = dayString.substring(dayString.length - 2);
+	monthString = monthString.substring(monthString.length - 2);
+	switch (dateFormat) {
+		case "dmy" :
+			return dayString + dateSeparator + monthString + dateSeparator + dateVal.getFullYear();
+		case "ymd" :
+			return dateVal.getFullYear() + dateSeparator + monthString + dateSeparator + dayString;
+		case "mdy" :
+		default :
+			return monthString + dateSeparator + dayString + dateSeparator + dateVal.getFullYear();
+	}
+}
+
+/**
+Convert a string to a JavaScript Date object.
+*/
+function getFieldDate(dateString){
+	var dateVal;
+	var dArray;
+	var d, m, y;
+	try{
+		dArray = splitDateString(dateString);
+		timefieldValue = dArray[2].split(" ")[1];
+		if(dArray){
+			switch(dateFormat){
+			case "dmy" :
+				d = parseInt(dArray[0], 10);
+				m = parseInt(dArray[1], 10) - 1;
+				y = parseInt(dArray[2], 10);
+				break;
+			case "ymd" :
+				d = parseInt(dArray[2], 10);
+				m = parseInt(dArray[1], 10) - 1;
+				y = parseInt(dArray[0], 10);
+				break;
+			case "mdy" :
+			default :
+				d = parseInt(dArray[1], 10);
+				m = parseInt(dArray[0], 10) - 1;
+				y = parseInt(dArray[2], 10);
+				break;
+			}
+			if(d > 31 || d < 1 || m > 12 || m < 1) throw "invalid";
+			var th = timefieldValue.split(":");
+			dateVal = new Date(y, m, d, th[0], th[1]);
+		}else if(dateString){
+			dateVal = new Date(dateString);
+		} else {
+			dateVal = new Date();
+		}
+	}catch(e){
+		dateVal = new Date();
+		timefieldValue = null;
+	}
+	return dateVal;
+}
+
+function parseUserString(datefieldID){
+	var form = $(datefieldID);
+	if(!form || !form.value) return null;
+	return getFieldDate(form.value);
+}
+
+/**
+Try to split a date string into an array of elements, using common date separators.
+If the date is split, an array is returned; otherwise, we just return false.
+*/
+function splitDateString(dateString){
+	var dArray;
+	if (dateString.indexOf(dateSeparator) >= 0)
+		dArray = dateString.split(dateSeparator);
+	else
+		dArray = false;
+	return dArray;
+}
+
+function updateDateField(targetDateField, dateString){
+	if(dateString)
+		targetDateField.value = dateString + " " + timefieldValue;
+	var pickerDiv = document.getElementById(datePickerDivID);
+	pickerDiv.style.visibility = "hidden";
+	pickerDiv.style.display = "none";
+	targetDateField.focus();
+	if((dateString) && (typeof(datePickerClosed) == "function"))
+		datePickerClosed(targetDateField);
+}
+
+return{
+	drawDatePicker: drawDatePicker,
+	setDefVars:     setDefVars,
+	parseUserString:parseUserString
+};
+}();

dragJS.readme

@@ -0,0 +1,3 @@
+Drag and resize div with javascript
+
+// no html5 dragging beacause of its stub

dragJS/dragJS.css

@@ -0,0 +1,8 @@
+/* drag/resize container */
+.drag{border:5px solid; width:200px; height:100px; position:fixed; top:100px; left:100px; cursor:move; z-index:20;}
+/* inner container (DRdiv object) */
+.indrag{width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:0; background:lightgray;}
+/* resize borders */
+.resz{border:none;  position:absolute; opacity:0.5; width:100%; height:100%;}
+.resz:hover{border:1px dotted; background:gray;}
+

dragJS/dragJS.js

@@ -0,0 +1,197 @@
+/*
+ * function DRdiv(insideHTML)
+ * creates draggable and resizible div
+ * arguments:
+ *    insideHTML - optional, data inside created div
+ * returns div element avaiable for user's manipulations
+ * returned object has following attributes:
+ *    place:  set element's position
+ *    resize: set element's size
+ *    delete: remove element from DOM tree
+ */
+
+function DRdiv(insideHTML){
+	var el = _DRdiv.init(insideHTML);
+	el.place = _DRdiv.setp;
+	el.resize = _DRdiv.resize;
+	el.delete = function(){this.parentNode.parentNode.removeChild(this.parentNode)};
+	return el;
+}
+
+_DRdiv = function(){
+/*
+var elementsCache = {};
+function $(id) {
+	if (elementsCache[id] === undefined)
+		elementsCache[id] = document.getElementById(id);
+	return elementsCache[id];
+}
+*/
+/*
+ *         BASE CONSTANTS
+ */
+// main div extremal size:
+const minW = 100, minH = 100, maxW = 700, maxH = 400;
+// size of "resize" div
+const resHW = "30px";
+function mkDiv(insideHTML){
+	var L = ["top" , "width" , "left"  , "w", resL];
+	var R = ["top" , "width" , "right" , "e", resR];
+	var U = ["left", "height", "top"   , "n", resU];
+	var D = ["left", "height", "bottom", "s", resD];
+	var borders =[[L, null], [R, null], [U, null], [D, null],
+				  [U, L], [U, R], [D, R], [D, L]];
+	var d = document.createElement("div");
+	d.className = "drag";
+	d.id = "Big";
+	d.onmousedown = ds;
+	var _cursor = "";
+	function setstyle(el, stl){
+		el.style[stl[1]] = resHW;
+		el.style[stl[2]] = "0px";
+		_cursor += stl[3];
+		el.resizefn.push(stl[4]);
+	}
+	var inside = document.createElement("div");
+	inside.id = "indrag";
+	inside.className = "indrag";
+	if(insideHTML) inside.innerHTML = insideHTML;
+	d.appendChild(inside);
+	for(var i = 0; i < 8; i++){
+		var el = document.createElement("div");
+		el.className = "resz";
+		el.resizefn = new Array();
+		setstyle(el, borders[i][0]);
+		var zi = 20;
+		if(borders[i][1]) setstyle(el, borders[i][1]);
+		else{ zi = 19; el.style[borders[i][0][0]] = "0px"; el.resizefn.push(null);}
+		el.style.cursor = _cursor + "-resize";
+		_cursor = "";
+		el.onmousedown = rs;
+		d.appendChild(el);
+	}
+	document.body.appendChild(d);
+	return inside;
+}
+function getPosition(el) {
+	var left = 0, top = 0;
+	while(el){
+		left += el.offsetLeft;
+		top += el.offsetTop;
+		el = el.parentOffset;
+	}
+	return {left: left, top: top};
+}
+function getStyleProp(el, prop){
+	var p = window.getComputedStyle(el, null).getPropertyValue(prop);
+	return parseInt(p);
+}
+function pE(e){
+	if(e.preventDefault) e.preventDefault();
+	if(e.stopPropagation) e.stopPropagation();
+}
+var maxX, maxY, X, Y;;
+var oldmove, oldup;
+var activeEl;
+var moving = false;
+function ds(e){
+	activeEl = this;
+	setProps(e, dro);
+}
+function setProps(e, onmove){
+	pE(e);
+	moving = true;
+	oldmove = window.onmousemove;
+	oldup = window.onmouseup;
+	window.onmousemove = onmove;
+	window.onmouseup = de;
+	var pos = getPosition(activeEl);
+	X = pos.left - e.clientX - getStyleProp(activeEl, "margin-left");
+	Y = pos.top - e.clientY - getStyleProp(activeEl, "margin-top");
+	maxX = window.innerWidth - (activeEl.offsetWidth + getStyleProp(activeEl, "margin-right"));
+	maxY = window.innerHeight - (activeEl.offsetHeight + getStyleProp(activeEl, "margin-bottom"));
+}
+var oW, oH, oX, oY;
+var resizeF;
+function rs(e){
+	activeEl = this.parentElement;
+	setProps(e, res);
+	resizeF = this.resizefn;
+	oX = e.clientX; oY = e.clientY;
+	oW = activeEl.clientWidth;
+	oH = activeEl.clientHeight;
+}
+function dro(e){
+	if(!moving) return true;
+	pE(e);
+	var L = X + e.clientX;
+	var T = Y + e.clientY;
+	if(L < 0) L = 0; if(T < 0) T = 0;
+	if(L > maxX) L = maxX; if(T > maxY) T = maxY;
+	activeEl.style.left = L + "px";
+	activeEl.style.top = T + "px";
+	return false;
+}
+function res(e){
+	if(!moving) return true;
+	pE(e);
+	resizeF[0](e);
+	if(resizeF[1]) resizeF[1](e);
+	return false;
+}
+function resLR(e, Left){
+	var L = X + e.clientX;
+	if(Left && L < 0) L = 0;
+	if(!Left && L > maxX) L = maxX;
+	var dW = (L - X - oX) * ((Left) ? -1 : 1);
+	var nW = oW + dW;
+	if(nW > minW && nW < maxW){
+		activeEl.style.width = nW;
+		if(Left) activeEl.style.left = L + "px";
+	}
+}
+function resL(e){
+	resLR(e, true);
+}
+function resR(e){
+	resLR(e, false);
+}
+function resUD(e, Up){
+	var T = Y + e.clientY;
+	if(Up && T < 0) T = 0;
+	if(!Up && T > maxY) T = maxY;
+	var dH = (T - Y - oY) * ((Up) ? -1 : 1);
+	var nH = oH + dH;
+	if(nH > minH && nH < maxH){
+		activeEl.style.height = nH;
+		if(Up) activeEl.style.top = T + "px";
+	}
+}
+function resU(e){
+	resUD(e, true);
+}
+function resD(e){
+	resUD(e, false);
+}
+function de(e){
+	pE(e); moving = false;
+	resizeF = []; activeEl = null;
+	window.onmousemove = oldmove;
+	window.onmouseup = oldup;
+}
+function placeDiv(left, top){
+	var El = this.parentElement;
+	El.style.left = left + "px";
+	El.style.top = top + "px";
+}
+function resizeDiv(w, h){
+	var El = this.parentElement;
+	El.style.width = w;
+	El.style.height = h;
+}
+return{
+	init:   mkDiv,
+	setp:  placeDiv,
+	resize: resizeDiv
+};
+}();

index.html

@@ -0,0 +1,91 @@
+<html>
+<head><title>Different usefull small scripts</title>
+<meta http-equiv="content-type" content="text/html; charset=koi8-r">
+<!-- Drag and resize -->
+<script src="dragJS/dragJS.js"></script>
+<link rel="stylesheet" href="dragJS/dragJS.css">
+<!-- Date/time -->
+<script src="datetime/datetime.js"></script>
+<link rel="stylesheet" href="datetime/datetime.css">
+<!-- Context help -->
+<script src="contexthelp/contexthelp.js"></script>
+<link rel="stylesheet" href="contexthelp/contexthelp.css">
+
+<script>
+var elementsCache = {};
+function $(id) {
+	if (elementsCache[id] === undefined)
+		elementsCache[id] = document.getElementById(id);
+	return elementsCache[id];
+}
+function start(){
+// dragJS
+	addDR();
+// datetime
+	initDatePicker("datetime");
+// contexthelp
+	initContextHelp();
+}
+//    Example of dragJS usage --->
+var dragged;
+function addDR(){
+	dragged = DRdiv("Drag me and resize me!");
+	dragged.id = "DRdiv";
+	dragged.place(300,300);
+	dragged.resize(250,250);
+	var rdr = $("rmDR");
+	rdr.innerHTML = "remove DR";
+	rdr.onclick = rm;
+}
+function rm(){
+	dragged.delete();
+	var rdr = $("rmDR");
+	rdr.innerHTML = "add DR";
+	rdr.onclick = addDR;
+}
+// <--- Example of dragJS usage
+
+// Example of datetime usage --->
+var datepicker = null;
+function initDatePicker(elID){
+	var days = ["÷Ó", "ðÎ", "÷Ô", "óÒ", "þÔ", "ðÔ", "óÂ"];
+	var months=["ñÎ×ÁÒØ", "æÅ×ÒÁÌØ", "íÁÒÔ", "áÐÒÅÌØ", "íÁÊ", "éÀÎØ", "éÀÌØ",
+				"á×ÇÕÓÔ", "óÅÎÔÑÂÒØ", "ïËÔÑÂÒØ", "îÏÑÂÒØ", "äÅËÁÂÒØ"];
+	datepicker = new DatePicker(elID, false, "dmy", ".", false, days, months);
+}
+function datetime(){
+	datepicker.display();
+}
+function show_dt(){
+	if(!datepicker) return;
+	var D = datepicker.getDate();
+	if(!D) return;
+	alert(D.toLocaleString());
+}
+// <--- Example of datetime usage
+
+// Example of contexthelp usage --->
+var helptip;
+function initContextHelp(){
+	const helpArr = {
+		DRdiv:    "This is a draggable and resizible div",
+		rmDR:     "Press this to remove or create draggable and resizible div.<br> Try it!",
+		datetime: "This is a sample datetime field.<br>You can try to select date and time by clicking on image: <img src='datetime/cal.jpg'.",
+		dtimg:    "Click this image to call date/time picker.",
+		showdt:   "Click it for alert with date object from field to the left."
+	};
+	const helpLbl = "Click me or press ESC<br>îÁÖÍÉ ÖÅ ÎÁ ÍÅÎÑ (ÉÌÉ ÈÏÔÑ ÂÙ ÎÁ ESC)!";
+	helptip = new ContextHelp();
+	helptip.init(helpArr, helpLbl);
+	helptip.mkLabel("Press 4 help");
+}
+
+// <--- Example of contexthelp usage
+</script>
+</head>
+<body onload="start();">
+<span id="rmDR"></span><br>
+Place date/time here: <input name='datetime' class='datetime' id='datetime' type="datetime">
+<img onclick='datetime("datetime");' class='dpBtn' src='datetime/cal.jpg' name='cal' id='dtimg'>
+<span onclick="show_dt();" id="showdt">Show date</span><br>
+</body></html>