function DateTimeInput(element)
{
	this.dtElement = element;
	this.selDate = new Date();
	hrs = this.selDate.getHours();
	if (hrs<8) hrs = 8;
	if (hrs>20) hrs = 20;
	this.selDate.setHours(hrs);
	this.selDate.setMinutes(0);

	if (this.dtElement.value!="")
	{
		this.selDate = this.fromStr(element.value);
	}
	
	element.value = this.toStr();
	this.bindMethodsToObj("openSelector","hideIfOutside","createSelector","yearDown","yearUp","monthUp","monthDown","selectDay","openTime","selectTime","keyDownEvent");
	
	if (element.attachEvent)
	{
		element.attachEvent("onclick",this.openSelector);
		element.attachEvent("onkeydown",this.keyDownEvent);
		element.attachEvent("onkeypress",this.keyDownEvent);
	}
	
	if (element.addEventListener)
	{
		element.addEventListener("click",this.openSelector,false);
		element.addEventListener("keydown",this.keyDownEvent,false);
		element.addEventListener("keypress",this.keyDownEvent,false);
	}
	
	this.selector = document.getElementById("selector_"+element.id);
	this.selector.style.position = "absolute";
	this.selector.style.display = "none";
	this.selector.innerHTML = '\
	<div class="myselector" style="width:100%">\
        <table cellpadding="0" cellspacing="0" border="0" width="100%">\
        <tr>\
            <td id="yeardown" class="laq" onmouseout="this.className=\'laq\'" onmouseover="this.className=\'laq_hover\'" width="10px"><b>&laquo;</b></td>\
            <td id="monthdown" class="lt" onmouseout="this.className=\'lt\'" onmouseover="this.className=\'lt_hover\'" width="10px"><b>&lt;</b></td>\
            <td class="mname" onmouseout="this.className=\'mname\'" onmouseover="this.className=\'mname_hover\'"><span id="monthname">Ôåâðàëü</span> <span id="yearname">2011</span></td>\
            <td id="monthup" class="gt" onmouseout="this.className=\'gt\'" onmouseover="this.className=\'gt_hover\'" width="10px"><b>&gt;</b></td>\
            <td id="yearup" class="raq" onmouseout="this.className=\'raq\'" onmouseover="this.className=\'raq_hover\'" width="10px"><b>&raquo;</b></td>\
        </tr>\
        </table>\
    </div>\
    <div class="dayselector" id="dayselector">\
    	\
    </div>\
    <div class=timeselector>\
    <input type=text size="5" id=time style="text-align:center"/>\
    <div style="display:none;position:absolute;left:65px;top:177px" id="timesel">\
    	<select size="10" style="width:100px" id="timesa">\
            <option value="8:0">08:00</option>\
            <option value="8:30">08:30</option>\
            <option value="9:0">09:00</option>\
            <option value="9:30">09:30</option>\
            <option value="10:0">10:00</option>\
            <option value="10:30">10:30</option>\
            <option value="11:0">11:00</option>\
            <option value="11:30">11:30</option>\
            <option value="12:0">12:00</option>\
            <option value="12:30">12:30</option>\
            <option value="13:0">13:00</option>\
            <option value="13:30">13:30</option>\
            <option value="14:0">14:00</option>\
            <option value="14:30">14:30</option>\
            <option value="15:0">15:00</option>\
            <option value="15:30">15:30</option>\
            <option value="16:0">16:00</option>\
            <option value="16:30">16:30</option>\
            <option value="17:0">17:00</option>\
            <option value="17:30">17:30</option>\
            <option value="18:0">18:00</option>\
            <option value="18:30">18:30</option>\
            <option value="19:0">19:00</option>\
            <option value="19:30">19:30</option>\
            <option value="20:0">20:00</option>\
        </select>\
    </div>\
    </div>\
	';
	
	if (document.getElementById("yeardown").attachEvent)
	{
		document.getElementById("yeardown").attachEvent("onclick",this.yearDown);
		document.getElementById("yearup").attachEvent("onclick",this.yearUp);
		document.getElementById("monthdown").attachEvent("onclick",this.monthDown);
		document.getElementById("monthup").attachEvent("onclick",this.monthUp);
		document.getElementById("time").attachEvent("onkeydown",this.keyDownEvent);
		document.getElementById("time").attachEvent("onkeypress",this.keyDownEvent);
	}
	if (document.getElementById("yeardown").addEventListener)
	{
		document.getElementById("yeardown").addEventListener("click",this.yearDown,false);
		document.getElementById("yearup").addEventListener("click",this.yearUp,false);
		document.getElementById("monthdown").addEventListener("click",this.monthDown,false);
		document.getElementById("monthup").addEventListener("click",this.monthUp,false);
		document.getElementById("time").addEventListener("keydown",this.keyDownEvent,false);
		document.getElementById("time").addEventListener("keypress",this.keyDownEvent,false);
	}
}


