

/*
Written By - David NG

example:
var obj = new DInputDefaultTextClass( "input_object_id", "default text" );
<input onclick="obj.KeywordClick()" onblur="obj.KeywordBlur()" />
window.onload => obj.KeywordBlur();

*/
var DInputDefaultTextClass = function( id, text )
{
	this.__constructor = function( id, text )
	{
		id   = id   || "";
		text = text || "";
		this.SetID( id );
		this.SetDefaultText( text );
	}










	this.SetID = function( id )
	{
		this.objID = id;
	}
	this.GetID = function( )
	{
		return this.objID;
	}
	this.SetDefaultText = function( text )
	{
		this.defaultText = text;
	}
	this.GetDefaultText = function( )
	{
		return this.defaultText;
	}










	this.KeywordClick = function( )
	{
		var tmpObj = document.getElementById( this.objID );
		if( tmpObj )
		{
			if( tmpObj.value == this.defaultText )
				tmpObj.value = ""
			tmpObj.style.color = "";
		}
	}
	this.KeywordBlur = function( )
	{
		var tmpObj = document.getElementById( this.objID );
		if( tmpObj )
		{
			if( tmpObj.value.length == 0 )
			{
				tmpObj.value = this.defaultText;
				tmpObj.style.color = "gray";
			}
		}
	}
	this.SearchOnSubmit = function( )
	{
		var tmpObj = document.getElementById( this.objID );
		if( tmpObj )
		{
			if( tmpObj.value == this.defaultText )
				tmpObj.value = "";
			return true;
		}
		return false;
	}










	this.__constructor( id, text );
}






























/*
Written By - David NG

example:
obj = new DPUWindowClass(  );
<td onmouseover="obj.SetHTML( html )"  onmousemove="obj.Show(event)"  onmouseout="obj.Hide()" >mouse over here</td>

*/
var DPUWindowClass = function(  )
{

	this.__constructor = function(  )
	{

		if( document.readyState!=undefined && document.readyState.toString().toLowerCase()!="complete" )
		{
			if( window.global_tmp_dpuwindow_obj_ary == undefined )
				window.global_tmp_dpuwindow_obj_ary = [];
			window.global_tmp_dpuwindow_obj_ary[ window.global_tmp_dpuwindow_obj_ary.length ] = this;

			setTimeout( function()
				{
					for( var i=window.global_tmp_dpuwindow_obj_ary.length-1; i>=0; i-- )
					{
						window.global_tmp_dpuwindow_obj_ary[ i ].__constructor( );
						window.global_tmp_dpuwindow_obj_ary.pop();
					}
				}, 100 );
		}
		else
		{
			// add this object to the global array.
			if( window.global_dpuwindow_obj_ary == undefined )
				window.global_dpuwindow_obj_ary = [];
			window.global_dpuwindow_obj_ary[ window.global_dpuwindow_obj_ary.length ] = this;

			this.Create();
			this.Hide();
		}
	}










	this.SetTop = function( v )
	{
		v = v || 0;
		this.top = v;
	}
	this.SetLeft = function( v )
	{
		v = v || 0;
		this.left = v;
	}
	this.SetWidth = function( v )
	{
		v = v || 200;
		this.width = v;
	}
	this.SetHeight = function( v )
	{
		v = v || 220;
		this.height = v;
	}










	this.Create = function()
	{
		if( this.baseObj != undefined )
			return;

		// define objects
		this.baseObj = document.createElement("div");
		document.body.appendChild( this.baseObj );

		// construct Base object
		this.baseObj.style.position = 'absolute';
		this.baseObj.style.left = "0px";
		this.baseObj.style.top = "0px";
		/*
		this.baseObj.style.padding = "5px";
		this.baseObj.style.backgroundColor = "white";
		this.baseObj.style.border = "1px solid #7A96DF";
		*/
	}


	this.SetHTML = function( iHTML )
	{
		if( this.baseObj == undefined )
			return;

		this.baseObj.innerHTML = iHTML;
	}



	this.Show = function( evt )
	{
		if( this.baseObj == undefined )
			return;

		if( this.baseObj.innerHTML != "" )
		{
			// Hide all calendar
			var o = window.global_dpuwindow_obj_ary;
			for( var i=0; i<o.length; i++ )
				o[i].Hide();

			// get the calendar object
			var obj = this.pObj || this;
			if( obj.baseObj == undefined )
				return
			// get the event object
			if( evt == undefined )
				evt = window.event||window.Event;

			// show the calendar in the correct position
			var cursorY, cursorX, pageH, pageW;
			if( evt.pageX )
			{
				cursorY = evt.pageY;
				cursorX = evt.pageX;
			}
			else
			{
				cursorY = evt.clientY + GetScrollTop();
				cursorX = evt.clientX + GetScrollLeft();
			}
			obj.SetTop( cursorY+5 );
			obj.SetLeft( cursorX+15 );
			obj.baseObj.style.top = obj.top+"px";
			obj.baseObj.style.left = obj.left+"px";
			obj.baseObj.style.display = "block";
		}
	}



	this.Hide = function( )
	{
		if( this.baseObj == undefined )
			return

		this.baseObj.style.display = "none";
	}










	this.__constructor(  );
}






























