function showHideCalendar(clicked)
	{
		clickedDate=clicked;
		if(document.getElementById('cal').style.display=='none')
			document.getElementById('cal').style.display='block';
		else
			document.getElementById('cal').style.display='none';
	}

	function calendar()
	{
		createBase();
		manageDates();
		createTable();
		createSelect();
		createPage();
	}
	
	function createBase()
	{
		//check if there is a created element, if 1 then return 1
		if(document.getElementById('cal').childNodes.length>0)
			return true;
		var base=document.createElement('div');
		base.setAttribute('id', 'base');
		document.getElementById('cal').appendChild(base);
	}	

	function manageDates()
	{
		currentDate = new Date();
		try // try/catch statement for setting the start date 
		{
			if(sDate.length>0)
			{
				/*
				for (i=0; i<months.length; i++)
				{
					if(months[i]==sDate[1])
					{
						var mon=i;
						break;
					}
				}
				*/
				startDate=new Date(sDate[2], sDate[1], sDate[0]);
			}
		}
		catch(e)
		{
			startDate=new Date(2006,1,1);
		}
		try // try/catch statement for setting the end date
		{
			if(eDate.length>0)
			{
				for (i=0; i<months.length; i++)
				{
					if(months[i]==eDate[1])
					{
						var mon=i;
						break;
					}
				}
				endDate=new Date(eDate[2], mon, eDate[0]);
			}
		}
		catch(e)
		{
			//var cDate=new Date();
			endDate=new Date(currentDate.getFullYear()+2,currentDate.getMonth(),currentDate.getDay());
		}
		return true;
	}

	function createTable()
	{
		var base=document.getElementById('base');
		var table=document.createElement('div');
		table.setAttribute('id', 'calendarTable');
		base.appendChild(table);
		return true;
	}
	
	function createSelect()
	{
		var select;
		select='<select name="month" id="month" onChange="javascript: createPage(document.getElementById(\'year\').value, this.value)">';
		for(i=0; i<fullMonths.length; i++)
		{	
			if(i==currentDate.getMonth())
				select+='<option value="'+i+'" selected="selected">'+fullMonths[i]+'</option>';		
			else	
				select+='<option value="'+i+'">'+fullMonths[i]+'</option>';		
		}	
		select+='</select>';	
		
		select+='<select name="year" id="year" onChange="javascript: createPage(this.value, document.getElementById(\'month\').value)">';
		for(i=startDate.getFullYear(); i<=endDate.getFullYear(); i++)
		{
			if(i==currentDate.getFullYear())
				select+='<option value="'+i+'" selected="selected">'+i+'</option>';		
			else	
				select+='<option value="'+i+'">'+i+'</option>';		
		}	
		select+='</select>';
		
		select+='<div id="calendarDates"></div>';	
		document.getElementById('base').innerHTML=select;
	}
	
	function createPage(year,month)
	{
		//if year and month are not set, set them with the current year and month
		if(!year || !month)
		{
			year=currentDate.getFullYear();
			month=currentDate.getMonth();
		}	
		//how days are in the given month
		var days=32-(new Date(year, month, 32).getDate());
		//start generating the output var
		var cPage='<table ><tr>';
		for(i=0; i<shortDays.length; i++)
		{
			cPage+='<td>'+shortDays[i]+'</td>';
		}
		cPage+='</tr>';
		// we have to know on what day of the week the month starts
		firstDay=new Date(year,month, 1).getDay();
		var b=0;
		for(i=1; i<=days; i++)
		{
			if(((i<currentDate.getDate() && month<=currentDate.getMonth()) || month<currentDate.getMonth()) && year<=currentDate.getFullYear())
			{
				
				if(i==1)
				{	
					cPage+='<tr>';
					for(c=1; c<firstDay; c++)
					{	
						cPage+='<td></td>';
						b++;
					}
				}
				else if(b%7==0)
					cPage+='</tr><tr>'
				b++;
				cPage+='<td style="color:green;">'+i+'</td>';				
				continue;	
			}
			
			if(i==1)
			{	
				cPage+='<tr>';
				for(c=1; c<firstDay; c++)
				{	
					cPage+='<td></td>';
					b++;
				}
			}
			else if(b%7==0)
				cPage+='</tr><tr>';
			else if(i==days)	
			{		
				cPage+='<td onClick="changeDates(\''+i+'\', \''+((month*1)+1)+'\', \''+year+'\');">'+i+'</td>';	
				cPage+='</tr></table>';
				break;
			}
			if(i==currentDate.getDate() && month==currentDate.getMonth() && year==currentDate.getFullYear())
				cPage+='<td onClick="changeDates(\''+i+'\', \''+((month*1)+1)+'\', \''+year+'\');"><b>'+i+'</b></td>';	
			else
				cPage+='<td onClick="changeDates(\''+i+'\', \''+((month*1)+1)+'\', \''+year+'\');">'+i+'</td>';	
			b++;
		}
		document.getElementById('calendarDates').innerHTML=cPage;
		return true;
	}
	
	function changeDates(day,month,year)
	{
		if(clickedDate=='from')
		{
			var newDate=day+'-'+month+'-'+year;
			var DateTo=new Date(year, (month-1), ((day*1)+1));
			var newDateTo=DateTo.getDate()+'-'+(DateTo.getMonth()+1)+'-'+DateTo.getFullYear();
		}
		else
		{
			var newDateTo=day+'-'+month+'-'+year;
			var DateFrom=new Date(year, (month-1), ((day*1)-1));
			var newDate=DateFrom.getDate()+'-'+(DateFrom.getMonth()+1)+'-'+DateFrom.getFullYear();	
		}	
		document.getElementById('dateFrom').value=newDate;
		document.getElementById('dateTo').value=newDateTo;
		showHideCalendar();
	}