DateTimeInput.prototype = {
	
	months : ["ßíâàðü", "Ôåâðàëü", "Ìàðò", "Àïðåëü", "Ìàé", "Èþíü", "Èþëü", "Àâãóñò", "Ñåíòÿáðü", "Îêòÿáðü", "Íîÿáðü", "Äåêàáðü"],
	
	toStr: function()
	{
		return this.check2dig(this.selDate.getDate())+"."+this.check2dig((this.selDate.getMonth()+1))+"."+this.selDate.getFullYear()+" "+this.check2dig(this.selDate.getHours())+":"+this.check2dig(this.selDate.getMinutes());
	},
	
	fromStr: function(str_date)
	{
		arr = str_date.split(' ');
		dtarr = arr[0].split('.');
		tmarr = arr[1].split(':');
		dt = new Date(dtarr[2],dtarr[1]-1,dtarr[0],tmarr[0],tmarr[1]);		
		return dt;
	},
	
	monthUp: function()
	{
		this.selDate.setMonth(this.selDate.getMonth()+1);
		this.createSelector();
		this.dtElement.value= this.toStr();
	},
	
	monthDown: function()
	{
		this.selDate.setMonth(this.selDate.getMonth()-1);
		this.createSelector();
		this.dtElement.value= this.toStr();
	},
	
	yearUp: function()
	{
		this.selDate.setYear(this.selDate.getFullYear()+1);
		this.createSelector();
		this.dtElement.value= this.toStr();
	},
	
	yearDown: function()
	{
		this.selDate.setYear(this.selDate.getFullYear()-1);		
		this.createSelector();
		this.dtElement.value= this.toStr();
		
	},
	
	check2dig: function(i)
	{
		var i;
		
		if (i<10) 
		i = "0"+i;
		return i;
	},
	
	setPosition: function()
	{
		var offsetX = this.dtElement.offsetLeft;
		var offsetY = this.dtElement.offsetTop;
		offsetY = offsetY+this.dtElement.offsetHeight;
		this.selector.style.top = offsetY;
		this.selector.style.left = offsetX;
		
	},
	
	openSelector: function()
	{
		this.selDate = this.fromStr(this.dtElement.value);
		
		if (document.body.attachEvent)
		document.body.attachEvent("onclick",this.hideIfOutside);
		
		if (document.body.addEventListener)
		document.body.addEventListener("click",this.hideIfOutside,false);
		
		if (document.attachEvent)
		document.attachEvent("onclick",this.hideIfOutside);
		
		if (document.addEventListener)
		document.addEventListener("click",this.hideIfOutside,false);
		
		if (window.attachEvent)
		window.attachEvent("onclick",this.hideIfOutside);
		
		if (window.addEventListener)
		window.addEventListener("click",this.hideIfOutside,false);
		
		if (this.dtElement.detachEvent)
		this.dtElement.detachEvent("onclick",this.openSelector);
		
		this.createSelector();
		this.setPosition();
		this.selector.style.display = "block";
		
	},
	
	hideIfOutside: function(e)
	{
		e = e||window.event;
		src1 = "";
		if (e.srcElement) src1 = e.srcElement;
		if (e.target) src1 = e.target;
		
		if (src1!=this.dtElement)
		{

			if (!this.inSelector(e))
			{
				src = "";
				if (e.srcElement) src = e.srcElement;
				if (e.target) src = e.target;
				if (src.tagName!="OPTION")
				{
					if (src.id!="timesa")
					this.hide();
					else
					this.closeTime();
				}
			}
			else
			{
				src = "";
				if (e.srcElement) src = e.srcElement;
				if (e.target) src = e.target;
				if (src.id!="time")
				{
					this.closeTime();
				}
			}
		}
	},
	
	hide:function()
	{
		if (document.body.detachEvent)
		document.body.detachEvent("onclick",this.hideIfOutside);
		if (document.detachEvent)
				document.detachEvent("onclick",this.hideIfOutside);
		if (window.detachEvent)
				window.detachEvent("onclick",this.hideIfOutside);
				
				if (this.dtElement.attachEvent)
				this.dtElement.attachEvent("onclick",this.openSelector);
				if (this.dtElement.addEventListener)
				this.dtElement.addEventListener("click",this.openSelector,false);
				this.selector.style.display = "none";
				this.closeTime();
	},
	
	inSelector: function(al)
	{

		wd = this.selector.offsetWidth+this.selector.offsetLeft;
		hd = this.selector.offsetHeight+this.selector.offsetTop;
		var iebody=(document.compatMode && document.compatMode != "BackCompat")? document.documentElement : document.body

		var dsocleft=document.all? iebody.scrollLeft : pageXOffset
		var dsoctop=document.all? iebody.scrollTop : pageYOffset
		
		mx = dsocleft+al.clientX;
		my = dsoctop+al.clientY;
		
		if ((mx>=this.selector.offsetLeft)&&(mx<=wd)&&(my>=this.selector.offsetTop)&&(my<=hd))
		{
			return true;
		}
		else
			return false;
	},
	
	bindToObj: function(fn) {
    var self = this;
    return function() { return fn.apply(self, arguments) };
  },
  
  bindMethodsToObj: function() {
    for (var i = 0; i < arguments.length; i++) {
      this[arguments[i]] = this.bindToObj(this[arguments[i]]);
    };
  },
  
  createSelector: function() 
  {
	  this.closeTime();

	  document.getElementById("monthname").innerHTML = this.months[this.selDate.getMonth()];
	  document.getElementById("yearname").innerHTML = this.selDate.getFullYear();
	  
	  selector1 = document.getElementById("dayselector");
	  str = '\
	<table width="100%" cellpadding="0" cellspacing="0" id="seltbl">\
        <tr>\
        <td class="dayofweek">Ïí</td><td class="dayofweek">Âò</td><td class="dayofweek">Ñð</td><td class="dayofweek">×ò</td><td class="dayofweek">Ïò</td><td class="dayofweek_end">Ñá</td><td class="dayofweek_end">Âñ</td>\
        </tr>\
	';
	
	selDate = new Date(this.selDate.getFullYear(),this.selDate.getMonth(),this.selDate.getDate());
	currDate = this.selDate;

	cday = selDate.getDate();
	selDate.setDate(1);
	
	dt1 = new Date(selDate.getFullYear(),selDate.getMonth()+1,0);
	
	
	
	beg_day = selDate.getDay();
	end_day = dt1.getDay();

	if (beg_day ==0) beg_day=7;
	if (end_day ==0) end_day=7;
	
	
	
	selDate = new Date(selDate.getFullYear(),selDate.getMonth(),selDate.getDate()-beg_day+1);
	dt1 = new Date(dt1.getFullYear(),dt1.getMonth(),dt1.getDate()+(7-end_day));
	

	days = (dt1 - selDate) / 86400000;
	
	

	for (i=0;i<days;i)
	{		
		str+='<tr>';
		for (k=0;k<7;k++)
		{
			var currentDay = new Date(selDate.getFullYear(), selDate.getMonth(), selDate.getDate() + i, 12, 00);
			if ((currDate.getFullYear()==currentDay.getFullYear())&&(currDate.getMonth()==currentDay.getMonth())&&(currDate.getDate()==currentDay.getDate()))
			{
				
				if (k>4)
				{
					str+="<td width=23 class='currday selectable' day='"+currentDay.getDate()+"' onmouseout=\"this.className='currday'\" onmouseover=\"this.className='currday_hover'\">"+currentDay.getDate()+"</td>";
				}
				else
				{
					str+="<td width=23 class='currday selectable' day='"+currentDay.getDate()+"' onmouseout=\"this.className='currday'\" onmouseover=\"this.className='currday_hover'\">"+currentDay.getDate()+"</td>";
				}
			}
			else
			{
				if (currDate.getMonth()!=currentDay.getMonth())
				{
					str+="<td width=23 class=day_not>"+currentDay.getDate()+"</td>";
				}
				else
				{
					if (k>4)
					{
						str+="<td width=23 class='weekendday selectable' day='"+currentDay.getDate()+"' onmouseout=\"this.className='weekendday'\" onmouseover=\"this.className='weekendday_hover'\">"+currentDay.getDate()+"</td>";
					}
					else
					{
						str+="<td width=23 class='day selectable' day='"+currentDay.getDate()+"' onmouseout=\"this.className='day'\" onmouseover=\"this.className='day_hover'\">"+currentDay.getDate()+"</td>";
					}
				}
			}
			i++;
		}
		str+="</tr>";
	}
	
	str += '</table>';
	
	selector1.innerHTML = str;
	tbl = document.getElementById("seltbl");
	for (i=0;i<tbl.rows.length;i++)
	{
		for (k=0;k<tbl.rows[i].cells.length;k++)
		{
			cnm = tbl.rows[i].cells[k].className.split(' ');
			for (r=0;r<cnm.length;r++)
			{
				if (cnm[r]=="selectable")
				{
					if (tbl.rows[i].cells[k].attachEvent)
					tbl.rows[i].cells[k].attachEvent("onclick",this.selectDay);
					if (tbl.rows[i].cells[k].addEventListener)
					tbl.rows[i].cells[k].addEventListener("click",this.selectDay,false);
				}
			}
		}
	}
	
	tm = document.getElementById("time");
	tm.value = this.check2dig(this.selDate.getHours())+":"+this.check2dig(this.selDate.getMinutes());
	if (tm.attachEvent)
	tm.attachEvent("onclick",this.openTime);
	if (tm.addEventListener)
	tm.addEventListener("click",this.openTime,false);
  },
  
  openTime:function()
  {
	  tm = document.getElementById("time");
	  	tma = document.getElementById("timesel");
		tms = document.getElementById("timesa");
		tms.value = this.selDate.getHours()+":"+this.selDate.getMinutes();
		if (tms.attachEvent)
		tms.attachEvent("onchange",this.selectTime);
		if (tms.addEventListener)
		tms.addEventListener("click",this.selectTime,false);
	  	tma.style.left = tm.offsetLeft+"px";
		tma.style.top = tm.offsetTop+tm.offsetHeight+"px";
		tma.style.display = "block";  
  },
  
  closeTime:function()
  {
	  tma = document.getElementById("timesel");

		tma.style.display = "none";  
  },
  
  selectTime: function(e)
  {
	  e = e||window.event;
	  
	  if (e.srcElement)
	  tms = e.srcElement;
	  if (e.target)
	  tms = e.target;
	  
	  arr = tms.value.split(":");
	  
	  this.closeTime();
	  this.selDate.setHours(arr[0]);
	  this.selDate.setMinutes(arr[1]);
	  tm = document.getElementById("time");
	  tm.value = this.check2dig(this.selDate.getHours())+":"+this.check2dig(this.selDate.getMinutes());
	  this.dtElement.value= this.toStr();
	  
  },
  
  selectDay : function(e)
  {
	  e = e||window.event;

	  src = "";
	  
	  if (e.srcElement)
	  src = e.srcElement;
	  if (e.target)
	  src = e.target;
	  
	  this.selDate.setDate(src.innerHTML);

	  this.dtElement.value= this.toStr();
	  this.hide();
  },
  
  keyDownEvent:function(e)
  {
	  e = e||window.event;
	  
	  	e.returnValue = false;
	  	if (e.stopPropagation)
			e.stopPropagation();
		if (e.preventDefault)
			e.preventDefault();
		if (e.cancelBubble)
			e.cancelBubble = true;
  }
}