/*
Written By - David NG

example:
new DPUCalendarClass( "image_id_click_here_to_popup", width,height, new Array("input_id_year","input_id_month","input_id_day") );

*/
var DPUCalendarClass = function( triggerID, w, h, toElementIDAry )
{

	this.__constructor = function( triggerID, w, h, toElementIDAry )
	{
		if( "undefined" == typeof(gTimeInt) )
		{
			alert("Define gTimeInt first, make sure it's gTimeInt+=1000 for every seconds.");
			return
		}
		this.SetTriggerID( triggerID );
		this.SetTop();
		this.SetLeft();
		this.SetWidth( w );
		this.SetHeight( h );
		this.toElementIDAry = toElementIDAry;

		var tmpObj = document.getElementById(triggerID);
		if( (document.readyState!=undefined && document.readyState.toString().toLowerCase()!="complete") || !tmpObj )
		{
			if( window.global_tmp_dpucalendar_obj_ary == undefined )
				window.global_tmp_dpucalendar_obj_ary = [];
			window.global_tmp_dpucalendar_obj_ary[ window.global_tmp_dpucalendar_obj_ary.length ] = this;

			setTimeout( function()
				{
					for( var i=window.global_tmp_dpucalendar_obj_ary.length-1; i>=0; i-- )
					{
						window.global_tmp_dpucalendar_obj_ary[ i ].__constructor( 
							window.global_tmp_dpucalendar_obj_ary[ i ].triggerID, 
							window.global_tmp_dpucalendar_obj_ary[ i ].width, 
							window.global_tmp_dpucalendar_obj_ary[ i ].height, 
							window.global_tmp_dpucalendar_obj_ary[ i ].toElementIDAry
						);
						window.global_tmp_dpucalendar_obj_ary.pop();
					}
				}, 100 );
		}
		else
		{
			// add this calendar object to the global array.
			if( window.global_dpucalendar_obj_ary == undefined )
				window.global_dpucalendar_obj_ary = [];
			window.global_dpucalendar_obj_ary[ window.global_dpucalendar_obj_ary.length ] = this;
		


			this.cellData = [
				["","","","","","",1,2,3,4,5,6,7],
				[2,3,4,5,6,7,8,9,10,11,12,13,14],
				[9,10,11,12,13,14,15,16,17,18,19,20,21],
				[16,17,18,19,20,21,22,23,24,25,26,27,28],
				[23,24,25,26,27,28,29,30,31,"","","",""],
				[30,31,"","","","","","","","","","",""]
			];

			this.Create();
			this.SetTime( new Date(gTimeInt) );
			this.Hide();

			if( this.triggerID != undefined )
			{
				var triggerObj = document.getElementById( this.triggerID );
				triggerObj.pObj = this;
				triggerObj.onclick = this.Show;
			}
		}
	}










	// Setter
	this.SetTime= function( t )
	{
		var calendarObj = this.pObj || this;
		if( calendarObj.baseObj == undefined )
			return
		calendarObj.selYearObj.value = t.getFullYear();
		calendarObj.selMonthObj.selectedIndex = t.getMonth();
		calendarObj.DateChange();
	}

	this.SetTriggerID = function( v )
	{
		if( v != undefined )
			this.triggerID = v;
	}
	this.SetTop = function( v )
	{
		v = v || 0;
		this.top = v;
	}
	this.SetLeft = function( v )
	{
		v = v || 0;
		this.left = v;
	}
	this.SetWidth = function( v )
	{
		v = v || 200;
		this.width = v;
	}
	this.SetHeight = function( v )
	{
		v = v || 220;
		this.height = v;
	}










	this.Show = function( evt )
	{
		// Hide all calendar
		var o = window.global_dpucalendar_obj_ary;
		for( var i=0; i<o.length; i++ )
			o[i].Hide();

		// get the calendar object
		var calendarObj = this.pObj || this;
		if( calendarObj.baseObj == undefined )
			return
		// get the event object
		if( evt == undefined )
			evt = window.event||window.Event;

		// get the time from input box and set it to the calendar object
		var t = new Date(gTimeInt);
		if( document.getElementById(calendarObj.toElementIDAry[0])!=undefined && (document.getElementById(calendarObj.toElementIDAry[0]).value.trim()|0)>0 )
			t.setYear( document.getElementById( calendarObj.toElementIDAry[0] ).value.trim()|0 );
		if( document.getElementById(calendarObj.toElementIDAry[1])!=undefined && (document.getElementById(calendarObj.toElementIDAry[1]).value.trim()|0)-1>=0 )
			t.setMonth( (document.getElementById( calendarObj.toElementIDAry[1] ).value.trim()|0)-1 );
		calendarObj.SetTime( t );

		// show the calendar in the correct position
		var cursorY, cursorX, pageH, pageW;
		if( evt.pageX )
		{
			cursorY = evt.pageY;
			cursorX = evt.pageX;
		}
		else
		{
			cursorY = evt.clientY + GetScrollTop();
			cursorX = evt.clientX + GetScrollLeft();
		}
		pageH = document.body.clientHeight+GetScrollTop();
		pageW = document.body.clientWidth+GetScrollLeft();
		if( cursorY+calendarObj.height > pageH )
			cursorY = pageH-calendarObj.height;
		if( cursorX+calendarObj.width > pageW )
			cursorX = pageW-calendarObj.width;
		calendarObj.SetTop( cursorY );
		calendarObj.SetLeft( cursorX );
		calendarObj.baseObj.style.top = calendarObj.top+"px";
		calendarObj.baseObj.style.left = calendarObj.left+"px";
		calendarObj.baseObj.style.width = calendarObj.width+"px";
		calendarObj.baseObj.style.height = calendarObj.height+"px";
		calendarObj.baseObj.style.display = "block";
	}





	this.Hide = function( )
	{
		if( this.baseObj == undefined )
			return

		this.baseObj.style.display = "none";
	}





	this.Create = function()
	{
		if( this.baseObj != undefined )
			return;

		// define objects
		this.baseObj = document.createElement("div");
		this.YMObj = document.createElement("table");
		this.selYearObj = document.createElement("select");
		this.selMonthObj = document.createElement("select");
		this.calObj = document.createElement("div");
		this.weekObj = document.createElement("table");
		this.tblObj = document.createElement("table");

		document.body.appendChild( this.baseObj );
		this.baseObj.appendChild( this.YMObj );
		this.baseObj.appendChild( this.weekObj );
		this.baseObj.appendChild( this.tblObj );

		// construct Base object
		this.baseObj.style.position = 'absolute';
		this.baseObj.style.left = this.left+"px";
		this.baseObj.style.top = this.top+"px";
		this.baseObj.style.width = this.width+"px";
		this.baseObj.style.height = this.height+"px";
		this.baseObj.style.overflow = "hidden";
		this.baseObj.style.backgroundColor = "#7A96DF";
		this.baseObj.style.border = "2px solid #7A96DF";



		// construct YM object
		this.YMObj.style.position = 'relative';
		this.YMObj.style.left = "0px";
		this.YMObj.style.top = "0px";
		this.YMObj.style.width = "100%";
		this.YMObj.style.height = "10%";
		this.YMObj.insertRow(-1);
		this.YMObj.rows[0].insertCell(-1);
		this.YMObj.rows[0].insertCell(-1);
		this.YMObj.rows[0].cells[0].align = "center";
		this.YMObj.rows[0].cells[1].align = "center";
		this.YMObj.rows[0].cells[0].appendChild( this.selYearObj );
		this.YMObj.rows[0].cells[1].appendChild( this.selMonthObj );
		// construct Year object
		for( var i=2000; i<=2020; i++ )
		{
			var optionObj = document.createElement("option");
			optionObj.value = i;
			optionObj.innerHTML = i+"年";
			this.selYearObj.appendChild( optionObj );
		} 
		// construct Month object
		var MonStrAry = new Array("一","二","三","四","五","六","七","八","九","十","十一","十二"); //[ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
		for( var i=0; i<MonStrAry.length; i++ )
		{
			var optionObj = document.createElement("option");
			optionObj.value = i;
			optionObj.innerHTML = MonStrAry[i]+"月";
			this.selMonthObj.appendChild( optionObj );
		}

		// construct Week object
		this.weekObj.style.position = 'relative';
		this.weekObj.style.left = "0px";
		this.weekObj.style.top = "0px";
		this.weekObj.style.width = "100%";
		this.weekObj.style.height = "10%";
		this.weekObj.style.fontSize = "9pt";
		this.weekObj.style.fontWeight = "bold";
		this.weekObj.style.textAlign = "center";
		this.weekObj.style.color = "#D8E4F8";
		this.weekObj.style.backgroundColor = "#7CB6DF";
		this.weekObj.style.tableLayout = "fixed";
		this.weekObj.cellSpacing = 1;

		// construct Table object
		this.tblObj.style.position = 'relative';
		this.tblObj.style.left = "0px";
		this.tblObj.style.top = "0px";
		this.tblObj.style.width = "100%";
		this.tblObj.style.height = "80%";
		this.tblObj.style.fontSize = "9pt";
		this.tblObj.style.fontWeight = "bold";
		this.tblObj.style.textAlign = "center";
		this.tblObj.style.backgroundColor = "#7A96DF";
		this.tblObj.style.tableLayout = "fixed";
		this.tblObj.style.overflow = "hidden";
		this.tblObj.cellSpacing = 1;


		// add event		
		this.YMObj.pObj = this;
		this.selYearObj.pObj = this;
		this.selMonthObj.pObj = this;
		this.tblObj.pObj = this;
		this.baseObj.pObj = this;
		this.selYearObj.onchange = function()
		{
			this.pObj.DateChange();
		}
		this.selMonthObj.onchange = function()
		{
			this.pObj.DateChange();
		}
		this.selYearObj.onmousedown = function( evt )
		{
			if( typeof(evt) == 'undefined' )
				evt = window.event||window.Event;
			evt.cancelBubble = true;
		}
		this.selMonthObj.onmousedown = function( evt )
		{
			if( typeof(evt) == 'undefined' )
				evt = window.event||window.Event;
			evt.cancelBubble = true;
		}
		this.baseObj.onmousemove = function( evt )
		{
			if( typeof(this.pObj.isMovable)!="undefined" &&  this.pObj.isMovable==true )
			{
				if( typeof(evt) == 'undefined' )
					evt = window.event||window.Event;

				var currMouseX = evt.pageX || evt.clientX;
				var currMouseY = evt.pageY || evt.clientY;
				this.pObj.baseObj.focus();
				this.pObj.baseObj.style.left = ( this.pObj.objX + (currMouseX - this.pObj.mouseX) )+"px";
				this.pObj.baseObj.style.top  = ( this.pObj.objY + (currMouseY - this.pObj.mouseY) )+"px";
			}
		}
		this.baseObj.onmousedown = function( evt )
		{
			if( typeof(evt) == 'undefined' )
				evt = window.event||window.Event;

			this.pObj.isMovable = true;
			this.pObj.mouseX = evt.pageX || evt.clientX;
			this.pObj.mouseY = evt.pageY || evt.clientY;
			this.pObj.objX = this.pObj.baseObj.offsetLeft;
			this.pObj.objY = this.pObj.baseObj.offsetTop;
		}
		this.baseObj.onmouseup = function()
		{
			this.pObj.isMovable = false;
		}



		// append objects
		var WeekStrAry = ["日","一","二","三","四","五","六"]; //[ "S", "M", "T", "W", "T", "F", "S" ];
		this.weekObj.insertRow(-1);
		for( var x=0; x<7; x++ )
		{
			this.CreateCell( this.weekObj, WeekStrAry[x], "", "" );
		}

		for( var y=0; y<6; y++ )
		{
			this.tblObj.insertRow(-1);
			for( var x=0; x<7; x++ )
			{
				this.CreateCell( this.tblObj, "", "", "white" );
			}
		}
	}





	this.CreateCell = function( tblObj, txt, w, bgcolor )
	{
		if( tblObj == undefined )
			return;

		txt = txt || "";
		var lastRow = tblObj.rows[ tblObj.rows.length-1 ];
		lastRow.insertCell(-1);
		var lastCell = lastRow.cells[ lastRow.cells.length-1 ];
		lastCell.appendChild( document.createTextNode( txt ) );
		lastCell.pObj = this;

		if( w!=undefined && w!="" )
			lastCell.style.width = w;
		if( bgcolor!=undefined && bgcolor!="" )
			lastCell.style.backgroundColor = bgcolor;

		return lastCell;
	}





	this.DateChange = function()
	{
		var calendarObj = this.pObj || this;

		var firstDay = 7-new Date( calendarObj.selYearObj.options[calendarObj.selYearObj.selectedIndex].value, calendarObj.selMonthObj.selectedIndex ).getDay()-1;
		var year     = calendarObj.selYearObj.options[calendarObj.selYearObj.selectedIndex].value;
		var month    = calendarObj.selMonthObj.selectedIndex+1;
		var maxDay   = new Date(year,month,0).getDate();
		var dayPtr   = 0;


		for( var y=0; y<6; y++ )
		{
			for( var x=0; x<7; x++ )
			{
				calendarObj.tblObj.rows[y].cells[x].style.backgroundColor = "white";
				if( calendarObj.cellData[y][x+firstDay]=="" || dayPtr>=maxDay )
				{
					calendarObj.tblObj.rows[y].cells[x].innerHTML = "&nbsp;";
					calendarObj.tblObj.rows[y].cells[x].onclick = function(){}
				}
				else
				{
					dayPtr++;
					calendarObj.AddEventToCell( calendarObj.tblObj.rows[y].cells[x], calendarObj.cellData[y][x+firstDay] );

					if( x == 0 )
						calendarObj.tblObj.rows[y].cells[x].style.backgroundColor = "pink";
				}
			}
		}
	}





	this.AddEventToCell = function( o, day )
	{
		o.innerHTML = day;
		o.onclick = function()
		{
			var year    = this.pObj.selYearObj.options[this.pObj.selYearObj.selectedIndex].value;
			var month   = this.pObj.selMonthObj.selectedIndex+1;
			var dateAry = [ year, month, day];
			for( var i=0; i<this.pObj.toElementIDAry.length; i++ )
			{
				document.getElementById( this.pObj.toElementIDAry[i] ).value = dateAry[i];
			}

			this.pObj.Hide();
		}
	}










	this.__constructor( triggerID, w, h, toElementIDAry );
}


